:root {
    --admin-ink: #0b0c0e;
    --admin-ink-soft: #101216;
    --admin-panel: #17191e;
    --admin-panel-raised: #1d2026;
    --admin-panel-hover: #22262d;
    --admin-ivory: #f4efe5;
    --admin-muted: #9f9a91;
    --admin-brass: #d6ad60;
    --admin-brass-light: #f0cf8c;
    --admin-oxblood: #7b2833;
    --admin-blue: #2d6473;
    --admin-success: #6fa083;
    --admin-danger: #c86464;
    --admin-info: #6f9fb0;
    --admin-line: rgba(244, 239, 229, .1);
    --admin-line-strong: rgba(214, 173, 96, .3);
    --admin-sidebar-width: 286px;
    --admin-topbar-height: 72px;
    --admin-radius-sm: 10px;
    --admin-radius: 16px;
    --admin-radius-lg: 24px;
    --admin-shadow: 0 22px 60px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--admin-ink); }

.admin-shell { min-height: 100vh; }
.admin-sidebar,
.sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 1050;
    width: var(--admin-sidebar-width) !important;
    height: 100vh !important;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--admin-line);
    background:
        radial-gradient(circle at 40% 5%, color-mix(in srgb, var(--admin-tenant, var(--admin-oxblood)) 22%, transparent), transparent 230px),
        rgba(14,16,19,.98) !important;
    box-shadow: 16px 0 50px rgba(0,0,0,.2);
    backdrop-filter: blur(20px);
    transition: transform .25s ease;
}
.admin-sidebar::before,
.sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: repeating-linear-gradient(115deg, var(--admin-oxblood) 0 26px, var(--admin-ivory) 26px 52px, var(--admin-blue) 52px 78px, var(--admin-ivory) 78px 104px);
}
.sidebar-brand { padding: 1.8rem 1.25rem 1.25rem; border-bottom: 1px solid var(--admin-line); }
.sidebar-brand-main { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.sidebar-logo { display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 58px; overflow: hidden; border: 1px solid var(--admin-line-strong); border-radius: 16px; background: rgba(255,255,255,.035); }
.sidebar-logo img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.sidebar-brand-copy { min-width: 0; }
.sidebar-brand-copy strong { display: block; overflow: hidden; color: var(--admin-ivory); font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand-copy span { display: block; margin-top: .3rem; color: var(--admin-muted); font-size: .63rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin-top: 1rem; }
.status-chip { min-width: 0; padding: .6rem .65rem; border: 1px solid var(--admin-line); border-radius: 11px; background: rgba(255,255,255,.025); color: var(--admin-muted); font-size: .66rem; line-height: 1.35; text-align: center; }
.status-chip i { display: block; margin-bottom: .25rem; font-size: .9rem; }
.status-chip.online { border-color: rgba(111,160,131,.28); color: #8bc19d; background: rgba(111,160,131,.07); }
.status-chip.warning { border-color: rgba(214,173,96,.28); color: var(--admin-brass-light); background: rgba(214,173,96,.07); }
.status-chip.info { border-color: rgba(111,159,176,.28); color: #8fb7c5; background: rgba(111,159,176,.07); }
.sidebar-user { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--admin-line); }
.sidebar-user-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: rgba(214,173,96,.1); color: var(--admin-brass-light); }
.sidebar-user div { min-width: 0; }
.sidebar-user strong { display: block; overflow: hidden; color: var(--admin-ivory); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user a, .sidebar-user span { color: var(--admin-muted); font-size: .67rem; }

.sidebar-nav-label { padding: 1.3rem 1.25rem .45rem; color: #68655f; font-size: .61rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.categories { margin: 0; padding: .2rem .75rem 1rem !important; }
.sidebar .categories > li,
.sidebar > ul > li { margin: .18rem 0; padding: 0 !important; }
.sidebar .menu-item,
.sidebar > ul > li { position: relative; display: flex; align-items: center; border: 1px solid transparent; border-radius: 12px; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.sidebar .menu-item:hover,
.sidebar > ul > li:hover { border-color: var(--admin-line); background: rgba(255,255,255,.035); transform: translateX(2px); }
.sidebar .menu-item.active { border-color: var(--admin-line-strong); background: linear-gradient(90deg, rgba(214,173,96,.11), rgba(214,173,96,.03)); }
.sidebar .menu-item > i,
.sidebar > ul > li > i { position: absolute; left: .85rem; z-index: 1; width: 21px; margin: 0 !important; color: #716d66 !important; font-size: .92rem !important; text-align: center; pointer-events: none; }
.sidebar .menu-item.active > i { color: var(--admin-brass-light) !important; }
.sidebar .menu-button,
.sidebar ul > li > a,
.sidebar form button {
    display: block;
    width: 100%;
    padding: .72rem .8rem .72rem 2.7rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--admin-muted) !important;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}
.sidebar .menu-item.active .menu-button { color: var(--admin-ivory) !important; }
.sidebar form { width: 100%; }
.sidebar-cta { margin: .8rem .75rem; padding: 1rem; border: 1px solid rgba(214,173,96,.24); border-radius: 14px; background: rgba(214,173,96,.06); }
.sidebar-cta strong { display: block; margin-bottom: .35rem; color: var(--admin-ivory); font-size: .78rem; }
.sidebar-cta p { margin: 0 0 .8rem; color: var(--admin-muted); font-size: .68rem; line-height: 1.55; }
.sidebar-cta .btn { width: 100%; }
.sidebar-footer { margin-top: auto; padding: .8rem 1.1rem 1.3rem; }
.sidebar-footer-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--admin-line); border-radius: 12px; color: var(--admin-muted); font-size: .68rem; }
.sidebar-footer input[type="color"] { width: 30px; height: 25px; padding: 0; overflow: hidden; border: 1px solid var(--admin-line); border-radius: 7px; background: transparent; }
.hide-menu-btn { display: inline-flex !important; justify-content: center; align-items: center; gap: .5rem; width: 100%; margin-top: .7rem; padding: .55rem !important; color: #77736c !important; font-size: .69rem !important; }

.admin-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--admin-sidebar-width);
    z-index: 1040;
    height: var(--admin-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--admin-line);
    background: rgba(11,12,14,.86);
    backdrop-filter: blur(20px) saturate(140%);
    transition: left .25s ease;
}
.admin-topbar-left, .admin-topbar-actions { display: flex; align-items: center; gap: .75rem; }
.admin-menu-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--admin-line); border-radius: 12px; background: rgba(255,255,255,.025); color: var(--admin-muted); cursor: pointer; }
.admin-menu-button:hover { border-color: var(--admin-line-strong); color: var(--admin-ivory); }
.admin-page-heading small { display: block; color: #6f6b64; font-size: .61rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.admin-page-heading strong { display: block; max-width: 40vw; overflow: hidden; color: var(--admin-ivory); font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar-actions .btn { min-height: 38px; padding: .55rem .85rem; font-size: .72rem; }

.admin-main { min-height: 100vh; }
#wrapper {
    min-height: 100vh;
    margin-left: var(--admin-sidebar-width);
    padding-top: var(--admin-topbar-height);
    transition: margin-left .25s ease;
}
#wrapper.fullwidth,
.sidebar-collapsed #wrapper { margin-left: 0; }
.sidebar-collapsed .admin-sidebar,
.sidebar-collapsed .sidebar { transform: translateX(-100%); }
.sidebar-collapsed .admin-topbar { left: 0; }
.admin-content { padding: 1.5rem; }

/* Existing dashboard component compatibility */
.welcome { color: var(--admin-ivory); }
.welcome .content,
.charts .chart-container,
.admins .box .admin,
.glass-background {
    border: 1px solid var(--admin-line) !important;
    border-radius: var(--admin-radius) !important;
    background: linear-gradient(145deg, rgba(29,32,38,.9), rgba(19,21,25,.94)) !important;
    box-shadow: 0 16px 45px rgba(0,0,0,.2) !important;
    backdrop-filter: blur(14px);
}
.welcome .content { position: relative; overflow: hidden; }
.welcome .content::after { content: ""; position: absolute; width: 170px; height: 170px; right: -85px; top: -105px; border: 1px solid var(--admin-line); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.015); pointer-events: none; }
.welcome p, .statistics .box p, .admins .box p { color: var(--admin-muted) !important; }
.statistics .box,
.statis .box {
    min-height: 145px;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius) !important;
    background: linear-gradient(145deg, rgba(29,32,38,.92), rgba(17,19,23,.96)) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.statistics .box:hover, .statis .box:hover, .booking-card:hover { transform: translateY(-4px) !important; border-color: var(--admin-line-strong); box-shadow: 0 20px 45px rgba(0,0,0,.28); }
.statis .box i { position: static !important; display: grid; place-items: center; width: 46px !important; height: 46px !important; margin: 0 auto .75rem; padding: 0 !important; border: 1px solid currentColor; border-radius: 13px !important; background: rgba(255,255,255,.025) !important; line-height: 1 !important; text-align: center !important; }
.statis .box h3::after { display: none !important; }
.charts .chart-container { min-height: 360px; padding: 1.2rem !important; }
.charts .chart-container h3 { color: var(--admin-muted) !important; font-size: .76rem !important; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.booking-card { border: 1px solid var(--admin-line) !important; border-radius: 13px !important; background: rgba(255,255,255,.025) !important; box-shadow: none !important; }
.all-sorted { border: 1px solid rgba(111,160,131,.28) !important; border-radius: var(--admin-radius) !important; background: rgba(111,160,131,.08) !important; box-shadow: none !important; color: #9bc9aa !important; }
.button-tutorial { color: var(--admin-muted) !important; transition: color .2s ease, transform .2s ease; }
.button-tutorial:hover { color: var(--admin-brass-light) !important; transform: rotate(8deg) scale(1.08) !important; }
.main-color { color: var(--admin-brass-light) !important; }

@media (max-width: 991.98px) {
    .admin-sidebar, .sidebar { transform: translateX(-100%); }
    body:not(.sidebar-collapsed) .admin-sidebar,
    body:not(.sidebar-collapsed) .sidebar { transform: translateX(0); }
    .admin-topbar { left: 0; }
    #wrapper { margin-left: 0; }
    .admin-topbar-actions .topbar-label { display: none; }
}
@media (max-width: 575.98px) {
    :root { --admin-topbar-height: 64px; }
    .admin-topbar { padding: 0 .75rem; }
    .admin-page-heading strong { max-width: 52vw; }
    .admin-topbar-actions .btn:not(.keep-mobile) { display: none; }
    .admin-content, #wrapper > .p-4 { padding: .8rem !important; }
}