/* Biryani Mekkah — design tokens & base (shared by site, admin, POS) */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(../fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2")}

:root{
  --teal-950:#062a28; --teal-900:#0a3f3d; --teal:#0d504d; --teal-700:#15625e; --teal-100:#dce9e6; --teal-50:#eef5f3;
  --olive:#7f8b5e; --olive-100:#e7eadc;
  --orange:#de8b40; --orange-700:#b86a24; --orange-100:#fbe9d6;
  --cream:#f5f3ec; --sand:#dab681; --paper:#fffdf8;
  --ink:#1b2422; --ink-2:#4a5553; --ink-3:#5f6967;  /* v16: was #7a8482 (3.8:1 on paper) — now 5.6:1 */ --line:#e2e0d6; --line-2:#cfccbf;
  --ok:#2f7d4f; --ok-bg:#e3f2e8; --warn:#9a6700; --warn-bg:#fff4d6; --err:#b3261e; --err-bg:#fde7e5; --info-bg:#e7f0f7;
  --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(10,63,61,.06),0 8px 24px rgba(10,63,61,.08);
  --font:Poppins,"Plex Arabic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
[dir=rtl]{--font:"Plex Arabic",Poppins,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.55;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;color:var(--teal-900);letter-spacing:-.01em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0}
p{margin:0 0 1em}
.muted{color:var(--ink-3)} .small{font-size:.875rem} .num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.6em 1.2em;border-radius:999px;border:1.5px solid transparent;
  font:600 .95rem/1 var(--font);cursor:pointer;text-decoration:none;transition:background .15s,transform .05s;white-space:nowrap;background:var(--paper);color:var(--teal-900);border-color:var(--line-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)} .btn-primary:hover{background:var(--teal-900)}
.btn-accent{background:var(--orange);color:var(--teal-950);border-color:var(--orange)} .btn-accent:hover{background:#e89a55;color:var(--teal-950)}  /* v16: dark text on orange, 5.7:1 (white was 2.7:1) */
.btn-ghost{background:transparent;border-color:currentColor}
.btn-danger{background:var(--err);color:#fff;border-color:var(--err)}
.btn-sm{min-height:34px;padding:.4em .9em;font-size:.85rem} .btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Forms */
label{display:block;font-weight:500;font-size:.9rem;color:var(--ink-2)}
input,select,textarea{width:100%;margin-top:.3rem;font:400 1rem var(--font);color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);padding:.65rem .8rem;min-height:44px}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-100)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;margin:0 .4em 0 0}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin:0 0 1rem;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
legend{font-weight:600;color:var(--teal-900);padding:0 .4rem}
.span2{grid-column:1/-1} .hint{font-size:.8rem;color:var(--ink-3);margin:0}
.form-grid{display:block}
.alert{padding:.8rem 1rem;border-radius:var(--radius-sm);margin:0 0 1rem;font-size:.95rem}
.alert-error{background:var(--err-bg);color:var(--err)} .alert-success{background:var(--ok-bg);color:var(--ok)}
.alert-warn{background:var(--warn-bg);color:var(--warn)} .alert-info{background:var(--info-bg);color:var(--teal-900)}

/* Auth / installer */
.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(160deg,var(--teal-900),var(--teal) 60%,var(--olive))}
.auth-card{width:100%;max-width:420px;background:var(--paper);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.auth-card.wide{max-width:720px}
.auth-card h1{font-size:1.4rem;text-align:center}
.auth-logo{margin:0 auto 12px;width:150px}
@media (max-width:560px){fieldset{grid-template-columns:1fr}}

/* Password show/hide toggle */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-inline-end:48px}
.pw-eye{position:absolute;inset-inline-end:4px;top:calc(50% + .15rem);transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.pw-eye:hover{color:var(--teal);background:var(--teal-50)}
.pw-eye[aria-pressed="true"]{color:var(--teal)}
.stack{display:grid;gap:12px}
.center{text-align:center}
.pw-checks{list-style:none;margin:.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .8rem;font-size:.82rem;color:var(--ink-3)}
.pw-checks li::before{content:"○";display:inline-block;width:1.2em;color:var(--line-2)}
.pw-checks li.ok{color:var(--ok)}
.pw-checks li.ok::before{content:"✓";color:var(--ok);font-weight:700}
fieldset .pw-checks{grid-column:1/-1}
@media (max-width:560px){.pw-checks{grid-template-columns:1fr}}