:root { --page-bg: #f4f7fb; --page-bg-top: #f8fbff; --panel-bg: #ffffff; --panel-border: #d7e0ef; --text-main: #1b355e; --text-muted: #61738f; --input-border: #c7d3e6; --primary: #1d4f91; --primary-strong: #173f74; --success: #1e9a59; --danger: #c0392b; --neutral: #7b8596; --shadow: 0 8px 24px rgba(21, 52, 94, 0.08); } /* Site-wide dark theme (js/theme.js sets data-theme="dark"/"light" on , toggled from Dashboard - see .theme-toggle-group below). --primary/--primary-strong are deliberately left unchanged - the top nav is already a dark navy blue in the light theme, so it reads fine as-is in dark mode too and doesn't need its own override. Badge colors (.badge-success etc.) are also left as their light pastel values on purpose - they still read fine against a dark panel, the same way GitHub/most dark-mode UIs keep colored status pills light. */ :root[data-theme="dark"] { --page-bg: #0b1220; --page-bg-top: #0d1524; --panel-bg: #111a2c; --panel-border: #22314b; --text-main: #e6f1ff; --text-muted: #8a9bbd; --input-border: #2c3c58; --success: #2ecc82; --danger: #e2695a; --neutral: #8a9bbd; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] table, :root[data-theme="dark"] .modal-panel { background: var(--panel-bg); } :root[data-theme="dark"] th { background: #16213a; } :root[data-theme="dark"] tr.clickable-row:hover { background: #16213a; } /* Theme toggle (Dashboard only - see docs/dashboard.html/js/dashboard.js's wireThemeToggle). */ .theme-toggle-group { display: inline-flex; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; } .theme-toggle-btn { background: var(--panel-bg); color: var(--text-muted); border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } .theme-toggle-btn + .theme-toggle-btn { border-left: 1px solid var(--panel-border); } .theme-toggle-btn.active { background: var(--primary); color: #fff; } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(180deg, var(--page-bg-top) 0%, var(--page-bg) 100%); color: var(--text-main); } /* Optional company background image (General Setup) on authenticated pages (currently Dashboard - see js/companyBranding.js's applyAppBackground). A light tint, not a dark one like the Login page's version, since this page's cards/text are designed for a light background - the photo shows through faintly as texture rather than replacing the theme. .page/#topnav get position+z-index below so they still paint above the fixed overlay (a position:fixed element with an explicit z-index otherwise paints above non-positioned in-flow content). */ body.app-has-photo-bg { background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } body.app-has-photo-bg::before { content: ''; position: fixed; inset: 0; background: rgba(244, 247, 251, 0.8); z-index: 0; } .page { max-width: 1200px; margin: 0 auto; padding: 20px; position: relative; z-index: 1; } @media (max-width: 480px) { .page { padding: 14px; } } .centered-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } h1, h2, h3 { color: var(--text-main); margin-top: 0; } /* Top navigation */ #topnav { background: var(--primary); box-shadow: var(--shadow); position: relative; /* Must beat .page's z-index: 1 above - equal z-index falls back to DOM order, and .page (the content below the nav, e.g. Dashboard's welcome heading) comes later in the HTML, so a tied value let page content paint over the nav's dropdown menus and swallow their clicks. Still well under .modal-backdrop's z-index: 100 so modals correctly cover the nav. */ z-index: 30; } .topnav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .topnav-brand { color: #fff; font-weight: 700; font-size: 18px; white-space: nowrap; } .topnav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .topnav-link { color: #dce8fb; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; } .topnav-link:hover { background: rgba(255, 255, 255, 0.12); } .topnav-link.active { background: #fff; color: var(--primary-strong); } .topnav-group { position: relative; } .topnav-group-toggle { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: #dce8fb; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; } .topnav-group-toggle:hover { background: rgba(255, 255, 255, 0.12); } .topnav-group-toggle.active { background: #fff; color: var(--primary-strong); } .topnav-group-caret { font-size: 10px; transition: transform 0.15s ease; } .topnav-group.open .topnav-group-caret { transform: rotate(180deg); } .topnav-group-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; min-width: 210px; z-index: 20; } .topnav-group.open .topnav-group-menu { display: block; } .topnav-group-menu .topnav-link { display: block; color: var(--text-main); padding: 8px 10px; } .topnav-group-menu .topnav-link:hover { background: var(--page-bg); } .topnav-group-menu .topnav-link.active { background: var(--primary); color: #fff; } .topnav-logout { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; padding: 8px 14px; border-radius: 6px; font-weight: 600; cursor: pointer; } .topnav-logout:hover { background: rgba(255, 255, 255, 0.12); } .topnav-toggle { display: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; font-size: 18px; line-height: 1; padding: 6px 12px; border-radius: 6px; cursor: pointer; } /* Below this width the full link list (~20 items) wraps into a wall of text before any page content is visible - see js/nav.js's renderTopNav. Collapse it behind the hamburger toggle instead: links stack full-width in a dropdown that's closed by default. */ @media (max-width: 860px) { .topnav-toggle { display: inline-flex; align-items: center; justify-content: center; } .topnav-links { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 2px; margin-top: 10px; } .topnav-links.open { display: flex; } .topnav-link { padding: 12px 14px; border-radius: 6px; } .topnav-group-toggle { width: 100%; justify-content: space-between; padding: 12px 14px; } .topnav-group-menu { display: none; position: static; width: 100%; margin-top: 0; padding: 0 0 0 14px; border: none; box-shadow: none; background: transparent; } .topnav-group.open .topnav-group-menu { display: block; } .topnav-group-menu .topnav-link { color: #dce8fb; } .topnav-group-menu .topnav-link:hover { background: rgba(255, 255, 255, 0.12); } .topnav-group-menu .topnav-link.active { background: #fff; color: var(--primary-strong); } .topnav-logout { margin-top: 6px; text-align: center; } } /* Cards */ .card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow); padding: 20px; } /* Login page - dark gradient backdrop behind a frosted-glass sign-in card; swapped for an uploaded photo background below when one is set (see js/companyBranding.js's applyLoginBackground). */ body.login-backdrop { min-height: 100vh; margin: 0; background: radial-gradient(circle at 30% 20%, #24466f 0%, #0d1b2a 55%, #05090f 100%); position: relative; overflow-x: hidden; } /* Uploaded a dedicated background image (General Setup) - use it full-bleed instead of the gradient+watermark fallback above, with a dark overlay so the glass card keeps enough contrast regardless of how busy/light the photo is. */ body.login-backdrop.login-has-photo-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } body.login-backdrop.login-has-photo-bg::before { content: ''; position: fixed; inset: 0; background: rgba(5, 9, 15, 0.4); z-index: 0; } .login-card { position: relative; z-index: 1; max-width: 380px; width: 100%; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); padding: 32px 28px; } .login-card h1 { color: #fff; } .login-card p.muted { color: rgba(255, 255, 255, 0.75); } .login-card label { color: rgba(255, 255, 255, 0.85); } .login-card input[type="text"], .login-card input[type="password"] { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.5); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 20px; } .nav-card { display: block; text-decoration: none; color: var(--text-main); background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--shadow); padding: 26px 20px; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .nav-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21, 52, 94, 0.14); } .nav-card .icon { font-size: 34px; margin-bottom: 10px; } .nav-card .title { font-weight: 700; font-size: 16px; } /* Forms */ label { display: block; font-weight: 600; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 14px; color: var(--text-main); background: #fff; } .form-row { margin-bottom: 14px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .form-grid-single { grid-template-columns: 1fr; } .form-group { margin-bottom: 20px; } .form-group-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-border); } /* Buttons */ .btn { display: inline-block; padding: 10px 18px; border-radius: 6px; border: none; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-strong); } .btn-secondary { background: var(--neutral); color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-sm { padding: 6px 10px; font-size: 12px; } /* Tables */ table { width: 100%; border-collapse: collapse; background: #fff; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--panel-border); text-align: left; font-size: 13px; } th { background: #eef3fb; color: var(--text-main); font-weight: 700; } tr.clickable-row { cursor: pointer; } tr.clickable-row:hover { background: #f2f7ff; } .table-wrap { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 8px; } /* Transfer Orders' Line Items table (js/transferOrders.js) needs its item/variant suggestion dropdowns to extend below the table without being clipped. Plain .table-wrap can't allow that: per the CSS overflow spec, when overflow-x is 'auto' and overflow-y is left at its 'visible' default, the browser silently forces overflow-y to 'auto' too - so the dropdown was being clipped/scrolled away by the table-wrap itself, not actually hidden. This override restores true 'visible' on both axes for this one table. */ .line-items-wrap { overflow: visible; } /* Manage modal's lines table (js/transferOrders.js's renderManageLines) needs the same treatment - its "Serials to Ship" .serial-tag-dropdown is position:absolute within this table-wrap, so a plain .table-wrap's forced overflow-y:auto clipped/scrolled it away instead of letting it float over the Pancake Sync section below. */ .manage-lines-wrap { overflow: visible; } /* Badges */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .badge-success { background: #e3f7ea; color: var(--success); } .badge-warning { background: #fff3d6; color: #a6720a; } .badge-danger { background: #fbe4e1; color: var(--danger); } .badge-neutral { background: #eef1f6; color: var(--neutral); } .badge-primary { background: #e2ecfb; color: var(--primary); } .badge-purple { background: #ece5fa; color: #7b5bc9; } .badge-glass { background: #dcf1fb; color: #146b96; } .pancake-order-id-link { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--primary); text-decoration: none; } .pancake-order-id-link:hover { text-decoration: underline; } /* Status count summary bar (Online Orders page) */ .status-summary-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; } .status-summary-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--panel-bg); font-size: 13px; font-weight: 600; color: var(--text-main); font-family: inherit; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .status-summary-pill:hover { border-color: var(--primary); } /* Applied to whichever pill's status currently matches the status filter box, so clicking a pill to filter the list gives a clear "this is the active filter" indication. */ .status-summary-pill.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(29, 79, 145, 0.18); } .status-summary-pill .status-summary-count { font-size: 16px; font-weight: 700; } /* Grouped Confirmed/Printed/To Ship tabs + card list (Online Order Staff view, Online Orders page) - built for a phone screen: big tap targets, one column, no horizontal scrolling. */ .grouped-tabs { display: flex; gap: 8px; margin-bottom: 16px; } .grouped-tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--panel-bg); font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-main); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .grouped-tab-btn:hover { border-color: var(--primary); } .grouped-tab-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 2px rgba(29, 79, 145, 0.18); } .grouped-tab-count { font-size: 18px; font-weight: 800; } .order-card-list { display: flex; flex-direction: column; gap: 12px; } .order-card { border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg); padding: 14px 16px; } .order-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .order-card-id { font-size: 15px; font-weight: 700; color: var(--primary); } .order-card-customer { font-size: 15px; font-weight: 600; margin: 4px 0 10px; } .order-card-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; } .order-card-label { color: var(--neutral); font-weight: 600; } .order-card-actions { display: flex; gap: 10px; margin-top: 14px; } .order-card-actions .btn { flex: 1; text-align: center; padding: 10px 12px; font-size: 14px; } /* Dashboard status overview cards */ .stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 20px 0 30px; } .stat-card { display: block; text-decoration: none; color: var(--text-main); background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--shadow); padding: 18px 20px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21, 52, 94, 0.14); } .stat-card .stat-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); } .stat-card .stat-icon { font-size: 16px; } .stat-card .stat-value { font-size: 32px; font-weight: 700; margin-top: 6px; } .stat-card.stat-confirmed .stat-value { color: var(--primary); } .stat-card.stat-printed .stat-value { color: #a6720a; } .stat-card.stat-to-ship .stat-value { color: #7b5bc9; } .stat-card.stat-shipped .stat-value { color: var(--success); } .stat-card.stat-cancelled .stat-value { color: var(--danger); } /* Dashboard notification center - attention-needed items (e.g. Requested transfer orders sitting unshipped). Amber, matching the "Requested" status badge color elsewhere in the portal, so the two visually reinforce each other. */ .notification-center { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; } .notification-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff3d6; border: 1px solid #f0d9a0; border-radius: 10px; padding: 14px 20px; color: #7a5a05; } .notification-item .notification-message { display: flex; align-items: center; gap: 10px; font-weight: 600; } .notification-item .notification-icon { font-size: 18px; } .notification-item .notification-action { flex-shrink: 0; white-space: nowrap; font-weight: 700; color: #a6720a; text-decoration: none; border: 1px solid #a6720a; border-radius: 6px; padding: 6px 12px; background: #fff; transition: background 0.15s ease, color 0.15s ease; } .notification-item .notification-action:hover { background: #a6720a; color: #fff; } /* Dashboard financial overview cards (super users only), grouped into "Monthly"/"Daily" sections */ .finance-section-heading { margin: 22px 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .finance-section-heading:first-child { margin-top: 20px; } .finance-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 0 0 6px; } .finance-card { display: block; position: relative; overflow: hidden; border-radius: 14px; padding: 22px 24px; color: #fff; text-decoration: none; box-shadow: 0 10px 30px rgba(21, 52, 94, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; } .finance-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(21, 52, 94, 0.24); } .finance-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); } .finance-card.finance-receive { background: linear-gradient(135deg, #f5934a 0%, #c0392b 100%); } .finance-card.finance-sales { background: linear-gradient(135deg, #22b6a3 0%, #1d4f91 100%); } .finance-card.finance-walkin { background: linear-gradient(135deg, #f2994a 0%, #6a3093 100%); } .finance-card.finance-daily-online { background: linear-gradient(135deg, #56ab2f 0%, #1d4f91 100%); } .finance-card.finance-daily-walkin { background: linear-gradient(135deg, #f7971e 0%, #b3336a 100%); } .finance-card.finance-expense { background: linear-gradient(135deg, #8a5cf6 0%, #c0392b 100%); } .finance-card.finance-daily-expense { background: linear-gradient(135deg, #c0392b 0%, #6a3093 100%); } .finance-card.finance-purchase { background: linear-gradient(135deg, #4a90d9 0%, #173f74 100%); } .finance-card .finance-value.placeholder { font-size: 22px; font-weight: 700; opacity: 0.9; } .finance-card .finance-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .finance-card .finance-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.88); } .finance-card .finance-icon { font-size: 22px; background: rgba(255, 255, 255, 0.18); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .finance-card .finance-value { font-size: 34px; font-weight: 800; margin-top: 14px; position: relative; z-index: 1; letter-spacing: -0.01em; } .finance-card .finance-sub { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.85); position: relative; z-index: 1; } /* Dashboard "Sales by Staff (Confirmed By)" cards (super users only) - one card per Sales User, each with three clickable figures (Daily/Monthly/Previous Month) that deep-link into Online Orders scoped to that staff member + period (see js/dashboard.js's loadSalesByStaff and onlineOrders.js's confirmedBy/period URL handling). */ .staff-sales-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 0 0 6px; } .staff-sales-card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; } .staff-sales-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .staff-sales-identity { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Rank badge (staffRankBadgeHtml in js/dashboard.js) - top 3 get a medal emoji (larger, no pill background needed), the rest get a plain "#N" pill. */ .staff-rank-badge { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: #eef3fb; color: var(--text-muted); font-size: 12px; font-weight: 700; } .staff-rank-badge-top { background: transparent; font-size: 22px; padding: 0; } .staff-sales-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #22b6a3 0%, #1d4f91 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .staff-sales-name { font-weight: 700; font-size: 15px; color: var(--text-main); } .staff-sales-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .staff-sales-stat { display: block; text-decoration: none; background: var(--page-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 8px; text-align: center; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .staff-sales-stat:hover { background: #e2ecfb; border-color: var(--primary); transform: translateY(-2px); } .staff-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 4px; } .staff-stat-value { font-size: 16px; font-weight: 800; color: var(--primary); letter-spacing: -0.01em; } .staff-stat-count { font-size: 11px; color: var(--text-muted); margin-top: 2px; } @media (max-width: 420px) { .staff-sales-stats { grid-template-columns: 1fr; } } /* Per-staff monthly target progress block (staffTargetHtml in js/dashboard.js) - only rendered when that staff member has a target set in User Setup. Smaller-scale version of the site-wide .target-progress-track/.target-progress-fill pair, sized to fit inside a staff card. */ .staff-sales-target { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-border); } .staff-target-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); margin-bottom: 6px; } .staff-target-percent { font-size: 13px; color: var(--primary); } .staff-target-track { height: 8px; border-radius: 999px; background: #e7edf6; overflow: hidden; } .staff-target-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22b6a3 0%, #1d4f91 100%); transition: width 0.4s ease; } .staff-target-fill-over { background: linear-gradient(90deg, #f5934a 0%, #1e9a59 100%); } .staff-target-sub { margin-top: 6px; font-size: 11px; color: var(--text-muted); } /* Dashboard monthly sales target progress card (super users only) */ .target-card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 24px; margin: 6px 0 30px; } .target-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .target-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .target-label .finance-icon { font-size: 18px; background: rgba(29, 79, 145, 0.1); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .target-percent { font-size: 28px; font-weight: 800; color: var(--primary); } .target-progress-track { margin-top: 14px; height: 16px; border-radius: 999px; background: #e7edf6; overflow: hidden; } .target-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22b6a3 0%, #1d4f91 100%); transition: width 0.4s ease; } .target-progress-fill.target-over { background: linear-gradient(90deg, #f5934a 0%, #1e9a59 100%); } .target-details { margin-top: 10px; font-size: 13px; color: var(--text-muted); } /* Misc */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .error-text { color: var(--danger); font-size: 13px; margin-top: 8px; } .success-text { color: var(--success); font-size: 13px; margin-top: 8px; } /* Glass-thickness safety warning (Custom Aquarium > Dimensions step) needs to stand out more than a routine field-validation message - it's flagging a structural safety issue, not just a missing dropdown selection. */ #customDimsErrorMsg { font-size: 16px; font-weight: 700; line-height: 1.4; } .muted { color: var(--text-muted); font-size: 13px; } .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 30, 55, 0.45); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; z-index: 100; } .modal-panel { background: #fff; border-radius: 10px; padding: 24px; max-width: 720px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.25); } .hidden { display: none !important; } /* Online Order Lines - hides Unit Cost/Price/Discount/Gross/Net Amount columns for Online Order Staff accounts (js/onlineOrderLines.js toggles this on ), per "they dont need to see price". */ body.hide-price-columns .price-col { display: none !important; } .line-items-table input, .line-items-table select { padding: 6px 8px; font-size: 13px; } .line-items-table .line-qty { /* Sized for a 4-digit qty, not the auto-layout table's full column width. */ width: 60px; } /* Item/Variant lookup suggestion dropdowns (Transfer Orders' line items - js/transferOrders.js) */ .item-search-cell { position: relative; } .item-suggest-dropdown, .variant-suggest-dropdown, .serial-tag-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 220px; overflow-y: auto; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 6px; box-shadow: var(--shadow); margin-top: 2px; } .item-suggest-option { padding: 6px 10px; font-size: 13px; cursor: pointer; } .item-suggest-option:hover, .item-suggest-option.active { background: var(--page-bg); } .item-suggest-option .item-suggest-code { font-weight: 600; color: var(--text-main); } .item-suggest-option .item-suggest-name { color: var(--text-muted); margin-left: 6px; } .item-suggest-empty { padding: 8px 10px; font-size: 13px; } .item-suggest-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--panel-border); font-size: 12px; } /* Serial-tag picker (Manage modal's Ship flow, Production Category lines - js/transferOrders.js) - reuses .item-search-cell/.item-suggest-dropdown/.item-suggest-option's positioning/search-result styling above, adding just the chip list and the "N / required" count. */ .serial-tag-picker { position: relative; min-width: 180px; } .serial-tag-count { font-size: 11px; margin-bottom: 4px; } .serial-tag-count.satisfied { color: var(--success); } .serial-tag-count.unsatisfied { color: var(--danger); } .serial-tag-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .serial-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 999px; background: #eef3fb; color: var(--primary); font-size: 12px; } .serial-tag-chip-remove { cursor: pointer; font-weight: 700; line-height: 1; } .item-suggest-pager .btn { padding: 2px 8px; font-size: 12px; } .section-divider { border-top: 1px solid var(--panel-border); margin: 18px 0; } /* Online Order Lines - per-line attachments (js/onlineOrderLines.js) */ .attachment-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .attachment-chip { position: relative; display: inline-flex; align-items: center; } .attachment-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--panel-border); display: block; } .attachment-file-chip { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #eef3fb; color: var(--primary); font-size: 12px; text-decoration: none; } .attachment-remove-btn { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; line-height: 14px; padding: 0; border: none; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; cursor: pointer; } /* Online Order Lines - "Photos Sent With Status Updates" gallery (js/onlineOrderLines.js, supabase_online_order_status_photo.sql). Bigger than .attachment-thumb since these are the actual evidence photos, not incidental line-item reference chips. */ .status-photo-card { position: relative; width: 140px; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; background: var(--panel-bg); } .status-photo-thumb { width: 140px; height: 140px; object-fit: cover; display: block; } .status-photo-meta { padding: 6px 8px; font-size: 11px; line-height: 1.4; } .status-photo-remove-btn { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; line-height: 18px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; cursor: pointer; } /* Delivery page - month calendar + day-detail map */ .delivery-month-nav { display: flex; align-items: center; gap: 12px; } /* Wrapper the weekday header + calendar grid both sit in (see docs/delivery.html) - lets the 7-column grid keep a readable per-day width and scroll sideways on narrow screens instead of squishing every cell down to unreadable. */ .delivery-calendar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .delivery-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; } /* Delivery calendar on real phone widths - the desktop grid (above) relied on sideways scrolling at min-width:560px, which meant reading the month meant scrolling both the page AND the grid. Mobile calendar apps solve this by keeping 7 columns fluid to the screen width and swapping full event text for small dots (see .delivery-day-cell .badge below) - the day cell itself is still tappable for the full stop list via the existing day-detail panel, so no information is lost, just deferred one tap. */ @media (max-width: 640px) { .delivery-month-nav { flex-wrap: wrap; justify-content: center; } .delivery-month-nav h2 { min-width: 0 !important; width: 100%; order: -1; } #assignOrderBtn { display: block; width: 100%; padding: 12px 16px; } .delivery-calendar-grid { min-width: 0; gap: 3px; } .delivery-weekday-cell { font-size: 10px; padding: 2px 0; } /* Fixed-route labels ("Route Name - Warehouse X, Warehouse Y") never fit a ~45px-wide mobile column - the same info still surfaces per-day as a purple dot (below) and in full in the fixed-route row of the day-detail table (js/delivery.js's fixedRouteRowHtml). */ .delivery-weekday-route { display: none; } .delivery-day-cell { min-height: 46px; padding: 4px; border-radius: 6px; } .delivery-day-number { font-size: 12px; margin-bottom: 2px; } /* Text badges collapse to small colored dots - still distinguishable by color (neutral/purple/ glass) and tappable for the real detail, without needing to fit readable text into a cell a few dozen pixels wide. The stop-count badge (badge-primary) is the one number worth reading at a glance, so it keeps its text instead of becoming a blank dot. */ .delivery-day-cell .badge { width: 7px; height: 7px; min-width: 0; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; margin: 0 2px 2px 0; vertical-align: middle; } .delivery-day-cell .badge-primary { width: auto; height: auto; min-width: 0; padding: 1px 5px; border-radius: 999px; font-size: 9px; line-height: 1.4; } } .delivery-weekday-cell { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 4px 0; } .delivery-fixed-route-row { background: var(--panel-bg); font-style: italic; color: var(--text-muted); } .delivery-weekday-route { font-size: 11px; font-weight: 400; color: var(--primary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .delivery-day-cell { min-height: 84px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px; cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .delivery-day-cell:hover { box-shadow: var(--shadow); } .delivery-day-cell-empty { background: transparent; border: none; cursor: default; } .delivery-day-cell.has-stops { border-color: var(--primary); } .delivery-day-cell.today { outline: 2px solid var(--primary); outline-offset: -2px; } .delivery-day-cell.no-delivery { background: repeating-linear-gradient(45deg, var(--panel-bg), var(--panel-bg) 8px, var(--panel-border) 8px, var(--panel-border) 9px); opacity: 0.75; } .delivery-day-cell .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .delivery-day-cell.selected { background: var(--primary); border-color: var(--primary); } .delivery-day-cell.selected .delivery-day-number { color: #fff; } .delivery-day-number { font-weight: 600; margin-bottom: 6px; } #dayMap { height: 320px; margin-top: 16px; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; } #quoteMap { height: 320px; margin-top: 16px; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; } /* Driver Route View (Delivery Team only, docs/delivery.html's #driverRouteView) - single day's route map + stop cards, see js/delivery.js's renderDriverRouteView. */ #driverRouteMap { height: 280px; margin-top: 12px; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; } .driver-stop-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .driver-stop-card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--shadow); padding: 14px 16px; } .driver-stop-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } /* Per "make the whole button of order ID clickable" - previously just underlined text (a real