/* =============================================================================
   System ambiance — Apple-like frosted glass, soft light, gentle motion
   Load last (after system-surfaces.css). Brand: #173630
   ============================================================================= */

@keyframes sys-ambient-drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(1.5%, -1%, 0) scale(1.04);
    }
}

@keyframes sys-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes sys-glow-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.85;
    }
}

/* ── Ambient light field (dashboard + public shells) ───────────────────────
   IMPORTANT: do NOT force position/z-index on body > * — that breaks
   Bootstrap offcanvas (huge empty gap) and dropdown stacking (bars over menus).
   Keep ambient layers at z-index: -1 so normal chrome/menus stay above. */
body.admin-shell,
body.store-shell,
body.shop-shell,
body.auth-split-body,
body.pos-terminal-shell,
body.db-setup-page,
body.error-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
}

body.admin-shell::before,
body.store-shell::before,
body.shop-shell::before,
body.auth-split-body::before,
body.pos-terminal-shell::before,
body.db-setup-page::before,
body.error-page::before {
    content: "";
    position: fixed;
    inset: -25% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 42% at 12% 8%, var(--sys-ambient-brand, rgba(23, 54, 48, 0.16)), transparent 58%),
        radial-gradient(ellipse 48% 36% at 88% 4%, var(--sys-ambient-soft, rgba(255, 255, 255, 0.55)), transparent 52%),
        radial-gradient(ellipse 42% 38% at 78% 92%, rgba(23, 54, 48, 0.1), transparent 55%),
        radial-gradient(ellipse 30% 28% at 40% 60%, rgba(255, 255, 255, 0.2), transparent 60%);
    animation: sys-ambient-drift 22s var(--sys-rise-ease, ease) infinite alternate;
    will-change: transform;
}

body.admin-shell::after,
body.store-shell::after,
body.shop-shell::after,
body.auth-split-body::after,
body.pos-terminal-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0%,
        transparent 28%,
        transparent 72%,
        rgba(23, 54, 48, 0.04) 100%
    );
    animation: sys-glow-pulse 10s ease-in-out infinite;
}

/* Soften page canvas so glass reads clearly */
body.admin-shell .dashboard-wrapper,
body.admin-shell .main-content,
body.admin-shell .content-wrapper {
    background: transparent;
}

body.admin-shell .content-wrapper__main,
body [class*="-module-page"],
body [class*="-module-page__canvas"],
body.store-shell .shop-main,
body.store-shell main,
body.auth-split-body .auth-split-page,
body.pos-terminal-shell .pos-main,
body.db-setup-page .db-setup-shell {
    position: relative;
}

/* ── Specular glass sheen on cards (::after — keep ::before free for accents) ─ */
body .sys-panel,
body .content-card,
body .stat-card,
body .pf-overview-card,
body .quick-action-card,
body [class*="-hub-tile__inner"],
body .purch-hub-tile__inner,
body .shop-product-card,
body .pos-product-card,
body .modal-content,
body .db-setup-card,
body .admin-shell .card:not(.rounded-circle) {
    position: relative;
    overflow: hidden;
}

body .sys-panel::after,
body .content-card::after,
body .pf-overview-card::after,
body .quick-action-card::after,
body [class*="-hub-tile__inner"]::after,
body .purch-hub-tile__inner::after,
body .shop-product-card::after,
body .pos-product-card::after,
body .modal-content::after,
body .db-setup-card::after,
body .admin-shell .card:not(.rounded-circle)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.08) 28%,
            transparent 48%
        ),
        radial-gradient(
            120% 80% at 100% 0%,
            rgba(23, 54, 48, 0.1),
            transparent 45%
        );
    opacity: 0.85;
}

body .sys-panel > *,
body .content-card > *,
body .stat-card > *,
body .pf-overview-card > *,
body .quick-action-card > *,
body [class*="-hub-tile__inner"] > *,
body .purch-hub-tile__inner > *,
body .shop-product-card > *,
body .pos-product-card > *,
body .modal-content > *,
body .db-setup-card > *,
body .admin-shell .card:not(.rounded-circle) > * {
    position: relative;
    z-index: 1;
}

/* Stronger frosted feel */
body .sys-panel,
body .content-card,
body .pf-overview-card,
body [class*="-hub-tile__inner"],
body .modal-content {
    backdrop-filter: blur(20px) saturate(1.45) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(7, 10, 9, 0.04),
        0 8px 28px rgba(7, 10, 9, 0.06),
        0 0 0 1px color-mix(in srgb, #173630 10%, transparent) !important;
}

body .sys-panel:hover,
body .content-card:hover,
body .pf-overview-card:hover,
body [class*="-module-page"] [class*="-hub-tile"]:hover [class*="-hub-tile__inner"],
body .stat-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 14px 36px rgba(23, 54, 48, 0.14),
        0 0 0 1px color-mix(in srgb, #173630 20%, transparent) !important;
}

/* Soft brand rim light on focusable glass */
body .pf-overview-card:focus-visible,
body [class*="-hub-tile"]:focus-visible [class*="-hub-tile__inner"],
body .btn-primary:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 0 3px rgba(23, 54, 48, 0.22),
        0 10px 28px rgba(23, 54, 48, 0.2) !important;
}

/* ── Page entrance (gentle rise) ──────────────────────────────────────────── */
body .content-wrapper__main > *,
body [class*="-module-page"] > *:not(script):not(style),
body [class*="-module-page__canvas"] > *:not(script):not(style),
body.store-shell main > *:not(script),
body.store-shell .shop-main > *:not(script),
body.auth-split-body .auth-split-form-col > *:not(script),
body.auth-split-body .auth-split-visual-inner > *:not(script),
body.pos-terminal-shell .pos-main > *:not(script),
body.db-setup-page .db-setup-shell > *:not(script),
body.error-page .error-page__page > *:not(script) {
    animation: sys-rise 0.55s var(--sys-rise-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

body .content-wrapper__main > *:nth-child(1),
body [class*="-module-page"] > *:nth-child(1),
body [class*="-module-page__canvas"] > *:nth-child(1) {
    animation-delay: 0.02s;
}

body .content-wrapper__main > *:nth-child(2),
body [class*="-module-page"] > *:nth-child(2),
body [class*="-module-page__canvas"] > *:nth-child(2) {
    animation-delay: 0.07s;
}

body .content-wrapper__main > *:nth-child(3),
body [class*="-module-page"] > *:nth-child(3),
body [class*="-module-page__canvas"] > *:nth-child(3) {
    animation-delay: 0.12s;
}

body .content-wrapper__main > *:nth-child(4),
body [class*="-module-page"] > *:nth-child(4),
body [class*="-module-page__canvas"] > *:nth-child(4) {
    animation-delay: 0.17s;
}

body .content-wrapper__main > *:nth-child(n + 5),
body [class*="-module-page"] > *:nth-child(n + 5),
body [class*="-module-page__canvas"] > *:nth-child(n + 5) {
    animation-delay: 0.22s;
}

/* KPI / hub tiles micro stagger */
body .pf-overview-card,
body [class*="-hub-tile"] {
    animation: sys-rise 0.5s var(--sys-rise-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

body .pf-overview-card:nth-child(1),
body [class*="-hub-tile"]:nth-child(1) {
    animation-delay: 0.08s;
}

body .pf-overview-card:nth-child(2),
body [class*="-hub-tile"]:nth-child(2) {
    animation-delay: 0.14s;
}

body .pf-overview-card:nth-child(3),
body [class*="-hub-tile"]:nth-child(3) {
    animation-delay: 0.2s;
}

body .pf-overview-card:nth-child(4),
body [class*="-hub-tile"]:nth-child(4) {
    animation-delay: 0.26s;
}

body .pf-overview-card:nth-child(n + 5),
body [class*="-hub-tile"]:nth-child(n + 5) {
    animation-delay: 0.3s;
}

/* Topbar / sidebar glass wash — do not raise chrome above open menus */
body.admin-shell .admin-topbar,
body.admin-shell .topbar,
body.store-shell .shop-topbar,
body.store-shell .store-site-header,
body.pos-terminal-shell .pos-topbar {
    position: relative;
    z-index: 1030;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    background: color-mix(in srgb, var(--topbar-bg, #fff) 78%, transparent);
    box-shadow:
        inset 0 -1px 0 color-mix(in srgb, #173630 8%, transparent),
        0 8px 24px rgba(7, 10, 9, 0.04);
}

/* Secondary shop chrome stays below topbar menus.
   Portal strip must stay below the categories bar so the mega-menu can overflow it. */
body.store-shell .shop-promo-bar {
    position: relative;
    z-index: 1025;
}

body.store-shell .shop-nav-secondary-bar {
    position: relative;
    z-index: 1022;
    overflow: visible;
}

body.store-shell .shop-portal-strip {
    position: relative;
    z-index: 1010;
}

body.store-shell .shop-nav-dock .shop-portal-strip {
    z-index: 1;
}

body.admin-shell .admin-sidebar,
body.admin-shell .sidebar {
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

/* Menus / drawers above glass chrome */
body.store-shell .dropdown-menu.show,
body.shop-shell .dropdown-menu.show,
body.admin-shell .dropdown-menu.show,
body .shop-user-dropdown.show,
body .tb-drop-user.show,
body .tb-drop-user.dropdown-menu {
    z-index: 1080 !important;
}

/* Never let ambiance override Bootstrap drawer positioning */
body.store-shell .offcanvas,
body.shop-shell .offcanvas {
    position: fixed !important;
    z-index: 1045;
}

/* Dark theme ambient */
[data-theme="dark"].admin-shell::before,
html[data-theme="dark"] body.admin-shell::before,
body.admin-shell[data-theme="dark"]::before {
    background:
        radial-gradient(ellipse 55% 42% at 12% 8%, rgba(23, 54, 48, 0.22), transparent 58%),
        radial-gradient(ellipse 48% 36% at 88% 4%, rgba(255, 255, 255, 0.06), transparent 52%),
        radial-gradient(ellipse 42% 38% at 78% 92%, rgba(23, 54, 48, 0.12), transparent 55%);
}

html[data-theme="dark"] body.admin-shell::before {
    background:
        radial-gradient(ellipse 55% 42% at 12% 8%, rgba(23, 54, 48, 0.22), transparent 58%),
        radial-gradient(ellipse 48% 36% at 88% 4%, rgba(255, 255, 255, 0.06), transparent 52%),
        radial-gradient(ellipse 42% 38% at 78% 92%, rgba(23, 54, 48, 0.12), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
    body.admin-shell::before,
    body.store-shell::before,
    body.shop-shell::before,
    body.auth-split-body::before,
    body.pos-terminal-shell::before,
    body.db-setup-page::before,
    body.error-page::before,
    body.admin-shell::after,
    body.store-shell::after,
    body.shop-shell::after,
    body.auth-split-body::after,
    body.pos-terminal-shell::after {
        animation: none !important;
    }

    body .content-wrapper__main > *,
    body [class*="-module-page"] > *,
    body [class*="-module-page__canvas"] > *,
    body .pf-overview-card,
    body [class*="-hub-tile"],
    body.store-shell main > *,
    body.auth-split-body .auth-split-form-col > *,
    body.pos-terminal-shell .pos-main > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   ControlX visual bridge
   Dashboard and Identity shells only. Public storefront styles stay isolated.
   This layer maps Diwan's existing selectors to the ControlX visual language
   without changing view markup, permissions, routing, or page behavior.
   ========================================================================== */

body.admin-shell {
    --cx-blue: #1c3e38;
    --cx-blue-hover: #1a3631;
    --cx-indigo: #30645a;
    --cx-page: #f9f9f9;
    --cx-surface: #ffffff;
    --cx-subtle: #f1f5f9;
    --cx-ink: #070a09;
    --cx-muted: #64748b;
    --cx-line: #e2e8f0;
    --topbar-height: 70px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --topbar-bg: rgba(255, 255, 255, 0.88);
    --topbar-border: rgba(0, 0, 0, 0.07);
    --topbar-blur: blur(14px);
    --sidebar-gradient: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    --sidebar-text: #334155;
    --sidebar-hover-bg: rgb(241 245 249);
    --sidebar-section-color: #475569;
    --sidebar-border: rgba(0, 0, 0, 0.06);
    --bg-primary: var(--cx-page);
    --bg-secondary: var(--cx-surface);
    --bg-tertiary: var(--cx-subtle);
    --text-primary: var(--cx-ink);
    --text-secondary: var(--cx-muted);
    --text-muted: #94a3b8;
    --border-color: var(--cx-line);
    --input-bg: var(--cx-surface);
    --input-border: var(--cx-line);
    --input-focus-border: var(--cx-blue);
    --input-focus-ring: rgba(28, 62, 56, 0.15);
    --gradient-primary: linear-gradient(135deg, var(--cx-blue) 0%, var(--cx-indigo) 100%);
    --surf-glass-bg: rgba(255, 255, 255, 0.88);
    --surf-glass-bg-strong: rgba(255, 255, 255, 0.96);
    --surf-glass-border: rgba(0, 0, 0, 0.06);
    --surf-glass-border-hover: rgba(28, 62, 56, 0.3);
    --surf-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --surf-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    --surf-glass-shadow-hover: 0 8px 24px rgba(28, 62, 56, 0.12), 0 1px 3px rgba(7, 10, 9, 0.08);
    --surf-glass-blur: blur(14px) saturate(1.15);
    --btn-primary-fill: linear-gradient(135deg, var(--cx-blue) 0%, var(--cx-indigo) 100%);
    --btn-primary-fill-hover: linear-gradient(135deg, var(--cx-blue-hover) 0%, #1e3a35 100%);
    --btn-primary-border: rgba(28, 62, 56, 0.36);
    --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(28, 62, 56, 0.24);
    --btn-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 20px rgba(28, 62, 56, 0.3);
    --btn-outline-bg: rgba(255, 255, 255, 0.8);
    --btn-outline-border: rgba(28, 62, 56, 0.35);
    --btn-outline-color: var(--cx-blue-hover);
    background:
        radial-gradient(ellipse 55% 42% at 12% 8%, rgba(28, 62, 56, 0.08), transparent 58%),
        radial-gradient(ellipse 48% 36% at 88% 4%, rgba(48, 100, 90, 0.06), transparent 52%),
        var(--cx-page);
}

body.admin-shell .dashboard-wrapper {
    min-height: 100dvh;
    background: transparent;
}

body.admin-shell .main-content {
    margin-inline-start: var(--sidebar-width);
    background: transparent;
}

body.admin-shell .sidebar.collapsed ~ .main-content,
html.sidebar-pref-collapsed body.admin-shell .main-content {
    margin-inline-start: var(--sidebar-collapsed-width);
}

body.admin-shell .sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-gradient);
    border-color: var(--sidebar-border);
    box-shadow: 2px 0 18px rgba(7, 10, 9, 0.04);
}

body.admin-shell .sidebar.collapsed,
html.sidebar-pref-collapsed body.admin-shell .sidebar {
    width: var(--sidebar-collapsed-width);
}

body.admin-shell .sidebar.collapsed.hover-expanded {
    width: var(--sidebar-width);
    box-shadow: 0 18px 45px rgba(7, 10, 9, 0.14);
}

body.admin-shell .sidebar-nav .nav-link,
body.admin-shell .sidebar-nav .nav-group-toggle {
    color: var(--sidebar-text);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.admin-shell .sidebar-nav .nav-link:hover,
body.admin-shell .sidebar-nav .nav-group-toggle:hover {
    background: var(--sidebar-hover-bg);
    color: var(--cx-ink);
    transform: translateY(-1px);
}

body.admin-shell .sidebar-nav .nav-link.active,
body.admin-shell .sidebar-nav > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, rgba(28, 62, 56, 0.16), rgba(48, 100, 90, 0.08));
    color: var(--cx-blue-hover);
    box-shadow: inset 4px 0 0 var(--cx-blue);
    border-inline-start-color: transparent;
    font-weight: 700;
}

html[dir="rtl"] body.admin-shell .sidebar-nav .nav-link.active,
html[dir="rtl"] body.admin-shell .sidebar-nav > .nav-item > .nav-link.active {
    box-shadow: inset -4px 0 0 var(--cx-blue);
}

body.admin-shell .sidebar-nav .nav-link.active i,
body.admin-shell .sidebar-nav .nav-link.active .nav-icon {
    color: var(--cx-blue-hover) !important;
}

body.admin-shell .sidebar-nav .nav-group.open > .nav-group-toggle {
    background: linear-gradient(135deg, var(--cx-blue-hover) 0%, var(--cx-blue) 52%, var(--cx-indigo) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(28, 62, 56, 0.3);
}

body.admin-shell .sidebar-nav .nav-group.open > .nav-group-toggle > i:first-child,
body.admin-shell .sidebar-nav .nav-group.open > .nav-group-toggle .nav-chevron {
    color: rgba(255, 255, 255, 0.92);
}

body.admin-shell .sidebar-nav .nav-group .nav-group-items {
    background: rgba(241, 245, 249, 0.74);
}

body.admin-shell .sidebar-user-footer {
    background: rgba(255, 255, 255, 0.86);
    border-color: var(--sidebar-border);
    backdrop-filter: blur(8px);
}

body.admin-shell .tb {
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom-color: var(--topbar-border);
    box-shadow: 0 1px 3px rgba(7, 10, 9, 0.04);
    backdrop-filter: var(--topbar-blur);
    -webkit-backdrop-filter: var(--topbar-blur);
}

body.admin-shell .tb.scrolled {
    box-shadow: 0 8px 24px rgba(7, 10, 9, 0.08);
}

body.admin-shell .tb-toggle,
body.admin-shell .tb-icon-btn,
body.admin-shell .tb-user-btn,
body.admin-shell .tb-ctx-btn {
    border-radius: var(--sys-radius);
    color: var(--cx-muted);
}

body.admin-shell .tb-toggle:hover,
body.admin-shell .tb-icon-btn:hover,
body.admin-shell .tb-icon-btn.show,
body.admin-shell .tb-user-btn:hover,
body.admin-shell .tb-user-btn.show,
body.admin-shell .tb-ctx-btn:hover,
body.admin-shell .tb-ctx-btn.show {
    background: rgba(28, 62, 56, 0.08);
    color: var(--cx-blue-hover);
}

body.admin-shell .tb-logo-icon,
body.admin-shell .tb-logo-fallback .tb-logo-icon {
    background: var(--gradient-primary);
    box-shadow: 0 4px 12px rgba(28, 62, 56, 0.35);
}

body.admin-shell .tb-search-input {
    background: var(--cx-subtle);
    border-color: var(--cx-line);
}

body.admin-shell .tb-search-input:focus {
    background: var(--cx-surface);
    border-color: var(--cx-blue);
    box-shadow: 0 0 0 3.5px rgba(28, 62, 56, 0.15);
}

body.admin-shell .tb-search:focus-within .tb-search-icon,
body.admin-shell .tb-ctx-btn > .bi-buildings {
    color: var(--cx-blue);
}

body.admin-shell .tb .dropdown-menu,
body.admin-shell .admin-tenant-menu,
body.admin-shell .tb-drop {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 12px 32px rgba(7, 10, 9, 0.12) !important;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

body.admin-shell .content-wrapper__main {
    padding-top: 24px;
    padding-inline: 24px;
    padding-bottom: 24px;
}

body.admin-shell .page-header .page-title,
body.admin-shell .sys-page-title {
    color: var(--cx-ink);
}

body.admin-shell .page-header .page-subtitle,
body.admin-shell .sys-page-subtitle {
    color: var(--cx-muted);
}

body.admin-shell .content-card,
body.admin-shell .sys-panel,
body.admin-shell .stat-card,
body.admin-shell .quick-action-card,
body.admin-shell .card:not(.rounded-circle):not(.border-0),
body.admin-shell [class*="-hub-tile__inner"],
body.admin-shell [class*="-lines-panel"],
body.admin-shell [class*="-filter-bar"] {
    border-radius: var(--sys-radius) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.admin-shell .stat-card,
body.admin-shell .quick-action-card,
body.admin-shell [class*="-hub-tile__inner"] {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

body.admin-shell .stat-card:hover,
body.admin-shell .quick-action-card:hover,
body.admin-shell [class*="-hub-tile"]:hover [class*="-hub-tile__inner"],
body.admin-shell .content-card:hover,
body.admin-shell .sys-panel:hover {
    transform: translateY(-2px);
    border-color: rgba(28, 62, 56, 0.28) !important;
    box-shadow: 0 10px 25px -5px rgba(28, 62, 56, 0.12), 0 4px 10px -5px rgba(7, 10, 9, 0.08) !important;
}

body.admin-shell .content-card-header,
body.admin-shell .sys-panel__head:not(.sys-form-panel__head) {
    background: rgba(241, 245, 249, 0.62) !important;
    border-bottom-color: var(--cx-line) !important;
}

body.admin-shell .table {
    --bs-table-bg: rgba(255, 255, 255, 0.72);
    --bs-table-striped-bg: rgba(28, 62, 56, 0.025);
    --bs-table-hover-bg: rgba(28, 62, 56, 0.06);
    color: var(--cx-ink);
}

body.admin-shell .table thead th {
    color: var(--cx-muted);
    background: rgba(241, 245, 249, 0.82);
    border-bottom-color: var(--cx-line);
}

body.admin-shell .table tbody tr:hover > * {
    color: var(--cx-ink);
}

body.admin-shell .form-control,
body.admin-shell .form-select,
body.admin-shell .input-group-text {
    background: rgba(255, 255, 255, 0.88);
    border-color: var(--cx-line);
    color: var(--cx-ink);
    border-radius: var(--sys-radius);
}

body.admin-shell .form-control:focus,
body.admin-shell .form-select:focus {
    background: var(--cx-surface);
    border-color: var(--cx-blue);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

body.admin-shell .btn-primary {
    background: var(--btn-primary-fill);
    border-color: var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
}

body.admin-shell .btn-primary:hover {
    background: var(--btn-primary-fill-hover);
    box-shadow: var(--btn-primary-shadow-hover);
}

body.admin-shell .alert,
body.admin-shell .dropdown-menu,
body.admin-shell .modal-content,
body.admin-shell .toast {
    border-radius: var(--sys-radius) !important;
}

html[data-theme="dark"] body.admin-shell {
    --cx-page: #070a09;
    --cx-surface: #1e3b34;
    --cx-subtle: #1e3b34;
    --cx-ink: #f4f6f6;
    --cx-muted: #9ab2ad;
    --cx-line: #2d554c;
    --topbar-bg: rgba(4, 7, 6, 0.88);
    --topbar-border: rgba(255, 255, 255, 0.06);
    --sidebar-gradient: linear-gradient(180deg, #040706 0%, #070a09 100%);
    --sidebar-text: #9ab2ad;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-border: rgba(255, 255, 255, 0.05);
    --surf-glass-bg: rgba(30, 59, 52, 0.88);
    --surf-glass-bg-strong: rgba(30, 59, 52, 0.96);
    --surf-glass-border: rgba(255, 255, 255, 0.05);
    --surf-glass-border-hover: rgba(48, 111, 100, 0.45);
    --surf-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --surf-glass-shadow-hover: 0 12px 32px rgba(28, 62, 56, 0.2), 0 0 0 1px rgba(48, 111, 100, 0.2);
    --input-bg: #1e3b34;
    --input-border: #33554d;
}

html[data-theme="dark"] body.admin-shell .content-card,
html[data-theme="dark"] body.admin-shell .sys-panel,
html[data-theme="dark"] body.admin-shell .stat-card,
html[data-theme="dark"] body.admin-shell .quick-action-card,
html[data-theme="dark"] body.admin-shell .card:not(.rounded-circle):not(.border-0),
html[data-theme="dark"] body.admin-shell [class*="-hub-tile__inner"],
html[data-theme="dark"] body.admin-shell [class*="-lines-panel"],
html[data-theme="dark"] body.admin-shell [class*="-filter-bar"] {
    background: rgba(30, 59, 52, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.admin-shell .content-card-header,
html[data-theme="dark"] body.admin-shell .sys-panel__head:not(.sys-form-panel__head),
html[data-theme="dark"] body.admin-shell .table thead th {
    background: rgba(7, 10, 9, 0.54) !important;
    border-bottom-color: var(--cx-line) !important;
}

/* Auth uses the same ControlX palette while retaining the current split shell. */
body.auth-split-body {
    --cx-blue: #1c3e38;
    --cx-blue-hover: #1a3631;
    --cx-indigo: #30645a;
    --cx-auth-page: #f9f9f9;
    --cx-auth-surface: #ffffff;
    --cx-auth-ink: #070a09;
    --cx-auth-muted: #64748b;
    background:
        radial-gradient(ellipse 55% 48% at 8% 4%, rgba(28, 62, 56, 0.1), transparent 58%),
        radial-gradient(ellipse 46% 40% at 94% 12%, rgba(48, 100, 90, 0.08), transparent 55%),
        var(--cx-auth-page);
    color: var(--cx-auth-ink);
}

body.auth-split-body .auth-split-main {
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(28, 62, 56, 0.08), transparent 62%),
        var(--cx-auth-page);
}

body.auth-split-body .auth-split-visual-bg {
    background:
        linear-gradient(145deg, #070a09 0%, #1e293b 46%, #1a3631 100%),
        repeating-linear-gradient(-12deg, transparent, transparent 40px, rgba(255, 255, 255, 0.03) 40px, rgba(255, 255, 255, 0.03) 41px);
}

body.auth-split-body .auth-split-visual-bg::after {
    background:
        radial-gradient(ellipse 80% 60% at 30% 80%, rgba(28, 62, 56, 0.35), transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(48, 111, 100, 0.14), transparent 50%);
}

body.auth-split-body .auth-split-logo {
    background: linear-gradient(135deg, rgba(28, 62, 56, 0.2), rgba(48, 100, 90, 0.16));
    border-color: rgba(83, 182, 164, 0.26);
    box-shadow: 0 12px 40px rgba(7, 10, 9, 0.35), 0 0 0 1px rgba(48, 111, 100, 0.18);
}

body.auth-split-body .auth-split-card {
    background: rgba(7, 10, 9, 0.42);
    border-color: rgba(148, 163, 184, 0.2);
}

body.auth-split-body .auth-split-card:hover {
    border-color: rgba(48, 111, 100, 0.5);
    box-shadow: 0 14px 36px rgba(26, 54, 49, 0.25);
}

body.auth-split-body .auth-form-panel {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.06);
    border-radius: var(--sys-radius);
    box-shadow: 0 10px 25px -5px rgba(7, 10, 9, 0.1), 0 4px 10px -5px rgba(7, 10, 9, 0.05);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

body.auth-split-body .auth-field-wrap .form-control {
    background: rgba(255, 255, 255, 0.92);
    border-color: #e2e8f0;
}

body.auth-split-body .auth-field-wrap .form-control:focus {
    border-color: var(--cx-blue);
    box-shadow: 0 0 0 3px rgba(28, 62, 56, 0.15);
}

body.auth-split-body .auth-submit {
    background: linear-gradient(135deg, var(--cx-blue) 0%, var(--cx-indigo) 100%);
    border: 1px solid rgba(28, 62, 56, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px rgba(28, 62, 56, 0.28);
}

body.auth-split-body .auth-submit:hover {
    background: linear-gradient(135deg, var(--cx-blue-hover) 0%, #1e3a35 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 28px rgba(28, 62, 56, 0.34);
}

body.auth-split-body .auth-split-lang,
body.auth-split-body .auth-split-theme {
    background: rgba(255, 255, 255, 0.8);
    border-color: #e2e8f0;
    color: var(--cx-auth-muted);
}

body.auth-split-body .auth-split-lang:hover,
body.auth-split-body .auth-split-theme:hover {
    border-color: rgba(28, 62, 56, 0.3);
    color: var(--cx-blue-hover);
    box-shadow: 0 4px 12px rgba(28, 62, 56, 0.1);
}

html[data-theme="dark"] body.auth-split-body {
    --cx-auth-page: #070a09;
    --cx-auth-surface: #1e3b34;
    --cx-auth-ink: #f4f6f6;
    --cx-auth-muted: #9ab2ad;
}

html[data-theme="dark"] body.auth-split-body .auth-split-main {
    background: #070a09;
}

html[data-theme="dark"] body.auth-split-body .auth-form-panel,
html[data-theme="dark"] body.auth-split-body .auth-field-wrap .form-control,
html[data-theme="dark"] body.auth-split-body .auth-split-lang,
html[data-theme="dark"] body.auth-split-body .auth-split-theme {
    background: rgba(30, 59, 52, 0.9);
    border-color: rgba(154, 178, 173, 0.2);
    color: #f4f6f6;
}

@media (min-width: 1400px) {
    body.admin-shell .sidebar {
        width: 270px;
    }

    body.admin-shell .main-content {
        margin-inline-start: 270px;
    }

    body.admin-shell .sidebar.collapsed ~ .main-content,
    html.sidebar-pref-collapsed body.admin-shell .main-content {
        margin-inline-start: var(--sidebar-collapsed-width);
    }

    body.admin-shell .content-wrapper__main {
        padding-inline: 30px;
    }
}

@media (max-width: 991.98px) {
    body.admin-shell {
        --topbar-height: 64px;
    }

    body.admin-shell .content-wrapper__main {
        padding-inline: 16px;
    }

    body.admin-shell .tb-user-btn {
        border-radius: 50%;
    }
}

@media (max-width: 575.98px) {
    body.admin-shell {
        --topbar-height: 58px;
    }

    body.admin-shell .content-wrapper__main {
        padding-inline: 12px;
    }
}