/* ═══════════════════════════════════════════════════════════════ CameraCashier Portal — app.css Design system: Direction B (Warm & Approachable) — default Direction A (Refined Pro) available via data-theme="a" on ═══════════════════════════════════════════════════════════════ */ /* ── Design tokens — Direction B (default) ──────────────────────── */ :root { /* Brand primitives (locked — from TallyTill badge) */ --cc-blue: #1565C0; --cc-blue-lt: #90CAF9; --cc-blue-dk: #0d47a1; --cc-green: #1B3D2A; /* forest green — primary brand */ --cc-green-md: #2D6040; /* aperture ring tone */ --cc-green-dk: #111A14; /* near-black */ --cc-amber: #D97746; /* badge centre — CTAs, active states */ /* Direction B: Warm & Approachable */ --sidebar-bg: #1b3d2a; --sidebar-border: #2a5940; --sidebar-text: #6ea882; --sidebar-text-hover: #a8d4b6; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(255, 255, 255, 0.09); --sidebar-active-bar: #f4a261; --content-bg: #faf8f4; --card-bg: #ffffff; --border: #e2dbd0; --border-focus: #d97746; --text-primary: #1c2a1e; --text-secondary: #4f6855; --text-muted: #8aa290; --text-inverse: #ffffff; --accent: #d97746; --accent-hover: #c0612e; --accent-light: #fff4ee; --accent-text: #ffffff; /* The brand accent is a decorative colour and stays as-is, but it fails WCAG 1.4.3 the moment it CARRIES text: white on #d97746 is 3.14:1 and #d97746 as body text on --surface-2 is 2.96:1, both short of the 4.5:1 minimum. This is the same hue pushed dark enough to clear it — 5.0:1 against white, 4.7:1 as text on --surface-2 — so anything text-bearing uses this and the brand colour is unchanged everywhere it is purely decorative. */ --accent-strong: #b8501f; --success: #2E7D32; --success-hover: #1b5e20; --success-light: #e8f5e9; --success-text: #1b5e20; --warning: #d97706; --warning-hover: #b45309; --warning-light: #fef3c7; --warning-text: #854d0e; --danger: #c62828; --danger-hover: #b71c1c; --danger-light: #fce8e8; --danger-text: #b71c1c; --info: #0277bd; --info-light: #e1f5fe; --info-text: #01579b; --code-bg: #f5f0e8; --code-text: #9a3412; /* Typography */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'DM Mono', 'Cascadia Code', ui-monospace, monospace; --text-2xs: 0.625rem; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --card-pad: 1.5rem; --card-pad-sm: 1rem; /* Border radius — sharp by design */ --radius-none: 0px; --radius-sm: 2px; --radius: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-full: 9999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.05); --shadow-focus: 0 0 0 3px rgba(217, 119, 70, 0.22); /* Layout */ --topnav-height: 58px; --input-height-sm: 30px; --input-height-md: 36px; --input-height-lg: 44px; } /* Direction A: Refined Pro — opt-in via data-theme="a" */ [data-theme="a"] { --sidebar-bg: #0d1e35; --sidebar-border: #1a3052; --sidebar-text: #6b93bb; --sidebar-text-hover: #b3cfe4; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(21, 101, 192, 0.12); --sidebar-active-bar: #1565C0; --content-bg: #f0f5fa; --border: #d4e3f0; --border-focus: #1565C0; --text-primary: #0e1e33; --text-secondary: #3d5a78; --text-muted: #7a9ab8; --accent: #1565C0; --accent-hover: #0d47a1; --accent-light: #e3f0fc; --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --shadow-focus: 0 0 0 3px rgba(21, 101, 192, 0.22); } /* ── Reset & base ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); background: var(--content-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: .25rem; } h2 { font-size: var(--text-lg); font-weight: 600; } h3 { font-size: var(--text-md); font-weight: 600; } h4 { font-size: .9375rem; font-weight: 600; } h5 { font-size: var(--text-base); font-weight: 500; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* ── Top-nav layout ──────────────────────────────────────────────── */ .cc-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .cc-content { flex: 1; overflow-y: auto; background: var(--content-bg); } .cc-page { padding: 32px 40px; } /* ── Page header ─────────────────────────────────────────────────── */ .page-header { margin-bottom: 1.75rem; } .page-header h1 { margin-bottom: .25rem; } .page-header .lead { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; } /* ── Cards ───────────────────────────────────────────────────────── */ .cc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; } .cc-card-header { display: flex; justify-content: space-between; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); } .cc-card-body { padding: var(--card-pad); } .cc-card-body-sm { padding: var(--card-pad-sm); } .cc-card-footer { padding: 12px 20px; background: var(--content-bg); border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; } /* Bootstrap card — keep working pages styled */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 11px 20px; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; } .card-body { padding: var(--card-pad); } .card-footer { padding: 12px 20px; background: var(--content-bg); border-top: 1px solid var(--border); } /* Stat cards */ .cc-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-xs); transition: box-shadow .15s, transform .15s; } .cc-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .cc-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } /* Bootstrap colour card overrides */ .text-bg-primary, .text-bg-success, .text-bg-warning, .text-bg-danger, .text-bg-info { background: var(--card-bg) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-xs); } .text-bg-primary .card-title { color: var(--accent) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .text-bg-success .card-title { color: var(--success) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .text-bg-warning .card-title { color: var(--warning) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .text-bg-danger .card-title { color: var(--danger) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .text-bg-primary .card-text, .text-bg-success .card-text, .text-bg-warning .card-text, .text-bg-danger .card-text { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--text-primary) !important; } /* ── Buttons ─────────────────────────────────────────────────────── */ .cc-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius); padding: 7px 16px; font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font-sans); border: 1px solid; transition: all .12s; line-height: 1.4; white-space: nowrap; text-decoration: none; } .cc-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .cc-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .cc-btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border); } .cc-btn-secondary:hover { background: var(--border); } .cc-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .cc-btn-danger:hover { background: var(--danger-light); } .cc-btn-success { background: transparent; color: var(--success); border-color: var(--success); } .cc-btn-success:hover { background: var(--success-light); } .cc-btn-sm { padding: 4px 10px; font-size: 12px; } .cc-btn-lg { padding: 10px 22px; font-size: var(--text-base); } /* Bootstrap btn overrides */ .btn { font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius); padding: 7px 16px; transition: all .12s ease; line-height: 1.4; font-family: var(--font-sans); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-primary:focus { box-shadow: var(--shadow-focus); } .btn-outline-primary { color: var(--accent); border-color: var(--accent); } .btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); } .btn-outline-danger { color: var(--danger); border-color: var(--danger); } .btn-outline-danger:hover { background: var(--danger); color: #fff; } .btn-outline-success { color: var(--success); border-color: var(--success); } .btn-outline-success:hover { background: var(--success); color: #fff; } .btn-secondary { background: transparent; border-color: var(--border); color: var(--text-primary); } .btn-secondary:hover { background: var(--border); color: var(--text-primary); } .btn-sm { font-size: 12px; padding: 4px 10px; } .btn-link { color: var(--accent); } .btn-link:hover { color: var(--accent-hover); } /* ── Forms ───────────────────────────────────────────────────────── */ .cc-input { width: 100%; height: var(--input-height-md); padding: 0 12px; font-size: var(--text-sm); font-family: var(--font-sans); color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); outline: none; transition: border-color .12s, box-shadow .12s; } .cc-input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); } .cc-input::placeholder { color: var(--text-muted); } .cc-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin-bottom: 5px; display: block; } .cc-help-text { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; } .cc-error-text { font-size: var(--text-xs); color: var(--danger); margin-top: 4px; } .form-control, .form-select { font-size: var(--text-sm); border-color: var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 7px 12px; background-color: var(--card-bg); font-family: var(--font-sans); transition: border-color .12s, box-shadow .12s; } .form-control:focus, .form-select:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: none; } .form-control::placeholder { color: var(--text-muted); } .form-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin-bottom: 5px; } .form-text { font-size: var(--text-xs); color: var(--text-secondary); } .input-group-text { font-size: var(--text-sm); border-color: var(--border); background: var(--content-bg); color: var(--text-secondary); border-radius: var(--radius); } /* ── Tables ──────────────────────────────────────────────────────── */ .cc-table { width: 100%; border-collapse: collapse; } .cc-th { padding: 9px 16px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; } .cc-td { padding: 11px 16px; font-size: var(--text-sm); color: var(--text-primary); border-bottom: 1px solid var(--border); } .cc-tr:hover { background: var(--content-bg); } .table { font-size: var(--text-sm); color: var(--text-primary); } .table thead th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding: 9px 16px; white-space: nowrap; background: transparent; } .table tbody td { padding: 11px 16px; vertical-align: middle; border-color: var(--border); } .table tbody tr:hover { background: var(--content-bg); } .table tbody tr:last-child td { border-bottom: none; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent; } /* ── Badges ──────────────────────────────────────────────────────── */ .cc-badge { display: inline-flex; align-items: center; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; padding: 2px 9px; letter-spacing: .02em; } .cc-badge-success { background: var(--success-light); color: var(--success-text); } .cc-badge-warning { background: var(--warning-light); color: var(--warning-text); } .cc-badge-danger { background: var(--danger-light); color: var(--danger-text); } .cc-badge-info { background: var(--info-light); color: var(--info-text); } .cc-badge-neutral { background: #f1f5f9; color: #475569; } .cc-badge-accent { background: var(--accent-light); color: var(--accent); } .badge { font-size: 11px; font-weight: 600; border-radius: var(--radius-full); padding: 2px 9px; letter-spacing: .02em; } .badge.bg-success { background: var(--success-light) !important; color: var(--success-text) !important; } .badge.bg-danger { background: var(--danger-light) !important; color: var(--danger-text) !important; } .badge.bg-warning { background: var(--warning-light) !important; color: var(--warning-text) !important; } .badge.bg-primary { background: var(--accent-light) !important; color: var(--accent) !important; } .badge.bg-info { background: var(--info-light) !important; color: var(--info-text) !important; } .badge.bg-secondary { background: #f1f5f9 !important; color: var(--text-secondary) !important; } /* ── Alerts ──────────────────────────────────────────────────────── */ .cc-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid; font-size: var(--text-sm); line-height: 1.5; } .cc-alert-success { background: var(--success-light); border-color: #a7d7aa; color: var(--success-text); } .cc-alert-warning { background: var(--warning-light); border-color: #f6d55c; color: var(--warning-text); } .cc-alert-danger { background: var(--danger-light); border-color: #f5aaaa; color: var(--danger-text); } .cc-alert-info { background: var(--info-light); border-color: #90caf9; color: var(--info-text); } .alert { border-radius: var(--radius); font-size: var(--text-sm); border-width: 1px; border-style: solid; padding: 12px 16px; } .alert-success { background: var(--success-light); border-color: #a7d7aa; color: var(--success-text); } .alert-warning { background: var(--warning-light); border-color: #f6d55c; color: var(--warning-text); } .alert-danger { background: var(--danger-light); border-color: #f5aaaa; color: var(--danger-text); } .alert-info { background: var(--info-light); border-color: #90caf9; color: var(--info-text); } /* ── Tabs ────────────────────────────────────────────────────────── */ .cc-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; gap: 0; } .cc-tab { padding: 10px 20px; font-size: var(--text-sm); cursor: pointer; border: none; background: transparent; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .12s; font-family: var(--font-sans); } .cc-tab:hover { color: var(--text-primary); } .cc-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); } /* ── Code ────────────────────────────────────────────────────────── */ code, .code { font-size: .85em; color: var(--code-text); background: var(--code-bg); padding: .125rem .375rem; border-radius: var(--radius); font-family: var(--font-mono); } /* ── Utility ─────────────────────────────────────────────────────── */ .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--warning) !important; } .text-accent { color: var(--accent) !important; } /* ── Responsive breakpoints ──────────────────────────────────────── */ @media (max-width: 1023px) { .cc-tn-item span { display: none; } .cc-tn-item { padding: 0 10px; } .cc-topnav-subtitle { display: none; } .cc-theme-toggle { display: none; } .cc-stat-grid { grid-template-columns: repeat(2, 1fr); } .cc-dashboard-lower { grid-template-columns: 1fr; } } @media (max-width: 639px) { .cc-topnav-items { display: none !important; } .cc-hamburger { display: flex !important; } .cc-topnav-settings { display: none; } .cc-page { padding: 20px 16px; } .cc-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .cc-dashboard-lower { grid-template-columns: 1fr; } } /* ── Blazor validation ───────────────────────────────────────────── */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); } .invalid { outline: 1px solid var(--danger); } .validation-message { color: var(--danger); font-size: var(--text-xs); } /* ── Blazor error UI ─────────────────────────────────────────────── */ #blazor-error-ui { background: var(--danger-light); border-top: 2px solid var(--danger); color: var(--danger-text); padding: .75rem 1.5rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; display: none; font-size: var(--text-sm); font-weight: 500; } #blazor-error-ui .dismiss { cursor: pointer; float: right; font-weight: 700; } #blazor-error-ui .reload { color: var(--danger-text); text-decoration: underline; } .blazor-error-boundary { background: var(--danger-light); border: 1px solid var(--danger); border-radius: var(--radius); padding: 1rem; color: var(--danger-text); } .blazor-error-boundary::after { content: "An error has occurred."; } /* ── Print ───────────────────────────────────────────────────────── */ @media print { .no-print { display: none !important; } .print-only { display: block !important; } nav, aside, header, footer { display: none !important; } body { background: white !important; } } .print-only { display: none; }