/* ==========================================================
   ADMIN.CSS
   Spirit Portal Phase 6A: formatting and comments only.
   No selectors or declarations were intentionally changed.
   ========================================================== */

* {
    box-sizing:border-box
}

:root {
    --ink:#2c2117;
    --paper:#f3e2b8;
    --gold:#d6b45f;
    --gold-light:#f1da91;
    --panel:rgba(43,31,22,.95);
    --panel-soft:rgba(61,45,31,.92);
    --muted:#cbbf9d;
    --danger:#a63b32;
    --success:#4f8b55;
    --warning:#c58a32
}

body {
    margin:0;
    min-height:100vh;
    font-family:Arial,
    sans-serif;
    color:#fff8df;
    background:linear-gradient(rgba(15,12,9,.82),rgba(15,12,9,.94)),
    url("../images/background.jpg") center/cover fixed;
    padding:24px
}

.admin-shell {
    max-width:1280px;
    margin:auto
}

.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    padding:22px 24px;
    border:1px solid rgba(214,180,95,.6);
    border-radius:16px;
    background:var(--panel);
    box-shadow:0 12px 30px rgba(0,0,0,.35)
}

.brand-block {
    display:flex;
    align-items:center;
    gap:14px
}

.brand-mark {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border:2px solid var(--gold);
    border-radius:50%;
    color:var(--gold-light);
    font-size:30px
}

.topbar h1,
.section-heading h2,
.panel h1,
.panel h2 {
    margin:0;
    color:var(--gold-light)
}

.topbar p,
.section-heading p {
    margin:4px 0 0
}

.topbar-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px
}

.eyebrow {
    margin:0 0 5px!important;
    color:var(--gold);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase
}

.admin-nav {
    display:flex;
    gap:8px;
    margin-bottom:18px;
    padding:8px;
    border:1px solid rgba(214,180,95,.45);
    border-radius:12px;
    background:rgba(43,31,22,.86)
}

button,
.button-link {
    border:0;
    border-radius:8px;
    padding:10px 14px;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    font:inherit
}

.primary {
    background:var(--gold);
    color:var(--ink)
}

.danger {
    background:var(--danger);
    color:#fff
}

.secondary {
    background:#6c665c;
    color:#fff
}

.nav-tab {
    background:transparent;
    color:var(--muted)
}

.nav-tab.active {
    background:var(--gold);
    color:var(--ink)
}

.text-button {
    padding:0;
    background:transparent;
    color:var(--gold-light)
}

.page-panel {
    display:none
}

.page-panel.active {
    display:block
}

.panel {
    background:var(--panel);
    border:1px solid rgba(214,180,95,.7);
    border-radius:14px;
    padding:24px;
    box-shadow:0 12px 30px rgba(0,0,0,.35)
}

.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px
}

.section-heading.compact {
    margin-bottom:14px
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px
}

.stat-card {
    padding:20px;
    border:1px solid rgba(214,180,95,.55);
    border-radius:13px;
    background:linear-gradient(145deg,rgba(72,52,34,.97),rgba(42,31,22,.97));
    box-shadow:0 8px 20px rgba(0,0,0,.22)
}

.stat-card strong {
    display:block;
    margin:8px 0 4px;
    color:var(--gold-light);
    font-size:2.25rem;
    line-height:1
}

.stat-card small,
.system-item small,
.muted {
    color:var(--muted)
}

.stat-label {
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase
}

.dashboard-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px
}

.dashboard-panel {
    min-height:310px
}

.dashboard-list {
    display:grid;
    gap:10px
}

.dashboard-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:13px 14px;
    border:1px solid rgba(214,180,95,.28);
    border-radius:10px;
    background:rgba(243,226,184,.09)
}

.dashboard-row strong {
    display:block;
    color:#fff7db
}

.dashboard-row p {
    margin:4px 0 0;
    color:var(--muted);
    font-size:.9rem
}

.time-chip {
    min-width:125px;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(214,180,95,.14);
    color:var(--gold-light);
    font-size:.82rem;
    text-align:right
}

.empty-state {
    padding:30px 16px;
    border:1px dashed rgba(214,180,95,.35);
    border-radius:10px;
    color:var(--muted);
    text-align:center
}

.system-panel {
    margin-bottom:18px
}

.system-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
}

.system-item {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px;
    border-radius:10px;
    background:rgba(243,226,184,.08)
}

.system-item strong,
.system-item small {
    display:block
}

.system-item small {
    margin-top:4px
}

.status-dot {
    flex:0 0 auto;
    width:11px;
    height:11px;
    margin-top:4px;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(255,255,255,.05)
}

.status-dot.online {
    background:var(--success)
}

.status-dot.warning {
    background:var(--warning)
}

.status-dot.offline {
    background:var(--danger)
}

.status-dot.checking {
    background:#8f8a80
}

.filters {
    display:grid;
    grid-template-columns:1fr 190px;
    gap:10px;
    margin-bottom:18px
}

label {
    display:block;
    margin-bottom:8px;
    font-weight:bold
}

input,
select,
textarea {
    width:100%;
    padding:10px;
    border-radius:7px;
    border:1px solid #98733c;
    background:var(--paper);
    color:var(--ink)
}

textarea {
    min-height:70px;
    resize:vertical
}

.booking {
    background:rgba(243,226,184,.97);
    color:var(--ink);
    border-left:6px solid #9b7436;
    border-radius:9px;
    padding:16px;
    margin-bottom:14px
}

.booking.cancelled,
.booking.rejected {
    opacity:.68;
    border-left-color:var(--danger)
}

.booking.completed {
    opacity:.76;
    border-left-color:var(--success)
}

.booking-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
}

.full {
    grid-column:1/-1
}

.actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px
}

.status {
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:bold;
    text-transform:uppercase;
    background:#d8c28c
}

.message,
.error {
    margin-bottom:14px;
    padding:12px;
    border-radius:7px
}

.message {
    background:#d6e8d1;
    color:#21451f
}

.error {
    background:#efc7c3;
    color:#631e19
}

.inline-form {
    display:inline
}

.login {
    max-width:430px;
    margin:12vh auto
}

@media(max-width:950px) {
    .stats-grid,
    .system-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .dashboard-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:700px) {
    body {
        padding:12px
    }

    .topbar,
    .section-heading {
        align-items:flex-start;
        flex-direction:column
    }

    .topbar-actions {
        width:100%
    }

    .topbar-actions>* {
        flex:1;
        text-align:center
    }

    .booking-grid,
    .filters,
    .stats-grid,
    .system-grid {
        grid-template-columns:1fr
    }

    .dashboard-row {
        grid-template-columns:1fr
    }

    .time-chip {
        text-align:left
    }

    .admin-nav {
        overflow-x:auto
    }
}

/* ==========================================================
   PHASE 6D — ADMIN UI REFRESH
   ========================================================== */

:root {
    --sp-admin-bg:#080e10;
    --sp-admin-panel:rgba(15,23,25,.94);
    --sp-admin-soft:rgba(255,255,255,.04);
    --sp-admin-line:rgba(233,199,123,.17);
    --sp-admin-gold:#e9c77b;
    --sp-admin-text:#fbf7ec;
    --sp-admin-muted:#b8c0bc;
}

body {
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--sp-admin-text);
    background:linear-gradient(rgba(5,10,12,.7),rgba(5,10,12,.94)),url("../images/background.jpg") center/cover fixed;
}

.topbar,
.panel,
.admin-nav {
    border-color:var(--sp-admin-line);
    background:linear-gradient(145deg,rgba(19,29,31,.95),rgba(8,15,17,.94));
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.topbar { border-radius:22px; padding:24px 26px; }
.brand-mark {
    color:var(--sp-admin-gold);
    border-color:rgba(233,199,123,.45);
    background:rgba(233,199,123,.07);
}
.topbar h1,.section-heading h2,.panel h1,.panel h2 { color:#fff6dc; font-family:Georgia,"Times New Roman",serif; }
.eyebrow { color:var(--sp-admin-gold); }
.admin-nav { padding:7px; border-radius:14px; }

button,.button-link { border-radius:10px; transition:transform .18s ease,filter .18s ease,background .18s ease; }
button:hover,.button-link:hover { transform:translateY(-1px); filter:brightness(1.06); }
.primary,.nav-tab.active {
    color:#17130c;
    background:linear-gradient(180deg,#f3d995,#d4a950);
    box-shadow:0 8px 22px rgba(212,169,80,.18);
}
.secondary { color:var(--sp-admin-text); background:rgba(255,255,255,.08); }
.nav-tab { color:var(--sp-admin-muted); }

.panel { border-radius:20px; }
.stat-card {
    border-color:var(--sp-admin-line);
    border-radius:16px;
    background:linear-gradient(145deg,rgba(23,34,36,.96),rgba(10,17,19,.96));
    transition:transform .18s ease,border-color .18s ease;
}
.stat-card:hover { transform:translateY(-3px); border-color:rgba(233,199,123,.34); }
.stat-card strong { color:#f5d98e; }
.stat-card small,.system-item small,.muted { color:var(--sp-admin-muted); }

.dashboard-row,.system-item {
    border-color:rgba(255,255,255,.08);
    background:rgba(255,255,255,.035);
}
.time-chip { color:#f5d98e; background:rgba(233,199,123,.1); }

input,select,textarea {
    color:var(--sp-admin-text);
    border-color:rgba(233,199,123,.18);
    border-radius:11px;
    background:rgba(3,8,10,.58);
}
input:focus,select:focus,textarea:focus {
    outline:none;
    border-color:rgba(233,199,123,.62);
    box-shadow:0 0 0 4px rgba(233,199,123,.08);
}

.login.panel {
    border-radius:24px;
    border-color:rgba(233,199,123,.24);
    background:linear-gradient(145deg,rgba(19,29,31,.96),rgba(8,15,17,.95));
}

/* =====================================
   SETTINGS MODULE
===================================== */
.settings-form { display: grid; gap: 1.25rem; }
.settings-group { border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 1.25rem; background: rgba(255,255,255,.025); }
.settings-group legend { padding: 0 .55rem; font-weight: 800; color: var(--accent, #d8a94b); }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.settings-grid .full { grid-column: 1 / -1; }
.settings-grid label:not(.toggle-row), .maintenance-group > div label { display: block; margin-bottom: .45rem; font-weight: 700; }
.settings-grid input, .settings-grid select, .settings-grid textarea, .maintenance-group textarea { width: 100%; }
.settings-grid textarea, .maintenance-group textarea { min-height: 110px; resize: vertical; }
.colour-grid input[type="color"] { min-height: 48px; padding: .25rem; cursor: pointer; }
.toggle-row { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-weight: 700; }
.toggle-row input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent, #d8a94b); }
.maintenance-group { display: grid; gap: 1rem; }
.settings-actions { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } .settings-grid .full { grid-column: auto; } }