/* ==========================================================================
   Gym Guru - application theme
   Bootstrap 5.3 variable overrides + a thin custom layer.

   Light and dark are both driven from the same token names, so every
   component below is written once and simply reads whichever palette is
   active. The theme is set by data-theme on <html>.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('../vendor/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Light palette (default)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
    /* Brand */
    --gg-brand: #107f76;
    --gg-brand-dark: #0b5b54;
    --gg-brand-darker: #073733;
    --gg-brand-soft: #d9f7f5;
    --gg-brand-softer: #f3fcfb;
    --gg-on-soft: #06514a;
    --gg-brand-deep: #107f76;
    --gg-brand-deeper: #073733;

    /* Neutrals */
    --gg-ink: #0a121a;
    --gg-body: #16202b;
    --gg-muted: #5a6875;
    --gg-faint: #64727f;
    --gg-surface: #f6f9fc;
    --gg-card: #ffffff;
    --gg-border: #e1e8ef;
    --gg-border-soft: #eef2f6;
    --gg-input-bg: #ffffff;
    --gg-hover: #f4fbfa;

    /* Status */
    --gg-danger: #dc3545;
    --gg-danger-soft: #fdeaec;
    --gg-danger-ink: #a01722;
    --gg-warning: #d98207;
    --gg-warning-soft: #fdf1dc;
    --gg-warning-ink: #8a5300;
    --gg-success: #0f9d58;
    --gg-success-soft: #e0f5eb;
    --gg-success-ink: #0a6b3c;
    --gg-info: #107f76;
    --gg-info-soft: #ddf8f6;
    --gg-info-ink: #06544d;
    --gg-neutral-soft: #eef1f4;
    --gg-neutral-ink: #5a6875;

    /* Elevation - brand tinted, never flat grey */
    --gg-shadow-sm: 0 1px 2px rgba(10, 18, 26, .04), 0 2px 8px -2px rgba(16, 127, 118, .08);
    --gg-shadow: 0 4px 12px -2px rgba(10, 18, 26, .06), 0 16px 32px -16px rgba(16, 127, 118, .18);
    --gg-shadow-lg: 0 8px 24px -4px rgba(10, 18, 26, .08), 0 24px 48px -16px rgba(16, 127, 118, .2);
    --gg-glow: 0 6px 16px -8px rgba(16, 127, 118, .7);

    --gg-topbar-bg: rgba(255, 255, 255, .88);
    color-scheme: light;
}

/* --------------------------------------------------------------------------
   Dark palette
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --gg-brand: #2ad3c5;
    --gg-brand-dark: #52dbd0;
    --gg-brand-darker: #7ae4db;
    --gg-brand-soft: #124945;
    --gg-brand-softer: #0f3331;
    --gg-on-soft: #a8f0ea;
    --gg-brand-deep: #126861;
    --gg-brand-deeper: #0b322f;

    --gg-ink: #f1f6fa;
    --gg-body: #dbe5ee;
    --gg-muted: #94a5b6;
    --gg-faint: #8b9dae;
    --gg-surface: #0c141d;
    --gg-card: #131e29;
    --gg-border: #223140;
    --gg-border-soft: #1a2733;
    --gg-input-bg: #0f1922;
    --gg-hover: #192e2d;

    --gg-danger: #f06a76;
    --gg-danger-soft: #3a1a1e;
    --gg-danger-ink: #f7a8b0;
    --gg-warning: #f0ad3e;
    --gg-warning-soft: #3a2c12;
    --gg-warning-ink: #f5cb85;
    --gg-success: #3ec98a;
    --gg-success-soft: #12301f;
    --gg-success-ink: #8fe3ba;
    --gg-info: #2ad3c5;
    --gg-info-soft: #10413d;
    --gg-info-ink: #a0eee8;
    --gg-neutral-soft: #1e2b37;
    --gg-neutral-ink: #94a5b6;

    --gg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --gg-shadow: 0 4px 12px -2px rgba(0, 0, 0, .45);
    --gg-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
    --gg-glow: 0 6px 16px -8px rgba(42, 211, 197, .5);

    --gg-topbar-bg: rgba(19, 30, 41, .9);
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Shared tokens and Bootstrap bridge
   -------------------------------------------------------------------------- */
:root {
    --gg-sidebar-w: 264px;
    --gg-sidebar-w-collapsed: 76px;
    --gg-topbar-h: 68px;
}

:root,
[data-theme] {
    --bs-primary: var(--gg-brand);
    --bs-primary-rgb: 16, 127, 118;
    --bs-link-color: var(--gg-brand);
    --bs-link-hover-color: var(--gg-brand-dark);
    --bs-body-bg: var(--gg-surface);
    --bs-body-color: var(--gg-body);
    --bs-emphasis-color: var(--gg-ink);
    --bs-secondary-color: var(--gg-muted);
    --bs-border-color: var(--gg-border);
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-pill: 50rem;
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-heading-color: var(--gg-ink);

    /* Bootstrap components that read their own vars */
    --bs-table-color: var(--gg-body);
    --bs-table-bg: transparent;
    --bs-form-control-bg: var(--gg-input-bg);
}

[data-theme="dark"] {
    --bs-primary-rgb: 42, 211, 197;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { background: var(--gg-surface); }

body {
    font-family: var(--bs-font-sans-serif);
    background: var(--gg-surface);
    color: var(--gg-body);
    font-size: .9375rem;
    line-height: 1.55;
    transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--gg-ink);
    font-weight: 600;
    letter-spacing: -.02em;
}

h1, .h1 { font-size: 1.75rem; letter-spacing: -.03em; }
h2, .h2 { font-size: 1.375rem; letter-spacing: -.025em; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }

a { text-decoration: none; color: var(--gg-brand); }
a:hover { color: var(--gg-brand-dark); }

hr { border-color: var(--gg-border); opacity: 1; }

code { color: var(--gg-brand); background: var(--gg-brand-softer); padding: .1rem .3rem; border-radius: .3rem; }

.text-muted { color: var(--gg-muted) !important; }
.text-faint { color: var(--gg-faint) !important; }
.text-brand { color: var(--gg-brand) !important; }
.text-body { color: var(--gg-body) !important; }
.bg-brand-soft { background: var(--gg-brand-soft) !important; color: var(--gg-on-soft) !important; }
.bg-surface { background: var(--gg-surface) !important; }
.border-bottom, .border-top, .border { border-color: var(--gg-border) !important; }

/* Section eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: 50rem;
    background: var(--gg-brand-soft);
    color: var(--gg-on-soft);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */
.gg-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--gg-sidebar-w);
    background: var(--gg-card);
    border-right: 1px solid var(--gg-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease, width .25s ease;
}

.gg-sidebar__brand {
    height: var(--gg-topbar-h);
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--gg-border-soft);
    flex-shrink: 0;
}

.gg-sidebar__logo {
    width: 34px;
    height: 34px;
    border-radius: .75rem;
    background: linear-gradient(135deg, var(--gg-brand), var(--gg-brand-dark));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: var(--gg-glow);
}

.gg-sidebar__name {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--gg-ink);
    white-space: nowrap;
    overflow: hidden;
}

.gg-sidebar__nav { flex: 1; overflow-y: auto; padding: .875rem .75rem 1.5rem; }
.gg-sidebar__nav::-webkit-scrollbar { width: 6px; }
.gg-sidebar__nav::-webkit-scrollbar-thumb { background: var(--gg-border); border-radius: 3px; }

.gg-nav-heading {
    padding: 1rem .75rem .375rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gg-faint);
    white-space: nowrap;
}

.gg-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5625rem .75rem;
    border-radius: .625rem;
    color: var(--gg-muted);
    font-weight: 500;
    font-size: .875rem;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.gg-nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.gg-nav-link:hover { background: var(--gg-brand-softer); color: var(--gg-brand); }

.gg-nav-link.active {
    background: var(--gg-brand-soft);
    color: var(--gg-on-soft);
    font-weight: 600;
}

.gg-nav-link .badge { margin-left: auto; }

.gg-main {
    margin-left: var(--gg-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .25s ease;
}

.gg-topbar {
    height: var(--gg-topbar-h);
    background: var(--gg-topbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gg-border);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.gg-content { padding: 1.5rem; flex: 1; }

body.gg-collapsed .gg-sidebar { width: var(--gg-sidebar-w-collapsed); }
body.gg-collapsed .gg-main { margin-left: var(--gg-sidebar-w-collapsed); }
body.gg-collapsed .gg-sidebar__name,
body.gg-collapsed .gg-nav-link span,
body.gg-collapsed .gg-nav-heading { display: none; }

/* Collapsed to 76px there is no room for the wordmark, so the square mark
   takes over and the brand row centres itself. */
body.gg-collapsed .gg-sidebar .gg-brand-mark { display: none; }
body.gg-collapsed .gg-sidebar .gg-brand-square { display: flex; }
body.gg-collapsed .gg-sidebar__brand { justify-content: center; padding-inline: .5rem; }
body.gg-collapsed .gg-nav-link { justify-content: center; padding-inline: .5rem; }

.gg-backdrop { display: none; }

@media (max-width: 991.98px) {
    .gg-sidebar { transform: translateX(-100%); }
    body.gg-sidebar-open .gg-sidebar { transform: translateX(0); box-shadow: var(--gg-shadow-lg); }
    .gg-main, body.gg-collapsed .gg-main { margin-left: 0; }
    .gg-content { padding: 1rem; }
    .gg-topbar { padding: 0 1rem; }
    .gg-backdrop {
        display: block;
        position: fixed; inset: 0; background: rgba(5, 12, 19, .5);
        z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    body.gg-sidebar-open .gg-backdrop { opacity: 1; pointer-events: auto; }
}

/* --------------------------------------------------------------------------
   Cards, tables, forms
   -------------------------------------------------------------------------- */
.card {
    background: var(--gg-card);
    border: 1px solid var(--gg-border);
    border-radius: 1rem;
    box-shadow: var(--gg-shadow-sm);
    color: var(--gg-body);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--gg-border-soft);
    padding: 1rem 1.25rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--gg-ink);
}

.card-body { padding: 1.25rem; }

.gg-stat { display: flex; align-items: flex-start; gap: 1rem; }

.gg-stat__icon {
    width: 46px; height: 46px;
    border-radius: .875rem;
    display: grid; place-items: center;
    font-size: 1.25rem;
    background: var(--gg-brand-soft);
    color: var(--gg-on-soft);
    flex-shrink: 0;
}

.gg-stat__value {
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -.03em; color: var(--gg-ink);
    line-height: 1.2;
    word-break: break-word;
}

.gg-stat__label { font-size: .8125rem; color: var(--gg-muted); }

.table { --bs-table-color: var(--gg-body); margin-bottom: 0; }

.table > thead > tr > th {
    background: var(--gg-surface);
    color: var(--gg-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gg-border);
    padding: .75rem 1rem;
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: .8125rem 1rem;
    vertical-align: middle;
    border-color: var(--gg-border-soft);
    color: var(--gg-body);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--gg-hover); color: var(--gg-body); }
.table > :not(caption) > * > * { background-color: transparent; }
.table-danger > * { background: var(--gg-danger-soft) !important; color: var(--gg-danger-ink) !important; }

.form-label { font-size: .8125rem; font-weight: 600; color: var(--gg-ink); margin-bottom: .375rem; }
.form-label .req { color: var(--gg-danger); }
.form-text { color: var(--gg-faint); font-size: .75rem; }

.form-control, .form-select {
    border-color: var(--gg-border);
    border-radius: .625rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    background-color: var(--gg-input-bg);
    color: var(--gg-body);
}

.form-control:focus, .form-select:focus {
    border-color: var(--gg-brand);
    background-color: var(--gg-input-bg);
    color: var(--gg-body);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
}

.form-control:disabled, .form-control[readonly] { background-color: var(--gg-border-soft); color: var(--gg-muted); }
.form-control::placeholder { color: var(--gg-faint); }
.form-control-color { padding: .25rem; height: 38px; }

.input-group-text {
    background: var(--gg-border-soft);
    border-color: var(--gg-border);
    color: var(--gg-muted);
    font-size: .875rem;
}

/* Dark-mode date pickers need a light icon */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.7);
}

/* Checkboxes and switches all take the brand colour */
.form-check-input {
    background-color: var(--gg-input-bg);
    border-color: var(--gg-border);
}

.form-check-input:checked {
    background-color: var(--gg-brand);
    border-color: var(--gg-brand);
}

.form-check-input:focus {
    border-color: var(--gg-brand);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23007cc2'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-label { color: var(--gg-body); }

/* --------------------------------------------------------------------------
   Buttons and badges
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 50rem;
    font-weight: 500;
    font-size: .875rem;
    padding: .5rem 1.125rem;
    transition: all .15s ease;
    white-space: nowrap;
}

.btn-sm { padding: .3125rem .75rem; font-size: .8125rem; }
.btn-lg { padding: .6875rem 1.5rem; font-size: .9375rem; }

.btn-primary {
    background: var(--gg-brand);
    border-color: var(--gg-brand);
    color: #fff;
    box-shadow: var(--gg-glow);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--gg-brand-dark);
    border-color: var(--gg-brand-dark);
    color: #fff;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover { color: #06121c; font-weight: 600; }

.btn-primary:disabled, .btn-primary.disabled { background: var(--gg-brand); border-color: var(--gg-brand); opacity: .55; }

.btn-soft { background: var(--gg-brand-soft); color: var(--gg-on-soft); border: none; }
.btn-soft:hover { background: var(--gg-brand-soft); color: var(--gg-on-soft); filter: brightness(.96); }

.btn-light {
    background: var(--gg-card);
    border-color: var(--gg-border);
    color: var(--gg-body);
}

.btn-light:hover, .btn-light:focus {
    background: var(--gg-hover);
    border-color: var(--gg-border);
    color: var(--gg-body);
}

.btn-danger { background: var(--gg-danger); border-color: var(--gg-danger); }
.btn-close { filter: var(--gg-close-filter, none); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

.btn-icon {
    width: 34px; height: 34px; padding: 0;
    display: inline-grid; place-items: center;
    border-radius: .625rem;
}

.badge {
    border-radius: 50rem;
    font-weight: 600;
    font-size: .6875rem;
    padding: .3125rem .625rem;
    letter-spacing: .01em;
}

.badge-active, .badge-paid, .badge-completed, .badge-granted, .badge-approved,
.badge-attended, .badge-recovered, .badge-received, .badge-won, .badge-sent,
.badge-delivered, .badge-present, .badge-purchase, .badge-return, .badge-opening,
.badge-online, .badge-done {
    background: var(--gg-success-soft); color: var(--gg-success-ink);
}

.badge-inactive, .badge-cancelled, .badge-draft, .badge-unknown, .badge-logout,
.badge-released, .badge-transferred, .badge-scheduled, .badge-updated, .badge-adjustment,
.badge-disabled {
    background: var(--gg-neutral-soft); color: var(--gg-neutral-ink);
}

.badge-expired, .badge-suspended, .badge-unpaid, .badge-failed, .badge-denied,
.badge-rejected, .badge-lost, .badge-missed, .badge-no-show, .badge-damaged,
.badge-terminated, .badge-locked, .badge-deleted, .badge-sale, .badge-returned,
.badge-revoked {
    background: var(--gg-danger-soft); color: var(--gg-danger-ink);
}

.badge-frozen, .badge-partial, .badge-pending, .badge-waitlisted, .badge-queued,
.badge-override, .badge-reserved, .badge-half-day, .badge-late, .badge-recovering,
.badge-importing, .badge-previewed, .badge-offline {
    background: var(--gg-warning-soft); color: var(--gg-warning-ink);
}

.badge-trial, .badge-new, .badge-booked, .badge-contacted, .badge-assigned,
.badge-login, .badge-created, .badge-leave, .badge-holiday, .badge-absent {
    background: var(--gg-info-soft); color: var(--gg-info-ink);
}

/* --------------------------------------------------------------------------
   Navigation pills, dropdowns, modals
   -------------------------------------------------------------------------- */
.nav-pills .nav-link {
    color: var(--gg-muted);
    font-size: .875rem;
    font-weight: 500;
    padding: .4375rem .875rem;
    background: var(--gg-card);
    border: 1px solid var(--gg-border);
}

.nav-pills .nav-link:hover { color: var(--gg-brand); border-color: var(--gg-brand); }

.nav-pills .nav-link.active {
    background: var(--gg-brand);
    border-color: var(--gg-brand);
    color: #fff;
}

[data-theme="dark"] .nav-pills .nav-link.active { color: #06121c; font-weight: 600; }

.dropdown-menu {
    background: var(--gg-card);
    border: 1px solid var(--gg-border);
    border-radius: .875rem;
    box-shadow: var(--gg-shadow);
    padding: .375rem;
    font-size: .875rem;
}

.dropdown-item { border-radius: .5rem; padding: .5rem .75rem; color: var(--gg-body); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gg-brand-softer); color: var(--gg-brand); }
.dropdown-divider { border-color: var(--gg-border-soft); }

.modal-content {
    background: var(--gg-card);
    color: var(--gg-body);
    border: 1px solid var(--gg-border);
    border-radius: 1.25rem;
    box-shadow: var(--gg-shadow-lg);
}

.modal-header { border-bottom: 1px solid var(--gg-border-soft); padding: 1.125rem 1.375rem; }
.modal-body { padding: 1.375rem; }
.modal-footer { border-top: 1px solid var(--gg-border-soft); padding: 1rem 1.375rem; gap: .5rem; }

.accordion-item { background: transparent; border-color: var(--gg-border); }
.accordion-button {
    background: var(--gg-surface);
    color: var(--gg-ink);
    font-size: .9375rem;
    border-radius: .75rem !important;
}
.accordion-button:not(.collapsed) { background: var(--gg-brand-soft); color: var(--gg-on-soft); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }
.accordion-button::after { filter: var(--gg-accordion-icon, none); }
[data-theme="dark"] .accordion-button::after { filter: invert(1) opacity(.7); }
.accordion-body { background: var(--gg-card); }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert { border: 1px solid transparent; }
.alert-success { background: var(--gg-success-soft); color: var(--gg-success-ink); border-color: transparent; }
.alert-danger { background: var(--gg-danger-soft); color: var(--gg-danger-ink); border-color: transparent; }
.alert-warning { background: var(--gg-warning-soft); color: var(--gg-warning-ink); border-color: transparent; }
.alert-info { background: var(--gg-info-soft); color: var(--gg-info-ink); border-color: transparent; }
.alert-light { background: var(--gg-surface); color: var(--gg-body); border-color: var(--gg-border); }

/* --------------------------------------------------------------------------
   Misc components
   -------------------------------------------------------------------------- */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--gg-brand-soft);
    color: var(--gg-on-soft);
    display: inline-grid;
    place-items: center;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}

.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar-md { width: 40px; height: 40px; font-size: .875rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; }

.page-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.page-title h1 { margin: 0; }
.page-title .subtitle { color: var(--gg-muted); font-size: .875rem; margin-top: .25rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.page-title > *:not(:first-child) { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gg-muted); }
.empty-state i { font-size: 2.5rem; color: var(--gg-faint); display: block; margin-bottom: .75rem; }

.progress { background: var(--gg-border-soft); border-radius: 50rem; }
.progress-bar { background: var(--gg-brand); }

/* DataTables + Select2 + pagination */
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    border: 1px solid var(--gg-border);
    background: var(--gg-input-bg);
    color: var(--gg-body);
    border-radius: .625rem;
    padding: .375rem .625rem;
    font-size: .875rem;
}

div.dt-container .dt-info, div.dt-container label { color: var(--gg-muted); font-size: .875rem; }
div.dt-container .dt-paging .pagination { margin: 0; }

/* Room under the DataTables info/pager row, which sits inside the scroll
   container rather than in a card body of its own. */
div.table-responsive > div.dt-container > div.row {
    margin-bottom: 20px;
}

.page-link {
    border-radius: .5rem !important;
    margin: 0 .125rem;
    border-color: var(--gg-border);
    background: var(--gg-card);
    color: var(--gg-body);
    font-size: .875rem;
}

.page-link:hover { background: var(--gg-hover); color: var(--gg-brand); border-color: var(--gg-border); }
.page-item.active .page-link { background: var(--gg-brand); border-color: var(--gg-brand); color: #fff; }
.page-item.disabled .page-link { background: var(--gg-card); color: var(--gg-faint); border-color: var(--gg-border); }

/* Laravel's Bootstrap pager lays itself out with Bootstrap utilities, but the
   info line and the pager list both keep a stray bottom margin from reboot,
   which leaves the row sitting off-centre in its card body. */
.card-body nav .pagination,
.card-body nav p.small { margin-bottom: 0; }

.card-body nav .pagination { flex-wrap: wrap; row-gap: .375rem; }
.card-body nav p.small { color: var(--gg-muted); }

/* Room around the pager so it never sits flush against the last table row or
   the card edge. */
.card > .table-responsive + .card-body,
.card > .card-body:has(> nav .pagination) {
    padding-top: .875rem;
    padding-bottom: .875rem;
}

/* Room below a paginated card so the pager never butts against whatever
   follows it - the same 1rem Bootstrap's mb-3 would give. */
.card:has(.card-body nav .pagination) { margin-bottom: 1rem; }

@media (max-width: 575.98px) {
    .card-body nav .pagination { justify-content: center; width: 100%; }
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    background: var(--gg-input-bg);
    border-color: var(--gg-border);
    border-radius: .625rem;
}

.select2-container--default .select2-selection--single { position: relative; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px; font-size: .875rem; color: var(--gg-body);
    padding-right: 3.25rem;   /* room for the clear button and the arrow */
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--gg-faint); }

/* Select2 floats the clear button inside the rendered span, which leaves it
   riding above the text. Pin it to the middle of the control instead. */
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.75rem;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    padding: 0 .25rem;
    line-height: 1;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--gg-faint);
    background: none;
    border: 0;
    cursor: pointer;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover,
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover { color: var(--gg-danger); }
.select2-container--default .select2-selection--single .select2-selection__clear > span,
.select2-container--default .select2-selection--multiple .select2-selection__clear > span { display: block; line-height: 1; }
.select2-container--default .select2-selection--multiple { position: relative; }
.select2-container--default .select2-selection--multiple .select2-selection__clear { right: .625rem; }
.select2-dropdown { background: var(--gg-card); border-color: var(--gg-border); border-radius: .75rem; font-size: .875rem; }
.select2-container--default .select2-results__option { color: var(--gg-body); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--gg-brand); color: #fff; }
.select2-search--dropdown .select2-search__field { background: var(--gg-input-bg); color: var(--gg-body); border-color: var(--gg-border); border-radius: .5rem; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--gg-brand-soft); color: var(--gg-on-soft); border: none; border-radius: .375rem;
}

/* Flatpickr in dark mode */
[data-theme="dark"] .flatpickr-calendar { background: var(--gg-card); box-shadow: var(--gg-shadow-lg); color: var(--gg-body); }
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] span.flatpickr-weekday { background: var(--gg-card); color: var(--gg-muted); fill: var(--gg-muted); }
[data-theme="dark"] .flatpickr-day { color: var(--gg-body); }
[data-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--gg-faint); }
[data-theme="dark"] .flatpickr-day:hover { background: var(--gg-hover); border-color: var(--gg-hover); }
[data-theme="dark"] .flatpickr-day.selected { background: var(--gg-brand); border-color: var(--gg-brand); color: #fff; }
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--gg-muted); }
[data-theme="dark"] .numInputWrapper span { border-color: var(--gg-border); }
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-monthDropdown-months { color: var(--gg-ink); background: var(--gg-card); }

/* Theme toggle */
.theme-toggle {
    width: 34px; height: 34px;
    border-radius: .625rem;
    border: 1px solid var(--gg-border);
    background: var(--gg-card);
    color: var(--gg-muted);
    display: inline-grid;
    place-items: center;
    transition: all .15s ease;
}

.theme-toggle:hover { color: var(--gg-brand); border-color: var(--gg-brand); }
[data-theme="light"] .theme-toggle .bi-sun-fill,
:root:not([data-theme="dark"]) .theme-toggle .bi-sun-fill { display: none; }
[data-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }

/* Auth screens */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--gg-surface); }
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--gg-card);
    border: 1px solid var(--gg-border);
    border-radius: 1.5rem;
    box-shadow: var(--gg-shadow-lg);
    padding: 2rem;
}

/* SweetAlert in dark mode */
[data-theme="dark"] .swal2-popup { background: var(--gg-card); color: var(--gg-body); }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--gg-ink); }


/* --------------------------------------------------------------------------
   Alignment fixes
   -------------------------------------------------------------------------- */

/* Long values (money, counts) must not push a stat tile out of shape */
.min-w-0 { min-width: 0; }
.gg-stat > div { min-width: 0; }

/* Action columns: keep buttons and inline forms on one baseline */
.table td.text-end form,
.table td.text-end .btn-group,
.table td.text-end .dropdown { display: inline-block; vertical-align: middle; }
.table td.text-end > .btn,
.table td.text-end form > .btn { vertical-align: middle; }
.table td.text-end .btn + .btn,
.table td.text-end form + form,
.table td.text-end .btn + form,
.table td.text-end form + .btn { margin-left: .25rem; }

/* An empty state inside a table cell should fill the row, not sit left */
.table td > .empty-state { margin: 0; }

/* Filter bars: inputs and their buttons share a baseline even when some
   columns carry a label and others do not. A column that declares its own
   flex layout has already said what it wants, so it is left alone. */
.card-body form.row > [class*="col-"]:not(.d-flex) { display: flex; flex-direction: column; justify-content: flex-end; }
.card-body form.row > [class*="col-"] > .btn,
.card-body form.row > [class*="col-"] > .d-flex { margin-top: auto; }

/* Integration test rows: icon hard left, then status, a roomy input, and the
   action. Grid rather than a Bootstrap row so the columns line up down the
   card no matter how long the provider names are. */
.gg-integration-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.6fr) 7.5rem;
    align-items: center;
    gap: 1rem;
    padding: .875rem 0;
}
.gg-integration-row:first-of-type { padding-top: .25rem; }
.gg-integration-row__channel { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.gg-integration-row__input { min-width: 0; }
.gg-integration-row__input .form-control { width: 100%; }

@media (max-width: 767.98px) {
    .gg-integration-row {
        grid-template-columns: 1fr auto;
        gap: .625rem .75rem;
    }
    .gg-integration-row__channel { grid-column: 1; }
    .gg-integration-row__status { grid-column: 2; justify-self: end; }
    .gg-integration-row__input,
    .gg-integration-row__action { grid-column: 1 / -1; }
}

/* The uploaded logo is scaled to fit its slot and never cropped or stretched */
.gg-brand-mark { display: inline-flex; align-items: center; }
.gg-brand-logo { width: auto; max-width: 100%; height: 100%; object-fit: contain; display: block; }

/* Two files, one shown per theme. The theme is set before first paint, so the
   swap never flashes. With only one file uploaded, that one is always shown. */
.gg-brand-logo--dark { display: none; }
[data-theme="dark"] .gg-brand-mark .gg-brand-logo--light { display: none; }
[data-theme="dark"] .gg-brand-mark .gg-brand-logo--dark { display: block; }

/* The square mark only appears where a wide lockup will not fit */
.gg-brand-square { display: none; flex: 0 0 auto; align-items: center; justify-content: center; }
.gg-brand-square img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Logo field in Settings */
.gg-logo-field { display: flex; align-items: flex-start; gap: 1rem; }
.gg-logo-field__preview {
    width: 96px; height: 96px; flex: 0 0 auto;
    display: grid; place-items: center;
    padding: .5rem;
    border: 1px dashed var(--gg-border);
    border-radius: .875rem;
    background: var(--gg-input-bg);
}
.gg-logo-field__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gg-logo-field__initial {
    width: 56px; height: 56px; border-radius: 1rem;
    display: grid; place-items: center;
    font-size: 1.5rem; font-weight: 700;
    background: var(--gg-brand-soft); color: var(--gg-on-soft);
}

@media (max-width: 575.98px) {
    .gg-logo-field { flex-direction: column; }
}

/* Brand colour picker in Settings */
.gg-colour-field { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.gg-colour-field .form-control-color { width: 56px; height: 42px; padding: .25rem; flex: 0 0 auto; }
.gg-colour-field #primaryColorHex { width: 7.5rem; flex: 0 0 auto; font-family: var(--bs-font-monospace, monospace); text-transform: lowercase; }
.gg-colour-field__swatches { display: flex; gap: .375rem; flex-wrap: wrap; }
.gg-swatch {
    width: 28px; height: 28px; border-radius: .5rem;
    border: 1px solid rgba(0, 0, 0, .12);
    padding: 0; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.gg-swatch:hover { transform: translateY(-1px); box-shadow: var(--gg-shadow-sm); }
.gg-swatch.is-active { box-shadow: 0 0 0 2px var(--gg-card), 0 0 0 4px var(--gg-brand); }

.gg-colour-preview {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .875rem 1rem;
    border: 1px solid var(--gg-border);
    border-radius: .75rem;
    background: var(--gg-surface);
}

/* Definition lists used across the detail screens */
dl.row { margin-bottom: 0; }
dl.row > dt { font-weight: 500; padding-bottom: .25rem; }
dl.row > dd { padding-bottom: .25rem; word-break: break-word; }

/* Modal forms: consistent rhythm between stacked fields */
.modal-body .form-label { margin-top: 0; }
.modal-body .row + .row { margin-top: .25rem; }

/* Nav pills should wrap cleanly on narrow screens rather than overflow */
.nav-pills { flex-wrap: wrap; }
.nav-pills .nav-link { white-space: nowrap; }

/* Tab panes inherit the page rhythm */
.tab-content > .tab-pane > .card:not(:last-child) { margin-bottom: 1rem; }

/* Card footers that hold a single action */
.card-body.border-top { padding-top: 1rem; padding-bottom: 1rem; }

/* Avatars must never squash next to long names */
.d-flex > .avatar { flex: 0 0 auto; }

/* Tables inside cards sit flush with the card edge */
.card > .table-responsive > .table > thead > tr > th:first-child,
.card > .table-responsive > .table > tbody > tr > td:first-child { padding-left: 1.25rem; }
.card > .table-responsive > .table > thead > tr > th:last-child,
.card > .table-responsive > .table > tbody > tr > td:last-child { padding-right: 1.25rem; }

/* Long text in a table should wrap rather than stretch the layout */
.table td { overflow-wrap: anywhere; }
.table td .badge, .table td .btn { overflow-wrap: normal; }

@media (max-width: 575.98px) {
    .page-title { gap: .75rem; }
    .page-title > *:not(:first-child) { width: 100%; }
    .page-title > *:not(:first-child) > .btn,
    .page-title > *:not(:first-child) > form { flex: 1 1 auto; }
    .gg-stat__value { font-size: 1.25rem; }
    .card-body { padding: 1rem; }
}


/* DataTables and Select2 wrappers must not push the page wider on a phone */
div.dt-container { overflow-x: hidden; }
div.dt-container .dt-layout-row { flex-wrap: wrap; row-gap: .5rem; }
div.dt-container .dt-layout-cell { min-width: 0; }
.select2-container { max-width: 100%; }
.select2-hidden-accessible { max-width: 100%; }

@media (max-width: 575.98px) {
    div.dt-container .dt-layout-row { justify-content: flex-start !important; }
    div.dt-container .dt-search, div.dt-container .dt-length { width: 100%; }
    div.dt-container .dt-search input { width: 100%; }
}

@media print {
    .gg-sidebar, .gg-topbar, .no-print { display: none !important; }
    .gg-main { margin-left: 0 !important; }
    .gg-content { padding: 0 !important; }
    body, html { background: #fff; }
    .card { box-shadow: none; border-color: #ddd; }
}

/* --------------------------------------------------------------------------
   Member card (BRD 6.6)

   A dark brand panel carrying the member's identity and the QR the door
   reads. Shared by the back office and the member app, so it is styled here
   rather than inside either page.
   -------------------------------------------------------------------------- */
.member-card {
    width: 100%;
    max-width: 340px;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--gg-brand-deep), var(--gg-brand-deeper));
    color: #fff;
    padding: 1.25rem;
    box-shadow: var(--gg-shadow-lg);
}

.member-card__head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.member-card__logo { height: 24px; width: auto; max-width: 150px; object-fit: contain; display: block; margin-bottom: .5rem; }
.member-card__gym {
    font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
    opacity: .75; margin-bottom: .375rem;
}
.member-card__name { font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; line-height: 1.25; }
.member-card__code { font-size: .8125rem; opacity: .8; }
.member-card__photo {
    width: 46px; height: 46px; border-radius: .75rem; object-fit: cover;
    flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .35);
}

.member-card__qr {
    background: #fff;
    border-radius: .875rem;
    padding: .625rem;
    width: fit-content;
    margin: 0 auto 1rem;
    line-height: 0;
}
.member-card__qr svg { width: 150px; height: 150px; display: block; }

.member-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.member-card__label {
    font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
    opacity: .72; margin-bottom: .125rem;
}
/* The global `code` style is a pale brand tint, which is invisible here, so
   the access code is styled as plain type on the panel instead. */
.member-card__value { font-size: .8125rem; color: #fff; }
.member-card__value--mono { font-family: var(--bs-font-monospace, ui-monospace, monospace); letter-spacing: .04em; }

@media print {
    .member-card { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { background: #fff; }
}

/* Demo-site banner (only ever rendered when DEMO_MODE is on) */
.gg-demo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: .5rem 1rem;
    background: var(--gg-warning-soft);
    color: var(--gg-warning-ink);
    border-bottom: 1px solid var(--gg-border);
    font-size: .8125rem;
    text-align: center;
}
.gg-demo-banner .bi { flex: 0 0 auto; }

@media (max-width: 575.98px) {
    .gg-demo-banner { font-size: .75rem; padding: .5rem .75rem; }
}

/* The sign-in mark stands alone - no gym name beside it - so it is given room
   to breathe and a sensible ceiling on either dimension. */
.gg-signin-mark { max-width: 240px; }
.gg-signin-mark .gg-brand-logo { max-height: 56px; }