/** * SMT Admin Theme — polished light-first chrome for Sea Millenium Trade. * Sidebar/topbar follow AdminHelper theme mode (no forced dark sidebar). * * Note: Botble only sets data-bs-theme on when mode is dark. * Light styles use :not([data-bs-theme='dark']) and chrome [data-bs-theme='light']. */ :root { --smt-admin-primary: #0c55aa; --smt-admin-primary-soft: rgba(12, 85, 170, 0.1); --smt-admin-primary-strong: #0a4290; --smt-admin-surface: #ffffff; --smt-admin-canvas: #f3f6fb; --smt-admin-border: #e6ebf2; --smt-admin-text: #0f172a; --smt-admin-muted: #64748b; --smt-admin-radius: 12px; --smt-admin-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04); } body { --primary-color: var(--smt-admin-primary); --bb-primary: var(--smt-admin-primary); --bb-link-color: var(--smt-admin-primary); --bb-link-hover-color: var(--smt-admin-primary-strong); } /* ---------- Light mode canvas ---------- */ body:not([data-bs-theme='dark']) { --bb-body-bg: var(--smt-admin-canvas); background: var(--smt-admin-canvas) !important; color: var(--smt-admin-text); } body:not([data-bs-theme='dark']) .page-wrapper, body:not([data-bs-theme='dark']) .page { background: transparent; } /* Light sidebar + topbar */ .smt-admin-sidebar[data-bs-theme='light'], .smt-admin-topbar[data-bs-theme='light'] { --bb-navbar-bg: #ffffff; --bb-navbar-color: #334155; --bb-navbar-hover-color: #0f172a; --bb-navbar-disabled-color: #94a3b8; --bb-navbar-active-color: #0f172a; --bb-navbar-brand-color: #0f172a; --bb-navbar-brand-hover-color: #0f172a; --bb-navbar-toggler-border-color: transparent; --bb-navbar-border-color: var(--smt-admin-border); background: #ffffff !important; border-color: var(--smt-admin-border) !important; box-shadow: none; color: #334155; } .smt-admin-sidebar[data-bs-theme='light'] { border-inline-end: 1px solid var(--smt-admin-border); } .smt-admin-topbar[data-bs-theme='light'] { border-bottom: 1px solid var(--smt-admin-border); } /* * Keep header chrome above page body (alerts/cards/widgets). * backdrop-filter was creating a stacking trap that let page content paint over * notifications/messages dropdowns. */ .smt-admin-topbar { position: sticky; top: 0; z-index: 1045; overflow: visible !important; } .smt-admin-topbar .container-fluid, .smt-admin-topbar .navbar-nav, .smt-admin-topbar .nav-item, .smt-admin-topbar .dropdown { overflow: visible !important; } .smt-admin-topbar .dropdown-menu, .smt-admin-topbar .dropdown-menu.show { z-index: 1060 !important; position: absolute !important; } /* Notifications / messages lists inside header dropdowns */ .smt-admin-topbar .dropdown-menu .list-group, .smt-admin-topbar .dropdown-menu .card, .smt-admin-topbar .dropdown-menu .card-body { background: var(--smt-admin-surface, #fff); } body:not([data-bs-theme='dark']) .smt-admin-topbar .dropdown-menu { background: #fff; border: 1px solid var(--smt-admin-border); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); } /* Ensure page content cannot climb above sticky header chrome */ body:not([data-bs-theme='dark']) .page-wrapper, body:not([data-bs-theme='dark']) .page-body, body:not([data-bs-theme='dark']) .page-header, body:not([data-bs-theme='dark']) .alert { position: relative; z-index: 1; } body:not([data-bs-theme='dark']) .alert { overflow: hidden; } /* Sidebar nav polish */ .smt-admin-sidebar .navbar-nav .nav-link { border-radius: 10px; margin: 2px 10px; padding: 0.55rem 0.85rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .smt-admin-sidebar[data-bs-theme='light'] .navbar-nav .nav-link { color: #334155; } .smt-admin-sidebar[data-bs-theme='light'] .navbar-nav .nav-link:hover { background: #f1f5f9; color: #0f172a; } /* Only the real current page link — never every parent/dropdown toggle */ .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link:not([href^="#"]):not([data-bs-toggle="dropdown"]), .smt-admin-sidebar .navbar-nav > .nav-item > .nav-link.active:not([href^="#"]) { background: linear-gradient(135deg, var(--smt-admin-primary) 0%, #1470d4 100%) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(12, 85, 170, 0.28); } .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link:not([href^="#"]):not([data-bs-toggle="dropdown"]) .nav-link-title, .smt-admin-sidebar .navbar-nav > .nav-item > .nav-link.active:not([href^="#"]) .nav-link-title, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link:not([href^="#"]):not([data-bs-toggle="dropdown"]) .nav-link-icon, .smt-admin-sidebar .navbar-nav > .nav-item > .nav-link.active:not([href^="#"]) .nav-link-icon, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link:not([href^="#"]):not([data-bs-toggle="dropdown"]) .icon, .smt-admin-sidebar .navbar-nav > .nav-item > .nav-link.active:not([href^="#"]) .icon, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link:not([href^="#"]):not([data-bs-toggle="dropdown"]) svg, .smt-admin-sidebar .navbar-nav > .nav-item > .nav-link.active:not([href^="#"]) svg { color: #fff !important; stroke: currentColor; } /* Parent section that contains the current page — subtle, not full blue pill */ .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[href^="#"], .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[data-bs-toggle="dropdown"] { background: var(--smt-admin-primary-soft) !important; color: var(--smt-admin-primary) !important; box-shadow: none !important; } .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[href^="#"] .nav-link-title, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[data-bs-toggle="dropdown"] .nav-link-title, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[href^="#"] .nav-link-icon, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[data-bs-toggle="dropdown"] .nav-link-icon, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[href^="#"] svg, .smt-admin-sidebar .navbar-nav .nav-item.active > .nav-link[data-bs-toggle="dropdown"] svg { color: var(--smt-admin-primary) !important; } .smt-admin-sidebar .navbar-nav .nav-link .nav-link-icon { opacity: 0.9; width: 1.35rem; } .smt-admin-sidebar[data-bs-theme='light'] .navbar-brand img, .smt-admin-topbar[data-bs-theme='light'] .navbar-brand img { max-height: 36px; width: auto; } /* Dropdown / section labels in sidebar */ .smt-admin-sidebar[data-bs-theme='light'] .nav-link-title, .smt-admin-sidebar[data-bs-theme='light'] .dropdown-menu { color: #334155; } .smt-admin-sidebar[data-bs-theme='light'] .dropdown-menu { background: #fff; border: 1px solid var(--smt-admin-border); box-shadow: var(--smt-admin-shadow); } /* Top actions */ .smt-admin-topbar[data-bs-theme='light'] .smt-admin-view-site { border-radius: 999px; border-color: var(--smt-admin-border); background: #fff; color: var(--smt-admin-text); font-weight: 600; } .smt-admin-topbar[data-bs-theme='light'] .smt-admin-view-site:hover { border-color: color-mix(in srgb, var(--smt-admin-primary) 35%, white); color: var(--smt-admin-primary); background: var(--smt-admin-primary-soft); } .smt-admin-topbar[data-bs-theme='light'] .form-control, .smt-admin-topbar[data-bs-theme='light'] input[type='search'] { border-radius: 999px; border-color: var(--smt-admin-border); background: #f8fafc; } /* Page header */ .page-header { margin-bottom: 1.25rem; } .page-header .page-title, .page-pretitle { letter-spacing: 0.02em; } body:not([data-bs-theme='dark']) .page-pretitle { color: var(--smt-admin-muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; } body:not([data-bs-theme='dark']) .page-header .page-title { color: var(--smt-admin-text); font-weight: 700; } /* Cards / widgets */ body:not([data-bs-theme='dark']) .card { border: 1px solid var(--smt-admin-border); border-radius: var(--smt-admin-radius); box-shadow: var(--smt-admin-shadow); background: var(--smt-admin-surface); } body:not([data-bs-theme='dark']) .card .card-header { background: transparent; border-bottom-color: var(--smt-admin-border); font-weight: 650; } body:not([data-bs-theme='dark']) .card .card-footer { background: #fafbfc; border-top-color: var(--smt-admin-border); } /* Tables */ body:not([data-bs-theme='dark']) .table { --bb-table-border-color: var(--smt-admin-border); } body:not([data-bs-theme='dark']) .table thead th { color: var(--smt-admin-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #f8fafc; } body:not([data-bs-theme='dark']) .table > :not(caption) > * > * { border-bottom-color: var(--smt-admin-border); } body:not([data-bs-theme='dark']) .table-hover > tbody > tr:hover > * { background: #f8fbff; } /* Buttons */ .btn-primary { --bb-btn-bg: var(--smt-admin-primary); --bb-btn-border-color: var(--smt-admin-primary); --bb-btn-hover-bg: var(--smt-admin-primary-strong); --bb-btn-hover-border-color: var(--smt-admin-primary-strong); --bb-btn-active-bg: var(--smt-admin-primary-strong); --bb-btn-active-border-color: var(--smt-admin-primary-strong); border-radius: 10px; font-weight: 600; box-shadow: 0 6px 14px rgba(12, 85, 170, 0.22); } .btn { border-radius: 10px; } /* Forms */ body:not([data-bs-theme='dark']) .form-control, body:not([data-bs-theme='dark']) .form-select { border-radius: 10px; border-color: var(--smt-admin-border); } body:not([data-bs-theme='dark']) .form-control:focus, body:not([data-bs-theme='dark']) .form-select:focus { border-color: color-mix(in srgb, var(--smt-admin-primary) 45%, white); box-shadow: 0 0 0 0.2rem var(--smt-admin-primary-soft); } /* Badges / chips */ .badge { border-radius: 999px; font-weight: 650; } /* Widget stats cards */ body:not([data-bs-theme='dark']) .widget-item, body:not([data-bs-theme='dark']) [class*='widget-stats'] { border-radius: var(--smt-admin-radius); } /* Breadcrumb */ body:not([data-bs-theme='dark']) .breadcrumb { --bb-breadcrumb-divider-color: #cbd5e1; } body:not([data-bs-theme='dark']) .breadcrumb-item a { color: var(--smt-admin-muted); text-decoration: none; } body:not([data-bs-theme='dark']) .breadcrumb-item.active { color: var(--smt-admin-text); font-weight: 600; } /* Soft page body padding rhythm */ body:not([data-bs-theme='dark']) .page-body { padding-top: 1.25rem; } /* ---------- Dark mode refinements (when user toggles) ---------- */ body[data-bs-theme='dark'] { --smt-admin-canvas: #0b1220; --smt-admin-surface: #111827; --smt-admin-border: #243247; --bb-body-bg: var(--smt-admin-canvas); } .smt-admin-sidebar[data-bs-theme='dark'], .smt-admin-topbar[data-bs-theme='dark'] { background: #0f172a !important; border-color: var(--smt-admin-border) !important; } .smt-admin-sidebar[data-bs-theme='dark'] .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.06); } body[data-bs-theme='dark'] .card { background: var(--smt-admin-surface); border-color: var(--smt-admin-border); box-shadow: none; } /* Scrollbar polish (webkit) */ .smt-admin-sidebar ::-webkit-scrollbar { width: 8px; } .smt-admin-sidebar ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } .smt-admin-sidebar[data-bs-theme='dark'] ::-webkit-scrollbar-thumb { background: #334155; } /* Sidebar above page body, below topbar dropdowns */ .smt-admin-sidebar { z-index: 1035; } /* Select2 / datepickers should float above cards */ .select2-container--open { z-index: 1070 !important; } body .datepicker, body .flatpickr-calendar { z-index: 1070 !important; } /* Dashboard widget grid: prevent clipped dropdown bleed from cards */ body:not([data-bs-theme='dark']) .page-body .card { overflow: visible; } body:not([data-bs-theme='dark']) .page-body .card .table-responsive { overflow-x: auto; overflow-y: visible; } /* ---------- Instant nav / loading UX ---------- */ /* Hide NProgress corner spinner even if an old bundle still enables it */ #nprogress .spinner { display: none !important; } #nprogress .bar { height: 2px !important; background: var(--smt-admin-primary) !important; } /* Turbo thin progress bar */ .turbo-progress-bar { position: fixed; top: 0; left: 0; z-index: 9999; height: 2px; background: var(--smt-admin-primary); transition: width 100ms ease-out; } /* Soften DataTables processing — no heavy page lock look */ .dataTables_wrapper .dataTables_processing, div.dataTables_processing { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid var(--smt-admin-border) !important; box-shadow: var(--smt-admin-shadow) !important; border-radius: 10px !important; color: var(--smt-admin-muted) !important; font-size: 0.8125rem !important; font-weight: 600 !important; padding: 0.65rem 1rem !important; } /* Avoid full-page dark loading overlays in admin */ .page-wrapper > .loading-spinner, .page > .loading-spinner, .page-body > .loading-spinner { display: none !important; } /* Scoped spinners stay light */ .loading-spinner { background: rgba(255, 255, 255, 0.45) !important; } .loading-spinner:before { border-width: 2px !important; } /* Dashboard soft refresh (no blocking overlay) */ .smt-widget-refreshing { opacity: 0.72; transition: opacity 0.15s ease; pointer-events: none; } /* No flash of dark canvas during Turbo swap */ html[data-smt-admin-instant-nav='turbo'] body, html[data-smt-admin-instant-nav='turbo'] .page-wrapper { background: var(--smt-admin-canvas, #f3f6fb); } html[data-smt-admin-instant-nav='turbo'] body[data-bs-theme='dark'], html[data-smt-admin-instant-nav='turbo'] body[data-bs-theme='dark'] .page-wrapper { background: var(--smt-admin-canvas, #0b1220); } /* Faster perceived sidebar nav */ .smt-admin-sidebar .navbar-nav .nav-link { cursor: pointer; }