/* ===================================================================== MkufunziPOS admin theme tokens + dark mode --------------------------------------------------------------------- Hand-written CSS (no Tailwind build needed). Loaded after app.css. Dark mode is opt-in via [data-theme="dark"] on (set by the inline init script in app.blade.php). The per-tenant accent skin (skin-{theme_color} + tw-bg-{color}-800 header/sidebar) is left untouched, so the brand colour still drives header/sidebar in BOTH light and dark modes. Palette and semantic tokens are defined once in :root (and remapped under [data-theme="dark"]); selectors below reference the tokens via var() so a colour change is a single edit. ===================================================================== */ :root { /* Emerald accent (matches the landing brand) */ --brand-300: #6ee7b7; --brand-500: #10b981; --brand-600: #047857; /* Semantic tokens — light */ --mku-paper: #f4f5f2; /* warm page surface */ --mku-surface: #ffffff; /* cards / boxes */ --mku-line: #e7e6df; --mku-text-1: #0b1120; /* primary text */ --mku-text-2: #3a4256; /* secondary text */ --mku-text-3: #5e6470; /* muted (table headers, captions) — AA on white + paper */ --mku-radius: 12px; /* cards / boxes */ --mku-radius-sm: 8px; /* inputs / buttons */ --mku-shadow: 0 1px 2px rgba(11, 17, 32, .04), 0 12px 28px -18px rgba(4, 120, 87, .18); /* Status text colours (WCAG AA on white + warm paper) */ --mku-success: #1b7a54; --mku-danger: #c33d3d; --mku-warning: #92671d; --mku-info: #2c7299; } /* ===================================================================== TENANT ACCENT (driven by --accent-* injected per-request in app.blade.php from the business theme_color: a preset name OR an arbitrary hex). Applies in BOTH light and dark modes. ===================================================================== */ /* Chrome (header/sidebar) — replaces the old tw-from-{color}-800 conditionals. NOTE: these three set background with !important and are NOT composable with each other (don't put two on one element). They sit on the dark --accent-800/900 shades, so white text is always readable on them. */ .mku-accent-grad { background-image: linear-gradient(to right, var(--accent-800), var(--accent-900)) !important; } .mku-accent-bg { background-color: var(--accent-800) !important; } .mku-accent-btn { background-color: var(--accent-800) !important; color: #fff; } .mku-accent-btn:hover, .mku-accent-btn:focus { background-color: var(--accent-700) !important; color: #fff; } /* Make Bootstrap "primary" components accent-aware in one place (the admin has ~279 .btn-primary that were hardcoded Bootstrap blue) */ .btn-primary { background-color: var(--accent-600); border-color: var(--accent-700); color: var(--accent-on, #fff); /* contrasts the chosen accent (a11y) */ } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: var(--accent-700); border-color: var(--accent-800); color: var(--accent-on, #fff); } .btn-primary.disabled, .btn-primary[disabled] { background-color: var(--accent-500); border-color: var(--accent-500); } .btn-outline-primary, .btn-primary.btn-outline { color: var(--accent-600); border-color: var(--accent-600); background: transparent; } .bg-primary { background-color: var(--accent-600) !important; color: var(--accent-on, #fff); } .text-primary { color: var(--accent-600) !important; } .label-primary, .badge-primary { background-color: var(--accent-600); color: var(--accent-on, #fff); } .nav-tabs > li.active > a:focus, .nav-pills > li.active > a { background-color: var(--accent-600); color: var(--accent-on, #fff); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background-color: var(--accent-600); border-color: var(--accent-600); color: var(--accent-on, #fff); } .progress-bar { background-color: var(--accent-600); } a.text-primary:hover { color: var(--accent-700) !important; } /* ---------- Light-mode refinement (visible without toggling) ---------- */ html:not([data-theme="dark"]) body:not(.lockscreen) { background-color: var(--mku-paper); } /* ---------- Dark-mode toggle icon swap ---------- */ .theme-icon-dark { display: none; } html[data-theme="dark"] .theme-icon-light { display: none; } html[data-theme="dark"] .theme-icon-dark { display: inline-block; } /* ===================================================================== DARK MODE — remap the semantic tokens, then apply via var() ===================================================================== */ html[data-theme="dark"] { --mku-paper: #0b1120; /* page background */ --mku-surface: #141b2d; /* cards / boxes / menus */ --mku-surface-2: #0f1729; /* sunken areas (gray-100 fills) */ --mku-field: #1a2236; /* inputs / pills */ --mku-line: #272e3f; --mku-text-1: #e7e9ee; --mku-text-strong: #dfe2e8; --mku-text-2: #c8cdd8; --mku-text-3: #a7adbe; --mku-text-muted: #8b93a7; --mku-success: #34d399; --mku-danger: #f87171; --mku-warning: #fbbf24; --mku-info: #38bdf8; color-scheme: dark; } html[data-theme="dark"] body { background-color: var(--mku-paper) !important; color: var(--mku-text-1); } /* Tailwind utility surfaces used throughout the custom shell */ html[data-theme="dark"] .tw-bg-white { background-color: var(--mku-surface) !important; } html[data-theme="dark"] .tw-bg-gray-50, html[data-theme="dark"] .tw-bg-gray-100, html[data-theme="dark"] .tw-bg-gray-200 { background-color: var(--mku-surface-2) !important; } html[data-theme="dark"] .tw-text-gray-900 { color: var(--mku-text-1) !important; } html[data-theme="dark"] .tw-text-gray-800 { color: var(--mku-text-strong) !important; } html[data-theme="dark"] .tw-text-gray-700 { color: var(--mku-text-2) !important; } html[data-theme="dark"] .tw-text-gray-600, html[data-theme="dark"] .tw-text-gray-500 { color: var(--mku-text-3) !important; } html[data-theme="dark"] .tw-border-gray-100, html[data-theme="dark"] .tw-border-gray-200, html[data-theme="dark"] .tw-border-gray-300, html[data-theme="dark"] .tw-ring-gray-200 { border-color: var(--mku-line) !important; } html[data-theme="dark"] .tw-divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--mku-line) !important; } /* Legacy Bootstrap / AdminLTE surfaces (reports, modals, forms, tables) */ html[data-theme="dark"] .box, html[data-theme="dark"] .panel, html[data-theme="dark"] .well, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu { background-color: var(--mku-surface) !important; color: var(--mku-text-1); border-color: var(--mku-line) !important; } html[data-theme="dark"] .box-header, html[data-theme="dark"] .box-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .panel-heading { border-color: var(--mku-line) !important; color: var(--mku-text-1); } html[data-theme="dark"] .box-title, html[data-theme="dark"] .modal-title, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--mku-text-1); } /* Tables */ html[data-theme="dark"] .table { color: var(--mku-text-strong); } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tbody > tr > th, html[data-theme="dark"] .table > tfoot > tr > td { border-color: var(--mku-line) !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); } html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(255, 255, 255, .05); } html[data-theme="dark"] table.dataTable thead th { border-color: var(--mku-line) !important; } /* Forms */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .input-group-addon, html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-dropdown { background-color: var(--mku-field) !important; border-color: var(--mku-line) !important; color: var(--mku-text-1) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--mku-text-muted); } html[data-theme="dark"] .input-group-addon { color: var(--mku-text-3) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--brand-600); } /* Buttons (neutral default only; accent buttons keep their colour) */ html[data-theme="dark"] .btn-default { background-color: var(--mku-field); border-color: #39415a; color: var(--mku-text-strong); } html[data-theme="dark"] .btn-default:hover { background-color: #222b41; color: #fff; } /* Tabs */ html[data-theme="dark"] .nav-tabs { border-color: var(--mku-line); } html[data-theme="dark"] .nav-tabs > li > a { color: var(--mku-text-3); } html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover, html[data-theme="dark"] .nav-tabs > li.active > a:focus { background-color: var(--mku-surface); border-color: var(--mku-line) var(--mku-line) transparent; color: var(--mku-text-1); } /* Pagination */ html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background-color: var(--mku-field); border-color: var(--mku-line); color: var(--mku-text-2); } html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span { background-color: var(--brand-600); border-color: var(--brand-600); color: #fff; } /* Misc */ html[data-theme="dark"] .text-muted { color: var(--mku-text-muted) !important; } html[data-theme="dark"] hr { border-color: var(--mku-line); } html[data-theme="dark"] .close { color: var(--mku-text-1); opacity: .7; text-shadow: none; } html[data-theme="dark"] code { background-color: var(--mku-field); color: var(--brand-300); } /* ===================================================================== Phase 2 — legacy Bootstrap named colors, tint badges, POS surfaces ===================================================================== */ /* Neutral grays used as surfaces/footers (DataTables totals, disabled panels) */ html[data-theme="dark"] .bg-gray, html[data-theme="dark"] .bg-light-gray, html[data-theme="dark"] .bg-gray-light { background-color: var(--mku-surface-2) !important; color: var(--mku-text-2) !important; } /* Plain Bootstrap white bg (POS buttons/cards use .bg-white, distinct from .tw-bg-white) */ html[data-theme="dark"] .bg-white { background-color: var(--mku-surface) !important; color: var(--mku-text-1); } /* Status text — lightened for contrast on dark surfaces */ /* .text-* status colours are tokenised (--mku-success/-danger/-warning/-info) in the premium-polish section; the dark :root remap covers dark mode + the legacy aliases. */ /* Panels / modal body / backdrop */ html[data-theme="dark"] .panel-body { background-color: var(--mku-surface); } html[data-theme="dark"] .modal-body { background-color: var(--mku-surface); color: var(--mku-text-1); } html[data-theme="dark"] .modal-backdrop.in { opacity: .7; } /* Bootstrap labels/badges keep their saturated fill; force readable text */ html[data-theme="dark"] .label, html[data-theme="dark"] .badge { color: #fff; } /* Dashboard icon badges (Tailwind -100 tints) — translucent so they don't glow on dark */ html[data-theme="dark"] .tw-bg-sky-100 { background-color: rgba(56, 189, 248, .14) !important; } html[data-theme="dark"] .tw-bg-green-100 { background-color: rgba(16, 185, 129, .14) !important; } html[data-theme="dark"] .tw-bg-blue-100 { background-color: rgba(59, 130, 246, .14) !important; } html[data-theme="dark"] .tw-bg-yellow-100 { background-color: rgba(234, 179, 8, .16) !important; } html[data-theme="dark"] .tw-bg-red-100 { background-color: rgba(239, 68, 68, .14) !important; } html[data-theme="dark"] .tw-bg-orange-100 { background-color: rgba(249, 115, 22, .14) !important; } html[data-theme="dark"] .tw-bg-purple-100 { background-color: rgba(168, 85, 247, .14) !important; } html[data-theme="dark"] .tw-bg-cyan-100 { background-color: rgba(6, 182, 212, .14) !important; } html[data-theme="dark"] .tw-bg-indigo-100 { background-color: rgba(99, 102, 241, .14) !important; } /* Tailwind hover-gray (notification dropdown, list rows) */ html[data-theme="dark"] .hover\:tw-bg-gray-100:hover, html[data-theme="dark"] .hover\:tw-bg-gray-50:hover { background-color: rgba(255, 255, 255, .06) !important; } /* Sidebar treeview active/hover state */ html[data-theme="dark"] .side-bar .active > a, html[data-theme="dark"] .side-bar a:hover { background-color: rgba(255, 255, 255, .05); } /* ===================================================================== Phase 5 — interaction polish (Emil), applies in both modes ===================================================================== */ /* Buttons: instant press feedback + accent focus ring */ .btn { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; } /* Inputs: accent focus ring (replaces Bootstrap blue glow). --accent-100 is a server-computed solid fallback for browsers without color-mix(). */ .form-control:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 22%, transparent); } /* Modals: ease-out entrance + subtle backdrop blur */ .modal.fade .modal-dialog { transition: transform .22s cubic-bezier(0.23, 1, 0.32, 1), opacity .22s ease; transform: translateY(-12px) scale(.985); } .modal.in .modal-dialog { transform: none; } .modal-backdrop.in { backdrop-filter: blur(2px); } /* Tables: smooth row hover */ .table > tbody > tr { transition: background-color .12s ease; } /* Skeleton shimmer (apply .mku-skeleton to placeholder elements) */ @keyframes mku-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .mku-skeleton { background: var(--mku-line); /* solid fallback (no color-mix) */ background: linear-gradient(90deg, var(--mku-line) 25%, color-mix(in srgb, var(--mku-line) 55%, #fff) 37%, var(--mku-line) 63%); background-size: 800px 100%; animation: mku-shimmer 1.4s infinite linear; border-radius: 8px; color: transparent !important; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } .modal.fade .modal-dialog { transition: none; transform: none; } .mku-skeleton { animation: none; } .table > tbody > tr { transition: none; } } /* Print: never carry dark-mode surfaces onto paper (receipts/invoices use .bg-white). The dark .bg-white override is more specific than Bootstrap's print reset, so force it back. */ @media print { html[data-theme="dark"] body, html[data-theme="dark"] .box, html[data-theme="dark"] .panel, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .table { background-color: #fff !important; color: #000 !important; } html[data-theme="dark"] .bg-gray, html[data-theme="dark"] .bg-light-gray { background-color: #f5f5f5 !important; color: #000 !important; } } /* ===================================================================== PREMIUM POLISH (build-free; Stripe/QuickBooks-grade restraint) Typography unify + scale, tabular numerals, neutral palette, refined tables/forms/surfaces. Applies in both light and dark via tokens. ===================================================================== */ /* ---- 1. Typography: one face across legacy (Source Sans Pro) + Tailwind (Inter) ---- */ body, .box, .content, .content-header, .form-control, .btn, .table, .modal, .dropdown-menu, .nav-tabs, .dataTables_wrapper, .select2-container { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings: controlled weight + slight negative tracking (never 800) */ .content-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; color: var(--mku-text-1); } .content-header h1 small { font-weight: 400; color: var(--mku-text-3); letter-spacing: 0; } .box-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; } h1, h2, h3, h4 { letter-spacing: -0.01em; } /* ---- 2. Numerals: align money like a ledger (the QuickBooks signature) ---- */ .table td, .table th, .display_currency, .input_number, .align-right, .ws-nowrap, .box .pull-right { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .align-right, .ws-nowrap, .display_currency.pull-right { text-align: right; } /* tfoot totals read as totals */ .table > tfoot > tr > td, .table > tfoot > tr > th { font-weight: 600; background-color: var(--mku-paper); border-top: 2px solid var(--mku-line); } /* ---- 3. Palette neutralization: the tenant accent stays the only saturated colour ---- */ /* Badges/labels keep white text except warning (amber needs ink for AA) */ .label-success, .badge-success { background-color: #1b7a54; } .label-danger, .badge-danger { background-color: #c33d3d; } .label-warning, .badge-warning { background-color: #c98a2b; color: #0b1120; } .label-info, .badge-info { background-color: #2f7da6; } .label-default, .badge-default { background-color: #6b7280; } /* Status text via tokens (AA in light + dark, covers legacy .text-{green,red,yellow,aqua} aliases) */ .text-green, .text-success { color: var(--mku-success) !important; } .text-red, .text-danger { color: var(--mku-danger) !important; } .text-yellow, .text-warning { color: var(--mku-warning) !important; } .text-aqua, .text-info { color: var(--mku-info) !important; } /* Dashboard small-box tiles: softened but kept AA for the white label text */ .small-box.bg-green { background-color: #238055 !important; } .small-box.bg-aqua { background-color: #2a7796 !important; } .small-box.bg-yellow { background-color: #92671d !important; } .small-box.bg-red { background-color: #c33d3d !important; } .small-box.bg-blue { background-color: #3a6ea8 !important; } .small-box.bg-purple { background-color: #6b5aa6 !important; } .small-box > .small-box-footer { color: #fff; } /* full opacity for AA on the tile */ /* ---- 4. Tables: refined headers, hairline gridlines, balanced rows ---- */ .table > thead > tr > th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mku-text-3); background-color: transparent; padding: 7px 9px; border-bottom: 2px solid var(--mku-line) !important; } /* Hairline gridlines (recolour only — never change the box model, so DataTables column-width measurement stays correct) */ .table, .table-bordered, .table > tbody > tr > td, .table > tbody > tr > th, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th { border-color: var(--mku-line) !important; } /* Denser rows for wide CRUD tables (dialled back from the airy first pass so 10+ column tables fit). Header + body share 9px horizontal so DataTables column widths stay aligned. */ .table > tbody > tr > td, .table > tbody > tr > th { padding: 6px 9px; vertical-align: middle; font-size: 0.8125rem; } /* near-invisible zebra (light only; dark stripes handled above) */ html:not([data-theme="dark"]) .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(11, 17, 32, .015); } /* subtle accent-tinted row hover (light only; dark keeps its neutral white-tint hover) */ html:not([data-theme="dark"]) .table-hover > tbody > tr:hover > td { background-color: color-mix(in srgb, var(--accent-600) 6%, transparent); } /* DataTables chrome: quiet + consistent */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--mku-text-2); font-size: .82rem; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--mku-line); border-radius: var(--mku-radius-sm); padding: 4px 8px; } .dt-buttons > a.dt-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .8rem; font-weight: 500; color: var(--mku-text-2); background: var(--mku-surface); border: 1px solid var(--mku-line); border-radius: var(--mku-radius-sm); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .dt-buttons > a.dt-button:hover { border-color: var(--accent-500); color: var(--accent-600); background: color-mix(in srgb, var(--accent-600) 6%, var(--mku-surface)); } /* ---- 5. Forms: refined inputs + labels ---- */ .form-control { height: 38px; border-radius: var(--mku-radius-sm); border-color: var(--mku-line); color: var(--mku-text-1); transition: border-color .15s ease, box-shadow .15s ease; } textarea.form-control { height: auto; } .form-group > label, label.control-label { font-size: .8125rem; font-weight: 600; color: var(--mku-text-2); margin-bottom: 6px; } .input-group-addon { border-radius: var(--mku-radius-sm); border-color: var(--mku-line); background: var(--mku-paper); } /* Select2 single: match input height/radius */ .select2-container--default .select2-selection--single { height: 38px; border-radius: var(--mku-radius-sm); border-color: var(--mku-line); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } /* ---- 6. Surfaces: hairlines + soft shadow + one radius ---- */ .box, .panel, .modal-content { border-radius: var(--mku-radius); border: 1px solid var(--mku-line); box-shadow: var(--mku-shadow); } .box-header, .box-footer, .panel-heading { border-color: var(--mku-line); } .well, .callout { border-radius: var(--mku-radius); } /* ---- 7. Buttons: consistent radius, flatter neutral default ---- */ .btn { border-radius: var(--mku-radius-sm); font-weight: 500; } .btn-default { background-color: var(--mku-surface); border-color: var(--mku-line); color: var(--mku-text-2); } .btn-default:hover, .btn-default:focus { background-color: var(--mku-paper); border-color: var(--mku-line); color: var(--mku-text-1); } .btn-group > .btn:first-child { border-top-left-radius: var(--mku-radius-sm); border-bottom-left-radius: var(--mku-radius-sm); } .btn-group > .btn:last-child { border-top-right-radius: var(--mku-radius-sm); border-bottom-right-radius: var(--mku-radius-sm); } .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; } /* Print: keep the muted table headers legible on paper */ @media print { .table > thead > tr > th { color: #000; } } /* ===================================================================== POS CHROME FIXES ===================================================================== */ /* Tie prominent POS buttons (Category/Brands/Recent/date pill) to the ONE tenant accent — replaces the loud purple/indigo gradients. */ .mku-accent-solid { background-color: var(--accent-600) !important; background-image: none !important; color: var(--accent-on, #fff) !important; } .mku-accent-solid:hover, .mku-accent-solid:focus { background-color: var(--accent-700) !important; } /* Toast must never cover the fixed top toolbar (it was hiding "Add Expense"). Push the container below the header; POS (body.lockscreen) header is taller. */ #toast-container.toast-top-right, #toast-container.toast-top-center { top: 74px; } body.lockscreen #toast-container.toast-top-right, body.lockscreen #toast-container.toast-top-center { top: 96px; } /* Wide CRUD tables must scroll horizontally, never clip the ACTION column. Matches the .table-responsive pattern already used by most list views, but applies to every DataTable so a missing wrapper can't hide columns off-screen. */ div.dataTables_wrapper { overflow-x: auto; } /* "+ Add" / action buttons across modules use the legacy indigo->blue gradient. Neutralise to the ONE tenant accent everywhere, no per-view edits. */ .tw-dw-btn.tw-from-indigo-600, .tw-dw-btn.tw-to-blue-500 { background-image: none !important; background-color: var(--accent-600) !important; color: var(--accent-on, #fff) !important; } .tw-dw-btn.tw-from-indigo-600:hover, .tw-dw-btn.tw-from-indigo-600:focus, .tw-dw-btn.tw-to-blue-500:hover { background-color: var(--accent-700) !important; }