/* GoTidyUp — Editorial Brand System
   Palette + type mirrored from gotidyupca landing (navy · gold · cream)
   Refined for dense SSR admin screens. */

:root {
    /* Core palette (HSL-sourced from landing) */
    --navy:        hsl(195 21% 23%);
    --navy-deep:   hsl(195 24% 17%);
    --navy-light:  hsl(195 21% 35%);
    --gold:        hsl(43 38% 54%);
    --gold-light:  hsl(43 50% 65%);
    --gold-dark:   hsl(43 42% 42%);
    --cream:       hsl(40 20% 97%);
    --cream-2:     hsl(40 18% 94%);
    --ice:         hsl(206 40% 96%);
    --light-blue:  hsl(206 30% 88%);
    --white:       #ffffff;

    --danger:      hsl(0 62% 50%);
    --danger-soft: hsl(0 72% 96%);
    --success:     hsl(152 55% 40%);
    --success-soft:hsl(152 55% 95%);
    --muted:       hsl(195 10% 45%);
    --hairline:    hsl(206 25% 90%);

    /* Layered shadow system (tinted navy, not gray) */
    --shadow-sm:   0 1px 2px -1px hsl(195 21% 23% / .08),
                   0 2px 8px -4px hsl(195 21% 23% / .06);
    --shadow-md:   0 4px 12px -6px hsl(195 21% 23% / .12),
                   0 12px 28px -12px hsl(195 21% 23% / .10);
    --shadow-lg:   0 12px 32px -12px hsl(195 21% 23% / .18),
                   0 24px 56px -24px hsl(195 21% 23% / .14);
    --shadow-gold: 0 6px 20px -8px hsl(43 38% 54% / .45);

    /* Gradients */
    --grad-card:   linear-gradient(180deg, #ffffff 0%, hsl(40 20% 98.5%) 100%);
    --grad-hero:   linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    --grad-gold:   linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);

    --radius:      .75rem;
    --radius-sm:   .5rem;
    --radius-lg:   1rem;
}

/* ─── Base ──────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .9rem;
    font-feature-settings: "ss01", "cv11";
    color: var(--navy);
    background-color: var(--cream);
    /* faint paper grain */
    background-image:
        radial-gradient(at 20% 0%, hsl(206 40% 96% / .6) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsl(43 38% 54% / .06) 0, transparent 40%);
    background-attachment: fixed;
    min-height: 100vh;
}

::selection { background: hsl(43 38% 54% / .35); color: var(--navy-deep); }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--navy-deep);
    letter-spacing: -0.015em;
    font-weight: 700;
}
h1 { font-size: 1.75rem; }
h4 { font-weight: 700; letter-spacing: -0.02em; }
h5 { font-weight: 600; }

.display-serif {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Small-caps kicker utility */
.kicker {
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

a { color: var(--navy); text-decoration-color: hsl(43 38% 54% / .5); text-underline-offset: 3px; }
a:hover { color: var(--gold-dark); }

/* ─── Navbar ────────────────────────────────────────────── */
.navbar {
    background: var(--navy-deep) !important;
    background-image: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    box-shadow: 0 1px 0 hsl(43 38% 54% / .25), var(--shadow-md);
    padding-top: .55rem; padding-bottom: .55rem;
    backdrop-filter: saturate(1.2);
}

.navbar-brand {
    padding: 0 .25rem;
    display: flex;
    align-items: center;
}
.navbar-brand .brand-logo {
    height: 38px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 8px hsl(43 38% 54% / .25));
    transition: transform .2s ease, filter .2s ease;
}
.navbar-brand:hover .brand-logo {
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 14px hsl(43 50% 65% / .45));
}
@media (max-width: 768px) {
    .navbar-brand .brand-logo { height: 30px; }
}

.navbar .nav-link {
    position: relative;
    color: hsl(40 20% 92% / .72) !important;
    font-weight: 500;
    font-size: .82rem;
    padding: .45rem .85rem !important;
    transition: color .18s ease;
}
.navbar .nav-link i { opacity: .75; transition: opacity .18s ease; }
.navbar .nav-link:hover { color: var(--gold-light) !important; }
.navbar .nav-link:hover i { opacity: 1; }

.navbar .nav-link.active {
    color: var(--gold-light) !important;
}
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .85rem; right: .85rem; bottom: .1rem;
    height: 2px;
    background: var(--grad-gold);
    border-radius: 2px;
    box-shadow: 0 0 12px hsl(43 50% 65% / .6);
}

/* ─── Cards ─────────────────────────────────────────────── */
.card {
    background: var(--grad-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: hsl(206 30% 83%);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--hairline);
    font-family: 'Montserrat', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy-deep);
    padding: .85rem 1.1rem;
}
.card-header.bg-primary,
.card-header.bg-light {
    background: linear-gradient(180deg, var(--ice), transparent) !important;
    color: var(--navy-deep) !important;
}
.card-body { padding: 1.1rem; }

/* KPI border accents → left rule */
.card.border-success,
.card.border-warning,
.card.border-danger,
.card.border-info,
.card.border-primary {
    border-top: 1px solid var(--hairline) !important;
    border-right: 1px solid var(--hairline) !important;
    border-bottom: 1px solid var(--hairline) !important;
    position: relative;
}
.card.border-success  { border-left: 3px solid var(--success) !important; }
.card.border-warning  { border-left: 3px solid var(--gold) !important; }
.card.border-danger   { border-left: 3px solid var(--danger) !important; }
.card.border-info     { border-left: 3px solid var(--navy) !important; }
.card.border-primary  { border-left: 3px solid var(--gold-dark) !important; }

.card.border-warning::before,
.card.border-success::before,
.card.border-danger::before,
.card.border-info::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at top left, hsl(43 38% 54% / .06), transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .01em;
    padding: .45rem .95rem;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--navy) !important;
    background-image: linear-gradient(180deg, var(--navy-light), var(--navy)) !important;
    border: 1px solid var(--navy-deep) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm), inset 0 1px 0 hsl(0 0% 100% / .08);
}
.btn-primary:hover {
    background-image: linear-gradient(180deg, var(--navy), var(--navy-deep)) !important;
    box-shadow: var(--shadow-md), inset 0 1px 0 hsl(0 0% 100% / .08);
}

.btn-outline-primary {
    color: var(--navy) !important;
    border: 1px solid hsl(195 21% 23% / .35) !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    box-shadow: var(--shadow-sm);
}
.btn-success:hover { background: hsl(152 55% 34%) !important; box-shadow: var(--shadow-md); }

.btn-outline-success {
    color: var(--success) !important;
    border-color: hsl(152 55% 40% / .45) !important;
}
.btn-outline-success:hover { background: var(--success) !important; color:#fff !important; }

.btn-warning {
    background: var(--grad-gold) !important;
    border: 1px solid var(--gold-dark) !important;
    color: var(--navy-deep) !important;
    box-shadow: var(--shadow-gold);
}
.btn-warning:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
    box-shadow: var(--shadow-gold), var(--shadow-md);
}

.btn-outline-warning {
    color: var(--gold-dark) !important;
    border: 1px solid hsl(43 38% 54% / .5) !important;
}
.btn-outline-warning:hover {
    background: var(--grad-gold) !important;
    color: var(--navy-deep) !important;
    border-color: var(--gold-dark) !important;
}

.btn-outline-secondary {
    color: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    background: #fff !important;
}
.btn-outline-secondary:hover {
    background: var(--ice) !important;
    color: var(--navy) !important;
    border-color: var(--light-blue) !important;
}

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

.btn-sm { padding: .3rem .65rem; font-size: .74rem; }

/* ─── Badges ────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .04em;
    padding: .38em .7em;
    border-radius: 999px;
}
.badge.bg-primary   { background: var(--navy) !important; }
.badge.bg-success   { background: var(--success) !important; }
.badge.bg-warning   { background: var(--grad-gold) !important; color: var(--navy-deep) !important; }
.badge.bg-danger    { background: var(--danger) !important; }
.badge.bg-info      { background: var(--ice) !important; color: var(--navy-deep) !important; border: 1px solid var(--light-blue); }
.badge.bg-secondary { background: hsl(195 10% 92%) !important; color: var(--muted) !important; }

/* ─── Alerts ────────────────────────────────────────────── */
.alert {
    border: 1px solid var(--hairline);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .85rem;
    box-shadow: var(--shadow-sm);
    color: var(--navy-deep);
}
.alert-success { background: var(--success-soft); border-left-color: var(--success); }
.alert-warning { background: hsl(43 60% 96%); border-left-color: var(--gold); }
.alert-info    { background: var(--ice); border-left-color: var(--navy); }
.alert-danger  { background: var(--danger-soft); border-left-color: var(--danger); }

/* ─── Tables ────────────────────────────────────────────── */
.table {
    font-size: .82rem;
    color: var(--navy);
    border-color: var(--hairline);
}
.table thead th {
    background: linear-gradient(180deg, var(--ice), transparent);
    color: var(--navy-deep);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-bottom: 1px solid var(--hairline);
    padding: .7rem .75rem;
}
.table tbody td { padding: .65rem .75rem; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: hsl(40 20% 98% / .65); }
.table-striped tbody tr:hover,
.table-hover tbody tr:hover { background: hsl(206 40% 96% / .7) !important; }

/* ─── Forms ─────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
    background: #fff;
    font-size: .85rem;
    padding: .5rem .75rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px hsl(43 38% 54% / .18);
}
.form-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy-deep);
}
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { box-shadow: 0 0 0 3px hsl(43 38% 54% / .18); border-color: var(--gold); }

.input-group-text {
    background: var(--ice);
    border: 1px solid var(--hairline);
    color: var(--navy-deep);
    font-size: .8rem;
}

/* ─── Modals ────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: var(--grad-card);
}
.modal-header {
    background: var(--grad-hero);
    color: #fff;
    border-bottom: none;
    padding: 1rem 1.25rem;
    position: relative;
}
.modal-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--grad-gold);
}
.modal-header .btn-close { filter: invert(1) brightness(1.2); }
.modal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}
.modal-footer { border-top: 1px solid var(--hairline); background: hsl(40 20% 98%); }

/* ─── Dropdowns ─────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .35rem;
    font-size: .82rem;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: .45rem .7rem;
    color: var(--navy);
}
.dropdown-item:hover {
    background: var(--ice);
    color: var(--navy-deep);
}
.dropdown-divider { border-color: var(--hairline); }

/* ─── Text utilities override ───────────────────────────── */
.text-success { color: var(--success) !important; }
.text-warning { color: var(--gold-dark) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--navy) !important; }
.text-primary { color: var(--navy) !important; }
.text-muted   { color: var(--muted) !important; }

.fs-4.fw-bold, .fs-3.fw-bold, .fs-2.fw-bold {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em;
}

/* Page title treatment: give h4/h5 that sit at top of page a gold rule */
main > .container-fluid > h4:first-child,
main > h4:first-child,
main > .d-flex:first-child h4,
main > .d-flex:first-child h5 {
    position: relative;
}

/* ─── Schedule card overrides ───────────────────────────── */
.col-lg > .card > .card-header.bg-primary,
.col-lg > .card > .card-header.bg-light {
    background: linear-gradient(180deg, var(--ice), #fff) !important;
    color: var(--navy-deep) !important;
    border-bottom: 1px solid var(--hairline);
}
.col-lg > .card > .card-body .card {
    border-radius: var(--radius-sm);
    font-size: .78rem;
    box-shadow: var(--shadow-sm);
}

/* ─── Login hero ────────────────────────────────────────── */
body.login-page {
    background: var(--grad-hero);
    background-attachment: fixed;
    position: relative;
}
body.login-page::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, hsl(43 38% 54% / .18), transparent 45%),
        radial-gradient(circle at 80% 80%, hsl(206 40% 90% / .08), transparent 50%);
    pointer-events: none;
}
body.login-page .card {
    backdrop-filter: blur(8px);
    background: hsl(40 20% 97% / .98);
    box-shadow: var(--shadow-lg);
}

/* ─── Scrollbar polish (webkit) ─────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: hsl(195 21% 23% / .18);
    border-radius: 999px;
    border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: hsl(195 21% 23% / .3); }

/* ─── Mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container-fluid { padding-left: 12px; padding-right: 12px; }
    .navbar-nav .nav-link { padding: .5rem .6rem !important; }
    .navbar .nav-link.active::after { left: .6rem; right: .6rem; }
    .fs-4 { font-size: 1.1rem !important; }
    .table { font-size: .75rem; }
    .col-lg { flex: 0 0 100%; max-width: 100%; }
    h1 { font-size: 1.4rem; }
    .card-body { padding: .9rem; }
}

/* ─── Print ─────────────────────────────────────────────── */
@media print {
    .navbar, .btn, .dropdown, .alert, .modal { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #dee2e6; background: #fff; }
    .card-header { background: #f8f9fa !important; }
}