/* TheDairyFarm — shared theme tokens + common components (login, sheet, toast, demo bar).
   Each portal keeps its own layout CSS; reuse these tokens instead of new colours. */
:root{
  --milk:#FBF8F2; --ink:#2A2E22; --muted:#6B705C; --barn:#43572F; --barn-dark:#303F21;
  --butter:#E7B33E; --line:#E3DFD2; --card:#FFFFFF; --red:#A3401F;
  --ok-bg:#EAF1E3; --warn-bg:#F4EBD8; --warn-ink:#7A5D17; --bad-bg:#FBE4DC;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:"Segoe UI",Avenir,Helvetica,Arial,sans-serif;background:var(--milk);color:var(--ink);-webkit-text-size-adjust:100%;}
button,input,select{font:inherit;}
.hidden{display:none !important;}

/* ---------- buttons ---------- */
.b{border:none;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;background:var(--barn);color:var(--milk);font-size:.9rem;}
.b:disabled{opacity:.5;cursor:default;}
.b.ghost{background:none;color:var(--barn);border:1.5px solid var(--barn);}
.b.butter{background:var(--butter);color:var(--ink);}
.b.danger{background:none;color:var(--red);border:1.5px solid var(--red);}
.b.wide{width:100%;padding:14px;font-size:1rem;}
.b.sm{padding:7px 12px;font-size:.82rem;}
.linkbtn{background:none;border:none;color:var(--barn);text-decoration:underline;cursor:pointer;padding:0;font-size:.88rem;}

/* ---------- pills ---------- */
.pill{display:inline-block;font-size:.72rem;padding:3px 9px;border-radius:20px;background:var(--ok-bg);color:var(--barn-dark);font-weight:600;white-space:nowrap;}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink);}
.pill.bad{background:var(--bad-bg);color:var(--red);}
.pill.grey{background:#EEECE6;color:var(--muted);}

/* ---------- demo bar ---------- */
.demo-bar{background:var(--warn-bg);color:var(--warn-ink);font-size:.78rem;padding:7px 14px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;text-align:center;}
.demo-bar button{background:none;border:none;color:var(--warn-ink);text-decoration:underline;cursor:pointer;font-size:.78rem;padding:0;}

/* ---------- bottom sheet / dialog ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(32,36,26,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:var(--card);width:100%;max-width:480px;border-radius:16px 16px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto;}
.sheet h3{margin:0 0 4px;font-size:1.05rem;}
.sheet .sub{color:var(--muted);font-size:.85rem;margin:0 0 16px;line-height:1.4;}
.sheet .row{display:flex;gap:10px;margin-top:16px;}
.sheet .row .b{flex:1;padding:13px;}
@media (min-width:700px){.sheet-bg{align-items:center;}.sheet{border-radius:14px;}}
.stepper{display:flex;align-items:center;justify-content:center;gap:22px;margin:10px 0;}
.stepper button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--barn);background:#fff;color:var(--barn);font-size:1.4rem;cursor:pointer;line-height:1;}
.stepper .val{font-size:1.8rem;font-weight:700;min-width:3ch;text-align:center;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:8px 14px;cursor:pointer;font-size:.88rem;}
.chip.on{border-color:var(--barn);background:var(--ok-bg);color:var(--barn-dark);font-weight:600;}
.fld{display:block;margin-top:12px;}
.fld span{display:block;font-size:.8rem;font-weight:600;margin-bottom:5px;}
.fld input,.fld select{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-size:1rem;}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--barn);}
.err{color:var(--red);font-size:.84rem;margin-top:8px;min-height:1.1em;}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--milk);
       padding:11px 18px;border-radius:10px;font-size:.88rem;z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.2);max-width:calc(100% - 32px);text-align:center;}

/* ---------- staff login (delivery + admin) ---------- */
.tdf-login{min-height:100vh;display:flex;flex-direction:column;}
.tdf-login .top{background:var(--barn-dark);color:var(--milk);padding:44px 28px 32px;}
.tdf-login .brand{font-size:1.5rem;font-weight:700;}
.tdf-login .brand span{color:var(--butter);}
.tdf-login .top p{margin:8px 0 0;opacity:.85;font-size:.95rem;}
.tdf-login .body{padding:28px;max-width:440px;width:100%;margin:0 auto;}
.tdf-login .greet{font-size:1.15rem;font-weight:600;margin:0 0 6px;}
.tdf-login .hint{color:var(--muted);font-size:.9rem;margin:0 0 20px;line-height:1.45;}
.tdf-login label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;}
.tdf-login .field{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;}
.tdf-login .field:focus-within{border-color:var(--barn);}
.tdf-login .cc{padding:0 12px;color:var(--muted);border-right:1px solid var(--line);}
.tdf-login .field input{border:none;outline:none;padding:14px 12px;font-size:1.05rem;flex:1;min-width:0;background:transparent;}
.tdf-login .otp input{letter-spacing:.5em;text-align:center;font-size:1.4rem;}
.tdf-login .b.wide{margin-top:18px;}
.tdf-login .note{margin-top:24px;font-size:.8rem;background:var(--warn-bg);color:var(--warn-ink);padding:10px 12px;border-radius:8px;}

@media print{.no-print,.demo-bar,.toast{display:none !important;}}