/* =========================================================================
   Vision Guard — app.css
   Shop, account and attendance. Loaded only on those pages; the landing page
   never pays for it.

   Every token, button, hairline and radius comes from styles.css — this file
   introduces no new colours and no second design language. If something here
   looks like a new idea, it is a mistake.
   ========================================================================= */

/* ---------- utilities ---------- */
.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;
}
[hidden]{ display:none !important; }

/* =========================================================================
   PAGE HEAD
   ========================================================================= */
.pagehead{
  display:grid; gap:18px; max-width:760px;
  padding-block:clamp(40px,6vw,76px) clamp(28px,3.6vw,44px);
}
.pagehead--tight{ padding-block:0 clamp(20px,2.6vw,30px); }
.pagehead__note{ color:var(--ink-2); max-width:56ch; }

.view{ min-height:60vh; }

/* =========================================================================
   LEGAL — long-form policy pages (privacy.html)

   A measure of about 70 characters, and headings that are clearly heavier
   than the paragraphs under them: a policy is only useful if someone can
   find the one clause they came for. Arabic is the source language here, so
   the rhythm is set for it and Latin text inherits the same scale.
   ========================================================================= */
.legal{
  max-width:74ch; padding-block:0 clamp(48px,7vw,96px);
  color:var(--ink-2); line-height:1.85;
}
.legal__stamp{ font-size:.8125rem; color:var(--ink-3); }
.legal__stamp b{ font-family:var(--latin); color:var(--ink-2); }
.legal h2{
  margin-block:clamp(30px,4vw,44px) 12px;
  font-size:clamp(1.0625rem,2.4vw,1.25rem); font-weight:700;
  letter-spacing:-.02em; color:var(--ink);
}
.legal h2:first-child{ margin-block-start:0; }
.legal h3{
  margin-block:22px 8px;
  font-size:.9375rem; font-weight:600; color:var(--ink);
}
.legal p{ margin-block:0 12px; }
.legal ul{ margin-block:0 12px; padding-inline-start:0; list-style:none; display:grid; gap:9px; }
.legal li{ position:relative; padding-inline-start:20px; }
/* A marker drawn rather than inherited: list-style bullets sit outside the
   content box and get clipped at the RTL edge on narrow screens. */
.legal li::before{
  content:""; position:absolute; inset-inline-start:4px; inset-block-start:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75;
}
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   NAV ADDITIONS — account + cart buttons
   ========================================================================= */
.iconbtn{
  position:relative; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-2); color:var(--ink-2);
  transition:color .3s, border-color .3s, background .3s;
}
.iconbtn:hover{ color:var(--accent); border-color:rgba(var(--accent-rgb),.6); background:var(--accent-dim); }
.iconbtn--cart.has-items{ color:var(--ink); border-color:rgba(var(--accent-rgb),.5); }
.iconbtn__count{
  position:absolute; inset-block-start:-5px; inset-inline-end:-5px;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--latin); font-size:.6875rem; font-weight:700; line-height:1;
}

/* =========================================================================
   TOOLBAR — search, sort, category chips
   ========================================================================= */
.toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  margin-bottom:18px;
}
.toolbar .field--search{ flex:1 1 280px; position:relative; }
.toolbar .field--sort{ flex:0 0 auto; min-width:200px; }
.field__icon{
  position:absolute; inset-inline-start:15px; inset-block-start:50%;
  transform:translateY(-50%); color:var(--ink-4); pointer-events:none;
}
.field--search input{ padding-inline-start:42px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chip{
  padding:9px 17px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent;
  font-size:.8125rem; font-weight:600; color:var(--ink-2);
  transition:color .3s, border-color .3s, background .3s;
}
.chip:hover{ color:var(--ink); border-color:var(--ink-4); }
.chip.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.resultline{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:20px;
}
html[lang="ar"] .resultline{ font-family:var(--arabic); font-size:.8125rem; letter-spacing:normal; text-transform:none; }

.empty{
  padding:56px 24px; text-align:center; color:var(--ink-3);
  border:1px dashed var(--line-2); border-radius:14px; max-width:52ch;
  margin-inline:auto; font-size:.9375rem;
}
.shopnote{ margin-top:clamp(34px,4vw,54px); padding-bottom:clamp(60px,8vw,110px); }

/* =========================================================================
   PRODUCT GRID
   ========================================================================= */
.grid{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));
}
.pcard{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line); border-radius:14px;
  background:var(--bg-1); overflow:hidden;
  transition:border-color .5s var(--e-out), transform .6s var(--e-out);
}
.pcard:hover{ border-color:rgba(var(--accent-rgb),.4); transform:translateY(-3px); }
.pcard.is-in-cart{ border-color:rgba(var(--accent-rgb),.45); }

/* Same light plate as the landing page: the catalogue is shot on white. */
.pcard__plate{
  position:relative;
  background:var(--plate); aspect-ratio:4/3; overflow:hidden;
}
/* See the note on .cat__plate img in styles.css — the absolute positioning is
   required, not cosmetic: it is the only way the artwork is guaranteed to fit
   inside a plate whose height comes from aspect-ratio. */
.pcard__plate img{
  position:absolute;
  inset-block-start:18px; inset-inline-start:18px;
  inline-size:calc(100% - 36px); block-size:calc(100% - 36px);
  object-fit:contain;
  mix-blend-mode:multiply; transition:transform .8s var(--e-out);
}
.pcard:hover .pcard__plate img{ transform:scale(1.045); }

.pcard__body{
  display:grid; gap:7px; align-content:start;
  padding:clamp(16px,1.8vw,22px);
}
.pcard__cat{ font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
html[lang="ar"] .pcard__cat{ font-family:var(--arabic); font-size:.75rem; letter-spacing:normal; text-transform:none; }
.pcard__name{ font-family:var(--latin); font-size:.9375rem; font-weight:600; letter-spacing:-.015em; line-height:1.35; }
.pcard__spec{ font-size:.8125rem; color:var(--ink-3); line-height:1.55; }
.pcard__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px; padding-top:14px; border-top:1px solid var(--line);
}
.pcard__price{ display:inline-flex; align-items:baseline; gap:7px; font-family:var(--latin); }
.pcard__price b{ font-size:1.06rem; font-weight:700; letter-spacing:-.02em; color:var(--accent); }
.pcard__price s{ font-size:.75rem; color:var(--ink-4); }
.pcard__price em{ font-style:normal; font-size:.6875rem; color:var(--ink-3); font-family:var(--sans); }
.pcard__buy{ flex:none; }

/* ---------- quantity stepper ---------- */
.step2{
  display:inline-grid; grid-auto-flow:column; align-items:center;
  border:1px solid var(--line-2); border-radius:999px; overflow:hidden;
}
.step2__btn{
  width:34px; height:34px; display:grid; place-items:center;
  font-size:1.05rem; line-height:1; color:var(--ink-2);
  transition:background .25s, color .25s;
}
.step2__btn:hover:not(:disabled){ background:var(--accent-dim); color:var(--accent); }
.step2__btn:disabled{ opacity:.3; cursor:not-allowed; }
.step2__n{
  min-width:34px; text-align:center;
  font-family:var(--latin); font-size:.875rem; font-weight:700;
}

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
.field{ display:grid; gap:7px; }
.field > label{ font-size:.8125rem; color:var(--ink-3); font-weight:500; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* date is in this list for the timesheet's day picker. The native control
   themes itself from :root { color-scheme } in styles.css, so its calendar
   popup and its icon follow the site's light/dark switch without a filter
   hack — but only if it is not otherwise overridden here. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="date"], select, textarea{
  width:100%; padding:13px 15px;
  font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px;
  transition:border-color .3s, background .3s, box-shadow .3s;
  -webkit-appearance:none; appearance:none;
}
textarea{ resize:vertical; min-height:82px; line-height:1.6; }
select{
  /* the caret has to be drawn by hand once appearance is stripped */
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                   linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-inline-end:42px;
}
[dir="rtl"] select{
  background-position:20px calc(50% + 1px), 15px calc(50% + 1px);
  padding-inline-end:15px; padding-inline-start:42px;
}
select option{ background:var(--bg-2); color:var(--ink); }

input::placeholder, textarea::placeholder{ color:var(--ink-4); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:rgba(var(--accent-rgb),.65);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.13);
}
input:disabled, textarea:disabled, select:disabled{ opacity:.55; cursor:not-allowed; }

.btn--wide{ width:100%; }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; box-shadow:none; }

/* ---------- checkboxes and radios ---------- */
.check{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:.875rem; color:var(--ink-2); line-height:1.55; cursor:pointer;
}
.check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; margin:2px 0 0; flex:none;
  border:1px solid var(--line-2); border-radius:5px; background:var(--bg-2);
  display:grid; place-content:center; cursor:pointer;
  transition:background .25s, border-color .25s;
}
.check input[type="checkbox"]::after{
  content:""; width:10px; height:6px;
  border-inline-start:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink);
  transform:rotate(-45deg) scale(0); transition:transform .22s var(--e-out);
}
.check input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
.check input[type="checkbox"]:checked::after{ transform:rotate(-45deg) scale(1); }
.check input[type="checkbox"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.consents{
  display:grid; gap:16px; margin-block:26px;
  padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--bg-1);
}

.pay{ border:0; padding:0; margin:26px 0 0; display:grid; gap:10px; }
.pay legend{ font-size:.8125rem; color:var(--ink-3); font-weight:500; padding:0; margin-bottom:4px; }
.pay__opt{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  padding:15px 17px; border:1px solid var(--line-2); border-radius:12px;
  background:var(--bg-1); cursor:pointer;
  transition:border-color .3s, background .3s;
}
.pay__opt:hover{ border-color:var(--ink-4); }
.pay__opt:has(input:checked){ border-color:rgba(var(--accent-rgb),.6); background:var(--accent-dim); }
.pay__opt input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; margin:2px 0 0; flex:none;
  border:1px solid var(--line-2); border-radius:50%; background:var(--bg-2);
  display:grid; place-content:center; cursor:pointer; transition:border-color .25s;
}
.pay__opt input[type="radio"]::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--accent);
  transform:scale(0); transition:transform .22s var(--e-out);
}
.pay__opt input[type="radio"]:checked{ border-color:var(--accent); }
.pay__opt input[type="radio"]:checked::after{ transform:scale(1); }
.pay__opt input[type="radio"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pay__opt b{ display:block; font-size:.9375rem; font-weight:600; }
.pay__opt em{ display:block; font-style:normal; font-size:.8125rem; color:var(--ink-3); margin-top:3px; line-height:1.5; }

.formerr{
  margin-block:18px 0; padding:13px 16px;
  border:1px solid rgba(224,86,86,.4); border-radius:10px;
  background:rgba(224,86,86,.08);
  color:#F0A8A8; font-size:.875rem; line-height:1.55;
}
.formok{
  margin-block:18px 0; padding:13px 16px;
  border:1px solid rgba(var(--accent-rgb),.4); border-radius:10px;
  background:var(--accent-dim); color:var(--ink-2); font-size:.875rem;
}
.fineprint{ margin-top:18px; font-size:.75rem; color:var(--ink-4); line-height:1.6; }

/* =========================================================================
   CART DRAWER
   ========================================================================= */
.scrim{
  position:fixed; inset:0; z-index:104;
  background:var(--scrim);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--e-out);
}
.scrim.is-on{ opacity:1; }

.cart{
  position:fixed; z-index:105;
  inset-block:0; inset-inline-end:0;
  width:min(430px, 100%);
  display:grid; grid-template-rows:auto 1fr auto;
  background:var(--bg-1);
  border-inline-start:1px solid var(--line-2);
  transform:translateX(100%);
  transition:transform .45s var(--e-out);
  will-change:transform;
}
[dir="rtl"] .cart{ transform:translateX(-100%); }
.cart.is-on{ transform:none; }

.cart__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; border-bottom:1px solid var(--line);
}
.cart__title{ font-size:1.06rem; font-weight:700; letter-spacing:-.02em; }
.cart__close{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--ink-2);
  transition:color .3s, border-color .3s;
}
.cart__close:hover{ color:var(--accent); border-color:rgba(var(--accent-rgb),.5); }

.cart__body{ overflow-y:auto; overscroll-behavior:contain; padding:6px 22px; }
.cart__empty{ display:grid; gap:8px; align-content:center; min-height:220px; text-align:center; }
.cart__emptytitle{ font-size:.9375rem; color:var(--ink-2); }
.cart__emptyhint{ font-size:.8125rem; color:var(--ink-4); }

.cline{
  display:grid; grid-template-columns:66px 1fr auto; gap:14px;
  padding-block:18px; border-bottom:1px solid var(--line);
}
.cline__plate{
  width:66px; height:66px; border-radius:9px; overflow:hidden;
  background:var(--plate); display:grid; place-items:center; padding:7px;
}
.cline__plate img{ width:auto; height:auto; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cline__meta{ display:grid; gap:7px; align-content:start; min-width:0; }
.cline__name{ font-family:var(--latin); font-size:.8125rem; font-weight:600; line-height:1.35; }
.cline__spec{ font-size:.75rem; color:var(--ink-4); }
.cline__end{ display:grid; gap:8px; justify-items:end; align-content:start; text-align:end; }
.cline__price{ font-family:var(--latin); font-size:.875rem; font-weight:700; color:var(--accent); white-space:nowrap; }
.cline__price em{ font-style:normal; font-size:.6875rem; color:var(--ink-3); font-family:var(--sans); font-weight:400; }
.cline__rm{ font-size:.75rem; color:var(--ink-4); transition:color .3s; padding:0; }
.cline__rm:hover{ color:#F0A8A8; }

.cart__foot{
  display:grid; gap:11px; padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--bg-2);
}
.cart__foot:empty{ display:none; }
.crow{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:.9375rem; }
.crow b{ font-family:var(--latin); color:var(--accent); font-size:1.06rem; }
.crow--muted{ font-size:.8125rem; color:var(--ink-4); }
.cart__foot .btn{ margin-top:6px; }

/* =========================================================================
   CHECKOUT
   ========================================================================= */
.checkout{ padding-block:clamp(28px,4vw,52px) clamp(60px,8vw,110px); }
.backlink{
  display:inline-flex; align-items:center; gap:9px; padding:0;
  font-size:.8125rem; color:var(--ink-3); margin-bottom:26px;
  transition:color .3s;
}
.backlink:hover{ color:var(--accent); }
.backlink i{ font-style:normal; transition:transform .4s var(--e-out); }
.backlink:hover i{ transform:translateX(-4px); }
[dir="ltr"] .backlink i{ transform:scaleX(-1); }
[dir="ltr"] .backlink:hover i{ transform:scaleX(-1) translateX(-4px); }

.checkout__grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,4.5vw,70px); align-items:start;
}
.checkout__form form{ display:grid; gap:16px; }
.checkout__summary{
  position:sticky; top:96px;
  display:grid; gap:16px;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line); border-radius:14px; background:var(--bg-2);
}
.sumtitle{ font-size:.9375rem; font-weight:700; letter-spacing:-.015em; }
.sline{
  display:grid; grid-template-columns:1fr auto auto; gap:8px 14px;
  padding-block:11px; border-bottom:1px solid var(--line);
  font-size:.8125rem; align-items:baseline;
}
.sline__name{ font-family:var(--latin); color:var(--ink-2); min-width:0; overflow-wrap:anywhere; }
.sline__qty{ color:var(--ink-4); font-family:var(--latin); }
.sline__price{ font-family:var(--latin); font-weight:700; color:var(--ink); white-space:nowrap; }
.sumtotals{ display:grid; gap:9px; }

/* =========================================================================
   ORDER CONFIRMED
   ========================================================================= */
.done{
  display:grid; gap:16px; justify-items:center; text-align:center;
  max-width:660px; margin-inline:auto;
  padding-block:clamp(60px,9vw,130px) clamp(70px,10vw,140px);
}
.done__mark{ color:var(--accent); margin-bottom:6px; }
.done__num{
  font-family:var(--mono); font-size:1.5rem; font-weight:700; letter-spacing:.06em;
  color:var(--accent); padding:11px 22px;
  border:1px dashed rgba(var(--accent-rgb),.45); border-radius:10px;
  background:var(--accent-dim);
}
.done__note{ color:var(--ink-2); max-width:48ch; }
.done__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }
.done__fine{ max-width:52ch; }

/* =========================================================================
   ACCOUNT — auth card
   ========================================================================= */
.auth{
  max-width:520px; margin-inline:auto;
  padding-block:clamp(44px,7vw,96px) clamp(70px,10vw,140px);
}
.auth__card{
  border:1px solid var(--line); border-radius:16px;
  background:var(--bg-1); overflow:hidden;
}
.auth__tabs{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.auth__tab{
  padding:17px 12px; font-size:.9375rem; font-weight:600; color:var(--ink-3);
  border-bottom:1px solid transparent; margin-bottom:-1px;
  transition:color .3s, border-color .3s, background .3s;
}
.auth__tab:hover{ color:var(--ink-2); background:rgba(var(--ink-rgb),.03); }
.auth__tab.is-on{ color:var(--ink); border-bottom-color:var(--accent); }
.auth__body{ padding:clamp(24px,3.2vw,36px); }
.auth__body form{ display:grid; gap:16px; }
.auth__intro{ font-size:.875rem; color:var(--ink-3); line-height:1.6; margin-bottom:4px; }
.auth__alt{ margin-top:20px; font-size:.8125rem; color:var(--ink-4); text-align:center; }
.auth__alt button{ color:var(--accent); font-weight:600; padding:0; }
.auth__alt button:hover{ text-decoration:underline; }

/* ---------- Continue with Google ----------
   The button itself is an iframe Google renders and owns; nothing in here
   styles it, and nothing may — a hand-built look-alike that collects Google
   credentials is a phishing pattern. This only positions it and draws the
   divider between it and the email form.

   The block starts hidden and account.js reveals it once Google's script has
   actually loaded, so a blocked script leaves no empty gap. */
.gauth{ display:grid; justify-items:center; gap:12px; margin-block:4px 20px; }
.gauth[hidden]{ display:none; }
.gauth__btn{ min-height:48px; display:flex; justify-content:center; align-items:center; width:100%; }

/* Safety net, and it earns its keep.

   Google renders this button into our DOM and normally sizes its own logo.
   When it cannot complete setup — an origin missing from the OAuth client's
   authorised list is the usual reason — it falls back to plain unstyled
   markup. Its logo is an <svg> carrying a viewBox and no width or height, so
   the global `img,svg,canvas{ display:block; max-width:100% }` reset in
   styles.css expanded it to fill the container: a 437px-tall Google "G"
   where a 40px button belongs.

   Capping rather than fixing the size means this never fights Google when
   things work — their 18-20px logo is already under the cap — and bounds the
   damage to a plain-looking button when they do not. A misconfiguration
   should look unremarkable, not broken. */
.gauth__btn svg{ display:inline-block; max-width:24px; max-height:24px; }
.gauth__btn > div{ display:flex; justify-content:center; width:100%; max-width:320px; }
.gauth__note{ font-size:.6875rem; color:var(--ink-4); line-height:1.55; text-align:center; max-width:36ch; }
.gauth__err{
  width:100%; padding:11px 14px;
  border:1px solid rgba(224,86,86,.4); border-radius:10px;
  background:rgba(224,86,86,.08); color:#F0A8A8; font-size:.8125rem; line-height:1.55;
}
.gauth__err[hidden]{ display:none; }
/* hairline with the label sitting in a gap in the middle of it */
.gauth__or{
  width:100%; display:flex; align-items:center; gap:12px;
  font-size:.75rem; color:var(--ink-4);
}
.gauth__or::before,
.gauth__or::after{ content:""; flex:1; height:1px; background:var(--line); }

.pwhint{ font-size:.75rem; color:var(--ink-4); margin-top:-2px; }

/* Staff hint: shown once the typed address is on the company domain, so an
   employee knows before submitting that this is the right door. */
.staffhint{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:10px;
  border:1px solid rgba(var(--accent-rgb),.35); background:var(--accent-dim);
  font-size:.8125rem; color:var(--ink-2);
}

/* =========================================================================
   ACCOUNT — dashboard
   ========================================================================= */
.dash{ padding-block:clamp(36px,5vw,64px) clamp(70px,9vw,120px); }
.dash__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:clamp(26px,3.4vw,42px);
}
.dash__hello{ display:grid; gap:8px; }
.dash__name{ font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.dash__email{ font-family:var(--latin); font-size:.8125rem; color:var(--ink-4); }
.dash__badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.4); background:var(--accent-dim);
  font-size:.6875rem; font-weight:700; color:var(--accent); letter-spacing:.04em;
  width:fit-content;
}

.tabs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin-bottom:clamp(24px,3vw,38px); }
.tab{
  position:relative; padding:12px 17px;
  font-size:.875rem; font-weight:600; color:var(--ink-3);
  transition:color .3s;
}
.tab::before{
  content:""; position:absolute; inset-inline:12px; inset-block-end:-1px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .4s var(--e-out);
}
.tab:hover{ color:var(--ink-2); }
.tab.is-on{ color:var(--ink); }
.tab.is-on::before{ transform:scaleX(1); }

.panel{ display:grid; gap:clamp(20px,2.6vw,32px); }

.card{
  border:1px solid var(--line); border-radius:14px;
  background:var(--bg-1); padding:clamp(20px,2.6vw,30px);
  display:grid; gap:16px; align-content:start;
}
.card__title{ font-size:1rem; font-weight:700; letter-spacing:-.02em; }
.card__note{ font-size:.8125rem; color:var(--ink-3); line-height:1.6; }
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,22px); align-items:start; }

/* ---------- orders list ---------- */
.orow{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px 18px; align-items:baseline;
  padding-block:16px; border-bottom:1px solid var(--line);
}
.orow:last-child{ border-bottom:0; }
.orow__id{ font-family:var(--mono); font-size:.8125rem; color:var(--accent); letter-spacing:.04em; }
.orow__meta{ font-size:.8125rem; color:var(--ink-4); }
.orow__total{ font-family:var(--latin); font-weight:700; font-size:.9375rem; white-space:nowrap; }
.orow__items{ grid-column:1 / -1; font-size:.75rem; color:var(--ink-3); line-height:1.6; }
.pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  border:1px solid var(--line-2); font-size:.6875rem; color:var(--ink-3);
}
.pill--new{ border-color:rgba(var(--accent-rgb),.45); color:var(--accent); }

/* =========================================================================
   ATTENDANCE
   ========================================================================= */
.clock{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3vw,40px);
  align-items:center;
}
.dial{ position:relative; width:clamp(132px,17vw,176px); aspect-ratio:1; flex:none; }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dial__track{ stroke:var(--line-2); }
.dial__fill{
  stroke:var(--accent);
  stroke-linecap:round;
  transition:stroke-dashoffset .8s var(--e-out);
}
.dial__fill.is-over{ stroke:#5BD1A0; }
.dial__mid{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:3px;
}
.dial__big{ font-family:var(--latin); font-size:1.45rem; font-weight:700; letter-spacing:-.02em; line-height:1; }
.dial__sub{ font-size:.6875rem; color:var(--ink-4); }

.clock__side{ display:grid; gap:14px; justify-items:start; align-content:center; }
.clock__state{ display:flex; align-items:center; gap:9px; font-size:.9375rem; color:var(--ink-2); }
.clock__state .dot{ animation:none; }
.clock__state.is-live .dot{ animation:pulse 2.6s var(--e-io) infinite; }
.clock__state.is-off .dot{ background:var(--ink-4); }
.clock__since{ font-size:.8125rem; color:var(--ink-4); }
.clock__since b{ font-family:var(--latin); color:var(--ink-2); font-weight:600; }
.btn--out{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--out:hover{ border-color:#F0A8A8; color:#F0A8A8; box-shadow:none; background:rgba(240,168,168,.06); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.stat{ background:var(--bg-1); padding:16px 18px; display:grid; gap:5px; }
.stat__k{ font-size:.6875rem; color:var(--ink-4); }
.stat__v{ font-family:var(--latin); font-size:1.25rem; font-weight:700; letter-spacing:-.025em; }
.stat__v.is-pos{ color:#5BD1A0; }
.stat__v.is-neg{ color:#F0A8A8; }

.tablewrap{ overflow-x:auto; }
table.att{ width:100%; border-collapse:collapse; min-width:520px; }
table.att th, table.att td{
  text-align:start; padding:12px 14px; font-size:.8125rem;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.att th{ color:var(--ink-4); font-weight:500; font-size:.75rem; }
table.att td{ color:var(--ink-2); }
table.att td.num{ font-family:var(--latin); }
table.att tr:last-child td{ border-bottom:0; }
table.att tr.is-today td{ background:rgba(var(--accent-rgb),.05); }
.tag{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.6875rem; border:1px solid var(--line-2); color:var(--ink-3);
}
.tag--complete{ border-color:rgba(91,209,160,.45); color:#5BD1A0; }
.tag--short{ border-color:rgba(240,168,168,.45); color:#F0A8A8; }
.tag--overtime{ border-color:rgba(var(--accent-rgb),.5); color:var(--accent); }
.tag--open{ border-color:rgba(var(--accent-rgb),.5); color:var(--accent); }
/* Absent had no tag of its own and fell back to the neutral border, which put
   the one row a manager most needs to see in the quietest style on the page. */
.tag--absent{ border-color:rgba(240,168,168,.35); color:#F0A8A8; opacity:.85; }
.att__note{ font-size:.6875rem; color:var(--ink-4); white-space:normal; }
table.att td b{ color:var(--ink); font-weight:600; }
table.att td.num.is-pos{ color:#5BD1A0; }
table.att td.num.is-neg{ color:#F0A8A8; }

/* =========================================================================
   PERFORMANCE — the orders-per-day bars

   Divs, not a charting library. Twelve to ninety bars with a tooltip is not
   worth 80KB of JavaScript on a page that already loads a payment SDK, and a
   bar whose height is a percentage needs no layout maths at all.
   ========================================================================= */
.spark{
  display:flex; align-items:flex-end; gap:3px;
  height:130px; margin-block:6px 14px;
  padding-block-start:14px;              /* room for the count above a full bar */
  overflow-x:auto; overscroll-behavior-x:contain;
}
.spark__bar{
  position:relative; flex:1 1 6px; min-width:6px;
  background:linear-gradient(to top, rgba(var(--accent-rgb),.85), rgba(var(--accent-rgb),.35));
  border-radius:3px 3px 0 0;
  transition:background .2s ease;
}
.spark__bar:hover{ background:var(--accent); }
/* The count sits above the bar, and only when there is room for it — below
   about 18px per bar the numbers collide into an unreadable smear. */
.spark__bar span{
  position:absolute; inset-block-end:100%; inset-inline:0;
  text-align:center; font-family:var(--latin); font-size:.625rem;
  color:var(--ink-4); line-height:1.4;
}
@media (max-width:720px){ .spark__bar span{ display:none; } }

/* =========================================================================
   TEAM — the administrator's timesheet controls
   ========================================================================= */
.teambar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  margin-block:4px 18px;
}
.teambar .field{ margin:0; min-width:150px; }
.teambar .btn{ flex:none; }

/* The one-line answer, above the table rather than inside it: a manager
   opening this tab wants "yes" or "look at these" before any numbers. */
.verdict{
  display:flex; align-items:center; gap:9px;
  margin-block:0 16px; padding:11px 15px; border-radius:12px;
  font-size:.875rem; color:var(--ink-2);
  background:var(--bg-1); border:1px solid var(--line-2);
}
.verdict::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--ink-4); flex:none;
}
.verdict.is-good{ border-color:rgba(91,209,160,.45); color:#5BD1A0; }
.verdict.is-good::before{ background:#5BD1A0; }
.verdict.is-bad{ border-color:rgba(240,168,168,.45); color:#F0A8A8; }
.verdict.is-bad::before{ background:#F0A8A8; }

/* =========================================================================
   CHECKOUT BAR

   Sits below the drawer and the scrim (104/105) so opening the cart covers
   it, and above the WhatsApp fab's own stacking. While it is up it publishes
   its own height as --cobar-h on <body>, and the two other things pinned to
   the bottom of the screen — the fab and the toast — offset by that instead
   of guessing a gap. Off, --cobar-h is 0 and they sit where they always did.
   ========================================================================= */
.cobar{
  position:fixed; z-index:96;
  inset-inline:0; inset-block-end:0;
  padding-inline:clamp(12px,3vw,24px);
  padding-block-end:calc(clamp(14px,2.4vw,22px) + env(safe-area-inset-bottom));
  pointer-events:none;
  opacity:0; transform:translateY(130%);
  transition:opacity .3s var(--e-out), transform .5s var(--e-out);
}
.cobar.is-on{ opacity:1; transform:none; }
.cobar.is-on .cobar__in{ pointer-events:auto; }
/* the burger overlay (z-index 99) paints over it; do not peek through */
.is-menu .cobar{ opacity:0; transform:translateY(130%); }

.cobar__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  inline-size:min(100%, 560px); margin-inline:auto;
  padding:11px 11px 11px 20px; border-radius:999px;
  background:var(--bg-3); border:1px solid var(--line-2);
  box-shadow:0 20px 46px -18px rgba(0,0,0,.65);
}
[dir="rtl"] .cobar__in{ padding:11px 20px 11px 11px; }

.cobar__meta{ display:grid; gap:2px; min-width:0; }
.cobar__count{ font-size:.8125rem; font-weight:600; color:var(--ink-2); }
.cobar__total{ font-family:var(--latin); font-size:1rem; font-weight:700; color:var(--accent); white-space:nowrap; }
.cobar__go{ flex:none; }

/* =========================================================================
   TOAST
   ========================================================================= */
.toast{
  position:fixed; z-index:130;
  /* physical `bottom`, not `inset-block-end`: a var() inside calc() on the
     logical property does not re-resolve when --cobar-h changes. Same value
     either way — the page is horizontal-tb in both languages. */
  bottom:calc(clamp(84px,11vw,100px) + var(--cobar-h, 0px));
  inset-inline-start:50%;
  transform:translate(-50%, 14px);
  max-width:min(92vw, 420px);
  padding:12px 20px; border-radius:999px;
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--ink);
  font-size:.875rem; text-align:center;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--e-out), transform .3s var(--e-out);
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }
.toast.is-good{ border-color:rgba(var(--accent-rgb),.5); }
.toast.is-bad{ border-color:rgba(224,86,86,.5); color:#F0A8A8; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .checkout__grid{ grid-template-columns:1fr; }
  /* The summary moves above the form on narrow screens: you should see what
     you are paying for before you start typing an address. */
  .checkout__summary{ position:static; order:-1; }
  .cards2{ grid-template-columns:1fr; }
  .clock{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .clock__side{ justify-items:center; }
}

@media (max-width:640px){
  .frow{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; }
  .pcard__body{ padding:14px; }
  .pcard__foot{ flex-direction:column; align-items:stretch; gap:10px; }
  .pcard__buy .btn, .pcard__buy .step2{ width:100%; }
  .step2{ display:grid; grid-template-columns:1fr auto 1fr; }
  .toolbar .field--sort{ min-width:0; flex:1 1 100%; }
  .cart{ width:100%; }
  .auth__body{ padding:22px 18px; }
  /* physical `bottom` for the same reason as the base rule, and it has to
     keep the --cobar-h term: this declaration wins over the one above it. */
  .toast{ bottom:calc(76px + var(--cobar-h, 0px)); }

  /* Matches the trimmed nav controls in styles.css — five of these plus the
     logo have to fit a 320px bar without pushing the burger off screen. */
  .iconbtn{ width:34px; height:34px; }
  .iconbtn__count{ inset-block-start:-4px; inset-inline-end:-4px; min-width:17px; height:17px; font-size:.625rem; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .cart, .scrim, .toast, .dial__fill{ transition:none !important; }
}