/* ============================================================ QFE POS — Design System "Aurora Glass" — white liquid-glass theme over a soft, shaded mesh background. Same structure/classes as before so every page (30+ PHP views) re-themes automatically — only the visual tokens and glass/hover treatments changed, not the layout logic. ============================================================ */ :root { /* Base surfaces */ --color-canvas: #ffffff; /* solid white, used where blur would hurt legibility (inputs, table cells) */ --color-glass: rgba(255, 255, 255, 0.66); /* translucent glass panels: sidebar, topbar, cards, modals */ --color-glass-strong: rgba(255, 255, 255, 0.8); --color-surface: #f5f6fb; --color-surface-hover: #eef0fa; --color-border: rgba(20, 20, 40, 0.08); --color-border-strong: rgba(20, 20, 40, 0.16); /* Accent — indigo → violet, echoes the aurora mesh */ --color-primary: #5b5bf0; --color-primary-hover: #4747d8; --color-primary-surface: #eeeeff; --color-primary-2: #a855f7; /* secondary accent for gradients */ --color-text: #15151f; --color-text-secondary: #6b6b80; --color-text-disabled: #a4a4b8; --color-danger: #e0392c; --color-danger-surface: #fdeceb; --color-warning: #e8a33d; --color-warning-surface: #fff6e8; --color-success: #1ea672; --color-success-surface: #e8f8f1; --color-info: #2c7ecb; --color-info-surface: #e8f2fc; /* Aurora mesh hues, used only by the fixed background layer */ --aurora-1: #8fb8ff; --aurora-2: #c9a4ff; --aurora-3: #ffb3d9; --aurora-4: #9ff0dd; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Radius — a touch softer, glass reads better rounded */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Shadows — soft and diffused, no hard edges */ --shadow-sm: 0 1px 2px rgba(30, 30, 60, 0.05); --shadow-md: 0 8px 24px -8px rgba(30, 30, 60, 0.14); --shadow-lg: 0 20px 44px -16px rgba(30, 30, 60, 0.22); --shadow-popover: 0 24px 56px -12px rgba(30, 30, 60, 0.28); --glass-blur: blur(18px) saturate(160%); --sidebar-width: 240px; --topbar-height: 56px; --page-bg: #fafbff; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ============================================================ THEME: Original — the flat, borders-over-shadows look this app shipped with before the Aurora Glass redesign. No blur, no animated mesh, tighter corners. Selected via data-style="classic" on (set by assets/js/theme.js). Style and mode are two INDEPENDENT choices — Aurora/Classic is the look, Light/Dark is the mode, controlled by data-mode. :root above already holds Aurora + Light (the default combination); the three blocks below cover the other three combinations. ============================================================ */ [data-style="classic"] { --color-canvas: #ffffff; --color-glass: #ffffff; --color-glass-strong: #ffffff; --color-surface: #f6f6f7; --color-surface-hover: #f1f2f3; --color-border: #e1e3e5; --color-border-strong: #c9cccf; --color-primary: #008060; --color-primary-hover: #006e52; --color-primary-surface: #e3f1ee; --color-primary-2: #008060; --color-text: #1a1a1a; --color-text-secondary: #6d7175; --color-text-disabled: #a7acb1; --color-danger: #d82c0d; --color-danger-surface: #fbeae9; --color-warning: #b98a00; --color-warning-surface: #fff5e5; --color-success: #008060; --color-success-surface: #e3f1ee; --color-info: #2c6ecb; --color-info-surface: #e4eefc; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12); --glass-blur: none; --page-bg: #f6f6f7; } /* No glass to blur, and no aurora mesh — Classic is intentionally flat in both light and dark mode */ [data-style="classic"] body::before { display: none; } [data-style="classic"] .login-card::before { display: none; } /* ============================================================ AURORA + DARK — same glass/blur language as the default Aurora Light, re-tuned for a dark canvas so text stays readable and the mesh reads as a subtle glow rather than a wash of bright color. ============================================================ */ [data-style="aurora"][data-mode="dark"] { --color-canvas: #14141f; --color-glass: rgba(30, 30, 46, 0.6); --color-glass-strong: rgba(26, 26, 40, 0.78); --color-surface: #1b1b29; --color-surface-hover: #242438; --color-border: rgba(255, 255, 255, 0.09); --color-border-strong: rgba(255, 255, 255, 0.18); --color-primary: #8080ff; --color-primary-hover: #9999ff; --color-primary-surface: rgba(128, 128, 255, 0.16); --color-primary-2: #c98bfa; --color-text: #f1f1f7; --color-text-secondary: #a3a3ba; --color-text-disabled: #6c6c85; --color-danger: #ff7a6b; --color-danger-surface: rgba(255, 122, 107, 0.14); --color-warning: #f4bd5c; --color-warning-surface: rgba(244, 189, 92, 0.14); --color-success: #4ade9a; --color-success-surface: rgba(74, 222, 154, 0.14); --color-info: #6fb2ff; --color-info-surface: rgba(111, 178, 255, 0.14); --aurora-1: #33437a; --aurora-2: #4a3577; --aurora-3: #6e2f52; --aurora-4: #22624f; --page-bg: #08080d; } [data-style="aurora"][data-mode="dark"] body::before { opacity: 0.7; } [data-style="aurora"][data-mode="dark"] .login-card::before { background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%); } /* ============================================================ CLASSIC + DARK — the flat/no-glass look, re-tuned for a dark canvas. Same structure as Classic Light, no mesh, no blur. ============================================================ */ [data-style="classic"][data-mode="dark"] { --color-canvas: #1c1e21; --color-glass: #1c1e21; --color-glass-strong: #1c1e21; --color-surface: #26282c; --color-surface-hover: #303236; --color-border: #3a3d42; --color-border-strong: #4a4d52; --color-primary: #26c485; --color-primary-hover: #1fa870; --color-primary-surface: rgba(38, 196, 133, 0.15); --color-primary-2: #26c485; --color-text: #e4e6eb; --color-text-secondary: #9a9ea3; --color-text-disabled: #6b6e73; --color-danger: #ff6259; --color-danger-surface: rgba(255, 98, 89, 0.15); --color-warning: #f2b84b; --color-warning-surface: rgba(242, 184, 75, 0.15); --color-success: #26c485; --color-success-surface: rgba(38, 196, 133, 0.15); --color-info: #5b9bf5; --color-info-surface: rgba(91, 155, 245, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5); --page-bg: #16181c; } * { box-sizing: border-box; } /* Applied briefly (by theme.js) only while a theme switch is happening, so colors crossfade smoothly instead of snapping instantly. Removed right after, so normal hover/click transitions elsewhere keep their own (usually faster) speed the rest of the time. !important is needed here specifically to override the many per-component transition rules below for just this one moment. */ html.theme-transitioning, html.theme-transitioning * { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, opacity .35s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-transitioning, html.theme-transitioning * { transition: none !important; } } html { background: var(--page-bg); } body { margin: 0; font-family: var(--font-ui); background: transparent; color: var(--color-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent; position: relative; } /* ============================================================ AURORA BACKGROUND — fixed, shaded mesh behind every page. Pure CSS (no extra markup needed) so it works on all 30+ pages without touching each template's body. ============================================================ */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(38vw 38vw at 8% 8%, color-mix(in srgb, var(--aurora-1) 55%, transparent), transparent 70%), radial-gradient(34vw 34vw at 92% 12%, color-mix(in srgb, var(--aurora-2) 50%, transparent), transparent 70%), radial-gradient(36vw 36vw at 12% 96%, color-mix(in srgb, var(--aurora-3) 45%, transparent), transparent 70%), radial-gradient(30vw 30vw at 88% 92%, color-mix(in srgb, var(--aurora-4) 45%, transparent), transparent 70%), var(--page-bg); background-repeat: no-repeat; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; } p { margin: 0; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } .num, td.num, .money, .qty { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ============================================================ LAYOUT ============================================================ */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background: var(--color-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: 1px solid var(--color-border); position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; z-index: 20; } .sidebar-brand { height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .sidebar-brand img { height: 28px; width: 28px; object-fit: contain; border-radius: var(--radius-sm); } .sidebar-brand-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-2); } .sidebar-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-disabled); padding: var(--space-4) var(--space-3) var(--space-1); } .sidebar-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text); font-size: 13.5px; font-weight: 500; margin-bottom: 1px; transition: background .15s ease, color .15s ease, transform .15s ease; } .sidebar-link:hover { background: var(--color-primary-surface); color: var(--color-primary); text-decoration: none; transform: translateX(2px); } .sidebar-link.active { background: linear-gradient(100deg, var(--color-primary-surface), rgba(168,85,247,0.12)); color: var(--color-primary); } .sidebar-link svg { flex-shrink: 0; width: 18px; height: 18px; } .sidebar-footer { padding: var(--space-3); border-top: 1px solid var(--color-border); flex-shrink: 0; } .main-area { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; } .topbar { height: var(--topbar-height); background: var(--color-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5); position: sticky; top: 0; z-index: 10; } .topbar-title { font-size: 15px; font-weight: 600; } .topbar-user { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; } /* ============================================================ THEME SWITCHER ============================================================ */ .theme-switcher { display: inline-flex; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; } .theme-btn { border: none; background: transparent; color: var(--color-text-secondary); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .theme-btn:hover { color: var(--color-text); } .theme-btn.active { background: linear-gradient(100deg, var(--color-primary), var(--color-primary-2)); color: #fff; box-shadow: var(--shadow-sm); } .theme-switcher-lg .theme-btn { padding: 8px 18px; font-size: 13px; } .theme-switcher-lg { margin-bottom: var(--space-2); } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; } .role-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); } .page-content { padding: var(--space-6); max-width: 1400px; width: 100%; margin: 0 auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap: wrap; } .page-header-text p { color: var(--color-text-secondary); margin-top: var(--space-1); font-size: 13.5px; } .page-actions { display: flex; gap: var(--space-2); flex-shrink: 0; } /* ============================================================ CARDS — glass panels with a soft hover lift ============================================================ */ .card { background: var(--color-glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } .card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .card-body { padding: var(--space-5); } .card-body.no-pad { padding: 0; } .card-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); background: rgba(245, 246, 251, 0.6); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .stat-card { background: var(--color-glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); box-shadow: 0 10px 28px -12px rgba(30, 30, 60, 0.22); transition: transform .18s ease, box-shadow .18s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -14px rgba(30, 30, 60, 0.3); } .stat-card.danger, .stat-card.warning, .stat-card.info { border-color: var(--color-border); } .stat-label { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 500; margin-bottom: var(--space-1); } .stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .stat-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: var(--space-1); } /* ============================================================ REVEAL TOGGLE — small eye icon that unmasks a value for 10s ============================================================ */ .stat-value-row { display: flex; align-items: center; gap: var(--space-2); } .reveal-value { letter-spacing: 0.02em; display: inline-block; transition: opacity .22s ease, filter .22s ease, transform .22s ease; filter: blur(0); opacity: 1; transform: scale(1); } .reveal-value.swapping { opacity: 0; filter: blur(6px); transform: scale(0.97); } .reveal-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 4px 6px; margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--color-text-disabled); cursor: pointer; transition: color .18s ease, background .18s ease, transform .12s ease; flex-shrink: 0; } .reveal-toggle:hover { color: var(--color-primary); background: var(--color-primary-surface); } .reveal-toggle:active { transform: scale(0.88); } .reveal-toggle.revealed { color: var(--color-primary); } .icon-stage { position: relative; width: 16px; height: 16px; display: inline-block; } .icon-stage svg { position: absolute; inset: 0; opacity: 1; transform: scale(1) rotate(0deg); transition: opacity .28s cubic-bezier(.34,1.56,.64,1), transform .28s cubic-bezier(.34,1.56,.64,1); } .icon-stage .icon-eye-off { opacity: 0; transform: scale(0.4) rotate(-25deg); } .reveal-toggle.revealed .icon-eye { opacity: 0; transform: scale(0.4) rotate(25deg); } .reveal-toggle.revealed .icon-eye-off { opacity: 1; transform: scale(1) rotate(0deg); } .reveal-countdown { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 16px; opacity: 0; transform: translateX(-3px); transition: opacity .2s ease, transform .2s ease; display: inline-block; } .reveal-toggle.revealed .reveal-countdown { opacity: 1; transform: translateX(0); } @keyframes countdownPulse { 0% { transform: scale(1); } 35% { transform: scale(1.3); color: var(--color-danger); } 100% { transform: scale(1); } } .reveal-countdown.tick { animation: countdownPulse .3s ease; } @media (prefers-reduced-motion: reduce) { .reveal-value, .icon-stage svg, .reveal-countdown, .reveal-toggle { transition: none !important; animation: none !important; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--color-text); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; font-family: inherit; touch-action: manipulation; } .btn:hover { background: #ffffff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-primary { background: linear-gradient(100deg, var(--color-primary), var(--color-primary-2)); border-color: transparent; color: white; } .btn-primary:hover { background: linear-gradient(100deg, var(--color-primary-hover), var(--color-primary-2)); border-color: transparent; color: white; box-shadow: 0 10px 24px -8px rgba(91, 91, 240, 0.5); } .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: white; } .btn-danger:hover { background: #c22e22; border-color: #c22e22; color: white; } .btn-sm { padding: 5px 10px; font-size: 12.5px; } .btn-lg { padding: 11px 20px; font-size: 14.5px; } .btn-icon { padding: 8px; } .btn-block { width: 100%; } .btn svg { width: 16px; height: 16px; } /* ============================================================ FORMS ============================================================ */ .form-group { margin-bottom: var(--space-4); } label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--space-1); color: var(--color-text); } label .optional { font-weight: 400; color: var(--color-text-secondary); text-transform: none; } .form-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: var(--space-1); } input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="search"], input[type="file"], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: 13.5px; font-family: inherit; color: var(--color-text); background: var(--color-canvas); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-surface); } /* Browser-native icons inside inputs (Edge's password reveal-eye, Chrome's credentials/autofill key icon) are hidden since we provide our own styling for these controls. */ input::-ms-reveal, input::-ms-clear { display: none; } input::-webkit-credentials-auto-fill-button, input::-webkit-caps-lock-indicator { visibility: hidden; display: none !important; pointer-events: none; } .form-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .form-row-2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; } .form-row-3 { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr 1fr; } .input-group { display: flex; } .input-group input { border-radius: var(--radius-md) 0 0 var(--radius-md); } .input-group-addon { padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text-secondary); font-size: 13.5px; display: flex; align-items: center; } /* ============================================================ TABLES ============================================================ */ .table-wrap { overflow-x: auto; } .line-item-row { display: flex; align-items: baseline; gap: var(--space-2); font-size: 12.5px; padding: 2px 0; } .line-item-row + .line-item-row { border-top: 1px dashed var(--color-border); } .line-item-name { flex: 1; min-width: 0; } .line-item-meta { white-space: nowrap; } .line-item-total { white-space: nowrap; font-weight: 600; min-width: 70px; text-align: right; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } thead th { text-align: left; padding: var(--space-3) var(--space-4); background: rgba(245, 246, 251, 0.7); color: var(--color-text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--color-border); white-space: nowrap; } tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--color-primary-surface); } tbody tr.clickable { cursor: pointer; } td.num, th.num { text-align: right; } /* ============================================================ STATUS PILLS ============================================================ */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill-success { background: var(--color-success-surface); color: var(--color-success); } .pill-danger { background: var(--color-danger-surface); color: var(--color-danger); } .pill-warning { background: var(--color-warning-surface); color: #92610a; } .pill-info { background: var(--color-info-surface); color: var(--color-info); } .pill-neutral { background: var(--color-surface); color: var(--color-text-secondary); } /* ============================================================ ALERTS / FLASH MESSAGES ============================================================ */ .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 13.5px; margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); border: 1px solid transparent; } .alert-success { background: var(--color-success-surface); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); } .alert-danger { background: var(--color-danger-surface); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); } .alert-warning { background: var(--color-warning-surface); color: color-mix(in srgb, var(--color-warning) 55%, var(--color-text)); border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); } .alert-info { background: var(--color-info-surface); color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 35%, transparent); } /* ============================================================ EMPTY STATES ============================================================ */ .empty-state { text-align: center; padding: var(--space-10) var(--space-5); color: var(--color-text-secondary); } .empty-state svg { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: 0.4; } .empty-state h3 { color: var(--color-text); margin-bottom: var(--space-1); } .empty-state p { font-size: 13.5px; margin-bottom: var(--space-4); } /* ============================================================ MODAL ============================================================ */ .modal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 20, 35, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--space-4); } .modal-overlay.active { display: flex; } .modal { background: var(--color-glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--color-border); border-radius: var(--radius-lg); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-popover); } .modal-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .modal-body { padding: var(--space-5); } .modal-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-2); } .modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: var(--space-1); display: flex; border-radius: var(--radius-sm); transition: background .15s ease, color .15s ease; } .modal-close:hover { background: var(--color-surface); color: var(--color-text); } /* ============================================================ LOGIN PAGE — glass card floating over the aurora mesh ============================================================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: transparent; padding: var(--space-4); } .login-card { background: var(--color-glass-strong); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .login-card::before { content: ""; position: absolute; top: -40%; left: -20%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(255,255,255,0.7), transparent 70%); pointer-events: none; } .login-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-6); text-align: center; position: relative; } .login-logo img { height: 56px; width: 56px; object-fit: contain; margin-bottom: var(--space-3); border-radius: var(--radius-md); } .login-logo h1 { font-size: 18px; } .login-logo p { color: var(--color-text-secondary); font-size: 13px; margin-top: 2px; } .login-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); padding: 4px 12px 4px 8px; border-radius: 999px; margin-bottom: var(--space-4); } .login-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 6px var(--color-success); } /* ============================================================ UTILITIES ============================================================ */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .text-secondary { color: var(--color-text-secondary); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .text-right { text-align: right; } .text-center { text-align: center; } .font-semibold { font-weight: 600; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .w-full { width: 100%; } .hidden { display: none !important; } .divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; } /* ============================================================ RESPONSIVE / MOBILE ============================================================ */ .sidebar-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 20, 35, 0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 19; } .sidebar-overlay.active { display: block; } .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); align-items: center; border-radius: var(--radius-sm); -webkit-tap-highlight-color: transparent; } .js-install-app-btn.hidden { display: none !important; } .ios-install-hint { position: fixed; left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-text); color: white; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); box-shadow: var(--shadow-popover); z-index: 200; } .ios-install-hint button { background: none; border: none; color: white; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 var(--space-1); flex-shrink: 0; } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-popover); width: min(var(--sidebar-width), 82vw); padding-top: env(safe-area-inset-top, 0px); } .sidebar.open { transform: translateX(0); } .main-area { margin-left: 0; } .form-row-2, .form-row-3 { grid-template-columns: 1fr; } .mobile-menu-btn { display: flex !important; } input, select, textarea { font-size: 16px; } .topbar { padding: 0 var(--space-3); padding-top: env(safe-area-inset-top, 0px); height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)); } .topbar-user { gap: var(--space-2); } .role-badge { display: none; } .page-content { padding: var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); } .page-header { flex-direction: column; align-items: stretch; } .page-actions { flex-wrap: wrap; } .page-actions .btn { flex: 1 1 auto; } .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); } table { font-size: 12.5px; } thead th, tbody td { padding: var(--space-2) var(--space-3); } .table-wrap { -webkit-overflow-scrolling: touch; } .modal-overlay { padding: 0; align-items: flex-end; } .modal { max-width: none; width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal-body { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); } .pos-layout { display: block !important; height: auto !important; } .pos-layout > div { border-right: none !important; } /* Glass blur is expensive on a lot of mid-range Android GPUs — trim it back on mobile so scrolling long tables/lists stays smooth. */ .card, .stat-card, .btn { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } } @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } .install-btn-label { display: none; } .topbar-user span:not(.user-avatar) { display: none; } .form-row { grid-template-columns: 1fr; } .card-body { padding: var(--space-4); } .login-card { padding: var(--space-6); } } @media (pointer: coarse) { .btn, input, select, textarea { min-height: 40px; } .btn-sm { min-height: 34px; } .sidebar-link { padding: 10px var(--space-3); } input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; } } @supports not (backdrop-filter: blur(1px)) { .sidebar, .topbar, .card, .stat-card, .modal, .login-card, .btn { background: var(--color-canvas); } } @media print { .no-print { display: none !important; } body::before { display: none; } .card, .stat-card, .btn { box-shadow: none !important; backdrop-filter: none !important; } }