:root { --brand-navy: #16324a; --brand-navy-dark: #0e2436; --brand-teal: #1f8a70; --brand-teal-light: #e7f5f1; --brand-bg: #f4f7f9; --brand-text: #23313d; --brand-card-bg: #ffffff; --brand-border: #dee2e6; --brand-heading: var(--brand-navy); --table-header-bg: var(--brand-teal-light); --table-header-text: var(--brand-navy); } /* ---------- Dark mode ---------- Toggled by setting data-bs-theme="dark" on . Bootstrap 5.3 itself re-themes all of its own components (cards, modals, forms, dropdowns, tables) automatically from this attribute; we only need to override our own custom CSS variables so the rest of the UI (built on those variables) follows along. */ [data-bs-theme="dark"] { --brand-bg: #10161d; --brand-text: #e6edf3; --brand-card-bg: #1b232c; --brand-teal-light: #16332d; --brand-border: #333f4b; --brand-heading: #dfeff1; --table-header-bg: #16332d; --table-header-text: #9fe6d0; } body { background: var(--brand-bg); color: var(--brand-text); font-family: 'Segoe UI', Roboto, -apple-system, sans-serif; } /* ---------- Login page ---------- */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%); } .login-card { width: 100%; max-width: 380px; background: var(--brand-card-bg); border-radius: 14px; padding: 2.5rem 2rem; box-shadow: 0 20px 45px rgba(0,0,0,0.25); } .login-card .brand-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-teal-light); color: var(--brand-teal); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1rem auto; } /* ---------- Layout (after login) ---------- */ .sidebar { width: 230px; height: 100vh; background: var(--brand-navy); color: #fff; position: fixed; top: 0; left: 0; padding-top: 1rem; display: flex; flex-direction: column; } /* Everything above the "logged in as / logout" footer lives in here, and scrolls independently once the nav links are taller than the viewport - this is what stops the footer from ever overlapping the last few nav items. */ .sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } .sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; } .sidebar .brand { font-weight: 700; font-size: 1.15rem; padding: 0.75rem 1.25rem 1.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 0.5rem; } .sidebar a.nav-link { color: rgba(255,255,255,0.75); padding: 0.65rem 1.25rem; border-left: 3px solid transparent; } .sidebar a.nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); } .sidebar a.nav-link.active { color: #fff; background: rgba(255,255,255,0.1); border-left-color: var(--brand-teal); } .sidebar .role-badge { margin: 0 1.25rem 1rem 1.25rem; } /* Pinned to the bottom of the flex column (not position:absolute), so it always sits below the scrollable nav instead of floating over it. */ .sidebar-footer { flex: 0 0 auto; padding: 0.75rem 1.25rem 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); } .main-content { margin-left: 230px; padding: 1.75rem 2rem; } .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .page-title { font-weight: 700; color: var(--brand-heading); } .stat-card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .stat-card .stat-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; } .stat-card { transition: transform 0.15s ease, box-shadow 0.15s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } /* ---------- Dashboard gradient KPI cards ---------- Specificity note: these use `.card.stat-card-grad` (two classes) so they reliably win over the plain `.card` background/color rule below, regardless of source order. Using a single-class selector here previously caused the cards to render plain white with invisible white-on-white icons. */ .card.stat-card-grad { background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%); color: #fff; box-shadow: 0 10px 24px -8px var(--grad-a); position: relative; overflow: hidden; } /* Subtle decorative glow for a more premium feel */ .card.stat-card-grad::after { content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.10); pointer-events: none; } .card.stat-card-grad:hover { box-shadow: 0 14px 30px -8px var(--grad-a); } .stat-card-grad .stat-icon { background: rgba(255,255,255,0.20); border: 1px solid rgba(255,255,255,0.35); width: 52px; height: 52px; font-size: 1.45rem; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(255,255,255,0.25); position: relative; z-index: 1; } .stat-card-grad .stat-label { color: rgba(255,255,255,0.85); font-size: 0.8rem; font-weight: 500; position: relative; z-index: 1; } .stat-card-grad .fs-4 { color: #fff; position: relative; z-index: 1; } .stat-card-grad .stat-sub { color: rgba(255,255,255,0.72); font-size: 0.72rem; position: relative; z-index: 1; } /* Secondary (light) KPI cards - give their icon a soft circular badge instead of a bare glyph floating in space. */ .stat-card-mini-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } /* ---------- Dashboard low stock mini bars ---------- */ .low-stock-bar { width: 100%; height: 6px; border-radius: 4px; background: var(--brand-teal-light); overflow: hidden; } .low-stock-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; } .card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); background: var(--brand-card-bg); color: var(--brand-text); } .btn-brand { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; } .btn-brand:hover { background: #176e59; border-color: #176e59; color: #fff; } .table thead th { background: var(--table-header-bg); color: var(--table-header-text); font-weight: 600; border-bottom: none; } .product-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--brand-border); } .badge-status-available { background: #1f8a70; } .badge-status-limited { background: #e0a800; } .badge-status-unavailable { background: #c0392b; } .badge-status-discontinued { background: #6c757d; } /* ---------- Mobile sidebar toggle (hamburger button + backdrop) ---------- */ .sidebar-toggle-btn { display: none; border: none; background: transparent; color: var(--brand-heading); font-size: 1.4rem; line-height: 1; padding: 0.25rem 0.4rem; } .sidebar-toggle-btn:hover { color: var(--brand-teal); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1040; /* below .sidebar's 1050, above page content */ } .sidebar-backdrop.show { display: block; } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.25s; z-index: 1050; } .sidebar.show { transform: translateX(0); } .main-content { margin-left: 0; } .sidebar-toggle-btn { display: inline-block; } } /* ---------- Barcode Generator page ---------- */ /* The width/height attributes hold the real physical size in centimeters (used as-is when printing), but on screen we cap it to a tidy thumbnail regardless of that size. */ .barcode-thumb svg { width: 100%; height: auto; max-width: 110px; max-height: 60px; } /* ---------- Notification bell ---------- */ .notif-dropdown { width: 340px; max-height: 420px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } .notif-item:hover { background: var(--brand-teal-light); color: var(--brand-text); } #notifBadge { font-size: 0.6rem; } /* ---------- Theme toggle ---------- */ .theme-toggle-btn { border-color: var(--brand-border); color: var(--brand-text); } .theme-toggle-btn:hover { color: var(--brand-text); } .theme-toggle-floating { position: fixed; top: 1rem; right: 1rem; z-index: 10; } /* The login page's toggle floats over the fixed dark navy gradient regardless of light/dark mode, so it needs its own fixed (light-on-dark) contrast instead of following --brand-text / --brand-border like the in-app one. */ .theme-toggle-floating .theme-toggle-btn { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.08); } .theme-toggle-floating .theme-toggle-btn:hover { color: #fff; background: rgba(255,255,255,0.18); } /* ---------- Filter / search bars ---------- */ .filter-bar .form-select, .filter-bar .form-control { min-width: 160px; } /* ---------- Table pagination ---------- */ .pagination-wrap { margin-top: 0.75rem; } .pagination .page-link { background: var(--brand-card-bg); border-color: var(--brand-border); color: var(--brand-text); } .pagination .page-item.active .page-link { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; } .pagination .page-item.disabled .page-link { background: transparent; color: var(--brand-text); opacity: 0.4; } /* ---------- Autocomplete (customer / product pickers) ---------- */ .autocomplete-wrap { position: relative; } .autocomplete-menu { position: absolute; z-index: 1075; /* above modal content (Bootstrap modal is 1055) */ top: 100%; left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--brand-card-bg); border: 1px solid var(--brand-border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); margin-top: 4px; } .autocomplete-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--brand-border); } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover, .autocomplete-item.active { background: var(--brand-teal-light); } /* ---------- Reports page ---------- */ .report-card { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .report-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); border-color: var(--brand-teal); } .report-table th { background: var(--table-header-bg); color: var(--table-header-text); } .print-header hr { border-top: 2px solid var(--brand-navy); } /* ---------- Print rules ---------- Only #reportOutput's contents (the .print-area card built by reports.js) are shown when printing; everything else in the app chrome (sidebar, topbar, filter controls, buttons) is hidden via .no-print. */ @media print { .no-print, .sidebar, .topbar, #reportCatalog, #reportFilterCard { display: none !important; } .main-content { margin: 0 !important; padding: 0 !important; width: 100% !important; } #reportOutput .print-area { box-shadow: none !important; border: none !important; } body { background: #fff !important; color: #000 !important; } .report-table th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }