/* ══════════════════════════════════════════ Auto Track Pro v3.0 — Accessible Color System ✅ WCAG AA contrast ratios in both modes ══════════════════════════════════════════ */ /* ─── Light Mode Variables ─── */ :root { --bg-color: #f0f4f8; --surface-color: #ffffff; --surface-alt: #f8fafc; --primary: #dc2626; --primary-color: #dc2626; --primary-light: #ef4444; --primary-dark: #b91c1c; --primary-rgb: 220,38,38; --text-main: #111827; --text-muted: #4b5563; --text-on-dark: #ffffff; --border-color: #d1d5db; --success: #059669; --success-bg: #ecfdf5; --warning: #d97706; --warning-bg: #fffbeb; --danger: #dc2626; --danger-bg: #fef2f2; --info: #2563eb; --info-bg: #eff6ff; --agencies: #7c3aed; --hold: #db2777; --shadow-sm: 0 2px 8px rgba(0,0,0,0.07); --shadow-md: 0 4px 20px rgba(0,0,0,0.08); --shadow-lg: 0 10px 40px rgba(0,0,0,.15); --sidebar-bg: #1e293b; --sidebar-text: #cbd5e1; --sidebar-active: rgba(220,38,38,.15); --card-glow: rgba(220,38,38,.04); --scrollbar-bg: #f1f5f9; --scrollbar-thumb:#cbd5e1; } /* ═══════════════════════════════════════════════════════════ THEME OVERRIDES — [data-theme] on These override :root variables for each theme. Higher specificity wins over :root. ═══════════════════════════════════════════════════════════ */ /* ── DARK ───────────────────────────────────────────── */ html[data-theme="dark"] { --bg-color: #0f172a; --surface-color: #1e293b; --surface-alt: #162032; --primary: #dc2626; --primary-color: #dc2626; --primary-light: #ef4444; --primary-dark: #b91c1c; --primary-rgb: 220,38,38; --border-color: #334155; --text-main: #f1f5f9; --text-muted: #94a3b8; --success-bg: #052e16; --warning-bg: #1c1101; --danger-bg: #1f0a0a; --info-bg: #0c1a3a; --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 4px 20px rgba(0,0,0,.4); --shadow-lg: 0 10px 40px rgba(0,0,0,.6); --sidebar-bg: #0f172a; --sidebar-text: #cbd5e1; --sidebar-active: rgba(220,38,38,.15); --card-glow: rgba(220,38,38,.08); --scrollbar-bg: #1e293b; --scrollbar-thumb:#334155; } /* ── LIGHT ──────────────────────────────────────────── */ html[data-theme="light"] { --bg-color: #f8fafc; --surface-color: #ffffff; --surface-alt: #f1f5f9; --primary: #dc2626; --primary-color: #dc2626; --primary-light: #ef4444; --primary-dark: #b91c1c; --primary-rgb: 220,38,38; --border-color: #e2e8f0; --text-main: #0f172a; --text-muted: #64748b; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.1); --shadow-lg: 0 10px 40px rgba(0,0,0,.15); --sidebar-bg: #1e293b; --sidebar-text: #cbd5e1; --sidebar-active: rgba(220,38,38,.12); --card-glow: rgba(220,38,38,.04); --scrollbar-bg: #f1f5f9; --scrollbar-thumb:#cbd5e1; } /* ── VIOLET ─────────────────────────────────────────── */ html[data-theme="violet"] { --bg-color: #0d0d1a; --surface-color: #1a1a2e; --surface-alt: #12122a; --primary: #7c3aed; --primary-color: #7c3aed; --primary-light: #8b5cf6; --primary-dark: #6d28d9; --primary-rgb: 124,58,237; --border-color: #2d2d5c; --text-main: #ede9fe; --text-muted: #a78bfa; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #06b6d4; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(124,58,237,.3); --shadow-lg: 0 10px 40px rgba(124,58,237,.4); --sidebar-bg: #0d0d1a; --sidebar-text: #c4b5fd; --sidebar-active: rgba(124,58,237,.2); --card-glow: rgba(124,58,237,.1); } /* ── OCEAN ──────────────────────────────────────────── */ html[data-theme="ocean"] { --bg-color: #060d1a; --surface-color: #0f1f36; --surface-alt: #091629; --primary: #0ea5e9; --primary-color: #0ea5e9; --primary-light: #38bdf8; --primary-dark: #0284c7; --primary-rgb: 14,165,233; --border-color: #1e3a5f; --text-main: #e0f2fe; --text-muted: #7dd3fc; --success: #10b981; --danger: #ef4444; --warning: #fbbf24; --info: #38bdf8; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(14,165,233,.3); --shadow-lg: 0 10px 40px rgba(14,165,233,.4); --sidebar-bg: #060d1a; --sidebar-text: #bae6fd; --sidebar-active: rgba(14,165,233,.2); --card-glow: rgba(14,165,233,.08); } /* ── FOREST ─────────────────────────────────────────── */ html[data-theme="forest"] { --bg-color: #051208; --surface-color: #0d2112; --surface-alt: #071a0a; --primary: #059669; --primary-color: #059669; --primary-light: #10b981; --primary-dark: #047857; --primary-rgb: 5,150,105; --border-color: #1a4025; --text-main: #d1fae5; --text-muted: #6ee7b7; --success: #34d399; --danger: #ef4444; --warning: #fbbf24; --info: #38bdf8; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(5,150,105,.3); --shadow-lg: 0 10px 40px rgba(5,150,105,.4); --sidebar-bg: #051208; --sidebar-text: #a7f3d0; --sidebar-active: rgba(5,150,105,.2); --card-glow: rgba(5,150,105,.08); } /* ── SUNSET ─────────────────────────────────────────── */ html[data-theme="sunset"] { --bg-color: #0f0802; --surface-color: #1f1206; --surface-alt: #180d04; --primary: #f97316; --primary-color: #f97316; --primary-light: #fb923c; --primary-dark: #ea580c; --primary-rgb: 249,115,22; --border-color: #3d1f08; --text-main: #fff7ed; --text-muted: #fdba74; --success: #10b981; --danger: #ef4444; --warning: #fbbf24; --info: #38bdf8; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(249,115,22,.3); --shadow-lg: 0 10px 40px rgba(249,115,22,.4); --sidebar-bg: #0f0802; --sidebar-text: #fed7aa; --sidebar-active: rgba(249,115,22,.2); --card-glow: rgba(249,115,22,.08); } /* ── MIDNIGHT ───────────────────────────────────────── */ html[data-theme="midnight"] { --bg-color: #000008; --surface-color: #0a0a18; --surface-alt: #050510; --primary: #6366f1; --primary-color: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --primary-rgb: 99,102,241; --border-color: #1a1a35; --text-main: #e8e8ff; --text-muted: #818cf8; --success: #10b981; --danger: #f87171; --warning: #fbbf24; --info: #38bdf8; --shadow-sm: 0 1px 3px rgba(0,0,0,.6); --shadow-md: 0 4px 16px rgba(99,102,241,.35); --shadow-lg: 0 10px 40px rgba(99,102,241,.5); --sidebar-bg: #000008; --sidebar-text: #c7d2fe; --sidebar-active: rgba(99,102,241,.25); --card-glow: rgba(99,102,241,.1); } /* ── ROSE ───────────────────────────────────────────── */ html[data-theme="rose"] { --bg-color: #0f0208; --surface-color: #1f0612; --surface-alt: #18040e; --primary: #e11d48; --primary-color: #e11d48; --primary-light: #fb7185; --primary-dark: #be123c; --primary-rgb: 225,29,72; --border-color: #3d0f20; --text-main: #fff1f2; --text-muted: #fda4af; --success: #10b981; --danger: #ef4444; --warning: #fbbf24; --info: #38bdf8; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(225,29,72,.3); --shadow-lg: 0 10px 40px rgba(225,29,72,.4); --sidebar-bg: #0f0208; --sidebar-text: #fecdd3; --sidebar-active: rgba(225,29,72,.2); --card-glow: rgba(225,29,72,.08); } /* ─── Legacy dark-mode class (keep for compatibility) ─── */ body.dark-mode { --bg-color: #0f172a; --surface-color: #1e293b; --surface-alt: #263347; --text-main: #f1f5f9; --text-muted: #94a3b8; --border-color: #334155; --success-bg: #052e16; --warning-bg: #1c1101; --danger-bg: #1f0a0a; --info-bg: #0c1a3a; --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 4px 20px rgba(0,0,0,.4); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Cairo', sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; transition: background-color 0.3s, color 0.3s; } /* ─── Layout ─── */ .app-container { display: flex; flex-direction: row-reverse; /* RTL: sidebar on right, content on left */ width: 100%; min-height: 100vh; align-items: flex-start; } .sidebar { background: var(--sidebar-bg, var(--surface-color)); border-left: 1px solid var(--border-color); z-index: 10; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; width: 260px; min-width: 260px; max-width: 260px; flex-shrink: 0; padding-top: 20px; position: sticky; top: 0; height: 100vh; box-shadow: var(--shadow-sm); transition: background 0.3s, border-color 0.3s; } .main-content { flex: 1; min-width: 0; /* prevent flex overflow */ padding: 24px 32px; padding-bottom: 60px; overflow-x: hidden; display: flex; flex-direction: column; } /* ─── Nav Links ─── */ .nav-link { padding: 13px 20px; cursor: pointer; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 10px; transition: all 0.2s; border-radius: 0; font-size: 0.9rem; } .nav-link:hover { background: rgba(220, 38, 38, 0.08); color: var(--primary-color); } .nav-link.active { color: var(--primary-color); background: rgba(220, 38, 38, 0.12); border-right: 4px solid var(--primary-color); font-weight: 800; } /* ─── Cards ─── */ .card { background: var(--surface-color); padding: 22px; border-radius: 16px; border: 1px solid var(--border-color); margin-bottom: 20px; box-shadow: var(--shadow-sm); transition: background 0.3s, border-color 0.3s; } .card h2, .card h3, .card h4 { color: var(--text-main); } /* ─── Form Controls ─── */ .form-control { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border-color); border-radius: 10px; font-family: 'Cairo', sans-serif; transition: all 0.3s; margin-bottom: 12px; background: var(--surface-color); color: var(--text-main); font-size: 0.92rem; } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); background: var(--surface-color); } .form-control::placeholder { color: var(--text-muted); opacity: 0.7; } select.form-control { cursor: pointer; } /* ─── Buttons ─── */ .btn { padding: 12px 22px; background: var(--primary-color); color: #fff; border: none; border-radius: 10px; font-weight: 800; cursor: pointer; transition: all 0.25s ease; font-family: 'Cairo', sans-serif; display: inline-block; text-decoration: none; text-align: center; font-size: 0.9rem; letter-spacing: 0.01em; } .btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,0.2); filter: brightness(1.08); } .btn:active { transform: translateY(0); box-shadow: none; } .btn-success { background: var(--success); } .btn-warning { background: var(--warning); color: #fff; } .btn-danger { background: var(--danger); } .btn-agencies{ background: var(--agencies); } .btn-hold { background: var(--hold); } .btn-light { background: var(--surface-color); color: var(--text-main); border: 1.5px solid var(--border-color); } .btn-light:hover { background: var(--surface-alt); } .btn-sm { padding: 7px 14px; font-size: 0.82rem; border-radius: 8px; } /* ─── Badges ─── */ .badge { padding: 4px 11px; border-radius: 20px; font-size: 0.78rem; font-weight: 800; color: #fff; display: inline-block; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* ─── Alerts ─── */ .alert { padding: 13px 18px; border-radius: 10px; margin-bottom: 15px; font-weight: 600; font-size: 0.88rem; border-width: 1px; border-style: solid; } .alert-success { background: var(--success-bg); color: #065f46; border-color: #6ee7b7; } .alert-error { background: var(--danger-bg); color: #991b1b; border-color: #fca5a5; } .alert-warning { background: var(--warning-bg); color: #92400e; border-color: #fcd34d; } .alert-info { background: var(--info-bg); color: #1e40af; border-color: #93c5fd; } .dark-mode .alert-success { color: #6ee7b7; border-color: #065f46; } .dark-mode .alert-error { color: #fca5a5; border-color: #991b1b; } .dark-mode .alert-warning { color: #fcd34d; border-color: #92400e; } .dark-mode .alert-info { color: #93c5fd; border-color: #1e40af; } /* ─── Tables ─── */ .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--border-color); } .data-table th { background: var(--surface-alt); font-weight: 800; color: var(--text-muted); font-size: 0.82rem; } .data-table tr:hover td { background: rgba(220,38,38,0.03); } .dark-mode .data-table th { background: var(--surface-alt); color: var(--text-muted); } .dark-mode .data-table tr:hover td { background: rgba(255,255,255,0.04); } /* ─── Inventory Table (inline styles fix for dark mode) ─── */ .dark-mode table td, .dark-mode table th { color: var(--text-main) !important; } .dark-mode table tr { border-color: var(--border-color) !important; } /* ─── Inventory colored cell backgrounds in dark mode ─── */ .dark-mode td[style*="background:rgba(147,51,234"] { background: rgba(147,51,234,0.25) !important; } .dark-mode td[style*="background:rgba(8,145,178"] { background: rgba(8,145,178,0.22) !important; } .dark-mode td[style*="background:rgba(245,158,11"] { background: rgba(245,158,11,0.18) !important; } .dark-mode td[style*="background:rgba(99,102,241"] { background: rgba(99,102,241,0.22) !important; } .dark-mode td[style*="background:rgba(239,68,68"] { background: rgba(239,68,68,0.35) !important; color: #fca5a5 !important; } .dark-mode td[style*="background:rgba(249,115,22"] { background: rgba(249,115,22,0.25) !important; } /* ─── Stat Cards in dark mode ─── */ .dark-mode .stat-card h4 { color: var(--text-muted) !important; } .dark-mode .stat-card h2 { color: inherit; } /* ─── Ticket Items ─── */ .ticket-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 14px; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; box-shadow: var(--shadow-sm); transition: all 0.25s; } .ticket-item:hover { border-color: #94a3b8; box-shadow: var(--shadow-md); } .dark-mode .ticket-item { background: var(--surface-color) !important; border-color: var(--border-color) !important; } /* ─── Search ─── */ .search-bar { width: 100%; padding: 12px 16px; margin-bottom: 15px; border-radius: 10px; border: 1.5px solid var(--border-color); background: var(--surface-color); color: var(--text-main); font-family: 'Cairo'; font-size: 0.92rem; } .search-bar::placeholder { color: var(--text-muted); } /* ─── Global Announcement ─── */ .global-announcement { width: 100%; position: fixed; top: 0; left: 0; z-index: 999999; text-align: center; padding: 12px; font-size: 1.05rem; font-weight: bold; color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.25); cursor: pointer; } /* ─── HR Sub-Nav ─── */ .hr-sub-nav { display: flex; gap: 5px; background: var(--surface-color); backdrop-filter: blur(10px); padding: 8px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 20px; position: sticky; top: 0; z-index: 100; overflow-x: auto; scrollbar-width: none; box-shadow: var(--shadow-sm); } .hr-sub-nav::-webkit-scrollbar { display: none; } .hr-sub-btn { padding: 9px 18px; border-radius: 9px; cursor: pointer; font-weight: 700; color: var(--text-muted); transition: all 0.25s; white-space: nowrap; border: 1px solid transparent; font-size: 0.83rem; display: flex; align-items: center; gap: 7px; text-decoration: none; } .hr-sub-btn:hover { background: var(--surface-alt); color: var(--primary-color); } .hr-sub-btn.active { background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,0.3); } .dark-mode .hr-sub-nav { background: var(--surface-color); border-color: var(--border-color); } .dark-mode .hr-sub-btn { color: var(--text-muted); } .dark-mode .hr-sub-btn:hover { background: var(--surface-alt); color: #f1f5f9; } .dark-mode .hr-sub-btn.active { color: #fff; } /* ─── Stats Grid ─── */ .stats-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .stat-card { flex: 1; min-width: 140px; text-align: center; padding: 20px; border-radius: 14px; } /* ─── Data Grid ─── */ .data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; } /* ─── Modal ─── */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(5px); z-index: 10000; justify-content: center; align-items: center; padding: 20px; overflow-y: auto; } .modal-overlay.active { display: flex; } .modal-overlay > .card { animation: modalSlideIn 0.3s ease; max-height: 90vh; overflow-y: auto; width: 100%; max-width: 700px; } .modal { background: var(--surface-color); width: 100%; max-width: 700px; padding: 25px; border-radius: 16px; max-height: 90vh; overflow-y: auto; } .dark-mode .modal { background: var(--surface-color); border: 1px solid var(--border-color); } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ─── Pagination ─── */ .pagination { display: flex; justify-content: center; gap: 5px; margin-top: 20px; flex-wrap: wrap; } .pagination a, .pagination span { padding: 8px 13px; border-radius: 8px; border: 1px solid var(--border-color); color: var(--text-main); text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: 0.2s; } .pagination a:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } .pagination .active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } /* ─── Empty State ─── */ .empty-state { text-align: center; padding: 40px; color: var(--text-muted); } .empty-state span { font-size: 3rem; display: block; margin-bottom: 10px; } /* ─── ATS Board ─── */ .ats-board { display: flex; gap: 15px; overflow-x: auto; padding: 15px 5px; min-height: 400px; } .ats-column { min-width: 250px; flex: 1; background: var(--surface-alt); border-radius: 12px; padding: 12px; border: 1px dashed var(--border-color); } .ats-card { background: var(--surface-color); padding: 12px; border-radius: 10px; border-right: 4px solid var(--primary-color); margin-bottom: 10px; box-shadow: var(--shadow-sm); } .dark-mode .ats-column { background: var(--surface-alt); } .dark-mode .ats-card { background: var(--surface-color); } /* ─── Dark Mode: Core overrides ─── */ .dark-mode .nav-link:hover { background: rgba(248,250,252,0.06); } .dark-mode .form-control { background: #263347 !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } .dark-mode .form-control::placeholder { color: #64748b !important; } .dark-mode .btn-light { background: #263347; color: var(--text-main); border-color: var(--border-color); } .dark-mode .btn-light:hover { background: #334155; } .dark-mode .card { background: var(--surface-color); border-color: var(--border-color); } .dark-mode .card h2, .dark-mode .card h3, .dark-mode h2, .dark-mode h3, .dark-mode h4 { color: var(--text-main); } .dark-mode p, .dark-mode label, .dark-mode span { color: inherit; } /* Fix inline white backgrounds in inventory table */ .dark-mode table td[style*="background:#fff"], .dark-mode table td[style*="background: #fff"], .dark-mode table td[style*="background:white"], .dark-mode table td[style*="background: white"] { background: var(--surface-color) !important; } /* Fix inventory table row backgrounds */ .dark-mode table tr[style*="background:rgba(239,68,68,0.05)"] { background: rgba(239,68,68,0.12) !important; } .dark-mode table tr[style*="background:rgba(249,115,22,0.08)"] { background: rgba(249,115,22,0.15) !important; } /* Fix filter quick-buttons in dark mode */ .dark-mode button[style*="background:#f8f8f8"], .dark-mode button[style*="background: #f8f8f8"] { background: #263347 !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } /* Fix thead red header */ .dark-mode thead tr[style*="background:#dc2626"] th { color: #fff !important; } /* Fix pipeline/board card inline white */ .dark-mode [style*="background:white"], .dark-mode [style*="background: white"], .dark-mode [style*="background:#ffffff"], .dark-mode [style*="background: #ffffff"] { background: var(--surface-color) !important; } /* Fix inline text colors in dark mode */ .dark-mode [style*="color:#1e293b"], .dark-mode [style*="color: #1e293b"], .dark-mode [style*="color:#111827"], .dark-mode [style*="color: #111827"] { color: var(--text-main) !important; } .dark-mode [style*="color:#374151"], .dark-mode [style*="color: #374151"] { color: var(--text-muted) !important; } /* Fix search results */ #search-results div:hover { background: var(--surface-alt); } .dark-mode #search-results { background: var(--surface-color); border-color: var(--border-color); color: var(--text-main); } .dark-mode #search-results div { color: var(--text-main); } .dark-mode #search-results div:hover { background: var(--surface-alt); } /* ─── Animations ─── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .fade-in { animation: fadeIn 0.3s ease-out; } .slide-up { animation: slideUp 0.3s ease-out; } /* ─── Scrollbar (Desktop) ─── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ─── Table hover ─── */ table tr:hover td { background: rgba(220,38,38,0.025) !important; } .dark-mode table tr:hover td { background: rgba(255,255,255,0.04) !important; } /* ════════════════════════════════════════ 📱 MOBILE FIRST — Full App Experience ════════════════════════════════════════ */ /* Remove tap highlight on mobile */ * { -webkit-tap-highlight-color: transparent; } /* Prevent text size adjust on rotate */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ─── Mobile: Bottom Tab Bar (< 768px) ─── */ @media (max-width: 768px) { /* Safe area for notch/home bar */ :root { --safe-bottom: env(safe-area-inset-bottom, 0px); --tab-bar-height: 64px; } body { overscroll-behavior-y: contain; } .app-container { flex-direction: column; padding-bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 10px); } /* ── Bottom Tab Bar ── */ .sidebar { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: calc(var(--tab-bar-height) + var(--safe-bottom)); padding: 0 0 var(--safe-bottom) 0; flex-direction: row; justify-content: space-around; align-items: flex-start; border-left: none; border-top: 1px solid var(--border-color); overflow-x: auto; overflow-y: hidden; z-index: 1000; background: var(--surface-color); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); scrollbar-width: none; box-shadow: 0 -2px 20px rgba(0,0,0,0.08); border-radius: 0; padding-top: 0; } .sidebar::-webkit-scrollbar { display: none; } /* Hide elements marked as desktop-only using .mobile-hidden class */ /* (sidebar h2, search box, section labels, footer, logout) */ .mobile-hidden { display: none !important; } /* ── Nav Tabs ── */ .nav-link { flex: 1; min-width: 56px; max-width: 90px; padding: 10px 4px 6px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.6rem; font-weight: 700; border-right: none !important; border-bottom: 3px solid transparent; border-radius: 0; white-space: nowrap; min-height: var(--tab-bar-height); color: var(--text-muted); transition: color 0.2s, border-color 0.2s; } .nav-link > span:first-child { font-size: 1.4rem; line-height: 1; } .nav-link:hover { background: transparent; } .nav-link.active { color: var(--primary-color); background: transparent; border-bottom: 3px solid var(--primary-color); border-right: none; } /* Nav label shown under icon on mobile */ .nav-label { display: block; font-size: 0.58rem; line-height: 1; } /* mobile-only items shown in mobile tab bar */ .mobile-only { display: flex !important; } /* ── Main Content ── */ .main-content { padding: 12px 12px 4px !important; padding-bottom: 8px !important; max-width: 100% !important; width: 100%; } /* ── Cards ── */ .card { padding: 14px; margin-bottom: 12px; border-radius: 14px; } /* ── Stats Grid: 2 columns on mobile ── */ .stats-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; } /* ── Data Grid: 1 column ── */ .data-grid { grid-template-columns: 1fr; } /* ── Sub-Nav: horizontal scroll ── */ .hr-sub-nav { position: static; margin-bottom: 12px; border-radius: 10px; padding: 6px; gap: 4px; } .hr-sub-btn { padding: 8px 14px; font-size: 0.8rem; border-radius: 8px; } /* ── Bigger touch targets for forms ── */ .form-control { padding: 13px 14px; font-size: 1rem !important; /* prevents iOS zoom */ border-radius: 10px; } .btn { padding: 13px 18px; font-size: 0.9rem; min-height: 48px; border-radius: 10px; } .btn-sm { padding: 10px 14px; font-size: 0.82rem; min-height: 40px; } /* ── Ticket Items: full width, easier to tap ── */ .ticket-item { flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; } .ticket-item > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; } /* ── Modal: full screen on mobile ── */ .modal-overlay { align-items: flex-end; padding: 0; } .modal-overlay > .card, .modal-overlay > div > .card, .modal { border-radius: 20px 20px 0 0 !important; max-height: 92vh; width: 100% !important; max-width: 100% !important; margin: 0; padding-bottom: calc(20px + var(--safe-bottom)); animation: slideUpModal 0.3s ease-out; } @keyframes slideUpModal { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Tables: horizontal scroll ── */ .table-responsive, div[style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } table { font-size: 0.72rem !important; } table th, table td { padding: 6px 8px !important; } /* ── Typography scale-down ── */ h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } h4 { font-size: 0.9rem; } /* ── Grids inside cards: collapse to rows ── */ div[style*="grid-template-columns:1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } div[style*="display:grid"] { grid-template-columns: 1fr !important; } /* ── Flex rows: wrap nicely ── */ div[style*="display:flex"] { flex-wrap: wrap; } /* ── Inventory filters: bigger buttons ── */ #inv-filter-form button { min-height: 38px; font-size: 0.8rem; } /* ── Pagination: bigger tap area ── */ .pagination a, .pagination span { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } /* ── Table container: add visual fade hint for scroll ── */ #inventory-table-container { max-height: none !important; position: relative; } /* ── Dashboard KPIs: 2x2 grid ── */ .stat-card { min-width: 0 !important; padding: 14px 10px; } .stat-card h2 { font-size: 1.6rem !important; } .stat-card h4 { font-size: 0.73rem !important; } } /* ─── Tablet (768px - 1024px) ─── */ @media (min-width: 769px) and (max-width: 1024px) { .main-content { padding: 20px 25px; } .sidebar { width: 210px; } .nav-link { padding: 11px 15px; font-size: 0.85rem; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ─── Touch Device Enhancements ─── */ @media (hover: none) and (pointer: coarse) { /* Increase touch targets */ .btn { min-height: 48px; } .btn-sm { min-height: 42px; } .nav-link { min-height: 52px; } select.form-control { min-height: 48px; } /* Remove hover effects that feel wrong on touch */ .btn:hover { transform: none; box-shadow: none; filter: none; } .ticket-item:hover { border-color: var(--border-color); box-shadow: var(--shadow-sm); } .nav-link:hover { background: transparent; color: var(--text-muted); } /* Add active feedback instead */ .btn:active { transform: scale(0.97); opacity: 0.85; transition: transform 0.1s, opacity 0.1s; } .nav-link:active { opacity: 0.7; } .ticket-item:active { transform: scale(0.99); } } /* ─── Mobile Utility Classes ─── */ /* Elements hidden on mobile (shown on desktop) */ @media (max-width: 768px) { .mobile-hidden { display: none !important; } .mobile-only { display: flex !important; } /* nav-label stays visible as it's inside nav-link which controls its own display */ } /* Elements only shown on mobile (hidden on desktop) */ @media (min-width: 769px) { .mobile-only { display: none !important; } .mobile-hidden { display: revert !important; } /* show on desktop */ /* On desktop, nav-label is inline text next to icon */ .nav-label { display: inline; font-size: inherit; } } /* ─── Print ─── */ @media print { .sidebar, .hr-sub-nav, .btn, form, .pagination, .global-announcement, canvas { display: none !important; } .main-content { padding: 0 !important; width: 100% !important; max-width: 100% !important; } body { background: #fff !important; color: #000 !important; font-size: 11pt; } .card { border: 1px solid #ddd !important; box-shadow: none !important; margin-bottom: 15px !important; break-inside: avoid; border-radius: 0 !important; } .ticket-item { border: 1px solid #ddd !important; break-inside: avoid; } h2, h3 { color: #000 !important; } .badge { border: 1px solid #000 !important; color: #000 !important; text-shadow: none !important; background: transparent !important; } .printable-header { display: block !important; text-align: center; border-bottom: 2px solid #000; margin-bottom: 20px; padding-bottom: 10px; } table { font-size: 9pt; } table th { background: #eee !important; color: #000 !important; } } .printable-header { display: none; } /* ════════════════════════════════════════════════════════════════ 📱 MOBILE COMPLETE REDESIGN — Chrome + PWA Standalone ════════════════════════════════════════════════════════════════ */ /* ── Safe Area (notch / home indicator support) ── */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --bottom-nav-h: calc(62px + var(--safe-bottom)); --mobile-header-h: 56px; } /* ════════ MOBILE (≤ 768px) — Chrome & Browser ════════ */ @media (max-width: 768px) { /* ── Scroll & Base ── */ html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { overflow-x: hidden; } /* ── Mobile top header bar ── */ .mobile-header { display: flex !important; position: fixed; top: 0; left: 0; right: 0; height: var(--mobile-header-h); padding-top: var(--safe-top); background: var(--surface-color); border-bottom: 1px solid var(--border-color); align-items: center; justify-content: space-between; padding-inline: 16px; z-index: 1100; box-shadow: 0 2px 10px rgba(0,0,0,.08); } .mobile-header-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; color: var(--primary-color); } .mobile-header-logo span { font-size: 1.4rem; } .mobile-header-actions { display: flex; gap: 8px; } .mobile-header-btn { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px 10px; cursor: pointer; font-size: 1rem; color: var(--text-muted); transition: all 0.2s; } .mobile-header-btn:active { transform: scale(0.95); background: var(--primary-color); color: #fff; border-color: var(--primary-color); } /* ── App container push for header + bottom nav ── */ .app-container { flex-direction: column !important; padding-top: var(--mobile-header-h) !important; padding-bottom: var(--bottom-nav-h) !important; } /* ── Main content ── */ .main-content { padding: 16px 12px 8px !important; max-width: 100% !important; width: 100% !important; } /* ── Page title bar (inside main) ── */ #page-title { font-size: 1.1rem !important; } /* ── Bottom Nav Bar (sidebar becomes bottom nav) ── */ .sidebar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; height: var(--bottom-nav-h) !important; flex-direction: row !important; align-items: flex-start !important; border-left: none !important; border-top: 1.5px solid var(--border-color) !important; overflow: hidden !important; padding: 0 0 var(--safe-bottom) !important; z-index: 1000 !important; box-shadow: 0 -4px 24px rgba(0,0,0,.12) !important; backdrop-filter: blur(10px) !important; background: color-mix(in srgb, var(--surface-color) 95%, transparent) !important; } /* ── Nav items: horizontal scrollable row ── */ .sb-nav { display: flex !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; padding: 0 !important; width: 100% !important; height: 62px !important; align-items: stretch !important; } .sb-nav::-webkit-scrollbar { display: none !important; } /* ── Each nav item ── */ .sb-link { flex: 0 0 auto !important; min-width: 68px !important; max-width: 84px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 6px 4px 4px !important; border-radius: 0 !important; margin: 0 !important; font-size: 0.58rem !important; font-weight: 700 !important; height: 62px !important; color: var(--text-muted) !important; border-bottom: 3px solid transparent !important; white-space: nowrap !important; text-align: center !important; position: relative !important; transition: all 0.2s !important; } .sb-link:active { background: rgba(220,38,38,0.05) !important; } .sb-link::before { display: none !important; } .sb-link.sb-active { color: var(--primary-color) !important; background: rgba(220,38,38,0.07) !important; border-bottom: 3px solid var(--primary-color) !important; } .sb-link .sb-icon { font-size: 1.5rem !important; width: auto !important; } .sb-link .sb-lbl { display: block !important; line-height: 1; } /* ── Notification badges ── */ .sb-badge { position: absolute !important; top: 4px !important; right: 10px !important; min-width: 16px !important; height: 16px !important; font-size: 0.5rem !important; padding: 2px 4px !important; border-radius: 8px !important; } /* ── Hide desktop-only elements ── */ .sb-logo, .sb-profile, .sb-search-wrap, .sb-footer, .sb-section, .mobile-hidden { display: none !important; } /* ── Cards: full-width, less padding ── */ .card { padding: 14px 12px !important; border-radius: 12px !important; margin-bottom: 14px !important; } .card h2 { font-size: 1.1rem !important; } .card h3 { font-size: 1rem !important; } .card h4 { font-size: 0.9rem !important; } /* ── Stats grid: 2 columns on mobile ── */ .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .stat-card { padding: 14px 10px !important; } .stat-value { font-size: 1.5rem !important; } .stat-label { font-size: 0.7rem !important; } /* ── Tables: horizontal scroll wrapper ── */ .table-wrap, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } table { font-size: 0.8rem !important; min-width: 500px; } th, td { padding: 8px 10px !important; white-space: nowrap !important; } /* ── Buttons: touch-friendly ── */ .btn { padding: 10px 14px !important; font-size: 0.85rem !important; min-height: 40px !important; } .btn-sm { padding: 7px 10px !important; font-size: 0.78rem !important; min-height: 34px !important; } /* ── Forms: bigger inputs ── */ .form-control, select.form-control { padding: 13px 14px !important; font-size: 16px !important; /* prevents iOS zoom */ border-radius: 10px !important; min-height: 48px !important; } /* ── Section titles ── */ h2 { font-size: 1.15rem !important; } h3 { font-size: 1rem !important; } /* ── Announcements ── */ .global-announcement { font-size: 0.82rem !important; padding: 10px 14px !important; } /* ── Hide print button on mobile ── */ button[onclick="window.print()"] { display: none !important; } /* ── Modals: full-screen on mobile ── */ .modal-content { width: 95% !important; max-height: 90vh !important; overflow-y: auto !important; border-radius: 16px !important; margin: auto !important; } /* ── Grid: 1 column on mobile ── */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; } /* ── Drawer overlay ── */ #more-drawer { padding-bottom: var(--safe-bottom) !important; max-height: 85vh !important; } } /* ════════ PWA STANDALONE MODE — Extra polish ════════ */ @media (display-mode: standalone) { /* Respect the notch/status bar */ .mobile-header { padding-top: calc(var(--safe-top) + 4px) !important; height: calc(var(--mobile-header-h) + var(--safe-top)) !important; } .app-container { padding-top: calc(var(--mobile-header-h) + var(--safe-top)) !important; } /* Slightly more padding for bottom nav in PWA (home gesture area) */ .sidebar { padding-bottom: max(var(--safe-bottom), 8px) !important; height: calc(62px + max(var(--safe-bottom), 8px)) !important; } .app-container { padding-bottom: calc(62px + max(var(--safe-bottom), 8px)) !important; } /* Hide browser-hinting elements in standalone */ .install-pwa-btn { display: none !important; } } /* ════════ DESKTOP (≥ 769px) ════════ */ @media (min-width: 769px) { .sb-link.mobile-only { display: none !important; } .mobile-only { display: none !important; } .mobile-hidden { display: revert !important; } .mobile-header { display: none !important; } .nav-label { display: inline; font-size: inherit; } } /* ════════ GLOBAL MODAL OVERLAY (duplicate removed, unified above) ════════ */ /* This block ensures legacy .open class also works */ .modal-overlay.open, .modal-overlay.active { display: flex !important; } @keyframes modalIn { from { opacity:0; transform:scale(.95) translateY(-10px); } to { opacity:1; transform:scale(1) translateY(0); } } /* ════════ ADMIN PANEL ════════ */ .admin-quick-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--danger); color: #fff; border-radius: 20px; font-size: .65rem; font-weight: 900; padding: 1px 7px; margin-right: 4px; animation: pulse 2s infinite; } /* ════════ QUOTATIONS ════════ */ .quote-status-badge { padding: 3px 12px; border-radius: 20px; font-size: .75rem; font-weight: 800; display: inline-block; }