/* ============================================================ ARMAAN PRESS ERP — Shared Stylesheet ============================================================ */ /* Kill the browser's own default mobile tap-highlight (the grey/blue rectangle that flashes over whatever you tap on Android Chrome/WebView). The app already has its own deliberate :active press-feedback everywhere (scale-down, background tint, etc.) — this was just an extra unstyled browser box on top of that, with nothing to do with any real feature. */ html { -webkit-tap-highlight-color: transparent; } a, button, input, select, textarea, label, [role="button"], .btn, .sidebar-item, .mob-action-icon, .mob-order-card, .mtb-item, .tab-btn { -webkit-tap-highlight-color: transparent; } :root { --sidebar-bg: #111013; --sidebar-text: #898892; --sidebar-active-text: #ff2d62; --sidebar-active-bg: #22151e; --bg-main: #fdfdfd; --border-main: #ebedf2; --brand-pink: #d81142; --brand-pink-hover: #b00e35; --text-primary: #1a1a1f; --text-secondary: #45454e; --text-tertiary: #63636c; --white: #ffffff; --shadow-sm: 0 1px 2px rgba(17,16,19,0.04); --shadow-md: 0 4px 16px rgba(17,16,19,0.08); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Height of the fixed top masthead (logo bar) — sidebar top-offset, body top-padding and the sticky .topbar all read from this single value so the two never drift out of sync. Shrunk on mobile below. --masthead-top-space is the blank breathing room reserved above the logo itself (black background, same bar) — like the gap above the header in native apps. It's carved out of --masthead-h via padding, so the logo's own size/position stays exactly as before; only the space above it grows. */ --masthead-h: 90px; --masthead-top-space: 18px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { /* v230: 'Inter Fallback' — Inter ke naap se milta-julta fallback, taaki Inter async load hote waqt table columns ki chaudai na badle (poori wajah includes/header.php ke @font-face comment me likhi hai). Ye stack wahi hai jo header.php ki inline critical CSS me hai — dono ka same hona zaroori hai, warna ye wali baad me load hokar us fix ko overwrite kar deti. */ font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-main); color: var(--text-primary); font-size: 14px; } /* Only pages that actually include the fixed masthead (the staff app and customer portal — see header.php / portal_header.php, both of which add this class to ) get pushed down to make room for it. Standalone pages sharing this stylesheet (login, invoices, label/print views) don't render .app-masthead and must not get this extra top padding, or they'd show a blank gap. */ body.has-masthead { padding-top: calc(var(--masthead-h) + env(safe-area-inset-top, 0px)); } /* ---- Fixed top masthead: shows the workspace's horizontal logo, pinned above everything else, on every screen size — it never scrolls away. ---- */ .app-masthead { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--masthead-h) + env(safe-area-inset-top, 0px)); padding-top: calc(var(--masthead-top-space) + env(safe-area-inset-top, 0px)); box-sizing: border-box; background: var(--sidebar-bg); display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.18); } .app-masthead-desktop { display: flex; align-items: center; justify-content: center; width: 100%; } .app-masthead-logo { display: flex; align-items: center; justify-content: center; max-width: 100%; } .app-masthead-logo img { display: block; max-height: 40px; width: auto; } .app-masthead-textonly { color: #fff; font-weight: 800; font-size: 17px; letter-spacing: 0.5px; text-align: center; line-height: 1.2; } .app-masthead-textonly small { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: 1.5px; color: var(--sidebar-text); text-transform: uppercase; margin-top: 2px; } /* ---- Masthead hamburger (left) + profile avatar (right) — fixed on every page, next to the logo, matching the app's native-style header. ---- */ .masthead-menu-btn { position: absolute; left: 14px; top: 50%; transform: translateY(calc(-50% + (var(--masthead-top-space, 14px) / 2))); width: 38px; height: 38px; border: none; border-radius: 10px; background: rgba(255,255,255,0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; z-index: 2; flex-shrink: 0; } .masthead-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; } .masthead-menu-btn:hover { background: rgba(255,255,255,0.14); } /* Open-tickets badge — lives on the hamburger button itself, which is fixed in the masthead and always on screen (unlike the matching badge inside the sidebar drawer, which disappears whenever the menu/drawer is closed or hidden). z-index above the masthead (1000) so it's never covered, and a white ring so it reads clearly against any button state. */ .masthead-menu-ticket-badge { position: absolute; top: -5px; right: -5px; z-index: 1001; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--brand-pink); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--sidebar-bg, #1a1a1f); box-shadow: 0 2px 6px rgba(0,0,0,0.3); pointer-events: none; animation: mastheadTicketBadgePulse 2.2s ease-in-out infinite; } @keyframes mastheadTicketBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .masthead-menu-ticket-badge { animation: none; } } .masthead-avatar { position: absolute; right: 14px; top: 50%; transform: translateY(calc(-50% + (var(--masthead-top-space, 14px) / 2))); display: inline-flex; z-index: 2; flex-shrink: 0; text-decoration: none; } .masthead-avatar img, .masthead-avatar span:first-child { border: 2px solid rgba(255,255,255,0.35); box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .masthead-avatar-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #0f9d58; border: 2px solid var(--sidebar-bg, #1a1a1f); } @media (max-width: 480px) { .masthead-menu-btn { left: 10px; width: 34px; height: 34px; } .masthead-avatar { right: 10px; } } /* ---- Mobile masthead: same full logo as desktop, centered — just at a size that fits the shorter mobile masthead bar. Hidden on desktop, which keeps the full banner above completely unchanged. ---- */ .app-masthead-mobile { display: none; align-items: center; justify-content: center; width: 100%; padding: 0 16px; } @media (max-width: 900px) { .app-masthead-desktop { display: none; } .app-masthead-mobile { display: flex; } } /* ---- Recycle bin FAB: on mobile, only show it on the Dashboard so it's not cluttering every page — desktop keeps showing it everywhere, exactly as before. ---- */ @media (max-width: 900px) { .recycle-bin-fab:not(.recycle-bin-fab-dashboard) { display: none !important; } .shortcuts-fab-trigger:not(.shortcuts-fab-dashboard) { display: none !important; } } a { text-decoration: none; color: inherit; } ul { list-style: none; margin: 0; padding: 0; } /* ============================================================ DARK MODE Toggled by adding .dark-mode to (staff: localStorage only; customer portal: DB-backed via customers.portal_dark_mode, mirrored to localStorage too). Redefining the core variables here is what makes most of the app adapt automatically, since components already read var(--white)/var(--text-primary)/etc. rather than hardcoded hex. Everything below the variable block is a targeted fix for the specific spots that DON'T use those variables (a hardcoded #fff background, a hardcoded dark-gray text color meant for a light page, etc) — this is exactly the "white box, unreadable gray text" bug this section exists to close out, one real occurrence at a time rather than a blanket filter/invert hack that would also wreck photos and logos. ============================================================ */ body.dark-mode { --bg-main: #121214; --border-main: #2c2c34; --text-primary: #f0f0f3; --text-secondary: #c2c2cb; --text-tertiary: #93939d; --white: #1c1c22; --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 4px 18px rgba(0,0,0,0.5); } /* ---- Components with a hardcoded (non-variable) color of their own ---- */ body.dark-mode .btn-secondary { background: #26262e; color: var(--text-primary); } body.dark-mode .btn-secondary:hover:not(:disabled) { background: #303039; } body.dark-mode .modal-box { background: var(--white); } body.dark-mode .modal-overlay { background: rgba(0,0,0,0.72); } body.dark-mode .alert-success { background: #16301f; color: #4ade80; } body.dark-mode .alert-danger { background: #3a1c26; color: #ff6b8f; } body.dark-mode .topbar { background: var(--white); border-color: var(--border-main); } body.dark-mode .data-table th { background: #1a1a20; color: var(--text-tertiary); } body.dark-mode .data-table td { border-color: var(--border-main); } body.dark-mode .form-input, body.dark-mode .form-select, body.dark-mode textarea.form-input { background: #1a1a20; border-color: #34343d; color: var(--text-primary); } body.dark-mode .form-label { color: var(--text-secondary); } body.dark-mode ::placeholder { color: #55555f; opacity: 1; } body.dark-mode .empty-state { color: var(--text-secondary); } body.dark-mode .empty-state h3 { color: var(--text-primary); } /* ---- Near-white panel backgrounds that slipped past the retrofit ---- The bigger "hardcoded inline light box" retrofit lives further down (search "Retrofit the most common hardcoded inline") and already catches #fafafc/#f9f9fb/#f3f3f6/#e5e5ea etc. This one shade wasn't in that list because it's never written as a plain hex — it's always the fallback of an undefined CSS variable, background:var(--bg-tertiary, #f7f3fb), used by the voice-note and quick-add-customer panels. --bg-tertiary itself is never actually defined anywhere (light or dark mode), so it always fell through to this near-white fallback — same "white box, invisible gray text" bug as the others, just missed until now since the attribute selector needs the exact literal text. */ body.dark-mode [style*="var(--bg-tertiary,#f7f3fb)"] { background: #1a1a20 !important; } /* ---- Deliberately-white surfaces, dark mode ---- A handful of spots keep a plain white card on purpose (voice-note transcript box, quick preset chips) rather than switching to a dark panel like the ones above — but the text on them still used the theme's grey/light variable, which in dark mode goes light and turns near-invisible on that white card. Background stays white as intended; only the text is pinned to a fixed dark color here. */ body.dark-mode .offer-mode-tab:not(.active), body.dark-mode .offer-preset-btn, body.dark-mode #voiceStatus, body.dark-mode #voiceTimelineTranscript { color: #1a1a1f !important; } body.dark-mode .mobile-tab-bar { background: rgba(28,28,34,0.98); border-color: var(--border-main); } body.dark-mode .staff-login-toggle { background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); } /* ---- Other CSS-class-level (not inline-style) hardcoded light colors ---- */ body.dark-mode .data-table tr:hover td { background: #1e1e24; } body.dark-mode tr.row-link:hover { background: #26181d; } body.dark-mode .kanban-col { background: #1a1a20; } body.dark-mode .mob-action-icon { background: #26262e; } body.dark-mode .mob-action-icon:active { background: #303039; } body.dark-mode .mob-order-card:active { background: #1e1a1c; } body.dark-mode .mob-payment-icon { background: #1a2e22; } body.dark-mode .shortcuts-kbd { background: #26262e; border-color: #3a3a44; color: var(--text-primary); } body.dark-mode .overdue-badge, body.dark-mode .logo-shape-option.selected, body.dark-mode .label-order-row.lbl-selected, body.dark-mode .modal-close:hover, body.dark-mode .login-error { background: #3a1c26; } body.dark-mode .prod-countdown.tone-soon { background: #332d1c; color: #f0b849; } body.dark-mode .prod-countdown.tone-late { background: #3a1c26; color: #ff6b8f; } /* ---- Scrollbar polish ---- */ body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-mode ::-webkit-scrollbar-track { background: #1a1a20; } body.dark-mode ::-webkit-scrollbar-thumb { background: #3a3a44; border-radius: 6px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #4a4a55; } /* ---- Theme toggle button ---- */ .theme-toggle-btn { width: 38px; height: 38px; border-radius: 10px; background: #1a1a1f; color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; flex-shrink: 0; transition: transform 0.15s ease; } .theme-toggle-btn:active { transform: scale(0.9); } .theme-toggle-icon-light { display: none; } body.dark-mode .theme-toggle-icon-dark { display: none; } body.dark-mode .theme-toggle-icon-light { display: inline; } /* ---- Retrofit the most common hardcoded inline "light box" background colors used throughout the app (badges, subtle panels, status highlights) to a matching dark equivalent. Matched by hex value regardless of the exact inline spacing, so every occurrence of a shade gets one consistent replacement. This — not the variables above — is what actually fixes light, unreadable panels in dark mode. ---- */ body.dark-mode [style*="#f3f3f6"], body.dark-mode [style*="#f0f0f3"] { background-color: #26262e !important; } body.dark-mode [style*="#fafafc"], body.dark-mode [style*="#f4f5f9"], body.dark-mode [style*="#f9f9fb"], body.dark-mode [style*="#f7f7fa"], body.dark-mode [style*="#f4f4f6"] { background-color: #1e1e24 !important; } body.dark-mode [style*="#e5e5ea"] { background-color: #2a2a32 !important; } body.dark-mode [style*="#fdeaf0"], body.dark-mode [style*="#fef5f7"] { background-color: #3a1c26 !important; } body.dark-mode [style*="#f3effe"] { background-color: #2a2438 !important; } body.dark-mode [style*="#eef4ff"] { background-color: #1c2636 !important; } body.dark-mode [style*="#e7f8ee"], body.dark-mode [style*="#e8f5e9"], body.dark-mode [style*="#f0fdf4"] { background-color: #1a2e22 !important; } body.dark-mode [style*="#fffdf6"], body.dark-mode [style*="#fffaf0"], body.dark-mode [style*="#fff8ed"], body.dark-mode [style*="#fff7e6"] { background-color: #332d1c !important; } /* ---- Same retrofit for hardcoded dark-gray text colors that were meant for a light background — on the new dark surfaces they'd otherwise be near-invisible (dark text on dark background). ---- */ body.dark-mode [style*="color:#3a3a42"], body.dark-mode [style*="color: #3a3a42"], body.dark-mode [style*="color:#2c2c34"], body.dark-mode [style*="color: #2c2c34"] { color: #c8c8d0 !important; } body.dark-mode [style*="color:#1a1a1f"], body.dark-mode [style*="color: #1a1a1f"] { color: #f0f0f3 !important; } body.dark-mode [style*="color:#6b6b76"], body.dark-mode [style*="color: #6b6b76"], body.dark-mode [style*="color:#8a8a94"], body.dark-mode [style*="color: #8a8a94"], body.dark-mode [style*="color:#45454e"], body.dark-mode [style*="color: #45454e"] { color: #c2c2cb !important; } /* ---- Layout shell ---- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; min-width: 240px; max-width: 240px; box-sizing: border-box; background: var(--sidebar-bg); color: var(--sidebar-text); flex-shrink: 0; display: flex; flex-direction: column; padding: 20px 0; scrollbar-gutter: stable; overflow-x: hidden; /* Pinned to the viewport with its own fixed height, so a long page below never drags the sidebar (and its scrollbar) along with it — the sidebar stays put and only its own nav list scrolls internally. Previously .app-shell used min-height (not height), so the sidebar just stretched to match however tall the whole page was and the "scrollbar" never had a real boundary to scroll within. */ position: sticky; top: calc(var(--masthead-h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--masthead-h) - env(safe-area-inset-top, 0px)); } /* Transition only applies on desktop (see the hover rules below) — mobile's drawer open/close uses its own separate .sidebar.animate mechanism. */ .sidebar-brand { padding: 0 20px 20px; font-weight: 800; font-size: 17px; color: #fff; flex-shrink: 0; min-width: 0; overflow: hidden; } /* Full logo shows normally; compact icon only appears once the sidebar is resting in its icon-only rail width (a wide horizontal/vertical logo wouldn't fit in that 64px rail, so we swap to the dedicated square icon instead of trying to squeeze/clip the full logo). */ .brand-logo-icon { display: none; } /* ---- Desktop (901px+), applies to any sidebar marked .sidebar-hover-rail (both the staff app and the customer portal use it): rests as an icon-only rail and expands on hover — no click, no remembered on/off state. Hovering ANYWHERE on the sidebar (background or an icon) reveals it; moving the mouse away collapses it back. Mobile is untouched — it keeps its own tap-to-open drawer exactly as before. ---- */ @media (min-width: 901px) { .sidebar-hover-rail { width: 64px; min-width: 64px; max-width: 64px; transition: width 0.18s ease, min-width 0.18s ease, max-width 0.18s ease; } .sidebar-hover-rail:hover { width: 240px; min-width: 240px; max-width: 240px; z-index: 950; box-shadow: 4px 0 24px rgba(0,0,0,0.14); } .sidebar-hover-rail:not(:hover) .sidebar-brand > div, .sidebar-hover-rail:not(:hover) .sidebar-item-label, .sidebar-hover-rail:not(:hover) .sidebar-item-badge, .sidebar-hover-rail:not(:hover) .sidebar-section-toggle, .sidebar-hover-rail:not(:hover) .sidebar-user, .sidebar-hover-rail:not(:hover) .sidebar-lang-switch, .sidebar-hover-rail:not(:hover) .sidebar-logout { display: none; } /* Icon-only resting mode ignores the accordion entirely — every item's icon must stay visible regardless of whether that category was expanded or collapsed before. This overrides the JS-set inline style, which is why it needs !important here specifically. */ .sidebar-hover-rail:not(:hover) .sidebar-section-list { display: block !important; } .sidebar-hover-rail:not(:hover) .sidebar-brand { padding: 0 10px 20px; justify-content: center; } .sidebar-hover-rail:not(:hover) .sidebar-item { padding: 12px 0; justify-content: center; } .sidebar-hover-rail:not(:hover) .sidebar-item > span:first-child { width: 100%; text-align: center; } .sidebar-hover-rail:not(:hover) .sidebar-footer { padding: 12px 8px 0; text-align: center; } .sidebar-hover-rail:not(:hover) .sidebar-footer::after { content: '👤'; display: block; font-size: 20px; color: var(--sidebar-text); padding: 6px 0; } .sidebar-hover-rail:not(:hover) .sidebar-scroll-btn { font-size: 9px; } /* Strict two-state toggle: when resting (not hovered) show ONLY the compact icon; the moment it's hovered/expanded, fall back to the base rule above which hides the icon again, so only the full logo shows. */ .sidebar-hover-rail:not(:hover) .brand-logo-full { display: none !important; } .sidebar-hover-rail:not(:hover) .brand-logo-icon { display: inline-flex !important; } .sidebar-hover-rail:not(:hover) .sidebar-broadcast-link { justify-content: center; padding: 9px 0; } } /* ---- Floating keyboard-shortcuts (⌨️) button: on desktop, follow the menu bar's own hidden/shown state — hidden while the sidebar rests collapsed (icon-only "hidden" rail), shown once it's expanded/hovered. Body class is set by the small JS listener in includes/header.php, since this button sits outside the