/* ============================================================ 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"; } /* ============================================================ CURSOR — a small dot + trailing ring, replaces the default pointer on non-touch devices. Created by assets/js/cursor.js; these are just the visual styles. ============================================================ */ @media (hover: hover) and (pointer: fine) { html, body, a, button, .btn, .sidebar-link, input, select, textarea, tbody tr.clickable, .card, [role="button"] { cursor: none !important; } } .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); pointer-events: none; z-index: 9999; opacity: 0; transform: translate(-50%, -50%); transition: width .16s ease, height .16s ease, background .16s ease, opacity .12s ease; } /* ============================================================ 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 drawn by the browser itself, outside our CSS's reach — cursor:none can't apply to them, so hovering one shows the real arrow next to our custom dot. Since we already provide our own styling, simplest fix is to hide these native icons entirely. */ 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; } /* Dot cursor makes no sense with touch input — hidden, native cursor stays */ .cursor-dot { display: none !important; } html, body, a, button, .btn, .sidebar-link, input, select, textarea, tbody tr.clickable, .card, [role="button"] { cursor: auto !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 (hover: none) { .cursor-dot { display: none !important; } html, body, a, button, .btn, .sidebar-link, input, select, textarea, tbody tr.clickable, .card, [role="button"] { cursor: auto !important; } } @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; } }