:root {
--sidebar-bg: #0f1b3d;
--sidebar-active: #2563eb;
--bg: #f5f6fa;
--card-bg: #ffffff;
--text-dark: #1a1a2e;
--text-muted: #6b7280;
--border: #e5e7eb;
--green: #10b981;
--orange: #f59e0b;
--purple: #8b5cf6;
--red: #ef4444;
}
/* Dark theme — activated by adding data-theme="dark" to ,
toggled via the sun/moon button in the topbar and remembered
per-browser in localStorage (see theme-toggle.js). */
html[data-theme="dark"] {
--bg: #0f1420;
--card-bg: #1a2233;
--text-dark: #e5e7eb;
--text-muted: #9ca3af;
--border: #2d3548;
}
/* A handful of elements use raw inline style="background: #fff" instead
of the --card-bg variable. Force those specific known cases back in
line with the theme when dark mode is active. This intentionally does
NOT touch the printable receipt, which should always look like paper
regardless of the app's theme. */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"] {
background: var(--card-bg) !important;
color: var(--text-dark);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
background: var(--card-bg) !important;
color: var(--text-dark) !important;
border-color: var(--border) !important;
}
html[data-theme="dark"] .data-table tr.row-low-stock { background: #4a3418 !important; }
html[data-theme="dark"] ::placeholder { color: var(--text-muted); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text-dark); }
.app-shell { display: flex; min-height: 100vh; }
/* SIDEBAR */
.sidebar { width: 220px; background: var(--sidebar-bg); color: #fff; flex-shrink: 0; }
.sidebar-logo { font-weight: 700; font-size: 1.2rem; padding: 20px; letter-spacing: 1px; }
.sidebar-nav { display: flex; flex-direction: column; }
.sidebar-nav a { color: #cbd5e1; text-decoration: none; padding: 12px 20px; font-size: 0.9rem; }
.sidebar-nav a:hover { background: rgba(255,255,255,0.05); }
.sidebar-nav a.active { background: var(--sidebar-active); color: #fff; border-radius: 6px; margin: 0 8px; }
/* MAIN */
.main { flex: 1; display: flex; flex-direction: column; }
.topbar { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; }
.menu-toggle {
background: none;
border: 1px solid transparent;
color: var(--text-dark);
font-size: 1.25rem;
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.menu-toggle:hover {
background: var(--bg);
border-color: var(--border);
color: var(--text-dark);
}
html[data-theme="dark"] .menu-toggle {
color: #e5e7eb;
}
html[data-theme="dark"] .menu-toggle:hover {
background: #243044;
border-color: #3b4559;
color: #ffffff;
}
.content { padding: 24px; }
/* CARDS / DASHBOARD */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--card-bg); border-radius: 10px; padding: 18px; border: 1px solid var(--border); position: relative; }
.stat-card .label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
.stat-card .value { font-size: 1.4rem; font-weight: 700; margin-top: 6px; }
.stat-card .delta { font-size: 0.8rem; color: var(--green); margin-top: 4px; }
.stat-icon {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-icon.icon-blue { background: #dbeafe; color: #2563eb; }
.stat-icon.icon-green { background: #dcfce7; color: #16a34a; }
.stat-icon.icon-orange { background: #ffedd5; color: #ea580c; }
.stat-icon.icon-purple { background: #ede9fe; color: #7c3aed; }
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-error { background: #fee2e2; color: #991b1b; }
/* POS LAYOUT */
.pos-layout { display: flex; gap: 20px; align-items: flex-start; }
.pos-products { flex: 2; }
.pos-cart { flex: 1; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; position: sticky; top: 20px; }
#product-search { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.product-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: box-shadow 0.15s; }
.product-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: var(--sidebar-active); }
.product-name { font-weight: 600; font-size: 0.9rem; }
.product-meta { font-size: 0.75rem; color: var(--text-muted); margin: 4px 0; }
.product-price { font-weight: 700; color: var(--sidebar-active); }
.pos-cart label { display: block; font-size: 0.75rem; color: var(--text-muted); margin: 12px 0 4px; }
.pos-cart select, .pos-cart input[type="number"] { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
#cart-list { margin: 12px 0; max-height: 260px; overflow-y: auto; }
.cart-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.cart-row-controls { display: flex; align-items: center; gap: 6px; }
.cart-row-controls button { width: 22px; height: 22px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 4px; cursor: pointer; }
.cart-totals { border-top: 1px solid var(--border); padding-top: 12px; font-size: 0.9rem; }
.cart-total { font-weight: 700; font-size: 1.1rem; margin-top: 8px; }
.btn-checkout { width: 100%; background: var(--sidebar-active); color: #fff; border: none; padding: 12px; border-radius: 8px; font-weight: 600; margin-top: 16px; cursor: pointer; font-size: 0.95rem; }
.btn-checkout:hover { background: #1d4ed8; }
/* DASHBOARD PANELS */
.dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; align-items: start; }
.panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.panel h3 { font-size: 0.95rem; margin-bottom: 14px; }
.mini-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.85rem; }
.mini-table td, .mini-table th { padding: 8px 4px; border-bottom: 1px solid var(--border); }
.mini-table th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.mini-table.full-width td:last-child, .mini-table.full-width th:last-child { text-align: right; }
@media (max-width: 900px) {
.dashboard-grid { grid-template-columns: 1fr; }
.pos-layout { flex-direction: column; }
}
/* TOOLBAR */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.toolbar input { flex: 1; max-width: 320px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; }
.btn-primary { background: var(--sidebar-active); color: #fff; border: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--border); padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
.btn-link { background: none; border: none; color: var(--sidebar-active); cursor: pointer; font-size: 0.82rem; padding: 0; margin-right: 10px; }
.btn-link-danger { color: var(--red); }
/* DATA TABLE */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th { text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--border); color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; }
.data-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.data-table tr.row-low-stock { background: #fff7ed; }
.actions-cell { white-space: nowrap; }
.badge-low { background: var(--red); color: #fff; font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; margin-left: 6px; }
/* MODAL */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.open { display: flex; }
.modal { background: var(--card-bg); border-radius: 10px; padding: 24px; width: 420px; max-width: 92vw; max-height: 90vh; overflow-y: auto; }
.modal.modal-sm { width: 340px; }
.modal h3 { margin-bottom: 16px; }
.modal label { display: block; font-size: 0.75rem; color: var(--text-muted); margin: 12px 0 4px; }
.modal input, .modal select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
.modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
/* TABS */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tab-btn { background: none; border: none; padding: 10px 16px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--sidebar-active); border-bottom-color: var(--sidebar-active); }
/* STATUS BADGES */
.badge-status { font-size: 0.72rem; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-received { background: #d1fae5; color: #065f46; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
/* PURCHASE ORDER ITEM ROWS */
.po-item-row { display: grid; grid-template-columns: 2fr 60px 40px 80px 90px 24px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.po-item-name { font-weight: 600; }
.po-unit { color: var(--text-muted); }
.po-qty-input, .po-cost-input { padding: 5px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 0.8rem; width: 100%; }
.po-line-total { font-weight: 600; text-align: right; }
.po-remove-btn { background: none; border: none; color: var(--red); font-size: 1.1rem; cursor: pointer; }
/* REPORTS */
.report-filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.report-filter-bar label { font-size: 0.8rem; color: var(--text-muted); }
.report-filter-bar input[type="date"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }
/* TOPBAR USER / LOGOUT */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.role-tag { background: #eef2ff; color: var(--sidebar-active); font-size: 0.72rem; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
.logout-link { color: var(--text-muted); font-size: 0.85rem; text-decoration: none; border-left: 1px solid var(--border); padding-left: 10px; }
.logout-link:hover { color: var(--red); }
/* LOGIN PAGE */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--sidebar-bg); }
.login-card { background: #fff; border-radius: 14px; padding: 36px; width: 360px; max-width: 90vw; }
.login-logo { font-weight: 700; font-size: 1.4rem; color: var(--sidebar-bg); text-align: center; }
.login-tagline { color: var(--text-muted); font-size: 0.85rem; text-align: center; margin: 6px 0 20px; }
.login-card label { display: block; font-size: 0.75rem; color: var(--text-muted); margin: 12px 0 4px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
/* DELIVERY STATUS SELECT */
.status-inline-form { display: inline-block; }
.status-select { padding: 5px 8px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--border); cursor: pointer; }
.status-select.status-pending { background: #fef3c7; color: #92400e; }
.status-select.status-in_transit { background: #dbeafe; color: #1e40af; }
.status-select.status-delivered { background: #d1fae5; color: #065f46; }
.status-select.status-cancelled { background: #fee2e2; color: #991b1b; }
/* EXPENSES */
.expenses-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.data-table tfoot td { border-top: 2px solid var(--border); border-bottom: none; padding-top: 10px; }
.cat-bar-row { margin-bottom: 14px; }
.cat-bar-label { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 4px; }
.cat-bar-track { background: var(--bg); border-radius: 6px; height: 8px; overflow: hidden; }
.cat-bar-fill { background: var(--sidebar-active); height: 100%; border-radius: 6px; }
@media (max-width: 900px) {
.expenses-layout { grid-template-columns: 1fr; }
}
/* Actions Cell – always-visible inline button group */
.actions-cell {
white-space: nowrap;
text-align: right;
vertical-align: middle;
}
.action-buttons {
display: inline-flex;
align-items: center;
gap: 0;
flex-wrap: nowrap;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
background: #ffffff;
}
.action-buttons .inline-form {
display: inline;
margin: 0;
}
.btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 0 12px;
border: none;
border-right: 1px solid #e2e8f0;
background-color: #ffffff;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
line-height: 1;
}
.action-buttons .btn-action:last-child,
.action-buttons .inline-form:last-child .btn-action {
border-right: none;
}
.btn-action i {
font-size: 13px;
}
.btn-action .btn-label {
display: inline;
}
/* Edit – blue */
.btn-action.btn-edit {
color: #2563eb;
}
.btn-action.btn-edit:hover {
background-color: #eff6ff;
color: #1d4ed8;
}
/* Adjust Stock – amber */
.btn-action.btn-stock {
color: #d97706;
}
.btn-action.btn-stock:hover {
background-color: #fffbeb;
color: #b45309;
}
/* Discontinue – red */
.btn-action.btn-danger {
color: #dc2626;
}
.btn-action.btn-danger:hover {
background-color: #fef2f2;
color: #b91c1c;
}
/* Mobile: slightly tighter padding, keep labels if possible */
@media (max-width: 768px) {
.btn-action {
padding: 0 10px;
font-size: 12px;
}
}
/* Layout Shell Setup */
.app-shell {
display: flex;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}
/* Sidebar Styling & Transitions */
.sidebar {
width: 260px;
min-width: 260px;
flex-shrink: 0;
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
}
/* Main Content Area */
.main {
flex-grow: 1;
min-width: 0; /* Prevents layout blowout */
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Collapsed Sidebar State (Desktop) */
.app-shell.sidebar-collapsed .sidebar {
margin-left: -260px;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
margin-left: 0;
transform: translateX(-100%);
}
.app-shell.sidebar-open .sidebar {
transform: translateX(0);
}
.app-shell.sidebar-collapsed .sidebar {
margin-left: 0;
}
}
/* Topbar Right Alignment */
.topbar-right {
display: flex;
align-items: center;
gap: 12px;
}
/* User Profile Badge */
.user-profile {
display: flex;
align-items: center;
gap: 10px;
}
.avatar-icon {
font-size: 28px;
color: #3b82f6;
display: flex;
align-items: center;
}
.avatar-icon img,
.avatar-photo {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.avatar-link {
display: flex;
align-items: center;
text-decoration: none;
}
/* My Profile page */
.profile-pic-preview {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--border);
display: block;
margin: 0 auto 16px;
}
.profile-pic-preview-wrap {
text-align: center;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
}
.admin-name {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
}
/* Role Tag / Badge */
.role-tag {
background-color: #eff6ff;
color: #2563eb;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 12px;
border: 1px solid #dbeafe;
text-transform: capitalize;
}
html[data-theme="dark"] .role-tag {
background-color: #1e3a5f;
border-color: #2d4a6f;
color: #93c5fd;
}
/* The little calendar icon inside renders dark by
default in most browsers, which disappears against a dark input bg. */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
/* Vertical Divider */
.topbar-divider {
width: 1px;
height: 22px;
background-color: var(--border);
}
/* Modern Icon Logout Button */
.logout-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
color: #64748b;
background-color: transparent;
text-decoration: none;
font-size: 15px;
transition: all 0.2s ease;
}
.logout-btn:hover {
background-color: #fef2f2;
color: #dc2626;
}
/* Hide everything except the receipt when printing */
@media print {
body * {
visibility: hidden;
}
#receiptModal, #receiptModal * {
visibility: visible;
}
#receiptModal {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: white !important;
}
.no-print {
display: none !important;
}
}
/* Password field (flex input + eye button) */
.password-field {
display: flex;
align-items: stretch;
}
.password-field input {
flex: 1;
min-width: 0;
}
.password-field button {
flex-shrink: 0;
cursor: pointer;
}
.password-field button:hover {
color: #2563eb !important;
}
html[data-theme="dark"] .password-field button:hover {
color: #60a5fa !important;
}
/* Hide browser native password reveal so it never steals clicks */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none !important;
width: 0;
height: 0;
}
/* Login page still uses the absolute overlay style */
.password-input-wrapper {
position: relative;
display: block;
}
.password-input-wrapper input {
width: 100%;
padding-right: 42px !important;
box-sizing: border-box;
}
.password-input-wrapper input[type="password"]::-ms-reveal,
.password-input-wrapper input[type="password"]::-ms-clear,
.password-input-wrapper input::-webkit-credentials-auto-fill-button {
display: none !important;
visibility: hidden;
pointer-events: none;
}
.btn-toggle-password {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
z-index: 5;
background: transparent;
border: none;
color: #6c757d;
cursor: pointer;
padding: 6px 10px;
font-size: 15px;
line-height: 1;
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.btn-toggle-password:hover {
color: #2563eb;
}
html[data-theme="dark"] .btn-toggle-password {
color: #9ca3af;
}
html[data-theme="dark"] .btn-toggle-password:hover {
color: #60a5fa;
}
.forgot-link {
font-size: 13px;
color: #2563eb;
text-decoration: none;
}
.forgot-link:hover {
text-decoration: underline;
}
/* Login Page Layout & Card Styling */
body.login-body, body.login-page {
background-color: #0f172a; /* Dark background matching your POS */
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
}
.login-card {
background: #ffffff;
padding: 32px;
border-radius: 12px;
width: 100%;
max-width: 400px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.login-card .login-logo, .login-card h2 {
text-align: center;
font-size: 22px;
font-weight: 700;
color: #0f172a;
margin: 0 0 4px 0;
}
.login-card .login-tagline, .login-card .subtitle {
text-align: center;
color: #64748b;
font-size: 14px;
margin-bottom: 24px;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #334155;
margin-bottom: 6px;
}
.form-control,
.login-card input[type="text"],
.login-card input[type="password"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.form-control:focus,
.login-card input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.btn-primary {
background-color: #2563eb;
color: #ffffff;
border: none;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-primary:hover {
background-color: #1d4ed8;
}
.app-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
margin-top: 40px;
border-top: 1px solid var(--border);
font-size: 14px;
color: var(--text-muted);
}
.app-footer .dev-credit {
color: #0d9488;
font-weight: 700;
}
/* Customer Action Icon Buttons */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
border: none;
margin-left: 4px;
font-size: 0.85rem;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-view {
background-color: #e0f2fe;
color: #0284c7;
}
.btn-view:hover {
background-color: #0284c7;
color: #ffffff;
}
.btn-edit {
background-color: #fef3c7;
color: #d97706;
}
.btn-edit:hover {
background-color: #d97706;
color: #ffffff;
}
.btn-delete {
background-color: #fee2e2;
color: #dc2626;
}
.btn-delete:hover {
background-color: #dc2626;
color: #ffffff;
}
/* Sidebar Nav Icon Alignment */
.sidebar-nav .nav-link {
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-nav .nav-link i {
width: 20px;
text-align: center;
font-size: 1rem;
}
/* Responsive Table Wrappers for Mobile */
.table-responsive,
div[style*="overflow-x: auto"] {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
/* Enable Horizontal Scrolling without Truncation */
table {
min-width: 600px; /* Prevents columns from collapsing tightly on small screens */
width: 100%;
}
/* Wrap each table individually so only the table scrolls sideways -
never the whole page. Used via . */
.table-responsive {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
margin: 0;
}
/* Mobile-Friendly Input Controls */
@media (max-width: 768px) {
.flex, [style*="display: flex"] {
flex-wrap: wrap;
}
input[type="text"],
input[type="email"],
input[type="password"],
select {
max-width: 100%;
}
/* Tighter content padding on small screens */
.content {
padding: 14px;
}
/* Toolbars (search + add-new buttons etc.) wrap instead of overflowing */
.toolbar {
flex-wrap: wrap;
gap: 10px;
}
.toolbar input {
max-width: 100%;
flex: 1 1 100%;
}
/* Footer: stack and center instead of squeezing onto one row */
.app-footer {
flex-direction: column;
gap: 6px;
text-align: center;
padding: 14px 16px;
}
/* Topbar: keep the essentials, drop the admin's name label so the
hamburger, avatar, role tag and logout button all still fit */
.admin-name {
display: none;
}
.topbar {
padding: 12px 14px;
}
/* Purchase-order line items: stack into two columns instead of six */
.po-item-row {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"name name"
"qty unit"
"cost total"
"remove remove";
row-gap: 6px;
column-gap: 8px;
}
.po-item-name { grid-area: name; }
.po-qty-input { grid-area: qty; }
.po-unit { grid-area: unit; align-self: center; }
.po-cost-input { grid-area: cost; }
.po-line-total { grid-area: total; text-align: left; align-self: center; }
.po-remove-btn { grid-area: remove; justify-self: end; }
}
/* Modal forms: collapse two-column rows to one column on narrow phones */
@media (max-width: 480px) {
.modal .form-row {
grid-template-columns: 1fr;
}
.modal {
padding: 18px;
}
}
.tab-btn {
text-decoration: none;
}
/* Stack side cards under main content on mobile */
@media (max-width: 768px) {
.expenses-layout {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.page-header {
flex-direction: row !important;
}
}
/* Theme toggle button in the topbar */
.theme-toggle-btn {
background: none;
border: 1px solid var(--border);
color: var(--text-dark);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 15px;
}
.theme-toggle-btn:hover { background: var(--bg); }