/* ────────────────────────────────────────────────────────────────────────
   ParkingPlatform.Web — Theme: bright green / white / orange
   Light + dark modes via [data-bs-theme="dark"] override block at bottom
   ─────────────────────────────────────────────────────────────────────── */

:root {
    /* Primary palette */
    --pp-green:        #16a34a;
    --pp-green-dark:   #15803d;
    --pp-green-darker: #14532d;
    --pp-green-soft:   #dcfce7;
    --pp-green-line:   #86efac;

    --pp-orange:       #f97316;
    --pp-orange-dark:  #ea580c;
    --pp-orange-soft:  #fed7aa;

    --pp-bg:           #f8fafc;
    --pp-surface:      #ffffff;
    --pp-border:       #e5e7eb;
    --pp-text:         #0f172a;
    --pp-muted:        #64748b;

    --pp-table-stripe: #fafbfc;
    --pp-card-shadow:  0 1px 2px rgba(15,23,42,.04);
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }

body {
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Sarabun",
                 "Noto Sans Thai", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Mobile top bar (visible <992px) ─────────────────────────────────── */
.pp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, var(--pp-green-dark), var(--pp-green-darker));
    color: #fff;
    padding: 0 .5rem;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.pp-topbar-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.pp-sidebar {
    background: linear-gradient(180deg, var(--pp-green-dark) 0%, var(--pp-green-darker) 100%);
    color: #fff;
}

/* Desktop: pinned, fixed width, full height */
@media (min-width: 992px) {
    .pp-sidebar {
        width: 240px;
        min-width: 240px;
        min-height: 100vh;
        position: sticky;
        top: 0;
        align-self: flex-start;
    }
    .pp-sidebar .offcanvas-body {
        height: 100vh;
        overflow-y: auto;
    }
}

/* Thin scrollbar for the sidebar menu */
.pp-sidebar .offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
.pp-sidebar .offcanvas-body::-webkit-scrollbar { width: 5px; }
.pp-sidebar .offcanvas-body::-webkit-scrollbar-track { background: transparent; }
.pp-sidebar .offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.25);
    border-radius: 3px;
}
.pp-sidebar .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.4);
}

/* Mobile: width of off-canvas drawer */
@media (max-width: 991.98px) {
    .pp-sidebar { width: 80vw; max-width: 320px; }
}

.pp-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.18);
    padding-bottom: .6rem;
    margin-bottom: .6rem;
}
.pp-brand-accent { color: var(--pp-orange); }
.pp-tenant {
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    margin-bottom: 1rem;
}
.pp-section {
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    font-size: .7rem;
    letter-spacing: .04em;
    margin-top: 1rem;
    margin-bottom: .25rem;
    padding-left: .25rem;
}

/* Collapsible group header — looks like .pp-section but click-toggles
   the group below it. */
.pp-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin-top: 1rem;
    margin-bottom: .35rem;
    padding: .4rem .45rem;
    border-radius: .25rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pp-section-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.pp-section-toggle:focus-visible {
    outline: 2px solid var(--pp-orange);
    outline-offset: 1px;
}
.pp-chev {
    font-size: .85rem;
    transition: transform .2s ease;
    opacity: .7;
}
/* aria-expanded=false on Bootstrap collapse trigger → rotated chevron */
.pp-section-toggle[aria-expanded="false"] .pp-chev { transform: rotate(-90deg); }

.pp-nav-group { padding-bottom: .25rem; }
.pp-nav-divider {
    height: 1px;
    margin: .5rem .75rem;
    background: rgba(255,255,255,.12);
}
.pp-nav-link {
    display: block;
    color: rgba(255,255,255,.9);
    padding: .55rem .85rem;
    border-radius: .35rem;
    text-decoration: none;
    margin-bottom: .2rem;
    font-size: 1rem;
    line-height: 1.35;
    transition: background .15s, color .15s;
}
.pp-nav-link:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}
/* asp-validation-summary / asp-validation-for tag helpers render an empty
   `<div class="validation-summary-valid">` (or `<span class="field-validation-valid">`)
   even when there are no errors. With Bootstrap's `alert` classes added,
   that empty container shows up as a blank warning bar / strip on every
   page. Hide them while the form is valid; the tag helper swaps the
   class to `validation-summary-errors` / `field-validation-error` the
   moment a real error lands, which we still want visible.

   Also collapse alerts that have no text content at all (defensive — if
   some controller forgets to populate TempData but renders an alert
   wrapper). */
.validation-summary-valid,
.field-validation-valid     { display: none !important; }
.alert:empty                { display: none !important; }

.pp-notify-bell {
    font-size: 1.15rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
    line-height: 1;
    transition: background .15s;
}
.pp-notify-bell:hover { background: rgba(255,255,255,.12); color:#fff; }
.pp-notify-bell .badge { font-size: .6rem; padding: .25em .4em; }

.pp-nav-link.active {
    background: var(--pp-orange);
    color: #fff;
    font-weight: 500;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.5);
}
.pp-nav-link.active i { opacity: 1; }
.pp-nav-link.active:hover { background: var(--pp-orange-dark); color: #fff; }
.pp-nav-link.disabled {
    color: rgba(255,255,255,.35);
    pointer-events: none;
}
.pp-nav-link i { margin-right: .5rem; opacity: .85; }

.pp-user-card {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: .8rem;
    color: rgba(255,255,255,.85);
}
.pp-user-card strong { color: #fff; }

/* ── Sidebar collapse (desktop) ──────────────────────────────────────── */
@media (min-width: 992px) {
    .pp-sidebar {
        transition: width .25s ease, min-width .25s ease;
        overflow: visible;          /* allow button to poke out */
    }
    .pp-sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
    }
    .pp-sidebar.collapsed .offcanvas-body {
        padding: 0 !important;
        overflow: hidden;
        visibility: hidden;
    }

    /* Toggle button — floats on the edge of sidebar */
    .pp-sidebar .pp-collapse-btn {
        position: absolute;
        top: 12px;
        right: -16px;
        z-index: 1050;
        width: 32px; height: 32px;
        border-radius: 50%;
        background: var(--pp-green-dark);
        color: #fff;
        border: 2px solid var(--pp-surface);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        font-size: .85rem;
        transition: transform .25s;
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
    }
    .pp-sidebar.collapsed .pp-collapse-btn {
        transform: rotate(180deg);
        right: -16px;
    }
}

/* ── Main content area ───────────────────────────────────────────────── */
.pp-main { flex: 1; min-width: 0; padding: 1rem; }
@media (min-width: 992px) { .pp-main { padding: 1.5rem 2rem; } }

/* ── Cards & tables ──────────────────────────────────────────────────── */
.card {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: .6rem;
    box-shadow: var(--pp-card-shadow);
}
.card-body { padding: 1.25rem; }

.table { color: var(--pp-text); }
.table thead th {
    background: var(--pp-green-soft);
    color: var(--pp-green-darker);
    border-bottom: 2px solid var(--pp-green-line);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.table tbody tr:hover { background: var(--pp-green-soft); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--pp-green);
    border-color: var(--pp-green);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--pp-green-dark);
    border-color: var(--pp-green-dark);
}
.btn-outline-primary {
    color: var(--pp-green);
    border-color: var(--pp-green);
}
.btn-outline-primary:hover {
    background-color: var(--pp-green);
    border-color: var(--pp-green);
    color: #fff;
}
.btn-accent {
    background-color: var(--pp-orange);
    border-color: var(--pp-orange);
    color: #fff;
}
.btn-accent:hover {
    background-color: var(--pp-orange-dark);
    border-color: var(--pp-orange-dark);
    color: #fff;
}

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--pp-green);
    box-shadow: 0 0 0 .15rem rgba(22,163,74,.18);
}
.form-check-input:checked {
    background-color: var(--pp-green);
    border-color: var(--pp-green);
}
.form-label.small {
    color: var(--pp-muted);
    margin-bottom: .25rem;
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge.bg-success { background-color: var(--pp-green) !important; }
.badge.bg-secondary { background-color: #94a3b8 !important; }
.badge.bg-accent { background-color: var(--pp-orange) !important; color: #fff; }
.badge.bg-module { background-color: var(--pp-green-soft); color: var(--pp-green-darker); }
.badge.bg-module-off { background-color: #f1f5f9; color: var(--pp-muted); }

/* ── Alerts ──────────────────────────────────────────────────────────── */
.alert-success {
    background-color: var(--pp-green-soft);
    border-color: var(--pp-green-line);
    color: var(--pp-green-darker);
}
.alert-warning {
    background-color: var(--pp-orange-soft);
    border-color: var(--pp-orange);
    color: var(--pp-orange-dark);
}

/* ── Login screen ────────────────────────────────────────────────────── */
.pp-login-bg {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, var(--pp-green-soft) 0%, transparent 50%),
        radial-gradient(circle at 90% 100%, var(--pp-orange-soft) 0%, transparent 50%),
        var(--pp-bg);
    display: flex;
    align-items: center;
}
.pp-login-card { border-top: 4px solid var(--pp-green); }

/* ── Misc ────────────────────────────────────────────────────────────── */
code {
    color: var(--pp-orange-dark);
    background: var(--pp-orange-soft);
    padding: .1rem .35rem;
    border-radius: .2rem;
}
.text-accent { color: var(--pp-orange-dark); }
.bg-accent-soft { background-color: var(--pp-orange-soft); }

/* ── A11y: visible focus ring for keyboard users ─────────────────────── */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--pp-orange);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE — re-bind the variables above. Sidebar already dark in light
   mode (green gradient stays), but body/cards/tables flip.
   ═══════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    --pp-bg:           #0b1220;
    --pp-surface:      #111827;
    --pp-border:       #1f2937;
    --pp-text:         #e5e7eb;
    --pp-muted:        #94a3b8;
    --pp-table-stripe: #0f1626;
    --pp-card-shadow:  0 1px 2px rgba(0,0,0,.4);
    /* Lighten green so it pops on dark backgrounds */
    --pp-green:        #22c55e;
    --pp-green-dark:   #16a34a;
    --pp-green-darker: #052e16;
    --pp-green-soft:   #052e16;
    --pp-green-line:   #15803d;
    --pp-orange-soft:  #431407;
}
[data-bs-theme="dark"] body { background: var(--pp-bg); color: var(--pp-text); }
[data-bs-theme="dark"] .card {
    background: var(--pp-surface);
    border-color: var(--pp-border);
}
[data-bs-theme="dark"] .table { color: var(--pp-text); }
[data-bs-theme="dark"] .table thead th {
    background: #14532d;
    color: #dcfce7;
    border-bottom-color: #166534;
}
[data-bs-theme="dark"] .table tbody tr:hover { background: #052e16; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #0b1220;
    border-color: var(--pp-border);
    color: var(--pp-text);
}
[data-bs-theme="dark"] .alert-success {
    background-color: #052e16;
    border-color: #15803d;
    color: #86efac;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: #431407;
    border-color: #ea580c;
    color: #fdba74;
}
[data-bs-theme="dark"] code {
    background: #431407;
    color: #fdba74;
}
[data-bs-theme="dark"] .text-muted { color: var(--pp-muted) !important; }
[data-bs-theme="dark"] .badge.bg-module {
    background-color: #052e16 !important;
    color: #86efac !important;
}
[data-bs-theme="dark"] .badge.bg-module-off {
    background-color: #1f2937 !important;
    color: var(--pp-muted) !important;
}
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: #475569 !important;
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
    background-color: #1f2937;
    color: var(--pp-text);
}
[data-bs-theme="dark"] .table-warning {
    background-color: #422006 !important;
    color: #fde68a !important;
}
[data-bs-theme="dark"] .table-danger {
    background-color: #450a0a !important;
    color: #fecaca !important;
}
[data-bs-theme="dark"] .table-success {
    background-color: #052e16 !important;
    color: #86efac !important;
}
[data-bs-theme="dark"] .pp-login-bg {
    background:
        radial-gradient(circle at 10% 0%, #052e16 0%, transparent 50%),
        radial-gradient(circle at 90% 100%, #431407 0%, transparent 50%),
        var(--pp-bg);
}
[data-bs-theme="dark"] .pp-login-card {
    background: var(--pp-surface);
}