/* Alzoubi Accounting — shared dark-clay system for the upload page and the dashboard.
   One committed dark look (gold on ink), matching the public site. */
:root{
  color-scheme: dark;
  --ink:#14171f; --ink-2:#181c26; --clay:#212531; --clay-2:#292e3c; --clay-3:#2f3545; --line:#323848;
  --text:#efe8d9; --muted:#9d988a; --gold:#d6a943; --gold-hi:#f6dc90; --gold-lo:#9c7524;
  --ok:#86cfa7; --info:#8fb3ea; --warn:#e9b866; --err:#ee8e80; --violet:#b9a3ea;
  --f-display:"Cinzel","Trajan Pro",Georgia,serif;
  --f-body:"Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --r-xl:30px; --r-lg:22px; --r-md:16px; --r-pill:999px;
  --sh-clay:14px 16px 32px rgba(0,0,0,.55),-8px -8px 22px rgba(255,255,255,.022),inset 4px 4px 10px rgba(255,255,255,.05),inset -6px -7px 14px rgba(0,0,0,.36);
  --sh-clay-sm:7px 8px 16px rgba(0,0,0,.5),-4px -4px 12px rgba(255,255,255,.02),inset 3px 3px 7px rgba(255,255,255,.055),inset -4px -5px 10px rgba(0,0,0,.34);
  --sh-well:inset 5px 5px 11px rgba(0,0,0,.45),inset -4px -4px 10px rgba(255,255,255,.032);
  --sh-gold:7px 9px 20px rgba(0,0,0,.55),inset 3px 4px 6px rgba(255,248,214,.55),inset -4px -6px 10px rgba(110,72,10,.55);
  --gold-grad:linear-gradient(160deg,var(--gold-hi) 0%,var(--gold) 50%,#b8862c 100%);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{background:radial-gradient(900px 600px at 90% -10%,rgba(214,169,67,.08),transparent 60%),var(--ink);color:var(--text);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:10px}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .disp{font-family:var(--f-body)!important;letter-spacing:0!important}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)}
.gold-text{background:linear-gradient(100deg,var(--gold-lo),var(--gold) 25%,var(--gold-hi) 45%,var(--gold) 60%,var(--gold-lo));background-size:220% 100%;background-position:60% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
[lang="ar"] .eyebrow{letter-spacing:0;font-size:.86rem}

.clay{background:var(--clay);border-radius:var(--r-xl);box-shadow:var(--sh-clay);position:relative}
.well{background:var(--clay-2);border-radius:var(--r-md);box-shadow:var(--sh-well)}

.btn{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;font:inherit;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:42px;padding:.7em 1.3em;border-radius:var(--r-pill);font-weight:600;font-size:.92rem;text-decoration:none;transition:transform .18s,box-shadow .18s,filter .18s,opacity .18s;white-space:nowrap;color:var(--text)}
.btn-gold{color:#2a1d05;background:var(--gold-grad);box-shadow:var(--sh-gold)}
.btn-clay{background:var(--clay);box-shadow:var(--sh-clay-sm)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--clay-2)}
.btn-sm{min-height:34px;padding:.45em .95em;font-size:.82rem}
.btn-icon{width:42px;height:42px;padding:0}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-clay:active{box-shadow:var(--sh-well)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
@media (hover:hover){.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn-clay:hover{transform:translateY(-1px)}}
[dir="rtl"] .flip{transform:scaleX(-1)}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label,.field .lbl{font-size:.82rem;color:var(--muted);font-weight:500}
.input,.field input,.field textarea,.field select{font:inherit;color:var(--text);background:var(--clay-2);border:0;border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--sh-well);width:100%;min-width:0;min-height:46px;transition:box-shadow .2s}
.field textarea{resize:vertical;min-height:90px}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:38px}
[dir="rtl"] .field select{background-position:15px 52%,20px 52%}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:#6a675e}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{outline:none;box-shadow:var(--sh-well),0 0 0 2px rgba(214,169,67,.55)}
.field.invalid input{box-shadow:var(--sh-well),0 0 0 2px rgba(238,142,128,.7)}
.err{font-size:.78rem;color:var(--err)}
.err:empty{display:none}

.seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;border-radius:18px;background:var(--clay-2);box-shadow:var(--sh-well)}
.seg.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.seg label{cursor:pointer;text-align:center;padding:10px 8px;border-radius:13px;color:var(--muted);font-size:.88rem;line-height:1.3;transition:.2s;display:flex;flex-direction:column;gap:2px;justify-content:center}
.seg label b{font-weight:600;color:inherit}
.seg input:checked + label{background:var(--clay);color:var(--text);box-shadow:var(--sh-clay-sm)}
.seg input:checked + label b{color:var(--gold-hi)}
.seg input:focus-visible + label{outline:2px solid var(--gold-hi);outline-offset:2px}

/* toggle switch */
.switch{position:relative;display:inline-flex;flex:none;width:52px;height:30px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.switch .tr{position:absolute;inset:0;border-radius:99px;background:var(--clay-2);box-shadow:var(--sh-well);transition:.25s}
.switch .th{position:absolute;top:4px;inset-inline-start:4px;width:22px;height:22px;border-radius:50%;background:#5d5a52;box-shadow:2px 3px 6px rgba(0,0,0,.5),inset 1px 1px 2px rgba(255,255,255,.25);transition:.25s}
.switch input:checked ~ .tr{background:linear-gradient(160deg,#4a3a17,#33290f)}
.switch input:checked ~ .th{inset-inline-start:26px;background:var(--gold-grad)}
.switch input:focus-visible ~ .tr{outline:2px solid var(--gold-hi);outline-offset:2px}
.switch input:disabled ~ *{opacity:.5;cursor:not-allowed}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:500;padding:.3em .8em;border-radius:var(--r-pill);background:var(--clay-2);box-shadow:var(--sh-well);white-space:nowrap;color:var(--muted)}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.c-new{color:var(--gold-hi)} .c-confirmed{color:var(--info)} .c-docs{color:var(--violet)} .c-preparing{color:var(--warn)} .c-filed{color:var(--ok)}
.c-paid{color:var(--ok)} .c-unpaid{color:var(--err)} .c-sample{color:var(--muted)} .c-received{color:var(--gold-hi)} .c-reviewed{color:var(--ok)}

.toast{position:fixed;z-index:90;left:50%;transform:translate(-50%,20px);bottom:calc(24px + env(safe-area-inset-bottom,0px));padding:12px 20px;border-radius:var(--r-pill);background:var(--clay-3);box-shadow:var(--sh-clay-sm);font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.brand img{width:40px;height:auto;filter:drop-shadow(2px 3px 4px rgba(0,0,0,.6))}
.brand-name{font-family:var(--f-display);font-weight:700;letter-spacing:.06em;line-height:1.05;font-size:.95rem;direction:ltr}
.brand-name small{display:block;font-family:var(--f-body);font-weight:500;font-size:.56rem;letter-spacing:.42em;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* phones zoom in on fields smaller than 16px; keep them at 16px on touch screens */
@media (pointer:coarse){.input,.field input,.field textarea,.field select{font-size:16px}}

/* ---------- copyright & ALBARDAN DIGITAL credit (fixed; not editable from the dashboard) ---------- */
.abd-foot{font-size:.82rem;line-height:1.5}
.abd-copy{position:relative;padding:16px 0;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;opacity:.75}
.abd-copy::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:currentColor;opacity:.16}
.abd-copy a{color:inherit;text-decoration:none}
.abd-copy a:hover{text-decoration:underline}
.abd-by{position:relative;padding:18px 16px;display:flex;align-items:center;justify-content:center;
  gap:11px;flex-wrap:wrap;font-size:.78rem}
.abd-by::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100%,260px);height:1px;background:currentColor;opacity:.16}
.abd-by>span{opacity:.55}
.abd{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;opacity:.85;
  padding:5px 10px;border-radius:12px;transition:opacity .22s,transform .22s}
.abd:hover,.abd:focus-visible{opacity:1;text-decoration:none;transform:translateY(-1px)}
.abd-mark{width:29px;height:26px;flex:none}
.abd-txt{display:block;font-weight:800;font-size:.86rem;line-height:1.05;letter-spacing:1.1px}
.abd-txt i{display:block;font-style:normal;font-weight:500;font-size:.62em;letter-spacing:3px;
  color:#2f8bf5;margin-top:2px}
@media (prefers-reduced-motion:reduce){.abd{transition:none}.abd:hover{transform:none}}
.abd-page-foot{color:var(--muted);padding:10px 0 calc(20px + env(safe-area-inset-bottom,0px))}

/* page heading with an illustration (upload, portal) */
.head.has-art{max-width:900px;display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:28px;align-items:center}
.head.has-art>*:not(.head-art){grid-column:1}
.head-art{grid-column:2;grid-row:1/span 4;aspect-ratio:3/2;width:100%}
@media (max-width:700px){.head.has-art{grid-template-columns:1fr}.head-art{grid-column:1;grid-row:auto;order:-1;max-width:300px;max-height:170px;margin-bottom:6px}}