/* Intentionally NOT using `@view-transition { navigation: auto; }`. Chromium's default cross-document transition cross-fades snapshots of the old and new pages; because our pages differ in height/content, that blend showed as a flicker/jump on navigation (confirmed by isolating it). Plain instant navigation is correct for this server-rendered MPA. Do not re-add. `scrollbar-gutter: stable` on below is kept as a harmless safeguard. */ /* ---- Design tokens ---- Warm-neutral palette + teal accent, from the design handoff (~/Downloads/design_handoff_izy_redesign). Neutrals sit on a warm hue (~50-60 in OKLCH); the accent is teal oklch(0.5 0.09 190). Status colors follow the handoff's pill formula: bg oklch(0.94 0.045 h), fg oklch(0.4 0.13 h) with hues 80 (pending), 250 (info), 145 (success), 25 (danger). */ :root { --bg: oklch(0.975 0.003 60); --surface: #ffffff; --text: oklch(0.24 0.02 50); --text-muted: oklch(0.52 0.02 50); --border: oklch(0.9 0.01 55); --primary: oklch(0.5 0.09 190); --primary-dark: oklch(0.44 0.1 190); --primary-tint: color-mix(in oklch, oklch(0.5 0.09 190) 14%, white); --success: oklch(0.4 0.13 145); --success-tint: oklch(0.94 0.045 145); --warning: oklch(0.4 0.13 80); --warning-tint: oklch(0.94 0.045 80); --danger: oklch(0.5 0.16 25); --danger-text: oklch(0.4 0.13 25); /* darker: AA on tint backgrounds */ --danger-tint: oklch(0.94 0.045 25); --info: oklch(0.4 0.13 250); --info-tint: oklch(0.94 0.045 250); --radius-sm: 10px; --radius: 12px; --radius-lg: 14px; --shadow-card: 0 1px 2px rgba(20, 22, 31, 0.04), 0 4px 16px rgba(20, 22, 31, 0.05); --shadow-hover: 0 6px 20px rgba(20, 22, 31, 0.10), 0 2px 6px rgba(20, 22, 31, 0.06); --shadow-pop: 0 8px 30px rgba(20, 22, 31, 0.14); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 180ms; --sidebar-w: 240px; } * { box-sizing: border-box; } /* Always reserve scrollbar space so short pages (no scrollbar) and tall pages (Dashboard) don't shift content width on full-page navigations. */ html { -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; } body { margin: 0; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* Respect reduced-motion preference: kill transitions/animations, keep function */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Consistent, visible keyboard focus everywhere (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ---- Topbar ---- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.05rem; white-space: nowrap; border-radius: var(--radius-sm); transition: opacity var(--dur-fast) ease; } .brand:hover { opacity: 0.75; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--text); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; flex: 0 0 auto; } /* When the business has uploaded a logo, the mark holds the image instead of the letter fallback. */ .brand-mark.brand-logo { background: transparent; padding: 0; overflow: hidden; } .brand-mark.brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .topnav { display: flex; align-items: center; gap: 4px; background: var(--bg); padding: 4px; border-radius: 999px; } .topnav a { display: flex; align-items: center; gap: 6px; padding: 8px 16px; min-height: 40px; border-radius: 999px; text-decoration: none; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; transition: background var(--dur) ease, color var(--dur) ease, transform var(--dur-fast) ease; } .topnav a svg { width: 16px; height: 16px; } .topnav a.active { background: var(--primary); color: white; } .topnav a:not(.active):hover { background: var(--border); color: var(--text); } .topnav a:not(.active):active { transform: scale(0.96); } .topbar-right { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; text-decoration: none; flex: 0 0 auto; transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, transform var(--dur-fast) ease; } .icon-btn:hover { background: var(--bg); color: var(--text); border-color: var(--text-muted); } .icon-btn:active { transform: scale(0.94); } .icon-btn svg { width: 18px; height: 18px; } /* Profile dropdown */ .profile { position: relative; } .profile-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; border: none; background: none; padding: 2px; border-radius: 999px; font-family: inherit; transition: transform var(--dur-fast) ease; } .profile-trigger:hover { opacity: 0.85; } .profile-trigger:active { transform: scale(0.95); } .avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex: 0 0 auto; border: 2px solid transparent; transition: border-color var(--dur) ease; } .profile-trigger:hover .avatar { border-color: var(--primary-tint); } /* Shared "popover" look for profile menu + date filter panel, with an animated entrance instead of an instant display:none/block swap. */ .profile-menu, .date-filter-panel { position: absolute; right: 0; top: 52px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur); pointer-events: none; } .profile.open .profile-menu, .date-filter.open .date-filter-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); pointer-events: auto; } .profile-menu { min-width: 210px; padding: 8px; } .profile-menu .who { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .profile-menu .who .name { font-weight: 700; font-size: 0.92rem; } .profile-menu .who .role { color: var(--text-muted); font-size: 0.78rem; text-transform: capitalize; } .profile-menu a, .profile-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; min-height: 40px; border-radius: var(--radius-sm); border: none; background: none; font-size: 0.88rem; color: var(--text); cursor: pointer; font-family: inherit; text-decoration: none; transition: background var(--dur-fast) ease; } .profile-menu a:hover, .profile-menu button:hover { background: var(--bg); } .profile-menu button.danger-text { color: var(--danger); } .profile-menu svg { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; } /* ---- Layout ---- */ .container { max-width: 1080px; margin: 0 auto; padding: 28px 24px 60px; } .container.narrow { max-width: 640px; } /* Inside the sidebar shell, content fills the main area like the design (.iz-main is flex:1 with 40px side padding), capped at 1440px so it never over-stretches on very wide monitors. Auth/landing pages (no sidebar) keep the narrow, centered .container above. */ body:has(> .iz-sidebar) .container { max-width: 1440px; padding: 32px 40px 40px; } @media (max-width: 900px) { body:has(> .iz-sidebar) .container { padding: 20px 16px 24px; } } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-head h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; } .page-head .sub { color: var(--text-muted); font-size: 0.92rem; margin: 0; } .page-head-actions { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; } h2 { font-size: 1.05rem; margin: 0 0 14px; font-weight: 700; } /* ---- Cards ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; margin-bottom: 18px; transition: box-shadow var(--dur) ease; } /* ---- Stat cards ---- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-card); transition: box-shadow var(--dur) ease, transform var(--dur) ease; } .stat-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); } .stat-card.highlight { background: var(--primary); border-color: var(--primary); } .stat-card .label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .stat-card.highlight .label { color: rgba(255,255,255,0.85); } .stat-card .value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-card.highlight .value { color: white; } /* ---- Forms ---- */ label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin: 14px 0 6px; } label .hint { font-weight: 400; color: var(--text-muted); } input[type=text], input[type=tel], input[type=password], input[type=number], input[type=date], textarea, select { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 16px; /* keeps iOS Safari from auto-zooming on focus */ font-family: inherit; background: var(--surface); color: var(--text); min-height: 44px; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } textarea { resize: vertical; min-height: unset; } input:hover, textarea:hover, select:hover { border-color: oklch(0.75 0.02 60); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); } input:disabled:hover, textarea:disabled:hover, select:disabled:hover { border-color: transparent; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; min-height: 44px; border-radius: var(--radius-sm); border: none; background: var(--primary); color: white; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; transition: background var(--dur) ease, transform var(--dur-fast) ease, box-shadow var(--dur) ease; } .btn svg { width: 16px; height: 16px; flex: 0 0 auto; } .btn:hover { background: var(--primary-dark); box-shadow: 0 4px 12px oklch(0.5 0.09 190 / 0.25); } .btn:active { transform: scale(0.97); box-shadow: none; } .btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; } .btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn.secondary:hover { background: var(--bg); box-shadow: none; border-color: oklch(0.75 0.02 60); } .btn.danger { background: var(--danger); } .btn.danger:hover { background: var(--danger-text); box-shadow: 0 4px 12px oklch(0.5 0.16 25 / 0.25); } .btn.pill-toggle { min-height: 38px; padding: 8px 14px; font-size: 0.85rem; border-radius: 999px; } /* ---- Filter bar ---- */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .filter-bar .search-field { flex: 2; min-width: 220px; position: relative; } .filter-bar .search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; } .filter-bar .search-field input { padding-left: 36px; } .filter-bar select { width: auto; min-width: 150px; } .filter-bar > div:not(.search-field) { flex: 1; min-width: 130px; } /* Actions (Filter + optional Clear) hug their content so showing "Clear filters" doesn't steal width from the search box and dropdowns. */ .filter-bar .filter-actions { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 14px; } .clear-filters { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .clear-filters:hover { color: var(--primary); text-decoration: underline; } /* ---- Template preview + char count ---- */ .tmpl-preview-label { margin-top: 12px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .tmpl-preview { margin-top: 4px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); white-space: pre-wrap; font-size: 0.88rem; color: var(--text); min-height: 1.5em; } .tmpl-charcount { margin-top: 6px; font-size: 0.78rem; } .tmpl-charcount.over-limit { color: var(--danger-text); } /* darker: AA on white card */ /* ---- Landing page (bare root domain) ---- */ .landing { max-width: 960px; margin: 0 auto; padding: 0 20px 60px; } .landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; } .hero { text-align: center; padding: 56px 0 40px; } .hero h1 { font-size: 2.2rem; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; } .hero-sub { color: var(--text-muted); font-size: 1.05rem; max-width: 620px; margin: 0 auto 26px; line-height: 1.6; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0 40px; } .feature h3 { margin: 0 0 6px; font-size: 1rem; } .feature p { margin: 0; } .contact { max-width: 620px; margin: 0 auto; } .landing-foot { text-align: center; padding-top: 40px; } @media (max-width: 560px) { .hero h1 { font-size: 1.7rem; } .hero { padding: 32px 0 24px; } } /* ---- Toast (transient action feedback) ---- */ .toast-region { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: min(92vw, 400px); padding: 12px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); font-size: 0.9rem; font-weight: 500; pointer-events: auto; opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .toast.toast-show { opacity: 1; transform: none; } .toast.toast-hide { opacity: 0; transform: translateY(-8px) scale(0.98); } .toast-icon { display: inline-flex; flex: 0 0 auto; } .toast-icon svg { width: 20px; height: 20px; } .toast-msg { flex: 1 1 auto; } .toast-close { flex: 0 0 auto; border: none; background: none; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; } .toast-close:hover { color: var(--text); background: var(--bg); } .toast-success { border-left-color: var(--success); } .toast-success .toast-icon { color: var(--success); } .toast-error { border-left-color: var(--danger); } .toast-error .toast-icon { color: var(--danger); } .toast-info { border-left-color: var(--info); } .toast-info .toast-icon { color: var(--info); } @media (max-width: 480px) { .toast-region { top: 12px; right: 10px; left: 10px; } .toast { min-width: 0; max-width: 100%; } } /* ---- Back link (generic, e.g. order detail) ---- */ .btn-link-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--text-muted); font-size: 0.85rem; font-weight: 500; text-decoration: none; } .btn-link-back:hover { color: var(--primary); } /* ---- Table ---- */ .table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; min-width: 560px; } th, td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--border); font-size: 0.88rem; } th { color: var(--text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } tbody tr { transition: background var(--dur-fast) ease; } tbody tr:last-child td { border-bottom: none; } table.row-hover tbody tr { cursor: pointer; } table.row-hover tbody tr:hover { background: var(--bg); } table.row-hover tbody tr:focus-within { background: var(--bg); } .order-code { font-weight: 700; text-decoration: none; transition: color var(--dur-fast) ease; } a.order-code:hover, a.order-code:focus-visible { color: var(--primary); text-decoration: underline; } td .timestamp { color: var(--text-muted); font-size: 0.8rem; } tbody tr[data-href] { cursor: pointer; } /* Copy-to-clipboard button (e.g. next to phone numbers) */ .copyable { display: inline-flex; align-items: center; gap: 6px; } .copy-btn { border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; flex: 0 0 auto; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } .copy-btn:hover { background: var(--bg); color: var(--text); } .copy-btn.copied { color: var(--success); } .copy-btn svg { width: 15px; height: 15px; } /* On touch devices, give the copy button a 44px hit area (icon stays small). */ @media (pointer: coarse) { .copy-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } } /* Sortable table headers */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--text); } th.sortable::after { content: "\2195"; margin-left: 5px; opacity: 0.35; font-size: 0.85em; } th.sortable.sort-asc::after { content: "\2191"; opacity: 1; color: var(--primary); } th.sortable.sort-desc::after { content: "\2193"; opacity: 1; color: var(--primary); } /* Row status select in the dashboard table */ .row-status-select { min-height: 40px; padding: 6px 10px; border-color: var(--border); width: 200px; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; } .row-status-select:hover { border-color: oklch(0.75 0.02 60); } /* Status text (color + label, not color-only: label always shown) */ .status-text { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .status-text.received, .status-text.out_for_delivery { color: var(--info); } .status-text.ready_pickup, .status-text.ready_delivery { color: var(--warning); } .status-text.delivered, .status-text.picked_up { color: var(--success); } .status-text.cancelled { color: var(--danger-text); } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; /* multi-word statuses stay on one line, never wrap */ } .badge.received, .badge.out_for_delivery { background: var(--info-tint); color: var(--info); } .badge.ready_pickup, .badge.ready_delivery { background: var(--warning-tint); color: var(--warning); } .badge.delivered, .badge.picked_up { background: var(--success-tint); color: var(--success); } .badge.cancelled { background: var(--danger-tint); color: var(--danger-text); } /* ---- Misc ---- */ .row { display: flex; gap: 12px; flex-wrap: wrap; } .row > * { flex: 1; min-width: 180px; } .error { background: var(--danger-tint); color: var(--danger); border: 1px solid oklch(0.85 0.06 25); padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.88rem; font-weight: 500; } .item-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; } .item-row input { min-width: 0; } /* let inputs shrink so the row never overflows on mobile */ .item-row input[type=text] { flex: 3 1 130px; } .item-row input.item-qty { flex: 0 0 auto; width: 68px; max-width: 68px; } .item-row input.item-cost { flex: 0 0 auto; width: 104px; max-width: 104px; } /* Live per-row total; takes the remaining space and right-aligns before the x */ .item-row .line-total { flex: 1 1 auto; text-align: right; white-space: nowrap; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* Keep the remove (x) button a fixed square even under the mobile .btn{width:100%} rule */ .item-row button { flex: 0 0 auto; width: 44px; padding-left: 0; padding-right: 0; } /* Grand total under the item list */ .grand-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-weight: 700; } .grand-total-value { font-size: 1.15rem; font-variant-numeric: tabular-nums; } /* Money column in the orders table */ .amount-col { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Standalone hint text (also used inside labels via `label .hint`) */ .hint { color: var(--text-muted); font-size: 0.85rem; } /* Small status badge, e.g. "Setup pending" on the staff list */ .pill-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; line-height: 1.4; border-radius: 999px; background: var(--warning-tint); color: var(--warning); border: 1px solid oklch(0.87 0.06 80); vertical-align: middle; white-space: nowrap; } /* Row actions (⋮) menu on the orders table */ .actions-col { width: 44px; text-align: center; } .kebab-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: none; border-radius: 8px; color: var(--text-muted); cursor: pointer; } .kebab-btn svg { width: 18px; height: 18px; } .kebab-btn:hover { background: var(--border); color: var(--text); } .row-menu { position: fixed; z-index: 60; min-width: 160px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; } .row-menu[hidden] { display: none; } .row-menu a, .row-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; border-radius: 8px; font: inherit; color: var(--text); text-decoration: none; cursor: pointer; } .row-menu a:hover, .row-menu button:hover { background: var(--border); } .row-menu button.danger { color: var(--danger); } .row-menu button.danger:hover { background: var(--danger-tint); } .muted { color: var(--text-muted); font-size: 0.88rem; } .empty-state { text-align: center; padding: 56px 20px; color: var(--text-muted); } /* Icon sits in a soft circular badge so it reads clearly on the white card (was var(--border) — nearly invisible). box-sizing keeps the 64px total. */ .empty-state svg { width: 64px; height: 64px; padding: 18px; margin: 0 auto 16px; background: var(--bg); color: var(--text-muted); border-radius: 999px; box-sizing: border-box; } .empty-state p { margin: 0; font-size: 0.95rem; line-height: 1.6; } .empty-state a { color: var(--primary); font-weight: 600; text-decoration: none; } .empty-state a:hover { text-decoration: underline; } /* Login/OTP screens: vertically centre the card instead of pinning it near the top with a big empty gap below. */ .container.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 24px; padding-bottom: 40px; } .login-wrap { width: 100%; max-width: 380px; margin: 0; } .login-wrap .brand { justify-content: center; margin-bottom: 22px; font-size: 1.2rem; } .login-wrap .brand .brand-mark { width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; } .checkbox-row { display: flex; align-items: center; gap: 9px; margin-top: 12px; } .checkbox-row input { width: 18px; height: 18px; min-height: unset; accent-color: var(--primary); cursor: pointer; } .checkbox-row label { cursor: pointer; } .status-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .msg-log { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; } .msg-log .entry { padding: 10px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--border); background: var(--bg); font-size: 0.85rem; } .msg-log .entry.sent { border-color: var(--success); } .msg-log .entry.failed { border-color: var(--danger); } .msg-log .entry .meta { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-weight: 600; } .chip-group { display: flex; gap: 8px; flex-wrap: wrap; } .divider { height: 1px; background: var(--border); margin: 18px 0; border: none; } /* ---- Confirmation modal ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 17, 26, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; opacity: 0; visibility: hidden; transition: opacity var(--dur) ease, visibility 0s linear var(--dur); } .modal-overlay.show { opacity: 1; visibility: visible; transition: opacity var(--dur) ease; } .modal-box { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 22px; max-width: 380px; width: 100%; transform: translateY(10px) scale(0.97); transition: transform var(--dur) var(--ease-out); } .modal-overlay.show .modal-box { transform: translateY(0) scale(1); } .modal-box .modal-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; } .modal-box .modal-message { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 20px; line-height: 1.5; white-space: pre-line; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } /* ---- Editable field affordance ---- */ input.editable-field:disabled, textarea.editable-field:disabled, select.editable-field:disabled { background: var(--bg); color: var(--text); border-color: transparent; cursor: default; } .edit-actions { display: none; gap: 10px; margin-top: 16px; margin-bottom: 24px; flex-wrap: wrap; } .edit-actions.visible { display: flex; } /* ---- Date filter row ---- */ .date-range { display: flex; align-items: center; gap: 8px; } .date-range input[type=date] { min-width: 140px; } /* ---- Date filter popover (single calendar-icon trigger) ---- */ .date-filter { position: relative; display: inline-block; } .date-filter-panel { padding: 16px; width: 240px; max-width: calc(100vw - 32px); } .date-filter-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } /* ---- Breakpoints ---- */ @media (max-width: 900px) { .container { max-width: 100%; } } @media (max-width: 720px) { .topbar { padding: 10px 14px; gap: 10px; } .brand span:last-child { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topnav a span { display: none; } .topnav a { padding: 10px; } .container { padding: 18px 14px 60px; } .filter-bar select { min-width: 110px; } .page-head { gap: 12px; } .page-head h1 { font-size: 1.3rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .date-filter-panel, .profile-menu { right: -8px; } } @media (max-width: 480px) { .container { padding: 14px 10px 50px; } .card { padding: 16px; border-radius: var(--radius); } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { padding: 14px 16px; } .stat-card .value { font-size: 1.4rem; } .btn { width: 100%; } .page-head-actions { width: 100%; } .page-head-actions .btn, .page-head-actions .date-filter { flex: 1; } .date-filter .btn { width: 100%; } /* Dashboard: keep the period toggle and date filter side by side on one row (there's room), with the date filter taking the leftover space. */ .page-head-actions:has(.period-toggle) { flex-wrap: nowrap; align-items: stretch; gap: 8px; } /* Period toggle is the larger element (grows, equal-width pills); the date button stays content-width ("All dates" never breaks) and just small. */ .page-head-actions:has(.period-toggle) .period-toggle { flex: 1 1 auto; gap: 4px; padding: 3px; } .page-head-actions:has(.period-toggle) .period-toggle a { flex: 1 1 0; padding: 0 6px; justify-content: center; } .page-head-actions:has(.period-toggle) .date-filter { flex: 0 0 auto; min-width: 0; max-width: 46%; } .page-head-actions:has(.period-toggle) .date-filter .btn { width: 100%; padding: 0 12px; gap: 6px; } .page-head-actions:has(.period-toggle) .date-filter .btn { min-width: 0; } .page-head-actions:has(.period-toggle) #dateFilterLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Orders header: date filter + Export share one row, New Order spans the next as the full-width primary action — uniform heights, no text wrap. */ .orders-head-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .orders-head-actions .btn, .orders-head-actions .date-filter .btn { width: 100%; } .orders-head-actions > .btn:not(.secondary) { grid-column: 1 / -1; } .orders-head-actions:not(:has(.btn.secondary)) .date-filter { grid-column: 1 / -1; } .status-form { flex-direction: column; } .status-form form { width: 100%; } .status-form .btn { width: 100%; } .modal-actions .btn { flex: 1; } .hide-on-phone { display: none !important; } } /* ---- App shell: fixed left sidebar (desktop) / bottom tab bar (mobile) ---- From the design handoff. Pages opt in simply by including partials/nav; body:has() keys the content offset so login/landing pages (no sidebar) are untouched. */ body:has(> .iz-sidebar) { padding-left: var(--sidebar-w); } .iz-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 120; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .iz-sidebar .brand { padding: 22px 20px 18px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; } .iz-sidebar .brand-mark { border-radius: 9px; font-weight: 800; } .iz-nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .iz-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 40px; border-radius: 10px; font-size: 0.875rem; font-weight: 500; color: var(--text); text-decoration: none; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } .iz-nav a svg { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; transition: color var(--dur-fast) ease; } .iz-nav a:hover { background: oklch(0.955 0.008 60); } .iz-nav a.active { background: var(--primary-tint); color: var(--primary); font-weight: 700; } .iz-nav a.active svg { color: var(--primary); } .iz-side-foot { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } .iz-side-user { display: flex; align-items: center; gap: 10px; min-width: 0; } .iz-side-user .avatar { width: 32px; height: 32px; font-size: 0.8rem; color: var(--primary); } .iz-side-user .who { min-width: 0; } .iz-side-user .name { font-size: 0.82rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iz-side-user .role { font-size: 0.75rem; color: var(--text-muted); text-transform: capitalize; } .iz-logout-btn { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; } .iz-logout-btn:hover { background: var(--bg); border-color: oklch(0.75 0.02 60); } .iz-logout-btn svg { width: 15px; height: 15px; color: var(--text-muted); flex: 0 0 auto; } .iz-bottombar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; z-index: 120; } .iz-bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 4px 6px; text-decoration: none; color: var(--text-muted); font-size: 0.7rem; font-weight: 600; } .iz-bottombar a svg { width: 17px; height: 17px; } .iz-bottombar a.active { color: var(--primary); font-weight: 700; } @media (max-width: 900px) { body:has(> .iz-sidebar) { padding-left: 0; padding-bottom: 84px; } .iz-sidebar { display: none; } .iz-bottombar { display: flex; } } /* "More" button in the bottom bar (opens the sheet with owner links + logout) */ .iz-bottombar-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 4px 6px; border: none; background: none; color: var(--text-muted); font-size: 0.7rem; font-weight: 600; font-family: inherit; cursor: pointer; } .iz-bottombar-more svg { width: 17px; height: 17px; } .iz-bottombar-more.active { color: var(--primary); font-weight: 700; } /* The sheet itself: anchored above the bottom bar */ .iz-more-sheet { position: fixed; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 130; min-width: 220px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; } .iz-more-sheet[hidden] { display: none; } .iz-more-sheet a, .iz-more-sheet button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; min-height: 44px; border-radius: var(--radius-sm); border: none; background: none; font-size: 0.88rem; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; text-decoration: none; } .iz-more-sheet a:hover, .iz-more-sheet button:hover { background: var(--bg); } .iz-more-sheet a.active { color: var(--primary); background: var(--primary-tint); } .iz-more-sheet svg { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; } .iz-more-sheet button.danger-text { color: var(--danger); } .iz-more-sheet button.danger-text svg { color: var(--danger); } /* ---- List pages (design refresh): search bar, table card, mobile cards ---- Desktop shows .iz-table-wrap; at <=900px the table hides and the stacked .iz-cards list takes over (straight from the design handoff). */ .iz-searchbar { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 20px; flex-wrap: wrap; } .iz-searchbar .search-field { flex: 2; min-width: 200px; position: relative; } .iz-searchbar .search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; } .iz-searchbar .search-field input { padding-left: 36px; } .iz-searchbar input, .iz-searchbar select { background: var(--bg); } /* Compact, content-width selects (like the date button); the search field (flex:2) soaks up the freed space instead of the dropdowns growing wide. */ .iz-searchbar select { width: auto; min-width: 0; flex: 0 0 auto; } /* On phones the search field takes its own full-width row, and the dropdowns share the next row edge-to-edge (no gap on the right). */ @media (max-width: 600px) { .iz-searchbar .search-field { flex: 1 0 100%; } /* shrink:0 forces its own row */ .iz-searchbar select { flex: 1 1 0; width: 100%; } } .iz-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; } .iz-table-wrap table { min-width: 640px; } .iz-table-wrap th { padding: 14px 20px; font-size: 0.69rem; letter-spacing: 0.06em; } .iz-table-wrap td { padding: 15px 20px; } .iz-table-wrap tbody tr:hover { background: oklch(0.975 0.006 60); } .iz-cards { display: none; flex-direction: column; gap: 12px; } .iz-row-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .iz-row-card:hover { border-color: oklch(0.75 0.02 60); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } /* Keyboard focus on the card's inner link lifts the whole card, matching hover */ .iz-row-card:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); } .iz-row-card .card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .iz-row-card .card-top > .badge { flex: 0 0 auto; } /* badge keeps its size; title column shrinks */ .iz-row-card .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); } .avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex: 0 0 auto; } /* Count + pagination footer under a list */ .iz-list-foot { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-muted); } @media (max-width: 900px) { .iz-table-wrap { display: none; } .iz-cards { display: flex; } } /* Distinct pill for status-change log entries (design uses a purple hue) */ .badge.log-status { background: oklch(0.94 0.045 300); color: oklch(0.4 0.13 300); } /* ---- Templates page (design refresh) ---- */ .iz-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 900px) { .iz-tpl-grid { grid-template-columns: 1fr; } } .ph-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--primary-tint); color: var(--primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .ph-chip-hint { font-family: inherit; font-weight: 500; color: var(--primary); opacity: 0.8; } .tpl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .tpl-card-actions { display: flex; gap: 8px; align-items: center; } .tpl-edit-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; } .tpl-edit-btn:hover { background: var(--bg); border-color: oklch(0.75 0.02 60); } .tpl-edit-btn svg { width: 15px; height: 15px; } .tpl-save-btn { min-height: 34px; padding: 6px 14px; font-size: 0.78rem; border-radius: 8px; } /* Touch: meet the 44px minimum tap target without enlarging the desktop look. */ @media (pointer: coarse) { .tpl-edit-btn { width: 44px; height: 44px; } .tpl-save-btn { min-height: 44px; } } /* A locked template reads as editable if it keeps the resize grip; hide it until the pencil unlocks the field (base textarea re-enables resize). */ .tpl-card textarea[readonly] { background: var(--bg); color: var(--text); cursor: default; resize: none; } .tpl-card .tmpl-charcount { text-align: right; margin-top: 6px; } .tmpl-preview { border-left: 3px solid var(--primary); border-radius: 6px; } /* .btn's display:inline-flex would defeat the hidden attribute */ .btn[hidden] { display: none; } /* ---- Settings page (design refresh) ---- */ .logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .logo-tile { width: 88px; height: 88px; flex: 0 0 auto; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg); color: var(--text-muted); font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease; } .logo-tile:hover, .logo-tile.drag { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); } .logo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } } .readonly-field { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; align-items: center; font-size: 0.9rem; color: var(--text-muted); background: var(--bg); } .staff-field { min-height: 38px; padding: 6px 10px; width: 150px; font-size: 0.88rem; } .staff-field[readonly] { background: var(--bg); border-color: transparent; cursor: default; } .staff-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .add-staff { padding-top: 18px; border-top: 1px solid var(--border); margin-top: 6px; } .add-staff-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: center; } .add-staff-row input { min-height: 42px; background: var(--bg); } .add-staff-row .btn { min-height: 42px; white-space: nowrap; } @media (max-width: 720px) { .add-staff-row { grid-template-columns: 1fr; } } /* On phones the staff table's right-hand columns (incl. Edit/Remove) scroll off-screen and become unreachable. Below 640px, unstack each row into a labelled card so every field and action is visible — no markup duplication, so the existing per-row edit JS keeps working. */ @media (max-width: 640px) { .staff-scroll { overflow: visible; margin: 0; padding: 0; } .staff-table { min-width: 0; } .staff-table thead { display: none; } .staff-table tbody, .staff-table tr, .staff-table td { display: block; width: 100%; } .staff-table tr { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px; } .staff-table td { padding: 6px 0; border: none; } .staff-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; } .staff-table td.name-cell { font-size: 1rem; font-weight: 700; padding: 0 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } /* Role and Added share one row (Role left, Added right) — there's room. */ .staff-table td[data-label="Role"] { float: left; width: 50%; } .staff-table td[data-label="Added"] { float: right; width: 50%; text-align: right; } .staff-table td.actions-cell { padding-top: 12px; clear: both; } .staff-table td .staff-field { width: 100%; max-width: 280px; } } /* ---- Dashboard (design refresh) ---- */ .period-toggle { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; } .period-toggle a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } .period-toggle a:hover { color: var(--text); } .period-toggle a.active { background: var(--primary); color: #fff; } .iz-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 900px) { .iz-kpi-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .iz-kpi-grid { gap: 10px; } } .kpi-card { background: oklch(0.95 0.045 var(--kpi-hue)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; } .kpi-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.45 0.11 var(--kpi-hue)); } .kpi-value { font-size: 1.7rem; font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; } /* Caption sits on a colored tint, so it needs to be darker than the global --text-muted to clear 4.5:1 at this small size. */ .kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.75rem; color: oklch(0.42 0.02 50); } .kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 700; } .kpi-trend.up { color: oklch(0.43 0.15 145); } .kpi-trend.down { color: oklch(0.45 0.18 25); } /* Long GHS values shouldn't overflow the narrower 2-col cards on phones. */ @media (max-width: 480px) { .kpi-value { font-size: 1.4rem; } .kpi-card { padding: 16px 16px; } } /* Side-by-side on wide screens; stacked below. */ .iz-chart-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 1024px) { .iz-chart-grid { grid-template-columns: 1fr 1fr; } } .chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .chart-title { font-size: 0.94rem; font-weight: 800; } .chart-sub { margin: 0 0 8px; font-size: 0.75rem; } /* pan-y keeps vertical page scroll working while horizontal drags scrub. */ .chart-box { position: relative; height: 220px; touch-action: pan-y; } .chart-ytick { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--text-muted); pointer-events: none; } .chart-xtick { position: absolute; bottom: -2px; transform: translateX(-50%); font-size: 11px; color: var(--text-muted); pointer-events: none; white-space: nowrap; } /* Crosshair + value dot are HTML overlays so they stay crisp/round no matter how the SVG is stretched to fill the container width. */ .chart-cross { position: absolute; top: 12px; bottom: 26px; width: 0; border-left: 1px dashed currentColor; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease; } .chart-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease; } .chart-last { position: absolute; transform: translate(-50%, -140%); font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; transition: opacity var(--dur-fast) ease; } .chart-tip { position: absolute; top: 0; transform: translate(-50%, -100%); margin-top: -6px; color: #fff; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) ease; z-index: 5; } /* Chart cards must be allowed to shrink below their content's min-content, otherwise opening the data table (a wide element) forces the grid item — and the chart SVG inside it — to blow past the viewport width. */ .iz-chart-grid > .chart-card { min-width: 0; } /* Accessible data-table fallback for each chart (keyboard + screen reader). */ .chart-data { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; } .chart-data summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); list-style-position: inside; } .chart-data summary:hover { color: var(--text); } .chart-data[open] summary { margin-bottom: 8px; } .chart-data .table-scroll { max-height: 220px; overflow: auto; } /* Override the global table min-width (560px, meant for the wide orders/logs tables) so this 2-column table fits the card instead of scrolling sideways and hiding the value column. table-layout:fixed keeps the columns bound to the container width. */ .chart-data table { width: 100%; min-width: 0; table-layout: fixed; } .chart-data th, .chart-data td { padding: 7px 8px; font-size: 0.82rem; } /* Keep KPI trend + date-filter trigger on one line on narrow screens */ .kpi-trend { white-space: nowrap; } .kpi-foot { flex-wrap: wrap; row-gap: 2px; } .date-filter .btn { white-space: nowrap; } /* ---- Orders (design refresh) ---- */ .iz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 900px) { .iz-stats { grid-template-columns: 1fr 1fr; } } .iz-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; } .iz-stat .label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .iz-stat .value { font-size: 1.8rem; font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; } .iz-stat.highlight { background: var(--primary); border-color: var(--primary); } .iz-stat.highlight .label { color: rgba(255, 255, 255, 0.75); } .iz-stat.highlight .value { color: #fff; } /* Status select disguised as the design's status pill (keeps the inline quick status change from the old table) */ .badge-select { appearance: none; -webkit-appearance: none; border: none; border-radius: 999px; padding: 5px 26px 5px 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-family: inherit; cursor: pointer; min-height: 28px; width: auto; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23555'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .badge-select.received, .badge-select.out_for_delivery { background-color: var(--info-tint); color: var(--info); } .badge-select.ready_pickup, .badge-select.ready_delivery { background-color: var(--warning-tint); color: var(--warning); } .badge-select.delivered, .badge-select.picked_up { background-color: var(--success-tint); color: var(--success); } .badge-select.cancelled { background-color: var(--danger-tint); color: var(--danger-text); } /* ---- Order detail (design refresh) ---- */ .order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .order-head .amount { font-size: 1.6rem; font-weight: 800; white-space: nowrap; } .order-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .btn.danger-soft { background: oklch(0.97 0.02 25); border: 1px solid oklch(0.85 0.05 25); color: var(--danger); } .btn.danger-soft:hover { background: var(--danger-tint); box-shadow: none; } /* On phones, keep the amount on its own line and put Edit + Delete side by side instead of stacking them full-width. */ @media (max-width: 480px) { .order-head-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .order-head-actions .amount { grid-column: 1 / -1; } .order-head-actions .btn { width: 100%; margin: 0; } } /* Status option buttons (one per status in the order's flow) */ .status-options { display: flex; gap: 8px; flex-wrap: wrap; } .status-options button { min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-family: inherit; cursor: pointer; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; } .status-options button:hover { border-color: oklch(0.75 0.02 60); color: var(--text); } .status-options button.current { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); cursor: default; } /* On phones the status buttons collapse into one dropdown (cleaner). */ .status-select-mobile { display: none; } @media (max-width: 600px) { .status-options { display: none; } .status-select-mobile { display: block; width: 100%; } } .iz-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .iz-detail-grid { grid-template-columns: 1fr; } } .detail-item-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); gap: 12px; } .detail-kv .k { font-size: 0.75rem; color: var(--text-muted); } .detail-kv .v { font-size: 0.88rem; font-weight: 600; } .detail-kv > div + div { margin-top: 10px; } /* ---- Order form modal (New Order / Edit Order) ---- */ .iz-modal-overlay { position: fixed; inset: 0; background: rgba(20, 16, 12, 0.45); z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .iz-modal-overlay[hidden] { display: none; } .iz-modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 620px; overflow: hidden; box-shadow: var(--shadow-pop); } .iz-modal-head { padding: 22px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .iz-modal-head h2 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; } .iz-modal-head p { margin: 0; font-size: 0.82rem; color: var(--text-muted); } .iz-modal-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 1rem; cursor: pointer; flex: 0 0 auto; } .iz-modal-close:hover { background: var(--bg); color: var(--text); } @media (pointer: coarse) { .iz-modal-close { width: 44px; height: 44px; } } .iz-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; max-height: 62vh; overflow-y: auto; } .iz-modal-body label { margin: 0 0 6px; font-size: 0.82rem; } .iz-modal-body input, .iz-modal-body textarea { background: var(--bg); } .iz-modal-foot { padding: 18px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } .iz-modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .iz-modal .row2 { grid-template-columns: 1fr; } } .fulfillment-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fulfillment-toggle button { min-height: 46px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; } .fulfillment-toggle button.active { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); font-weight: 700; } .iz-modal .item-grid { display: grid; grid-template-columns: 1fr 56px 90px minmax(72px, auto) 32px; gap: 8px; align-items: center; } @media (max-width: 560px) { .iz-modal .item-grid { grid-template-columns: 1fr 48px 76px minmax(60px, auto) 32px; } } /* On phones, one row can't hold name + qty + cost + total + remove without crushing the item name (~60px). Give the name its own full-width line and put qty / cost / total / remove on a second row. */ @media (max-width: 480px) { .iz-modal .item-grid { grid-template-columns: 60px 1fr auto 40px; grid-template-areas: "name name name name" "qty cost total remove"; /* Card each item so multiple items in an order read as separate rows. */ padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .iz-modal .item-grid input { background: var(--surface); } /* stand out on the card */ .iz-modal .item-grid > input[name="item_name"] { grid-area: name; } .iz-modal .item-grid > input[name="item_qty"] { grid-area: qty; } .iz-modal .item-grid > input[name="item_cost"] { grid-area: cost; } .iz-modal .item-grid > .line-total { grid-area: total; align-self: center; } .iz-modal .item-grid > .item-remove { grid-area: remove; width: 40px; } } .iz-modal .item-grid input { min-height: 44px; padding: 8px 10px; } .iz-modal .item-grid .line-total { font-size: 0.82rem; font-weight: 700; text-align: right; white-space: nowrap; } .item-remove { width: 32px; height: 32px; border-radius: 8px; border: 1px solid oklch(0.85 0.05 25); background: oklch(0.96 0.03 25); color: var(--danger); font-size: 0.94rem; cursor: pointer; justify-self: end; } .item-remove:disabled { opacity: 0.4; cursor: not-allowed; } .iz-modal .grand-row { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); font-weight: 800; } .iz-modal .grand-row .total { font-size: 1.1rem; } .iz-modal .notify-block { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); } /* ============================================================ Premium interactions (design refresh) Consistent hover elevation, tactile press feedback, and modal entrance. Transform/opacity only (compositor-friendly); every rule here is auto-disabled by the prefers-reduced-motion block near the top of this file. Note: desktop TABLE rows are left on a background-hover only — a transform on them would become the containing block for the position:fixed row actions menu and break its placement (and the skill advises no motion on data tables anyway). */ /* Clickable list cards (mobile orders/contacts/logs): lift on hover, press in on tap. */ .iz-row-card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .iz-row-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: oklch(0.8 0.02 60); } .iz-row-card:active { transform: translateY(0) scale(0.995); box-shadow: var(--shadow-card); } /* Informational tiles: a subtle bloom so they feel alive, without a pointer cursor that would imply they're clickable. */ .kpi-card, .iz-stat { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .kpi-card:hover, .iz-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); } /* Content surfaces: soft shadow deepen, no movement. */ .card:hover { box-shadow: var(--shadow-hover); } /* Icon / pill controls: tactile press (buttons already press via .btn:active). */ .icon-btn:active, .kebab-btn:active, .copy-btn:active, .tpl-edit-btn:active, .logo-tile:active, .period-toggle a:active, .fulfillment-toggle button:active, .status-options button:active, .badge-select:active, .item-remove:active, .iz-bottombar a:active, .iz-bottombar-more:active, .iz-nav a:active, .iz-more-sheet a:active, .iz-more-sheet button:active { transform: scale(0.94); } /* New/Edit Order modal entrance (the confirm modal already animates). */ @keyframes iz-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes iz-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } .iz-modal-overlay:not([hidden]) { animation: iz-overlay-in var(--dur) var(--ease-out); } .iz-modal-overlay:not([hidden]) .iz-modal { animation: iz-modal-in var(--dur) var(--ease-out); } /* Impersonation banner — shown only while a platform admin is viewing a store as its owner. Sticky so it stays visible; amber to signal an unusual mode. */ .iz-impersonate-bar { position: sticky; top: 0; z-index: 110; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--warning-tint); border-bottom: 1px solid var(--warning); color: var(--warning); } .iz-impersonate-msg { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; } .iz-impersonate-msg svg { width: 20px; height: 20px; flex: none; } .iz-impersonate-msg strong { color: var(--warning); } .iz-impersonate-exit { margin: 0; } .iz-impersonate-exit .btn { padding: 6px 14px; } /* Admin section tabs (Overview / Businesses) in the platform-admin top bar. */ .admin-tabs { display: flex; gap: 4px; margin-right: auto; margin-left: 8px; } .admin-tabs a { padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none; color: var(--muted-text, #666); font-weight: 600; font-size: 0.92rem; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } .admin-tabs a:hover { background: var(--hover, oklch(0.96 0.01 55)); color: var(--text); } .admin-tabs a.active { background: var(--text); color: var(--surface); } @media (max-width: 560px) { .admin-tabs { margin-left: 0; } .admin-tabs a { padding: 7px 11px; font-size: 0.86rem; } } /* --- Admin Leads tab --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lead-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .lead-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted-text, #666); text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .lead-chip:hover { border-color: var(--text); color: var(--text); } .lead-chip.active { background: var(--text); color: var(--surface); border-color: var(--text); } .lead-chip-n { font-variant-numeric: tabular-nums; opacity: 0.8; } .lead-chip.active .lead-chip-n { opacity: 1; } .lead-card { margin-bottom: 14px; } .lead-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lead-name { font-weight: 700; font-size: 1.02rem; } .lead-meta { font-size: 0.86rem; margin-top: 3px; } .lead-status { display: flex; align-items: center; gap: 10px; flex: none; } .lead-status-form { margin: 0; } .lead-status-select { padding: 6px 30px 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.86rem; cursor: pointer; } .lead-message { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--hover, oklch(0.96 0.01 55)); color: var(--text); font-size: 0.92rem; white-space: pre-wrap; } .lead-notes { margin-top: 12px; } .lead-notes summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; } .lead-notes textarea { margin-top: 10px; } .lead-actions { margin-top: 14px; } /* Settings: per-delivery-type order-status toggles */ .status-toggle-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .status-toggle { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; font-size: 0.9rem; user-select: none; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease; } .status-toggle:hover { border-color: var(--text); } .status-toggle input { width: 17px; height: 17px; margin: 0; flex: none; cursor: pointer; accent-color: var(--primary); } .status-toggle:has(input:not(:checked)) { opacity: 0.62; } .status-toggle:has(input:not(:checked)) span { text-decoration: line-through; } .status-toggle.locked { cursor: default; } .status-toggle.locked input { cursor: not-allowed; } /* Shipments: upload hint box */ .upload-hint { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--hover, oklch(0.96 0.01 55)); color: var(--muted-text, #555); font-size: 0.82rem; line-height: 1.5; } .upload-hint code { font-size: 0.8rem; } /* Clickable table rows (shipment customers) */ tr.clickable-row { cursor: pointer; transition: background var(--dur-fast) ease; } tr.clickable-row:hover { background: var(--hover, oklch(0.96 0.01 55)); } /* Inline checkbox + label (shipments notify-now) */ .iz-checkline { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 0.9rem; user-select: none; } .iz-checkline input { width: 17px; height: 17px; margin: 0; flex: none; cursor: pointer; accent-color: var(--primary); }