/* ========================================================================== FleetRent — Professional Theme (Light + Dark) Loaded LAST so it wins the cascade. Works with either dark convention: OR (the toggle sets both). ========================================================================== */ :root { --pro-bg: #eef1f7; --pro-surface: #ffffff; --pro-surface-2: #f7f9fc; --pro-surface-3: #eef2f8; --pro-sidebar: #ffffff; --pro-sidebar-active:#eef2ff; --pro-topbar: rgba(255,255,255,0.85); --pro-text: #0f172a; --pro-text-2: #475569; --pro-muted: #7b8798; --pro-border: #e6eaf1; --pro-border-2: #d9e0ea; --pro-accent: #4f46e5; --pro-accent-hover: #4338ca; --pro-accent-contrast:#ffffff; --pro-accent-soft: rgba(79,70,229,.09); --pro-ring: rgba(79,70,229,.30); --pro-success: #16a34a; --pro-warning: #d97706; --pro-danger: #dc2626; --pro-info: #2563eb; --pro-shadow-sm: 0 1px 2px rgba(15,23,42,.06); --pro-shadow: 0 6px 20px rgba(15,23,42,.07); --pro-shadow-lg: 0 18px 45px rgba(15,23,42,.12); --pro-radius: 16px; /* = neo panel radius */ --pro-radius-sm: 10px; } html.dark, html[data-theme="dark"] { /* Aligned with the neo "Overview of core operations" palette so every panel, table and input matches the dashboard tiles exactly. */ --pro-bg: #0a0f1d; --pro-surface: #0d1526; /* = neo panel */ --pro-surface-2: #0b1220; /* = neo tile / inputs / table heads */ --pro-surface-3: #16223a; --pro-sidebar: #0c1322; --pro-sidebar-active:#1b2743; --pro-topbar: rgba(12,19,34,.82); --pro-text: #e7ecf5; --pro-text-2: #a9b4c6; --pro-muted: #6c7893; /* Matches the neo panel border exactly, so tables, inputs and containers share ONE border look everywhere. Inputs use the brighter -2 tone so fields are clearly visible on dark. */ --pro-border: rgba(148,163,184,.14); --pro-border-2: rgba(148,163,184,.42); --pro-accent: #6366f1; --pro-accent-hover: #818cf8; --pro-accent-contrast:#ffffff; --pro-accent-soft: rgba(99,102,241,.16); --pro-ring: rgba(99,102,241,.45); --pro-success: #34d399; --pro-warning: #fbbf24; --pro-danger: #f87171; --pro-info: #60a5fa; --pro-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --pro-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(148,163,184,.10); --pro-shadow-lg: 0 24px 60px rgba(0,0,0,.55); } /* Smooth theme transitions */ html, body, .admin-sidebar, .admin-topbar, .card, .stat-card, aside, header, table, input, select, textarea, .btn, button { transition: background-color .25s ease, border-color .25s ease, color .2s ease, box-shadow .25s ease; } /* -------------------------------------------------------------------------- */ /* Base */ /* -------------------------------------------------------------------------- */ body, body.admin-layout { background: var(--pro-bg) !important; color: var(--pro-text) !important; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; } .admin-content { color: var(--pro-text); } h1,h2,h3,h4,h5 { color: var(--pro-text) !important; letter-spacing: -.01em; } /* -------------------------------------------------------------------------- */ /* Sidebar */ /* -------------------------------------------------------------------------- */ .admin-sidebar, aside.admin-sidebar, .sidebar { background: var(--pro-sidebar) !important; border-right: 1px solid var(--pro-border) !important; box-shadow: none; } .sidebar-brand { border-bottom: 1px solid var(--pro-border); } .sidebar-brand small { color: var(--pro-muted) !important; } .sidebar-title, .admin-sidebar .sidebar-title { color: var(--pro-muted) !important; text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 700; } .admin-sidebar a, aside.admin-sidebar a, .sidebar-link { color: var(--pro-text-2) !important; border-radius: 10px !important; padding: 9px 12px !important; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 2px; } .admin-sidebar a:hover, .sidebar-link:hover { background: var(--pro-accent-soft) !important; color: var(--pro-accent) !important; } .admin-sidebar a.active, .sidebar-link.active { background: var(--pro-sidebar-active) !important; color: var(--pro-accent) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--pro-accent); } .logout-btn { color: var(--pro-danger) !important; border-radius: 10px !important; } .logout-btn:hover { background: rgba(220,38,38,.10) !important; } /* -------------------------------------------------------------------------- */ /* Topbar */ /* -------------------------------------------------------------------------- */ .admin-topbar, header.admin-topbar { background: var(--pro-topbar) !important; -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--pro-border) !important; } .topbar-title { color: var(--pro-text) !important; font-weight: 600; } .topbar-right, .topbar-right span, .topbar-date { color: var(--pro-text-2) !important; } .topbar-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--pro-border); background: var(--pro-surface-2); cursor: pointer; font-size: 16px; line-height: 1; } .topbar-icon:hover { background: var(--pro-accent-soft); border-color: var(--pro-accent); } /* Language select in topbar */ .admin-topbar select { background: var(--pro-surface-2) !important; color: var(--pro-text) !important; border: 1px solid var(--pro-border) !important; border-radius: 10px !important; padding: 6px 10px !important; } /* -------------------------------------------------------------------------- */ /* Cards / surfaces */ /* -------------------------------------------------------------------------- */ .card, .dashboard-card, .stat-card { background: var(--pro-surface) !important; border: 1px solid var(--pro-border) !important; border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow) !important; } .stat-value { color: var(--pro-text) !important; } .stat-label { color: var(--pro-muted) !important; } /* Kill the old neon gradient border in dark mode for a cleaner pro look */ html.dark .kpi::before, html.dark .metric::before, html.dark .stat-card::before { display: none !important; } /* -------------------------------------------------------------------------- */ /* Footer */ /* -------------------------------------------------------------------------- */ .dashboard-footer { background: var(--pro-surface) !important; border-top: 1px solid var(--pro-border) !important; color: var(--pro-muted) !important; } /* -------------------------------------------------------------------------- */ /* Buttons (utility-based) */ /* -------------------------------------------------------------------------- */ .btn-primary { background: var(--pro-accent) !important; color:#fff !important; box-shadow:none !important; border-radius:10px; } .btn-primary:hover { background: var(--pro-accent-hover) !important; } /* ========================================================================== DARK SKIN for Tailwind utility classes used across page content. These make every existing page dark-mode aware without editing each blade. ========================================================================== */ html.dark, html[data-theme="dark"] { color-scheme: dark; } /* Surfaces */ html.dark .bg-white, html[data-theme="dark"] .bg-white, html.dark .bg-gray-50, html[data-theme="dark"] .bg-gray-50, html.dark .bg-gray-100, html[data-theme="dark"] .bg-gray-100, html.dark .bg-slate-50, html[data-theme="dark"] .bg-slate-50, html.dark .bg-slate-100, html[data-theme="dark"] .bg-slate-100 { background-color: var(--pro-surface) !important; } html.dark .bg-gray-200, html[data-theme="dark"] .bg-gray-200, html.dark .bg-slate-200, html[data-theme="dark"] .bg-slate-200 { background-color: var(--pro-surface-3) !important; } /* Text */ html.dark .text-gray-900, html[data-theme="dark"] .text-gray-900, html.dark .text-gray-800, html[data-theme="dark"] .text-gray-800, html.dark .text-slate-900, html[data-theme="dark"] .text-slate-900, html.dark .text-slate-800, html[data-theme="dark"] .text-slate-800, html.dark .text-black, html[data-theme="dark"] .text-black { color: var(--pro-text) !important; } html.dark .text-gray-700, html[data-theme="dark"] .text-gray-700, html.dark .text-gray-600, html[data-theme="dark"] .text-gray-600, html.dark .text-slate-700, html[data-theme="dark"] .text-slate-700, html.dark .text-slate-600, html[data-theme="dark"] .text-slate-600 { color: var(--pro-text-2) !important; } html.dark .text-gray-500, html[data-theme="dark"] .text-gray-500, html.dark .text-gray-400, html[data-theme="dark"] .text-gray-400, html.dark .text-slate-500, html[data-theme="dark"] .text-slate-500, html.dark .text-slate-400, html[data-theme="dark"] .text-slate-400 { color: var(--pro-muted) !important; } /* Borders / dividers */ html.dark .border, html[data-theme="dark"] .border, html.dark .border-gray-100, html[data-theme="dark"] .border-gray-100, html.dark .border-gray-200, html[data-theme="dark"] .border-gray-200, html.dark .border-gray-300, html[data-theme="dark"] .border-gray-300, html.dark .border-slate-200, html[data-theme="dark"] .border-slate-200, html.dark .border-b, html[data-theme="dark"] .border-b, html.dark .border-t, html[data-theme="dark"] .border-t, html.dark .divide-y > * + *, html[data-theme="dark"] .divide-y > * + * { border-color: var(--pro-border) !important; } /* Shadows a touch stronger in dark */ html.dark .shadow, html[data-theme="dark"] .shadow, html.dark .shadow-md, html[data-theme="dark"] .shadow-md, html.dark .shadow-lg, html[data-theme="dark"] .shadow-lg, html.dark .shadow-sm, html[data-theme="dark"] .shadow-sm { box-shadow: var(--pro-shadow) !important; } /* Hover neutrals */ html.dark .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--pro-surface-3) !important; } /* Table head tint */ html.dark thead.bg-gray-50, html[data-theme="dark"] thead.bg-gray-50, html.dark .bg-gray-50 thead, html[data-theme="dark"] .bg-gray-50 thead { background-color: var(--pro-surface-2) !important; } /* Form controls (works with @tailwindcss/forms base) */ html.dark input, html[data-theme="dark"] input, html.dark select, html[data-theme="dark"] select, html.dark textarea, html[data-theme="dark"] textarea { background-color: var(--pro-surface-2) !important; color: var(--pro-text) !important; border-color: var(--pro-border-2) !important; } html.dark input::placeholder, html[data-theme="dark"] input::placeholder, html.dark textarea::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--pro-muted) !important; } input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--pro-accent) !important; box-shadow: 0 0 0 3px var(--pro-ring) !important; } /* Semantic badge tints — remap pale -50/-100 chips for dark mode */ html.dark .bg-green-50, html[data-theme="dark"] .bg-green-50, html.dark .bg-green-100, html[data-theme="dark"] .bg-green-100, html.dark .bg-emerald-50, html[data-theme="dark"] .bg-emerald-50, html.dark .bg-emerald-100, html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(52,211,153,.14) !important; } html.dark .text-green-800, html[data-theme="dark"] .text-green-800, html.dark .text-green-700, html[data-theme="dark"] .text-green-700, html.dark .text-emerald-800, html[data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; } html.dark .bg-red-50, html[data-theme="dark"] .bg-red-50, html.dark .bg-red-100, html[data-theme="dark"] .bg-red-100 { background-color: rgba(248,113,113,.15) !important; } html.dark .text-red-800, html[data-theme="dark"] .text-red-800, html.dark .text-red-700, html[data-theme="dark"] .text-red-700 { color: #fca5a5 !important; } html.dark .bg-yellow-50, html[data-theme="dark"] .bg-yellow-50, html.dark .bg-yellow-100, html[data-theme="dark"] .bg-yellow-100, html.dark .bg-amber-50, html[data-theme="dark"] .bg-amber-50, html.dark .bg-amber-100, html[data-theme="dark"] .bg-amber-100 { background-color: rgba(251,191,36,.15) !important; } html.dark .text-yellow-800, html[data-theme="dark"] .text-yellow-800, html.dark .text-yellow-700, html[data-theme="dark"] .text-yellow-700, html.dark .text-amber-800, html[data-theme="dark"] .text-amber-800 { color: #fcd34d !important; } html.dark .bg-blue-50, html[data-theme="dark"] .bg-blue-50, html.dark .bg-blue-100, html[data-theme="dark"] .bg-blue-100, html.dark .bg-indigo-50, html[data-theme="dark"] .bg-indigo-50, html.dark .bg-indigo-100, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,.16) !important; } html.dark .text-blue-800, html[data-theme="dark"] .text-blue-800, html.dark .text-blue-700, html[data-theme="dark"] .text-blue-700, html.dark .text-indigo-800, html[data-theme="dark"] .text-indigo-800, html.dark .text-indigo-700, html[data-theme="dark"] .text-indigo-700 { color: #a5b4fc !important; } html.dark .bg-gray-200.text-gray-700, html[data-theme="dark"] .bg-gray-200.text-gray-700 { color: var(--pro-text-2) !important; } /* Accent buttons keep their vivid colors but soften ring */ .bg-indigo-600, .bg-blue-600, .bg-emerald-600, .bg-green-600, .bg-red-600 { box-shadow: var(--pro-shadow-sm); } /* Rounded, refined default card feel for utility panels */ .shadow.rounded, .shadow.rounded-lg, .rounded-lg.border, .rounded.border { border-radius: var(--pro-radius) !important; } /* Links */ a.text-indigo-600, .text-indigo-600 { color: var(--pro-accent) !important; } /* Pagination (Tailwind paginator) */ html.dark nav[role="navigation"] span, html[data-theme="dark"] nav[role="navigation"] span, html.dark nav[role="navigation"] a, html[data-theme="dark"] nav[role="navigation"] a { background-color: var(--pro-surface) !important; color: var(--pro-text-2) !important; border-color: var(--pro-border) !important; } /* Keep small subscription/report tables from inheriting the giant global min-width */ .max-w-5xl table, .max-w-6xl table, .max-w-4xl table, .p-6 .overflow-x-auto > table { min-width: 0 !important; width: 100% !important; } /* -------------------------------------------------------------------------- */ /* Guest / auth pages */ /* -------------------------------------------------------------------------- */ body.guest-body { background: var(--pro-bg) !important; color: var(--pro-text) !important; } .guest-shell.bg-gray-100 { background: var(--pro-bg) !important; } .guest-body label { color: var(--pro-text-2) !important; } .guest-body h1, .guest-body h2 { color: var(--pro-text) !important; } #themeToggle:hover { border-color: var(--pro-accent) !important; } /* -------------------------------------------------------------------------- */ /* Customer portal (hardcoded classes -> dark overrides) */ /* -------------------------------------------------------------------------- */ html.dark .customer-main, html[data-theme="dark"] .customer-main { background: var(--pro-bg) !important; } html.dark .customer-topbar, html[data-theme="dark"] .customer-topbar { background: var(--pro-surface) !important; border-bottom-color: var(--pro-border) !important; } html.dark .customer-footer, html[data-theme="dark"] .customer-footer { background: var(--pro-surface) !important; border-top-color: var(--pro-border) !important; color: var(--pro-muted) !important; } html.dark .customer-topbar .page-title h1, html[data-theme="dark"] .customer-topbar .page-title h1 { color: var(--pro-text) !important; } html.dark .customer-topbar .page-title p, html[data-theme="dark"] .customer-topbar .page-title p { color: var(--pro-muted) !important; } html.dark .customer-topbar .user-details div, html[data-theme="dark"] .customer-topbar .user-details div { color: var(--pro-text-2) !important; } html.dark .lang-switcher-btn, html[data-theme="dark"] .lang-switcher-btn { background: var(--pro-surface-2) !important; color: var(--pro-text) !important; border-color: var(--pro-border) !important; } html.dark .lang-dropdown, html[data-theme="dark"] .lang-dropdown { background: var(--pro-surface) !important; border-color: var(--pro-border) !important; } html.dark .lang-dropdown a, html[data-theme="dark"] .lang-dropdown a { color: var(--pro-text-2) !important; } html.dark .lang-dropdown a:hover, html[data-theme="dark"] .lang-dropdown a:hover { background: var(--pro-surface-3) !important; } /* Driver nav (utility-based, mostly handled by the skin above) */ html.dark nav.bg-white, html[data-theme="dark"] nav.bg-white { background: var(--pro-surface) !important; border-bottom: 1px solid var(--pro-border); } /* -------------------------------------------------------------------------- */ /* RTA auto-fill status badge + filled-field highlight */ /* -------------------------------------------------------------------------- */ .rta-status { position: fixed; top: 74px; right: 24px; z-index: 60; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: var(--pro-shadow); display: none; max-width: 320px; } .rta-status.loading { display: block; background: var(--pro-surface); color: var(--pro-text-2); border: 1px solid var(--pro-border); } .rta-status.success { display: block; background: rgba(16,163,74,.14); color: #16a34a; border: 1px solid rgba(16,163,74,.35); } .rta-status.notfound { display: block; background: rgba(217,119,6,.14); color: #d97706; border: 1px solid rgba(217,119,6,.35); } .rta-status.error { display: block; background: rgba(220,38,38,.14); color: #dc2626; border: 1px solid rgba(220,38,38,.35); } html.dark .rta-status.success { color: #6ee7b7; } html.dark .rta-status.notfound { color: #fcd34d; } html.dark .rta-status.error { color: #fca5a5; } .rta-filled { animation: rtaFlash 1.1s ease; } @keyframes rtaFlash { 0% { box-shadow: 0 0 0 3px rgba(99,102,241,.45); background: rgba(99,102,241,.12); } 100% { box-shadow: none; } } /* ========================================================================== TABLES & FORMS — refined frames, outlines and shades (both modes) ========================================================================== */ /* --- Cards / panels: give every surface a clear frame + soft depth --- */ .card, .dashboard-card, .stat-card, .bg-white.shadow, .bg-white.rounded, .bg-white.rounded-lg, .bg-white.border, .rounded-lg.border, .rounded.border, .shadow.rounded { border: 1px solid var(--pro-border) !important; border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow) !important; } /* --- Data tables: neo-tile frame, label-style header, row separators --- */ table { border-collapse: separate; border-spacing: 0; } .card table, .bg-white table, table.table { border: 1px solid var(--pro-border) !important; border-radius: 12px; overflow: hidden; background: var(--pro-surface) !important; } table thead th, .card table thead th, table.table th { background: var(--pro-surface-2) !important; color: var(--neo-label, var(--pro-text-2)) !important; border-bottom: 1px solid var(--pro-border-2) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; } table tbody td, .card table tbody td, table.table td { border-bottom: 1px solid var(--pro-border) !important; color: var(--pro-text) !important; font-size: 13.5px; } table tbody tr:last-child td { border-bottom: 0 !important; } table tbody tr:hover td, .card table tbody tr:hover td { background: var(--pro-accent-soft) !important; } /* Vertical grid lines for the dense filterable tables (customers etc.) */ table.table td, table.table th { border-right: 1px solid var(--pro-border) !important; } table.table td:last-child, table.table th:last-child { border-right: 0 !important; } /* --- Excel-style filter buttons/popups in table headers --- */ .filter-btn { background: var(--pro-surface-3) !important; border: 1px solid var(--pro-border-2) !important; color: var(--pro-text-2) !important; border-radius: 5px !important; } .filter-btn:hover { background: var(--pro-accent-soft) !important; border-color: var(--pro-accent) !important; } .filter-popup { background: var(--pro-surface) !important; border: 1px solid var(--pro-border-2) !important; box-shadow: var(--pro-shadow-lg) !important; color: var(--pro-text) !important; } .filter-search { background: var(--pro-surface-2) !important; color: var(--pro-text) !important; border-bottom: 1px solid var(--pro-border) !important; } .filter-item { color: var(--pro-text-2) !important; } .filter-item:hover { background: var(--pro-accent-soft) !important; } .filter-select-all, .filter-footer { border-color: var(--pro-border) !important; } /* --- Form controls: visible, tactile outlines --- */ input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-input, .form-select, .form-textarea { border: 1px solid var(--pro-border-2) !important; border-radius: 10px !important; background: var(--pro-surface) !important; color: var(--pro-text) !important; } html.dark input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html.dark select, html[data-theme="dark"] select, html.dark textarea, html[data-theme="dark"] textarea { background: var(--pro-surface-2) !important; } input:focus, select:focus, textarea:focus { border-color: var(--pro-accent) !important; box-shadow: 0 0 0 3px var(--pro-ring) !important; outline: none !important; } label { color: var(--pro-text-2) !important; } /* Brighten native date/time picker icon so it's visible on dark inputs */ html.dark input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html.dark input[type="time"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); } /* Form card that wraps inputs (create/edit pages) — clear frame */ form .card, .card form, .max-w-3xl form, .max-w-4xl form { } /* ============================================================ AUTH / GUEST PAGES (login, register, forgot, reset) Fully theme-aware so light stays light and dark stays dark. ============================================================ */ .auth-title { font-size: 22px; font-weight: 700; color: var(--pro-text) !important; margin-bottom: 4px; } .auth-subtitle{ font-size: 13.5px; color: var(--pro-text-2) !important; margin-bottom: 22px; } .auth-form { display: flex; flex-direction: column; gap: 16px; } .auth-field { display: flex; flex-direction: column; } .auth-label { font-size: 13px; font-weight: 600; color: var(--pro-text-2) !important; margin-bottom: 6px; } .auth-input { width: 100%; padding: 10px 14px; font-size: 14px; background: var(--pro-surface-2) !important; color: var(--pro-text) !important; border: 1px solid var(--pro-border) !important; border-radius: 10px; } .auth-input::placeholder { color: var(--pro-muted) !important; } .auth-input:focus { border-color: var(--pro-accent) !important; box-shadow: 0 0 0 3px var(--pro-ring) !important; outline: none; } .auth-hint { font-size: 12px; margin-top: 4px; } .auth-err { font-size: 12.5px; color: #ef4444 !important; margin-top: 4px; } .auth-btn { margin-top: 4px; width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--pro-accent-contrast) !important; background: linear-gradient(135deg, var(--pro-accent), var(--pro-accent-hover)); } .auth-btn:hover { filter: brightness(1.05); } .auth-alt { text-align: center; font-size: 13px; color: var(--pro-text-2) !important; margin-top: 6px; } .auth-link { color: var(--pro-accent) !important; font-weight: 600; text-decoration: none; } .auth-link:hover { text-decoration: underline; } /* Make the stock Breeze auth pages (login / forgot / reset) theme-aware too, since they reuse Tailwind's hardcoded light colours inside the guest card. */ .guest-card label { color: var(--pro-text-2) !important; } .guest-card input:not([type="checkbox"]):not([type="radio"]) { background: var(--pro-surface-2) !important; color: var(--pro-text) !important; border-color: var(--pro-border) !important; } .guest-card .text-gray-600, .guest-card .text-gray-700, .guest-card .text-gray-900 { color: var(--pro-text-2) !important; } .guest-card a.underline { color: var(--pro-accent) !important; } /* ============================================================ NEO DASHBOARD — reference-style KPI tiles Dark: deep navy panel, tiles with colored accent border+glow. Light: white tiles, same accent colors, soft shadows. ============================================================ */ :root { --neo-panel: #ffffff; --neo-panel-brd: #e6eaf1; --neo-card: #ffffff; --neo-label: #64748b; --neo-chip-alpha: 14%; --neo-brd-alpha: 55%; --neo-glow: 0 1px 3px rgba(15,23,42,.07); } html.dark, html[data-theme="dark"] { --neo-panel: #0d1526; --neo-panel-brd: rgba(148,163,184,.14); --neo-card: #0b1220; --neo-label: #c3cbd9; --neo-chip-alpha: 16%; --neo-brd-alpha: 60%; --neo-glow: 0 0 0 rgba(0,0,0,0); } .neo-panel { background: var(--neo-panel); border: 1px solid var(--neo-panel-brd); border-radius: 16px; padding: 18px; margin-bottom: 22px; box-shadow: var(--neo-glow); } .neo-panel-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--pro-text-2) !important; margin: 2px 2px 14px; } .neo-panel-head::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--pro-accent); } .neo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1280px) { .neo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 900px) { .neo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px) { .neo-grid { grid-template-columns: 1fr; } } .neo-card { --na: #6366f1; /* accent, overridden by variant classes */ display: flex; align-items: center; gap: 12px; background: var(--neo-card); border: 1px solid color-mix(in srgb, var(--na) var(--neo-brd-alpha), transparent); border-radius: 12px; padding: 13px 15px; min-height: 64px; text-decoration: none; box-shadow: var(--neo-glow); transition: transform .15s ease, box-shadow .15s ease; } a.neo-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--na) 22%, transparent); } .neo-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--na) var(--neo-chip-alpha), transparent); color: var(--na); font-size: 14px; } .neo-meta { min-width: 0; } .neo-label { font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--neo-label) !important; margin: 0 0 3px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .neo-value { font-size: 16.5px; font-weight: 800; line-height: 1.1; color: var(--na) !important; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .neo-value small { font-size: 11px; font-weight: 600; opacity: .75; } /* Accent variants (match the reference rainbow) */ .neo-green { --na: #22c55e; } .neo-amber { --na: #f59e0b; } .neo-orange { --na: #fb923c; } .neo-purple { --na: #a855f7; } .neo-violet { --na: #8b5cf6; } .neo-cyan { --na: #06b6d4; } .neo-teal { --na: #2dd4bf; } .neo-red { --na: #ef4444; } .neo-rose { --na: #f43f5e; } .neo-blue { --na: #3b82f6; } .neo-indigo { --na: #6366f1; } .neo-yellow { --na: #eab308; } .neo-lime { --na: #84cc16; } .neo-pink { --na: #ec4899; } .neo-slate { --na: #94a3b8; } /* Light mode: deepen value colors slightly for contrast on white */ html:not(.dark):not([data-theme="dark"]) .neo-green { --na: #16a34a; } html:not(.dark):not([data-theme="dark"]) .neo-amber { --na: #d97706; } html:not(.dark):not([data-theme="dark"]) .neo-cyan { --na: #0891b2; } html:not(.dark):not([data-theme="dark"]) .neo-teal { --na: #0d9488; } html:not(.dark):not([data-theme="dark"]) .neo-yellow { --na: #ca8a04; } html:not(.dark):not([data-theme="dark"]) .neo-lime { --na: #65a30d; } html:not(.dark):not([data-theme="dark"]) .neo-slate { --na: #64748b; } /* Wide content block inside a neo panel (charts, tables, calendars) */ .neo-block { background: var(--neo-card); border: 1px solid var(--neo-panel-brd); border-radius: 12px; padding: 16px; } .neo-block-title { font-size: 13px; font-weight: 700; color: var(--pro-text) !important; margin: 0 0 12px; } /* ============================================================ GLOBAL NEO CONSISTENCY — every page, every role. Legacy stat cards, panels and buttons inherit the exact "Overview of core operations" tile finish. ============================================================ */ /* Legacy .stat-card tiles (finance dashboard, list pages, etc.) become accent-bordered neo tiles (indigo default accent). */ .stat-card { --na: #6366f1; background: var(--neo-card) !important; border: 1px solid color-mix(in srgb, var(--na) var(--neo-brd-alpha), transparent) !important; border-radius: 12px !important; box-shadow: var(--neo-glow) !important; padding: 14px 16px; } .stat-card .stat-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: var(--neo-label) !important; } .stat-card .stat-value { font-weight: 800; } /* Generic content panels share the neo panel surface */ .card, .dashboard-card, .bg-white.shadow, .bg-white.rounded-lg, .bg-white.rounded, .rounded-lg.shadow, .rounded-lg.border { background: var(--neo-panel) !important; } /* Section headings inside panels echo the neo panel head */ .card > h2:first-child, .card > h3:first-child { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .02em; } /* Buttons: one rounded, confident shape everywhere (filter buttons keep their small square look) */ button:not(.filter-btn):not(.lp-pill), .btn, .btn-primary, .btn-secondary, a[class*="bg-indigo-6"], a[class*="bg-blue-6"], a[class*="bg-green-6"], a[class*="bg-emerald-6"], a[class*="bg-red-6"], a[class*="bg-gray-6"], button[class*="bg-indigo-6"], button[class*="bg-blue-6"], button[class*="bg-green-6"], button[class*="bg-emerald-6"], button[class*="bg-red-6"] { border-radius: 10px !important; font-weight: 600; } /* Pagination pills match the tile geometry */ nav[role="navigation"] a, nav[role="navigation"] span > span, nav[role="navigation"] span[aria-current] > span { border-radius: 8px !important; } /* ============================================================ CONTAINED SCROLLING — wide content scrolls INSIDE its panel, never the page. Applies to every role's pages. ============================================================ */ /* Any panel holding a table directly gets its own horizontal scrollbar. !important beats dashboard.css's `.card { overflow: visible !important }` (that rule exists for filter dropdowns, which live in .table-scroll wrappers — never as direct children — so they stay unclipped.) */ .card:has(> table), .bg-white:has(> table), .neo-block:has(> table), .neo-panel:has(> table), .rounded-lg:has(> table), .shadow:has(> table) { overflow-x: auto !important; } /* Also when the table sits one level deeper (heading + table in a div) */ .card:has(> div > table) > div:has(> table), .bg-white:has(> div > table) > div:has(> table) { overflow-x: auto !important; } /* Headings stay pinned while the table scrolls underneath */ .card:has(> table) > h1, .card:has(> table) > h2, .card:has(> table) > h3, .bg-white:has(> table) > h1, .bg-white:has(> table) > h2, .bg-white:has(> table) > h3 { position: sticky; left: 0; } /* ============================================================ DRIVER DASHBOARD — neo-tile contact actions + visible fields Call / WhatsApp / Navigate become multicolored accent tiles with a clear, glowing hover — same language as the KPI tiles. ============================================================ */ .contact-btn { --na: #6366f1; background: var(--neo-card) !important; border: 1.5px solid color-mix(in srgb, var(--na) var(--neo-brd-alpha), transparent) !important; color: var(--na) !important; border-radius: 12px !important; font-weight: 700 !important; box-shadow: var(--neo-glow) !important; transition: all .15s ease !important; } .contact-btn:hover { border-color: var(--na) !important; background: color-mix(in srgb, var(--na) 14%, var(--neo-card)) !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--na) 35%, transparent) !important; transform: translateY(-2px); } /* Position-based accents: 1=Call (green) 2=WhatsApp (WA green) 3=Navigate (blue) */ .contact-btn:nth-of-type(1) { --na: #22c55e; } .contact-btn:nth-of-type(2) { --na: #2dd4bf; } .contact-btn:nth-of-type(3) { --na: #60a5fa; } /* Quick-action buttons (driver dashboard etc.) — normal, clearly visible bordered buttons; combine with a .neo-* accent class. */ /* ============================================================ UNIFORM BUTTON HOVER — every button across the app reacts the same way: slight lift + brighten + soft shadow. (Beats mild-ui.css's `transform: none !important` reset.) ============================================================ */ .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-apply, .btn-export, .btn-blue, .btn-green, .btn-red, .btn-dark, .auth-btn, .add-btn, button[class*="bg-"], a[class*="bg-indigo-6"], a[class*="bg-blue-6"], a[class*="bg-green-6"], a[class*="bg-emerald-6"], a[class*="bg-red-6"], a[class*="bg-gray-6"], a[class*="bg-purple-6"] { transition: all .15s ease !important; } .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-outline:hover, .btn-apply:hover, .btn-export:hover, .btn-blue:hover, .btn-green:hover, .btn-red:hover, .btn-dark:hover, .auth-btn:hover, .add-btn:hover, button[class*="bg-"]:hover, a[class*="bg-indigo-6"]:hover, a[class*="bg-blue-6"]:hover, a[class*="bg-green-6"]:hover, a[class*="bg-emerald-6"]:hover, a[class*="bg-red-6"]:hover, a[class*="bg-gray-6"]:hover, a[class*="bg-purple-6"]:hover { transform: translateY(-1px) !important; filter: brightness(1.08); box-shadow: 0 5px 14px rgba(0, 0, 0, .22) !important; } /* ============================================================ NO BARE ACTION LINKS — every action link becomes a uniform BLUE BUTTON with white text, across all roles and pages. ============================================================ */ :root { --act-btn: #2563eb; --act-btn-h: #1d4ed8; } html.dark, html[data-theme="dark"] { --act-btn: #3b82f6; --act-btn-h: #2563eb; } a.text-blue-600, a.text-indigo-600, a.link-primary, a[class*="hover:underline"], table td a:not([class*="bg-"]):not(.qa-btn):not(.contact-btn) { display: inline-flex; align-items: center; gap: 5px; background: var(--act-btn) !important; color: #fff !important; padding: 6px 13px !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3; text-decoration: none !important; border: none !important; transition: all .15s ease; } a.text-blue-600:hover, a.text-indigo-600:hover, a.link-primary:hover, a[class*="hover:underline"]:hover, table td a:not([class*="bg-"]):not(.qa-btn):not(.contact-btn):hover { background: var(--act-btn-h) !important; color: #fff !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, .35) !important; } /* Links styled as solid buttons KEEP their white text on hover — overrides `.admin-content a:hover { color: accent }` which made button labels vanish into the button background. */ a[class*="bg-indigo-6"]:hover, a[class*="bg-blue-6"]:hover, a[class*="bg-green-6"]:hover, a[class*="bg-emerald-6"]:hover, a[class*="bg-red-6"]:hover, a[class*="bg-gray-6"]:hover, a[class*="bg-purple-6"]:hover, a.btn-primary:hover, a.add-btn:hover, a.lp-btn-solid:hover, a.auth-btn:hover { color: #fff !important; text-decoration: none !important; } a.btn-outline:hover, a.lp-btn-outline:hover { text-decoration: none !important; } :where(.qa-btn) { --na: #94a3b8; } /* zero specificity so .neo-* accents win */ .qa-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; background: var(--neo-card) !important; color: var(--na) !important; border: 1.5px solid color-mix(in srgb, var(--na) var(--neo-brd-alpha), transparent) !important; box-shadow: var(--neo-glow); transition: all .15s ease; } .qa-btn:hover { border-color: var(--na) !important; background: color-mix(in srgb, var(--na) 14%, var(--neo-card)) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--na) 30%, transparent); transform: translateY(-1px); } html:not(.dark):not([data-theme="dark"]) .contact-btn:nth-of-type(1) { --na: #16a34a; } html:not(.dark):not([data-theme="dark"]) .contact-btn:nth-of-type(2) { --na: #0d9488; } html:not(.dark):not([data-theme="dark"]) .contact-btn:nth-of-type(3) { --na: #2563eb; } /* Charts and calendars never spill out of their block */ .neo-block { overflow-x: auto; } canvas { max-width: 100% !important; } .fc { max-width: 100%; } .fc table { min-width: 0 !important; } /* The page itself must not scroll sideways */ .admin-content, .dashboard-root, .customer-content { overflow-x: clip; } /* Existing utility scroll wrappers stay rounded like the tiles */ .overflow-x-auto, .table-scroll { border-radius: 12px; } /* JS-injected wrapper (theme.js) — guarantees every table on every page scrolls inside its own container instead of being cut off. */ .auto-table-scroll { overflow-x: auto !important; max-width: 100%; border-radius: 12px; -webkit-overflow-scrolling: touch; } .auto-table-scroll > table { min-width: max-content; width: 100%; } /* Some pages nest the wrappers inverted (.table-scroll > .table-wrapper > table) so the overflow:hidden wrapper clips the table before the scroller sees it. Whichever wrapper directly holds the table must be the scroller. */ .table-wrapper:has(> table), .table-container:has(> table) { overflow-x: auto !important; } /* ============================================================ ALWAYS-VISIBLE horizontal scrollbars on table scrollers. macOS hides overlay scrollbars until you scroll — with a mouse there is no horizontal gesture, so wide tables looked stuck. ============================================================ */ .table-wrapper, .table-scroll, .table-container, .auto-table-scroll, .overflow-x-auto, .card:has(> table), .neo-block:has(> table) { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--pro-accent) var(--pro-surface-2); } .table-wrapper::-webkit-scrollbar, .table-scroll::-webkit-scrollbar, .table-container::-webkit-scrollbar, .auto-table-scroll::-webkit-scrollbar, .overflow-x-auto::-webkit-scrollbar, .card:has(> table)::-webkit-scrollbar, .neo-block:has(> table)::-webkit-scrollbar { height: 11px; width: 11px; } .table-wrapper::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track, .table-container::-webkit-scrollbar-track, .auto-table-scroll::-webkit-scrollbar-track, .overflow-x-auto::-webkit-scrollbar-track, .card:has(> table)::-webkit-scrollbar-track, .neo-block:has(> table)::-webkit-scrollbar-track { background: var(--pro-surface-2); border-radius: 8px; } .table-wrapper::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb, .table-container::-webkit-scrollbar-thumb, .auto-table-scroll::-webkit-scrollbar-thumb, .overflow-x-auto::-webkit-scrollbar-thumb, .card:has(> table)::-webkit-scrollbar-thumb, .neo-block:has(> table)::-webkit-scrollbar-thumb { background: var(--pro-accent); border-radius: 8px; border: 2px solid var(--pro-surface-2); } /* ◀ ▶ scroll buttons injected by theme.js above every wide table */ .table-scroll-controls { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0 0 8px; } .table-scroll-controls .tsc-hint { font-size: 11.5px; color: var(--pro-muted); margin-inline-end: 6px; } .tsc-btn { width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px !important; border: 1.5px solid color-mix(in srgb, var(--pro-accent) 55%, transparent) !important; background: var(--neo-card, var(--pro-surface)) !important; color: var(--pro-accent) !important; font-size: 13px; cursor: pointer; } .tsc-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--pro-accent) 15%, var(--neo-card, var(--pro-surface))) !important; border-color: var(--pro-accent) !important; } .tsc-btn:disabled { opacity: .3; cursor: default; transform: none !important; box-shadow: none !important; } html.dark .bg-white, html[data-theme="dark"] .bg-white { box-shadow: var(--pro-shadow); }