/* ===========================================================================
   Golf Organiser - design system

   Bootstrap 5.3 is driven by CSS custom properties, so almost everything here
   works by redefining its tokens rather than fighting its rules. That restyles
   every page at once and keeps the markup plain Bootstrap.

   The look: a golf club foundation - deep fairway green, warm paper, crisp
   type - with scoreboard energy where the numbers live.
   =========================================================================== */

:root {
    /* --- Brand ----------------------------------------------------------- */
    --golf-green-900: #0c3323;
    --golf-green-800: #14523a;
    --golf-green-700: #1a6647;
    --golf-green-600: #22815a;
    --golf-green-100: #dcefe5;
    --golf-green-050: #f0f7f3;

    /* Scoreboard accents: gold for a win, a bright flag red for danger. */
    --golf-gold: #d8a72a;
    --golf-gold-soft: #fdf6e3;
    --golf-silver: #9aa3ab;
    --golf-bronze: #b87333;

    /* --- Surfaces and ink ------------------------------------------------ */
    --paper: #f7f6f2;
    --surface: #ffffff;
    --ink: #16201b;
    --ink-muted: #667a70;
    --hairline: #e3e6e2;

    /* --- Type ------------------------------------------------------------ */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* --- Bootstrap overrides --------------------------------------------- */
    --bs-font-sans-serif: var(--font-body);
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-muted);
    --bs-border-color: var(--hairline);
    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.9rem;

    --bs-primary: var(--golf-green-700);
    --bs-primary-rgb: 26, 102, 71;
    --bs-link-color: var(--golf-green-700);
    --bs-link-color-rgb: 26, 102, 71;
    --bs-link-hover-color: var(--golf-green-900);

    --bs-success-rgb: 34, 129, 90;
    --bs-warning-rgb: 216, 167, 42;
}

/* ===========================================================================
   Base
   =========================================================================== */

body {
    background-color: var(--paper);
    /* A whisper of texture so large empty areas do not read as flat grey. */
    background-image:
        radial-gradient(circle at 15% -10%, rgba(34, 129, 90, 0.07), transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(216, 167, 42, 0.06), transparent 35%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .display-5 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    font-weight: 600;
}

h2 { font-size: 1.6rem; }
h5 { font-size: 1.05rem; }

/* Every figure on the site lines up in its column. */
table, .h3, .h4, .h5, .fs-5, .display-6, .score-figure {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.text-muted { color: var(--ink-muted) !important; }

.text-uppercase.small {
    letter-spacing: 0.07em;
    font-weight: 600;
    font-size: 0.72rem;
}

/* ===========================================================================
   Navigation
   =========================================================================== */

.golf-header {
    background: linear-gradient(120deg, var(--golf-green-800), var(--golf-green-900) 70%);
}

.navbar.golf-header {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 6px 24px rgba(12, 51, 35, 0.18);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-menu {
    border-color: var(--hairline);
    box-shadow: 0 12px 32px rgba(12, 51, 35, 0.14);
    border-radius: 0.7rem;
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: 0.45rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.93rem;
}

.dropdown-item:active { background-color: var(--golf-green-700); }

/* ===========================================================================
   Cards
   =========================================================================== */

.card {
    border: 1px solid var(--hairline);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--surface);
}

.card.shadow-sm {
    box-shadow: 0 1px 2px rgba(22, 32, 27, 0.04),
                0 6px 18px rgba(22, 32, 27, 0.05) !important;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--hairline);
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
}

.card-header strong { font-family: var(--font-display); letter-spacing: -0.01em; }

.card-body { padding: 1.1rem; }

/* A card header in brand green, used on round cards and auth panels. */
.card-header.golf-header {
    border-bottom: none;
    color: #fff;
}

.card-header.golf-header h4,
.card-header.golf-header h5,
.card-header.golf-header h6 { color: #fff; margin-bottom: 0; }

/* ===========================================================================
   Buttons
   =========================================================================== */

.btn {
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: 0.55rem;
    padding: 0.45rem 0.95rem;
}

.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.85rem; }
.btn-lg { padding: 0.7rem 1.5rem; }

.btn-golf {
    background: linear-gradient(180deg, var(--golf-green-600), var(--golf-green-700));
    border: 1px solid var(--golf-green-800);
    color: #fff;
    box-shadow: 0 1px 2px rgba(12, 51, 35, 0.2);
}

.btn-golf:hover,
.btn-golf:focus {
    background: linear-gradient(180deg, var(--golf-green-700), var(--golf-green-800));
    border-color: var(--golf-green-900);
    color: #fff;
}

.btn-golf:active { transform: translateY(1px); }

.btn-outline-secondary {
    border-color: var(--hairline);
    color: var(--ink);
    background-color: var(--surface);
}

.btn-outline-secondary:hover {
    background-color: var(--golf-green-050);
    border-color: var(--golf-green-100);
    color: var(--golf-green-900);
}

.btn-link { text-decoration: none; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

/* ===========================================================================
   Forms
   =========================================================================== */

.form-control, .form-select {
    border-color: var(--hairline);
    border-radius: 0.5rem;
    background-color: var(--surface);
}

.form-control:focus, .form-select:focus {
    border-color: var(--golf-green-600);
    box-shadow: 0 0 0 0.2rem rgba(34, 129, 90, 0.15);
}

.form-label { font-weight: 600; font-size: 0.9rem; }
.form-text { color: var(--ink-muted); font-size: 0.82rem; }

.form-check-input:checked {
    background-color: var(--golf-green-600);
    border-color: var(--golf-green-600);
}

.form-check-input:focus {
    border-color: var(--golf-green-600);
    box-shadow: 0 0 0 0.2rem rgba(34, 129, 90, 0.15);
}

.input-group-text {
    background-color: var(--golf-green-050);
    border-color: var(--hairline);
    color: var(--ink-muted);
    font-size: 0.85rem;
}

/* Score boxes are read at arm's length on a phone, so they get some size. */
.score-input {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
}

/* ===========================================================================
   Tables
   =========================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--golf-green-050);
    margin-bottom: 0;
}

.table > :not(caption) > * > * { padding: 0.7rem 0.85rem; }

.table > thead.table-light th {
    background-color: var(--golf-green-050);
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}

.table > tbody > tr > td { border-color: var(--hairline); }

.table-success {
    --bs-table-bg: var(--golf-green-100);
    --bs-table-hover-bg: #d1e8dc;
}

.table-warning { --bs-table-bg: var(--golf-gold-soft); }

/* ===========================================================================
   Scoreboard
   =========================================================================== */

/* The leading figure in a standings row - deliberately oversized. */
.fs-5.fw-bold, td.fw-bold.fs-5 {
    font-family: var(--font-display);
    font-size: 1.35rem !important;
    letter-spacing: -0.02em;
}

/* Position column. The medal colours are driven by the position itself, not
   by row order - players can share a place. */
tbody > tr > td.fw-bold:first-child {
    font-family: var(--font-display);
    font-size: 1.1rem;
}

/* Scoped to table cells too: Bootstrap's own cell colour rule is more
   specific than a bare class and would otherwise win. */
.pos-1, .table > tbody > tr > td.pos-1 { color: var(--golf-gold); }
.pos-2, .table > tbody > tr > td.pos-2 { color: var(--golf-silver); }
.pos-3, .table > tbody > tr > td.pos-3 { color: var(--golf-bronze); }

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.35em 0.6em;
    border-radius: 0.4rem;
}

.text-bg-success { background-color: var(--golf-green-600) !important; }
.text-bg-warning { background-color: var(--golf-gold) !important; color: #3d2f08 !important; }

/* ===========================================================================
   Alerts, tabs, pills
   =========================================================================== */

.alert {
    border: 1px solid var(--hairline);
    border-radius: var(--bs-border-radius-lg);
    padding: 0.8rem 1rem;
}

.alert-success {
    background-color: var(--golf-green-050);
    border-color: var(--golf-green-100);
    color: var(--golf-green-900);
}

.alert-light { background-color: var(--surface); }

.nav-tabs {
    border-bottom: 1px solid var(--hairline);
    gap: 0.15rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ink-muted);
    font-weight: 600;
    border-radius: 0;
    padding: 0.6rem 0.9rem;
}

.nav-tabs .nav-link:hover { color: var(--golf-green-700); }

.nav-tabs .nav-link.active {
    color: var(--golf-green-800);
    background: transparent;
    border-bottom-color: var(--golf-green-600);
}

.nav-pills .nav-link {
    color: var(--ink-muted);
    font-weight: 600;
    border: 1px solid var(--hairline);
    background-color: var(--surface);
    margin-right: 0.35rem;
}

.nav-pills .nav-link.active {
    background-color: var(--golf-green-700);
    border-color: var(--golf-green-800);
    color: #fff;
}

.list-group-item { border-color: var(--hairline); background-color: transparent; }

/* ===========================================================================
   Landing page
   =========================================================================== */

.hero-title {
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.hero-title .accent {
    color: var(--golf-green-700);
    /* An underline that reads as a fairway rather than a link. */
    background: linear-gradient(transparent 62%, rgba(216, 167, 42, 0.35) 62%);
}

/* ===========================================================================
   Phones
   =========================================================================== */

@media (max-width: 767.98px) {
    body { font-size: 0.95rem; }
    h2 { font-size: 1.35rem; }

    .card-body { padding: 0.9rem; }
    .table > :not(caption) > * > * { padding: 0.55rem 0.6rem; }

    /* Long score tables scroll sideways rather than squashing. */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    .navbar-nav .nav-link { padding: 0.55rem 0.6rem; }

    .fs-5.fw-bold, td.fw-bold.fs-5 { font-size: 1.15rem !important; }
}

/* Keep the player column readable while a wide table scrolls under it. */
@media (max-width: 575.98px) {
    .table-responsive .table > :not(caption) > * > *:nth-child(3) {
        min-width: 7.5rem;
    }
}

/* ===========================================================================
   Round summary - built to be screenshotted and posted in the group chat
   =========================================================================== */

.summary-card { overflow: hidden; }

.summary-heading {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.summary-row {
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--hairline);
}

.summary-row:last-child { border-bottom: none; }

.summary-row-win {
    background: linear-gradient(90deg, var(--golf-gold-soft), transparent 70%);
    border-radius: 0.5rem;
    padding-left: 0.6rem;
}

.summary-pos {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    width: 1.6rem;
    text-align: center;
    flex: 0 0 auto;
}

.summary-score {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Fiddle: sharing and player profiles
   =========================================================================== */

.btn-whatsapp {
    background-color: #25d366;
    border: 1px solid #1da851;
    color: #fff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background-color: #1da851;
    border-color: #128c3e;
    color: #fff;
}

.share-text {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.45;
    background-color: #f3faf5;
}

/* Names in tables link to profiles without turning every table green. */
.player-link { color: inherit; text-decoration: none; }
.player-link:hover { color: var(--golf-green-700); text-decoration: underline; }

.form-chart { position: relative; height: 220px; }

/* ===========================================================================
   Trip photos
   =========================================================================== */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.photo-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 0.6rem;
    overflow: hidden;
    background-color: var(--golf-green-050);
    cursor: zoom-in;
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.photo-thumb:hover img,
.photo-thumb:focus-visible img { transform: scale(1.04); }

.photo-thumb:focus-visible { outline: 3px solid var(--golf-green-600); outline-offset: 2px; }

.photo-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.2rem 0.5rem 0.4rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: #fff;
    font-size: 0.78rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.photo-strip img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.5rem;
}

@media (max-width: 575.98px) {
    .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
    .photo-strip { grid-template-columns: repeat(3, 1fr); }
}

.photo-viewer { overflow: hidden; }

.photo-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0b0f0d;
    min-height: 50vh;
}

.photo-stage img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

.viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.3rem;
}

.viewer-nav:hover { background-color: rgba(255, 255, 255, 0.3); }
.viewer-prev { left: 0.75rem; }
.viewer-next { right: 0.75rem; }

.viewer-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* Printing or saving to PDF should give the card alone, not the whole app. */
@media print {
    body { background: #fff; }
    .navbar, .alert, .d-print-none { display: none !important; }
    main { padding: 0 !important; }
    .summary-card { border: none; box-shadow: none !important; }
    .card-header.golf-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}