/* ============================================================
   MX ADMIN — admin chrome layer (login, sidebar rail, topbar,
   dashboard). Loads AFTER the vite admin bundle, BEFORE mx-dark.
   Consumes mx-tokens.css vars; the sidebar rail is brand-black
   (#0A0A0A) in BOTH modes, like every mx brand-black surface.
   Keys dark work off html[data-theme="dark"] (session-synced).
   ============================================================ */

/* ---------- Sidebar rail (brand black, always) ---------- */
.page-wrapper .page-body-wrapper .sidebar {
    background: #0A0A0A;
}

/* items: 8px radius, quiet hover */
.page-wrapper .page-body-wrapper .sidebar .sidebar-menu .sidebar-menu-list .sidebar-header {
    border-radius: 8px !important;
    margin: 1px 6px;
}
.page-wrapper .page-body-wrapper .sidebar .sidebar-menu .sidebar-menu-list:hover .sidebar-header {
    background-color: rgba(255, 255, 255, .06);
}

/* active: subtle fill + white text (no accent pill) */
.page-wrapper .page-body-wrapper .sidebar .sidebar-menu .sidebar-menu-list.active .sidebar-header {
    background-color: #1D1D1D !important;
    color: #FFFFFF;
    font-weight: 500;
    border-radius: 8px !important;
}
.page-wrapper .page-body-wrapper .sidebar .sidebar-menu .sidebar-menu-list.active .sidebar-header i {
    color: #FFFFFF !important;
}
.page-wrapper .page-body-wrapper .sidebar .sidebar-submenu > li > a {
    border-radius: 8px;
    margin-right: 6px;
}

/* rail badges + submenu dots: neutral, no blue */
.page-wrapper .page-body-wrapper .sidebar .badge,
.page-wrapper .page-body-wrapper .sidebar .sidebar-badge {
    background: #2E2E2E !important;
    color: #EDEDED !important;
    border-radius: 999px;
    font-weight: 500;
}
.page-wrapper .page-body-wrapper .sidebar .sidebar-submenu > li.active > a::before {
    background: #FFFFFF !important;
}

/* ---------- Topbar (var-driven) ---------- */
.page-main-header {
    background: var(--mx-surface);
    border-bottom: 1px solid var(--mx-border);
    box-shadow: none;
}
html[data-theme="dark"] .page-wrapper .page-main-header {
    background: var(--mx-surface);
    box-shadow: none;
}
.page-main-header .main-header .nav-menus > li > a,
.page-main-header .main-header .nav-menus > li .txt-dark,
.page-main-header .main-header .nav-menus > li h6.text-dark {
    color: var(--mx-ink);
}
.page-main-header .main-header .nav-menus > li i {
    color: var(--mx-ink-2);
}
.page-main-header .main-header .nav-menus > li:hover i {
    color: var(--mx-ink);
}

/* topbar hover dropdown panels */
.page-main-header .onhover-show-div,
.page-main-header .notification-dropdown,
.page-main-header .profile-dropdown {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    box-shadow: var(--mx-shadow);
    color: var(--mx-ink);
}
.page-main-header .onhover-show-div a,
.page-main-header .onhover-show-div span,
.page-main-header .onhover-show-div h6 {
    color: var(--mx-ink);
}
.page-main-header .onhover-show-div .media-content p,
.page-main-header .onhover-show-div .dropdown-list a span {
    color: var(--mx-ink-2);
}
.page-main-header .new-btn {
    color: var(--mx-ink-2);
}

/* announcement strip */
.sub-header {
    background: var(--mx-surface-2);
    color: var(--mx-ink);
}
.sub-header .offer-text {
    color: var(--mx-ink);
}

/* ---------- Dashboard ---------- */

/* welcome line */
.dashboard-default .welcome-box h2 {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mx-ink) !important;
}
.dashboard-default .welcome-box .mx-date-line,
.dashboard-default .welcome-box p {
    color: var(--mx-ink-2);
}

/* stat cards: hairline border, 16px radius, Inter Tight numbers */
.dashboard-default .total-rides .card {
    background: var(--mx-surface) !important;
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.dashboard-default .total-rides .card:hover {
    border-color: var(--mx-border-2);
    transform: translateY(-2px);
}
/* kill the template's colored corner blobs */
.dashboard-default .total-rides .card > span {
    display: none !important;
}
.dashboard-default .total-rides .card .card-body h4 {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--mx-ink) !important;
}
.dashboard-default .total-rides .card .card-body h6 {
    font-size: 13px;
    font-weight: 500;
    color: var(--mx-ink-2) !important;
}
/* icon chip: quiet fill instead of bootstrap hues */
.dashboard-default .total-rides .ride-icon {
    background: var(--mx-surface-2) !important;
    border: 1px solid var(--mx-border);
    border-radius: 12px;
}
html[data-theme="dark"] .dashboard-default .total-rides .ride-icon img {
    filter: invert(1) brightness(1.7) contrast(.9);
}

/* sort select row */
.dashboard-default .support-title label {
    color: var(--mx-ink-2);
}

/* Banner table thumbnails: display as landscape banner preview with rounded corners */
.banner-table .table .table-image {
    width: 72px !important;
    min-width: 72px !important;
    height: 38px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="dark"] .banner-table .table .table-image {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}