/* ==========================================================================
   leasetickets.com admin shell — left sidebar layout (admin.html only)
   Palette vars come from brand.css.
   ========================================================================== */
:root { --side-w: 260px; --side-w-collapsed: 72px; --topbar-h: 64px; }

/* ---- hidden until logged in ---- */
.side, .side-overlay, .topbar-menu, .topbar-title, .topbar-logout { display: none; }

/* Original horizontal tabs: kept in DOM for JS, hidden visually (sidebar replaces them). */
.admin-shell #adminMainTabs,
.admin-shell #adminPanel > .sub-tabs { display: none !important; }

/* ---- Logged-out: branded login page ---- */
.admin-shell:not(.is-authed) {
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(29,78,216,.18), transparent 60%),
        var(--brand-bg);
    min-height: 100vh; background-attachment: fixed; background-repeat: no-repeat;
}
.admin-shell:not(.is-authed) .login-screen { margin-top: 64px; border-radius: 12px; }
.admin-shell .login-screen button { background: var(--brand-orange-500); font-weight: 600; padding: 12px; }
.admin-shell .login-screen button:hover { background: var(--brand-orange-600); }

/* ==========================================================================
   Logged-in shell
   ========================================================================== */
.admin-shell.is-authed { background: var(--brand-bg); }

/* ---- Sidebar ---- */
.is-authed .side {
    display: flex; flex-direction: column;
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: var(--side-w);
    background: linear-gradient(180deg, var(--brand-navy-900) 0%, var(--brand-navy-950) 100%);
    color: #C7D3E6; box-shadow: 2px 0 12px rgba(6,20,40,.18);
    transition: width .2s ease, transform .25s ease;
}
.side-brand {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: var(--topbar-h);
}
.side-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.side-brand-name { font-weight: 800; font-size: .78rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-orange-500); }
.side-brand-sub { display: none; }

.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.side-section {
    margin: 16px 10px 6px; font-size: .68rem; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: #6F86A8; white-space: nowrap;
}
.side .ico, .admin-shell .nav .ico {
    width: 20px; height: 20px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.side-link, .side-sub {
    display: flex; align-items: center; gap: 12px; width: 100%;
    margin: 1px 0; padding: 10px 12px; border-radius: 8px;
    background: transparent; color: #C7D3E6; font-size: .92rem; font-weight: 500;
    text-align: left; text-decoration: none; white-space: nowrap; box-sizing: border-box;
    position: relative; cursor: pointer; border: 0;
}
.side-link .lbl, .side-sub .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side-link:hover, .side-sub:hover { background: rgba(255,255,255,.07); color: #fff; opacity: 1; }
.side-link.is-active { background: rgba(242,107,29,.14); color: #fff; }
.side-link.is-active::before {
    content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 4px;
    border-radius: 0 4px 4px 0; background: var(--brand-orange-500);
}
.side-link.is-active .ico { color: var(--brand-orange-500); }
.side-link .chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; transition: transform .2s; }
.side-group.is-open > .side-link .chev { transform: rotate(90deg); }

.side-subs { display: none; margin: 2px 0 6px 22px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); }
.side-group.is-open > .side-subs { display: block; }
.side-sub { padding: 7px 10px; font-size: .85rem; color: #9FB2CF; gap: 10px; }
.side-sub .ico { width: 16px; height: 16px; }
.side-sub.is-active { background: var(--brand-orange-500); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(242,107,29,.35); }
.side-sub.is-active:hover { background: var(--brand-orange-600); }

.side-foot { padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.side-foot .side-link { font-size: .85rem; padding: 8px 12px; color: #9FB2CF; }
.side-domain {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px 4px;
    font-size: .82rem; color: #8FA3C2; white-space: nowrap; letter-spacing: .3px;
}
.side-domain b { color: var(--brand-orange-500); font-weight: 700; }
.side-domain .ico { width: 18px; height: 18px; color: var(--brand-orange-500); }

/* ---- Top bar (re-uses the existing .nav so #adminStatus / sync badge stay intact) ---- */
.is-authed .nav {
    position: sticky; top: 0; z-index: 50;
    margin-left: var(--side-w); min-height: var(--topbar-h); box-sizing: border-box;
    padding: 10px 24px; background: #fff; color: var(--brand-text);
    border-bottom: 1px solid var(--brand-border); box-shadow: 0 1px 0 rgba(11,31,58,.03), inset 0 -3px 0 var(--brand-orange-500);
    justify-content: flex-start; transition: margin-left .2s ease;
}
.is-authed .nav .brand { display: none; }
.is-authed .topbar-title { display: block; flex: 1; min-width: 0; }
.topbar-crumb { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-muted); font-weight: 600; }
.topbar-title h1 { margin: 2px 0 0; font-size: 1.3rem; line-height: 1.2; color: var(--brand-navy-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-authed .nav-right { gap: 14px; }
.is-authed #adminStatus { font-size: .88rem; color: var(--brand-muted); }
.is-authed .nav .admin-link { color: var(--brand-blue-600); font-weight: 600; }
.is-authed .nav .admin-link:hover { color: var(--brand-orange-600); }
.is-authed .topbar-logout {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    background: var(--brand-navy-800); padding: 8px 14px; font-weight: 600; font-size: .88rem;
}
.is-authed .topbar-logout:hover { background: var(--brand-orange-500); }
.is-authed .topbar-logout .ico { width: 16px; height: 16px; }
.topbar-menu {
    align-items: center; justify-content: center; margin: 0 6px 0 -8px; padding: 8px;
    background: transparent; color: var(--brand-navy-800); border-radius: 8px;
}
.topbar-menu:hover { background: var(--brand-blue-50); color: var(--brand-orange-600); }
.is-authed .topbar-menu { display: inline-flex; }

/* ---- Main content ---- */
.is-authed .container {
    margin-left: var(--side-w); max-width: none; padding: 24px 28px 48px;
    transition: margin-left .2s ease;
}
.is-authed #adminPanel { max-width: 1320px; }
.is-authed #adminPanel h2 { color: var(--brand-navy-800); }
.is-authed .admin-actions {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    background: #fff; border: 1px solid var(--brand-border); border-radius: 10px; padding: 12px;
}
.is-authed .admin-actions button { margin: 0; }
.is-authed .ticket-table table { border-radius: 10px; border: 1px solid var(--brand-border); }
.is-authed .option-section { border-radius: 10px; border: 1px solid var(--brand-border); border-left: 4px solid var(--brand-orange-500); }

/* ---- Collapsed (icons only) desktop ---- */
.side-collapsed .side { width: var(--side-w-collapsed); }
.side-collapsed .side .lbl, .side-collapsed .side .chev,
.side-collapsed .side-brand-name, .side-collapsed .side-section { display: none; }
.side-collapsed .side-section + * { margin-top: 10px; }
.side-collapsed .side-nav { padding: 8px 10px; }
.side-collapsed .side-brand { align-items: center; padding: 14px 6px; }
.side-collapsed .side-logo { height: 34px; width: 25px; max-width: none; object-fit: cover; object-position: left center; }
.side-collapsed .side-link, .side-collapsed .side-sub { justify-content: center; padding: 10px; }
.side-collapsed .side-subs { margin-left: 0; padding-left: 0; border-left: 0; }
.side-collapsed .side-group:not(:has(.is-active)) > .side-subs { display: none; }
.side-collapsed .side-domain { justify-content: center; padding: 10px 0 4px; }
.side-collapsed .side-collapse .ico { transform: scaleX(-1); }
.side-collapsed.is-authed .nav, .side-collapsed.is-authed .container { margin-left: var(--side-w-collapsed); }

/* ---- Mobile / tablet: off-canvas drawer + hamburger ---- */
@media (max-width: 900px) {
    .is-authed .side { width: var(--side-w) !important; transform: translateX(-100%); }
    .side-open .side { transform: none; }
    .side-collapsed .side .lbl, .side-collapsed .side .chev, .side-collapsed .side-brand-name, .side-collapsed .side-section { display: revert; }
    .side-collapsed .side-link, .side-collapsed .side-sub { justify-content: flex-start; }
    .is-authed .side-overlay {
        display: block; position: fixed; inset: 0; z-index: 55; background: rgba(6,20,40,.5);
        opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .side-open .side-overlay { opacity: 1; pointer-events: auto; }
    .is-authed .nav, .side-collapsed.is-authed .nav,
    .is-authed .container, .side-collapsed.is-authed .container { margin-left: 0; }
    .is-authed .nav { padding: 8px 14px; flex-wrap: nowrap; }
    .is-authed .container { padding: 16px 14px 40px; }
    .is-authed #adminStatus, .is-authed .nav .admin-link { display: none; }
    .is-authed .topbar-logout span { display: none; }
    .is-authed .topbar-logout { padding: 8px 10px; }
    .topbar-title h1 { font-size: 1.1rem; }
    .topbar-crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .62rem; }
    .side-collapse { display: none !important; }
}
@media (max-width: 480px) {
    .is-authed .nav .sync-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}

/* Lease Tickets logo sits on white */
.side-logo { background: #fff; border-radius: 8px; padding: 4px 8px; height: 44px; max-width: 200px; box-sizing: border-box; }
.side-collapsed .side-logo { padding: 2px; height: 34px; width: 40px; }