/* ==========================================================================
Scorecard – Fairway/Sand Design
Fonts: add once in your base template :
========================================================================== */
:root {
--cream: #F7F5EF;
--ink: #1E2A22;
--ink-soft: #5B665D;
--fairway: #35563F;
--fairway-deep: #233A2A;
--sand: #C89B5C;
--sand-soft: #EFE2CC;
--flag: #A8341F;
--flag-light: #DE8973;
--mud: #6B4A3A;
--hairline: #DAD5C7;
}
body {
background: var(--cream);
font-family: "IBM Plex Sans", sans-serif;
color: var(--ink);
}
.page-header h1,
.round-header h1 {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
/* Wrapper: card + horizontal scroll on small screens */
.scorecard-wrap {
display: inline-block;
max-width: 100%;
overflow-x: auto;
border-radius: 10px;
border: 1px solid var(--hairline);
box-shadow: 0 1px 3px rgba(30, 42, 34, .08);
background: #fff;
}
.scorecard {
font-family: "IBM Plex Mono", monospace;
margin-bottom: 0;
table-layout: fixed;
width: auto;
}
.scorecard th:not(:first-child),
.scorecard td:not(:first-child) {
width: 58px;
}
.scorecard td,
.scorecard th {
padding: 0.55rem 0.5rem;
border-color: var(--hairline) !important;
color: var(--ink);
white-space: nowrap;
}
/* Header row */
.scorecard thead th {
font-family: "IBM Plex Sans", sans-serif;
font-size: .7rem;
font-weight: 600;
letter-spacing: .08em;
color: var(--ink-soft);
border-bottom: 2px solid var(--fairway) !important;
padding-top: .8rem;
padding-bottom: .6rem;
background: #fff;
}
/* Row labels (first column) — sticky so they stay visible on scroll */
.scorecard th:first-child {
width: 140px;
text-align: left;
padding-left: 1rem;
font-family: "IBM Plex Sans", sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-soft);
background: #fff;
position: sticky;
left: 0;
z-index: 2;
border-right: 1px solid var(--hairline) !important;
}
/* OUT / IN / TOTAL summary columns (Bootstrap's table-secondary, retinted) */
.scorecard .table-secondary {
background-color: var(--sand-soft) !important;
color: var(--fairway-deep) !important;
border-left: 2px solid var(--sand) !important;
}
.scorecard .table-secondary:last-child {
border-left: 2px solid var(--fairway) !important;
background-color: #EDEAE2 !important;
}
/* Score row + classic golf notation */
.score-row td {
padding: 0.3rem;
font-size: 1.05rem;
font-weight: 500;
}
.mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
vertical-align: middle;
}
/* Birdie: red circle */
.mark.birdie { color: var(--flag); }
.mark.birdie::after {
content: "";
position: absolute;
inset: 1px;
border: 1.5px solid var(--flag);
border-radius: 50%;
}
/* Eagle: double red circle */
.mark.eagle { color: var(--flag); }
.mark.eagle::before {
content: "";
position: absolute;
inset: 1px;
border: 1.5px solid var(--flag);
border-radius: 50%;
}
.mark.eagle::after {
content: "";
position: absolute;
inset: 7px;
border: 1.5px solid var(--flag);
border-radius: 50%;
}
/* Bogey: square */
.mark.bogey { color: var(--ink); }
.mark.bogey::after {
content: "";
position: absolute;
inset: 3px;
border: 1.5px solid var(--ink);
}
/* Double bogey (or worse): double square. triple-bogey-plus ist in der
Statistik (stats.py) eine eigene Kategorie, aber auf der klassischen
Scorecard bekommt es bewusst dasselbe Symbol wie double-bogey - die
traditionelle Notation unterscheidet "+2" und "+3 oder mehr" nicht. */
.mark.double-bogey,
.mark.triple-bogey-plus { color: var(--ink); }
.mark.double-bogey::before,
.mark.triple-bogey-plus::before {
content: "";
position: absolute;
inset: 1px;
border: 1.5px solid var(--ink);
}
.mark.double-bogey::after,
.mark.triple-bogey-plus::after {
content: "";
position: absolute;
inset: 7px;
border: 1.5px solid var(--ink);
}
/* Kill Chrome's autofill yellow tint if score cells are elements */
.scorecard input:-webkit-autofill,
.scorecard input:-webkit-autofill:hover,
.scorecard input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: var(--ink) !important;
transition: background-color 5000s ease-in-out 0s;
}
/* ==========================================================================
Round header + stat cards
========================================================================== */
.eyebrow {
font-family: "IBM Plex Sans", sans-serif;
font-size: .85rem;
color: var(--ink-soft);
margin-bottom: .1rem;
}
.stat-card {
position: relative;
background: #fff;
border: 1px solid var(--hairline);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(30, 42, 34, .06);
padding: 1.1rem 1rem 1rem;
text-align: center;
overflow: hidden;
}
/* thin colored accent on top, ties each card to the scorecard palette */
.stat-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--hairline);
}
.stat-card--score::before { background: var(--fairway); }
.stat-card--putts::before { background: var(--sand); }
.stat-card--strokes::before { background: var(--flag); }
.stat-card--stableford::before { background: var(--fairway-deep); }
.stat-label {
font-family: "IBM Plex Sans", sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .3rem;
/* .stat-card hat overflow:hidden - ohne das hier würde ein langes
Wort (z.B. "STRAFSCHLÄGE") in einer schmalen Karte (Mobile, 2 pro
Zeile) einfach am Kartenrand abgeschnitten statt umzubrechen. */
overflow-wrap: break-word;
}
.stat-value {
font-family: "IBM Plex Mono", monospace;
font-size: 2.25rem;
font-weight: 600;
color: var(--ink);
line-height: 1.15;
}
.stat-sub {
font-family: "IBM Plex Mono", monospace;
font-size: .85rem;
color: var(--ink-soft);
margin-top: .2rem;
overflow-wrap: break-word;
}
/* Schmale Bildschirme: bei 2 Karten pro Zeile (col-6) ist weniger Platz -
etwas kompakter, damit lange stat-sub-Zeilen (z.B. "Differential 21.5
(-1.2)") nicht so schnell umbrechen. */
@media (max-width: 575.98px) {
.stat-card {
padding: .85rem .6rem .75rem;
}
.stat-value {
font-size: 1.65rem;
}
.stat-label {
font-size: .64rem;
letter-spacing: .04em;
}
.stat-sub {
font-size: .74rem;
}
}
/* Rundendetail-Kopfzeile: Buttons "Runde bearbeiten" / "Scores bearbeiten" /
"Löschen" - Text immer sichtbar (keine Icon-only-Verwirrung mehr), auf
schmalen Bildschirmen untereinander gestapelt statt gequetscht. */
@media (max-width: 575.98px) {
.round-header__actions {
flex-direction: column;
width: 100%;
}
.round-header__actions .btn {
width: 100%;
}
}
.stat-sub.under { color: var(--flag); font-weight: 600; }
.stat-sub.over { color: var(--fairway); font-weight: 600; }
/* Stat-Card als Link (z.B. "Bestleistungen" -> springt zur Runde) */
.stat-card--link {
transition: box-shadow .15s ease, border-color .15s ease;
}
.stat-card--link:hover {
border-color: var(--sand);
box-shadow: 0 3px 10px rgba(30, 42, 34, .1);
}
/* ==========================================================================
Generic card panel (used for the rounds list, etc.)
========================================================================== */
.panel {
background: #fff;
border: 1px solid var(--hairline);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(30, 42, 34, .06);
overflow: hidden;
}
/* ==========================================================================
Rounds list table
========================================================================== */
.rounds-table {
margin-bottom: 0;
font-family: "IBM Plex Sans", sans-serif;
}
.rounds-table thead th {
font-size: .7rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-soft);
background: #fff;
border-bottom: 2px solid var(--fairway) !important;
white-space: nowrap;
}
.rounds-table tbody td {
vertical-align: middle;
border-color: var(--hairline) !important;
}
.rounds-table tbody tr:hover {
background: var(--sand-soft);
}
.rounds-table .round-date {
font-family: "IBM Plex Mono", monospace;
color: var(--ink-soft);
font-size: .9rem;
white-space: nowrap;
}
.rounds-table .club-name {
font-weight: 600;
color: var(--ink);
}
.rounds-table .tee-name {
font-size: .8rem;
color: var(--ink-soft);
}
.rounds-table .score-value {
font-family: "IBM Plex Mono", monospace;
font-weight: 600;
font-size: 1.05rem;
color: var(--ink);
}
/* Nicht auf .rounds-table beschränkt - wird auch ausserhalb von Tabellen
wiederverwendet (z.B. .recent-round-row auf dem Dashboard). */
.score-topar {
font-family: "IBM Plex Mono", monospace;
font-size: .8rem;
color: var(--ink-soft);
margin-left: .25rem;
}
.score-topar.under { color: var(--flag); font-weight: 600; }
.score-topar.over { color: var(--fairway); font-weight: 600; }
.rounds-table .stableford-value {
font-family: "IBM Plex Mono", monospace;
font-weight: 600;
color: var(--ink);
}
/* Garmin-style hole progress bar: one block per hole, no numbers, just color */
.hole-bar {
display: flex;
gap: 2px;
width: 100%;
min-width: 130px;
}
.hole-bar__seg {
flex: 1 1 0;
height: 12px;
border-radius: 2px;
background: var(--hairline); /* default: not played */
}
.hole-bar__seg.eagle { background: var(--flag); }
.hole-bar__seg.birdie { background: var(--flag-light); }
.hole-bar__seg.par { background: var(--fairway); }
.hole-bar__seg.bogey { background: var(--sand); }
.hole-bar__seg.double-bogey { background: var(--mud); }
.hole-bar__seg.triple-bogey-plus { background: var(--ink); }
/* Dashboard "Letzte Runden": kompakte Zeilen-Liste statt Tabelle - eine
4-Spalten-Tabelle bricht bei 5 Einträgen in der schmalen Dashboard-Spalte
leicht um (Club-Name/Score). Eine flexible Zeile pro Runde vermeidet das
bei jeder Breite, ganz ohne separate Mobile-Variante. */
.recent-rounds {
display: flex;
flex-direction: column;
}
.recent-round-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: .75rem;
padding: .65rem 0;
border-bottom: 1px solid var(--hairline);
}
.recent-round-row:last-child {
border-bottom: 0;
}
.recent-round-row:hover {
background: var(--sand-soft);
}
.recent-round-row__club {
font-weight: 600;
color: var(--ink);
}
.recent-round-row__date {
font-family: "IBM Plex Mono", monospace;
font-size: .78rem;
color: var(--ink-soft);
}
.recent-round-row__stats {
text-align: right;
flex-shrink: 0;
white-space: nowrap;
}
.recent-round-row__stableford {
display: block;
font-family: "IBM Plex Mono", monospace;
font-size: .78rem;
color: var(--ink-soft);
}
/* Rundenliste auf Mobile: Cards statt Tabelle (kein horizontales Scrollen
mehr nötig). Desktop-Tabelle bleibt unverändert (siehe .rounds-table). */
.round-cards {
display: flex;
flex-direction: column;
gap: .75rem;
}
.round-card {
display: block;
}
.round-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: .75rem;
}
.round-card__club {
font-weight: 600;
font-size: 1.05rem;
color: var(--ink);
}
.round-card__tee {
font-size: .78rem;
color: var(--ink-soft);
}
.round-card__date {
font-family: "IBM Plex Mono", monospace;
font-size: .78rem;
color: var(--ink-soft);
white-space: nowrap;
flex-shrink: 0;
}
/* Zwei Werte nebeneinander, klar getrennt durch eine Trennlinie -
bewusst nur Score-zu-Par + Stableford, kein roher Score (siehe
.score-value in der Desktop-Tabelle: bei unvollständigen Runden ist
der ohnehin nur ein Teilergebnis, siehe Fussnote "*"). */
.round-card__stats {
display: flex;
gap: 1.5rem;
}
.round-card__stat-label {
font-size: .64rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .15rem;
}
.round-card__stat-value {
font-family: "IBM Plex Mono", monospace;
font-weight: 600;
font-size: 1.3rem;
color: var(--ink);
}
.round-card__stat-value.under { color: var(--flag); }
.round-card__stat-value.over { color: var(--fairway); }
/* Equipment-Statistik auf Mobile: Karte pro Schläger statt der breiten
8-Spalten-Tabelle (die bleibt für Desktop, siehe .club-cards d-md-none). */
.club-card__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
margin-bottom: .75rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--hairline);
}
.club-card__name {
font-weight: 600;
color: var(--ink);
}
.club-card__shots {
font-family: "IBM Plex Mono", monospace;
font-size: .78rem;
color: var(--ink-soft);
white-space: nowrap;
}
/* 2-Spalten-Grid statt einer langen Liste - halbiert die Kartenhöhe bei
5 Werten (3 Zeilen statt 5). */
.club-card__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .75rem 1rem;
}
.club-card__stat-label {
font-size: .64rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .1rem;
}
.club-card__stat-value {
font-family: "IBM Plex Mono", monospace;
font-weight: 600;
font-size: .95rem;
color: var(--ink);
overflow-wrap: break-word;
}
.club-card__miss {
font-size: .78rem;
color: var(--ink-soft);
margin-top: .75rem;
padding-top: .5rem;
border-top: 1px solid var(--hairline);
}
/* ==========================================================================
Forms (round create/edit, etc.)
========================================================================== */
.form-panel {
padding: 1.5rem;
}
.form-label-golf {
display: block;
font-family: "IBM Plex Sans", sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .35rem;
}
.form-panel .form-control,
.form-panel .form-select {
border-color: var(--hairline);
color: var(--ink);
}
.form-panel .form-control:focus,
.form-panel .form-select:focus {
border-color: var(--fairway);
box-shadow: 0 0 0 .2rem rgba(53, 86, 63, .15);
}
.form-panel .form-check-input:checked {
background-color: var(--fairway);
border-color: var(--fairway);
}
.form-panel .form-check-input:focus {
border-color: var(--fairway);
box-shadow: 0 0 0 .2rem rgba(53, 86, 63, .15);
}
.form-panel .form-check-label {
font-family: "IBM Plex Sans", sans-serif;
color: var(--ink);
font-size: .95rem;
}
.form-divider {
border-top: 1px solid var(--hairline);
margin: .25rem 0 .5rem;
opacity: 1;
}
.field-error {
font-family: "IBM Plex Sans", sans-serif;
font-size: .8rem;
color: var(--flag);
margin-top: .3rem;
}
.btn-fairway {
background: var(--fairway);
border-color: var(--fairway);
color: #fff;
font-family: "IBM Plex Sans", sans-serif;
font-weight: 600;
padding: .5rem 1.5rem;
}
.btn-fairway:hover,
.btn-fairway:focus {
background: var(--fairway-deep);
border-color: var(--fairway-deep);
color: #fff;
}
/* Fairway / GIR icon columns, if you switch those cells to ✓ / ✕ / ↷ / ↶ */
.scorecard .icon-hit { color: var(--fairway); font-weight: 600; }
.scorecard .icon-miss { color: var(--hairline); }
.scorecard .icon-dir { color: var(--sand); font-weight: 600; }
/* Fairway indicator: mini top-down fairway with a dot marking the tee shot */
.fw-icon {
position: relative;
display: inline-block;
width: 30px;
height: 26px;
vertical-align: middle;
}
.fw-icon::before {
/* the fairway shape, narrow far / wide near */
content: "";
position: absolute;
inset: 0;
background: var(--sand-soft);
clip-path: polygon(38% 0%, 62% 0%, 84% 92%, 16% 92%);
}
.fw-icon::after {
/* the ball position dot */
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
top: 42%;
transform: translate(-50%, -50%);
}
.fw-icon.fw-center::after {
left: 50%;
background: var(--fairway);
}
.fw-icon.fw-left::after {
left: 14%;
background: var(--sand);
}
.fw-icon.fw-right::after {
left: 86%;
background: var(--sand);
}
.fw-icon.fw-short::after {
left: 50%;
top: 100%;
background: var(--ink-soft);
}
@media (max-width: 640px) {
.scorecard th:not(:first-child),
.scorecard td:not(:first-child) {
width: 46px;
}
}
/* ==========================================================================
Navbar & footer
========================================================================== */
.navbar-golf {
background: var(--fairway);
}
.navbar-golf .navbar-brand {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
}
.navbar-golf .nav-link.disabled {
opacity: .45;
}
/* Abmelden-Button in der Navbar: sieht aus wie ein normaler nav-link,
ist aber ein