/* ==========================================================================
   Network Nine Golf League — design system
   ========================================================================== */

:root {
    /* Brand */
    --nn-green-900: #163a2b;
    --nn-green-800: #1d4d38;
    --nn-green-700: #256349;
    --nn-green-600: #2f7a5a;
    --nn-green-500: #3d9670;
    --nn-green-100: #e6f2ec;
    --nn-green-50:  #f3f9f6;

    --nn-gold-500: #c9a227;
    --nn-gold-600: #a9860f;

    /* Neutrals */
    --nn-ink-900: #1b211d;
    --nn-ink-700: #3d453f;
    --nn-ink-500: #6b746e;
    --nn-ink-300: #aeb6b0;
    --nn-ink-100: #e4e8e5;
    --nn-surface: #ffffff;
    --nn-bg: #f4f7f5;

    /* Status */
    --nn-danger: #b3261e;
    --nn-danger-bg: #fbeceb;
    --nn-warning: #94660a;
    --nn-warning-bg: #fbf1de;
    --nn-info: #1d5f8a;
    --nn-info-bg: #e8f1f7;
    --nn-success: var(--nn-green-700);

    /* Layout */
    --nn-navbar-height: 60px;
    --nn-sidebar-width: 240px;
    --nn-sidebar-collapsed-width: 56px;
    --nn-radius: 10px;
    --nn-radius-sm: 6px;
    --nn-shadow: 0 1px 2px rgba(22, 58, 43, 0.06), 0 1px 8px rgba(22, 58, 43, 0.06);
    --nn-shadow-lg: 0 8px 24px rgba(22, 58, 43, 0.12);

    --nn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Base ---------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--nn-font);
    color: var(--nn-ink-900);
    background-color: var(--nn-bg);
    padding-top: var(--nn-navbar-height);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--nn-green-900);
    letter-spacing: -0.01em;
}

h1 {
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

h2 {
    font-size: 1.2rem;
}

h3 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--nn-ink-500);
}

a {
    color: var(--nn-green-700);
}

a:hover {
    color: var(--nn-green-900);
}

form .error {
    color: var(--nn-danger);
}

.approval {
    color: var(--nn-danger);
}

#counter {
    color: var(--nn-danger);
}

/* ---- Top navbar ------------------------------------------------------ */

.nn-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--nn-navbar-height);
    padding: 0 1rem;
    background: linear-gradient(135deg, var(--nn-green-800), var(--nn-green-700));
    box-shadow: var(--nn-shadow);
}

.nn-navbar .navbar-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nn-navbar .navbar-brand::before {
    content: "\26F3";
    font-size: 1.1rem;
}

.nn-navbar .btn-primary,
.nn-navbar form .btn-primary {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.nn-navbar .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

.nn-sidebar-toggle {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
}

/* ---- Sidebar ----------------------------------------------------------- */

.nn-sidebar {
    position: fixed;
    top: var(--nn-navbar-height);
    bottom: 0;
    left: 0;
    width: var(--nn-sidebar-width);
    padding: 0.5rem 0.75rem 1.25rem;
    /* !important: Bootstrap's .offcanvas-lg forces background-color:
       transparent !important at >=992px (so it behaves like plain static
       content rather than an overlay panel there) - this has to win that
       fight to actually show the sidebar's own color. */
    background: var(--nn-green-900) !important;
    overflow-y: auto;
}

.nn-sidebar-header {
    justify-content: flex-end;
    padding: 0.5rem 0.1rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 0.5rem;
}

.nn-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--nn-radius-sm);
    margin-bottom: 0.15rem;
}

.nn-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nn-sidebar .nav-link.active {
    background: var(--nn-green-600);
    color: #fff;
    font-weight: 700;
}

.nn-sidebar .nav-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.75rem 0.85rem 0.25rem;
}

.nn-sidebar .offcanvas-title {
    color: #fff;
}

/* Mobile off-canvas sidebar */
@media (max-width: 991.98px) {
    .nn-sidebar {
        top: 0;
        z-index: 1045;
    }
}

.nn-content {
    padding: 1.5rem 1.25rem 3rem;
}

@media (min-width: 992px) {
    .nn-content {
        margin-left: var(--nn-sidebar-width);
    }

    /* Desktop sidebar collapse (separate from the mobile off-canvas
       behavior above/below 992px, which Bootstrap's offcanvas-lg already
       handles). Collapses to a slim rail rather than sliding fully
       offscreen, so the toggle button (in .nn-sidebar-header, a sibling of
       the nav links rather than inside them) stays put and reachable
       either way. Toggled by the button in includes/sidebar.html; state
       persisted client-side so it survives this app's full page reloads
       between pages (see the inline script in includes/header.html). */
    .nn-sidebar,
    .nn-content {
        transition: width 0.2s ease, margin-left 0.2s ease;
    }

    html.nn-sidebar-collapsed .nn-sidebar {
        width: var(--nn-sidebar-collapsed-width);
    }

    html.nn-sidebar-collapsed .nn-sidebar .offcanvas-body {
        display: none !important;
    }

    html.nn-sidebar-collapsed .nn-content {
        margin-left: var(--nn-sidebar-collapsed-width);
    }
}

.nn-sidebar-collapse-toggle {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
}

.nn-sidebar-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
}

.nn-sidebar-collapse-toggle span {
    display: inline-block;
}

/* Flip the arrow to point the other way once collapsed, so the button
   always hints at what clicking it will do next. */
html.nn-sidebar-collapsed .nn-sidebar-collapse-toggle span {
    transform: scaleX(-1);
}

/* ---- Cards / surfaces -------------------------------------------------- */

.nn-card {
    background: var(--nn-surface);
    border: 1px solid var(--nn-ink-100);
    border-radius: var(--nn-radius);
    box-shadow: var(--nn-shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.nn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* ---- Tables ------------------------------------------------------------ */

.table-responsive {
    border-radius: var(--nn-radius);
    box-shadow: var(--nn-shadow);
    background: var(--nn-surface);
    border: 1px solid var(--nn-ink-100);
    /* Clips the table's own square corners to match the wrapper's rounded
       ones. overflow-x stays auto so a table wider than its wrapper can
       still scroll horizontally on mobile (plain `overflow: hidden` here
       previously clipped that scroll away instead of allowing it - the
       card just cut the extra columns off). overflow-y: hidden is enough
       on its own to clip the top/bottom corners. */
    overflow-x: auto;
    overflow-y: hidden;
    /* Now that table.table sizes to its content (width: auto below) rather
       than stretching to fill the wrapper, shrink the card to match and
       center it, instead of leaving a card-width block of empty white
       space to the right of a narrower table. Still clamped to the
       available width so wide tables fall back to filling the wrapper and
       scrolling horizontally rather than overflowing the page. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

table.table {
    margin-bottom: 0;
    /* Bootstrap's .table-bordered drew a full grid of vertical + horizontal
       cell borders, which reads as dated/spreadsheet-y. Dropped it from
       every template in favor of this: no vertical rules at all, and only
       a hairline divider between rows (set on tbody td below), which is
       the more modern convention for a data table. */
    border-collapse: separate;
    border-spacing: 0;
    /* Bootstrap's .table sets width:100%, which forces every column to
       stretch evenly across the wrapper - fine for text-heavy columns, but
       it leaves single-digit columns (rank, handicap, etc.) with huge gaps
       of empty space around a tiny piece of content. Let the table size to
       its content instead, so columns hug their data; any leftover room
       just sits to the right of the table rather than being smeared across
       every cell. */
    width: auto;
    max-width: 100%;
}

.table th, .table td { white-space: nowrap; }

.table thead th {
    background: var(--nn-green-800);
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    padding: 0.85rem 1.1rem;
    position: sticky;
    top: 0;
    /* Headers inherit nowrap from ".table th, .table td" above, which was
       forcing multi-word ones ("Closest to the Pins", "Change In
       Handicap") onto a single wide line and dragging the whole column
       open just to fit it. The templates now break those specific headers
       onto explicit lines with <br> instead of relying on the browser to
       find a good wrap point - a table cell can end up narrower than its
       own longest word (it'll happily wrap mid-word rather than overflow),
       so an automatic wrap is unpredictable here. white-space: normal
       just makes those <br>s actually take effect. */
    white-space: normal;
    line-height: 1.25;
}

/* Sortable column headers are plain <a> links - without this they inherit
   the global link color (medium green) instead of the header's white text,
   so a sort link reads as green-on-green against the dark green header row. */
.table thead th a {
    color: inherit;
    text-decoration: none;
}

.table thead th a:hover {
    color: inherit;
    text-decoration: underline;
}

.table tbody td {
    padding: 0.7rem 1.1rem;
    vertical-align: middle;
    font-size: 0.92rem;
    border-top: none;
    border-bottom: 1px solid var(--nn-ink-100);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* First column reads as the row's "identity" (rank, player, date) on every
   one of these tables - a little more weight helps it anchor the row. */
.table tbody td:first-child {
    font-weight: 600;
    color: var(--nn-green-900);
}

/* Zebra striping back on request - handy for telling rows apart at a
   glance on tables like pairings, where each row is really a pair of
   independent golfers side by side rather than one clean record. Bootstrap
   5 actually paints the stripe as an inset box-shadow on each cell
   (`.table-striped > tbody > tr:nth-of-type(odd) > *`), not a
   background-color on the row, so it's overridden here at that same
   selector/specificity rather than via `background-color` on `tr`. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: inset 0 0 0 9999px var(--nn-green-50);
    background-color: transparent;
}

.table-hover tbody tr {
    transition: background-color 0.1s ease;
}

.table-hover tbody tr:hover {
    background-color: var(--nn-green-100);
}

.rowlink::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5em;
}

tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
    border-radius: var(--nn-radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-primary, .bg-blue {
    background-color: var(--nn-green-700) !important;
    border-color: var(--nn-green-700) !important;
}

.btn-primary:hover {
    background-color: var(--nn-green-800) !important;
    border-color: var(--nn-green-800) !important;
}

.btn-outline-primary {
    color: var(--nn-green-700) !important;
    border-color: var(--nn-green-500) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--nn-green-700) !important;
    border-color: var(--nn-green-700) !important;
}

.btn-success, .bg-green, .bg-success {
    background-color: var(--nn-green-600) !important;
    border-color: var(--nn-green-600) !important;
}

.btn-info {
    background-color: var(--nn-info) !important;
    border-color: var(--nn-info) !important;
}

.btn-danger, .bg-red, .alert-danger {
    background-color: var(--nn-danger) !important;
    border-color: var(--nn-danger) !important;
}

.btn-warning, .bg-yellow, .alert-warning {
    background-color: var(--nn-warning) !important;
    border-color: var(--nn-warning) !important;
    color: #fff !important;
}

.bg-teal {
    background-color: var(--nn-green-500) !important;
}

.bg-purple {
    background-color: #6a5fa8 !important;
}

/* ---- Forms -------------------------------------------------------------- */

.form-control, .form-select {
    border-radius: var(--nn-radius-sm);
    border-color: var(--nn-ink-100);
}

.form-control:focus, .form-select:focus {
    border-color: var(--nn-green-500);
    box-shadow: 0 0 0 0.2rem var(--nn-green-100);
}

/* The "View By Year" bar above a table: a plain block-level label, a
   full-width native <select>, and a bare text link, all left-aligned. Pull
   them into one centered row of properly-sized controls instead. */
.nn-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.85rem;
    margin: 0 0 1.5rem;
    text-align: center;
}

.nn-toolbar-label {
    margin: 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--nn-ink-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nn-year-select {
    width: auto;
    min-width: 170px;
    flex: 0 0 auto;
}

.label-row {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
    line-height: inherit;
    color: var(--nn-ink-900);
    border: 0;
    border-bottom: 1px solid var(--nn-ink-100);
    font-weight: 600;
}

.dropdown-menu > li > a {
    color: var(--nn-ink-700);
}

/* ---- Misc / legacy widgets ---------------------------------------------- */

.tree ul, .tree li {
    list-style-type: none;
}

.jstree-icon {
    padding-right: 5px;
}

div.dataTables_wrapper {
    width: 98%;
    margin: 0 auto;
}

div.dataTables_scrollBody td {
    word-wrap: break-word;
}

/* ---- Home carousel ------------------------------------------------------- */

.nn-hero {
    border-radius: var(--nn-radius);
    overflow: hidden;
    box-shadow: var(--nn-shadow-lg);
}

.nn-hero img {
    object-fit: cover;
    height: 340px;
}

@media (max-width: 575.98px) {
    .nn-hero img {
        height: 200px;
    }
}

/* ---- Responsive table columns --------------------------------------------
   Opt a column into being dropped on small screens by adding
   .nn-col-hide-mobile to both its <th> and its <td>s (e.g. Points/Handicap
   on the pairings table, where only Match + Player names matter on a phone
   and the rest is still one tap away via the table's horizontal scroll on
   larger screens). */
@media (max-width: 767.98px) {
    .nn-col-hide-mobile {
        display: none;
    }
}

/* ---- Scores landing page -------------------------------------------------
   Used to be two bare pickers on an empty page. A "Last Round Played" card
   gives it real content the moment you land (most people want to see what
   just happened, not hunt through a dropdown for it), and the pickers below
   are restyled as a matched pair of cards instead of two floating labels. */

.nn-recent-round {
    max-width: 420px;
    margin: 0 auto 2.5rem;
    padding: 1.75rem 2rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(155deg, var(--nn-green-700), var(--nn-green-900));
    border-radius: var(--nn-radius);
    box-shadow: var(--nn-shadow-lg);
}

.nn-recent-round-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
}

.nn-recent-round-date {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0.35rem 0 0.5rem;
}

.nn-recent-round-stats {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.25rem;
}

.nn-recent-round-dot {
    margin: 0 0.4rem;
    color: rgba(255, 255, 255, 0.5);
}

.nn-recent-round .btn-primary {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--nn-green-800) !important;
}

.nn-recent-round .btn-primary:hover {
    background-color: var(--nn-green-50) !important;
    border-color: var(--nn-green-50) !important;
}

.nn-score-pickers {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.nn-score-picker-card {
    width: 280px;
    max-width: 100%;
    padding: 1.75rem 1.5rem;
    text-align: center;
    background: var(--nn-surface);
    border: 1px solid var(--nn-ink-100);
    border-radius: var(--nn-radius);
    box-shadow: var(--nn-shadow);
}

.nn-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 0.75rem;
    color: var(--nn-green-700);
    background: var(--nn-green-100);
    border-radius: 50%;
}

.nn-score-picker-card h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nn-green-900);
    margin-bottom: 0.25rem;
}

.nn-picker-help {
    font-size: 0.85rem;
    color: var(--nn-ink-500);
    margin-bottom: 1rem;
}

/* ---- Golfer round history (Scores > By Golfer) ---------------------------
   A quick "at a glance" stat row above the last-12-rounds table, matching
   the card language used elsewhere (Last Round Played, picker cards). */

.nn-golfer-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 auto 2rem;
}

.nn-golfer-stat {
    min-width: 130px;
    padding: 1rem 1.5rem;
    text-align: center;
    background: var(--nn-surface);
    border: 1px solid var(--nn-ink-100);
    border-radius: var(--nn-radius);
    box-shadow: var(--nn-shadow);
}

.nn-golfer-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--nn-green-800);
}

.nn-golfer-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nn-ink-500);
}

.nn-empty-state {
    max-width: 420px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    color: var(--nn-ink-500);
    background: var(--nn-surface);
    border: 1px solid var(--nn-ink-100);
    border-radius: var(--nn-radius);
}