/* ============================================================ */ /* JUNE MOBILE — UNIFIED DESIGN SYSTEM v2 */ /* Clean & clear admin-finance product. Blue brand accent */ /* on slate neutrals. Tabular numerics. 8pt rhythm. Inter. */ /* ============================================================ */ :root { /* Brand */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-500: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af; /* Neutrals (slate) */ --gray-0: #ffffff; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --gray-950: #020617; /* Semantic surfaces & text */ --bg: var(--gray-50); --bg-color: var(--gray-50); --surface: var(--gray-0); --card-bg: var(--gray-0); --surface-alt: var(--gray-50); --surface-mute: #fbfcfd; --border-color: var(--gray-200); --border-strong:var(--gray-300); --text-main: var(--gray-700); --text: var(--gray-700); --text-strong: var(--gray-900); --secondary: var(--gray-800); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); /* Brand aliases (legacy compat) */ --primary: var(--brand-500); --primary-hover: var(--brand-600); /* States */ --danger: #ef4444; --danger-soft: #fef2f2; --success: #10b981; --success-soft: #ecfdf5; --warning: #f59e0b; --warning-soft: #fffbeb; --info: var(--brand-500); --info-soft: var(--brand-50); /* Sidebar (refined dark) */ --sb-bg: #0b1220; --sb-bg-alt: #0f172a; --sb-text: #cbd5e1; --sb-text-strong: #f8fafc; --sb-text-muted: #64748b; --sb-active-bg: rgba(37, 99, 235, 0.18); --sb-active-text: #bfdbfe; --sb-active-bar: var(--brand-500); --sb-hover: rgba(255, 255, 255, 0.05); --sb-divider: rgba(255, 255, 255, 0.06); --sidebar-bg: var(--sb-bg); --sidebar-hover: var(--sb-hover); /* Type scale (mobile-first) */ --text-xs: 11px; --text-sm: 12px; --text-base: 13.5px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-base: 1.55; /* Spacing (4pt rhythm) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; /* Elevation */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03); --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05); /* Focus / Motion */ --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18); --t-fast: 120ms ease; --t-base: 180ms ease; --t-slow: 280ms ease; /* Theme-aware raw white/black aliases (overridden in dark) */ --raw-white: #ffffff; --raw-near-white: #fbfcfd; --hover-tint: #f1f5f9; } /* ============================================================ */ /* DARK THEME — semantic token overrides only. */ /* Applied via set by themeModule. */ /* ============================================================ */ [data-theme="dark"] { /* Surfaces flip: bg darkest, surface one step up, alt two steps */ --bg: #0a0f1a; --bg-color: #0a0f1a; --surface: #111827; --card-bg: #111827; --surface-alt: #0f172a; --surface-mute: #131c2c; /* Borders softer than surface (so cards still read as cards) */ --border-color: #243044; --border-strong:#334155; /* Text inverts the slate scale */ --text-main: #cbd5e1; --text: #cbd5e1; --text-strong: #f1f5f9; --secondary: #e2e8f0; --text-muted: #94a3b8; --text-subtle: #64748b; /* Brand stays — but soft tints darken so they read on dark */ --brand-50: #1e293b; --brand-100: #243044; --brand-200: #334155; /* brand-500/600/700 unchanged so primary buttons keep brand identity */ /* State soft-tints flip to dark variants */ --danger-soft: #2a1414; --success-soft: #0e2a1f; --warning-soft: #2a200d; --info-soft: #1e293b; /* Shadows much lighter on dark surfaces */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.30); /* Focus ring brighter on dark */ --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.35); /* Theme-aware raw aliases */ --raw-white: #111827; --raw-near-white: #131c2c; --hover-tint: #1f2937; /* Sidebar already dark — keep but tighten dividers slightly */ --sb-bg: #060912; --sb-bg-alt: #0a0f1a; --sb-divider: rgba(255, 255, 255, 0.04); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; } body, html { height: 100%; background-color: var(--bg-color); color: var(--text-main); transition: background-color var(--t-base), color var(--t-base); } /* Smooth color transitions on theme switch (limit to color props to avoid layout flicker) */ .minimal-card, .stat-card, .report-card, .task-card, .notice-card, .custom-input, .custom-select, .data-table, .top-header, .btn, .btn-outline, .table-container { transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base); } .w-100 { width: 100%; } .text-center { text-align: center; } .text-muted { color: var(--text-muted); } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235, 0.4); } 70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(37,99,235, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235, 0); } } /* AUTH */ .login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 1000; } .login-card { background: var(--card-bg); padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 90%; max-width: 400px; text-align: center; border: 1px solid var(--border-color); } .brand-logo { width: 56px; height: 56px; background: var(--primary); color: white; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; margin: 0 auto 20px; box-shadow: 0 4px 10px rgba(37,99,235,0.3);} .login-card h2 { color: var(--secondary); font-size: 22px; font-weight: 700; margin-bottom: 5px; } .subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 25px; } .auth-switch { margin-top: 20px; font-size: 14px; color: var(--text-muted); } .auth-link { color: var(--primary); text-decoration: none; font-weight: 600; } .auth-link:hover { text-decoration: underline; } /* LAYOUT */ .container { display: flex; height: 100vh; overflow: hidden; width: 100%; } .sidebar { background-color: var(--sidebar-bg); color: white; width: 260px; flex-shrink: 0; display: flex; flex-direction: column; transition: 0.3s; } .sidebar-header { padding: 30px 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); } .user-avatar { width: 48px; height: 48px; background: rgba(255,255,255,0.1); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px; } .sidebar-header h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; color: #f8fafc; } .role-badge { background: rgba(37,99,235,0.2); color: #93c5fd; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;} .nav-links { list-style: none; padding: 20px 15px; flex: 1; overflow-y: auto; } .nav-label { font-size: 11px; color: #64748b; font-weight: 700; margin: 15px 0 5px 15px; letter-spacing: 1px; } .nav-links li a { color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 500; display: flex; align-items: center; padding: 10px 15px; border-radius: var(--radius-md); transition: 0.2s; margin-bottom: 4px; } .nav-links li a .icon { margin-right: 10px; font-size: 16px; opacity: 0.8; } .nav-links li a:hover, .nav-links li.active a { background-color: var(--sidebar-hover); color: white; } .nav-links li.active a .icon { opacity: 1; } .logout-link { color: #fca5a5 !important; margin-top: auto; } .logout-link:hover { background-color: rgba(239,68,68,0.1) !important; color: #ef4444 !important; } .content { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; width: 100%; } .top-header { background: var(--card-bg); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); z-index: 10; } .top-header h1 { font-size: 20px; font-weight: 600; color: var(--secondary); margin: 0; } .top-right-controls { display: flex; align-items: center; gap: 15px; } .top-clock { font-size: 15px; font-weight: 600; color: var(--primary); background: #eff6ff; padding: 6px 12px; border-radius: 8px; font-family: monospace;} .lang-btn { font-size: 13px; padding: 6px 12px; border-radius: 8px; } .scroll-content { padding: 30px; overflow-y: auto; flex: 1; } section:not(.active) { display: none; } h2 { font-size: 16px; font-weight: 600; color: var(--secondary); margin-bottom: 15px; } .section-subtitle { margin: 30px 0 15px 0; font-size: 16px; font-weight: 600;} /* CARDS */ .minimal-card { background: var(--card-bg); padding: 25px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); margin-bottom: 20px; } .grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; } /* STATS */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 10px; } .stat-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow-sm); transition: transform 0.2s;} .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .icon-box.blue { background: #eff6ff; color: var(--primary); } .icon-box.green { background: #ecfdf5; color: var(--success); } .icon-box.orange { background: #fffbeb; color: var(--warning); } .icon-box.red { background: #fef2f2; color: var(--danger); } .stat-content { flex: 1; } .stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; } .stat-value { font-size: 24px; font-weight: 700; color: var(--secondary); line-height: 1; } /* FORMS & BUTTONS */ .form-group { margin-bottom: 15px; text-align: left; } .form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--secondary); font-size: 13px; } .custom-input, .custom-select { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; color: var(--text-main); transition: 0.2s; outline: none; background-color: var(--raw-white); } .custom-input:focus, .custom-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .input-readonly { background-color: var(--surface-alt) !important; color: var(--text-subtle) !important; cursor: not-allowed; } .input-group-row { display: flex; gap: 10px; } .btn { padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; border-radius: 8px; transition: all 0.2s ease; display: inline-flex; justify-content: center; align-items: center; gap: 8px; } .submit-btn { background-color: var(--primary); color: white; } .submit-btn:hover { background-color: var(--primary-hover); } .btn-outline { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-main); } .btn-outline:hover { background-color: var(--hover-tint); border-color: var(--border-strong); } .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; } .clock-in { background-color: var(--success); color: white; } .clock-in:hover { background-color: #059669; } .clock-out { background-color: var(--danger); color: white; } .clock-out:hover { background-color: #dc2626; } .btn-waive { background-color: #fef3c7; color: #d97706; border: 1px solid #fde68a; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600;} .btn-waive:hover { background-color: #fde68a; } /* TABLES */ .table-container { border-radius: var(--radius-md); overflow: hidden; overflow-x: auto; padding: 0 !important; border: 1px solid var(--border-color); width: 100%; } .data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; } .data-table th { background-color: var(--surface-alt); color: var(--text-muted); font-weight: 600; padding: 14px 20px; border-bottom: 1px solid var(--border-color); font-size: 12px; white-space: nowrap; } .data-table td { padding: 14px 20px; border-bottom: 1px solid #f1f5f9; color: var(--text-main); vertical-align: middle; white-space: nowrap;} .data-table tr:hover td { background-color: var(--hover-tint); } /* MASSIVE BUTTONS FOR CHECK IN */ .attendance-hero { text-align: center; } .fine-warning { color: var(--danger); font-size: 13px; font-weight: 500; background: #fef2f2; padding: 10px; border-radius: 8px; display: inline-block; margin-bottom: 25px; border: 1px solid #fecaca;} .action-buttons-lg { display: flex; gap: 20px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap;} .btn-hero { padding: 18px 45px; font-size: 18px; font-weight: 700; border-radius: 16px; border: none; cursor: pointer; color: white; transition: 0.2s; flex: 1; min-width: 200px; max-width: 280px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .btn-hero:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } /* NOTICE BOARD */ .notice-board { background: #ffffff; padding: 25px; border-radius: var(--radius-lg); } .notice-list { margin-top: 10px; } .notice-card { background: transparent; border-left: 3px solid var(--primary); padding: 10px 15px; margin-bottom: 12px; border-bottom: 1px solid #f1f5f9; position: relative;} .notice-card:last-child { border-bottom: none; margin-bottom: 0;} .notice-card p { font-size: 14px; color: var(--text-main); font-weight: 500; margin-bottom: 4px; padding-right: 25px;} .notice-card small { color: #94a3b8; font-size: 11px; } .notice-input-area { background: var(--surface-alt); padding: 15px; border-radius: 12px; margin-top: 20px; border: 1px dashed var(--border-strong);} .reports-minimal-grid, .tasks-minimal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; } .report-card, .task-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); } .report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px;} .report-type { background: #eff6ff; color: var(--primary); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .file-upload-wrapper { border: 1px dashed var(--border-strong); padding: 15px; background: var(--surface-alt); border-radius: 8px; text-align: center; } .task-card { border-top: 3px solid var(--warning); } .task-card.completed { border-top-color: var(--success); opacity: 0.7; } .task-title { font-size: 15px; font-weight: 600; margin-bottom: 10px;} .checklist-item { display: flex; align-items: center; padding: 6px 0; } .checklist-item input[type="checkbox"] { margin-right: 10px; accent-color: var(--primary); } .checklist-text { font-size: 13px; } .checklist-text.done { text-decoration: line-through; color: #94a3b8; } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; } .cat-tag { background: var(--hover-tint); border: 1px solid var(--border-color); padding: 4px 12px; border-radius: 20px; font-size: 12px; color: var(--text-main); display: flex; align-items: center; gap: 5px;} .cat-tag button { background: none; border: none; color: var(--danger); cursor: pointer; } .net-pay-box { background: #eff6ff; color: var(--primary); padding: 20px; border-radius: var(--radius-md); text-align: center; margin: 20px 0; border: 1px solid #bfdbfe; } #payroll-net-pay { font-size: 28px; font-weight: 700; display: block; margin-top: 5px; color: var(--secondary); } .camera-wrapper { border-radius: var(--radius-md); overflow: hidden; background: #000; max-height: 50vh; display: flex; align-items: center; justify-content: center; } .camera-wrapper video, .camera-wrapper img { max-width: 100%; max-height: 50vh; object-fit: cover; transform-origin: center; } /* 🛡️ FIX BATCH-#5: Lock camera preview to portrait so landscape selfies don't appear sideways. */ @media (orientation: landscape) and (max-width: 900px) { .camera-wrapper video, .camera-wrapper img { max-height: 70vh; } } /* 🛡️ FIX BATCH3-#18: Long staff names shouldn't overflow dropdowns/tables. */ .custom-select, .custom-input { max-width: 100%; text-overflow: ellipsis; } .data-table td { word-break: break-word; max-width: 200px; } @media (max-width: 600px) { .data-table td { max-width: 120px; font-size: 12px; } } .swap-card { background: #faf5ff; border: 1px solid #ddd6fe; padding: 10px 15px; border-radius: 8px; margin-bottom: 10px; font-size: 13px;} /* MOBILE RESPONSIVE (HAMBURGER MENU) */ .mobile-only-btn { display: none; background: none; border: none; font-size: 28px; cursor: pointer; color: var(--primary); padding: 0 10px 0 0; } .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; } @media (max-width: 768px) { .mobile-only-btn { display: block; } .sidebar { position: fixed; top: 0; left: -300px; height: 100vh; z-index: 2001; width: 260px; transition: left 0.3s ease; box-shadow: var(--shadow-md); } .sidebar.open { left: 0; } .sidebar-overlay.open { display: block; } .grid-2-col, .grid-3-col { grid-template-columns: 1fr; } .top-right-controls { gap: 10px; } .top-clock { font-size: 13px; padding: 4px 8px; } .scroll-content { padding: 15px; width: 100vw; overflow-x: hidden;} .btn-hero { padding: 15px 30px; font-size: 16px; width: 100%; max-width: none;} } /* ============================================================== */ /* 🛡️ FIX BUG #11 — Toast + Confirm Modal styles */ /* ============================================================== */ #jm-toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .jm-toast { pointer-events: auto; min-width: 240px; max-width: 360px; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; background: #2563eb; box-shadow: 0 6px 16px rgba(0,0,0,0.18); animation: jm-toast-in 0.22s ease-out; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .jm-toast.success { background: #10b981; } .jm-toast.error { background: #ef4444; } .jm-toast.warning { background: #f59e0b; color: #1f2937; } .jm-toast.info { background: #2563eb; } .jm-toast.fade-out { animation: jm-toast-out 0.25s ease-in forwards; } .jm-toast-icon { font-size: 18px; flex: 0 0 auto; } .jm-toast-msg { flex: 1 1 auto; white-space: pre-line; } @keyframes jm-toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes jm-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } } @media (max-width: 768px) { #jm-toast-container { top: 12px; right: 12px; left: 12px; } .jm-toast { max-width: none; } } /* Confirm modal */ .jm-confirm-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; animation: jm-overlay-in 0.18s ease-out; } .jm-confirm-card { background: var(--surface); color: var(--text-main); border-radius: 12px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.25); animation: jm-card-in 0.22s ease-out; border: 1px solid var(--border-color); } .jm-confirm-title { margin: 0 0 8px; color: var(--text-strong); font-size: 18px; font-weight: 700; } .jm-confirm-message { margin: 0 0 20px; color: var(--text-main); font-size: 14px; line-height: 1.55; white-space: pre-line; word-break: break-word; } .jm-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; } .jm-btn { padding: 10px 18px; border-radius: 8px; border: 0; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.12s ease; } .jm-btn-cancel { background: #e2e8f0; color: #1e293b; } .jm-btn-cancel:hover { background: #cbd5e1; } .jm-btn-ok { background: #2563eb; color: #fff; } .jm-btn-ok:hover { background: #1d4ed8; } .jm-btn-ok.danger { background: #ef4444; } .jm-btn-ok.danger:hover { background: #dc2626; } @keyframes jm-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes jm-card-in { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================ */ /* PHASE 2.B — RECONCILIATION SCOPE */ /* All recon UI lives under .recon-scope so its dense Apple-y */ /* visual language doesn't collide with the staff-app surface. */ /* ============================================================ */ .recon-scope { --r-ink:#0A0A0B; --r-ink-2:#1D1D1F; --r-muted:#6B6B70; --r-subtle:#9A9AA0; --r-line:#ECECEE; --r-line-2:#DEDEE2; --r-surface:#FFFFFF; --r-surface-2:#F5F5F7; --r-surface-3:#FBFBFD; --r-blue:#0071E3; --r-blue-soft:#E8F2FE; --r-green:#00A862; --r-green-soft:#E3F8EE; --r-red:#E5484D; --r-red-soft:#FEEBEC; --r-amber:#FF9F0A; --r-amber-soft:#FFF4E0; --r-purple:#7C3AED; --r-purple-soft:#F0E8FE; } .recon-scope { color: var(--r-ink-2); } .recon-scope h2 { color: var(--r-ink); margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; } .recon-scope .muted { color: var(--r-muted); font-size: 12px; } .recon-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .recon-toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .recon-date-pill { background: var(--r-surface-2); border: 1px solid var(--r-line); padding: 8px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .recon-date-pill input { border: none; background: transparent; font: inherit; outline: none; min-width: 130px; cursor: pointer; } .recon-action-btn { padding: 8px 14px; font-size: 13px; font-weight: 500; border: 1px solid var(--r-line-2); border-radius: 8px; background: var(--r-surface); color: var(--r-ink); cursor: pointer; transition: 0.12s ease; font-family: inherit; } .recon-action-btn:hover { background: var(--r-surface-2); } .recon-action-btn.primary { background: var(--r-ink); color: #fff; border-color: var(--r-ink); } .recon-action-btn.primary:hover { background: #1a1a1c; } .recon-action-btn.ghost { background: transparent; border-color: transparent; color: var(--r-muted); } .recon-action-btn.ghost:hover { background: var(--r-surface-2); color: var(--r-ink); } .recon-action-btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; } .recon-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--r-line); border-radius: 12px; overflow: hidden; background: var(--r-surface); margin-bottom: 16px; } .recon-kpi { padding: 14px 16px; border-right: 1px solid var(--r-line); } .recon-kpi:last-child { border-right: none; } .recon-kpi-label { font-size: 10.5px; color: var(--r-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 4px; } .recon-kpi-val { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--r-ink); } .recon-kpi-sub { font-size: 11px; color: var(--r-muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; } .recon-kpi-sub .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--r-muted); } .recon-kpi-sub.ok { color: var(--r-green); } .recon-kpi-sub.ok .dot { background: var(--r-green); } .recon-kpi-sub.warn { color: var(--r-red); } .recon-kpi-sub.warn .dot { background: var(--r-red); } .recon-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } @media (max-width: 1100px) { .recon-grid-2 { grid-template-columns: 1fr; } .recon-kpi-strip { grid-template-columns: repeat(2, 1fr); } } .recon-card { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: 14px; margin-bottom: 14px; overflow: hidden; } .recon-card-head { padding: 14px 18px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .recon-card-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--r-ink); } .recon-num-tag { width: 20px; height: 20px; border-radius: 5px; background: var(--r-surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--r-muted); } .recon-card-sub { font-size: 12px; color: var(--r-muted); padding: 0 18px 12px; } .recon-card-body { padding: 0 18px 18px; } .recon-card-actions { display: flex; gap: 6px; } .recon-dropzone { border: 1.5px dashed var(--r-line-2); border-radius: 12px; padding: 28px 20px; text-align: center; cursor: pointer; background: var(--r-surface-3); transition: all 0.15s ease; } .recon-dropzone:hover, .recon-dropzone.dragover { border-color: var(--r-ink); background: var(--r-surface-2); } .recon-dropzone-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--r-ink); } .recon-dropzone-sub { font-size: 12px; color: var(--r-muted); } .recon-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } .recon-pay-cell { background: var(--r-surface-3); border: 1px solid var(--r-line); border-radius: 10px; padding: 10px 12px; } .recon-pay-cell:focus-within { border-color: var(--r-ink); background: var(--r-surface); } .recon-pay-cell-name { font-size: 11.5px; color: var(--r-muted); font-weight: 500; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; } .recon-pay-cell-input { border: none; background: transparent; font: inherit; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; width: 100%; outline: none; color: var(--r-ink); padding: 0; } .recon-pay-cell-input::placeholder { color: var(--r-subtle); font-weight: 500; } .recon-pay-rm { background: transparent; border: none; cursor: pointer; color: var(--r-subtle); font-size: 16px; padding: 0 4px; } .recon-pay-rm:hover { color: var(--r-red); } .recon-status-list { display: flex; flex-direction: column; gap: 6px; } .recon-status-row { display: flex; align-items: center; padding: 11px 14px; background: var(--r-surface-3); border: 1px solid var(--r-line); border-radius: 10px; gap: 10px; } .recon-status-row.ok { background: var(--r-green-soft); border-color: rgba(0,168,98,0.15); } .recon-status-row.err { background: var(--r-red-soft); border-color: rgba(229,72,77,0.15); } .recon-status-row.warn { background: var(--r-amber-soft); border-color: rgba(255,159,10,0.15); } .recon-status-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--r-surface); color: var(--r-muted); flex-shrink: 0; font-weight: 600; } .recon-status-row.ok .recon-status-icon { background: var(--r-green); color: white; } .recon-status-row.err .recon-status-icon { background: var(--r-red); color: white; } .recon-status-row.warn .recon-status-icon { background: var(--r-amber); color: white; } .recon-status-main { flex: 1; min-width: 0; } .recon-status-label { font-size: 13px; font-weight: 500; color: var(--r-ink); } .recon-status-detail { font-size: 11.5px; color: var(--r-muted); margin-top: 1px; } .recon-status-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .recon-status-row.ok .recon-status-val { color: var(--r-green); } .recon-status-row.err .recon-status-val { color: var(--r-red); } .recon-input-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .recon-field { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--r-ink); background: var(--r-surface); border: 1px solid var(--r-line-2); border-radius: 8px; outline: none; transition: 0.15s; } .recon-field:focus { border-color: var(--r-ink); box-shadow: 0 0 0 3px rgba(10,10,11,0.06); } .recon-field-label { display: block; font-size: 11px; color: var(--r-muted); margin-bottom: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .recon-files-status { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .recon-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; } .recon-badge.success { background: var(--r-green-soft); color: var(--r-green); } .recon-badge.blue { background: var(--r-blue-soft); color: var(--r-blue); } .recon-badge.purple { background: var(--r-purple-soft); color: var(--r-purple); } .recon-badge.warn { background: var(--r-amber-soft); color: var(--r-amber); } .recon-badge.danger { background: var(--r-red-soft); color: var(--r-red); } .recon-badge.neutral { background: var(--r-surface-2); color: var(--r-muted); } .recon-help { font-size: 11.5px; color: var(--r-muted); background: var(--r-surface-3); padding: 10px 14px; border-radius: 8px; border-left: 3px solid var(--r-blue); margin-top: 10px; line-height: 1.5; } .recon-empty { text-align: center; padding: 28px 16px; color: var(--r-subtle); font-size: 13px; } /* Group target progress card */ .recon-progress-card { background: linear-gradient(135deg, var(--surface-alt), var(--surface-mute)); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 16px; } .recon-progress-card.locked { background: linear-gradient(135deg, #fff1f2, #fef3c7); border-color: rgba(239, 68, 68, 0.20); } .recon-progress-card.unlocked { background: linear-gradient(135deg, #ecfdf5, #f0fdf4); border-color: rgba(16, 185, 129, 0.22); } .recon-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; } .recon-progress-title { font-size: 14px; font-weight: 600; color: var(--text-strong); } .recon-progress-status { font-size: 12px; font-weight: 600; color: var(--text-muted); } .recon-progress-status.ok { color: var(--success); } .recon-progress-status.err { color: var(--danger); } .recon-progress-bar-bg { height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; margin: 8px 0 8px; } .recon-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gray-700), var(--gray-900)); border-radius: 4px; transition: width 0.4s ease; } .recon-progress-bar-fill.ok { background: linear-gradient(90deg, var(--success), #34d399); } .recon-progress-bar-fill.warn { background: linear-gradient(90deg, var(--warning), #fbbf24); } .recon-progress-bar-fill.err { background: linear-gradient(90deg, var(--danger), #f87171); } .recon-progress-stats { font-size: 11.5px; color: var(--text-muted); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; } /* Trade-in entry row */ .recon-trade-row { background: var(--surface-mute); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; } .recon-trade-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .recon-trade-foot input { flex: 1; min-width: 200px; } .recon-trade-rm { margin-left: auto; background: var(--danger-soft); color: var(--danger); border: 1px solid transparent; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--t-fast); } .recon-trade-rm:hover { background: #fecaca; } /* Donut & legend */ .recon-donut-wrap { display: flex; align-items: center; gap: 18px; padding: 6px 0; flex-wrap: wrap; } .recon-donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; } .recon-donut-leg-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .recon-donut-leg-row .col-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .recon-donut-leg-row .col-name { flex: 1; font-weight: 500; color: var(--text); } .recon-donut-leg-row .col-val { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Bar list (top products) */ .recon-bar-list { display: flex; flex-direction: column; gap: 10px; } .recon-bar-row { display: grid; grid-template-columns: 1fr 92px; gap: 10px; align-items: center; font-size: 12.5px; position: relative; padding-bottom: 8px; } .recon-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--text); } .recon-bar-tail { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); } .recon-bar-track { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gray-100); border-radius: 2px; } .recon-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); } /* History KPI strip uses recon-kpi-strip — already styled */ .recon-tbl-wrap { overflow-x: auto; border-top: 1px solid var(--r-line); margin: 0 -18px -18px; } .recon-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } .recon-tbl th { background: var(--r-surface-3); padding: 10px 14px; text-align: left; font-weight: 500; color: var(--r-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--r-line); white-space: nowrap; } .recon-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--r-line); font-variant-numeric: tabular-nums; } .recon-tbl tr:last-child td { border-bottom: none; } /* ============================================================ */ /* v2 REFRESH — UNIFIED COMPONENT POLISH */ /* Below rules win in the cascade and refresh staff + recon */ /* surfaces with the design system tokens defined in :root. */ /* ============================================================ */ /* Base typography rhythm */ body, html { font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; line-height: var(--leading-base); color: var(--text); } input, select, textarea, button { font-family: 'Inter', sans-serif; } :where(input, textarea, select):focus-visible { outline: none; } /* Tabular numbers for any data-y context */ .data-table td, .data-table th, .stat-value, .net-pay-box, .recon-kpi-val, .recon-tbl td.num, .recon-pay-cell-input, .recon-status-val, .role-badge { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ===== Sidebar refresh ===== */ .sidebar { background: var(--sb-bg); background-image: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-alt) 100%); width: 248px; border-right: 1px solid var(--sb-divider); } .sidebar-header { padding: 24px 20px 20px; text-align: center; border-bottom: 1px solid var(--sb-divider); } .sidebar-header .user-avatar { width: 52px; height: 52px; background: rgba(37, 99, 235, 0.15); border: 1px solid rgba(37, 99, 235, 0.25); border-radius: 14px; margin-bottom: 12px; } .sidebar-header h3 { color: var(--sb-text-strong); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; } .role-badge { background: rgba(37, 99, 235, 0.18); color: var(--sb-active-text); padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .nav-links { padding: 14px 12px; } .nav-links li.nav-label { color: var(--sb-text-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 18px 8px 4px; } .nav-links li:first-child.nav-label { margin-top: 4px; } .nav-links li a { color: var(--sb-text); font-size: var(--text-base); font-weight: 500; padding: 9px 12px; border-radius: 10px; margin-bottom: 2px; position: relative; transition: background var(--t-fast), color var(--t-fast); } .nav-links li a .icon { margin-right: 10px; font-size: var(--text-lg); opacity: 0.85; width: 20px; text-align: center; } .nav-links li a:hover { background: var(--sb-hover); color: var(--sb-text-strong); } .nav-links li.active a, .nav-links li a:focus-visible { background: var(--sb-active-bg); color: var(--sb-active-text); } .nav-links li.active a::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--sb-active-bar); border-radius: 0 3px 3px 0; } .nav-links li.active a .icon { opacity: 1; } .logout-link { margin-top: 12px !important; color: #fca5a5 !important; } .logout-link:hover { background: rgba(239, 68, 68, 0.10) !important; color: #fecaca !important; } /* ===== Top header refresh ===== */ .top-header { background: var(--surface); padding: 14px 28px; border-bottom: 1px solid var(--border-color); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } .top-header h1 { font-size: var(--text-xl); font-weight: 600; color: var(--text-strong); letter-spacing: -0.015em; } .top-clock { background: var(--brand-50); color: var(--brand-600); padding: 6px 12px; border-radius: 8px; font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; } .lang-btn { background: var(--gray-100); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 12px; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background var(--t-fast); } .lang-btn:hover { background: var(--gray-200); } /* ===== Card refresh ===== */ .scroll-content { padding: 28px 32px 80px; } @media (max-width: 800px) { .scroll-content { padding: 18px 16px 90px; } } .minimal-card { background: var(--surface); padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-xs); margin-bottom: 18px; transition: box-shadow var(--t-base); } .minimal-card:hover { box-shadow: var(--shadow-sm); } h2 { font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; line-height: var(--leading-tight); margin-bottom: 14px; } .section-subtitle { margin: 28px 0 14px 0; font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; } /* ===== Stats grid refresh ===== */ .stat-card { padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: none; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .icon-box { width: 44px; height: 44px; border-radius: 11px; } .stat-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-strong); letter-spacing: -0.025em; line-height: var(--leading-tight); } /* ===== Form refresh ===== */ .form-group label { font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); margin-bottom: 6px; } .custom-input, .custom-select { padding: 10px 13px; font-size: var(--text-md); border-radius: 9px; border-color: var(--border-color); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .custom-input:focus, .custom-select:focus { border-color: var(--brand-500); box-shadow: var(--focus-ring); } .custom-input::placeholder, .custom-select::placeholder { color: var(--text-subtle); } .input-readonly { background: var(--gray-50) !important; color: var(--text-muted) !important; border-color: var(--border-color) !important; } /* ===== Button refresh (legacy .btn family) ===== */ .btn { padding: 9px 18px; font-size: var(--text-md); font-weight: 600; border-radius: 9px; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .btn:active { transform: scale(0.98); } .submit-btn { background: var(--brand-500); color: var(--gray-0); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); } .submit-btn:hover { background: var(--brand-600); box-shadow: var(--shadow-sm); } .btn-outline { background: var(--surface); border: 1px solid var(--border-color); color: var(--text); } .btn-outline:hover { background: var(--gray-50); border-color: var(--border-strong); } .btn-sm { padding: 6px 12px; font-size: var(--text-sm); border-radius: 7px; } .clock-in { background: var(--success); } .clock-in:hover { background: #059669; } .clock-out { background: var(--danger); } .clock-out:hover { background: #dc2626; } /* ===== Tables refresh ===== */ .table-container { border-radius: var(--radius-lg); border: 1px solid var(--border-color); } .data-table th { background: var(--gray-50); color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 18px; } .data-table td { padding: 12px 18px; color: var(--text); font-size: var(--text-base); } .data-table tr:hover td { background: var(--gray-50); } /* ===== Notice / report cards refresh ===== */ .notice-card { border-left-color: var(--brand-500); } .notice-input-area { background: var(--gray-50); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); } .report-type { background: var(--brand-50); color: var(--brand-600); font-weight: 600; letter-spacing: 0.02em; } /* ===== Net pay box refresh ===== */ .net-pay-box { background: linear-gradient(135deg, var(--brand-50) 0%, #ddeafe 100%); border-color: var(--brand-200); color: var(--brand-700); font-weight: 700; } /* ===== Recon scope: alias to global tokens (de-duplicate) ===== */ .recon-scope { --r-ink: var(--text-strong); --r-ink-2: var(--text); --r-muted: var(--text-muted); --r-subtle: var(--text-subtle); --r-line: var(--border-color); --r-line-2: var(--border-strong); --r-surface: var(--surface); --r-surface-2: var(--gray-100); --r-surface-3: #fbfcfd; --r-blue: var(--brand-500); --r-blue-soft: var(--brand-50); --r-green: var(--success); --r-green-soft: var(--success-soft); --r-red: var(--danger); --r-red-soft: var(--danger-soft); --r-amber: var(--warning); --r-amber-soft: var(--warning-soft); --r-purple: #7C3AED; --r-purple-soft:#EDE9FE; } /* Recon component polish (use unified tokens) */ .recon-scope h2 { color: var(--text-strong); } .recon-card { border-radius: var(--radius-lg); border-color: var(--border-color); box-shadow: var(--shadow-xs); transition: box-shadow var(--t-base); } .recon-card:hover { box-shadow: var(--shadow-sm); } .recon-action-btn { border-radius: 9px; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); font-weight: 500; } .recon-action-btn:active { transform: scale(0.98); } .recon-action-btn.primary { background: var(--brand-500); border-color: var(--brand-500); } .recon-action-btn.primary:hover { background: var(--brand-600); border-color: var(--brand-600); } .recon-field { border-radius: 9px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .recon-field:focus { border-color: var(--brand-500); box-shadow: var(--focus-ring); } .recon-pay-cell { border-radius: var(--radius-md); transition: border-color var(--t-fast), background var(--t-fast); } .recon-pay-cell:focus-within { border-color: var(--brand-500); box-shadow: var(--focus-ring); background: var(--surface); } .recon-kpi-strip { border-radius: var(--radius-lg); border-color: var(--border-color); } .recon-kpi { padding: 14px 18px; } .recon-kpi-val { color: var(--text-strong); font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: var(--leading-tight); } .recon-kpi-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.06em; } .recon-status-row { border-radius: var(--radius-md); } .recon-dropzone { border-radius: var(--radius-lg); transition: border-color var(--t-base), background var(--t-base); } .recon-dropzone:hover, .recon-dropzone.dragover { border-color: var(--brand-500); background: var(--brand-50); } .recon-dropzone:hover .recon-dropzone-title { color: var(--brand-600); } .recon-help { border-left-color: var(--brand-500); } .recon-date-pill { border-radius: 9px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .recon-date-pill:focus-within { border-color: var(--brand-500); box-shadow: var(--focus-ring); } /* ===== Login card refresh ===== */ .login-card { padding: 36px 32px; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); } .login-card h2 { font-size: var(--text-2xl); font-weight: 700; color: var(--text-strong); letter-spacing: -0.025em; } .subtitle { color: var(--text-muted); font-size: var(--text-md); } .brand-logo { width: 60px; height: 60px; border-radius: 16px; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); } /* ===== Mobile responsive polish ===== */ @media (max-width: 800px) { .sidebar { width: 100%; } .top-header { padding: 12px 16px; } .top-header h1 { font-size: var(--text-lg); } .minimal-card { padding: 16px 18px; border-radius: var(--radius-md); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-value { font-size: var(--text-xl); } .grid-2-col, .grid-3-col { grid-template-columns: 1fr; gap: 12px; } .recon-kpi-strip { grid-template-columns: repeat(2, 1fr); } .recon-kpi-val { font-size: 19px; } h2 { font-size: var(--text-md); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ===== v2 SEMANTIC COMPONENTS ===== */ /* Unified card title row (replaces inline-styled colored h2) */ .card-title-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--text-strong); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; } .card-title-icon { font-size: 18px; line-height: 1; } .card-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); } .card-status-dot--info { background: var(--brand-500); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .card-status-dot--success { background: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); } .card-status-dot--warning { background: var(--warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14); } .card-status-dot--danger { background: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); } /* Card with subtle TOP accent (replaces heavy left-border bars) */ .card-accent { position: relative; overflow: hidden; } .card-accent::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-500); opacity: 0; transition: opacity var(--t-base); } .card-accent--info::before { background: var(--brand-500); opacity: 0.9; } .card-accent--success::before { background: var(--success); opacity: 0.9; } .card-accent--warning::before { background: var(--warning); opacity: 0.9; } .card-accent--danger::before { background: var(--danger); opacity: 0.9; } /* Notice list / generic card list */ .notice-list, .card-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 4px; } .card-list:empty::after, .notice-list:empty::after { content: 'No items.'; color: var(--text-subtle); font-size: var(--text-sm); text-align: center; padding: 24px 16px; } /* Cashier panel cleanup */ .cashier-panel-wrap { margin-top: 20px; } .stats-grid--compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat-value--sm { font-size: var(--text-md) !important; font-weight: 600 !important; } .card-actions-row { display: flex; gap: 10px; flex-wrap: wrap; } .mt-2 { margin-top: 8px; } /* Force ALL minimal-cards to neutral borders regardless of inline color overrides */ .minimal-card[style*="border-left:"], .minimal-card[style*="border-top:"] { border-left: 1px solid var(--border-color) !important; border-top: 1px solid var(--border-color) !important; } /* Force inline-yellow / inline-blue ad-hoc surface backgrounds back to neutral surface */ .minimal-card[style*="background: #fffbeb"], .minimal-card[style*="background: #fef3c7"], .minimal-card[style*="background: #e0e7ff"] { background: var(--surface) !important; } /* Inline-colored submit buttons → unify to brand */ button.submit-btn[style*="background: #10b981"], button.submit-btn[style*="background: #059669"], button.submit-btn[style*="background: #f59e0b"], button.submit-btn[style*="background: #db2777"] { background: var(--brand-500) !important; } button.submit-btn[style*="background: #10b981"]:hover, button.submit-btn[style*="background: #059669"]:hover, button.submit-btn[style*="background: #f59e0b"]:hover, button.submit-btn[style*="background: #db2777"]:hover { background: var(--brand-600) !important; } /* Filter / utility bars (inline-styled white pills) → use minimal-card */ section > div[style*="background: #fff"][style*="border-radius: 8px"][style*="border: 1px solid #e2e8f0"] { background: var(--surface) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; padding: 14px 18px !important; box-shadow: var(--shadow-xs); } /* Inline labels with hardcoded ink colors */ section label[style*="color: #1e293b"], section label[style*="font-weight: 600"][style*="color"] { color: var(--text-strong) !important; } /* Override stale inline-styled section headings with subtler color */ section h2[style*="color: #2563eb"], section h2[style*="color: #1d4ed8"], section h2[style*="color: #6d28d9"], section h2[style*="color: #dc2626"], section h2[style*="color: #b45309"], section h2[style*="color: #059669"], section h2[style*="color: #1e293b"], section h2#att-table-title, section h2.section-subtitle { color: var(--text-strong) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* Global override: hard-coded colored labels become muted */ section label[style*="color: #1e293b"] { color: var(--text-strong) !important; } section small[style*="color: #94a3b8"], section small[style*="color: #64748b"] { color: var(--text-muted) !important; } section p[style*="color: #64748b"] { color: var(--text-muted) !important; } .card-header { border-bottom: none; margin-bottom: 4px; } /* Notice card refresh — subtler accent */ .notice-card { background: var(--gray-50); border-left: 3px solid var(--brand-500); border-bottom: none; border-radius: 8px; padding: 12px 14px; margin-bottom: 0; } .notice-card p { color: var(--text-strong); font-weight: 500; } .notice-card small { color: var(--text-muted); } /* Today's Off Staff / Late list rows — subtler */ #today-off-list > *, #severe-late-list > * { background: var(--gray-50); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; font-size: var(--text-base); color: var(--text); } /* ============================================================ */ /* v3 PREMIUM POLISH */ /* SVG line icons, refined stat-cards, stronger hierarchy */ /* ============================================================ */ /* SVG icon system — inherits color, controlled by parent */ svg.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; stroke-width: 2; } .nav-links li a svg.icon { width: 18px; height: 18px; opacity: 0.85; } .nav-links li.active a svg.icon { opacity: 1; } .nav-spacer { margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid var(--sb-divider); } .nav-spacer a { color: #fda4af !important; } .nav-spacer a:hover { background: rgba(239, 68, 68, 0.10) !important; color: #fecaca !important; } /* Sidebar brand block: refine */ .sidebar-header { padding: 28px 20px 22px; } .sidebar-header .user-avatar { width: 56px; height: 56px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30); } .sidebar-header .user-avatar img { border-radius: 12px !important; } .sidebar-header h3 { font-size: 15px; letter-spacing: -0.01em; margin-top: 12px; } #current-tenure-display { color: var(--sb-text-muted) !important; font-size: 11px; margin-top: 6px !important; } /* Premium stat-cards (Apple/Linear-style): line icon + bold value */ .stat-card { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .stat-card .icon-box { width: 36px; height: 36px; border-radius: 10px; background: var(--gray-100); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 0; flex-shrink: 0; transition: background var(--t-base), color var(--t-base); } .stat-card .icon-box svg { width: 18px; height: 18px; } /* Color tinting per role — subtle now */ .stat-card .icon-box.blue { background: var(--brand-50); color: var(--brand-600); } .stat-card .icon-box.green { background: var(--success-soft);color: var(--success); } .stat-card .icon-box.orange { background: var(--warning-soft);color: var(--warning); } .stat-card .icon-box.red { background: var(--danger-soft); color: var(--danger); } .stat-card:hover .icon-box { transform: scale(1.05); } .stat-card .stat-content { flex: 1; min-width: 0; padding-top: 2px; } .stat-card .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .stat-card .stat-value { font-size: 26px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-card .stat-value--sm { font-size: 14px !important; font-weight: 600 !important; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 8px; } /* Stronger section headings (h2 in cards) — Linear-style */ .minimal-card h2, .recon-scope h2 { font-size: 16px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.018em; line-height: 1.3; } /* Top header brand: bigger title */ .top-header h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; } /* Card-title-row enhancements */ .card-title-row { gap: 9px; } .card-title-row svg.icon { width: 18px; height: 18px; color: var(--text-muted); } .card-title-icon { font-size: 16px; } /* Page-level section eyebrow + title (when used) */ .page-eyebrow { display: block; font-size: 11px; font-weight: 600; color: var(--brand-500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .page-title { font-size: 24px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.025em; margin-bottom: 18px; } /* Refined empty states */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; text-align: center; color: var(--text-subtle); gap: 10px; } .empty-state svg { width: 28px; height: 28px; color: var(--text-subtle); opacity: 0.6; } .empty-state-title { color: var(--text-muted); font-weight: 500; font-size: 13px; } /* Subtle dashboard background (very subtle warmth) */ .scroll-content { background: radial-gradient(1200px 400px at 100% -100px, rgba(37, 99, 235, 0.04), transparent 60%), var(--bg); } /* Refined buttons — softer hover with elevation */ .btn { transition: background var(--t-fast), border-color var(--t-fast), transform 100ms ease, box-shadow var(--t-fast); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .submit-btn:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } /* Polish role badge */ .role-badge { background: rgba(37, 99, 235, 0.20); color: #93c5fd; border: 1px solid rgba(37, 99, 235, 0.25); } /* Notice card refinement */ .notice-card { padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--border-color); border-left: 3px solid var(--brand-500); border-radius: 10px; } /* ============================================================ */ /* PHASE 6 — TEAM CHAT + AI CHATBOT */ /* ============================================================ */ /* Team Chat (in dashboard card) */ .team-chat-wrap { display: flex; flex-direction: column; height: 480px; max-height: 60vh; } .team-chat-list { flex: 1; overflow-y: auto; padding: 12px 4px 12px 0; display: flex; flex-direction: column-reverse; gap: 10px; scroll-behavior: smooth; } .team-chat-empty { text-align: center; color: var(--text-subtle); font-size: 13px; padding: 32px 12px; line-height: 1.6; } .team-msg { background: var(--gray-50); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 14px; max-width: 88%; } .team-msg.mine { background: var(--brand-50); border-color: rgba(37,99,235,0.18); align-self: flex-end; margin-left: 12%; } .team-msg-head { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; } .team-msg-name { font-weight: 600; color: var(--text-strong); letter-spacing: -0.005em; } .team-msg-role { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--gray-200); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .team-msg-role.admin { background: #fef3c7; color: #b45309; } .team-msg-role.page-admin { background: #ede9fe; color: #6d28d9; } .team-msg-role.cashier { background: #d1fae5; color: #065f46; } .team-msg-time { margin-left: auto; color: var(--text-subtle); font-size: 11px; font-variant-numeric: tabular-nums; } .team-msg-body { font-size: 13.5px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .team-msg-delete { background: transparent; border: none; cursor: pointer; color: var(--text-subtle); font-size: 14px; padding: 0 4px; display: none; } .team-msg:hover .team-msg-delete { display: inline-block; } .team-msg-delete:hover { color: var(--danger); } .team-chat-input-bar { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-color); margin-top: 6px; } .team-chat-input-bar textarea { flex: 1; padding: 10px 12px; font-size: 13.5px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface); resize: none; min-height: 38px; max-height: 120px; font-family: inherit; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .team-chat-input-bar textarea:focus { border-color: var(--brand-500); box-shadow: var(--focus-ring); } .team-chat-send-btn { padding: 0 18px; background: var(--brand-500); color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), transform 100ms; display: inline-flex; align-items: center; gap: 6px; } .team-chat-send-btn:hover { background: var(--brand-600); } .team-chat-send-btn:active { transform: scale(0.97); } .team-chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* AI Chatbot — Floating widget */ .ai-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 28px; background: linear-gradient(135deg, var(--brand-500), #7c3aed); color: #fff; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(0, 0, 0, 0.10); z-index: 800; display: flex; align-items: center; justify-content: center; transition: transform 200ms ease, box-shadow 200ms ease; } .ai-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 32px rgba(37, 99, 235, 0.40); } .ai-fab:active { transform: scale(0.96); } .ai-fab svg { width: 26px; height: 26px; } .ai-fab-pulse { position: absolute; inset: -4px; border-radius: 32px; background: rgba(124, 58, 237, 0.4); animation: ai-pulse 2.4s ease-out infinite; pointer-events: none; z-index: -1; } @keyframes ai-pulse { 0% { transform: scale(0.85); opacity: 0.7; } 70%, 100% { transform: scale(1.4); opacity: 0; } } .ai-panel { position: fixed; bottom: 92px; right: 24px; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 120px); background: var(--surface); border: 1px solid var(--border-color); border-radius: 18px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.20), 0 6px 16px rgba(15, 23, 42, 0.10); display: none; flex-direction: column; overflow: hidden; z-index: 801; transform-origin: bottom right; animation: ai-panel-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .ai-panel.open { display: flex; } @keyframes ai-panel-in { from { opacity: 0; transform: translateY(20px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .ai-panel-header { background: linear-gradient(135deg, var(--brand-500), #7c3aed); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; } .ai-panel-header-avatar { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .ai-panel-header-text { flex: 1; } .ai-panel-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .ai-panel-subtitle { font-size: 11px; opacity: 0.85; margin-top: 2px; } .ai-panel-close { background: transparent; border: none; color: #fff; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast); } .ai-panel-close:hover { background: rgba(255, 255, 255, 0.16); } .ai-panel-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--gray-50); } .ai-bubble { max-width: 90%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; } .ai-bubble.bot { background: var(--surface); border: 1px solid var(--border-color); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; } .ai-bubble.user { background: var(--brand-500); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .ai-bubble pre { background: var(--gray-100); padding: 8px 10px; border-radius: 8px; margin: 6px 0; font-size: 12px; overflow-x: auto; font-family: 'SF Mono', Monaco, monospace; } .ai-bubble.bot.typing { color: var(--text-muted); font-style: italic; } .ai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .ai-suggestion-chip { padding: 6px 11px; background: var(--surface); border: 1px solid var(--border-color); border-radius: 999px; font-size: 12px; cursor: pointer; color: var(--text-strong); transition: background var(--t-fast), border-color var(--t-fast); } .ai-suggestion-chip:hover { background: var(--brand-50); border-color: var(--brand-200); } .ai-panel-input-bar { padding: 12px 14px; border-top: 1px solid var(--border-color); background: var(--surface); display: flex; gap: 8px; } .ai-panel-input-bar textarea { flex: 1; padding: 9px 12px; font-size: 13.5px; border: 1px solid var(--border-color); border-radius: 10px; resize: none; min-height: 38px; max-height: 100px; font-family: inherit; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .ai-panel-input-bar textarea:focus { border-color: var(--brand-500); box-shadow: var(--focus-ring); } .ai-panel-send { padding: 0 14px; background: var(--brand-500); color: #fff; border: none; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ai-panel-send:hover { background: var(--brand-600); } .ai-panel-send svg { width: 18px; height: 18px; } @media (max-width: 600px) { .ai-panel { right: 8px; left: 8px; width: auto; bottom: 80px; } .ai-fab { bottom: 16px; right: 16px; } } /* ============================================================ */ /* PHASE 3.5 — NOTIFICATIONS */ /* ============================================================ */ .notif-row { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background var(--t-fast); align-items: flex-start; } .notif-row:hover { background: var(--gray-50); } .notif-row:last-child { border-bottom: none; } .notif-row.unread { background: var(--brand-50); } .notif-row.unread:hover { background: var(--brand-100); } .notif-row.unread::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); } .notif-row { position: relative; padding-left: 18px; } .notif-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .notif-icon.info { background: var(--brand-50); color: var(--brand-600); } .notif-icon.success { background: var(--success-soft);color: var(--success); } .notif-icon.warning { background: var(--warning-soft);color: var(--warning); } .notif-icon.critical { background: var(--danger-soft); color: var(--danger); } .notif-content { flex: 1; min-width: 0; } .notif-title { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 2px; } .notif-msg { font-size: 12px; color: var(--text); line-height: 1.45; } .notif-time { font-size: 11px; color: var(--text-subtle); margin-top: 4px; font-variant-numeric: tabular-nums; } .notif-empty { text-align: center; padding: 32px 16px; color: var(--text-subtle); font-size: 13px; line-height: 1.5; } /* Scrollbar polish */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } ::-webkit-scrollbar-track { background: transparent; } .recon-tbl td.num, .recon-tbl th.num { text-align: right; } /* ============================================================ */ /* THEME TOGGLE (sun / moon) */ /* 3-state: light → dark → system. Icon swaps via JS class. */ /* ============================================================ */ .theme-toggle-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-alt); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 10px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); position: relative; overflow: hidden; } .theme-toggle-btn:hover { background: var(--hover-tint); border-color: var(--border-strong); color: var(--text-strong); transform: translateY(-1px); } .theme-toggle-btn:active { transform: translateY(0); } .theme-toggle-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .theme-toggle-btn .theme-icon-sun, .theme-toggle-btn .theme-icon-moon, .theme-toggle-btn .theme-icon-system { display: none; width: 18px; height: 18px; transition: opacity var(--t-base), transform var(--t-base); } /* Show one icon based on user's stored preference (set on ) */ [data-theme-pref="light"] .theme-icon-moon { display: block; } /* light → click goes to dark */ [data-theme-pref="dark"] .theme-icon-sun { display: block; } /* dark → click goes to system */ [data-theme-pref="system"] .theme-icon-system { display: block; } /* system → click goes to light */ /* Fallback before JS hydrates */ html:not([data-theme-pref]) .theme-icon-moon { display: block; } /* Subtle pulse on theme change */ @keyframes theme-spin { from { transform: rotate(0); opacity: 0.5; } to { transform: rotate(360deg); opacity: 1; } } .theme-toggle-btn.is-switching svg { animation: theme-spin 360ms ease-out; } /* Tooltip on hover (using title attr is fine, no extra CSS needed) */ /* Mobile compact */ @media (max-width: 640px) { .theme-toggle-btn { width: 32px; height: 32px; } .theme-toggle-btn svg { width: 16px; height: 16px; } } /* ============================================================ */ /* SIMPLIFIED DASHBOARD — KPI grid + 2-col rows */ /* ============================================================ */ .dash-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; } /* Settings page anchor nav (sticky tab bar) */ .settings-anchor-nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px; margin: 0 0 16px; background: var(--bg-soft, #f8fafc); border-bottom: 1px solid var(--border-color); backdrop-filter: saturate(180%) blur(6px); } [data-theme="dark"] .settings-anchor-nav { background: rgba(15,23,42,0.85); } .settings-anchor-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 999px; text-decoration: none; transition: all .15s ease; white-space: nowrap; } .settings-anchor-link:hover, .settings-anchor-link.is-active { color: var(--brand-500); border-color: var(--brand-500); background: var(--brand-soft, rgba(37,99,235,0.08)); } @media (min-width: 1280px) { .dash-kpi-grid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 720px) { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } } .dash-kpi { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); min-height: 88px; } .dash-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .dash-kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-kpi-body { flex: 1; min-width: 0; } .dash-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-kpi-value { font-size: 22px; font-weight: 700; color: var(--text-strong); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .dash-kpi-sub { font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; font-weight: 500; } .dash-row-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; } .dash-row-2 > .minimal-card { margin-bottom: 0; } .dash-row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; } .dash-row-3 > .minimal-card { margin-bottom: 0; } /* Aged Inventory bucket display */ .dash-aging-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 6px; } .dash-aging-bucket { text-align: center; padding: 10px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--surface-alt); } .dash-aging-bucket-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .dash-aging-bucket-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; font-weight: 600; } .dash-aging-bucket.b30 { background: var(--info-soft); border-color: var(--brand-200); } .dash-aging-bucket.b30 .dash-aging-bucket-num { color: var(--brand-600); } .dash-aging-bucket.b60 { background: var(--warning-soft); border-color: var(--warning); } .dash-aging-bucket.b60 .dash-aging-bucket-num { color: var(--warning); } .dash-aging-bucket.b90 { background: var(--danger-soft); border-color: var(--danger); } .dash-aging-bucket.b90 .dash-aging-bucket-num { color: var(--danger); } /* Staff-personal row — My Recent Sales + My Tasks Today */ .dash-staff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .dash-staff-row > .minimal-card { margin-bottom: 0; } /* Compact line item for "My Recent Sales" / "My Tasks Today" rows */ .staff-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 6px; font-size: 13px; } .staff-list-row:hover { border-color: var(--border-strong); } .staff-list-row .sl-main { flex: 1; min-width: 0; } .staff-list-row .sl-title { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .staff-list-row .sl-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .staff-list-row .sl-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--success); white-space: nowrap; } .staff-list-row .sl-status { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } .staff-list-row .sl-status.done { background: var(--success-soft); color: var(--success); } .staff-list-row .sl-status.pending { background: var(--warning-soft); color: var(--warning); } @media (max-width: 1024px) { .dash-row-2 { grid-template-columns: 1fr; } } @media (max-width: 800px) { .dash-staff-row { grid-template-columns: 1fr; } } @media (max-width: 700px) { .dash-row-3 { grid-template-columns: 1fr; } } /* Team Chat — full-page section variant */ .team-chat-section-card { padding: 0; overflow: hidden; } .team-chat-section-card .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); } .team-chat-wrap--full .team-chat-list { min-height: 480px; max-height: calc(100vh - 320px); } /* ============================================================ */ /* PHASE 10 — CASH FLOW POSITION (Bank balances + Transactions) */ /* ============================================================ */ .cf-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; } .cf-kpi { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow var(--t-base), border-color var(--t-base); position: relative; overflow: hidden; } .cf-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-500); opacity: 0.7; } .cf-kpi--brand::before { background: var(--brand-500); } .cf-kpi--success::before { background: var(--success); } .cf-kpi--info::before { background: var(--info); } .cf-kpi--danger::before { background: var(--danger); } .cf-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .cf-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-strong); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .cf-kpi-sub { font-size: 11.5px; color: var(--text-subtle); margin-top: 4px; } /* Bank balance grid — 8 wallet inputs */ .cf-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .cf-balance-cell { background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; transition: border-color var(--t-fast), background var(--t-fast); } .cf-balance-cell:focus-within { border-color: var(--brand-500); background: var(--card-bg); } .cf-balance-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .cf-balance-label .cf-wallet-icon { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; } .cf-balance-input { width: 100%; border: none; outline: none; background: transparent; color: var(--text-strong); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px 0; } .cf-balance-input::placeholder { color: var(--text-subtle); font-weight: 400; } /* Reconciliation banner */ .cf-recon-banner { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; display: flex; align-items: center; gap: 10px; } .cf-recon-banner.cf-recon--ok { background: var(--success-soft); border: 1px solid var(--success); color: var(--success); } .cf-recon-banner.cf-recon--warn { background: var(--warning-soft); border: 1px solid var(--warning); color: var(--warning); } .cf-recon-banner.cf-recon--danger { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); } /* Transaction entry form */ .cf-txn-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; } .cf-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } .cf-form-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; } /* Transaction list */ .cf-txn-list { display: flex; flex-direction: column; gap: 8px; } .cf-txn-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: border-color var(--t-fast); } .cf-txn-row:hover { border-color: var(--border-strong); } .cf-txn-cat-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .cf-txn-cat-pill.cat-sales { background: var(--success-soft); color: var(--success); } .cf-txn-cat-pill.cat-supplier { background: var(--warning-soft); color: var(--warning); } .cf-txn-cat-pill.cat-operating { background: var(--info-soft); color: var(--brand-600); } .cf-txn-cat-pill.cat-rent { background: var(--info-soft); color: var(--brand-600); } .cf-txn-cat-pill.cat-salary { background: var(--info-soft); color: var(--brand-600); } .cf-txn-cat-pill.cat-owner_drawing{ background: var(--danger-soft); color: var(--danger); } .cf-txn-cat-pill.cat-owner_capital{ background: var(--success-soft); color: var(--success); } .cf-txn-cat-pill.cat-transfer { background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border-color); } .cf-txn-cat-pill.cat-other_in { background: var(--success-soft); color: var(--success); } .cf-txn-cat-pill.cat-other_out { background: var(--danger-soft); color: var(--danger); } .cf-txn-body { min-width: 0; } .cf-txn-line1 { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-txn-line2 { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .cf-txn-amount { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .cf-txn-amount.in { color: var(--success); } .cf-txn-amount.out { color: var(--danger); } .cf-txn-del-btn { background: none; border: none; color: var(--text-subtle); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background var(--t-fast), color var(--t-fast); } .cf-txn-del-btn:hover { background: var(--danger-soft); color: var(--danger); } @media (max-width: 600px) { .cf-txn-row { grid-template-columns: 1fr auto; gap: 8px; } .cf-txn-cat-pill { grid-column: 1 / 2; } .cf-txn-body { grid-column: 1 / 3; } .cf-txn-amount { grid-column: 1 / 2; } .cf-txn-del-btn { grid-column: 2 / 3; } } /* ============================================================ */ /* PHASE 11 — HR & RECRUITMENT */ /* ============================================================ */ .hr-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; } .hr-kpi { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .hr-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-500); } .hr-kpi--brand::before { background: var(--brand-500); } .hr-kpi--success::before { background: var(--success); } .hr-kpi--info::before { background: var(--info); } .hr-kpi--warning::before { background: var(--warning); } .hr-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .hr-kpi-value { font-size: 26px; font-weight: 700; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; } .hr-kpi-sub { font-size: 11.5px; color: var(--text-subtle); margin-top: 4px; } /* Open Positions list */ .hr-positions-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .hr-position-card { background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .hr-position-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .hr-position-title { font-size: 14.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; } .hr-position-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; } .hr-position-skills { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; } .hr-skill-pill { background: var(--info-soft); color: var(--brand-600); font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .hr-position-actions { display: flex; gap: 6px; margin-top: 10px; } /* Application list */ .hr-app-list { display: flex; flex-direction: column; gap: 8px; } .hr-app-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } .hr-app-row:hover { border-color: var(--brand-500); background: var(--surface); } .hr-app-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-500), #7c3aed); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hr-app-body { min-width: 0; } .hr-app-name { font-size: 14px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hr-app-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .hr-app-score { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-md); font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; } .hr-app-score.score-high { background: var(--success-soft); color: var(--success); } .hr-app-score.score-mid { background: var(--warning-soft); color: var(--warning); } .hr-app-score.score-low { background: var(--danger-soft); color: var(--danger); } .hr-app-score.score-none { background: var(--surface-alt); color: var(--text-subtle); border: 1px dashed var(--border-color); } .hr-app-status-pill { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .hr-app-status-pill.s-pending { background: var(--warning-soft); color: var(--warning); } .hr-app-status-pill.s-reviewing { background: var(--info-soft); color: var(--brand-600); } .hr-app-status-pill.s-interview { background: var(--brand-100); color: var(--brand-700); } .hr-app-status-pill.s-hired { background: var(--success-soft); color: var(--success); } .hr-app-status-pill.s-rejected { background: var(--danger-soft); color: var(--danger); } @media (max-width: 600px) { .hr-app-row { grid-template-columns: auto 1fr; gap: 10px; } .hr-app-score { grid-column: 1 / 3; justify-self: end; } .hr-app-status-pill { grid-column: 1 / 3; justify-self: end; } } /* Public careers landing page (used in careers.html) */ .careers-page-wrap { min-height: 100vh; background: linear-gradient(135deg, var(--brand-50), var(--surface-alt)); padding: 32px 16px; } .careers-container { max-width: 720px; margin: 0 auto; } .careers-hero { text-align: center; margin-bottom: 32px; } .careers-hero h1 { font-size: 32px; font-weight: 700; color: var(--text-strong); margin-bottom: 8px; letter-spacing: -0.02em; } .careers-hero p { font-size: 14px; color: var(--text-muted); line-height: 1.6; } /* ============================================================ */ /* PHASE 12 — DAILY CLOSE (3-way reconciliation) */ /* ============================================================ */ .dc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; } .dc-kpi { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .dc-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .dc-kpi--source-a::before { background: var(--brand-500); } .dc-kpi--source-b::before { background: var(--success); } .dc-kpi--source-c::before { background: var(--warning); } .dc-kpi--variance::before { background: var(--danger); } .dc-kpi-tag { display: inline-block; font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--surface-alt); padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .dc-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .dc-kpi-value { font-size: 22px; font-weight: 700; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .dc-kpi-sub { font-size: 11.5px; color: var(--text-subtle); margin-top: 4px; } .dc-kpi--variance .dc-kpi-value.warn { color: var(--warning); } .dc-kpi--variance .dc-kpi-value.danger{ color: var(--danger); } .dc-kpi--variance .dc-kpi-value.ok { color: var(--success); } /* Reconciliation banner */ .dc-recon-banner { margin-bottom: 16px; padding: 14px 18px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.55; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-xs); } .dc-recon-banner.dc-recon--ok { background: var(--success-soft); border: 1px solid var(--success); color: var(--success); } .dc-recon-banner.dc-recon--warn { background: var(--warning-soft); border: 1px solid var(--warning); color: var(--warning); } .dc-recon-banner.dc-recon--danger { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); } .dc-recon-banner strong { font-weight: 700; } /* 3-source input grid */ .dc-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; } .dc-source-card { margin-bottom: 0 !important; padding: 16px 18px; } .dc-source-title { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; } .dc-source-letter { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; } .dc-source-letter--a { background: var(--brand-500); } .dc-source-letter--b { background: var(--success); } .dc-source-letter--c { background: var(--warning); } .dc-source-status { margin-left: auto; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-alt); color: var(--text-muted); } .dc-source-status.dc-source-status--saved { background: var(--success-soft); color: var(--success); } .dc-source-status.dc-source-status--auto { background: var(--warning-soft); color: var(--warning); } .dc-form-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } /* Audit list */ .dc-audit-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 12.5px; } .dc-audit-date { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; } .dc-audit-meta { color: var(--text-muted); font-size: 11.5px; } .dc-audit-status { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .dc-audit-status.closed { background: var(--success-soft); color: var(--success); } .dc-audit-status.open { background: var(--warning-soft); color: var(--warning); } /* ============================================================ */ /* MOBILE SIDEBAR FIX (cascade-order — v2 .sidebar overrode the */ /* earlier mobile @media rule because it came later in source. */ /* This block reasserts mobile collapse at the END of the file). */ /* ============================================================ */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: -280px; height: 100vh; width: 248px; z-index: 2001; transition: left var(--t-base); box-shadow: var(--shadow-lg); border-right: 1px solid var(--sb-divider); } .sidebar.open { left: 0; } .sidebar-overlay.open { display: block; } /* Main content takes full width when sidebar is collapsed */ .content { width: 100%; } .top-header { padding: 12px 16px; } .scroll-content { padding: 14px; width: 100%; overflow-x: hidden; } /* Reduce dashboard KPI grid gap on mobile */ .dash-kpi-grid, .cf-kpi-grid, .hr-kpi-grid, .dc-kpi-grid { gap: 10px; } /* Stack 3-source Daily Close grid as single column */ .dc-source-grid { grid-template-columns: 1fr; } } /* ============================================================ */ /* PHASE 13a — POS CASHIER (3-mode tabs + form) */ /* ============================================================ */ .pos-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border-color); overflow-x: auto; } .pos-tab { background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; padding: 10px 14px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); margin-bottom: -1px; white-space: nowrap; } .pos-tab:hover { background: var(--surface-alt); color: var(--text-strong); } .pos-tab.active { background: var(--card-bg); color: var(--brand-600); border-color: var(--border-color); border-bottom-color: var(--card-bg); } .pos-tab svg { flex-shrink: 0; } .pos-tab-sub { font-size: 10px; font-weight: 500; background: var(--surface-alt); padding: 2px 6px; border-radius: 4px; color: var(--text-subtle); margin-left: 2px; } .pos-tab.active .pos-tab-sub { background: var(--brand-50); color: var(--brand-600); } /* Form layout */ .pos-form { display: flex; flex-direction: column; gap: 14px; } .pos-form-section { background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; } .pos-form-section-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .pos-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .pos-form-row:last-child { margin-bottom: 0; } .pos-form-row > div { min-width: 0; } .pos-form-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } /* Auto-link preview */ .pos-link-preview { background: var(--info-soft); border: 1px solid var(--brand-200); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 4px; } .pos-link-preview-title { font-size: 12px; font-weight: 700; color: var(--brand-700); margin-bottom: 6px; } .pos-link-preview-list { list-style: none; margin: 0; padding: 0; } .pos-link-preview-list li { font-size: 12.5px; color: var(--text-main); padding: 3px 0; line-height: 1.5; } /* Vouchers list rows */ .pos-voucher-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 12.5px; } .pos-voucher-time { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; min-width: 48px; } .pos-voucher-meta { min-width: 0; } .pos-voucher-name { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-voucher-sub { font-size: 11.5px; color: var(--text-muted); } .pos-voucher-amount { font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; } .pos-voucher-method-pill { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border-color); } @media (max-width: 600px) { .pos-form-row { grid-template-columns: 1fr; } .pos-tab { padding: 8px 10px; font-size: 12px; } .pos-tab-sub { display: none; } .pos-voucher-row { grid-template-columns: 1fr auto; } .pos-voucher-time { grid-column: 1; } .pos-voucher-meta { grid-column: 1 / 3; } } /* ============================================================ */ /* PHASE 13b — Fine Categories (Settings) */ /* ============================================================ */ .fine-cat-form { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: end; } .fine-cat-list { display: flex; flex-direction: column; gap: 6px; } .fine-cat-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13px; } .fine-cat-row:hover { border-color: var(--border-strong); } .fine-cat-label { font-weight: 600; color: var(--text-strong); } .fine-cat-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--danger); background: var(--danger-soft); padding: 3px 9px; border-radius: 999px; font-size: 12px; } .fine-cat-del { background: none; border: none; color: var(--text-subtle); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background var(--t-fast), color var(--t-fast); } .fine-cat-del:hover { background: var(--danger-soft); color: var(--danger); } @media (max-width: 600px) { .fine-cat-form { grid-template-columns: 1fr; } } /* ============================================================ */ /* PHASE 13c — Error Deductions form + list */ /* ============================================================ */ .err-ded-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; } .err-ded-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 12.5px; } .err-ded-month { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; min-width: 64px; } .err-ded-meta { min-width: 0; } .err-ded-staff { font-weight: 600; color: var(--text-strong); } .err-ded-reason { font-size: 11.5px; color: var(--text-muted); } .err-ded-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--danger); } .err-ded-del { background: none; border: none; color: var(--text-subtle); cursor: pointer; padding: 4px 8px; border-radius: 6px; } .err-ded-del:hover { background: var(--danger-soft); color: var(--danger); } @media (max-width: 700px) { .err-ded-form { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .err-ded-form { grid-template-columns: 1fr; } } /* ============================================================ */ /* PHASE 14a — Trade-in Pricing Rules (Settings) */ /* ============================================================ */ .ti-rules-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 14px; overflow-x: auto; } .ti-rules-tab { background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; padding: 8px 12px; cursor: pointer; color: var(--text-muted); font-size: 12.5px; font-weight: 600; margin-bottom: -1px; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .ti-rules-tab:hover { background: var(--surface-alt); color: var(--text-strong); } .ti-rules-tab.active { background: var(--card-bg); color: var(--brand-600); border-color: var(--border-color); border-bottom-color: var(--card-bg); } .ti-rules-form-grid { display: grid; gap: 8px; } .ti-grid-3 { grid-template-columns: 2fr 1fr auto; } .ti-grid-4 { grid-template-columns: 1fr 1fr 1fr auto; } .ti-rules-list { display: flex; flex-direction: column; gap: 4px; } .ti-rule-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 12px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 12.5px; } .ti-rule-label { font-weight: 600; color: var(--text-strong); } .ti-rule-amount { font-weight: 700; font-variant-numeric: tabular-nums; background: var(--info-soft); color: var(--brand-700); padding: 2px 9px; border-radius: 999px; font-size: 12px; } .ti-rule-amount.deduction { background: var(--danger-soft); color: var(--danger); } .ti-rule-amount.bonus { background: var(--success-soft); color: var(--success); } .ti-rule-del { background: none; border: none; color: var(--text-subtle); cursor: pointer; padding: 2px 6px; border-radius: 4px; } .ti-rule-del:hover { background: var(--danger-soft); color: var(--danger); } @media (max-width: 700px) { .ti-grid-3, .ti-grid-4 { grid-template-columns: 1fr; } } /* ============================================================ */ /* PHASE 14b — Trade-in Estimator + Code display */ /* ============================================================ */ .tie-acc-checklist label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: 999px; font-size: 12.5px; cursor: pointer; transition: background var(--t-fast); } .tie-acc-checklist label:hover { background: var(--hover-tint); } .tie-acc-checklist input { margin: 0; } .tie-estimate-card { background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; } .tie-est-total { font-size: 28px; font-weight: 700; color: var(--success); text-align: center; margin-bottom: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .tie-est-label { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .tie-est-line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed var(--border-color); } .tie-est-line:last-child { border-bottom: none; } .tie-est-line .neg { color: var(--danger); font-variant-numeric: tabular-nums; } .tie-est-line .pos { color: var(--success); font-variant-numeric: tabular-nums; } .tie-est-line .base { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .tie-warning { background: var(--warning-soft); border: 1px solid var(--warning); color: var(--warning); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; margin-bottom: 8px; } /* Trade-in code box (shown after confirm) */ .tie-code-card { background: linear-gradient(135deg, var(--brand-50), var(--info-soft)); border: 2px solid var(--brand-500); border-radius: var(--radius-lg); padding: 18px; text-align: center; } .tie-code-label { font-size: 11.5px; color: var(--brand-700); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 6px; } .tie-code-value { font-size: 26px; font-weight: 700; color: var(--brand-700); font-family: 'SF Mono', monospace; letter-spacing: 0.04em; padding: 8px 12px; background: var(--card-bg); border-radius: var(--radius-md); display: inline-block; margin: 4px 0; } .tie-code-help { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; } /* Recent drafts list */ .tie-recent-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 5px; font-size: 12px; } .tie-recent-code { font-family: 'SF Mono', monospace; font-weight: 700; color: var(--brand-700); } .tie-recent-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } .tie-recent-status.pending { background: var(--warning-soft); color: var(--warning); } .tie-recent-status.redeemed { background: var(--success-soft); color: var(--success); } .tie-recent-status.expired { background: var(--surface-alt); color: var(--text-muted); } /* ============================================================ */ /* PHASE 15 — Bonus Configuration + Yearly Bonus */ /* ============================================================ */ .bonus-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .bonus-tier-card { background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; border-top: 3px solid var(--brand-500); } .bonus-tier-card[data-tier="1"] { border-top-color: var(--info); } .bonus-tier-card[data-tier="2"] { border-top-color: var(--warning); } .bonus-tier-card[data-tier="3"] { border-top-color: var(--success); } .bonus-tier-name { font-size: 12px; font-weight: 700; color: var(--text-strong); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; } .bonus-tier-row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 6px; } .bonus-tier-row label { font-size: 11px; color: var(--text-muted); font-weight: 600; } .bonus-tier-row .custom-input { padding: 5px 8px; font-size: 12.5px; } .bonus-mult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bonus-mult-row { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 8px 12px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .bonus-mult-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-strong); font-weight: 600; white-space: nowrap; } .bm-input { width: 60px !important; padding: 3px 6px !important; font-size: 12px !important; text-align: center; } .bm-help { font-size: 11px; color: var(--text-muted); text-align: right; } .bonus-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bonus-kpi-grid .dc-form-label { margin-bottom: 4px; } @media (max-width: 700px) { .bonus-mult-grid { grid-template-columns: 1fr; } .bonus-kpi-grid { grid-template-columns: 1fr 1fr; } } /* Yearly Bonus computation table */ .bonus-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .bonus-table th, .bonus-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border-color); } .bonus-table th { background: var(--surface-alt); font-weight: 700; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; } .bonus-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .bonus-table tr:hover td { background: var(--hover-tint); } .bonus-tier-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .bonus-tier-pill.t1 { background: var(--info-soft); color: var(--brand-600); } .bonus-tier-pill.t2 { background: var(--warning-soft); color: var(--warning); } .bonus-tier-pill.t3 { background: var(--success-soft); color: var(--success); } .bonus-final { font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; } .bonus-final.zero { color: var(--danger); } /* My Bonus card on staff dashboard */ .my-bonus-card { background: linear-gradient(135deg, var(--brand-50), var(--info-soft)); border: 1px solid var(--brand-200); border-radius: var(--radius-lg); padding: 18px 20px; } .my-bonus-tier { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--card-bg); color: var(--brand-700); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .my-bonus-amount { font-size: 28px; font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-top: 6px; } .my-bonus-formula { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; font-family: 'SF Mono', monospace; } .my-bonus-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-color); } .my-bonus-kpi-cell { text-align: center; } .my-bonus-kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .my-bonus-kpi-val { font-size: 16px; font-weight: 700; color: var(--text-strong); margin-top: 2px; font-variant-numeric: tabular-nums; } /* ============================================================ */ /* PHASE 15B — Security PIN + Biometric */ /* ============================================================ */ .sec-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 700px) { .sec-form-grid { grid-template-columns: 1fr; } } /* Lock overlay covering a section until unlocked */ .sec-lock-overlay { position: relative; } .sec-lock-overlay.sec-locked > .sec-lock-content { filter: blur(8px); pointer-events: none; user-select: none; } .sec-lock-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-lg); } .sec-lock-mask-icon { font-size: 48px; margin-bottom: 6px; } .sec-lock-mask-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; } .sec-lock-mask-help { font-size: 12.5px; color: rgba(255,255,255,0.85); margin-bottom: 14px; text-align: center; padding: 0 16px; } .sec-lock-mask-btn { padding: 10px 24px; background: var(--brand-500); color: #fff; border: none; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); } .sec-lock-mask-btn:hover { background: var(--brand-600); transform: translateY(-1px); } /* ============================================================ */ /* 📦 INVENTORY — Stock Count / Variances / Reports */ /* Ported from inventory-app PWA. Mobile-first, scan-friendly. */ /* ============================================================ */ /* Session-type tiles on Stock Count home */ .sc-type-tile { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 18px 16px; cursor: pointer; text-align: left; transition: all .15s ease; display: flex; flex-direction: column; gap: 4px; } .sc-type-tile:hover { border-color: var(--brand-500); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,0.10); } .sc-type-tile[data-tier="A"] { border-left: 3px solid #ef4444; } .sc-type-tile[data-tier="B"] { border-left: 3px solid #f59e0b; } .sc-type-tile[data-tier="C"] { border-left: 3px solid #10b981; } .sc-type-tile-emoji { font-size: 24px; } .sc-type-tile-name { font-size: 14px; font-weight: 700; color: var(--text-strong); } .sc-type-tile-sub { font-size: 12px; color: var(--text-muted); } .sc-type-tile-meta { font-size: 11px; color: var(--text-subtle); font-style: italic; margin-top: 2px; } /* Scan view — full-screen-ish on mobile */ .sc-scan-shell { display: flex; flex-direction: column; gap: 14px; } .sc-scan-progress { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--bg-soft, #f8fafc); border-radius: var(--radius-md); font-size: 13px; } [data-theme="dark"] .sc-scan-progress { background: rgba(15,23,42,0.55); } .sc-scan-progress__num { font-size: 22px; font-weight: 700; color: var(--brand-500); } .sc-scan-camera { width: 100%; aspect-ratio: 1 / 1; max-height: 360px; background: #000; border-radius: var(--radius-md); overflow: hidden; position: relative; } .sc-scan-camera:empty::before { content: "📷 Camera will load when scan starts"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 13px; } .sc-scan-result { padding: 12px 14px; border-radius: var(--radius-md); border-left: 4px solid var(--brand-500); background: var(--bg-soft, #f8fafc); } .sc-scan-result.is-matched { border-left-color: #10b981; background: rgba(16,185,129,0.06); } .sc-scan-result.is-unmatched { border-left-color: #ef4444; background: rgba(239,68,68,0.06); } .sc-scan-result.is-duplicate { border-left-color: #f59e0b; background: rgba(245,158,11,0.06); } .sc-scan-result__title { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; } .sc-scan-manual { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; } .sc-scan-manual input[type="number"] { display: block !important; } /* Variance list rows */ .var-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(160px, 2fr) auto auto auto; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); align-items: center; font-size: 13px; } .var-row:last-child { border-bottom: none; } .var-row:hover { background: var(--bg-soft, #f8fafc); cursor: pointer; } .var-row__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--brand-500); } .var-row__amount.is-negative { color: var(--danger, #ef4444); font-weight: 600; } .var-row__amount.is-positive { color: var(--success, #10b981); font-weight: 600; } .var-row__status { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .var-row__status--open { background: rgba(239,68,68,0.12); color: #ef4444; } .var-row__status--investigating { background: rgba(245,158,11,0.12); color: #f59e0b; } .var-row__status--resolved { background: rgba(16,185,129,0.12); color: #10b981; } .var-row__status--written_off { background: rgba(107,114,128,0.12); color: #6b7280; } @media (max-width: 600px) { .var-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; } .sc-scan-manual { grid-template-columns: 1fr; } }