/* * InventiPro POS — Dark Theme * =========================== * Apply by setting: * Remove by setting: (or removing the attribute) * * This file uses CSS attribute selectors so it can coexist with the main * stylesheet. Include it after your main CSS: * */ /* ══════════════════════════════════════════════════════════════════ CSS CUSTOM PROPERTY OVERRIDES All dark-mode values cascade from here into every component. ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Core palette */ --bg-body: #0f1117; --bg-page: #0f1117; --bg-card: #1a1d27; --bg-card-alt: #1e2130; --bg-sidebar: #0d1117; --bg-header: #0d1117; --bg-input: #252836; --bg-input-focus: #2d3147; --bg-hover: #252836; --bg-stripe: rgba(255,255,255,.025); --bg-overlay: rgba(0,0,0,.65); /* Text */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --text-disabled: #475569; --text-inverse: #0f1117; --text-on-primary: #ffffff; /* Borders */ --border-color: #2d3748; --border-subtle: #1e2a3a; --border-focus: #3b82f6; /* Brand / primary (unchanged hue, keep legibility) */ --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: rgba(59,130,246,.15); /* Status colors — adjusted for dark backgrounds */ --success: #22c55e; --success-bg: rgba(34,197,94,.12); --success-border: rgba(34,197,94,.25); --warning: #f59e0b; --warning-bg: rgba(245,158,11,.12); --warning-border: rgba(245,158,11,.25); --danger: #f87171; --danger-bg: rgba(248,113,113,.12); --danger-border: rgba(248,113,113,.25); --info: #38bdf8; --info-bg: rgba(56,189,248,.12); --info-border: rgba(56,189,248,.25); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 16px rgba(0,0,0,.5); --shadow-lg: 0 8px 32px rgba(0,0,0,.65); --shadow-inset: inset 0 1px 3px rgba(0,0,0,.4); /* Scrollbar */ --scrollbar-track: #1a1d27; --scrollbar-thumb: #374151; /* Chart / data vis colors remain vivid */ --chart-1: #3b82f6; --chart-2: #22c55e; --chart-3: #f59e0b; --chart-4: #a855f7; --chart-5: #f87171; } /* ══════════════════════════════════════════════════════════════════ BASE / PAGE ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] body, [data-theme="dark"] html { background-color: var(--bg-body); color: var(--text-primary); color-scheme: dark; } [data-theme="dark"] ::selection { background: rgba(59,130,246,.35); color: #e2e8f0; } /* ══════════════════════════════════════════════════════════════════ SCROLLBAR (Webkit) ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] ::-webkit-scrollbar { width: 7px; height: 7px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4b5563; } /* ══════════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .sidebar, [data-theme="dark"] .side-nav, [data-theme="dark"] nav.sidebar { background-color: var(--bg-sidebar) !important; border-right-color: var(--border-color) !important; } [data-theme="dark"] .sidebar .nav-item, [data-theme="dark"] .side-nav .nav-item { color: #94a3b8; } [data-theme="dark"] .sidebar .nav-item:hover, [data-theme="dark"] .side-nav .nav-item:hover { background-color: rgba(255,255,255,.06); color: var(--text-primary); } [data-theme="dark"] .sidebar .nav-item.active, [data-theme="dark"] .side-nav .nav-item.active { background-color: rgba(59,130,246,.18); color: var(--primary); } [data-theme="dark"] .sidebar .nav-section-title { color: var(--text-muted); } [data-theme="dark"] .sidebar-logo, [data-theme="dark"] .brand-logo { /* keep green badge colour */ } /* ══════════════════════════════════════════════════════════════════ HEADER / TOP BAR ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .header, [data-theme="dark"] .top-bar, [data-theme="dark"] header.app-header { background-color: var(--bg-header) !important; border-bottom-color: var(--border-color) !important; box-shadow: 0 1px 0 var(--border-color); } [data-theme="dark"] .header .search-input, [data-theme="dark"] .top-bar .search-bar input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .header .user-name { color: var(--text-primary); } [data-theme="dark"] .header .user-role, [data-theme="dark"] .header .store-name { color: var(--text-secondary); } /* ══════════════════════════════════════════════════════════════════ CARDS & PANELS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .widget, [data-theme="dark"] .content-card, [data-theme="dark"] .data-card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow); } [data-theme="dark"] .card-header, [data-theme="dark"] .panel-header { background-color: var(--bg-card-alt) !important; border-bottom-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .card-title, [data-theme="dark"] .panel-title, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-primary); } [data-theme="dark"] p, [data-theme="dark"] label, [data-theme="dark"] span:not([class*="badge"]):not([class*="status"]) { color: inherit; } /* ══════════════════════════════════════════════════════════════════ KPI STAT CARDS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .kpi-card, [data-theme="dark"] .stat-card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .kpi-card.revenue, [data-theme="dark"] .stat-card.revenue { background: linear-gradient(135deg, #1a2a1a 0%, #1e2d1e 100%) !important; border-color: rgba(34,197,94,.2) !important; } [data-theme="dark"] .kpi-card.sales, [data-theme="dark"] .stat-card.sales { background: linear-gradient(135deg, #1a1f2e 0%, #1e2438 100%) !important; border-color: rgba(59,130,246,.2) !important; } [data-theme="dark"] .kpi-card.customers, [data-theme="dark"] .stat-card.customers { background: linear-gradient(135deg, #2a1a2a 0%, #2d1e30 100%) !important; border-color: rgba(168,85,247,.2) !important; } [data-theme="dark"] .kpi-card.orders, [data-theme="dark"] .kpi-card.invoices, [data-theme="dark"] .stat-card.orders { background: linear-gradient(135deg, #1a2228 0%, #1e2730 100%) !important; border-color: rgba(245,158,11,.2) !important; } [data-theme="dark"] .kpi-icon { opacity: .9; } [data-theme="dark"] .kpi-value, [data-theme="dark"] .stat-value { color: var(--text-primary) !important; } [data-theme="dark"] .kpi-label, [data-theme="dark"] .stat-label { color: var(--text-secondary) !important; } [data-theme="dark"] .kpi-growth.positive, [data-theme="dark"] .growth-positive { color: var(--success) !important; } [data-theme="dark"] .kpi-growth.negative, [data-theme="dark"] .growth-negative { color: var(--danger) !important; } /* ══════════════════════════════════════════════════════════════════ TABLES ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] table, [data-theme="dark"] .data-table { background-color: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] thead, [data-theme="dark"] .table-header { background-color: var(--bg-card-alt) !important; } [data-theme="dark"] th { background-color: var(--bg-card-alt) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] td { border-color: var(--border-color) !important; color: var(--text-primary); } [data-theme="dark"] tr { background-color: var(--bg-card); } [data-theme="dark"] tbody tr:nth-child(even), [data-theme="dark"] .table-row.even { background-color: var(--bg-stripe) !important; } [data-theme="dark"] tbody tr:hover, [data-theme="dark"] .table-row:hover { background-color: var(--bg-hover) !important; } /* ══════════════════════════════════════════════════════════════════ FORM INPUTS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { background-color: var(--bg-input-focus) !important; border-color: var(--border-focus) !important; box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important; outline: none; } [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { accent-color: var(--primary); } [data-theme="dark"] select option { background-color: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .form-label, [data-theme="dark"] label { color: var(--text-secondary); } [data-theme="dark"] .input-icon, [data-theme="dark"] .input-wrap .icon { color: var(--text-muted) !important; } [data-theme="dark"] .form-group .field-error { color: var(--danger) !important; } /* ══════════════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .btn-primary { background-color: var(--primary) !important; color: #fff !important; } [data-theme="dark"] .btn-primary:hover { background-color: var(--primary-dark) !important; } [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline { background-color: transparent !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-outline:hover { background-color: var(--bg-hover) !important; } [data-theme="dark"] .btn-ghost { background: transparent !important; color: var(--text-secondary) !important; } [data-theme="dark"] .btn-ghost:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .btn-danger { background-color: #b91c1c !important; color: #fff !important; } [data-theme="dark"] .btn-danger:hover { background-color: #991b1b !important; } [data-theme="dark"] .btn-success { background-color: #16a34a !important; color: #fff !important; } [data-theme="dark"] .btn-success:hover { background-color: #15803d !important; } [data-theme="dark"] button:disabled, [data-theme="dark"] .btn:disabled { opacity: .45 !important; cursor: not-allowed !important; } /* ══════════════════════════════════════════════════════════════════ BADGES & STATUS CHIPS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .badge-paid, [data-theme="dark"] .status-paid, [data-theme="dark"] .badge-active, [data-theme="dark"] .status-active, [data-theme="dark"] .badge-completed, [data-theme="dark"] .status-completed { background-color: rgba(34,197,94,.15) !important; color: #4ade80 !important; border-color: rgba(34,197,94,.25) !important; } [data-theme="dark"] .badge-pending, [data-theme="dark"] .status-pending { background-color: rgba(245,158,11,.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.25) !important; } [data-theme="dark"] .badge-overdue, [data-theme="dark"] .status-overdue, [data-theme="dark"] .badge-out_of_stock, [data-theme="dark"] .status-out_of_stock { background-color: rgba(248,113,113,.15) !important; color: #f87171 !important; border-color: rgba(248,113,113,.25) !important; } [data-theme="dark"] .badge-low_stock, [data-theme="dark"] .status-low_stock, [data-theme="dark"] .badge-warning, [data-theme="dark"] .status-warning { background-color: rgba(251,146,60,.15) !important; color: #fb923c !important; border-color: rgba(251,146,60,.25) !important; } [data-theme="dark"] .badge-inactive, [data-theme="dark"] .status-inactive { background-color: rgba(148,163,184,.12) !important; color: #94a3b8 !important; border-color: rgba(148,163,184,.2) !important; } [data-theme="dark"] .badge-info, [data-theme="dark"] .status-info { background-color: rgba(56,189,248,.15) !important; color: #38bdf8 !important; border-color: rgba(56,189,248,.25) !important; } /* ══════════════════════════════════════════════════════════════════ ALERTS & NOTIFICATIONS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .alert-success { background-color: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.25) !important; color: #4ade80 !important; } [data-theme="dark"] .alert-error, [data-theme="dark"] .alert-danger { background-color: rgba(248,113,113,.1) !important; border-color: rgba(248,113,113,.25) !important; color: #f87171 !important; } [data-theme="dark"] .alert-warning { background-color: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; color: #fbbf24 !important; } [data-theme="dark"] .alert-info { background-color: rgba(56,189,248,.1) !important; border-color: rgba(56,189,248,.25) !important; color: #38bdf8 !important; } /* ══════════════════════════════════════════════════════════════════ MODALS & DIALOGS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .modal, [data-theme="dark"] .dialog, [data-theme="dark"] .modal-content { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .dialog-header { background-color: var(--bg-card-alt) !important; border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .modal-footer, [data-theme="dark"] .dialog-footer { background-color: var(--bg-card-alt) !important; border-top-color: var(--border-color) !important; } [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .overlay { background-color: var(--bg-overlay) !important; } /* ══════════════════════════════════════════════════════════════════ DROPDOWNS & MENUS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .context-menu, [data-theme="dark"] .popup-menu { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-lg) !important; } [data-theme="dark"] .dropdown-item, [data-theme="dark"] .menu-item { color: var(--text-primary) !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .menu-item:hover { background-color: var(--bg-hover) !important; } [data-theme="dark"] .dropdown-divider, [data-theme="dark"] .menu-divider { border-color: var(--border-color) !important; } /* ══════════════════════════════════════════════════════════════════ TABS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .tabs, [data-theme="dark"] .tab-list { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .tab-btn, [data-theme="dark"] .tab-item { color: var(--text-muted) !important; background: transparent !important; } [data-theme="dark"] .tab-btn:hover, [data-theme="dark"] .tab-item:hover { color: var(--text-secondary) !important; } [data-theme="dark"] .tab-btn.active, [data-theme="dark"] .tab-item.active { color: var(--primary) !important; } [data-theme="dark"] .tab-panel, [data-theme="dark"] .tab-content { color: var(--text-primary); } /* ══════════════════════════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .pagination .page-btn, [data-theme="dark"] .pagination .page-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .pagination .page-btn:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .pagination .page-btn.active { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } [data-theme="dark"] .pagination .page-btn:disabled { opacity: .4 !important; } /* ══════════════════════════════════════════════════════════════════ TOOLTIP ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .tooltip, [data-theme="dark"] [data-tooltip]::after { background-color: #374151 !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* ══════════════════════════════════════════════════════════════════ SEARCH BAR ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .search-bar, [data-theme="dark"] .search-box { background-color: var(--bg-input) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .search-bar input, [data-theme="dark"] .search-box input { background: transparent !important; color: var(--text-primary) !important; } [data-theme="dark"] .search-bar .search-icon, [data-theme="dark"] .search-box .search-icon { color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════════════ CHARTS (canvas-based, apply background to wrapper) ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .chart-container, [data-theme="dark"] .chart-wrapper { background-color: var(--bg-card) !important; } [data-theme="dark"] .chart-legend-label { color: var(--text-secondary) !important; } /* ══════════════════════════════════════════════════════════════════ PROGRESS BARS ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .progress-bar, [data-theme="dark"] progress { background-color: var(--border-color) !important; } [data-theme="dark"] .progress-fill, [data-theme="dark"] progress::-webkit-progress-bar { background-color: var(--border-color) !important; } [data-theme="dark"] progress::-webkit-progress-value { background-color: var(--primary) !important; } /* ══════════════════════════════════════════════════════════════════ BREADCRUMB ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .breadcrumb { color: var(--text-muted) !important; } [data-theme="dark"] .breadcrumb-item.active { color: var(--text-primary) !important; } [data-theme="dark"] .breadcrumb-sep { color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════════════ MISC UTILITIES ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] hr, [data-theme="dark"] .divider { border-color: var(--border-color) !important; } [data-theme="dark"] .text-muted, [data-theme="dark"] .secondary-text { color: var(--text-muted) !important; } [data-theme="dark"] .text-primary-color { color: var(--text-primary) !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--bg-card) !important; } [data-theme="dark"] .border, [data-theme="dark"] .bordered { border-color: var(--border-color) !important; } [data-theme="dark"] .shadow { box-shadow: var(--shadow) !important; } [data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm) !important; } /* ══════════════════════════════════════════════════════════════════ DEMO HINT (login page specific) ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .demo-hint { background-color: rgba(56,189,248,.08) !important; border-color: rgba(56,189,248,.2) !important; color: #38bdf8 !important; } [data-theme="dark"] .demo-hint code { background: rgba(56,189,248,.12) !important; color: #7dd3fc !important; } /* ══════════════════════════════════════════════════════════════════ FORGOT PASSWORD SECTION ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .forgot-section { background-color: var(--bg-card-alt) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .forgot-section p { color: var(--text-secondary) !important; } /* ══════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (if present in the app) ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .theme-toggle { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .theme-toggle:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }