/* ========================================================================== عطور زمزم — Design system Warm-neutral base with a single amber-bronze accent. Light + dark, driven by the device and overridable by the header toggle (data-theme on ). Touch-first: every interactive target is at least 44px. ========================================================================== */ :root{ color-scheme: light; /* surfaces */ --bg:#faf8f5; --surface:#ffffff; --surface-2:#f4f1ec; --surface-3:#ece7de; /* text */ --ink:#1a1815; --ink-2:#6b6459; --ink-3:#6f675b; /* 4.8:1 on --surface — was #948b7e (3.39:1) */ --ink-faint:#948b7e; /* placeholders only, never body text */ /* lines */ --line:#e8e2d9; --line-strong:#d6cdc0; /* accent — amber bronze */ --accent:#966c40; /* 4.65:1 with white — was #a87c4f (3.71:1) */ --accent-hover:#835d37; --accent-ink:#ffffff; --accent-soft:#f3ebe1; --accent-ring:rgb(168 124 79 / .32); /* status */ --ok:#2f6b4f; --ok-soft:#e7f0ea; --danger:#a33a34; --danger-soft:#f8e9e8; --danger-ink:#ffffff; --warn:#8a5c15; --warn-soft:#f8efdd; /* elevation */ --shadow-1:0 1px 2px rgb(26 24 21 / .05); --shadow-2:0 2px 4px rgb(26 24 21 / .04), 0 8px 20px rgb(26 24 21 / .06); --shadow-3:0 8px 16px rgb(26 24 21 / .07), 0 24px 48px rgb(26 24 21 / .10); /* geometry */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px; --tap:44px; /* fluid type */ --fs-xs:clamp(11.5px,.55vw + 10px,13px); --fs-sm:clamp(13px,.6vw + 11.5px,14.5px); --fs-md:clamp(15px,.7vw + 13px,16.5px); --fs-lg:clamp(18px,1.1vw + 15px,21px); --fs-xl:clamp(22px,1.9vw + 17px,28px); --fs-2xl:clamp(27px,3vw + 19px,38px); --ease:cubic-bezier(.32,.72,0,1); --dur:.22s; } /* Dark: applied when the device asks for it, unless the user forced light. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --bg:#141210; --surface:#1c1916; --surface-2:#241f1b; --surface-3:#2d2723; --ink:#f2eee8; --ink-2:#a79e92; --ink-3:#9a9184; /* 5.2:1 on --surface — was #7d7568 (3.6:1) */ --ink-faint:#7d7568; --line:#322c26; --line-strong:#443c34; --accent:#c99a63; --accent-hover:#d8ab74; --accent-ink:#20180f; --accent-soft:#2a2219; --accent-ring:rgb(201 154 99 / .38); --ok:#6cc397; --ok-soft:#1a2b23; --danger:#e89189; --danger-soft:#2e1e1c; --danger-ink:#2b0f0c; --warn:#d9a441; --warn-soft:#2d2417; --shadow-1:0 1px 2px rgb(0 0 0 / .40); --shadow-2:0 2px 4px rgb(0 0 0 / .34), 0 8px 20px rgb(0 0 0 / .44); --shadow-3:0 8px 16px rgb(0 0 0 / .40), 0 24px 48px rgb(0 0 0 / .54); } } /* And when the user forces dark, regardless of the device. */ :root[data-theme="dark"]{ color-scheme: dark; --bg:#141210; --surface:#1c1916; --surface-2:#241f1b; --surface-3:#2d2723; --ink:#f2eee8; --ink-2:#a79e92; --ink-3:#9a9184; /* 5.2:1 on --surface — was #7d7568 (3.6:1) */ --ink-faint:#7d7568; --line:#322c26; --line-strong:#443c34; --accent:#c99a63; --accent-hover:#d8ab74; --accent-ink:#20180f; --accent-soft:#2a2219; --accent-ring:rgb(201 154 99 / .38); --ok:#6cc397; --ok-soft:#1a2b23; --danger:#e89189; --danger-soft:#2e1e1c; --danger-ink:#2b0f0c; --warn:#d9a441; --warn-soft:#2d2417; --shadow-1:0 1px 2px rgb(0 0 0 / .40); --shadow-2:0 2px 4px rgb(0 0 0 / .34), 0 8px 20px rgb(0 0 0 / .44); --shadow-3:0 8px 16px rgb(0 0 0 / .40), 0 24px 48px rgb(0 0 0 / .54); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; /* System Arabic faces first: SF Arabic on Apple, Segoe/Dubai on Windows, Noto Naskh on Android. No webfont, so the shop still works offline. */ font-family:system-ui,-apple-system,"SF Arabic","Segoe UI","Noto Sans Arabic","Dubai",Tahoma,Arial,sans-serif; font-size:var(--fs-md); line-height:1.6; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } /* Arabic reads better with lining digits in tabular contexts. */ table,.kpi strong,#clock,input[type=number]{font-variant-numeric:tabular-nums} ::selection{background:var(--accent-ring);color:var(--ink)} :where(a){color:var(--accent);text-underline-offset:3px} /* One consistent focus ring, keyboard-only. */ :where(button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); } /* ---------------------------------------------------------------- chrome */ header{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left)); background:color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--line); color:var(--ink); } header b{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.01em;line-height:1.2} header small{display:block;color:var(--ink-2);font-size:var(--fs-xs);margin-top:2px} #clock{color:var(--ink-2);font-size:var(--fs-sm);white-space:nowrap} .menuBtn,.themeBtn{ display:inline-grid; place-items:center; inline-size:var(--tap); block-size:var(--tap); border:1px solid transparent; border-radius:var(--r-md); background:transparent; color:var(--ink); font-size:20px; line-height:1; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .menuBtn:hover,.themeBtn:hover{background:var(--surface-2);border-color:var(--line)} .header-actions{display:flex;align-items:center;gap:6px} #overlay{ display:none; position:fixed; inset:0; z-index:40; background:rgb(20 18 16 / .48); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } #overlay.show{display:block} /* The drawer lives on the reading-start edge, which is the RIGHT in this RTL document: inset-inline-start resolves to `right` here. Its visible edge faces the content, i.e. its left side = inline-end. */ aside{ position:fixed; inset-block:0; inset-inline-start:-320px; inline-size:min(88vw,300px); z-index:50; background:var(--surface); border-inline-end:1px solid var(--line); box-shadow:var(--shadow-3); padding-block:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; transition:inset-inline-start var(--dur) var(--ease); } aside.open{inset-inline-start:0} .sideItem{ display:flex; align-items:center; gap:10px; inline-size:100%; min-block-size:var(--tap); padding:12px 18px; border:0; border-inline-start:3px solid transparent; background:transparent; color:var(--ink); font:inherit; font-size:var(--fs-sm); text-align:start; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .sideItem:hover{background:var(--surface-2);border-inline-start-color:var(--accent)} main{ max-width:1120px; margin-inline:auto; padding:16px calc(14px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); } .page{display:none} .page.active{display:block;animation:page-in var(--dur) var(--ease)} @keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .page-back{display:flex;justify-content:flex-start;margin-bottom:14px} .page-back button{min-inline-size:92px} /* ---------------------------------------------------------------- type */ h2{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.02em;margin:2px 0 16px;line-height:1.25} h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;margin:0 0 12px;line-height:1.3} h4{font-size:var(--fs-md);font-weight:600;margin:18px 0 8px} .muted{color:var(--ink-2);font-size:var(--fs-sm)} .warn{color:var(--warn);font-weight:600} .ok{color:var(--ok);font-weight:600} /* ---------------------------------------------------------------- home */ .home-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:4px; } .home-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-block-size:112px; padding:22px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); font-size:var(--fs-md); font-weight:600; text-align:center; cursor:pointer; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .home-card{font-family:inherit;color:inherit;inline-size:100%;appearance:none} .home-card span{font-size:30px;line-height:1} .home-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--line-strong)} .home-card:active{transform:translateY(0) scale(.985)} /* ---------------------------------------------------------------- surfaces */ .card{ display:block; /* JS toggles some cards with display:'block' */ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; margin-bottom:14px; box-shadow:var(--shadow-1); } .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px} .kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; } .kpi span{display:block;color:var(--ink-2);font-size:var(--fs-xs);font-weight:500} .kpi strong{display:block;margin-top:6px;font-size:var(--fs-lg);font-weight:650;letter-spacing:-.02em} .badge{ display:inline-block; padding:4px 10px; border-radius:var(--r-full); background:var(--surface-3); color:var(--ink-2); font-size:var(--fs-xs); font-weight:600; } .badge.warn{ background:var(--warn-soft); color:var(--warn); } .thumb{ inline-size:64px; block-size:64px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--line); } /* ---------------------------------------------------------------- forms */ label{ display:block; margin-bottom:6px; color:var(--ink-2); font-size:var(--fs-xs); font-weight:600; letter-spacing:.01em; } input,select,textarea{ inline-size:100%; min-block-size:var(--tap); padding:11px 13px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; /* iOS Safari zooms the page whenever a focused field is under 16px. */ font-size:max(16px,var(--fs-sm)); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } input::placeholder,textarea::placeholder{color:var(--ink-faint)} input:hover,select:hover,textarea:hover{border-color:var(--ink-3)} input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); } input[type=checkbox]{ inline-size:20px; block-size:20px; min-block-size:0; accent-color:var(--accent); cursor:pointer; } input[type=file]{padding:9px 13px} select{ appearance:none; /* Inline SVG data URI — allowed by the CSP (img-src includes data:) and far more predictable than the two-gradient caret trick. In RTL the caret sits on the physical left, so the room for it is padding-inline-END. */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.25 1.75 6 6.25l4.75-4.5' fill='none' stroke='%236b6459' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 14px center; background-size:12px 8px; padding-inline-end:38px; } select:disabled{opacity:.55} textarea{min-block-size:88px;padding-block:11px;resize:vertical} /* Caret colour has to be baked into the SVG, so restate it for dark. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.25 1.75 6 6.25l4.75-4.5' fill='none' stroke='%23a79e92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.25 1.75 6 6.25l4.75-4.5' fill='none' stroke='%23a79e92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Keyboard focus must be visible everywhere — the app is now navigated by button, and :focus-visible only fires for keyboard/AT users. */ :where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); } /* ---------------------------------------------------------------- buttons */ button{font:inherit} button.primary,button.secondary,button.danger{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-block-size:var(--tap); padding:11px 18px; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:600; cursor:pointer; white-space:nowrap; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } button.primary{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-1)} button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)} button.secondary{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)} button.secondary:hover{background:var(--surface-2);border-color:var(--ink-3)} button.danger{border:1px solid var(--danger);background:var(--danger);color:var(--danger-ink,#fff)} button.danger:hover{filter:brightness(1.07)} button.primary:active,button.secondary:active,button.danger:active{transform:scale(.98)} button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;filter:none!important} /* Row actions keep compact typography and horizontal padding, but a real 44px height. An invisible ::after overlay was tried first and is not dependable: neighbouring table cells paint over it, so the extra area is not clickable. */ button.small{ min-inline-size:44px; min-block-size:44px; min-block-size:var(--tap); padding:8px 14px; font-size:var(--fs-xs); border-radius:var(--r-sm); } .actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px} /* ---------------------------------------------------------------- nav strips */ .subnav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:thin} .subnav button{ min-block-size:var(--tap); padding:10px 16px; border:1px solid var(--line-strong); border-radius:var(--r-full); background:var(--surface); color:var(--ink); font-size:var(--fs-sm); font-weight:600; white-space:nowrap; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .subnav button:hover{background:var(--surface-2)} .subnav button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} /* The sales period filters are pills too, and mark the active range. */ .sales-filter-btn.active{ background:var(--accent);border-color:var(--accent);color:var(--accent-ink); } /* ---------------------------------------------------------------- tables */ .scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border-radius:var(--r-md); } table{inline-size:100%;border-collapse:collapse;font-size:var(--fs-sm);min-inline-size:max-content} /* No position:sticky here: .scroll has no height constraint, so there is never any vertical overflow for a sticky header to stick against. */ thead th{ background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-xs); font-weight:650; letter-spacing:.02em; text-align:start; white-space:nowrap; padding:11px 12px; border-bottom:1px solid var(--line-strong); } td{ padding:12px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line); } tbody tr:last-child td{border-bottom:0} tbody tr{transition:background var(--dur) var(--ease)} tbody tr:hover{background:var(--surface-2)} /* ---------------------------------------------------------------- line items */ .line-item{ position:relative; border:1px dashed var(--line-strong); border-radius:var(--r-md); padding:14px; margin-block:10px; background:var(--surface-2); } /* ---------------------------------------------------------------- suggestions */ .suggest-box{ display:none; position:absolute; z-index:60; inset-block-start:100%; inset-inline:0; margin-top:6px; max-block-size:240px; overflow-y:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:var(--shadow-3); } .suggest-box.show{display:block} .suggest-item{ display:block; inline-size:100%; min-block-size:var(--tap); padding:11px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:var(--fs-sm); text-align:start; cursor:pointer; } .suggest-item:last-child{border-bottom:0} .suggest-item:hover, .suggest-item[aria-selected="true"]{background:var(--accent-soft)} .suggest-item[aria-selected="true"]{outline:2px solid var(--accent);outline-offset:-2px} .suggest-item small{display:block;margin-top:2px;color:var(--ink-2);font-size:var(--fs-xs)} /* ---------------------------------------------------------------- charts */ .row{margin-block:10px} .rowhead{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);margin-bottom:5px} .track{block-size:8px;background:var(--surface-3);border-radius:var(--r-full);overflow:hidden} .bar{block-size:8px;background:var(--accent);border-radius:var(--r-full)} /* ---------------------------------------------------------------- auth */ #authGate{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); } #authGate.hidden{display:none} /* While a saved session is restored, the gate says so instead of showing a login form the user does not need. */ #authGate.checking .auth-card > h2, #authGate.checking #loginBox{display:none} #authGate:not(.checking) #authChecking{display:none} #authChecking{text-align:center} #authChecking img{border-radius:50%} #authChecking p{margin:12px 0 0} #authSlow button{margin-top:12px} .auth-card{ inline-size:min(460px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-3); } .auth-card h2{margin-top:0} .auth-error{margin-top:12px;color:var(--danger);font-size:var(--fs-sm);white-space:pre-wrap} .auth-ok{margin-top:12px;color:var(--ok);font-size:var(--fs-sm)} #roleBar .user-meta{margin-top:3px;color:var(--ink-2);font-size:var(--fs-xs)} /* Stock warnings: one readable row each, with the icon hanging outside. */ #alerts .warn{ display:flex; gap:8px; align-items:flex-start; padding:9px 12px; margin-bottom:6px; background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 26%, transparent); border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:500; line-height:1.5; } #alerts .warn:last-child{margin-bottom:0} /* ---------------------------------------------------------------- motion */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } aside{transition:none} } /* ---------------------------------------------------------------- narrow */ @media (max-width:600px){ .home-grid{grid-template-columns:1fr 1fr} .home-card{min-block-size:100px;padding:18px 10px;font-size:var(--fs-sm)} .home-card span{font-size:26px} /* Form fields need the full width on a phone; KPI tiles do not. */ .grid{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))} .kpi{padding:12px} .kpi strong{font-size:var(--fs-md)} .card{padding:14px;border-radius:var(--r-md)} main{padding-inline:calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-left))} .actions button{flex:1 1 auto} } /* Print: reports open in their own window, but keep this sane if the page itself is printed. */ @media print{ header,aside,#overlay,#roleBar,.page-back,.actions,.subnav{display:none!important} body{background:#fff;color:#000} .card{box-shadow:none;border-color:#ccc;break-inside:avoid} }