/* BValet brand system — Bayan Al-Iraq
   Palette: navy #002e6e · blue #034ea2 · teal #5cc5bf · tint #c7d6ee */
:root{
  --navy:#002e6e; --blue:#034ea2; --teal:#5cc5bf; --tint:#c7d6ee;
  --navy-900:#00214f; --navy-800:#052a5e; --blue-700:#023d80; --teal-700:#2f9d97; --teal-800:#1f7a75;
  --ink:#0c1c33; --muted:#5c6f8a; --faint:#8496af;
  --line:#e2eaf5; --line-2:#d3deee;
  --bg:#eef3fa; --bg-2:#f6f9fd; --card:#ffffff;
  --amber:#e39a2e; --amber-ink:#7a4d06; --red:#d6453f; --green:#2c9e6a;
  --radius:16px; --radius-sm:11px; --radius-xs:8px;
  --shadow-sm:0 1px 2px rgba(3,40,90,.05);
  --shadow:0 1px 2px rgba(3,40,90,.05),0 8px 24px -12px rgba(3,40,90,.22);
  --shadow-lg:0 20px 60px -20px rgba(0,30,80,.4);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --num:"SF Mono",ui-monospace,"Segoe UI",Roboto,monospace;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0 0 .35em;line-height:1.18;color:var(--navy);letter-spacing:-.01em}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
:focus-visible{outline:3px solid rgba(3,78,162,.4);outline-offset:2px;border-radius:4px}

/* ---------- App header ---------- */
.appbar{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--navy) 0,var(--navy-800) 100%);color:#fff;
  padding:0 20px;height:60px;
  box-shadow:0 2px 10px rgba(0,30,80,.18);
  border-bottom:2px solid var(--teal);
  position:sticky;top:0;z-index:20;
}
.appbar .logo{height:30px;width:auto;display:block}
.appbar .wordmark{font-weight:800;font-size:20px;letter-spacing:.2px}
.appbar .wordmark b{color:var(--teal);font-weight:800}
.appbar .spacer{flex:1}
.appbar nav{display:flex;gap:4px}
.appbar nav a{color:#c6d6ee;font-weight:600;font-size:14px;padding:9px 13px;border-radius:9px;transition:background .15s,color .15s}
.appbar nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.appbar .who{font-size:13px;color:#9fb6da;font-weight:600}
.appbar form{display:inline}
.appbar .btn-out{background:rgba(255,255,255,.12);color:#fff;border:0;padding:8px 13px;border-radius:9px;font-weight:700;cursor:pointer;font-size:13px;transition:background .15s}
.appbar .btn-out:hover{background:rgba(255,255,255,.2)}

/* ---------- Layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:26px 20px 72px}
.grid{display:grid;gap:16px}
.section{margin-top:28px}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-800);margin-bottom:9px}

/* ---------- Buttons ---------- */
.btn{
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:15.5px;border-radius:var(--radius-sm);
  padding:13px 18px;background:var(--blue);color:#fff;letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(2,40,90,.18),0 6px 16px -8px rgba(3,78,162,.6);
  transition:transform .06s var(--ease),filter .15s,box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-lg{font-size:18px;padding:17px 22px;width:100%;border-radius:13px}
.btn-teal{background:var(--teal-800);box-shadow:0 1px 2px rgba(2,40,90,.18),0 6px 16px -8px rgba(47,157,151,.7)}
.btn-ghost{background:var(--tint);color:var(--navy);box-shadow:none}
.btn-ghost:hover{filter:brightness(.98)}
.btn-danger{background:var(--red)}
.btn-line{background:#fff;color:var(--blue);border:1.5px solid var(--line-2);box-shadow:var(--shadow-sm)}
.btn-line:hover{border-color:var(--blue);filter:none}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card h3{font-size:16px;margin-bottom:12px}

/* ---------- Forms ---------- */
label{display:block;font-weight:700;font-size:12.5px;color:var(--muted);margin:0 0 7px;letter-spacing:.01em}
input[type=text],input[type=password],input[type=tel],input[type=search],input[type=date],select{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  padding:13px 14px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);
  background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;
}
input::placeholder{color:var(--faint)}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3.5px rgba(3,78,162,.14)}
.field{margin-bottom:15px}

/* Tap-to-pick option buttons/swatches */
.optbar{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  border:1.5px solid var(--line-2);background:#fff;border-radius:999px;
  padding:10px 15px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;
  transition:border-color .12s,background .12s,color .12s,transform .06s;
}
.opt:hover{border-color:var(--blue)}
.opt:active{transform:translateY(1px)}
.opt.sel{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 14px -8px rgba(3,78,162,.8)}
.opt .dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px;border:1px solid rgba(0,0,0,.15)}

/* Status pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11.5px;padding:5px 11px;border-radius:999px;letter-spacing:.03em;text-transform:capitalize}
.pill-received{background:var(--tint);color:var(--navy)}
.pill-requested{background:#fbe6c8;color:#8a5a12}
.pill-ready{background:#cdf0e7;color:#166a56}
.pill-delivered{background:#e6ebf3;color:#556}
.pill-cancelled{background:#f6dede;color:#8a3030}

/* ---------- Toast ---------- */
.toast-host{position:fixed;left:0;right:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:9999;pointer-events:none}
.toast{background:var(--navy);color:#fff;padding:12px 18px;border-radius:11px;font-weight:600;box-shadow:var(--shadow-lg);max-width:90%;animation:toastin .28s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast.err{background:var(--red)}
.toast.ok{background:var(--green)}

/* ---------- Footer ---------- */
.powered{text-align:center;color:var(--muted);font-size:13px;padding:22px}
.powered a{color:var(--blue);font-weight:700}

/* ---------- Hub ---------- */
.hub-hero{background:radial-gradient(120% 140% at 100% 0,var(--blue) 0,var(--navy) 55%);color:#fff;border-radius:22px;padding:38px 34px;position:relative;overflow:hidden;box-shadow:0 24px 60px -28px rgba(0,30,80,.6)}
.hub-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--teal),transparent)}
.hub-hero .mark{position:absolute;right:-24px;bottom:-44px;height:230px;opacity:.12}
.hub-hero h1{color:#fff;font-size:38px;margin:0;letter-spacing:-.02em}
.hub-hero p{color:#d3e2f7;font-size:16px;max-width:540px;margin:.5em 0 0;line-height:1.55}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .12s var(--ease),border-color .12s,box-shadow .12s}
.tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 18px 40px -20px rgba(3,78,162,.45)}
.tile .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(180deg,var(--tint),#dde8f8);color:var(--navy);font-size:22px;margin-bottom:14px}
.tile h3{margin:0 0 5px;font-size:17px}
.tile p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* ---------- Login ---------- */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1000px 560px at 50% -8%,#0a459a 0,var(--navy) 58%)}
.login-card{width:100%;max-width:390px;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:32px}
.login-card .brandrow{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.login-card .brandrow img{height:36px}
.login-card .brandrow .wm{font-weight:800;font-size:23px;color:var(--navy)}
.login-card .brandrow .wm b{color:var(--teal-800)}

/* ---------- Table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
tbody tr:hover{background:var(--bg-2)}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:7px;border:1px solid rgba(0,0,0,.12)}

/* Tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;background:#e7eef8;padding:5px;border-radius:13px;width:fit-content}
.tab{padding:9px 16px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;border:0;background:transparent;color:var(--muted);transition:background .15s,color .15s}
.tab:hover{color:var(--navy)}
.tab.active{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}

@media (max-width:560px){
  .appbar{padding:0 14px;gap:10px}
  .appbar nav a span{display:none}
  .hub-hero{padding:30px 24px}
  .hub-hero h1{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------- Language toggle ---------- */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;
  padding:7px 12px;border-radius:9px;border:1.5px solid rgba(255,255,255,.25);color:#fff;
  background:rgba(255,255,255,.08);transition:background .15s}
.lang-toggle:hover{background:rgba(255,255,255,.18);color:#fff}
.login-card .lang-toggle,.g-head .lang-toggle{color:var(--blue);border-color:var(--line-2);background:#fff}
.login-card .lang-toggle:hover,.g-head .lang-toggle:hover{background:var(--bg-2);color:var(--blue)}

/* ---------- Toast with action (Undo) ---------- */
.toast-action{display:flex;align-items:center;gap:14px;pointer-events:auto}
.toast-btn{background:rgba(255,255,255,.22);color:#fff;border:0;font-weight:800;font-size:14px;
  padding:7px 14px;border-radius:8px;cursor:pointer;font-family:inherit}
.toast-btn:hover{background:rgba(255,255,255,.34)}

/* ---------- RTL adjustments ---------- */
[dir=rtl] .opt .dot{margin-right:0;margin-left:8px}
[dir=rtl] .swatch{margin-right:0;margin-left:7px}
[dir=rtl] .hub-hero .mark{right:auto;left:-24px}
[dir=rtl] .hub-hero::after{background:linear-gradient(270deg,var(--teal),transparent)}
[dir=rtl] .appbar,[dir=rtl] .r-head,[dir=rtl] .b-head{direction:rtl}
[dir=rtl] .permchip{margin:2px 0 2px 3px}
[dir=rtl] .tl time{margin-left:0;margin-right:auto}
[dir=rtl] .tl:not(:last-child) .dot::after{left:auto;right:6px}
[dir=rtl] .b-clock{text-align:left}
[dir=rtl] .b-stat + .b-stat{border-left:0;border-right:1px solid rgba(120,160,220,.18)}

/* Clickable brand logo → home */
.brand-link{display:inline-flex;align-items:center;gap:inherit;text-decoration:none;color:inherit;cursor:pointer}
.appbar .brand-link{gap:12px}
.g-head .brand-link{gap:9px}
.login-card .brand-link{gap:11px}
.brand-link:hover{opacity:.85}

/* Two-step confirm state for primary buttons (guest request, etc.) */
.btn.confirm{background:var(--amber);color:#3a2400;box-shadow:none}
.btn.confirm:hover{background:var(--amber)}
@keyframes confirmGlow{0%,100%{box-shadow:0 0 0 0 rgba(227,154,46,.55)}50%{box-shadow:0 0 0 7px rgba(227,154,46,0)}}
.btn.confirm{animation:confirmGlow 1.2s ease-out infinite}

/* Control-panel health grid */
.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.health-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;background:rgba(130,170,230,.08);border:1px solid var(--line,rgba(130,170,230,.2));border-radius:9px;font-size:13px}
.health-item span{color:var(--muted,#7688a8)}
.health-item b{font-variant-numeric:tabular-nums}