/* ===================================================================== KARIBU BUILDERS CHOICE - THEME SYSTEM Spec section 25. ONE stylesheet. Three themes. Switched by [data-theme] on . HARD RULE: no component below may contain a literal colour. Every colour references a variable. A hardcoded hex is a bug - it will look wrong in two of the three themes. ===================================================================== */ /* --------------------------------------------------------------------- THEME 1: MIDNIGHT AMBER (default) Sampled from the client's approved mockup. --------------------------------------------------------------------- */ :root, [data-theme="midnight-amber"] { --bg-page: #14130E; --bg-sidebar: #0B0B0B; --bg-card: #161A1D; --bg-card-alt: #111516; --bg-active: #201A0C; --bg-hover: #1C2024; --bg-input: #0D1112; --accent: #FCB700; --accent-hover: #FFD34D; --accent-muted: #2F2913; --accent-text: #FCB700; --on-accent: #14130E; --text-primary: #FFFFFF; --text-secondary: #A8A9AD; --text-muted: #6B6C70; --border: #26282C; --border-strong: #383A3F; --success: #3FB950; --success-bg: #12261A; --warning: #D29922; --warning-bg: #2A2110; --danger: #F85149; --danger-bg: #2D1517; --info: #58A6FF; --info-bg: #10233A; --chart-line: #E4BD58; --chart-grid: #26282C; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); --radius: 12px; --radius-sm: 8px; color-scheme: dark; } /* --------------------------------------------------------------------- THEME 2: DAYLIGHT AMBER Same identity, light surfaces. Accent is DARKENED because #FCB700 on white measures 1.76:1 and is illegible. Amber here is a FILL colour only. For amber-coloured TEXT use --accent-text (#8A6400, 4.7:1). Never --accent on white. --------------------------------------------------------------------- */ [data-theme="daylight-amber"] { --bg-page: #FAF9F5; --bg-sidebar: #FFFFFF; --bg-card: #FFFFFF; --bg-card-alt: #F4F2EC; --bg-active: #FFF4D6; --bg-hover: #F4F2EC; --bg-input: #FFFFFF; --accent: #E0A400; --accent-hover: #C79000; --accent-muted: #FFF0C2; --accent-text: #8A6400; --on-accent: #1A1A1A; --text-primary: #1A1A1A; --text-secondary: #55565A; --text-muted: #8A8B90; --border: #E2E0D9; --border-strong: #C9C6BC; --success: #1A7F37; --success-bg: #E6F4EA; --warning: #9A6700; --warning-bg: #FFF8E1; --danger: #CF222E; --danger-bg: #FDECEE; --info: #0969DA; --info-bg: #E8F1FC; --chart-line: #E0A400; --chart-grid: #E2E0D9; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow: 0 2px 8px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); --radius: 12px; --radius-sm: 8px; color-scheme: light; } /* --------------------------------------------------------------------- THEME 3: DAYLIGHT BLUE --------------------------------------------------------------------- */ [data-theme="daylight-blue"] { --bg-page: #F6F8FB; --bg-sidebar: #FFFFFF; --bg-card: #FFFFFF; --bg-card-alt: #EEF3F9; --bg-active: #E3EDFB; --bg-hover: #EEF3F9; --bg-input: #FFFFFF; --accent: #1B62C4; --accent-hover: #14509F; --accent-muted: #DCE9F9; --accent-text: #1B62C4; --on-accent: #FFFFFF; --text-primary: #12181F; --text-secondary: #4A5560; --text-muted: #7C8794; --border: #DDE3EB; --border-strong: #C2CBD6; --success: #1A7F37; --success-bg: #E6F4EA; --warning: #9A6700; --warning-bg: #FFF8E1; --danger: #CF222E; --danger-bg: #FDECEE; --info: #0969DA; --info-bg: #E8F1FC; --chart-line: #1B62C4; --chart-grid: #DDE3EB; --shadow-sm: 0 1px 2px rgba(16,32,55,.06); --shadow: 0 2px 8px rgba(16,32,55,.08); --shadow-lg: 0 8px 24px rgba(16,32,55,.12); --radius: 12px; --radius-sm: 8px; color-scheme: light; } /* ===================================================================== BASE ===================================================================== */ * { box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg-page); color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased; } /* Money and quantities MUST use tabular figures so digits align in tables. Non-negotiable for an accounting UI (spec 25.8). */ .money, .qty, td.money, td.qty, .tabular { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } a { color: var(--accent-text); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } hr { border-color: var(--border); opacity: 1; } /* Visible keyboard focus - tellers work fast and often by keyboard */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent-muted); color: var(--text-primary); } /* ===================================================================== LAYOUT ===================================================================== */ .app-shell { display: flex; min-height: 100vh; } /* ---- SIDEBAR ---- */ .sidebar { width: 280px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; transition: transform .2s ease; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; } .brand-mark { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: .5px; flex-shrink: 0; } .brand-text .brand-name { font-size: 20px; font-weight: 800; color: var(--accent-text); line-height: 1.1; letter-spacing: .3px; } .brand-text .brand-sub { font-size: 10px; color: var(--text-secondary); letter-spacing: 1.4px; text-transform: uppercase; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 12px; } .nav-item-link { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 4px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14.5px; font-weight: 500; border-left: 3px solid transparent; transition: background .15s, color .15s; } .nav-item-link i { width: 20px; text-align: center; font-size: 15px; } .nav-item-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .nav-item-link.active { background: var(--bg-active); color: var(--text-primary); border-left-color: var(--accent); font-weight: 600; } .nav-item-link.active i { color: var(--accent); } .nav-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); padding: 16px 14px 6px; font-weight: 700; } .sidebar-footer { margin: 12px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .support-row { display: flex; align-items: center; gap: 12px; } .support-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-muted); color: var(--accent-text); display: grid; place-items: center; flex-shrink: 0; } /* ---- MAIN ---- */ .main-area { flex: 1; margin-left: 280px; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 68px; display: flex; align-items: center; gap: 20px; padding: 0 28px; background: var(--bg-page); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1030; } .page-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--text-primary); } .topbar-search { flex: 1; max-width: 460px; position: relative; } .topbar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .topbar-search input { width: 100%; padding: 9px 14px 9px 40px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; } .topbar-search input::placeholder { color: var(--text-muted); } .topbar-search input:focus { background: var(--bg-input); border-color: var(--border); outline: none; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--text-secondary); display: grid; place-items: center; position: relative; cursor: pointer; } .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .icon-btn .badge-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-page); } .avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 15px; cursor: pointer; border: none; } .page-body { padding: 24px 28px 40px; flex: 1; } /* ===================================================================== CARDS ===================================================================== */ .card-k { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-k-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-k-title { font-size: 16px; font-weight: 600; margin: 0; } .card-k-body { padding: 20px; } /* ---- KPI CARDS ---- */ .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; align-items: center; gap: 18px; height: 100%; } .kpi-icon { width: 62px; height: 62px; border-radius: var(--radius-sm); background: var(--accent-muted); color: var(--accent-text); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; } .kpi-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; margin-bottom: 4px; } .kpi-value { font-size: 27px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text-primary); } .kpi-value .kpi-currency { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-right: 4px; } .kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; } /* ===================================================================== FORMS ===================================================================== */ .form-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .form-control, .form-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; } .form-control:focus, .form-select:focus { background: var(--bg-input); border-color: var(--accent); color: var(--text-primary); box-shadow: 0 0 0 3px var(--accent-muted); outline: none; } .form-control::placeholder { color: var(--text-muted); } .form-control:disabled, .form-control[readonly] { background: var(--bg-card-alt); color: var(--text-muted); } .form-control.money-input { text-align: right; font-variant-numeric: tabular-nums; } .input-group-text { background: var(--bg-card-alt); border-color: var(--border); color: var(--text-secondary); } /* ===================================================================== BUTTONS ===================================================================== */ .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; padding: 9px 18px; } .btn-accent { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); } .btn-accent:hover, .btn-accent:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } .btn-outline-k { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); } .btn-outline-k:hover { background: var(--bg-hover); color: var(--text-primary); } .btn-ghost { background: transparent; border: none; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); } /* POS action buttons need a 44px touch target - hit fast, sometimes with dusty fingers (spec 25.9) */ .btn-pos-action { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card-alt); color: var(--text-secondary); } .btn-pos-action:hover { background: var(--bg-hover); color: var(--text-primary); } .btn-pos-action:disabled { opacity: .4; cursor: not-allowed; } /* ===================================================================== TABLES ===================================================================== */ .table-k { width: 100%; color: var(--text-primary); border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .table-k thead th { background: var(--bg-card-alt); color: var(--text-secondary); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .table-k tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table-k tbody tr:hover { background: var(--bg-hover); } .table-k tbody tr:last-child td { border-bottom: none; } .table-k tfoot td { padding: 12px 14px; font-weight: 700; border-top: 2px solid var(--border-strong); background: var(--bg-card-alt); } /* ===================================================================== BADGES & STATUS Colour is NEVER the only signal - every badge pairs with an icon or text label (spec 25.9, colour-blind staff and poor-gamma monitors). ===================================================================== */ .badge-k { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; line-height: 1.4; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-muted { background: var(--bg-card-alt); color: var(--text-secondary); } .badge-accent { background: var(--accent-muted); color: var(--accent-text); } /* ===================================================================== ALERTS ===================================================================== */ .alert-k { border-radius: var(--radius-sm); border: 1px solid transparent; padding: 13px 16px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; } .alert-k.success { background: var(--success-bg); border-color: var(--success); color: var(--text-primary); } .alert-k.warning { background: var(--warning-bg); border-color: var(--warning); color: var(--text-primary); } .alert-k.danger { background: var(--danger-bg); border-color: var(--danger); color: var(--text-primary); } .alert-k.info { background: var(--info-bg); border-color: var(--info); color: var(--text-primary); } /* ===================================================================== CREDIT LIMIT PROGRESS BAR (spec 11.1) Green -> amber -> red as utilisation climbs. ===================================================================== */ .credit-bar { height: 10px; background: var(--bg-card-alt); border-radius: 6px; overflow: hidden; } .credit-bar-fill { height: 100%; border-radius: 6px; transition: width .3s ease; background: var(--success); } .credit-bar-fill.level-warn { background: var(--warning); } .credit-bar-fill.level-danger { background: var(--danger); } /* ===================================================================== THEME SWATCH PICKER (spec 25.5) Three swatch previews, not a plain dropdown. ===================================================================== */ .theme-swatch-grid { display: flex; gap: 14px; flex-wrap: wrap; } .theme-swatch { width: 130px; border: 2px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; cursor: pointer; background: transparent; transition: border-color .15s, transform .15s; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch.selected { border-color: var(--accent); } .theme-swatch-preview { height: 74px; display: flex; } .theme-swatch-side { width: 34%; } .theme-swatch-main { width: 66%; padding: 8px; } .theme-swatch-bar { height: 8px; border-radius: 3px; margin-bottom: 6px; } .theme-swatch-bar.w60 { width: 60%; } .theme-swatch-bar.w85 { width: 85%; } .theme-swatch-name { padding: 8px; font-size: 12px; font-weight: 600; text-align: center; color: var(--text-primary); background: var(--bg-card); border-top: 1px solid var(--border); } /* Literal colours below are INTENTIONAL - they are miniature previews of the other themes, so they must not follow the active theme. */ .sw-midnight .theme-swatch-side { background: #0B0B0B; } .sw-midnight .theme-swatch-main { background: #14130E; } .sw-midnight .theme-swatch-bar { background: #FCB700; } .sw-midnight .theme-swatch-bar.w85 { background: #2F2913; } .sw-daylight-amber .theme-swatch-side { background: #FFFFFF; } .sw-daylight-amber .theme-swatch-main { background: #FAF9F5; } .sw-daylight-amber .theme-swatch-bar { background: #E0A400; } .sw-daylight-amber .theme-swatch-bar.w85 { background: #E2E0D9; } .sw-daylight-blue .theme-swatch-side { background: #FFFFFF; } .sw-daylight-blue .theme-swatch-main { background: #F6F8FB; } .sw-daylight-blue .theme-swatch-bar { background: #1B62C4; } .sw-daylight-blue .theme-swatch-bar.w85 { background: #DDE3EB; } /* ===================================================================== LOGIN ===================================================================== */ .login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg-page); } .login-card { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-lg); } .login-brand { text-align: center; margin-bottom: 28px; } .login-brand .brand-mark { width: 64px; height: 64px; margin: 0 auto 14px; font-size: 20px; } /* ===================================================================== DROPDOWNS & MODALS (Bootstrap overrides) ===================================================================== */ .dropdown-menu { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; } .dropdown-item { color: var(--text-primary); border-radius: 6px; padding: 9px 12px; font-size: 14px; } .dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover); color: var(--text-primary); } .dropdown-divider { border-color: var(--border); } .dropdown-header { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; } .modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); } .modal-header, .modal-footer { border-color: var(--border); } .btn-close { filter: invert(1) grayscale(1) brightness(2); } [data-theme^="daylight"] .btn-close { filter: none; } /* ===================================================================== EMPTY STATES An empty screen is an invitation to act, not a dead end. ===================================================================== */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); } .empty-state i { font-size: 42px; color: var(--text-muted); margin-bottom: 14px; display: block; } .empty-state h5 { color: var(--text-primary); font-size: 16px; margin-bottom: 6px; } .empty-state p { font-size: 14px; margin-bottom: 18px; } /* ===================================================================== SCROLLBARS ===================================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-page); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .main-area { margin-left: 0; } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; } .topbar { padding: 0 16px; } .page-body { padding: 16px; } .topbar-search { display: none; } } /* ===================================================================== REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ===================================================================== PRINT (spec 25.10) Printed documents MUST NOT inherit the theme. Always black on white. ===================================================================== */ @media print { :root { --bg-page: #FFF; --bg-card: #FFF; --bg-card-alt: #FFF; --bg-sidebar: #FFF; --bg-input: #FFF; --text-primary: #000; --text-secondary: #000; --text-muted: #333; --border: #000; --border-strong: #000; --accent: #000; --accent-text: #000; --on-accent: #FFF; --shadow: none; --shadow-sm: none; --shadow-lg: none; } body { background: #FFF !important; color: #000 !important; font-size: 12px; } .sidebar, .topbar, .no-print, .btn, .sidebar-backdrop { display: none !important; } .main-area { margin-left: 0 !important; } .page-body { padding: 0 !important; } .card-k { border: 1px solid #000 !important; box-shadow: none !important; page-break-inside: avoid; } .table-k thead th { background: #FFF !important; border-bottom: 2px solid #000 !important; } a { color: #000 !important; text-decoration: none !important; } }