/* ========================================================================= StoqS — global stylesheet RTL-native, no build step. Pure CSS custom properties. Design system: cream-paper editorial, Slate primary + Coral accent, with per-panel role colors switched via [data-panel] on . Plug --brand-color from PHP (:root inline) to retint per tenant. ========================================================================= */ /* Self-hosted fonts — no third-party request, faster + privacy-friendly. Falls back to Tahoma/Georgia if a file is ever missing. v3.12: platform-wide Persian font switched to Doran (uploaded). Six weights cover the full UI; semibold (600) is mapped to Bold for a clean look. */ @font-face { font-family:'Doran'; src:url('../fonts/Doran/Doran-Thin.woff2') format('woff2'); font-weight:100; font-display:swap; } @font-face { font-family:'Doran'; src:url('../fonts/Doran/Doran-Light.woff2') format('woff2'); font-weight:300; font-display:swap; } @font-face { font-family:'Doran'; src:url('../fonts/Doran/Doran-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Doran'; src:url('../fonts/Doran/Doran-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Doran'; src:url('../fonts/Doran/Doran-Bold.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Doran'; src:url('../fonts/Doran/Doran-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'Doran'; src:url('../fonts/Doran/Doran-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; } /* Vazirmatn kept as a guaranteed fallback for any glyph Doran doesn't cover. */ @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn/Vazirmatn-ExtraBold.woff2')format('woff2'); font-weight:800; font-display:swap; } @font-face { font-family:'Instrument Serif'; src:url('../fonts/InstrumentSerif/InstrumentSerif-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Instrument Serif'; src:url('../fonts/InstrumentSerif/InstrumentSerif-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } /* SF Pro Display — the font for all non-Persian (Latin) text. It has no Persian glyphs, so Persian falls back to Doran automatically (per-glyph) when SF Pro is listed first. Three upright weights cover the UI; 600/700 map to Bold. */ @font-face { font-family:'SF Pro Display'; src:url('../fonts/SFProDisplay/SFProDisplay-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'SF Pro Display'; src:url('../fonts/SFProDisplay/SFProDisplay-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'SF Pro Display'; src:url('../fonts/SFProDisplay/SFProDisplay-Bold.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'SF Pro Display'; src:url('../fonts/SFProDisplay/SFProDisplay-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } /* IRANSansX — full Persian + Latin + Persian digits, all weights (Thin→Black). */ @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-Thin.woff2') format('woff2'); font-weight:100; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-UltraLight.woff2') format('woff2'); font-weight:200; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-Light.woff2') format('woff2'); font-weight:300; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-DemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; } @font-face { font-family:'IRANSansX'; src:url('../fonts/IRANSansX/IRANSansX-Black.woff2') format('woff2'); font-weight:900; font-display:swap; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* The off-canvas sidebar (position:fixed; translateX(100%)) parks 240px past the right edge; without clamping the root this widens the layout viewport on mobile and clips RTL content + fixed elements on the right. `clip` clamps it without forcing a scroll container (so position:sticky keeps working); `hidden` is the fallback for older browsers. */ html { overflow-x: hidden; overflow-x: clip; } /* Safety net: a stray oversized element (wide image/table/preformatted block) should never make the page wider than the viewport. The sidebar drawer relies on this — its hidden anchor is the viewport's right edge. */ html, body { max-width: 100vw; overflow-x: clip; } :root { /* ---------- Core palette ---------- */ --slate: #3D4B6A; --slate-deep: #2A3450; --slate-ink: #1B2238; --slate-soft: #6A7A98; --slate-tint: #E7EAF1; --cream: #EFE9DC; --cream-soft: #F5F0E5; --cream-deep: #E5DECB; --paper: #FBF8F2; --sage: #9DAA90; --sage-deep: #6F7D62; --sage-tint: #E2E7DC; --coral: #E07B5C; --coral-deep: #C25E40; --coral-soft: #F2A085; --coral-tint: #F8DCD0; --brass: #8C8961; --brass-deep: #6A6845; --brass-tint: #DEDBC4; /* ---------- Semantic ---------- */ --ink: var(--slate-ink); --ink-2: #4A5468; --ink-3: #5E6980; /* v3.36.1: darkened from #7A8395 → WCAG AA for small muted text on light surfaces */ --line: #DDD6C5; --line-2: #C9C0A8; --line-cool: #D8DCE6; --surface: var(--paper); --surface-2: #FFFFFF; --overlay: rgba(27, 34, 56, .55); --success: #5E8C61; --warn: #C9A04A; --danger: var(--coral-deep); --info: var(--slate); /* ---------- Per-panel accent (overridden by [data-panel]) ---------- */ --brand-color: var(--slate); --brand-text: #FFFFFF; --accent: var(--coral); /* ---------- Legacy aliases (kept so existing inline var() refs still work) ---------- */ --bg: var(--cream); --card: var(--paper); --border: var(--line); --muted: var(--ink-3); --green: var(--success); --yellow: var(--warn); --red: var(--danger); /* ---------- Type scale ---------- */ --font-display: "IRANSansX", "Doran", "Vazirmatn", "Tahoma", system-ui, sans-serif; /* IRANSansX (full Persian + Latin) leads so the Persian UI actually renders in it. SF Pro Display / Instrument Serif are Latin-only, so with them the whole Persian UI silently fell back to Doran regardless of the setting. */ --font-sans: "IRANSansX", "Vazirmatn", "Doran", "Tahoma", system-ui, sans-serif; --font-latin: "SF Pro Display", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --t-display-1: clamp(48px, 6vw, 88px); --t-display-2: clamp(36px, 4.5vw, 64px); --t-h1: 32px; --t-h2: 24px; --t-h3: 20px; --t-h4: 17px; --t-body: 15px; --t-sm: 13px; --t-xs: 11px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.65; --lh-loose: 1.85; /* ---------- Spacing (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; /* ---------- Radius ---------- */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px; /* ---------- Shadows (warm-tinted) ---------- */ --shadow-sm: 0 1px 2px rgba(42, 52, 80, .06); --shadow-md: 0 6px 18px -6px rgba(42, 52, 80, .14), 0 2px 6px -2px rgba(42,52,80,.08); --shadow-lg: 0 24px 60px -20px rgba(42, 52, 80, .28), 0 8px 22px -10px rgba(42,52,80,.18); --shadow-ring: 0 0 0 1px rgba(42, 52, 80, .08); /* ---------- Motion ---------- */ --ease: cubic-bezier(.2,.7,.3,1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; /* ---------- Touch ---------- */ --hit: 44px; } /* ---------- Per-panel accent themes ---------- */ [data-panel="admin"] { --brand-color: var(--slate); --accent: var(--coral); } [data-panel="super"] { --brand-color: var(--coral-deep); --accent: var(--slate); } [data-panel="concept"] { --brand-color: var(--brass-deep); --accent: var(--coral); } [data-panel="store"] { --brand-color: var(--sage-deep); --accent: var(--coral); } [data-panel="organizer"] { --brand-color: var(--brass-deep); --accent: var(--coral); } /* brandbook v1.0 — Event Organizer is brass-deep #6A6845, not sage-deep */ body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); font-size: var(--t-body); line-height: var(--lh-body); direction: rtl; text-align: right; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand-color); text-decoration: none; } a:hover { opacity: .85; } button { font-family: inherit; cursor: pointer; } /* Typographic utilities */ .latin { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; } .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } .texture { background-image: radial-gradient(rgba(122, 100, 60, .04) 1px, transparent 1px), radial-gradient(rgba(122, 100, 60, .025) 1px, transparent 1px); background-size: 20px 20px, 7px 7px; background-position: 0 0, 3px 5px; } /* ===== Layout: sidebar + topbar + main ===== */ .sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 240px; background: var(--cream-soft); border-left: 1px solid var(--line); color: var(--ink); padding: 16px 12px; display: flex; flex-direction: column; z-index: 50; transition: transform .25s var(--ease); transform: translateX(100%); } .sb-logo { display: flex; align-items: center; gap: 11px; padding: 8px 8px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 16px; color: var(--ink); } .sb-mark { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow-sm); flex-shrink: 0; } .sb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-close { display: none; background: var(--cream-deep); border: 0; color: var(--ink); width: 36px; height: 36px; border-radius: 10px; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s; } .sb-close:hover { background: var(--line-2); } .sb-backdrop { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 49; backdrop-filter: blur(2px); } body.sb-open .sb-backdrop { display: block; } body.sb-open .sidebar { transform: translateX(0); box-shadow: -4px 0 20px rgba(0,0,0,.2); } .sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; flex: 1; overflow-y: auto; min-height: 0; } .sidebar nav > * { flex-shrink: 0; } .sidebar nav a { color: var(--ink-2); padding: 11px 13px; display: flex; align-items: center; gap: 11px; border-radius: var(--r-2); font-size: 14px; font-weight: 600; transition: background .15s, color .15s; } .sidebar nav a:hover { background: var(--cream-deep); color: var(--ink); } .sidebar nav a.active { background: var(--brand-color); color: var(--brand-text); box-shadow: var(--shadow-sm); } .sidebar nav a .ico { font-size: 17px; width: 22px; text-align: center; } .sidebar nav a.logout { margin-top: auto; color: var(--coral-deep); } .sidebar nav a.logout:hover { background: var(--coral-tint); } .sb-version { text-align: center; padding: 8px 0 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.5px; } /* Sub-tabs (nested nav, collapsible) */ .sidebar nav .sb-row { display: flex; align-items: stretch; width: 100%; border-radius: var(--r-2); overflow: hidden; } .sidebar nav .sb-row .sb-parent { flex: 1; color: var(--ink-2); padding: 11px 13px; display: flex; align-items: center; gap: 11px; background: transparent; border: 0; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: right; text-decoration: none; } .sidebar nav .sb-row .sb-parent:hover { background: var(--cream-deep); color: var(--ink); } .sidebar nav .sb-row .sb-parent.active { background: var(--brand-color); color: var(--brand-text); } /* Open group: header gets a slightly darker shade so the expanded tab stands out. */ .sidebar nav .sb-row:not(.is-closed) .sb-parent:not(.active) { background: var(--cream-deep); color: var(--ink); } .sidebar nav .sb-row:not(.is-closed) .sb-chev { background: var(--cream-deep); color: var(--ink-2); } .sidebar nav .sb-chev { background: transparent; border: 0; color: var(--ink-3); width: 34px; cursor: pointer; font-size: 12px; padding: 0; } .sidebar nav .sb-chev:hover { color: var(--ink); background: var(--cream-deep); } .sidebar nav .sb-chev .chev { display: inline-block; transition: transform .15s; } .sidebar nav .sb-row.is-closed .sb-chev .chev { transform: rotate(-90deg); } .sidebar nav .sb-children { overflow: hidden; max-height: 1000px; transition: max-height .2s ease; flex-shrink: 0; display: flex; flex-direction: column; padding-right: 8px; } .sidebar nav .sb-children > * { flex-shrink: 0; } .sidebar nav .sb-children.is-closed { max-height: 0; } .sidebar nav a.sb-child { padding: 9px 18px 9px 13px; font-size: 13px; color: var(--ink-3); border-radius: var(--r-2); display: flex; align-items: center; gap: 10px; text-decoration: none; position: relative; } .sidebar nav a.sb-child::before { content: ''; position: absolute; right: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--line-2); border-radius: 50%; } .sidebar nav a.sb-child:hover { background: var(--cream-deep); color: var(--ink); } .sidebar nav a.sb-child.active { background: var(--cream-deep); background: color-mix(in oklab, var(--brand-color) 14%, var(--surface)); color: var(--ink); font-weight: 700; } .sidebar nav a.sb-child.active::before { background: var(--brand-color); } /* v3.21: denser, easier-to-scan sidebar. Tighter rows, a clear left accent on the active item, and thin dividers between top-level groups. */ .sidebar nav { gap: 1px; } .sidebar nav a, .sidebar nav .sb-row .sb-parent { padding-top: 9px; padding-bottom: 9px; } .sidebar nav a.sb-child { padding-top: 7px; padding-bottom: 7px; } /* Filled active pill with a left accent bar so the current page pops at a glance. */ .sidebar nav a.active, .sidebar nav .sb-row .sb-parent.active { position: relative; } .sidebar nav a.active::after, .sidebar nav .sb-row .sb-parent.active::after { content: ''; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: #fff; opacity: .9; } /* Thin divider above each collapsible group so the 8 sections read as blocks. */ .sidebar nav .sb-row { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 4px; } .sidebar nav .sb-row:first-of-type { border-top: 0; margin-top: 2px; } .sidebar nav .sb-row .sb-parent, .sidebar nav .sb-chev { border-radius: var(--r-2); } /* Active child: stronger left accent. */ .sidebar nav a.sb-child.active { border-inline-start: 3px solid var(--brand-color); } /* v3.25: minimal, outlined sidebar hierarchy. Top-level entries read as full-ink titles (600 weight — heavier wrapped at 240px). Open groups get a clean right-edge accent instead of a heavy fill blob. Grouped children hang off a vertical guide rail. Cosmetic only: no markup, routes, IDs, name=, or handlers touched. */ .sidebar nav a, .sidebar nav .sb-row .sb-parent { color: var(--ink); font-weight: 600; } .sidebar nav a.sb-child { color: var(--ink-2); font-weight: 500; } /* No text wrapping in group headers — clip with ellipsis if ever too long. */ .sidebar nav .sb-row .sb-parent { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar nav .sb-row .sb-parent .ico { flex-shrink: 0; } /* Drop the cream-deep blob fill on open groups. Minimal: a thin accent on the inline-start edge marks the open section instead. */ .sidebar nav .sb-row:not(.is-closed) .sb-parent:not(.active), .sidebar nav .sb-row:not(.is-closed) .sb-chev { background: transparent; } .sidebar nav .sb-row { position: relative; border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 4px; } .sidebar nav .sb-row:first-of-type { border-top: 0; } .sidebar nav .sb-row:not(.is-closed)::before { content: ''; position: absolute; inset-inline-start: 0; top: 8px; bottom: 2px; width: 2px; background: var(--brand-color); border-radius: 2px; opacity: .55; } /* Vertical guide rail through the open children, sitting on the icon column. */ .sidebar nav .sb-children { position: relative; } .sidebar nav .sb-children::before { content: ''; position: absolute; top: 2px; bottom: 6px; right: 7.5px; width: 2px; background: var(--line); border-radius: 2px; } /* Quieter chevron button so the row reads as text + a small affordance. */ .sidebar nav .sb-chev { width: 28px; color: var(--ink-3); } .sidebar nav .sb-chev:hover { background: transparent; color: var(--ink); } .topbar { /* Mobile-first: full-width topbar by default. The desktop offset (right:240px to make room for the side nav) is opt-in via the min-width:901px rule below. This prevents an intermittent iOS-PWA glitch where the topbar renders at desktop width on first paint and jams its items into a corner. */ position: fixed; top: 0; left: 0; right: 0; height: 64px; background: var(--surface); display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line); z-index: 40; } @media (min-width: 901px) { .topbar { right: 240px; } } .page-title { margin: 0; font-size: 18px; color: var(--ink); font-weight: 700; } .topbar-spacer { flex: 1; } .jdate-pill { background: var(--slate-tint); padding: 7px 14px; border-radius: var(--r-pill); font-size: 13px; color: var(--slate-deep); font-weight: 500; } /* Unified brand display — button always, even with one brand. */ .brand-picker-btn { background: var(--brand-color); color: #fff; border: 0; padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-family: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: default; -webkit-tap-highlight-color: transparent; box-shadow: var(--shadow-sm); } .brand-picker-btn.is-multi { cursor: pointer; } .brand-picker-btn.is-multi:active { transform: scale(.97); } .brand-picker-btn .caret { font-size: 11px; opacity: .85; } /* Sidebar footer action buttons — keep the bottom group visually consistent (mobile-lite, install-app, offline-changes all share this look). */ .sb-foot-btn { display: flex; align-items: center; gap: 10px; width: auto; margin: 8px 14px 0; padding: 10px 14px; background: var(--cream-soft, #FBF8F2); color: var(--ink, #1B2238); border: 1px solid var(--line, #DDD6C5); border-radius: var(--r-2, 10px); font: 600 13px/1.2 inherit; text-align: right; text-decoration: none; cursor: pointer; position: relative; } .sb-foot-btn:hover { background: #F4EFE3; border-color: #C9C0A8; } .sb-foot-btn > .ico { font-size: 16px; flex: 0 0 auto; } /* Bottom-sheet modal brand picker */ .bp-modal { position: fixed; inset: 0; z-index: 100; display: none; pointer-events: none; } .bp-modal.open { display: block; pointer-events: auto; } .bp-mask { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); animation: bpFade .15s ease; } .bp-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 20px 20px 0 0; padding: 12px 18px 22px; max-width: 540px; margin: 0 auto; box-shadow: var(--shadow-lg); animation: bpSlide .2s var(--ease); direction: rtl; padding-bottom: calc(22px + env(safe-area-inset-bottom)); /* Cap height so a long brand list scrolls internally instead of overflowing past the top of the screen (handle + title + cancel stay put). */ display: flex; flex-direction: column; max-height: 85vh; max-height: 85dvh; } .bp-handle { width: 40px; height: 4px; background: var(--line-2); border-radius: 4px; margin: 0 auto 14px; } .bp-sheet h3 { margin: 0 0 14px; font-size: 16px; color: var(--ink); text-align: center; } .bp-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; } .bp-item { display: flex; align-items: center; gap: 12px; background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--ink); cursor: pointer; text-align: right; width: 100%; transition: background .12s; } .bp-item:active { background: var(--cream-deep); } .bp-item.active { background: var(--cream-deep); background: color-mix(in oklab, var(--brand-color) 10%, var(--surface)); border-color: var(--brand-c, var(--brand-color)); font-weight: 700; } .bp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand-c, var(--brand-color)); box-shadow: 0 0 0 2px rgba(0,0,0,.04); flex-shrink: 0; } .bp-name { flex: 1; } .bp-check { color: var(--brand-c, var(--brand-color)); font-size: 18px; font-weight: 900; } .bp-cancel { width: 100%; margin-top: 12px; background: transparent; border: 0; padding: 12px; color: var(--ink-3); font-family: inherit; font-size: 14px; cursor: pointer; } .bp-cancel:active { color: var(--ink); } @keyframes bpFade { from { opacity: 0 } to { opacity: 1 } } @keyframes bpSlide { from { transform: translateY(100%) } to { transform: translateY(0) } } .hamburger { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; font-size: 22px; color: var(--ink); cursor: pointer; } .main { margin-right: 0; margin-top: 64px; padding: 16px; padding-bottom: 90px; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); } @media (min-width: 901px) { .sidebar { transform: translateX(0); } .main { margin-right: 240px; padding: 24px; padding-bottom: 24px; } body.sb-collapsed .sidebar { transform: translateX(100%); box-shadow: none; } body.sb-collapsed .topbar { right: 0; } body.sb-collapsed .main { margin-right: 0; } } /* ===== Bottom nav (mobile) ===== */ .bottom-nav { display: none; } @media (max-width: 900px) { .sb-close { display: inline-flex; align-items: center; justify-content: center; } .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 30; padding: 6px 4px; } .bottom-nav a { flex: 1; text-align: center; padding: 6px; display: flex; flex-direction: column; gap: 2px; color: var(--ink-3); font-size: 11px; } .bottom-nav a span { font-size: 20px; } .bottom-nav a.active { color: var(--brand-color); font-weight: 700; } /* #cq-fab is now an in-flow sidebar entry — no bottom-nav avoidance needed. */ #stoqs-floating-pill { bottom: calc(148px + env(safe-area-inset-bottom)) !important; } #stoqs-queue-toast-host { bottom: calc(170px + env(safe-area-inset-bottom)) !important; } } /* ===== Cards & components ===== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-6); /* v3.23: flatter, calmer cards — the hairline border + contrasting cream background already separate them, so the shadow is dropped. Cosmetic only. */ box-shadow: none; margin-bottom: 16px; } .card h2 { margin: 0 0 14px; font-size: 17px; color: var(--ink); } .card-flat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: none; } .card-elev { box-shadow: var(--shadow-md); } .stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); box-shadow: none; border-right: 4px solid var(--brand-color); display: flex; flex-direction: column; gap: 8px; } .stat .lbl { color: var(--ink-3); font-size: 13px; } .stat .val { font-size: 28px; font-weight: 700; color: var(--brand-color); margin-top: 2px; } .stat.accent { border-right-color: var(--accent); } .stat.green { border-right-color: var(--success); } .stat.red { border-right-color: var(--danger); } .stat.warn { border-right-color: var(--warn); } /* New design-system stat parts (optional richer markup) */ .stat-label { font-size: var(--t-sm); color: var(--ink-3); } .stat-value { font-family: var(--font-sans); font-size: 38px; line-height: 1; letter-spacing: -.02em; color: var(--ink); } .stat-trend { font-size: var(--t-xs); display: inline-flex; align-items: center; gap: 4px; } .stat-trend.up { color: var(--success); } .stat-trend.down { color: var(--coral-deep); } /* Chips / badges */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; background: var(--slate-tint); color: var(--slate-deep); } .chip-sage { background: var(--sage-tint); color: var(--sage-deep); } .chip-coral { background: var(--coral-tint); color: var(--coral-deep); } .chip-brass { background: var(--brass-tint); color: var(--brass-deep); } .chip-success { background: #DBEBDD; color: #345E37; } .chip-warn { background: #F5E8C7; color: #7A5E1A; } .chip-dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; display:inline-block; } /* ===== Tables ===== */ /* Default: horizontal scroll only — sticky first/right column already freezes on horizontal scroll. To ALSO freeze the header row, opt in per page with an inline max-height on the wrap (e.g. style="max-height:calc(100dvh - 180px)"), which turns the wrap into an internal vertical scroller and lets the sticky thead engage. Short tables stay their natural height — no scroll-island. */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: none; } table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } table.tbl thead th { background: var(--cream-deep); color: var(--ink); font-weight: 700; text-align: right; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; } table.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; background: var(--surface); } table.tbl tbody tr:nth-child(even) td { background: var(--cream-soft); } table.tbl tbody tr:hover td { background: var(--slate-tint); background: color-mix(in oklab, var(--slate-tint) 60%, var(--surface)); } table.tbl .cell-num { font-variant-numeric: tabular-nums; } table.tbl thead th:first-child, table.tbl tbody td:first-child { position: sticky; right: 0; z-index: 3; box-shadow: -2px 0 4px -2px rgba(0,0,0,.08); } table.tbl thead th:first-child { z-index: 7; } @media print { .tbl-wrap { max-height: none; overflow: visible; } table.tbl thead th, table.tbl tbody td:first-child, table.tbl thead th:first-child { position: static; box-shadow: none; } } .stk-green { color: #345E37; background: #DBEBDD; padding: 3px 10px; border-radius: 6px; font-weight: 700; } .stk-yellow { color: #7A5E1A; background: #F5E8C7; padding: 3px 10px; border-radius: 6px; font-weight: 700; } .stk-red { color: var(--coral-deep); background: var(--coral-tint); padding: 3px 10px; border-radius: 6px; font-weight: 700; } /* ===== v3.36 shared components (additive — concept refurb) ===== New classes only; nothing existing references them, so no page changes until they're adopted. They formalize patterns already pasted inline across many pages (stat highlight, two-col card row, page sub-header, filter bar, empty state, attribute chip, table total row). */ .stat.highlight { background: linear-gradient(135deg, var(--cream-soft) 0%, #fff 80%); border-color: var(--brass-tint); } .card-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .page-subhead{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 10px; } .page-subhead h2, .page-subhead h3 { margin: 0; } .page-subhead .spacer { margin-inline-start: auto; } .filter-bar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .empty-state { text-align: center; color: var(--ink-3); padding: 24px 16px; } .empty-state.ok { color: var(--success); } .attr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--brass-tint); color: var(--brass-deep); font-size: var(--t-xs); } table.tbl tbody tr.tbl-total td { background: var(--cream-soft); font-weight: 700; } /* ===== Forms ===== */ .form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .form-grid.full { grid-template-columns: 1fr; } label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 14px; font-weight: 600; } input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="color"], input[type="search"], input[type="tel"], input[type="email"], select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); font-family: inherit; font-size: 14px; background: var(--surface); color: var(--ink); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } input:focus, select:focus, textarea:focus { border-color: var(--brand-color); box-shadow: 0 0 0 3px rgba(61,75,106,.18); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-color) 18%, transparent); background: #fff; } input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } textarea { min-height: 90px; resize: vertical; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .form-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } /* Design-system field wrapper (optional richer markup) */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; } .input { height: 48px; padding: 0 var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); font-family: var(--font-sans); font-size: var(--t-body); color: var(--ink); width: 100%; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .input:focus { border-color: var(--brand-color); box-shadow: 0 0 0 3px rgba(61,75,106,.18); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-color) 18%, transparent); background: #fff; } .input:focus:not(:focus-visible) { outline: none; } .input[dir="ltr"], input[dir="ltr"] { text-align: left; font-family: var(--font-latin); } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-5); border-radius: var(--r-2); font-size: var(--t-body); font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), opacity .15s; font-family: inherit; user-select: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand-color); color: var(--brand-text); box-shadow: var(--shadow-sm), inset 0 -1px 0 rgba(0,0,0,.18); } .btn-primary:hover { filter: brightness(.88); } @supports (color: color-mix(in oklab, red, blue)) { .btn-primary:hover { filter: none; background: color-mix(in oklab, var(--brand-color) 88%, #000); } } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { background: var(--cream-soft); border-color: var(--line-2); } .btn-ghost { background: transparent; color: var(--ink-2); } .btn-ghost:hover { background: rgba(42,52,80,.06); } .btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .btn-accent:hover { background: var(--coral-deep); } /* v3.23: calmer secondary buttons — neutral border by default so the brand color is reserved for primary actions + the active nav item. Brand shows on hover. Purely cosmetic: same element, same behavior. */ .btn-outline { background: var(--surface); color: var(--brand-color); border-color: var(--line); } .btn-outline:hover { border-color: var(--brand-color); background: var(--cream-soft); } .btn-danger { background: var(--coral-deep); color: #fff; box-shadow: var(--shadow-sm); } .btn-danger:hover { background: color-mix(in oklab, var(--coral-deep) 88%, #000); } .btn-sm { height: 34px; padding: 0 var(--s-4); font-size: var(--t-sm); border-radius: var(--r-1); } .btn-lg { height: 52px; padding: 0 var(--s-6); font-size: var(--t-h4); border-radius: var(--r-3); } .btn-icon { width: 44px; padding: 0; } .btn-block { width: 100%; } /* ===== Login ===== */ .login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--slate-ink) 0%, var(--slate-deep) 100%); background: radial-gradient(ellipse at 80% 20%, color-mix(in oklab, var(--brand-color) 40%, transparent), transparent 60%), linear-gradient(135deg, var(--slate-ink) 0%, var(--slate-deep) 100%); padding: 20px; } .login-box { background: var(--surface); padding: 40px 32px; border-radius: var(--r-4); width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .login-box h1 { text-align: center; margin: 0 0 8px; color: var(--ink); font-size: 22px; } .login-box p { text-align: center; color: var(--muted); margin: 0 0 24px; font-size: 13px; } .login-box .btn { width: 100%; padding: 13px; margin-top: 10px; } /* ===== Alerts ===== */ .alert { padding: 13px 16px; border-radius: var(--r-2); margin-bottom: 14px; font-size: 14px; border: 1px solid transparent; } .alert-success { background: #DBEBDD; color: #345E37; border-color: #B9D6BC; } .alert-error { background: var(--coral-tint); color: var(--coral-deep); border-color: var(--coral-soft); } .alert-info { background: var(--slate-tint); color: var(--slate-deep); border-color: var(--line-cool); } .alert-warning { background: #F5E8C7; color: #7A5E1A; border-color: #E6D29A; } /* ===== Toast ===== */ #toast-host { position: fixed; top: 80px; inset-inline-start: 20px; z-index: 10200; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--slate-ink); color: #fff; padding: 12px 18px; border-radius: var(--r-2); box-shadow: var(--shadow-lg); animation: tin .25s; } .toast.success { background: var(--success); } .toast.error { background: var(--coral-deep); } @keyframes tin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ===== Modal ===== */ .modal-mask { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 200; } .modal-mask.show { display: flex; } .modal-box { background: var(--surface); border-radius: var(--r-3); padding: 24px; max-width: 480px; width: calc(100% - 32px); box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .modal-box h3 { margin: 0 0 14px; color: var(--ink); } .modal-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; } /* ===== Loading overlay ===== */ .loading-mask { position: fixed; inset: 0; background: rgba(251,248,242,.7); display: none; align-items: center; justify-content: center; z-index: 300; } .loading-mask.show { display: flex; } .spinner { width: 44px; height: 44px; border: 4px solid var(--cream-deep); border-top-color: var(--brand-color); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== POS-style search bars ===== */ .pos-search, .rc-search, .arr-search { display: flex; gap: 8px; margin-bottom: 12px; align-items: stretch; } .pos-search > input[type="text"], .rc-search > input[type="text"], .arr-search > input[type="text"] { flex: 1 1 200px; min-width: 0; width: auto; } .pos-search > select, .rc-search > select, .arr-search > select { flex: 0 0 220px; width: 220px; } @media (max-width: 540px) { .pos-search, .rc-search, .arr-search { flex-wrap: wrap; } .pos-search > select, .rc-search > select, .arr-search > select { flex: 1 1 100%; width: 100%; } } /* ===== Jalali date picker ===== */ .jdp { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px; width: 260px; z-index: 500; box-shadow: var(--shadow-lg); } .jdp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .jdp-head button { background: transparent; border: 0; padding: 4px 8px; font-size: 16px; cursor: pointer; } .jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .jdp-grid .dh { font-size: 11px; color: var(--ink-3); text-align: center; padding: 4px 0; } .jdp-grid .d { padding: 6px 0; text-align: center; cursor: pointer; border-radius: 5px; font-size: 13px; } .jdp-grid .d:hover { background: var(--brand-color); color: #fff; } .jdp-grid .d.empty { visibility: hidden; } .jdp-grid .d.today { border: 1px solid var(--accent); } /* ===== Misc ===== */ .text-muted { color: var(--muted); } .right { text-align: right; } .center { text-align: center; } .full { width: 100%; } .muted { color: var(--ink-3); } .dim { color: var(--ink-2); } .flex { display: flex; gap: 10px; align-items: center; } .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .between { display: flex; justify-content: space-between; align-items: center; } .mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; } .hr { height: 1px; background: var(--line); border: 0; } .tag { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; background: var(--slate-tint); color: var(--slate-deep); } .tag.brand { background: var(--brand-color); color: #fff; } /* Print */ @media print { .sidebar, .topbar, .bottom-nav, .no-print { display: none !important; } .main { margin: 0; padding: 0; } body { background: #fff; } .card, .tbl-wrap { box-shadow: none; border: 1px solid #DDD6C5; } } /* ====== PWA install banner ====== */ #pwa-install-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 9999; display: flex; align-items: center; gap: 12px; background: var(--slate-ink); color: #fff; padding: 12px 16px; border-radius: var(--r-3); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(224,123,92,.4); font-family: var(--font-sans); animation: pwaIn .25s ease-out; } @keyframes pwaIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } #pwa-install-banner .pwa-icon { font-size: 26px; flex-shrink: 0; } #pwa-install-banner .pwa-text { flex: 1; line-height: 1.4; font-size: 13px; } #pwa-install-banner .pwa-text small { display: block; opacity: .7; font-size: 11px; margin-top: 2px; } #pwa-install-banner .pwa-install { background: var(--coral); color: #fff; border: 0; padding: 10px 18px; border-radius: var(--r-pill); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; flex-shrink: 0; } #pwa-install-banner .pwa-close { background: rgba(255,255,255,.12); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; flex-shrink: 0; } @media (max-width: 540px) { #pwa-install-banner { left: 8px; right: 8px; bottom: 70px; } } /* ====== Mobile polish ====== */ @media (max-width: 760px) { input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="email"], select, textarea { font-size: 16px; } .btn, .btn-sm { min-height: 40px; } .topbar { padding: 0 14px; } .main { padding: 14px; padding-bottom: 90px; } .stats { gap: 10px; } .stat { padding: 14px; } .stat .val { font-size: 22px; } table.tbl { font-size: 13px; } table.tbl thead th, table.tbl tbody td { padding: 9px 10px; } .card { padding: 14px; } .card h2 { font-size: 16px; } .bottom-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); } .sidebar { padding-bottom: env(safe-area-inset-bottom); } } /* Tap-friendly touch targets */ button, .btn, a.btn, [role="button"] { -webkit-tap-highlight-color: rgba(224,123,92,.18); } /* a11y: visible keyboard-focus ring for interactive elements that lack one. :focus-visible keeps mouse/touch interactions ring-free, matching inputs. */ :is(a, button, .btn, [role="button"], .fchip, .seg a, .seg button, .lite-tab, .bp-item, summary):focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; } /* PWA standalone tweaks */ @media (display-mode: standalone) { .topbar { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)); } .main { margin-top: calc(64px + env(safe-area-inset-top)); } .sidebar { padding-top: env(safe-area-inset-top); } } /* Single-column POS on phones */ @media (max-width: 760px) { .pos-wrap, .rc-wrap, .arr-wrap, .ev-wrap { grid-template-columns: 1fr !important; } .pos-cart, .rc-cart, .arr-cart, .ev-cart { position: static !important; } .pos-grid, .rc-grid, .arr-grid, .ev-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; max-height: none !important; } } /* PWA polish: touch targets, 16px inputs, safe-area, reduced motion */ button, .btn, a.btn, a[role="button"], [data-install-pwa], .brand-picker-btn, .bp-item, .bp-cancel, .sb-close, .sb-chev, .sb-parent { touch-action: manipulation; } input, textarea, select, button { font-size: 16px; } @media (min-width: 768px) { input, textarea, select { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Connectivity bar offsets */ body.is-offline .topbar, body.is-offline .sa-top { margin-top: 28px; } [data-online-only].is-disabled-offline { position: relative; filter: grayscale(0.4); } [data-online-only]:not(.is-disabled-offline) { filter: none; } a, button, .btn, [role="button"], .sb-chev, .sb-close { min-height: 36px; } @media (max-width: 900px) { a.btn, button.btn, .btn, .bp-item, .bell-btn { min-height: 44px; } } @media (display-mode: standalone) { .bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } } #pwa-install-banner { z-index: 9999 !important; } #stoqs-conn-bar { z-index: 10000 !important; } #pwa-update-toast { z-index: 10100 !important; } /* Mobile hardening across panels */ @media (max-width: 760px) { .main > table.tbl, .card > table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl-wrap { -webkit-overflow-scrolling: touch; } table.tbl { min-width: 480px; } table.tbl thead th, table.tbl tbody td { white-space: nowrap; } table.tbl td.wrap, table.tbl th.wrap, table.tbl td[colspan] { white-space: normal; } .main [style*="display:flex"][style*="gap:"] { flex-wrap: wrap; } .main [style*="display: flex"][style*="gap:"] { flex-wrap: wrap; } .main [style*="grid-template-columns:1fr 1fr"], .main [style*="grid-template-columns: 1fr 1fr"], .main [style*="grid-template-columns:1fr 1fr 1fr"], .main [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } .form-grid { grid-template-columns: 1fr !important; } .filter-bar, .pos-search, .rc-search, .arr-search { flex-wrap: wrap !important; } .filter-bar > *, .pos-search > select { flex: 1 1 100% !important; min-width: 0 !important; } .modal-box { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; } .modal-actions { flex-wrap: wrap; } .modal-actions .btn { flex: 1 1 auto; } table.tbl thead th:first-child, table.tbl tbody td:first-child { position: static !important; box-shadow: none !important; } } /* Ultra-small phones */ @media (max-width: 380px) { .main { padding: 10px !important; padding-bottom: 90px !important; } .card { padding: 12px !important; } .btn { padding: 9px 12px; font-size: 13px; } .stats { gap: 8px; } .stat { padding: 12px; } .stat .val { font-size: 19px; } } /* ========================================================================= StoqS design-system components (mockup-faithful) Letter avatars · status pills · filter chips · segmented toggle · KPI hero · rank list · branch bars · low-stock banner · POS tiles · split login ========================================================================= */ /* ---- Stat tiles: display numbers + inverted hero ---- */ /* NOTE: .stat .val MUST stay on the UI font (Vazirmatn) — every value on this app is a Persian numeral, and the display serif has no Persian glyphs, so the browser falls back at a tiny size and breaks the card layout. The brand display font is for Latin-only contexts (the hero wordmark, marketing). */ .stat.hero { background: var(--slate-ink); border: 1px solid var(--slate-ink); border-right: 1px solid var(--slate-ink); color: #fff; position: relative; overflow: hidden; } .stat.hero .lbl { color: rgba(255,255,255,.6); } .stat.hero .val { color: #fff; } .stat.hero .stat-sub { color: rgba(255,255,255,.55); } .stat-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; } .stat-sub.up { color: var(--success); } .stat-sub.down { color: var(--coral-deep); } /* ---- Letter avatars (category / brand / customer initials) ---- */ .avatar { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 20px; line-height: 1; color: #fff; background: var(--slate); flex-shrink: 0; } .avatar-sm { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; } .avatar-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; } .avatar-sage { background: var(--sage-deep); } .avatar-coral { background: var(--coral); } .avatar-olive { background: var(--brass-deep); } .avatar-slate { background: var(--slate); } .avatar-brass { background: var(--brass); } /* ---- Status pills (semantic) ---- */ .pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; } .pill-ok { background: var(--sage-tint); color: var(--sage-deep); } .pill-low { background: #F5E8C7; color: #7A5E1A; } .pill-out { background: var(--coral-tint); color: var(--coral-deep); } .pill-info { background: var(--slate-tint); color: var(--slate-deep); } /* ---- Filter chips bar ---- */ .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .fchip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .fchip:hover { background: var(--cream-soft); } .fchip.active { background: var(--slate-ink); color: #fff; border-color: var(--slate-ink); } .fchip.active-coral { background: var(--coral); color: #fff; border-color: var(--coral); } .fchip.active-brass { background: var(--brass-deep); color: #fff; border-color: var(--brass-deep); } .fchip .ct { opacity: .7; font-variant-numeric: tabular-nums; } /* ---- Segmented toggle (today / week / month / year) ---- */ .seg { display: inline-flex; background: var(--cream-deep); border-radius: var(--r-2); padding: 3px; gap: 2px; } .seg a, .seg button { border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 7px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; } .seg a.active, .seg button.active { background: var(--slate-ink); color: #fff; box-shadow: var(--shadow-sm); } /* ---- KPI hero card (dark, big number + sparkline + sub-metrics) ---- */ .kpi-hero { background: var(--slate-ink); color: #fff; border-radius: var(--r-4); padding: 22px 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } .kpi-hero .kpi-lbl { color: rgba(255,255,255,.6); font-size: var(--t-sm); } .kpi-hero .kpi-val { font-family: var(--font-sans); font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; margin: 6px 0; } .kpi-hero .kpi-trend { font-size: var(--t-sm); color: var(--coral-soft); display: inline-flex; gap: 4px; align-items: center; } .kpi-currency { font-size: .35em; font-weight: 400; margin-right: .3em; opacity: .65; vertical-align: middle; } .kpi-hero .kpi-spark { position: absolute; inset-inline-start: 24px; top: 22px; width: 38%; max-width: 240px; opacity: .9; } .kpi-hero .kpi-spark path { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .kpi-sub { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); } .kpi-sub .kpi-sub-i .l { color: rgba(255,255,255,.55); font-size: var(--t-xs); } .kpi-sub .kpi-sub-i .v { font-family: var(--font-sans); font-size: 24px; line-height: 1.1; } /* Dashboard two-column overview grid collapses on narrow screens */ @media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr !important; } } /* ---- Mini bar chart (weekly sales) ---- */ .barchart { display: flex; align-items: flex-end; gap: 10px; height: 150px; } .barchart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .barchart .bar i { width: 100%; max-width: 34px; background: var(--slate); border-radius: 8px 8px 0 0; display: block; transition: height .3s var(--ease); } .barchart .bar.peak i { background: var(--coral); } .barchart .bar small { color: var(--ink-3); font-size: var(--t-xs); } .barchart .bar .bv { font-size: var(--t-xs); color: var(--ink-2); font-weight: 700; } /* ---- Ranked list (top products) ---- */ .rank-list { display: flex; flex-direction: column; } .rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .rank-row:last-child { border-bottom: 0; } .rank-row .rk { font-family: var(--font-sans); font-size: 22px; color: var(--ink-3); width: 22px; text-align: center; } .rank-row .rk-main { flex: 1; min-width: 0; } .rank-row .rk-main b { display: block; color: var(--ink); } .rank-row .rk-main small { color: var(--ink-3); } .rank-row .rk-val { font-family: var(--font-sans); font-size: 20px; color: var(--ink); } /* ---- Branch performance bars ---- */ .branch-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .branch-row .bn { min-width: 90px; font-weight: 700; color: var(--ink); text-align: right; } .branch-row .bv { font-family: var(--font-sans); font-size: 18px; color: var(--ink); white-space: nowrap; } .branch-row .bd { font-size: var(--t-xs); white-space: nowrap; } .branch-row .bd.up { color: var(--success); } .branch-row .bd.down { color: var(--coral-deep); } .branch-track { flex: 1; height: 8px; background: var(--slate-tint); border-radius: var(--r-pill); overflow: hidden; } .branch-track i { display: block; height: 100%; background: var(--slate); border-radius: var(--r-pill); } .branch-track.peak i { background: var(--coral); } /* ---------- Chart maker (cm-*) — reusable report/widget charts ---------- */ .cm-empty { color: var(--ink-3); text-align: center; padding: 22px 10px; font-size: var(--t-sm); } /* vertical bars */ .cm-bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; } .cm-bars .cm-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .cm-bars .cm-bar i { width: 100%; max-width: 40px; background: var(--slate); border-radius: 8px 8px 0 0; display: block; transition: height .35s var(--ease); } .cm-bars .cm-bar.peak i { background: var(--coral); } .cm-bars .cm-bar small { color: var(--ink-3); font-size: var(--t-xs); white-space: nowrap; } .cm-bars .cm-bv { font-size: var(--t-xs); color: var(--ink-2); font-weight: 700; } /* horizontal relative (share) bars */ .cm-hbars { display: flex; flex-direction: column; gap: 10px; } .cm-hbar-row { display: flex; align-items: center; gap: 12px; } .cm-hbar-lbl { min-width: 96px; max-width: 160px; font-weight: 700; color: var(--ink); text-align: right; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-hbar-track { flex: 1; height: 10px; background: var(--slate-tint); border-radius: var(--r-pill); overflow: hidden; } .cm-hbar-track i { display: block; height: 100%; border-radius: var(--r-pill); transition: width .35s var(--ease); } .cm-hbar-val { font-family: var(--font-sans); font-size: 16px; color: var(--ink); white-space: nowrap; min-width: 70px; text-align: left; } /* line / area */ .cm-line svg { width: 100%; height: 180px; display: block; } .cm-line-path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .cm-line-area { opacity: .12; } .cm-line-x { display: flex; justify-content: space-between; margin-top: 6px; } .cm-line-x small { color: var(--ink-3); font-size: var(--t-xs); } /* donut + legend */ .cm-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .cm-donut { position: relative; width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; } .cm-donut-hole { position: absolute; inset: 26%; background: var(--surface-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; } .cm-donut-hole span { font-family: var(--font-sans); font-size: 15px; color: var(--ink); line-height: 1.2; padding: 0 6px; } .cm-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; } .cm-leg-row { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); } .cm-leg-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .cm-leg-lbl { flex: 1; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-leg-val { color: var(--ink-3); white-space: nowrap; } .cm-card-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; } .cm-card-title h3 { margin: 0; font-size: 15px; } .cm-card-title .cm-hint { color: var(--ink-3); font-size: var(--t-xs); } /* ---- POS hover stock popover (shared across all POS pages) ---- */ .pos-pop { position: fixed; z-index: 9999; display: none; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(27,34,56,.20); padding: 8px 10px; min-width: 150px; max-width: 240px; max-height: 230px; overflow-y: auto; font-size: 13px; -webkit-overflow-scrolling: touch; } .pos-pop.show { display: block; } .pos-pop h5 { margin: 0 0 6px; font-size: 11.5px; color: var(--ink-3); font-weight: 700; } .pos-pop-row { display: flex; justify-content: space-between; gap: 14px; padding: 4px 2px; border-bottom: 1px solid var(--line); } .pos-pop-row:last-child { border-bottom: 0; } .pos-pop-row .sz { font-weight: 700; } .pos-pop-row .q { font-variant-numeric: tabular-nums; } .pos-pop-row .q.ok { color: var(--success); } .pos-pop-row .q.zero { color: var(--coral-deep); } @media (max-width: 640px) { .cm-hbar-lbl { min-width: 70px; font-size: var(--t-xs); } .cm-bars { gap: 4px; } } /* ---- Low-stock banner ---- */ .lowstock-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--coral-tint); border: 1px solid var(--coral-soft); border-radius: var(--r-4); padding: 16px 20px; color: var(--coral-deep); } .lowstock-banner .ls-ico { font-size: 22px; } .lowstock-banner b { color: var(--coral-deep); } .lowstock-banner .btn { margin-inline-start: auto; } /* ---- POS product tiles ---- */ .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .prod-tile { position: relative; border-radius: var(--r-3); overflow: hidden; cursor: pointer; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; border: 0; font-family: inherit; text-align: right; box-shadow: var(--shadow-sm); transition: transform var(--dur-1) var(--ease); } .prod-tile:active { transform: scale(.98); } .prod-tile .pt-letter { position: absolute; inset-inline-end: 14px; top: 14px; font-family: var(--font-sans); font-size: 48px; opacity: .9; line-height: 1; } .prod-tile .pt-foot { background: var(--paper); color: var(--ink); padding: 12px 14px; } .prod-tile .pt-foot b { display: block; } .prod-tile .pt-foot small { color: var(--ink-3); } .prod-tile .pt-foot .pt-price { font-family: var(--font-sans); font-size: 18px; margin-top: 4px; } .prod-tile .pt-flag { position: absolute; inset-inline-start: 10px; top: 10px; } /* ---- Quantity stepper ---- */ .stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--surface); } .stepper button { width: 36px; height: 36px; border: 0; background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; } .stepper button:hover { background: var(--cream-soft); } .stepper .qv { min-width: 34px; text-align: center; font-weight: 700; } /* ---- Split login / landing (dark hero + cream form) ---- */ .split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; direction: rtl; } .split-hero { background: linear-gradient(150deg, var(--slate-ink), var(--slate-deep)); background: radial-gradient(ellipse at 25% 20%, color-mix(in oklab, var(--coral) 22%, transparent), transparent 55%), linear-gradient(150deg, var(--slate-ink), var(--slate-deep)); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; } .split-hero .sh-eyebrow { color: rgba(255,255,255,.55); font-size: var(--t-sm); } .split-hero h1 { font-size: clamp(40px, 5vw, 72px); line-height: var(--lh-tight); margin: 18px 0 14px; font-weight: 800; } .split-hero p { color: rgba(255,255,255,.7); max-width: 30ch; line-height: var(--lh-body); } .split-form { background: var(--cream); padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; } .split-form .sf-box { width: 100%; max-width: 420px; margin: 0 auto; } .split-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--t-sm); margin: 22px 0; } .split-or::before, .split-or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .role-chips { display: flex; flex-wrap: wrap; gap: 8px; } .role-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-2); } .role-chip .rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slate); } .phone-field { display: flex; gap: 8px; } .phone-field .cc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); font-weight: 700; } .phone-field input { flex: 1; height: 52px; text-align: left; direction: ltr; font-family: var(--font-latin); } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split-hero { padding: 36px 28px; min-height: 28vh; min-height: 28dvh; } .split-form { padding: 32px 24px; } } /* ---- Topbar enrichments (search pill + breadcrumb) ---- */ .tb-search { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-3); font-size: 13px; min-width: 220px; } .tb-search .kbd { margin-inline-start: auto; font-family: var(--font-mono); font-size: 11px; background: var(--cream-deep); color: var(--ink-2); padding: 2px 7px; border-radius: 6px; } .tb-crumb { font-size: var(--t-sm); color: var(--ink-3); } .page-head { display: flex; flex-direction: column; gap: 2px; }