/* * theme.css — Light / Dark mode. * theme.js sets [data-theme] on before first paint. * * PALETTE: * Dark — sidebar: #0f2057 (deep navy) | content: #0d0f14 (near-black) * Light — sidebar: #1a3a8a (blue) | content: #ffffff (white) */ /* ── Smooth transition on every element ─────────────────────────────── */ *, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } } /* ══════════════════════════════════════════════════════════════════════ LIGHT MODE ══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; } html[data-theme="light"] { --bg: #f4f6fb !important; --bg2: #ffffff !important; --bg3: #eaecf4 !important; --border: rgba(0,0,0,0.08) !important; --border2: rgba(0,0,0,0.13) !important; --text: #0f172a !important; --muted: #64748b !important; --muted2: #334155 !important; --blue: #2563eb !important; --blue-dim: rgba(37,99,235,0.10) !important; --green: #16a34a !important; --green-dim: rgba(22,163,74,0.10) !important; --red: #dc2626 !important; --red-dim: rgba(220,38,38,0.10) !important; --amber: #d97706 !important; --amber-dim: rgba(217,119,6,0.10) !important; --purple: #7c3aed !important; --purple-dim: rgba(124,58,237,0.10) !important; } /* ── Body & layout ── */ [data-theme="light"] body { background: #f4f6fb !important; color: #0f172a !important; } [data-theme="light"] .main { background: #f4f6fb !important; } /* ── Topbar ── */ [data-theme="light"] .topbar { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; } [data-theme="light"] .topbar h1 { color: #1e40af !important; } [data-theme="light"] .topbar-title { color: #1e40af !important; } [data-theme="light"] .topbar-sub, [data-theme="light"] .topbar-date { color: #64748b !important; } /* ── Cards ── */ [data-theme="light"] .card, [data-theme="light"] .stat-card { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .stat-sub, [data-theme="light"] .stat-label { color: #64748b !important; } [data-theme="light"] .stat-value { color: #1e40af !important; } /* Section / card headings */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #1e40af !important; } [data-theme="light"] .section-title { color: #1e40af !important; } [data-theme="light"] .card-title { color: #1e40af !important; } [data-theme="light"] .age-dist-title { color: #1e40af !important; } [data-theme="dark"] .age-dist-title { color: #29b6e8 !important; } .age-dist-title { color: #29b6e8; } [data-theme="light"] .detail-name { color: #1e40af !important; } [data-theme="light"] .panel-header h2 { color: #1e40af !important; } /* ── Tables ── */ [data-theme="light"] table { background: #ffffff !important; } [data-theme="light"] thead th { background: rgba(0,0,0,0.03) !important; color: #64748b !important; border-bottom-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] tbody td { color: #0f172a !important; border-bottom-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] tbody tr:hover td { background: rgba(0,0,0,0.025) !important; } [data-theme="light"] tbody tr.row-damaged:hover td { background: rgba(220,38,38,0.04) !important; } [data-theme="light"] tbody tr.row-disposed:hover td { background: rgba(124,58,237,0.04) !important; } /* ── Inputs ── */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff !important; color: #0f172a !important; border-color: rgba(0,0,0,0.13) !important; color-scheme: light; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: #2563eb !important; } [data-theme="light"] select option { background: #ffffff !important; color: #0f172a !important; } /* ── Filter bar ── */ [data-theme="light"] .filter-bar { background: #ffffff !important; border-bottom-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .filter-bar input, [data-theme="light"] .filter-bar select { background: #eaecf4 !important; } [data-theme="light"] .toolbar input { background: #ffffff !important; } /* ── Buttons ── */ [data-theme="light"] .btn { color: #334155 !important; border-color: rgba(0,0,0,0.13) !important; background: transparent !important; } [data-theme="light"] .btn:hover { background: rgba(0,0,0,0.08) !important; color: #ffffff !important; } [data-theme="light"] .btn-primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; } [data-theme="light"] .btn-primary:hover { background: #1d4ed8 !important; color: #fff !important; } [data-theme="light"] .btn-ghost { background: transparent !important; color: #334155 !important; } [data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.08) !important; color: #ffffff !important; } [data-theme="light"] .btn-danger { background: rgba(220,38,38,0.10) !important; color: #dc2626 !important; } [data-theme="light"] .btn-danger:hover { color: #ffffff !important; background: rgba(220,38,38,0.85) !important; } [data-theme="light"] .btn-amber { background: rgba(217,119,6,0.10) !important; color: #d97706 !important; } [data-theme="light"] .btn-amber:hover { color: #ffffff !important; background: rgba(217,119,6,0.85) !important; } [data-theme="light"] .btn-warn { background: rgba(217,119,6,0.10) !important; color: #d97706 !important; border-color: rgba(217,119,6,0.25) !important; } [data-theme="light"] .btn-warn:hover { color: #ffffff !important; background: rgba(217,119,6,0.85) !important; } [data-theme="light"] .btn-success { background: rgba(22,163,74,0.10) !important; color: #16a34a !important; } [data-theme="light"] .btn-success:hover { color: #ffffff !important; background: rgba(22,163,74,0.85) !important; } /* Dark mode — ensure hover text is always white */ [data-theme="dark"] .btn:hover { color: #ffffff !important; } [data-theme="dark"] .btn-ghost:hover { color: #ffffff !important; } /* ── Modals ── */ [data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.45) !important; } [data-theme="light"] .modal { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; } [data-theme="light"] .modal-header { border-bottom-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .modal-header h3 { color: #0f172a !important; } [data-theme="light"] .modal-close { background: #eaecf4 !important; border-color: rgba(0,0,0,0.10) !important; color: #334155 !important; } [data-theme="light"] .form-body { background: #ffffff !important; } [data-theme="light"] .form-actions { border-top-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .form-group label { color: #334155 !important; } [data-theme="light"] .modal-form-body { background: #ffffff !important; } [data-theme="light"] .modal-actions { border-top-color: rgba(0,0,0,0.08) !important; } /* ── SIDEBAR — blue in light mode ── */ [data-theme="light"] .sidebar { background: #1e40af !important; border-right: none !important; } [data-theme="light"] .sidebar-brand { border-bottom-color: rgba(255,255,255,0.12) !important; } [data-theme="light"] .sidebar .brand-empire { color: #ffffff !important; -webkit-text-stroke: 0.5px #ffffff !important; } [data-theme="light"] .sidebar .brand-one { color: #29b6e8 !important; -webkit-text-stroke: 0.5px #29b6e8 !important; } [data-theme="light"] .nav-section { color: rgba(255,255,255,0.45) !important; } [data-theme="light"] .nav-item { color: rgba(255,255,255,0.80) !important; background: none !important; } [data-theme="light"] .nav-item:hover { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; } [data-theme="light"] .nav-item.active { background: rgba(255,255,255,0.20) !important; color: #ffffff !important; } [data-theme="light"] .folder-arrow { color: rgba(255,255,255,0.45) !important; } [data-theme="light"] .sidebar-footer { border-top-color: rgba(255,255,255,0.12) !important; } [data-theme="light"] .user-name { color: #ffffff !important; } [data-theme="light"] .user-role { color: rgba(255,255,255,0.55) !important; } [data-theme="light"] .logout-btn { color: #9aa0b2 !important; } [data-theme="light"] .logout-btn:hover { background: rgba(244,91,105,0.25) !important; color: #ffffff !important; } [data-theme="light"] .theme-toggle-btn { color: #9aa0b2 !important; } [data-theme="light"] .theme-toggle-btn:hover { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; } [data-theme="light"] .nav-badge { background: #29b6e8 !important; color: #fff !important; } [data-theme="light"] .sidebar-folder-body { background: rgba(0,0,0,0.15) !important; } [data-theme="light"] .nav-dot { background: rgba(255,255,255,0.45) !important; } /* ── Sidebar icon buttons — dark mode explicit color ── */ [data-theme="dark"] .logout-btn { color: #9aa0b2 !important; } [data-theme="dark"] .theme-toggle-btn { color: #9aa0b2 !important; } [data-theme="light"] .nav-item.active .nav-dot { background: #ffffff !important; } [data-theme="light"] .avatar { background: linear-gradient(135deg, #29b6e8, #1e3a8a) !important; } /* ── Badges ── */ [data-theme="light"] .badge-admin { background: rgba(37,99,235,0.12) !important; color: #1d4ed8 !important; } [data-theme="light"] .badge-staff { background: rgba(22,163,74,0.12) !important; color: #15803d !important; } [data-theme="light"] .badge-viewer { background: rgba(217,119,6,0.12) !important; color: #b45309 !important; } [data-theme="light"] .badge-pending { background: rgba(217,119,6,0.12) !important; color: #b45309 !important; } [data-theme="light"] .badge-pending-receive { background: rgba(37,99,235,0.10) !important; color: #1d4ed8 !important; } [data-theme="light"] .badge-received { background: rgba(22,163,74,0.10) !important; color: #15803d !important; } [data-theme="light"] .badge-cancelled { background: rgba(220,38,38,0.10) !important; color: #b91c1c !important; } /* ── Status badges ── */ [data-theme="light"] .status-damaged { background: rgba(220,38,38,0.10) !important; color: #dc2626 !important; } [data-theme="light"] .status-resolved { background: rgba(22,163,74,0.10) !important; color: #16a34a !important; } [data-theme="light"] .status-disposed { background: rgba(124,58,237,0.10) !important; color: #7c3aed !important; } [data-theme="light"] .badge-working { background: rgba(22,163,74,0.10) !important; color: #16a34a !important; border-color: rgba(22,163,74,0.25) !important; } [data-theme="light"] .badge-damaged { background: rgba(220,38,38,0.10) !important; color: #dc2626 !important; border-color: rgba(220,38,38,0.25) !important; } [data-theme="light"] .badge-repair { background: rgba(217,119,6,0.10) !important; color: #d97706 !important; border-color: rgba(217,119,6,0.25) !important; } /* ── Chips & mono ── */ [data-theme="light"] .sku-chip, [data-theme="light"] .sku-code, [data-theme="light"] .mono { background: #eaecf4 !important; color: #334155 !important; border-color: rgba(0,0,0,0.10) !important; } [data-theme="light"] .po-num { background: rgba(37,99,235,0.10) !important; color: #2563eb !important; } [data-theme="light"] .qty-pill { background: #eaecf4 !important; color: #334155 !important; border-color: rgba(0,0,0,0.10) !important; } /* ── Tabs ── */ [data-theme="light"] .tabs { border-bottom-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .tab-btn { color: #64748b !important; } [data-theme="light"] .tab-btn:hover { color: #0f172a !important; } [data-theme="light"] .tab-btn.active { color: #0f172a !important; border-bottom-color: #2563eb !important; } [data-theme="light"] .tab-badge { background: rgba(220,38,38,0.12) !important; color: #dc2626 !important; } [data-theme="light"] .tab-badge.amber { background: rgba(217,119,6,0.12) !important; color: #d97706 !important; } [data-theme="light"] .tab-badge.green { background: rgba(22,163,74,0.12) !important; color: #16a34a !important; } [data-theme="light"] .tab-badge.purple { background: rgba(124,58,237,0.12) !important; color: #7c3aed !important; } [data-theme="light"] .tab-badge.blue { background: rgba(37,99,235,0.12) !important; color: #2563eb !important; } /* ── Toasts — see appended block at bottom of this file ── */ /* ── Empty states ── */ [data-theme="light"] .empty-state { color: #94a3b8 !important; } /* ── Assignee panel ── */ [data-theme="light"] .assignee-panel { background: #ffffff !important; border-right-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .panel-header { border-bottom-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .assignee-item:hover { background: rgba(0,0,0,0.04) !important; } [data-theme="light"] .assignee-item.active { background: rgba(37,99,235,0.10) !important; } [data-theme="light"] .assignee-name { color: #0f172a !important; } [data-theme="light"] .assignee-station { color: #64748b !important; } [data-theme="light"] .assignee-badge { background: #eaecf4 !important; border-color: rgba(0,0,0,0.10) !important; color: #334155 !important; } [data-theme="light"] .panel-footer { border-top-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .btn-add-assignee { background: rgba(37,99,235,0.08) !important; color: #2563eb !important; border-color: rgba(37,99,235,0.20) !important; } [data-theme="light"] .detail-panel { background: #f4f6fb !important; } [data-theme="light"] .asset-row { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .asset-row:hover { border-color: rgba(0,0,0,0.14) !important; } [data-theme="light"] .asset-icon { background: #eaecf4 !important; border-color: rgba(0,0,0,0.08) !important; color: #64748b !important; } [data-theme="light"] .asset-name { color: #0f172a !important; } [data-theme="light"] .asset-sku { color: #2563eb !important; } [data-theme="light"] .asset-category { color: #64748b !important; } [data-theme="light"] .detail-name { color: #0f172a !important; } [data-theme="light"] .detail-station { color: #64748b !important; } [data-theme="light"] .section-title { color: #0f172a !important; } /* ── PO / Suppliers ── */ [data-theme="light"] .po-card { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .po-card.expanded { border-color: #2563eb !important; } [data-theme="light"] .po-card-header:hover { background: rgba(0,0,0,0.02) !important; } [data-theme="light"] .po-supplier { color: #0f172a !important; } [data-theme="light"] .po-meta { color: #64748b !important; } [data-theme="light"] .po-amount { color: #0f172a !important; } [data-theme="light"] .po-receive-footer { background: rgba(22,163,74,0.04) !important; border-top-color: rgba(22,163,74,0.12) !important; } [data-theme="light"] .item-group { border-bottom-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .item-group-header { background: rgba(0,0,0,0.02) !important; } [data-theme="light"] .item-group-name { color: #0f172a !important; } [data-theme="light"] .unit-index { background: #eaecf4 !important; color: #64748b !important; } [data-theme="light"] .serial-input { background: #eaecf4 !important; border-color: rgba(0,0,0,0.13) !important; color: #0f172a !important; } [data-theme="light"] .serial-input.filled { background: rgba(22,163,74,0.06) !important; } [data-theme="light"] .serial-edit-input { background: #eaecf4 !important; color: #0f172a !important; } [data-theme="light"] .po-drawer { background: #ffffff !important; border-left-color: rgba(0,0,0,0.10) !important; } [data-theme="light"] .po-drawer-header { border-bottom-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .po-drawer-body { background: #ffffff !important; } [data-theme="light"] .po-card-num { color: #2563eb !important; background: rgba(37,99,235,0.10) !important; } [data-theme="light"] .po-badge.draft { background: rgba(107,114,128,0.12) !important; color: #374151 !important; } [data-theme="light"] .po-badge.sent { background: rgba(37,99,235,0.10) !important; color: #2563eb !important; } [data-theme="light"] .po-badge.received { background: rgba(22,163,74,0.10) !important; color: #16a34a !important; } [data-theme="light"] .po-badge.cancelled { background: rgba(220,38,38,0.10) !important; color: #dc2626 !important; } /* ── Category cards ── */ [data-theme="light"] .cat-grid-card { background: #eaecf4 !important; border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .cat-grid-card:hover { border-color: #2563eb !important; } [data-theme="light"] .cat-icon-wrap { background: rgba(37,99,235,0.10) !important; } /* ── Login page ── */ [data-theme="light"] .wrap { background: transparent !important; } [data-theme="light"] .tab-bar { background: #eaecf4 !important; border-color: rgba(0,0,0,0.10) !important; } [data-theme="light"] .tab-btn.active { background: #ffffff !important; color: #0f172a !important; } [data-theme="light"] .role-card { background: #eaecf4 !important; border-color: rgba(0,0,0,0.12) !important; } [data-theme="light"] .role-card.selected { background: rgba(37,99,235,0.10) !important; border-color: #2563eb !important; } [data-theme="light"] .role-card .role-name { color: #0f172a !important; } [data-theme="light"] .role-card .role-desc { color: #64748b !important; } [data-theme="light"] .brand-empire-login { color: #1a3a8a !important; } /* ── Settings ── */ [data-theme="light"] .settings-card { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .settings-card-header { border-bottom-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .settings-row { border-bottom-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .settings-row-label { color: #0f172a !important; } [data-theme="light"] .settings-row-desc { color: #64748b !important; } [data-theme="light"] .theme-option { background: #eaecf4 !important; border-color: rgba(0,0,0,0.12) !important; } [data-theme="light"] .theme-option:hover { border-color: #2563eb !important; } [data-theme="light"] .theme-option.selected { background: rgba(37,99,235,0.10) !important; border-color: #2563eb !important; } [data-theme="light"] .theme-name { color: #0f172a !important; } [data-theme="light"] .theme-option.selected .theme-name { color: #2563eb !important; } /* ── Assignee chips ── */ [data-theme="light"] .assignee-chip { background: rgba(37,99,235,0.10) !important; border-color: rgba(37,99,235,0.20) !important; color: #2563eb !important; } [data-theme="light"] .more-chip { background: #eaecf4 !important; border-color: rgba(0,0,0,0.10) !important; color: #64748b !important; } /* ── Serial modal ── */ [data-theme="light"] #serial-modal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; } /* ── Scrollbars ── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f4f6fb; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); } /* ══════════════════════════════════════════════════════════════════════ NOTIFICATION BELL + BADGE ══════════════════════════════════════════════════════════════════════ */ /* Wrapper */ .notif-bell-wrap { position: relative; display: inline-flex; flex-shrink: 0; overflow: visible; } /* Bell button — badge is a child of this button */ .notif-bell { position: relative; background: #0f1729; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; cursor: pointer; font-size: 17px; line-height: 1; padding: 8px 11px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; color: #9aa0b2; outline: none; overflow: visible; } .notif-bell:hover { background: #162040; color: #e8eaf0; } .notif-bell-icon { display: block; flex-shrink: 0; } [data-theme="light"] .notif-bell { background: #eef2ff !important; border-color: rgba(0,0,0,.14) !important; color: #334155 !important; } [data-theme="light"] .notif-bell:hover { background: #e2e8f0 !important; } /* Red count badge — floats outside the top-right corner of the bell */ .notif-dot { display: none; position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; background: #e8192c; border-radius: 999px; border: 2.5px solid #0a0e1a; font-size: 10px; font-weight: 800; font-family: 'DM Sans', sans-serif; color: #fff; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; pointer-events: none; box-sizing: border-box; letter-spacing: -0.3px; box-shadow: 0 2px 8px rgba(232,25,44,.6); z-index: 10; white-space: nowrap; } .notif-dot.has-notif { display: inline-flex !important; } [data-theme="light"] .notif-dot { border-color: #f0f4ff !important; } .topbar-actions { overflow: visible; } /* Header right: suppress color/background transitions so user info appears instantly with no flash when auth resolves */ .req-header-right, .req-header-right * { transition: transform 0.2s ease, box-shadow 0.2s ease !important; } /* Still allow theme-toggle spin and logout hover color to work */ .req-icon-btn { transition: background 0.15s ease, color 0.15s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important; } /* Sidebar footer: suppress color transition so user name/role appear instantly when auth resolves — no text fade-in blink */ .sidebar-footer, .sidebar-footer * { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.15s ease !important; } .logout-btn, .theme-toggle-btn { transition: background 0.15s ease, color 0.15s ease, transform 0.15s cubic-bezier(0.34,1.56,0.64,1) !important; } .loc-badge { font-size: 12px; color: var(--blue, #29b6e8); background: var(--blue-dim, rgba(41,182,232,0.12)); border: 1px solid rgba(41,182,232,0.25); border-radius: var(--radius-sm, 8px); padding: 6px 12px; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════ TOPBAR — canonical rules applied to every page ══════════════════════════════════════════════════════════════════════ */ .topbar { padding: 36px 48px 0; display: flex; align-items: center; /* vertically centre left title + right actions */ justify-content: space-between; gap: 16px; flex-shrink: 0; } .topbar h1, .topbar-title { font-family: 'Syne', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.5px; color: var(--text, #e8eaf0); } .topbar-sub, .topbar-date { font-size: 14px; color: var(--muted, #6b7080); margin-top: 4px; } .topbar-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } /* Left section wrapper used by pages with a sub-line */ .topbar-left { display: flex; align-items: center; gap: 14px; } [data-theme="light"] .topbar h1, [data-theme="light"] .topbar-title { color: #1e40af !important; } [data-theme="light"] .topbar-sub, [data-theme="light"] .topbar-date { color: #64748b !important; } /* ══════════════════════════════════════════════════════════════════════ GLOBAL ANIMATIONS & KEYFRAMES Applied to all pages via theme.css — no need to redeclare per page. ══════════════════════════════════════════════════════════════════════ */ /* ── Keyframes ─────────────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ── Page entrance ──────────────────────────────────────────────────── */ /* Layout wrappers fade in gently — no slide so the page doesn't jump */ .main, .page, .content, .wrap { animation: fadeIn 0.25s ease both; } /* Staggered stat cards — subtle lift, shorter travel distance */ .stat-card:nth-child(1) { animation: slideUp 0.4s 0.04s cubic-bezier(0.16,1,0.3,1) both; } .stat-card:nth-child(2) { animation: slideUp 0.4s 0.08s cubic-bezier(0.16,1,0.3,1) both; } .stat-card:nth-child(3) { animation: slideUp 0.4s 0.12s cubic-bezier(0.16,1,0.3,1) both; } .stat-card:nth-child(4) { animation: slideUp 0.4s 0.16s cubic-bezier(0.16,1,0.3,1) both; } /* ── Card hover lift ────────────────────────────────────────────────── */ .stat-card, .chart-card, .cat-card, .cat-grid-card, .po-card, .settings-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.15); } .chart-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); } .cat-card:hover, .cat-grid-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.26); border-color: var(--blue); } [data-theme="light"] .stat-card:hover { box-shadow: 0 10px 32px rgba(37,99,235,0.14); border-color: rgba(37,99,235,0.30); } [data-theme="light"] .chart-card:hover { box-shadow: 0 8px 24px rgba(37,99,235,0.10); } /* ── Card entrance (main page cards) ───────────────────────────────── */ .card { animation: fadeIn 0.2s ease both; transition: box-shadow 0.2s ease, border-color 0.2s ease; } /* ── Button interactions ────────────────────────────────────────────── */ .btn { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .btn:active:not(:disabled) { transform: scale(0.97); } /* Ensure hover text is always white on ghost/default buttons in both themes */ .btn:hover, .btn-ghost:hover { color: #ffffff !important; } /* Primary already white — keep it */ .btn-primary:hover { color: #ffffff !important; } .btn-primary:hover { box-shadow: 0 4px 16px rgba(41,182,232,0.35); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 4px 16px rgba(37,99,235,0.30); } /* ── Input focus transitions ────────────────────────────────────────── */ input, select, textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, color 0.2s ease; } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(41,182,232,0.15); } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.12); } /* ── Table row transition ───────────────────────────────────────────── */ tbody tr { transition: background-color 0.12s ease; } /* ── Modal animations ───────────────────────────────────────────────── */ /* All modal overlays and their content boxes use these by default */ .modal-overlay.open .modal, .modal-overlay.open > div { animation: modalIn 0.22s cubic-bezier(0.22,1,0.36,1) both; } /* ── Toast animation handled in appended block ─────────────────────── */ /* ── Nav item transitions ───────────────────────────────────────────── */ .nav-item { transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease; } /* ── Sidebar brand hover ────────────────────────────────────────────── */ .brand-wordmark { transition: opacity 0.15s ease; } .brand-wordmark:hover { opacity: 0.85; } /* ── Notification dot pop-in ────────────────────────────────────────── */ .notif-dot.has-notif { animation: slideDown 0.2s cubic-bezier(0.22,1,0.36,1) both; } /* ── Skeleton / loading shimmer ─────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75% ); background-size: 200% 100%; animation: shimmer 1.6s infinite ease-in-out; border-radius: 6px; } [data-theme="light"] .skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.05) 75% ); background-size: 200% 100%; } /* ── Pill / badge hover ─────────────────────────────────────────────── */ .pill { transition: opacity 0.15s ease, transform 0.15s ease; } /* ── Spin utility (reusable for any loading spinner) ────────────────── */ .spin { animation: spin 0.75s linear infinite; } /* ── Reduced motion: respect user preference ────────────────────────── */ @media (prefers-reduced-motion: reduce) { .main, .page, .content, .wrap, .stat-card, .card, .toast, .modal-overlay.open .modal, .modal-overlay.open > div, .notif-dot.has-notif { animation: none !important; } .stat-card:hover, .chart-card:hover, .cat-card:hover, .cat-grid-card:hover { transform: none !important; } } /* ══════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE — breakpoints for sidebar + all page layouts ══════════════════════════════════════════════════════════════════════ */ /* ── Hamburger button (injected by sidebar.js, hidden on desktop) ── */ .sidebar-hamburger { display: none; position: fixed; top: 14px; left: 14px; z-index: 200; background: #0f2057; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer; flex-direction: column; gap: 5px; padding: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: background 0.15s, transform 0.15s; } .sidebar-hamburger:active { transform: scale(0.93); } .sidebar-hamburger span { display: block; width: 20px; height: 2px; background: #e8eaf0; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .sidebar-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sidebar-hamburger.open span:nth-child(2) { opacity: 0; } .sidebar-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } html[data-theme="light"] .sidebar-hamburger { background: #1e40af; border-color: rgba(255,255,255,0.2); } /* Sidebar overlay (mobile backdrop) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99; backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s ease; } .sidebar-overlay.visible { opacity: 1; } @media (max-width: 768px) { /* ── Show hamburger ── */ .sidebar-hamburger { display: flex; } .sidebar-overlay { display: block; } /* ── Sidebar: off-screen by default, slides in ── */ .sidebar { transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), visibility 0.28s ease !important; z-index: 150 !important; } .sidebar.mobile-open { transform: translateX(0) !important; } /* ── Main content: full width, no left margin ── */ .main { margin-left: 0 !important; width: 100%; } /* ── Topbar ── */ .topbar { padding: 68px 16px 0 16px !important; flex-wrap: wrap; gap: 10px; } .topbar h1, .topbar-title { font-size: 22px !important; } .topbar-actions { flex-wrap: wrap; gap: 8px; } /* ── Content padding ── */ .content { padding: 20px 16px 40px !important; } /* ── Stat grids → 2 columns on mobile ── */ .stat-grid, .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .stat-value { font-size: 28px !important; } /* ── Chart grid → single column ── */ .chart-grid { grid-template-columns: 1fr !important; } /* Dashboard deployed/stock row */ .chart-grid ~ div[style*="grid-template-columns:1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } /* ── Category mini-cards ── */ .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* ── Tables: horizontal scroll ── */ .table-wrap, .card > table, .card > div > table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } table { min-width: 600px; } thead th, tbody td { padding: 10px 12px !important; font-size: 13px !important; } /* ── Tabs: scrollable row ── */ .tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { white-space: nowrap; padding: 10px 16px !important; font-size: 13px !important; } /* ── Filter bar ── */ .filter-bar { padding: 12px !important; gap: 8px !important; } .filter-bar input[type="text"] { min-width: unset !important; flex: 1 !important; } /* ── Modals: full-width on small screens ── */ .modal, .modal-overlay > div { max-width: 100% !important; width: calc(100% - 24px) !important; margin: 0 12px !important; padding: 20px !important; border-radius: 14px !important; } .modal-header { padding: 16px 18px !important; } .form-body, .modal-form-body { padding: 16px 18px !important; } .form-actions, .modal-actions { padding: 14px 18px !important; flex-wrap: wrap !important; gap: 8px !important; } /* ── Form grids → single column ── */ .form-grid, .form-grid.cols-2, .form-grid.cols-3, .rf-grid.cols-2, .rf-grid.cols-3, .sig-row { grid-template-columns: 1fr !important; } /* ── Login role grid → 2 cols ── */ .role-grid { grid-template-columns: repeat(2, 1fr) !important; } /* ── Notification panel ── */ .notif-panel { width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; } /* ── Dashboard funnel ── */ #funnel-bar-new, #funnel-bar-active, #funnel-bar-aging, #funnel-bar-old, #funnel-bar-eol { width: 100% !important; min-width: unset !important; } div[style*="grid-template-columns:1fr auto"] { grid-template-columns: 1fr !important; } div[style*="grid-template-columns: 90px 1fr 70px"] { grid-template-columns: 70px 1fr 60px !important; } /* ── Topbar btn text: hide labels on very small screens ── */ .btn-sm .btn-label { display: none; } } /* ── Extra small (phones < 420px) ── */ @media (max-width: 420px) { .stat-grid, .stats-row { grid-template-columns: 1fr 1fr !important; } .cat-grid { grid-template-columns: 1fr 1fr !important; } .role-grid { grid-template-columns: 1fr 1fr !important; } .topbar h1, .topbar-title { font-size: 20px !important; } .stat-value { font-size: 24px !important; } thead th, tbody td { padding: 8px 10px !important; font-size: 12px !important; } } /* ── Tablets (769px–1024px): sidebar stays, reduce padding ── */ @media (min-width: 769px) and (max-width: 1024px) { .content { padding: 20px 24px 40px !important; } .topbar { padding: 24px 24px 0 !important; } .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .chart-grid { grid-template-columns: 1fr 1fr !important; } .cat-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ── Dashboard inline-grid overrides (mobile) ── */ @media (max-width: 768px) { .two-col-grid { grid-template-columns: 1fr !important; } .funnel-grid { grid-template-columns: 1fr !important; } .funnel-grid > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Funnel bar rows: reduce label col */ .funnel-grid div[style*="grid-template-columns:90px"], .funnel-grid div[style*="grid-template-columns: 90px"] { grid-template-columns: 60px 1fr 50px !important; gap: 8px !important; } } /* ══════════════════════════════════════════════════════════════════════ GLOBAL DELETE / CONFIRM MODAL — centered card pattern Matches suppliers.html del modal exactly. ══════════════════════════════════════════════════════════════════════ */ .modal-sm { max-width: 420px !important; } .del-body-wrap { padding: 28px !important; text-align: center !important; } .del-icon { width: 62px !important; height: 62px !important; background: var(--red-dim) !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 28px !important; margin: 0 auto 14px !important; } .del-title { font-family: 'Syne', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; margin-bottom: 8px !important; text-align: center !important; } .del-msg { font-size: 13px !important; color: var(--muted2) !important; line-height: 1.6 !important; margin-bottom: 22px !important; text-align: center !important; } .del-actions { display: flex !important; gap: 10px !important; justify-content: center !important; align-items: center !important; } /* Danger button — matches supplier style */ .btn-danger { background: var(--red-dim) !important; color: var(--red) !important; border: 1px solid rgba(244,91,105,0.25) !important; } .btn-danger:hover { background: rgba(244,91,105,0.22) !important; color: var(--red) !important; } .btn-danger:disabled { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none !important; } /* Light mode */ [data-theme="light"] .del-icon { background: rgba(220,38,38,0.10) !important; } [data-theme="light"] .btn-danger { background: rgba(220,38,38,0.10) !important; color: #dc2626 !important; border-color: rgba(220,38,38,0.25) !important; } [data-theme="light"] .btn-danger:hover { background: rgba(220,38,38,0.20) !important; color: #dc2626 !important; } /* ══════════════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS — redesigned ══════════════════════════════════════════════════════════════════════ */ #toast-container { position: fixed; bottom: 28px; right: 28px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; max-width: 360px; width: calc(100vw - 56px); } /* Base toast */ .toast, .toast-info, .toast-success, .toast-error, .toast-warning { display: flex !important; align-items: flex-start !important; gap: 11px !important; background: var(--bg2) !important; border: 1px solid var(--border2) !important; border-left: 3px solid var(--blue) !important; border-radius: 10px !important; padding: 13px 14px 13px 16px !important; font-family: 'DM Sans', sans-serif !important; font-size: 13.5px !important; color: var(--text) !important; line-height: 1.45 !important; box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25) !important; animation: toastIn .28s cubic-bezier(.22,.68,0,1.2) both; pointer-events: auto !important; max-width: 100% !important; backdrop-filter: blur(8px) !important; } /* Type accents */ .toast-success { border-left-color: var(--green); } .toast-error { border-left-color: var(--red); } .toast-warning { border-left-color: var(--amber); } .toast-info { border-left-color: var(--blue); } /* Icon */ .toast-icon { display: flex; align-items: center; flex-shrink: 0; margin-top: 1px; color: var(--blue); } .toast-success .toast-icon { color: var(--green); } .toast-error .toast-icon { color: var(--red); } .toast-warning .toast-icon { color: var(--amber); } /* Text */ .toast-text { flex: 1; min-width: 0; word-break: break-word; } /* Close button */ .toast-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--muted); cursor: pointer !important; padding: 0; margin-top: 0; pointer-events: auto !important; transition: background .12s, color .12s; position: relative; z-index: 1; } .toast-close:hover { background: var(--bg3); color: var(--text); } /* Animations */ @keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateX(0) scale(1); max-height: 80px; margin-bottom: 0; } to { opacity: 0; transform: translateX(16px) scale(.96); max-height: 0; margin-bottom: -10px; } } .toast-dismissing { animation: toastOut .25s ease forwards !important; } /* ── Light mode ── */ [data-theme="light"] .toast, [data-theme="light"] .toast-info, [data-theme="light"] .toast-success, [data-theme="light"] .toast-error, [data-theme="light"] .toast-warning { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; border-left-color: #2563eb !important; color: #0f172a !important; box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08) !important; } [data-theme="light"] .toast-success { border-left-color: #16a34a !important; } [data-theme="light"] .toast-error { border-left-color: #dc2626 !important; } [data-theme="light"] .toast-warning { border-left-color: #d97706 !important; } [data-theme="light"] .toast-success .toast-icon { color: #16a34a !important; } [data-theme="light"] .toast-error .toast-icon { color: #dc2626 !important; } [data-theme="light"] .toast-warning .toast-icon { color: #d97706 !important; } [data-theme="light"] .toast-icon { color: #2563eb !important; } [data-theme="light"] .toast-close { color: #64748b !important; } [data-theme="light"] .toast-close:hover { background: #eaecf4 !important; color: #0f172a !important; } /* ══════════════════════════════════════════════════════════════════════ MODAL — shared improvements ══════════════════════════════════════════════════════════════════════ */ @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Improve overlay blur & darken */ .modal-overlay { backdrop-filter: blur(6px) !important; } /* Slightly richer shadow */ .modal { box-shadow: 0 32px 96px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) !important; } /* Close button — bigger hit target, smoother hover */ .modal-close { width: 32px !important; height: 32px !important; border-radius: 8px !important; transition: background .15s, color .15s, transform .12s !important; } .modal-close:hover { transform: rotate(90deg) scale(1.05) !important; } /* Focus glow on inputs inside modals */ .modal .form-group input:focus, .modal .form-group select:focus, .modal .form-group textarea:focus, .form-body .form-group input:focus, .form-body .form-group select:focus, .form-body .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(41,182,232,.18) !important; } [data-theme="light"] .modal .form-group input:focus, [data-theme="light"] .modal .form-group select:focus, [data-theme="light"] .modal .form-group textarea:focus, [data-theme="light"] .form-body .form-group input:focus, [data-theme="light"] .form-body .form-group select:focus, [data-theme="light"] .form-body .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important; }