/* ========================================================================== CBEX Theme Engine — 4 variants -------------------------------------------------------------------------- Source: Downloads/cbex (2)/themes.css Scope: selectors are all prefixed with body.cbex-shell[data-theme="..."] so they only apply when the page is running inside the CBEX shell (layouts/cbex.blade.php adds .cbex-shell to ). Tokens: each theme redeclares both the native (--navy-*) AND the legacy (--cbex-navy-*) token names so that pages reading either alias (e.g. ApexCharts in pages/admin/index.blade.php reads --cbex-*) see the correct palette when the theme changes. Default: body[data-theme="dark"] is the default (set by the pre-boot script in layouts/cbex.blade.php). ========================================================================== */ /* ========================================================================== DEFAULT (light) — re-declared for clarity; base.css already ships these values in :root, but a theme-scoped block lets us toggle cleanly. ========================================================================== */ body.cbex-shell[data-theme="default"] { --ink: #1a2540; --ink-2: #4a5870; --ink-3: #7a8699; --line: #e5e9f0; --line-2: #eef1f6; --bg: #f3f5f9; --bg-card: #ffffff; --navy-900: #1a2540; --navy-800: #223054; --navy-700: #2d3e5c; --navy-600: #3a4d6e; --navy-500: #5a6b86; --navy-400: #8594ab; --navy-300: #b5bfcf; --navy-200: #dde2ea; --navy-100: #eef1f6; --navy-50: #f6f8fb; --red-600: #c62836; --red-500: #e63946; --red-400: #ef5d68; --red-100: #fde4e6; --red-50: #fef1f2; --green-500: #2d9d5f; --green-50: #e8f5ec; --amber-500: #e7a02a; --amber-50: #fbf3e2; --blue-500: #2d6fd9; --blue-50: #e6efff; --shadow-sm: 0 1px 2px rgba(26,37,64,0.04),0 1px 1px rgba(26,37,64,0.02); --shadow-md: 0 4px 12px rgba(26,37,64,0.06),0 2px 4px rgba(26,37,64,0.04); --shadow-lg: 0 12px 28px rgba(26,37,64,0.10),0 4px 8px rgba(26,37,64,0.04); --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-xl:18px; --cbex-ink: var(--ink); --cbex-ink-2: var(--ink-2); --cbex-ink-3: var(--ink-3); --cbex-line: var(--line); --cbex-line-2: var(--line-2); --cbex-bg: var(--bg); --cbex-bg-card: var(--bg-card); --cbex-navy-900: var(--navy-900); --cbex-navy-800: var(--navy-800); --cbex-navy-700: var(--navy-700); --cbex-navy-600: var(--navy-600); --cbex-navy-500: var(--navy-500); --cbex-navy-400: var(--navy-400); --cbex-navy-300: var(--navy-300); --cbex-navy-200: var(--navy-200); --cbex-navy-100: var(--navy-100); --cbex-navy-50: var(--navy-50); --cbex-red-600: var(--red-600); --cbex-red-500: var(--red-500); --cbex-red-400: var(--red-400); --cbex-red-100: var(--red-100); --cbex-red-50: var(--red-50); --cbex-green-500: var(--green-500); --cbex-green-50: var(--green-50); --cbex-amber-500: var(--amber-500); --cbex-amber-50: var(--amber-50); --cbex-blue-500: var(--blue-500); --cbex-blue-50: var(--blue-50); --cbex-shadow-sm: var(--shadow-sm); --cbex-shadow-md: var(--shadow-md); --cbex-shadow-lg: var(--shadow-lg); --cbex-radius-sm: var(--radius-sm); --cbex-radius: var(--radius); --cbex-radius-lg: var(--radius-lg); --cbex-radius-xl: var(--radius-xl); } body.cbex-shell[data-theme="default"] { background: var(--bg); color: var(--ink); } /* ========================================================================== DARK EXECUTIVE (project default) ========================================================================== */ body.cbex-shell[data-theme="dark"] { --ink: #e7ecf5; --ink-2: #a9b4c9; --ink-3: #6a7793; --line: #222b43; --line-2: #1a2238; --bg: #0b1020; --bg-card: #121a30; --navy-900: #070b18; --navy-800: #0e1426; --navy-700: #141c36; --navy-600: #1e2744; --navy-500: #2b3659; --navy-400: #45527a; --navy-300: #6a7793; --navy-200: #222b43; --navy-100: #1a2238; --navy-50: #141c36; --red-500: #ff3b55; --red-600: #d81e3a; --red-400: #ff6478; --red-50: rgba(255,59,85,0.10); --red-100: rgba(255,59,85,0.16); --green-500: #2bd498; --green-50: rgba(43,212,152,0.12); --amber-500: #ffb547; --amber-50: rgba(255,181,71,0.12); --blue-500: #5d8cff; --blue-50: rgba(93,140,255,0.12); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.45); --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-xl:18px; --cbex-ink: var(--ink); --cbex-ink-2: var(--ink-2); --cbex-ink-3: var(--ink-3); --cbex-line: var(--line); --cbex-line-2: var(--line-2); --cbex-bg: var(--bg); --cbex-bg-card: var(--bg-card); --cbex-navy-900: var(--navy-900); --cbex-navy-800: var(--navy-800); --cbex-navy-700: var(--navy-700); --cbex-navy-600: var(--navy-600); --cbex-navy-500: var(--navy-500); --cbex-navy-400: var(--navy-400); --cbex-navy-300: var(--navy-300); --cbex-navy-200: var(--navy-200); --cbex-navy-100: var(--navy-100); --cbex-navy-50: var(--navy-50); --cbex-red-600: var(--red-600); --cbex-red-500: var(--red-500); --cbex-red-400: var(--red-400); --cbex-red-100: var(--red-100); --cbex-red-50: var(--red-50); --cbex-green-500: var(--green-500); --cbex-green-50: var(--green-50); --cbex-amber-500: var(--amber-500); --cbex-amber-50: var(--amber-50); --cbex-blue-500: var(--blue-500); --cbex-blue-50: var(--blue-50); --cbex-shadow-sm: var(--shadow-sm); --cbex-shadow-md: var(--shadow-md); --cbex-shadow-lg: var(--shadow-lg); --cbex-radius-sm: var(--radius-sm); --cbex-radius: var(--radius); --cbex-radius-lg: var(--radius-lg); --cbex-radius-xl: var(--radius-xl); } body.cbex-shell[data-theme="dark"] { background: radial-gradient(ellipse at top right, #141c36 0%, #0b1020 60%); color: var(--ink); } body.cbex-shell[data-theme="dark"] .topbar { background: rgba(14,20,38,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } body.cbex-shell[data-theme="dark"] .tb-brand { border-left-color: var(--line); } body.cbex-shell[data-theme="dark"] .tb-brand .logo-mark { background: linear-gradient(135deg,#ff3b55,#d81e3a); box-shadow: 0 4px 14px rgba(255,59,85,.4); } body.cbex-shell[data-theme="dark"] .tb-brand .logo-mark::after { background: #fff; opacity: .9; } body.cbex-shell[data-theme="dark"] .tb-brand .brand-name { color: #fff; } body.cbex-shell[data-theme="dark"] .tb-brand .brand-sub { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .tb-search input { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink); } body.cbex-shell[data-theme="dark"] .tb-search input::placeholder { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .tb-search input:focus { background: rgba(255,255,255,.07); border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(255,59,85,.15); } body.cbex-shell[data-theme="dark"] .tb-search .icon { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .tb-search .kbd { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--ink-2); } body.cbex-shell[data-theme="dark"] .tb-btn { color: var(--ink-2); } body.cbex-shell[data-theme="dark"] .tb-btn:hover { background: rgba(255,255,255,.05); color: #fff; } body.cbex-shell[data-theme="dark"] .tb-btn .dot { border-color: #0e1426; } body.cbex-shell[data-theme="dark"] .tb-new { background: linear-gradient(135deg,#ff3b55,#d81e3a); box-shadow: 0 6px 16px rgba(255,59,85,.35); } body.cbex-shell[data-theme="dark"] .tb-new:hover { background: linear-gradient(135deg,#ff4d66,#e62442); } body.cbex-shell[data-theme="dark"] .tb-divider { background: var(--line); } body.cbex-shell[data-theme="dark"] .tb-user:hover { background: rgba(255,255,255,.04); } body.cbex-shell[data-theme="dark"] .tb-user .avatar { background: linear-gradient(135deg,#ff3b55,#8b1b30); } body.cbex-shell[data-theme="dark"] .tb-user .u-name { color: #fff; } body.cbex-shell[data-theme="dark"] .domainbar { background: #070b18; border-bottom: 1px solid var(--line); } body.cbex-shell[data-theme="dark"] .domain-tab { color: rgba(255,255,255,.55); } body.cbex-shell[data-theme="dark"] .domain-tab:hover { color: #fff; background: rgba(255,255,255,.05); } body.cbex-shell[data-theme="dark"] .domain-tab.active { color: #fff; background: rgba(255,59,85,.12); } body.cbex-shell[data-theme="dark"] .domain-tab.active::after { background: var(--red-500); box-shadow: 0 0 10px var(--red-500); } body.cbex-shell[data-theme="dark"] .sidebar { background: #0e1426; border-left: 1px solid var(--line); } body.cbex-shell[data-theme="dark"] .sb-workspace { background: linear-gradient(135deg,#1a2340,#0e1426); border: 1px solid var(--line); } body.cbex-shell[data-theme="dark"] .sb-workspace .ws-icon { background: linear-gradient(135deg,#ff3b55,#d81e3a); } body.cbex-shell[data-theme="dark"] .sb-section-title { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .sb-section-title::after { background: var(--line); } body.cbex-shell[data-theme="dark"] .sb-item { color: var(--ink-2); } body.cbex-shell[data-theme="dark"] .sb-item:hover { background: rgba(255,255,255,.04); color: #fff; } body.cbex-shell[data-theme="dark"] .sb-item.active { background: linear-gradient(90deg,rgba(255,59,85,.15),rgba(255,59,85,.04)); color: #fff; } body.cbex-shell[data-theme="dark"] .sb-item.active::before { background: var(--red-500); box-shadow: 0 0 12px var(--red-500); } body.cbex-shell[data-theme="dark"] .sb-item .ico { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .sb-item.active .ico { color: var(--red-500); } body.cbex-shell[data-theme="dark"] .sb-item .badge { background: rgba(255,255,255,.08); color: var(--ink); } body.cbex-shell[data-theme="dark"] .sb-item .badge.red { background: var(--red-500); color: #fff; } body.cbex-shell[data-theme="dark"] .sb-footer { border-top-color: var(--line); } body.cbex-shell[data-theme="dark"] .sb-mini-btn { background: rgba(255,255,255,.04); color: var(--ink-2); } body.cbex-shell[data-theme="dark"] .sb-mini-btn:hover { background: rgba(255,255,255,.08); color: #fff; } body.cbex-shell[data-theme="dark"] .card { background: var(--bg-card); border: 1px solid var(--line); } body.cbex-shell[data-theme="dark"] .card-head { border-bottom-color: var(--line); } body.cbex-shell[data-theme="dark"] .card-title { color: #fff; } body.cbex-shell[data-theme="dark"] .card-sub { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .kpi { background: var(--bg-card); border: 1px solid var(--line); } body.cbex-shell[data-theme="dark"] .kpi .value { color: #fff; } body.cbex-shell[data-theme="dark"] .kpi .label { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .kpi.blue .kpi-icon { background: var(--blue-50); color: var(--blue-500); } body.cbex-shell[data-theme="dark"] .kpi.green .kpi-icon { background: var(--green-50); color: var(--green-500); } body.cbex-shell[data-theme="dark"] .kpi.amber .kpi-icon { background: var(--amber-50); color: var(--amber-500); } body.cbex-shell[data-theme="dark"] .kpi.red .kpi-icon { background: var(--red-50); color: var(--red-500); } body.cbex-shell[data-theme="dark"] .kpi .trend.up { background: var(--green-50); color: var(--green-500); } body.cbex-shell[data-theme="dark"] .kpi .trend.down { background: var(--red-50); color: var(--red-500); } body.cbex-shell[data-theme="dark"] .page-title { color: #fff; } body.cbex-shell[data-theme="dark"] .breadcrumb { color: var(--ink-3); } body.cbex-shell[data-theme="dark"] .breadcrumb .cur { color: #fff; } body.cbex-shell[data-theme="dark"] .btn-primary { background: linear-gradient(135deg,#ff3b55,#d81e3a); color: #fff; } body.cbex-shell[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); border-color: var(--line); } body.cbex-shell[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.08); } body.cbex-shell[data-theme="dark"] .tabs { background: rgba(255,255,255,.04); } body.cbex-shell[data-theme="dark"] .tabs button { color: var(--ink-2); } body.cbex-shell[data-theme="dark"] .tabs button.on { background: rgba(255,59,85,.15); color: #fff; box-shadow: none; } body.cbex-shell[data-theme="dark"] .tbl th { background: rgba(255,255,255,.03); color: var(--ink-3); border-bottom-color: var(--line); } body.cbex-shell[data-theme="dark"] .tbl td { color: var(--ink); border-bottom-color: var(--line); } body.cbex-shell[data-theme="dark"] .tbl tr.clickable:hover { background: rgba(255,255,255,.03); } body.cbex-shell[data-theme="dark"] .tbl .track-id { color: #fff; } body.cbex-shell[data-theme="dark"] .status.delivered { background: var(--green-50); color: var(--green-500); } body.cbex-shell[data-theme="dark"] .status.in-transit { background: var(--blue-50); color: var(--blue-500); } body.cbex-shell[data-theme="dark"] .status.pending { background: var(--amber-50); color: var(--amber-500); } body.cbex-shell[data-theme="dark"] .status.cancelled { background: var(--red-50); color: var(--red-500); } body.cbex-shell[data-theme="dark"] .timeline-item .tl-dot { background: var(--navy-700); color: var(--ink-2); border-color: var(--bg-card); box-shadow: 0 0 0 1px var(--line); } body.cbex-shell[data-theme="dark"] .timeline-item.done .tl-dot { background: var(--green-500); color: #001a10; box-shadow: 0 0 0 1px var(--green-500),0 0 14px rgba(43,212,152,.4); } body.cbex-shell[data-theme="dark"] .timeline-item.active .tl-dot { background: var(--red-500); color: #fff; box-shadow: 0 0 0 1px var(--red-500),0 0 14px rgba(255,59,85,.5); } body.cbex-shell[data-theme="dark"] .timeline-item:not(:last-child)::before { background: var(--line); } body.cbex-shell[data-theme="dark"] .timeline-item .tl-title { color: #fff; } body.cbex-shell[data-theme="dark"] .mini-map { background: radial-gradient(circle at 30% 40%, rgba(93,140,255,.12), transparent 40%), radial-gradient(circle at 70% 60%, rgba(255,59,85,.15), transparent 40%), linear-gradient(180deg, #141c36, #0b1020); border-color: var(--line); } body.cbex-shell[data-theme="dark"] .mini-map .grid-lines { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); } body.cbex-shell[data-theme="dark"] .route-line { stroke: var(--red-500); filter: drop-shadow(0 0 6px var(--red-500)); } body.cbex-shell[data-theme="dark"] .fleet-card { border-color: var(--line); background: rgba(255,255,255,.02); } body.cbex-shell[data-theme="dark"] .fleet-card:hover { border-color: var(--red-500); background: rgba(255,59,85,.05); } body.cbex-shell[data-theme="dark"] .fleet-card .truck-icon { background: var(--navy-700); color: var(--red-500); } /* ========================================================================== MINIMAL LIGHT ========================================================================== */ body.cbex-shell[data-theme="minimal"] { --ink: #0b0f1a; --ink-2: #4a5265; --ink-3: #8a93a5; --line: #ececf0; --line-2: #f3f3f6; --bg: #fafafa; --bg-card: #ffffff; --navy-900: #0b0f1a; --navy-800: #1a1f2c; --navy-700: #262b38; --navy-600: #3a404f; --navy-500: #5a6275; --navy-400: #8a93a5; --navy-300: #b4bac6; --navy-200: #dedfe4; --navy-100: #efeff2; --navy-50: #f7f7f9; --red-500: #e11d2e; --red-600: #b8131f; --red-400: #f04455; --red-50: #fdf2f3; --red-100: #fae1e3; --green-500: #11946b; --green-50: #e9f5ef; --amber-500: #b8791a; --amber-50: #fcf4e4; --blue-500: #1b5bc9; --blue-50: #e8efff; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 8px 24px rgba(11,15,26,.06); --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --radius-xl: 8px; --cbex-ink: var(--ink); --cbex-ink-2: var(--ink-2); --cbex-ink-3: var(--ink-3); --cbex-line: var(--line); --cbex-line-2: var(--line-2); --cbex-bg: var(--bg); --cbex-bg-card: var(--bg-card); --cbex-navy-900: var(--navy-900); --cbex-navy-800: var(--navy-800); --cbex-navy-700: var(--navy-700); --cbex-navy-600: var(--navy-600); --cbex-navy-500: var(--navy-500); --cbex-navy-400: var(--navy-400); --cbex-navy-300: var(--navy-300); --cbex-navy-200: var(--navy-200); --cbex-navy-100: var(--navy-100); --cbex-navy-50: var(--navy-50); --cbex-red-600: var(--red-600); --cbex-red-500: var(--red-500); --cbex-red-400: var(--red-400); --cbex-red-100: var(--red-100); --cbex-red-50: var(--red-50); --cbex-green-500: var(--green-500); --cbex-green-50: var(--green-50); --cbex-amber-500: var(--amber-500); --cbex-amber-50: var(--amber-50); --cbex-blue-500: var(--blue-500); --cbex-blue-50: var(--blue-50); --cbex-shadow-sm: var(--shadow-sm); --cbex-shadow-md: var(--shadow-md); --cbex-shadow-lg: var(--shadow-lg); --cbex-radius-sm: var(--radius-sm); --cbex-radius: var(--radius); --cbex-radius-lg: var(--radius-lg); --cbex-radius-xl: var(--radius-xl); } body.cbex-shell[data-theme="minimal"] { background: var(--bg); color: var(--ink); } body.cbex-shell[data-theme="minimal"] .topbar { background: #fff; border-bottom: 1px solid var(--line); } body.cbex-shell[data-theme="minimal"] .tb-brand { border-left: 1px solid var(--line); } body.cbex-shell[data-theme="minimal"] .tb-brand .logo-mark { background: #0b0f1a; color: #fff; border-radius: 2px; font-size: 12px; } body.cbex-shell[data-theme="minimal"] .tb-brand .logo-mark::after { background: var(--red-500); height: 3px; } body.cbex-shell[data-theme="minimal"] .tb-brand .brand-name { color: #0b0f1a; font-weight: 700; } body.cbex-shell[data-theme="minimal"] .tb-brand .brand-sub { color: var(--ink-3); font-weight: 400; } body.cbex-shell[data-theme="minimal"] .tb-search input { background: var(--navy-50); border: 1px solid transparent; border-radius: 4px; } body.cbex-shell[data-theme="minimal"] .tb-search input:focus { background: #fff; border-color: var(--ink); box-shadow: none; } body.cbex-shell[data-theme="minimal"] .tb-btn { color: var(--navy-600); border-radius: 4px; } body.cbex-shell[data-theme="minimal"] .tb-btn:hover { background: var(--navy-50); } body.cbex-shell[data-theme="minimal"] .tb-new { background: #0b0f1a; color: #fff; border-radius: 4px; font-weight: 500; } body.cbex-shell[data-theme="minimal"] .tb-new:hover { background: var(--red-500); } body.cbex-shell[data-theme="minimal"] .tb-user .avatar { background: #0b0f1a; border-radius: 50%; } body.cbex-shell[data-theme="minimal"] .tb-user .u-name { color: #0b0f1a; font-weight: 500; } body.cbex-shell[data-theme="minimal"] .domainbar { background: #fff; border-bottom: 1px solid var(--line); padding: 0 20px; } body.cbex-shell[data-theme="minimal"] .domain-tab { color: var(--ink-2); font-weight: 500; font-size: 12.5px; border-radius: 0; height: 100%; padding: 0 16px; } body.cbex-shell[data-theme="minimal"] .domain-tab:hover { color: var(--ink); background: transparent; } body.cbex-shell[data-theme="minimal"] .domain-tab.active { background: transparent; color: var(--red-500); font-weight: 600; } body.cbex-shell[data-theme="minimal"] .domain-tab.active::after { bottom: 0; right: 0; left: 0; height: 2px; border-radius: 0; background: var(--red-500); } body.cbex-shell[data-theme="minimal"] .sidebar { background: #fff; border-left: 1px solid var(--line); } body.cbex-shell[data-theme="minimal"] .sb-workspace { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; } body.cbex-shell[data-theme="minimal"] .sb-workspace::before { display: none; } body.cbex-shell[data-theme="minimal"] .sb-workspace .ws-icon { background: var(--red-500); border-radius: 4px; width: 32px; height: 32px; } body.cbex-shell[data-theme="minimal"] .sb-workspace .ws-name { color: var(--ink); font-size: 13px; font-weight: 600; } body.cbex-shell[data-theme="minimal"] .sb-section-title { color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 18px 10px 6px; } body.cbex-shell[data-theme="minimal"] .sb-section-title::after { display: none; } body.cbex-shell[data-theme="minimal"] .sb-item { padding: 7px 10px; border-radius: 4px; font-size: 13px; font-weight: 400; color: var(--ink-2); } body.cbex-shell[data-theme="minimal"] .sb-item:hover { background: var(--navy-50); color: var(--ink); } body.cbex-shell[data-theme="minimal"] .sb-item.active { background: transparent; color: var(--red-500); font-weight: 600; } body.cbex-shell[data-theme="minimal"] .sb-item.active::before { display: none; } body.cbex-shell[data-theme="minimal"] .sb-item .ico { color: var(--ink-3); } body.cbex-shell[data-theme="minimal"] .sb-item.active .ico { color: var(--red-500); } body.cbex-shell[data-theme="minimal"] .sb-item .badge { background: transparent; color: var(--ink-3); font-weight: 500; font-size: 11px; } body.cbex-shell[data-theme="minimal"] .sb-item .badge.red { background: transparent; color: var(--red-500); font-weight: 600; } body.cbex-shell[data-theme="minimal"] .sb-footer { border-top-color: var(--line); } body.cbex-shell[data-theme="minimal"] .sb-mini-btn { background: transparent; color: var(--ink-2); border: 1px solid var(--line); font-weight: 500; } body.cbex-shell[data-theme="minimal"] .card { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: none; } body.cbex-shell[data-theme="minimal"] .card-head { border-bottom-color: var(--line); padding: 14px 18px; } body.cbex-shell[data-theme="minimal"] .card-title { font-weight: 600; color: var(--ink); letter-spacing: -.1px; } body.cbex-shell[data-theme="minimal"] .kpi { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; box-shadow: none; } body.cbex-shell[data-theme="minimal"] .kpi .kpi-icon { width: 32px; height: 32px; border-radius: 4px; background: transparent; color: var(--ink-3); border: 1px solid var(--line); } body.cbex-shell[data-theme="minimal"] .kpi.blue .kpi-icon, body.cbex-shell[data-theme="minimal"] .kpi.green .kpi-icon, body.cbex-shell[data-theme="minimal"] .kpi.amber .kpi-icon, body.cbex-shell[data-theme="minimal"] .kpi.red .kpi-icon { background: transparent; color: var(--ink-3); border: 1px solid var(--line); } body.cbex-shell[data-theme="minimal"] .kpi .value { font-weight: 700; color: var(--ink); letter-spacing: -.8px; } body.cbex-shell[data-theme="minimal"] .kpi .label { color: var(--ink-3); font-weight: 400; font-size: 12px; } body.cbex-shell[data-theme="minimal"] .kpi .trend { background: transparent; padding: 0; font-weight: 500; font-size: 11.5px; } body.cbex-shell[data-theme="minimal"] .kpi .trend.up { color: var(--green-500); } body.cbex-shell[data-theme="minimal"] .kpi .trend.down { color: var(--red-500); } body.cbex-shell[data-theme="minimal"] .page-title { font-weight: 700; color: var(--ink); letter-spacing: -.4px; } body.cbex-shell[data-theme="minimal"] .btn { border-radius: 4px; font-weight: 500; } body.cbex-shell[data-theme="minimal"] .btn-primary { background: #0b0f1a; color: #fff; } body.cbex-shell[data-theme="minimal"] .btn-primary:hover { background: var(--red-500); } body.cbex-shell[data-theme="minimal"] .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); } body.cbex-shell[data-theme="minimal"] .btn-ghost:hover { background: var(--navy-50); border-color: var(--ink); } body.cbex-shell[data-theme="minimal"] .tabs { background: transparent; padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 0; } body.cbex-shell[data-theme="minimal"] .tabs button { border-radius: 0; padding: 6px 14px; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; } body.cbex-shell[data-theme="minimal"] .tabs button.on { background: transparent; color: var(--ink); border-bottom-color: var(--red-500); box-shadow: none; } body.cbex-shell[data-theme="minimal"] .tbl th { background: transparent; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; padding: 10px 18px; border-bottom: 1px solid var(--line); } body.cbex-shell[data-theme="minimal"] .tbl td { padding: 14px 18px; font-size: 13px; border-bottom: 1px solid var(--line-2); } body.cbex-shell[data-theme="minimal"] .tbl tr.clickable:hover { background: var(--navy-50); } body.cbex-shell[data-theme="minimal"] .tbl .track-id { font-weight: 500; color: var(--ink); } body.cbex-shell[data-theme="minimal"] .status { background: transparent !important; padding: 2px 0; font-weight: 500; font-size: 12px; } body.cbex-shell[data-theme="minimal"] .status .s-dot { width: 7px; height: 7px; } body.cbex-shell[data-theme="minimal"] .status.delivered { color: var(--green-500); } body.cbex-shell[data-theme="minimal"] .status.in-transit { color: var(--blue-500); } body.cbex-shell[data-theme="minimal"] .status.pending { color: var(--amber-500); } body.cbex-shell[data-theme="minimal"] .status.cancelled { color: var(--red-500); } body.cbex-shell[data-theme="minimal"] .timeline-item .tl-dot { background: #fff; border: 1px solid var(--line); box-shadow: none; width: 24px; height: 24px; } body.cbex-shell[data-theme="minimal"] .timeline-item.done .tl-dot { background: var(--ink); color: #fff; box-shadow: none; border-color: var(--ink); } body.cbex-shell[data-theme="minimal"] .timeline-item.active .tl-dot { background: var(--red-500); color: #fff; box-shadow: none; border-color: var(--red-500); } body.cbex-shell[data-theme="minimal"] .timeline-item:not(:last-child)::before { background: var(--line); } body.cbex-shell[data-theme="minimal"] .mini-map { background: #fafafa; border: 1px solid var(--line); border-radius: 6px; } body.cbex-shell[data-theme="minimal"] .mini-map .grid-lines { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); opacity: 1; } body.cbex-shell[data-theme="minimal"] .map-pin { background: var(--red-500); box-shadow: none; } body.cbex-shell[data-theme="minimal"] .map-pin.navy { background: var(--ink); box-shadow: none; } body.cbex-shell[data-theme="minimal"] .route-line { stroke: var(--ink); stroke-width: 1.5; } body.cbex-shell[data-theme="minimal"] .fleet-card { border-color: var(--line); border-radius: 4px; } body.cbex-shell[data-theme="minimal"] .fleet-card:hover { border-color: var(--ink); background: transparent; } body.cbex-shell[data-theme="minimal"] .fleet-card .truck-icon { background: transparent; border: 1px solid var(--line); color: var(--ink-2); border-radius: 4px; } body.cbex-shell[data-theme="minimal"] .topbar, body.cbex-shell[data-theme="minimal"] .sidebar { box-shadow: none !important; } /* ========================================================================== BOLD GLASS ========================================================================== */ body.cbex-shell[data-theme="glass"] { --ink: #ffffff; --ink-2: rgba(255,255,255,.78); --ink-3: rgba(255,255,255,.55); --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.06); --bg: #0a0820; --bg-card: rgba(255,255,255,.06); --navy-900: #0a0820; --navy-800: rgba(255,255,255,.08); --navy-700: rgba(255,255,255,.10); --navy-600: rgba(255,255,255,.18); --navy-500: rgba(255,255,255,.35); --navy-400: rgba(255,255,255,.55); --navy-300: rgba(255,255,255,.70); --navy-200: rgba(255,255,255,.12); --navy-100: rgba(255,255,255,.08); --navy-50: rgba(255,255,255,.05); --red-500: #ff4d6d; --red-600: #e63351; --red-400: #ff6b85; --red-50: rgba(255,77,109,.15); --red-100: rgba(255,77,109,.25); --green-500: #4ade80; --green-50: rgba(74,222,128,.15); --amber-500: #fbbf24; --amber-50: rgba(251,191,36,.15); --blue-500: #60a5fa; --blue-50: rgba(96,165,250,.15); --shadow-sm: 0 4px 12px rgba(0,0,0,.2); --shadow-md: 0 8px 24px rgba(0,0,0,.3); --shadow-lg: 0 16px 40px rgba(0,0,0,.4); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --cbex-ink: var(--ink); --cbex-ink-2: var(--ink-2); --cbex-ink-3: var(--ink-3); --cbex-line: var(--line); --cbex-line-2: var(--line-2); --cbex-bg: var(--bg); --cbex-bg-card: var(--bg-card); --cbex-navy-900: var(--navy-900); --cbex-navy-800: var(--navy-800); --cbex-navy-700: var(--navy-700); --cbex-navy-600: var(--navy-600); --cbex-navy-500: var(--navy-500); --cbex-navy-400: var(--navy-400); --cbex-navy-300: var(--navy-300); --cbex-navy-200: var(--navy-200); --cbex-navy-100: var(--navy-100); --cbex-navy-50: var(--navy-50); --cbex-red-600: var(--red-600); --cbex-red-500: var(--red-500); --cbex-red-400: var(--red-400); --cbex-red-100: var(--red-100); --cbex-red-50: var(--red-50); --cbex-green-500: var(--green-500); --cbex-green-50: var(--green-50); --cbex-amber-500: var(--amber-500); --cbex-amber-50: var(--amber-50); --cbex-blue-500: var(--blue-500); --cbex-blue-50: var(--blue-50); --cbex-shadow-sm: var(--shadow-sm); --cbex-shadow-md: var(--shadow-md); --cbex-shadow-lg: var(--shadow-lg); --cbex-radius-sm: var(--radius-sm); --cbex-radius: var(--radius); --cbex-radius-lg: var(--radius-lg); --cbex-radius-xl: var(--radius-xl); } body.cbex-shell[data-theme="glass"] { background: radial-gradient(circle at 15% 10%, rgba(255,77,109,.30), transparent 45%), radial-gradient(circle at 85% 85%, rgba(96,165,250,.30), transparent 45%), radial-gradient(circle at 50% 50%, rgba(168,85,247,.20), transparent 55%), linear-gradient(135deg, #0a0820 0%, #1a0d40 50%, #200830 100%) fixed; color: var(--ink); } body.cbex-shell[data-theme="glass"] .topbar { background: rgba(10,8,32,.50); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-bottom: 1px solid var(--line); } body.cbex-shell[data-theme="glass"] .tb-brand { border-left: 1px solid var(--line); } body.cbex-shell[data-theme="glass"] .tb-brand .logo-mark { background: linear-gradient(135deg,#ff4d6d,#c026d3); box-shadow: 0 8px 20px rgba(255,77,109,.4), inset 0 1px 0 rgba(255,255,255,.3); border-radius: 12px; } body.cbex-shell[data-theme="glass"] .tb-brand .logo-mark::after { background: rgba(255,255,255,.6); } body.cbex-shell[data-theme="glass"] .tb-brand .brand-name { background: linear-gradient(135deg,#fff,#ffc3cf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } body.cbex-shell[data-theme="glass"] .tb-search input { background: rgba(255,255,255,.08); border: 1px solid var(--line); backdrop-filter: blur(10px); color: #fff; border-radius: 14px; } body.cbex-shell[data-theme="glass"] .tb-search input::placeholder { color: var(--ink-3); } body.cbex-shell[data-theme="glass"] .tb-search input:focus { background: rgba(255,255,255,.12); border-color: var(--red-400); box-shadow: 0 0 0 4px rgba(255,77,109,.15); } body.cbex-shell[data-theme="glass"] .tb-btn { color: var(--ink-2); border-radius: 12px; } body.cbex-shell[data-theme="glass"] .tb-btn:hover { background: rgba(255,255,255,.10); color: #fff; } body.cbex-shell[data-theme="glass"] .tb-new { background: linear-gradient(135deg,#ff4d6d,#c026d3); color: #fff; box-shadow: 0 8px 20px rgba(255,77,109,.4), inset 0 1px 0 rgba(255,255,255,.3); border-radius: 14px; font-weight: 700; } body.cbex-shell[data-theme="glass"] .tb-new:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255,77,109,.5); } body.cbex-shell[data-theme="glass"] .tb-divider { background: var(--line); } body.cbex-shell[data-theme="glass"] .tb-user:hover { background: rgba(255,255,255,.08); } body.cbex-shell[data-theme="glass"] .tb-user .avatar { background: linear-gradient(135deg,#60a5fa,#c026d3); box-shadow: 0 4px 12px rgba(192,38,211,.4), inset 0 1px 0 rgba(255,255,255,.3); border-radius: 10px; } body.cbex-shell[data-theme="glass"] .tb-user .u-name { color: #fff; } body.cbex-shell[data-theme="glass"] .domainbar { background: rgba(10,8,32,.40); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); } body.cbex-shell[data-theme="glass"] .domain-tab { color: rgba(255,255,255,.60); font-weight: 600; border-radius: 12px; } body.cbex-shell[data-theme="glass"] .domain-tab:hover { color: #fff; background: rgba(255,255,255,.08); } body.cbex-shell[data-theme="glass"] .domain-tab.active { color: #fff; background: linear-gradient(135deg, rgba(255,77,109,.25), rgba(192,38,211,.25)); border: 1px solid rgba(255,77,109,.30); } body.cbex-shell[data-theme="glass"] .domain-tab.active::after { display: none; } body.cbex-shell[data-theme="glass"] .sidebar { background: rgba(10,8,32,.35); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-left: 1px solid var(--line); } body.cbex-shell[data-theme="glass"] .sb-workspace { background: linear-gradient(135deg, rgba(255,77,109,.2), rgba(192,38,211,.2)); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1); } body.cbex-shell[data-theme="glass"] .sb-workspace .ws-icon { background: linear-gradient(135deg, #ff4d6d, #fff); color: #c026d3; } body.cbex-shell[data-theme="glass"] .sb-section-title { color: var(--ink-3); } body.cbex-shell[data-theme="glass"] .sb-item { color: var(--ink-2); border-radius: 12px; } body.cbex-shell[data-theme="glass"] .sb-item:hover { background: rgba(255,255,255,.08); color: #fff; } body.cbex-shell[data-theme="glass"] .sb-item.active { background: linear-gradient(135deg, rgba(255,77,109,.25), rgba(192,38,211,.15)); border: 1px solid rgba(255,77,109,.25); color: #fff; box-shadow: 0 4px 12px rgba(255,77,109,.15); } body.cbex-shell[data-theme="glass"] .sb-item.active::before { display: none; } body.cbex-shell[data-theme="glass"] .sb-item .ico { color: var(--ink-3); } body.cbex-shell[data-theme="glass"] .sb-item.active .ico { color: var(--red-400); } body.cbex-shell[data-theme="glass"] .sb-item .badge { background: rgba(255,255,255,.12); color: #fff; } body.cbex-shell[data-theme="glass"] .sb-item .badge.red { background: var(--red-500); color: #fff; } body.cbex-shell[data-theme="glass"] .sb-mini-btn { background: rgba(255,255,255,.08); color: var(--ink-2); border-radius: 12px; } body.cbex-shell[data-theme="glass"] .sb-mini-btn:hover { background: rgba(255,255,255,.15); color: #fff; } body.cbex-shell[data-theme="glass"] .sb-footer { border-top-color: var(--line); } body.cbex-shell[data-theme="glass"] .card { background: rgba(255,255,255,.06); border: 1px solid var(--line); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); } body.cbex-shell[data-theme="glass"] .card-head { border-bottom-color: var(--line); } body.cbex-shell[data-theme="glass"] .card-title { color: #fff; font-weight: 700; } body.cbex-shell[data-theme="glass"] .kpi { background: rgba(255,255,255,.06); border: 1px solid var(--line); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; } body.cbex-shell[data-theme="glass"] .kpi .kpi-icon { border-radius: 14px; } body.cbex-shell[data-theme="glass"] .kpi.blue .kpi-icon { background: var(--blue-50); color: var(--blue-500); border: 1px solid rgba(96,165,250,.3); } body.cbex-shell[data-theme="glass"] .kpi.green .kpi-icon { background: var(--green-50); color: var(--green-500); border: 1px solid rgba(74,222,128,.3); } body.cbex-shell[data-theme="glass"] .kpi.amber .kpi-icon { background: var(--amber-50); color: var(--amber-500); border: 1px solid rgba(251,191,36,.3); } body.cbex-shell[data-theme="glass"] .kpi.red .kpi-icon { background: var(--red-50); color: var(--red-500); border: 1px solid rgba(255,77,109,.3); } body.cbex-shell[data-theme="glass"] .kpi .value { color: #fff; font-weight: 800; position: relative; z-index: 1; } body.cbex-shell[data-theme="glass"] .kpi .label { color: var(--ink-3); position: relative; z-index: 1; } body.cbex-shell[data-theme="glass"] .kpi .trend { border-radius: 20px; } body.cbex-shell[data-theme="glass"] .kpi .trend.up { background: var(--green-50); color: var(--green-500); border: 1px solid rgba(74,222,128,.3); } body.cbex-shell[data-theme="glass"] .kpi .trend.down { background: var(--red-50); color: var(--red-500); border: 1px solid rgba(255,77,109,.3); } body.cbex-shell[data-theme="glass"] .page-title { color: #fff; } body.cbex-shell[data-theme="glass"] .breadcrumb { color: var(--ink-3); } body.cbex-shell[data-theme="glass"] .breadcrumb .cur { color: #fff; } body.cbex-shell[data-theme="glass"] .btn { border-radius: 14px; } body.cbex-shell[data-theme="glass"] .btn-primary { background: linear-gradient(135deg,#ff4d6d,#c026d3); color: #fff; box-shadow: 0 8px 20px rgba(255,77,109,.4), inset 0 1px 0 rgba(255,255,255,.3); } body.cbex-shell[data-theme="glass"] .btn-primary:hover { transform: translateY(-1px); } body.cbex-shell[data-theme="glass"] .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--line); backdrop-filter: blur(10px); } body.cbex-shell[data-theme="glass"] .btn-ghost:hover { background: rgba(255,255,255,.15); } body.cbex-shell[data-theme="glass"] .tabs { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border-radius: 12px; } body.cbex-shell[data-theme="glass"] .tabs button { color: var(--ink-2); border-radius: 10px; } body.cbex-shell[data-theme="glass"] .tabs button.on { background: linear-gradient(135deg,#ff4d6d,#c026d3); color: #fff; box-shadow: 0 4px 12px rgba(255,77,109,.3); } body.cbex-shell[data-theme="glass"] .tbl th { background: rgba(255,255,255,.04); color: var(--ink-3); border-bottom-color: var(--line); } body.cbex-shell[data-theme="glass"] .tbl td { color: var(--ink); border-bottom-color: var(--line); } body.cbex-shell[data-theme="glass"] .tbl tr.clickable:hover { background: rgba(255,255,255,.06); } body.cbex-shell[data-theme="glass"] .tbl .track-id { color: #fff; } body.cbex-shell[data-theme="glass"] .status { backdrop-filter: blur(8px); border: 1px solid transparent; } body.cbex-shell[data-theme="glass"] .status.delivered { background: var(--green-50); color: var(--green-500); border-color: rgba(74,222,128,.3); } body.cbex-shell[data-theme="glass"] .status.in-transit { background: var(--blue-50); color: var(--blue-500); border-color: rgba(96,165,250,.3); } body.cbex-shell[data-theme="glass"] .status.pending { background: var(--amber-50); color: var(--amber-500); border-color: rgba(251,191,36,.3); } body.cbex-shell[data-theme="glass"] .status.cancelled { background: var(--red-50); color: var(--red-500); border-color: rgba(255,77,109,.3); } body.cbex-shell[data-theme="glass"] .timeline-item .tl-dot { background: rgba(255,255,255,.10); color: var(--ink-2); border: 1px solid var(--line); backdrop-filter: blur(10px); } body.cbex-shell[data-theme="glass"] .timeline-item.done .tl-dot { background: linear-gradient(135deg,#4ade80,#22c55e); color: #000; box-shadow: 0 0 14px rgba(74,222,128,.5); } body.cbex-shell[data-theme="glass"] .timeline-item.active .tl-dot { background: linear-gradient(135deg,#ff4d6d,#c026d3); color: #fff; box-shadow: 0 0 18px rgba(255,77,109,.6); } body.cbex-shell[data-theme="glass"] .timeline-item:not(:last-child)::before { background: var(--line); } body.cbex-shell[data-theme="glass"] .timeline-item .tl-title { color: #fff; } body.cbex-shell[data-theme="glass"] .mini-map { background: radial-gradient(circle at 30% 40%, rgba(96,165,250,.35), transparent 45%), radial-gradient(circle at 70% 60%, rgba(255,77,109,.35), transparent 45%), rgba(10,8,32,.40); border: 1px solid var(--line); backdrop-filter: blur(10px); border-radius: 16px; } body.cbex-shell[data-theme="glass"] .mini-map .grid-lines { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); } body.cbex-shell[data-theme="glass"] .map-pin { background: linear-gradient(135deg,#ff4d6d,#c026d3); box-shadow: 0 6px 14px rgba(255,77,109,.5); } body.cbex-shell[data-theme="glass"] .map-pin.navy { background: linear-gradient(135deg,#60a5fa,#3b82f6); } body.cbex-shell[data-theme="glass"] .route-line { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); } body.cbex-shell[data-theme="glass"] .fleet-card { border: 1px solid var(--line); background: rgba(255,255,255,.04); backdrop-filter: blur(10px); border-radius: 14px; } body.cbex-shell[data-theme="glass"] .fleet-card:hover { border-color: rgba(255,77,109,.4); background: rgba(255,77,109,.05); transform: translateY(-2px); } body.cbex-shell[data-theme="glass"] .fleet-card .truck-icon { background: linear-gradient(135deg, rgba(255,77,109,.2), rgba(192,38,211,.2)); color: var(--red-400); border: 1px solid rgba(255,77,109,.25); border-radius: 12px; }