/* ========================================================================= Al Hassan web theme system Mirrors lib/themes/app_palette.dart (8 seed colors) and app_theme.dart (14-16px rounded corners, flat/no-shadow surfaces with thin outlines, filled inputs, pill chips) so the web front-end and mobile app feel like one product. How it works: [data-theme-color] on selects one of 8 palettes, [data-theme-mode="dark"] switches to the dark variant of that palette. Everything else in admin/*.blade.php should consume the CSS custom properties below (--surface, --primary, --radius, etc.) rather than hard-coded colors, so new pages automatically follow the active theme. ========================================================================= */ :root { --radius-sm: 10px; --radius: 14px; --radius-lg: 16px; --radius-pill: 999px; --border-width: 1.6px; --font-sans: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ---- Palette seeds (light mode) ---- */ html[data-theme-color="ocean"] { --seed: #2563EB; } html[data-theme-color="emerald"] { --seed: #059669; } html[data-theme-color="indigo"] { --seed: #6D28D9; } html[data-theme-color="amber"] { --seed: #D97706; } html[data-theme-color="rose"] { --seed: #E11D48; } html[data-theme-color="slate"] { --seed: #475569; } html[data-theme-color="teal"] { --seed: #0D9488; } html[data-theme-color="crimson"] { --seed: #B91C1C; } html { --primary: var(--seed, #2563EB); --primary-contrast: #ffffff; --bg: #F3F5F8; --surface: #ffffff; --surface-alt: #F7F8FA; --text: #1B1F27; --text-muted: #616873; --outline: #E1E4EA; --success: #059669; --danger: #DC2626; --warning: #D97706; } /* ---- Dark mode: same seed, dark surfaces ---- */ html[data-theme-mode="dark"] { --primary-contrast: #0E1116; --bg: #14171C; --surface: #1B1F27; --surface-alt: #20242D; --text: #E7E9EE; --text-muted: #9AA1AC; --outline: #2C313B; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); } /* ---- Flat, rounded, outlined "card" surface used across the app ---- */ .ah-card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-lg); padding: 20px; box-shadow: none; } .ah-card + .ah-card { margin-top: 16px; } .ah-page-title { font-weight: 700; font-size: 1.35rem; color: var(--text); margin: 0 0 16px; text-align: left; } /* ---- Buttons: flat, rounded ---- */ .ah-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); border: var(--border-width) solid transparent; padding: 9px 16px; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: filter .15s ease, border-color .15s ease; } .ah-btn:hover { filter: brightness(0.94); text-decoration: none; } /* ---- Dashboard quick-action row: equal-width buttons that wrap on narrow screens ---- */ .ah-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; } .ah-quick-actions .ah-btn { flex: 1 1 110px; justify-content: center; } .ah-btn-primary { background: var(--primary); color: var(--primary-contrast); } .ah-btn-outline { background: transparent; border-color: var(--outline); color: var(--text); } .ah-btn-danger { background: var(--danger); color: #fff; } /* ---- Inputs: filled, borderless until focus ---- */ .ah-field { display: block; width: 100%; background: var(--surface-alt); border: var(--border-width) solid var(--outline); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-size: 0.95rem; } .ah-field:focus { outline: none; border-color: var(--primary); background: var(--surface); } /* ---- Select2 (account/currency pickers): style.default.css (leftover pre-redesign vendor CSS, loaded earlier in css.blade.php) hardcodes the selection box to a white background with a bordered arrow segment via !important — clashes with dark mode and reads as two separate boxes glued together. Overridden here (loaded after it) to match .ah-field. ---- */ .select2-container .select2-selection--single { background-color: var(--surface-alt) !important; color: var(--text) !important; border: var(--border-width) solid var(--outline) !important; border-radius: var(--radius) !important; height: 42px !important; padding: 0 !important; box-sizing: border-box; } .select2-container .select2-selection--single .select2-selection__rendered { color: var(--text) !important; line-height: 40px !important; padding-left: 14px !important; padding-right: 34px !important; } .select2-container .select2-selection--single .select2-selection__arrow { background-color: transparent !important; border-left: none !important; height: 40px !important; top: 0 !important; right: 6px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent !important; } .select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--text-muted) transparent !important; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted) !important; } .select2-dropdown { background: var(--surface) !important; border: var(--border-width) solid var(--outline) !important; color: var(--text) !important; } .select2-search--dropdown .select2-search__field { background: var(--surface-alt) !important; border: var(--border-width) solid var(--outline) !important; color: var(--text) !important; border-radius: var(--radius) !important; } .select2-container--default .select2-results__option { background-color: var(--surface) !important; color: var(--text) !important; } .select2-container--default .select2-results__option--highlighted, .select2-container--default .select2-results__option--selected { background-color: color-mix(in srgb, var(--primary) 18%, transparent) !important; color: var(--text) !important; } /* ---- Toggle switches (Settings: Single Currency, Show Profit Input, ...): a self-contained pill toggle independent of Bootstrap's .form-switch, which was rendering as a plain square checkbox here — likely a CSS specificity/appearance conflict with the legacy vendor stylesheet above. ---- */ .ah-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .ah-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .ah-toggle .ah-toggle-track { width: 44px; height: 24px; background: var(--surface-alt); border: var(--border-width) solid var(--outline); border-radius: 999px; position: relative; transition: background-color .15s ease, border-color .15s ease; flex-shrink: 0; } .ah-toggle .ah-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease; } .ah-toggle input:checked + .ah-toggle-track { background: var(--primary); border-color: var(--primary); } .ah-toggle input:checked + .ah-toggle-track::after { transform: translateX(20px); } .ah-toggle-label { color: var(--text); font-size: 0.9rem; } /* Native date-picker calendar icon: browser-default light glyph clashes with dark surfaces — invert it so it reads as a light-on-dark icon instead of a jarring white square. Only the icon itself is themeable via CSS; the popup calendar body remains OS/browser-drawn. */ html[data-theme-mode="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85) hue-rotate(180deg); cursor: pointer; } .ah-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } /* ---- Pill chips / badges ---- */ .ah-chip { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 3px 12px; font-size: 0.78rem; font-weight: 700; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } .ah-chip-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); } /* Ledger "Ref. Account" column — same soft badge treatment as the mobile app's ledger and the ledger PDF export's ref-badge class. */ .ah-ref-badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--info, #2980b9) 14%, transparent); color: var(--info, #2980b9); font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .ah-chip-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } .ah-chip-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); } /* ---- Tables ---- */ .ah-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--outline); } table.ah-table { width: 100%; border-collapse: collapse; background: var(--surface); } table.ah-table th { text-align: left; font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-alt); padding: 10px 14px; border-bottom: 1px solid var(--outline); white-space: nowrap; } table.ah-table td { padding: 10px 14px; border-bottom: 1px solid var(--outline); color: var(--text); font-size: 0.88rem; } table.ah-table tr:last-child td { border-bottom: none; } /* ---- Sticky header (all .ah-table listings) ---- */ /* .ah-table-wrap already implicitly becomes a scroll container on both axes once overflow-x:auto is set (per the CSS spec: when one of overflow-x/y is non-"visible", the other is computed as "auto" too), so `position: sticky` on cells sticks relative to that wrap with no extra markup needed. Harmless on ledger/cash-book/trial-balance tables too (no visual change unless the wrap actually scrolls vertically, i.e. only with .ah-table-scroll below). */ table.ah-table thead th { position: sticky; top: 0; z-index: 2; } table.ah-table tfoot th, table.ah-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-alt); border-top: 2px solid var(--outline); font-weight: 700; } /* ---- Bounded-height internal scroll, opt-in per table (CP/CR/JV listings): DataTables already paginates these to 10-100 rows/page via the length menu, so a giant internal scrollbox isn't needed for the common case, but a user picking "100" rows/page can still produce a very tall table — cap it so the sticky thead/tfoot above actually have somewhere to stick, without shrinking short result sets. ---- */ .ah-table-wrap.ah-table-scroll { max-height: 70vh; overflow-y: auto; } /* ---- Vertical column dividers for financial-statement tables (ledger/cash book/trial balance) where columns need clear separation but the rows aren't sortable/searchable (running balances would break under reorder). ---- */ table.ah-table.ah-table-bordered th, table.ah-table.ah-table-bordered td { border-right: 1.5px solid var(--outline); border-bottom-width: 1.5px; font-size: 1rem; } /* Not scoped to :last-child — with the CP/CR/JV listings' two-row headers (currency group row + Credit/Debit sub-header row), the sub-row's last cell isn't actually the table's last column (Remarks/Action follow it), so a :last-child exclusion stripped the divider right before Remarks. Leaving the border on every cell, including the true last column, is harmless — just one extra line before the card's own edge. */ table.ah-table.ah-table-bordered th { text-align: center; font-weight: 700; font-size: 0.85rem; } table.ah-table.ah-table-bordered td.text-center { text-align: center; } /* ---- CP/CR/JV voucher listing tables: centered/bold headers (matching .ah-table-bordered's header treatment) scoped narrowly to these three tables' ids rather than the base .ah-table class, since other .ah-table listings elsewhere intentionally keep left-aligned headers. ---- */ #tbl-cpv th, #tbl-crv th, #tbl-jv th { text-align: center; font-weight: 700; } /* Leaderboard: all headings centered/bold, and numeric columns' data cells centered too (Name/Email stay left — those aren't numbers). */ #tbl-leaderboard th { text-align: center; font-weight: 700; } #tbl-leaderboard td.text-center { text-align: center; } /* Users admin table: same treatment (Name/Email stay left). */ #tbl-users th { text-align: center; font-weight: 700; } #tbl-users td.text-center { text-align: center; } /* Action column (edit + delete buttons): keep both buttons on one row regardless of viewport/column-squeeze — without this, two inline-flex .ah-btn anchors with no wrapping constraint stack top/bottom whenever the column narrows (DataTables auto column-width, small viewports, etc). */ .ah-table td.ah-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; } .ah-section-title { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; } /* ---- App shell: top bar + left nav ---- */ .ah-shell { display: flex; min-height: 100vh; } .ah-sidebar { width: 136px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--outline); padding: 16px 12px; overflow: hidden; box-sizing: border-box; transition: width .2s ease, padding .2s ease, border-color .2s ease; } .ah-sidebar .brand { font-weight: 800; font-size: 0.95rem; padding: 8px 8px 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ah-nav-group { margin-bottom: 12px; } .ah-nav-group h6 { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 0 8px; margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ah-nav-link { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 0.72rem; font-weight: 600; white-space: nowrap; overflow: hidden; } .ah-nav-link span { overflow: hidden; text-overflow: ellipsis; } .ah-nav-link:hover, .ah-nav-link.active { background: var(--surface-alt); color: var(--primary); text-decoration: none; } .ah-nav-link i { width: 14px; text-align: center; color: var(--text-muted); font-size: 0.78rem; } .ah-nav-link:hover i, .ah-nav-link.active i { color: var(--primary); } .ah-main { flex: 1; min-width: 0; } .ah-topbar { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--outline); padding: 10px 20px; position: sticky; top: 0; z-index: 20; gap: 8px; } /* Both direct groups (left: toggle+title, right: theme/settings/logout buttons) need to be allowed to shrink — without min-width:0 a flex child never shrinks below its content size, and on a narrow phone the combined natural width of both groups (toggle + username + 3 action buttons incl. a "Logout" text label) is wider than a 375-414px viewport, overflowing the sticky topbar horizontally. */ .ah-topbar > div { min-width: 0; } .ah-topbar .title { font-weight: 700; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ah-content { padding: 20px; } @media (max-width: 480px) { /* Reclaim width on very narrow phones: drop the "Logout" text label (icon stays, so the action is still available) and tighten gaps. */ .ah-topbar { padding: 8px 12px; gap: 6px; } .ah-topbar > div { gap: 8px !important; } .ah-topbar .title { max-width: 90px; } #logout-form .ah-btn span, #logout-form .ah-btn { font-size: 0; gap: 0; padding: 9px 10px; } #logout-form .ah-btn i { font-size: 1rem; } } /* ---- Theme picker swatches ---- */ .ah-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; } .ah-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .ah-swatch.active { border-color: var(--text); } /* ---- Stat cards (dashboard) ---- */ .ah-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .ah-stat-card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; } .ah-stat-card:hover { border-color: var(--primary); text-decoration: none; color: inherit; } .ah-stat-card .icon-row { display: flex; align-items: center; justify-content: space-between; } .ah-stat-card .label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; } .ah-stat-card .value { font-size: 1.6rem; font-weight: 800; color: var(--text); } .ah-stat-card .icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } /* ---- Sidebar toggle (hamburger button in topbar, always visible) ---- */ .ah-sidebar-toggle { display: inline-flex; background: transparent; border: var(--border-width) solid var(--outline); border-radius: var(--radius-sm); color: var(--text); width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; flex-shrink: 0; } .ah-sidebar-toggle:hover { border-color: var(--primary); color: var(--primary); } /* ---- Sidebar: a normal flex item in the page row, not an overlay — it collapses to zero width when closed (pushing the content to fill the space) instead of floating on top of the page content. Hidden by default; the hamburger toggle opens/closes it and the choice is remembered (see header.blade.php's localStorage-backed toggle script). ---- */ .ah-sidebar { width: 0; padding-left: 0; padding-right: 0; border-right-color: transparent; } body.ah-sidebar-open .ah-sidebar { width: 136px; padding: 16px 12px; border-right-color: var(--outline); } @media (max-width: 992px) { .ah-content { padding: 14px; } } /* ========================================================================= DataTables — client-side sort + search bolted onto existing .ah-table listings (see initAhTable() in admin/js.blade.php). Overrides DataTables' own stock CSS (jquery.dataTables.min.css, loaded via CDN in admin/css.blade.php) so its search box / length menu / pagination / sort arrows read as part of the .ah-* theme instead of a foreign widget, in both light and dark mode. NOT applied to ac_ledger / cash_book / trail_balance (running-balance reports — see docs/web-redesign.md for why those are excluded). ========================================================================= */ .dataTables_wrapper { color: var(--text); font-size: 0.88rem; } .dataTables_wrapper .dataTables_filter { float: right; margin-bottom: 12px; } .dataTables_wrapper .dataTables_filter label { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .dataTables_wrapper .dataTables_filter input { background: var(--surface-alt); border: var(--border-width) solid transparent; border-radius: var(--radius); padding: 8px 12px; color: var(--text); font-size: 0.88rem; margin-left: 0; min-width: 200px; } .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--primary); background: var(--surface); } .dataTables_wrapper .dataTables_length { float: left; margin-bottom: 12px; } .dataTables_wrapper .dataTables_length label { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .dataTables_wrapper .dataTables_length select { background: var(--surface-alt); border: var(--border-width) solid transparent; border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); } /* DataTables Buttons extension (Excel export + Print), themed as .ah-btn-ish pills instead of the stock unstyled