:root { --brand-blue: #004d81; --brand-blue-dark: #00355a; --brand-blue-light: #e8f1f8; --brand-orange: #f2701a; --brand-orange-dark: #d65f0e; } body { background-color: #f4f6f9; } .admin-topbar { background-color: var(--brand-blue-dark); justify-content: space-between; } .admin-sidebar { width: 230px; min-height: calc(100vh - 56px); background-color: #ffffff; border-right: 1px solid #e3e6ea; flex-shrink: 0; overflow: hidden; transition: width 0.2s ease, padding 0.2s ease; } /* Set on by an inline script in header.php, before even starts rendering, so the sidebar never flashes open before collapsing - see header.php for why it has to be there and not here. */ html.sidebar-collapsed .admin-sidebar { width: 0; padding: 0 !important; border-right: none; } html.sidebar-collapsed .admin-sidebar * { white-space: nowrap; /* content shouldn't reflow/wrap while shrinking away */ } .admin-sidebar .nav-link { color: #333; border-radius: 6px; } .admin-sidebar .nav-link.active, .admin-sidebar .nav-link:hover { background-color: var(--brand-blue); color: #fff; } .admin-content { flex: 1; min-height: calc(100vh - 56px); min-width: 0; /* allow tables to shrink/scroll instead of overflowing the page */ } .stat-card { border-left-width: 4px; transition: box-shadow 0.15s ease; } .stat-card:hover { box-shadow: 0 6px 16px rgba(0,77,129,0.1); } .prod-thumb { width: 50px; height: 50px; object-fit: contain; background: #f0f0f0; border-radius: 4px; } .prod-thumb-lg { width: 120px; height: 120px; object-fit: contain; background: #f0f0f0; border-radius: 6px; } .login-body { min-height: 100vh; background: linear-gradient(135deg, var(--brand-blue), var(--brand-orange)); } .login-card { width: 380px; max-width: 92vw; border: none; border-radius: 10px; } .btn-primary { background-color: var(--brand-blue); border-color: var(--brand-blue); } .btn-primary:hover, .btn-primary:focus { background-color: var(--brand-blue-dark); border-color: var(--brand-blue-dark); } .btn-outline-primary { color: var(--brand-blue); border-color: var(--brand-blue); } .btn-outline-primary:hover { background-color: var(--brand-blue); border-color: var(--brand-blue); } .text-primary { color: var(--brand-blue) !important; } a { color: var(--brand-blue); } .dash-tabs { border-bottom: 2px solid #e9ecef; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .dash-tabs .nav-link { color: #6c757d; font-weight: 600; font-size: 0.9rem; border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 16px; white-space: nowrap; } .dash-tabs .nav-link i { margin-right: 4px; } .dash-tabs .nav-link:hover { color: var(--brand-blue); border-bottom-color: #cdd6e0; } .dash-tabs .nav-link.active { color: var(--brand-blue); background: transparent; border-bottom-color: var(--brand-blue); } .notif-tray { border-left: 4px solid var(--brand-orange); } .notif-pill { font-size: 0.8rem; padding: 6px 10px; font-weight: 500; } /* ========================================================= Mobile responsiveness ========================================================= */ @media (max-width: 767.98px) { .admin-shell { flex-direction: column; } .admin-sidebar { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid #e3e6ea; } .admin-sidebar .nav { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; } .admin-sidebar .nav-item { flex-shrink: 0; } .admin-sidebar .nav-link { white-space: nowrap; } .admin-content { padding: 1rem !important; } .admin-topbar .navbar-brand img { height: 26px !important; } table.table-sm td, table.table-sm th { font-size: 0.78rem; } .stat-card .fs-2 { font-size: 1.4rem !important; } .stat-card .fs-4 { font-size: 1.15rem !important; } } /* Every table gets the same row-hover highlight Bootstrap's .table-hover gives, project-wide, without needing that class added to each one - :not(.table-hover) just avoids applying the exact same rule twice on tables that already have it explicitly. */ .table:not(.table-hover) > tbody > tr:hover > * { --bs-table-color-state: var(--bs-table-hover-color); --bs-table-bg-state: var(--bs-table-hover-bg); } /* Compact "Low"/"Out of Stock" style badges used across dense stock tables (Warehouse Stock, Inventory Products/Parts list, item pickers on Quotation/Manual Invoice) - the default badge size gets unreadable and crowds the actual stock numbers when many rows are on screen at once. */ .stock-status-badge { font-size: 7px; padding: 1px 4px; font-weight: 600; letter-spacing: 0.2px; vertical-align: middle; }