/* ============================================================================
   Attendly — design system stylesheet (forked from TigrisCare static/style.css,
   retokenized per DESIGN_SPEC.md §1–§4, 2026-09-01).

   THEME POLARITY IS INVERTED vs TigrisCare: LIGHT is the DEFAULT.
   - Light tokens live on :root AND body.light (so a body that never gets a
     class still resolves light values through :root, and the standard theme
     toggle keeps working with the same .light class convention).
   - Dark is opt-in under body:not(.light) — the base template's pre-paint
     script adds .light unless localStorage 'attendly-theme' === 'dark'.
   - Base component rules are written in their LIGHT form; dark overrides sit
     under body:not(.light).

   The full --att-* secondary token family is defined on :root so ported
   attendance templates referencing them render correctly WITHOUT body.att-mod
   (the blue per-module skin concept is dead in Attendly — pink IS the theme;
   static/attendance.css is only a compatibility shim for hardcoded att-mod).
   ============================================================================ */

:root{
  /* brand */
  --brand:#EF4F6E; --brand-2:#CF2A4F; --brand-soft:rgba(239,79,110,.10); --on-brand:#ffffff;
  /* primary family (templates consume --primary heavily) */
  --primary:#EF4F6E; --primary-600:#CF2A4F;
  --accent:#EF4F6E; --accent-soft:#CF2A4F; --on-accent:#ffffff;
  /* surfaces + text */
  --bg:#FBF7F8; --surface:#FFFFFF; --surface-2:#F6EEF0;
  --text:#231A20; --muted:#8A737C; --border:#F0DDE2;
  /* status */
  --ok:#0F9D6A; --warn:#E08A00; --danger:#C81E45; --info:#2E7CD6;
  /* depth */
  --shadow-sm:0 1px 2px rgba(35,26,32,.05);
  --shadow:0 10px 30px rgba(207,42,79,.08);
  --shadow-lg:0 14px 38px rgba(207,42,79,.10);
  --radius:16px;
  /* legacy name kept — several ported templates reference var(--gold-glow);
     the value is the crimson glow now. */
  --gold-glow:0 0 20px rgba(239,79,110,.15);
  /* --att-* secondary family (ported attendance templates use these directly) */
  --att-s2:#FBEEF1;
  --att-accent:#E85D7C;
  --att-okbg:#EFFDF4;
  --att-warn:#B45309;
  --att-warnbg:#FFF8EC;
  --att-dangerbg:#FEF2F2;
  --att-shadow:rgba(207,42,79,.09);
  --att-violet:#8B5CF6;
  --att-rose:#F43F5E;

  /* Bottom tab bar (mobile): every tab wears the SAME chip; the current page
     differs by COLOUR only. Tokenised so the dark theme swaps cleanly. */
  --btab-chip:#FCEDF1; --btab-chip-bd:#ECCFD8; --btab-chip-ink:#6B535D;
  --btab-chip-hl:rgba(255,255,255,.75);
  --btab-on:#CF2A4F; --btab-on-bd:#B01F42;
}

/* Light restated on body.light so the toggle convention stays symmetric. */
body.light{
  --brand:#EF4F6E; --brand-2:#CF2A4F; --brand-soft:rgba(239,79,110,.10); --on-brand:#ffffff;
  --primary:#EF4F6E; --primary-600:#CF2A4F;
  --accent:#EF4F6E; --accent-soft:#CF2A4F; --on-accent:#ffffff;
  --bg:#FBF7F8; --surface:#FFFFFF; --surface-2:#F6EEF0;
  --text:#231A20; --muted:#8A737C; --border:#F0DDE2;
  --ok:#0F9D6A; --warn:#E08A00; --danger:#C81E45; --info:#2E7CD6;
  --shadow-sm:0 1px 2px rgba(35,26,32,.05);
  --shadow:0 10px 30px rgba(207,42,79,.08);
  --shadow-lg:0 14px 38px rgba(207,42,79,.10);
  --gold-glow:0 0 20px rgba(239,79,110,.15);
  --att-s2:#FBEEF1; --att-accent:#E85D7C; --att-okbg:#EFFDF4;
  --att-warn:#B45309; --att-warnbg:#FFF8EC; --att-dangerbg:#FEF2F2;
  --att-shadow:rgba(207,42,79,.09); --att-violet:#8B5CF6; --att-rose:#F43F5E;

  /* Bottom tab bar (mobile): every tab wears the SAME chip; the current page
     differs by COLOUR only. Tokenised so the dark theme swaps cleanly. */
  --btab-chip:#FCEDF1; --btab-chip-bd:#ECCFD8; --btab-chip-ink:#6B535D;
  --btab-chip-hl:rgba(255,255,255,.75);
  --btab-on:#CF2A4F; --btab-on-bd:#B01F42;
}

/* Dark — opt-in via the existing toggle. */
body:not(.light){
  --brand:#F26583; --brand-2:#EF4F6E; --brand-soft:rgba(242,101,131,.14); --on-brand:#ffffff;
  --primary:#F26583; --primary-600:#EF4F6E;
  --accent:#F26583; --accent-soft:#EF4F6E; --on-accent:#ffffff;
  --bg:#191016; --surface:#241922; --surface-2:#2E2029;
  --text:#F5EDF0; --muted:#B39AA4; --border:#3A2A33;
  --ok:#22C08A; --warn:#F0A32B; --danger:#F26583; --info:#5EA0EA;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 14px 38px rgba(0,0,0,.5);
  --gold-glow:0 0 20px rgba(242,101,131,.18);
  --att-s2:#2E2029; --att-accent:#F26583; --att-okbg:rgba(34,192,138,.13);
  --att-warn:#F0A32B; --att-warnbg:rgba(240,163,43,.13); --att-dangerbg:rgba(242,101,131,.13);
  --att-shadow:rgba(0,0,0,.5); --att-violet:#A78BFA; --att-rose:#FB7185;

  --btab-chip:#2E2029; --btab-chip-bd:#3F2E37; --btab-chip-ink:#B39AA4;
  --btab-chip-hl:rgba(255,255,255,.06);
  /* keep the DARKER brand tone for the active fill: the dark palette's #EF4F6E
     under white 10px/700 Arabic is 3.49:1 — under AA on the one control whose
     job is "you are here". #CF2A4F is 5.13:1; the lighter tone moves to the
     border, where 3:1 is enough. */
  --btab-on:#CF2A4F; --btab-on-bd:#EF4F6E;
}

/* Generic numeric cell — replaces the dozens of inline
   style="direction:ltr;text-align:left" duplicated across templates.
   Time/number cells get tabular figures (DESIGN_SPEC §2). */
.numeric, .num-cell{direction:ltr;text-align:left;font-variant-numeric:tabular-nums;font-family:Menlo,Consolas,monospace}
.tnum{font-variant-numeric:tabular-nums}

/* Universal disabled state — applies to all button variants that don't
   already have their own disabled rule. */
button[disabled],.btn[disabled],.btn:disabled{
  opacity:.55!important;cursor:not-allowed!important;
  filter:saturate(.5);
  box-shadow:none!important;
  transform:none!important;
}

/* Focus visibility for keyboard nav (DESIGN_SPEC §4) */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-dept:focus-visible,.btn-pay:focus-visible,.btn-print:focus-visible,
.tcbar-tab:focus-visible,.tcbar-userbtn:focus-visible,
.tcbar-icon-btn:focus-visible,.tcbar-dd-item:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* Theme toggle button */
.theme-toggle{
  position:fixed; top:14px; left:14px; z-index:9999;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:var(--shadow-sm);
  transition:all .2s ease;
}
.theme-toggle:hover{ transform:scale(1.1); box-shadow:var(--shadow); }

/* Inline variant — used after common.js relocates the button into nav-bar */
.theme-toggle.theme-toggle-inline{
  position:static; width:34px; height:34px;
  margin:0 2px; box-shadow:none; font-size:16px;
}
.theme-toggle.theme-toggle-inline:hover{
  transform:scale(1.08); background:rgba(239,79,110,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Kill page-level horizontal scroll (the sideways jitter on mobile). 'clip'
   (not 'hidden') does NOT create a scroll container, so the sticky topbar
   still works. Wide tables scroll inside their own .table-wrap box. */
html{overflow-x:clip}
/* Mobile (≤820px / coarse): hide scrollbars for a native-app feel; scrolling
   still works, desktop keeps its normal scrollbars. */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1240px){
  *{scrollbar-width:none;-ms-overflow-style:none}
  *::-webkit-scrollbar{display:none;width:0;height:0}
}
body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Cairo',"IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  min-height:100vh;
}

/* Attendly atmosphere (DESIGN_SPEC §3) — painted on a FIXED pseudo-element
   (never on the scrolling body; TigrisCare perf lesson 2026-07-27):
   1. The diamond-dot pattern from the website card: two offset 22px dot grids
      = a 45°-rotated diamond lattice (a rotated repeating gradient is not
      expressible directly; the half-cell offset yields the same geometry).
   2. Two soft radial blushes: rose top-right + amber bottom-left.
   NOTE: unlike TigrisCare there is NO body.att-mod::before{display:none} —
   attendance.css is a token shim only and paints no blobs of its own, so the
   pattern must stay visible under body.att-mod too. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 900px 700px at 100% 0%, rgba(239,79,110,.07), transparent 60%),
    radial-gradient(ellipse 820px 640px at 0% 100%, rgba(244,201,91,.06), transparent 60%),
    radial-gradient(rgba(207,42,79,.05) 1.2px, transparent 1.3px),
    radial-gradient(rgba(207,42,79,.05) 1.2px, transparent 1.3px);
  background-size:auto,auto,22px 22px,22px 22px;
  background-position:0 0,0 0,0 0,11px 11px;
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}
body:not(.light)::before{
  background-image:
    radial-gradient(ellipse 900px 700px at 100% 0%, rgba(242,101,131,.06), transparent 60%),
    radial-gradient(ellipse 820px 640px at 0% 100%, rgba(244,201,91,.035), transparent 60%),
    radial-gradient(rgba(242,101,131,.05) 1.2px, transparent 1.3px),
    radial-gradient(rgba(242,101,131,.05) 1.2px, transparent 1.3px);
  background-size:auto,auto,22px 22px,22px 22px;
  background-position:0 0,0 0,0 0,11px 11px;
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}

.container{max-width:1100px;margin:20px auto;padding:0 16px}

/* -------------------- */
/* Header */
/* -------------------- */
.header{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:0;
  z-index:100;
}
body:not(.light) .header{background:rgba(36,25,34,0.85)}
.header .wrap{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{display:flex;align-items:center;gap:14px}
.logoimg{
  width:52px;
  height:52px;
  border-radius:var(--radius);
  object-fit:contain;
  background:var(--surface);
  border:1px solid var(--border);
  padding:5px;
  box-shadow:var(--shadow-sm);
}
.brand .title{display:flex;flex-direction:column}
.brand .ar{font-weight:800;font-size:1.15rem;color:var(--text)}
/* letter-spacing only on the LATIN subtitle — never on Arabic (DESIGN_SPEC §2) */
.brand .en{font-size:.82rem;color:var(--muted);letter-spacing:0.02em}
.nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nav-spacer{flex:1}
.nav-hamburger{
  display:none;font-size:1.5rem;background:none;border:1px solid var(--border);
  color:var(--text);cursor:pointer;padding:4px 10px;border-radius:8px;
  transition:all .3s;
}
.nav-hamburger:hover{border-color:var(--primary);color:var(--primary)}
.nav-hamburger.open{background:rgba(239,79,110,0.1);border-color:var(--primary);color:var(--primary)}

/* -------------------- */
/* Cards & layout */
/* -------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
body:not(.light) .card{
  background:rgba(46,32,41,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.flash{
  background:rgba(239,79,110,0.10);border:1px solid rgba(239,79,110,0.28);color:var(--primary-600);
  margin:12px 0;padding:10px 14px;border-radius:10px;
  font-weight:600;font-size:.9rem;
}
body:not(.light) .flash{color:var(--primary)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

/* -------------------- */
/* Forms */
/* -------------------- */
.form-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:8px 0;
  flex-wrap:wrap;
  position:relative;
}
.form-row label{min-width:120px;color:var(--muted);font-weight:600;font-size:.9rem}

input,select,textarea{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  outline:none;
  font-family:inherit;
  font-size:.9rem;
  color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(239,79,110,.15)
}
input::placeholder{color:var(--muted)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text) !important;
  transition:background-color 5000s ease-in-out 0s;
}
body:not(.light) input,body:not(.light) select,body:not(.light) textarea{
  background:rgba(46,32,41,0.8);
}
body:not(.light) input:-webkit-autofill,body:not(.light) input:-webkit-autofill:hover,
body:not(.light) input:-webkit-autofill:focus,
body:not(.light) select:-webkit-autofill,body:not(.light) textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px rgba(36,25,34,0.95) inset !important;
  -webkit-text-fill-color:var(--text) !important;
}
select option{background:var(--surface);color:var(--text)}
textarea{width:100%;min-height:84px}

/* -------------------- */
/* Tables */
/* -------------------- */
/* Horizontal-scroll wrapper for wide tables — applies at ALL widths (scrollbar
   only shows when the table actually overflows). The topbar JS auto-wraps any
   unwrapped <table> in this, so no data table overflows the viewport. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:right}
.table thead th{background:var(--surface-2);color:var(--muted);font-weight:800;font-size:.85rem;position:sticky;top:0}
.table tbody tr:hover{background:rgba(239,79,110,0.04)}
.table tfoot td{font-weight:800;border-top:2px solid var(--border)}
/* time / money cells align in a fixed grid */
.table td.time,.table td.money{font-variant-numeric:tabular-nums}
body:not(.light) .table thead th{background:var(--surface-2);color:var(--muted)}
body:not(.light) .table tbody tr:hover{background:rgba(242,101,131,0.06)}

/* Category blocks */
.cat{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cat>h4{margin:0;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:1rem;font-weight:800;color:var(--text)}
.cat table{width:100%;border-collapse:collapse}
.cat td,.cat th{padding:8px 10px;border-bottom:1px dashed var(--border)}

.actions{display:flex;gap:8px;margin-top:12px}

/* -------------------- */
/* Badges / status pills */
/* -------------------- */
.status-ready{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(15,157,106,0.10);color:var(--ok);border:1px solid rgba(15,157,106,0.3);
  padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;
}
.status-notready{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(200,30,69,0.08);color:var(--danger);border:1px solid rgba(200,30,69,0.3);
  padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;
}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(239,79,110,0.10);color:var(--primary-600);border:1px solid rgba(239,79,110,0.25);
  padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;
}
body:not(.light) .badge{color:var(--primary)}

/* Status pills (DESIGN_SPEC §1/§4): soft tinted bg + colored dot + colored
   text. Never bare brand-crimson for danger — --danger is the deeper rose. */
.pill-ok,.pill-warn,.pill-danger,.pill-info{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 11px;border-radius:999px;font-size:.8rem;font-weight:700;
}
.pill-ok::before,.pill-warn::before,.pill-danger::before,.pill-info::before{
  content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;
}
.pill-ok{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok)}
.pill-warn{background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn)}
.pill-danger{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger)}
.pill-info{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--info)}

.kv{display:flex;gap:12px;flex-wrap:wrap}
.kv .item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px}

/* -------------------- */
/* Receipt */
/* -------------------- */
.receipt{max-width:720px;margin:0 auto;padding:22px 26px;border:1px dashed var(--border);border-radius:10px;background:var(--surface)}
.receipt-header{display:flex;align-items:center;gap:12px}
.receipt-header .clinic{display:flex;flex-direction:column;text-align:right}
.receipt-header .clinic .ar{font-size:1.25rem;font-weight:800;color:var(--text)}
.receipt-header .clinic .en{font-size:.9rem;color:var(--muted)}
.receipt-meta{display:flex;gap:22px;justify-content:flex-start;margin:12px 0 6px}
.receipt-meta div{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
#lists{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
#lists h4{margin:0 0 6px 0;font-size:1rem;font-weight:800;color:var(--text);border-bottom:1px dashed var(--border);padding-bottom:6px}
#lists ul{margin:0;padding-inline-start:18px}

/* -------------------- */
/* Copyright badge */
/* -------------------- */
.copyright-badge {
  position: fixed;
  bottom: 10px;
  left: 10px;
  font-size: 11px;
  color: var(--primary);
  opacity: 0.7;
  z-index: 999;
  font-weight: 600;
  letter-spacing: 0.01em; /* Latin-only text */
}

/* Utility */
.no-print{}

/* -------------------- */
/* Print styles */
/* -------------------- */
@media print{
  body{background:#fff;color:#000}
  /* the diamond-dot layer lives on body::before — keep print clean */
  body::before{display:none!important}
  .header, header, .actions, .flash, .no-print{display:none!important}
  form>.cat, form>.table{display:none!important}
  .print-only{display:block!important;box-shadow:none;border:none}
  .copyright-badge{display:none!important}
  .card{background:#fff;border-color:#ddd}
  .table thead th{background:#f0f0f0;color:#333;position:static}
}

/* -------------------- */
/* Buttons */
/* -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  border-radius:12px;
  border:1px solid rgba(35,26,32,.06);
  background:rgba(255,255,255,.75);
  color:var(--text);
  font-weight:700;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  box-shadow:0 1px 3px rgba(35,26,32,.04);
}
/* Shimmer sweep on hover */
.btn::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(35,26,32,.03), transparent);
  transition:left .5s ease;
}
.btn:hover::before{left:100%}
/* Soft inner glow line at top */
.btn::after{
  content:'';
  position:absolute;
  top:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(35,26,32,.04), transparent);
  opacity:0;
  transition:opacity .3s ease;
}
.btn:hover::after{opacity:1}
.btn:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(35,26,32,.1);
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(207,42,79,.08), 0 0 0 1px rgba(35,26,32,.02) inset;
}
.btn:active{
  transform:translateY(0) scale(0.97);
  box-shadow:0 2px 6px rgba(35,26,32,.1);
  transition-duration:.1s;
}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none;filter:grayscale(.3)}

body:not(.light) .btn{
  background:rgba(46,32,41,0.7);
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
}
body:not(.light) .btn::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
body:not(.light) .btn::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
body:not(.light) .btn:hover{
  background:rgba(58,42,51,0.85);
  border-color:rgba(255,255,255,.12);
  color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Primary — crimson gradient, white ink (DESIGN_SPEC §4) */
.btn.primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:var(--on-brand);
  border:none;
  font-weight:800;
  box-shadow:0 4px 16px rgba(239,79,110,.3), 0 0 0 1px rgba(255,255,255,.15) inset;
}
.btn.primary::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.btn.primary::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.btn.primary:hover{
  background:linear-gradient(135deg, #F26583, var(--brand));
  color:var(--on-brand);
  transform:translateY(-1px);
  box-shadow:
    0 8px 28px rgba(239,79,110,.4),
    0 0 40px rgba(239,79,110,.08),
    0 0 0 1px rgba(255,255,255,.2) inset;
}
.btn.primary:active{
  transform:translateY(0) scale(0.97);
  box-shadow:0 2px 10px rgba(239,79,110,.3);
}

/* Secondary — subtle muted */
.btn.secondary{
  background:var(--surface-2);
  border-color:rgba(35,26,32,.06);
  color:var(--muted);
}
.btn.secondary:hover{
  color:var(--text);
  background:var(--surface);
  border-color:rgba(35,26,32,.12);
}
body:not(.light) .btn.secondary{background:rgba(25,16,22,0.5);border-color:rgba(179,154,164,.12)}
body:not(.light) .btn.secondary:hover{background:rgba(46,32,41,0.7);border-color:rgba(179,154,164,.2)}

/* Danger — deep-rose glass (uses --danger, distinct from brand) */
.btn.danger{
  background:rgba(200,30,69,0.06);
  color:var(--danger);
  border-color:rgba(200,30,69,.18);
}
.btn.danger::after{
  background:linear-gradient(90deg, transparent, rgba(200,30,69,.15), transparent);
}
.btn.danger:hover{
  background:rgba(200,30,69,0.12);
  color:var(--danger);
  border-color:rgba(200,30,69,.3);
  box-shadow:0 6px 20px rgba(200,30,69,.12), 0 0 0 1px rgba(200,30,69,.1) inset;
}
.btn.danger:active{background:rgba(200,30,69,0.18)}

/* OK — green glass */
.btn.ok{
  background:rgba(15,157,106,0.06);
  color:var(--ok);
  border-color:rgba(15,157,106,.18);
}
.btn.ok::after{
  background:linear-gradient(90deg, transparent, rgba(15,157,106,.15), transparent);
}
.btn.ok:hover{
  background:rgba(15,157,106,0.12);
  color:var(--ok);
  border-color:rgba(15,157,106,.3);
  box-shadow:0 6px 20px rgba(15,157,106,.12), 0 0 0 1px rgba(15,157,106,.1) inset;
}
.btn.ok:active{background:rgba(15,157,106,0.18)}

/* Optional variants */
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-secondary{background:var(--surface-2);border-color:var(--border);color:var(--muted)}
.btn-danger{background:rgba(200,30,69,0.10);color:var(--danger);border-color:rgba(200,30,69,0.3)}
.btn-danger:hover{background:rgba(200,30,69,0.18);color:var(--danger)}

/* Status button */
.btn-status.unready{
  background:rgba(239,79,110,0.08);
  color:var(--primary-600);
  border-color:rgba(239,79,110,0.3);
}
.btn-status.unready:hover{
  background:rgba(239,79,110,0.15);
  color:var(--primary);
  border-color:rgba(239,79,110,0.45);
}
.btn-status.ready{
  background:rgba(15,157,106,0.08);
  color:var(--ok);
  border-color:rgba(15,157,106,0.3);
}
.btn-status.ready:hover{
  background:rgba(15,157,106,0.15);
  border-color:rgba(15,157,106,0.45);
}
/* Paid pill is a static <span> — don't let it look clickable */
.btn-status.ready{pointer-events:none}

/* Action cell buttons */
td.actions .btn{margin-inline-start:6px}

/* -------------------- */
/* Suggestions / autocomplete */
/* -------------------- */
.suggestions-box,
.suggestions{
  position:absolute;
  top:calc(100% + 2px);
  right:0;
  left:0;
  background:var(--surface);
  border:1px solid var(--border);
  max-height:260px;
  overflow-y:auto;
  z-index:1000;
  box-shadow:var(--shadow-lg);
  border-radius:10px;
  display:none;
}

.sug-item{
  padding:8px 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  transition:background-color 0.12s ease-in-out;
  border-top:1px solid var(--border);
}
.sug-item:first-child{border-top:none}
.sug-item:hover,.sug-item.active{background-color:rgba(239,79,110,0.08)}

.sug-name{font-weight:700;color:var(--text);font-size:13px}
.sug-meta{
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.sug-label{font-size:10px;color:var(--muted);margin-left:2px}

/* -------------------- */
/* Misc light/dark component states (ported from TigrisCare's audit fixes;
   light values are the base here, dark overrides follow) */
/* -------------------- */
.help-box{background:rgba(35,26,32,.04);color:var(--muted);border-radius:10px;padding:10px 12px}
.help-box b{color:var(--text)}
.help-box code{background:rgba(35,26,32,.06);color:var(--primary-600);border-radius:5px;padding:1px 5px}
.preview thead th{background:var(--surface-2);color:var(--muted)}
.preview tbody tr.invalid{background:rgba(200,30,69,.05)}
.summary-bar{background:rgba(35,26,32,.03)}
.bulk-bar{box-shadow:0 4px 14px rgba(35,26,32,.08)}
.row-status.ok{color:var(--ok)}
.row-status.bad{color:var(--danger)}
.err{color:var(--danger)}
.pill.ok{background:rgba(15,157,106,.1);color:var(--ok);border-color:rgba(15,157,106,.4)}
.pill.bad{background:rgba(200,30,69,.08);color:var(--danger);border-color:rgba(200,30,69,.4)}
.pill.muted{background:rgba(35,26,32,.05);color:var(--muted)}
.cell-input{background:var(--surface) !important;color:var(--text) !important;border-color:var(--border)}
.modal-backdrop{background:rgba(35,26,32,.5)}
.banner.ok{background:rgba(15,157,106,.08);border-color:rgba(15,157,106,.3);color:var(--ok)}
.banner.bad{background:rgba(200,30,69,.06);border-color:rgba(200,30,69,.3);color:var(--danger)}
body:not(.light) .help-box{background:rgba(255,255,255,.05)}
body:not(.light) .modal-backdrop{background:rgba(0,0,0,.6)}

/* iPhone-SE-ish (<400px): tighten the center hero so it fits */
@media(max-width:400px){
  .center-hero{padding:6px 0 4px;gap:8px}
  .center-hero .ch-logo,
  .center-hero .ch-logo-placeholder{width:36px;height:36px;border-radius:9px}
  .center-hero .ch-name{font-size:.92rem}
  .center-hero .ch-name-en{display:none}
}

/* -------------------- */
/* Responsive tweaks */
/* -------------------- */
@media (max-width:900px){
  .header .wrap{flex-direction:column;gap:10px}
  .nav{justify-content:center}
  .grid{grid-template-columns:1fr}
  .receipt-meta{flex-wrap:wrap}
  #lists{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .dept-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

@media (max-width:768px){
  .nav-hamburger{display:block}
  .nav{
    display:none;flex-direction:column;width:100%;gap:4px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:10px;margin-top:6px;box-shadow:var(--shadow-lg);
  }
  .nav.open{display:flex}
  .nav .btn{width:100%;text-align:center;justify-content:center}
  .nav-spacer{display:none}
  .header .wrap{flex-direction:row;flex-wrap:wrap}
  .brand{flex:1}
}

@media (max-width:600px){
  .container{padding:0 10px;margin:12px auto}
  .header .wrap{padding:10px 12px}
  .brand .ar{font-size:1rem}
  .brand .logoimg{width:40px;height:40px}
  .nav .btn{font-size:12px;padding:8px 12px}
  .card{padding:14px}
  .table th,.table td{padding:8px 8px;font-size:.82rem}
  .form-row{flex-direction:column;align-items:stretch}
  .form-row label{min-width:auto;margin-bottom:2px}
  input,select,textarea{font-size:.9rem;padding:10px 12px}
  .receipt{padding:14px 16px;max-width:100%}
  .receipt-header .clinic .ar{font-size:1.05rem}
  .stats-row{grid-template-columns:1fr 1fr;gap:8px}
  .kv{flex-direction:column}
  .actions{flex-wrap:wrap}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* -------------------- */
/* Confirmation Modal */
/* -------------------- */
.confirm-overlay { display:none; position:fixed; inset:0; background:rgba(35,26,32,0.55); backdrop-filter:blur(4px); z-index:10000; justify-content:center; align-items:center; }
.confirm-overlay.open { display:flex; }
.confirm-modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2rem; max-width:380px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(35,26,32,0.25); }
.confirm-modal .confirm-icon { font-size:2.5rem; margin-bottom:0.5rem; }
.confirm-modal h3 { font-size:1.1rem; font-weight:800; margin:0 0 8px; color:var(--text); }
.confirm-modal p { font-size:.9rem; color:var(--muted); margin:0 0 1.5rem; }
.confirm-actions { display:flex; gap:8px; justify-content:center; }
.btn-confirm-yes { background:var(--danger); color:#fff; border:none; padding:10px 24px; border-radius:10px; font-weight:800; font-size:.9rem; cursor:pointer; font-family:inherit; transition:background .2s; }
.btn-confirm-yes:hover { background:#A81939; }
.btn-confirm-no { background:var(--surface); color:var(--text); border:1px solid var(--border); padding:10px 24px; border-radius:10px; font-weight:700; font-size:.9rem; cursor:pointer; font-family:inherit; }

/* -------------------- */
/* Toast Notifications (legacy bottom-start variant) */
/* -------------------- */
.toast-container { position:fixed; bottom:20px; inset-inline-start:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 20px; border-radius:10px; background:var(--surface); border:1px solid var(--border); border-right:4px solid var(--primary); color:var(--text); font-size:.88rem; font-weight:600; box-shadow:0 4px 16px rgba(35,26,32,0.15); animation:toastIn .3s ease; min-width:250px; font-family:'Cairo',sans-serif; }
.toast.success { border-right-color:var(--ok); }
.toast.error { border-right-color:var(--danger); }
.toast.warning { border-right-color:var(--warn); }
.toast.fadeout { animation:toastOut .3s ease forwards; }
/* RTL app: toasts anchor at the inline-start (right) edge and slide in from it */
@keyframes toastIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }

/* -------------------- */
/* Loading spinner */
/* -------------------- */
.spinner { display:inline-block; width:20px; height:20px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* -------------------- */
/* Breadcrumbs */
/* -------------------- */
.breadcrumb-bar { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:.82rem; flex-wrap:wrap; }
.breadcrumb-bar a { color:var(--muted); text-decoration:none; transition:color .2s; }
.breadcrumb-bar a:hover { color:var(--primary); }
.bc-sep { color:var(--muted); opacity:0.3; }
.bc-current { font-weight:700; color:var(--text); }

/* -------------------- */
/* Toggle switches */
/* -------------------- */
/* All checkboxes render as pill toggles. "On" fills with --primary (Attendly
   crimson). RTL: off = knob at the right (start); on = track filled + knob
   slides to the left (end). !important on size beats per-page inline widths.
   Hidden (display:none) "picks" checkboxes keep display:none. */
input[type="checkbox"]{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  box-sizing:border-box;
  position:relative;
  flex:0 0 auto;
  width:42px !important; height:24px !important;
  min-width:42px; padding:0;
  margin:0 2px;
  border:none !important;
  border-radius:999px !important;
  /* light off-state: --border (#F0DDE2) is ~invisible on white — use a mid
     grey-rose track so unchecked toggles stay visible */
  background:#c4b2b9;
  box-shadow:inset 0 0 0 1px rgba(35,26,32,.10);
  vertical-align:middle;
  cursor:pointer;
  transition:background-color .2s ease;
}
input[type="checkbox"]::before{
  content:"";
  position:absolute;
  top:3px; right:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:right .2s ease;
}
body:not(.light) input[type="checkbox"]:not(:checked){
  background:var(--border);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
input[type="checkbox"]:checked{ background:var(--primary); box-shadow:none; }
input[type="checkbox"]:checked::before{ right:21px; }
input[type="checkbox"]:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
input[type="checkbox"]:disabled{ opacity:.5; cursor:not-allowed; }

/* -------------------- */
/* Flash toasts (top-center, auto-dismiss) */
/* -------------------- */
#flashToasts{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:14px;pointer-events:none}
.flash-toast{pointer-events:auto;min-width:230px;max-width:92vw;padding:13px 20px;border-radius:14px;font-weight:700;font-size:.94rem;color:#fff;background:var(--primary);box-shadow:0 12px 32px rgba(0,0,0,.20);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-130%);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.85,.25,1)}
.flash-toast.show{opacity:1;transform:translateY(0)}
.flash-toast.success{background:linear-gradient(180deg,#16a34a,#15803d)}
.flash-toast.error{background:linear-gradient(180deg,#dc2626,#b91c1c)}
.flash-toast.warn{background:linear-gradient(180deg,#f59e0b,#d97706)}
/* 'info' is a NEUTRAL notice, never a confirmation — several call sites flash a
   caution (e.g. the duplicate-employee-name warning) with this category, and it
   used to fall through to the green success style. Blue-grey + an ℹ icon
   (topbar.js), deliberately distinct from success / warn / error. */
.flash-toast.info{background:linear-gradient(180deg,#2E7CD6,#2563A8)}
.flash-toast .ft-ic{font-size:1.05rem;line-height:1}
/* (Attendly, step 0 review) a one-time password: sticky, selectable, copyable */
.flash-toast.cred{width:min(92vw,520px);background:linear-gradient(180deg,#334155,#1e293b);user-select:text;flex-wrap:wrap}
.flash-toast.cred .ft-txt{flex:1 1 200px;line-height:1.7}
.flash-toast .ft-btn{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:9px;padding:6px 11px;font:inherit;font-size:.82rem;cursor:pointer}

/* ============================================================================
   Attendance component family — ported verbatim (var-driven) from TigrisCare
   static/attendance.css so the ported attendance templates render without the
   att-mod class. They pick up the crimson theme automatically through tokens.
   ============================================================================ */
.att-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 4px 18px var(--att-shadow);overflow:hidden}
.att-pill{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap}
.att-pill.ok{background:var(--att-okbg);color:var(--ok)}
.att-pill.late{background:var(--att-warnbg);color:var(--att-warn)}
.att-pill.absent{background:var(--att-dangerbg);color:var(--danger)}
.att-pill.exc{background:var(--att-s2);color:var(--muted)}
.att-pill.night{background:color-mix(in srgb,var(--att-accent) 15%,transparent);color:var(--att-accent)}
.att-av{border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--att-accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}

/* launcher (home tiles) */
.att-hello{padding:18px 2px 4px}
.att-hello h1{margin:0;font-size:1.45rem;font-weight:800}
.att-hello .date{color:var(--muted);font-size:.9rem;margin-top:3px}
.att-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 8px}
@media(max-width:620px){.att-strip{grid-template-columns:repeat(2,1fr)}}
.att-stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:0 3px 12px var(--att-shadow);display:flex;align-items:center;gap:12px}
.att-stat .n{font-size:1.7rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.att-stat .l{color:var(--muted);font-size:.8rem}
.att-stat .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.att-stat.ok .ic{background:var(--att-okbg);color:var(--ok)} .att-stat.ok .n{color:var(--ok)}
.att-stat.warn .ic{background:var(--att-warnbg);color:var(--att-warn)} .att-stat.warn .n{color:var(--att-warn)}
.att-stat.bad .ic{background:var(--att-dangerbg);color:var(--danger)} .att-stat.bad .n{color:var(--danger)}
.att-stat.exc .ic{background:var(--att-s2);color:var(--muted)} .att-stat.exc .n{color:var(--text)}
.att-sec-t{font-size:.78rem;font-weight:700;color:var(--muted);margin:24px 2px 12px}
.att-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.att-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.att-tiles{grid-template-columns:repeat(2,1fr)}}
.att-tile{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 14px;text-align:center;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:0 3px 14px var(--att-shadow);position:relative;text-decoration:none;color:var(--text);display:block}
.att-tile:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 10px 24px var(--att-shadow)}
.att-tile .ic{width:56px;height:56px;border-radius:16px;margin:0 auto 11px;display:flex;align-items:center;justify-content:center;font-size:1.65rem}
.att-tile .nm{font-weight:700;font-size:.95rem}
.att-tile .ds{color:var(--muted);font-size:.75rem;margin-top:3px}
.att-tile .badge{position:absolute;top:11px;left:11px;background:var(--att-warn);color:#fff;font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;border:none}
.ic.g-blue{background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary)}
.ic.g-cyan{background:color-mix(in srgb,var(--att-accent) 14%,transparent);color:var(--att-accent)}
.ic.g-green{background:var(--att-okbg);color:var(--ok)}
.ic.g-amber{background:var(--att-warnbg);color:var(--att-warn)}
.ic.g-violet{background:color-mix(in srgb,var(--att-violet) 16%,transparent);color:var(--att-violet)}
.ic.g-rose{background:color-mix(in srgb,var(--att-rose) 14%,transparent);color:var(--att-rose)}

/* daily roster */
.att-subbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.att-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:8px 13px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.85rem;color:var(--text);text-decoration:none}
.att-back:hover{border-color:var(--primary);color:var(--primary)}
.att-subbar h2{margin:0;font-size:1.2rem;font-weight:800}
.att-datenav{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:3px}
.att-datenav a{width:30px;height:30px;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;text-decoration:none}
.att-datenav a:hover{background:var(--att-s2);color:var(--primary)}
.att-datenav .d{font-weight:700;font-size:.84rem;padding:0 8px;font-variant-numeric:tabular-nums}
.att-summary{display:flex;gap:8px;flex-wrap:wrap;margin-right:auto}
.att-chip{display:inline-flex;align-items:center;gap:6px;font-size:.79rem;font-weight:700;padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.att-chip i{width:9px;height:9px;border-radius:50%}
.att-chip.ok i{background:var(--ok)} .att-chip.warn i{background:var(--att-warn)} .att-chip.bad i{background:var(--danger)} .att-chip.exc i{background:var(--muted)}
.att-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.att-search{flex:1;min-width:170px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:0 12px}
.att-search input{flex:1;border:none;background:transparent;color:var(--text);font-family:inherit;font-size:.87rem;padding:10px 0;outline:none;box-shadow:none}
.att-search input:focus{box-shadow:none;border:none}
.att-search svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2}
.att-sel{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:0 12px;color:var(--text);font-family:inherit;font-size:.84rem;font-weight:600;min-width:130px}
.att-table{width:100%;border-collapse:collapse;font-size:.87rem}
.att-table th{text-align:right;color:var(--muted);font-weight:700;font-size:.73rem;padding:11px 15px;border-bottom:1px solid var(--border);background:var(--att-s2)}
.att-table td{padding:12px 15px;border-bottom:1px solid var(--border)}
.att-table tr:last-child td{border-bottom:none}
.att-table tbody tr:hover{background:var(--att-s2)}
.att-who{display:flex;align-items:center;gap:10px;font-weight:600}
.att-who .att-av{width:33px;height:33px;font-size:.8rem}
/* HH:MM columns: Cairo with tabular figures so times align in a fixed grid */
.att-t{font-family:inherit;font-variant-numeric:tabular-nums;font-weight:700}
.att-t.late{color:var(--att-warn)} .att-t.dim{color:var(--muted);font-weight:400}
.att-empty{text-align:center;padding:38px 20px;color:var(--muted)}
.att-table{min-width:560px}
@media(max-width:640px){
  .att-toolbar{flex-direction:column;align-items:stretch}
  .att-search,.att-sel{width:100%;min-width:0}
  .att-strip{grid-template-columns:repeat(2,1fr)}
  .att-subbar{gap:8px}
  .att-summary{margin-right:0;width:100%}
  .att-datenav{flex:1;justify-content:center}
}
/* touch targets ≥42px on coarse pointers */
@media (max-width:820px), (pointer:coarse) and (max-width:1240px){
  .att-datenav a{width:42px;height:42px;flex-shrink:0}
  .att-back{min-height:42px}
  .att-search input{min-height:42px}
  .att-sel{min-height:42px}
}

/* staff check-in (flow unchanged, restyled) — no longer gated on .att-mod */
.checkin-card{max-width:440px}
.status-box{border-radius:16px}
.status-box.checked-in{background:var(--att-okbg) !important;border:1px solid transparent !important}
.status-box.checked-in p{color:var(--ok) !important}
.time-display{color:var(--primary);font-variant-numeric:tabular-nums}
.big-btn{border-radius:16px;padding:16px;font-size:1.15rem;box-shadow:0 8px 20px var(--att-shadow)}
.big-btn.checkin{background:linear-gradient(180deg,#22c55e,#16a34a) !important;color:#fff}
.big-btn.checkout{background:linear-gradient(180deg,#f87171,#dc2626) !important;color:#fff}
.big-btn:hover{filter:brightness(1.04)}
.camera-preview{border-radius:14px}

/* ============================================================================
   Motion (DESIGN_SPEC §7): one orchestrated moment — dashboard tiles
   stagger-fade on load, opacity only. Everything else uses the short hover
   transitions above. prefers-reduced-motion kills all.
   ============================================================================ */
@keyframes att-fade-in{from{opacity:0}to{opacity:1}}
.stagger-fade > *{animation:att-fade-in .3s ease both}
.stagger-fade > *:nth-child(1){animation-delay:0ms}
.stagger-fade > *:nth-child(2){animation-delay:60ms}
.stagger-fade > *:nth-child(3){animation-delay:120ms}
.stagger-fade > *:nth-child(4){animation-delay:180ms}
.stagger-fade > *:nth-child(5){animation-delay:240ms}
.stagger-fade > *:nth-child(6){animation-delay:300ms}
.stagger-fade > *:nth-child(7){animation-delay:360ms}
.stagger-fade > *:nth-child(8){animation-delay:420ms}
.stagger-fade > *:nth-child(n+9){animation-delay:480ms}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}