/* Saydaliya Stock Lookup — styles
   Palette: clinical blue accent on blue-biased neutrals.
   Status colours (in/out of stock) are deliberately separate from the accent. */

:root{
  --ground:#f6f8fa;
  --surface:#ffffff;
  --surface-2:#eef3f7;
  --ink:#121a22;
  --ink-2:#5a6b78;
  --ink-3:#8496a3;
  --line:#dbe3ea;
  --accent:#14556e;
  --accent-ink:#ffffff;
  --accent-soft:#e3eef4;
  --ok:#157f4a;
  --ok-soft:#e4f4ea;
  --warn:#a4361f;
  --warn-soft:#fbeae6;
  --radius:10px;
  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d1318;
    --surface:#141c23;
    --surface-2:#1b242c;
    --ink:#e6edf2;
    --ink-2:#93a3af;
    --ink-3:#6d7f8c;
    --line:#24313b;
    --accent:#56b6d6;
    --accent-ink:#08161d;
    --accent-soft:#142c38;
    --ok:#4cc98a;
    --ok-soft:#102b1e;
    --warn:#ef8b72;
    --warn-soft:#2e1710;
  }
}

:root[data-theme="dark"]{
  --ground:#0d1318;
  --surface:#141c23;
  --surface-2:#1b242c;
  --ink:#e6edf2;
  --ink-2:#93a3af;
  --ink-3:#6d7f8c;
  --line:#24313b;
  --accent:#56b6d6;
  --accent-ink:#08161d;
  --accent-soft:#142c38;
  --ok:#4cc98a;
  --ok-soft:#102b1e;
  --warn:#ef8b72;
  --warn-soft:#2e1710;
}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none !important}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:840px;
  margin:0 auto;
  padding-inline:16px;
  padding-block:28px 56px;
}

/* ---------- header ---------- */
header{margin-bottom:22px}

.eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 8px;
}

h1{
  font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(28px,5.4vw,40px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 10px;
  text-wrap:balance;
}

.lede{margin:0;color:var(--ink-2);max-width:60ch}

.provenance{
  margin-top:16px;
  padding:10px 13px;
  border-inline-start:3px solid var(--line);
  background:var(--surface-2);
  border-radius:4px;
  font-size:12.5px;
  color:var(--ink-2);
}
.provenance strong{color:var(--ink);font-weight:600}

/* ---------- search ---------- */
.search-bar{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--ground);
  padding-block:14px;
  margin-block:20px 6px;
}

form{display:flex;gap:9px;flex-wrap:wrap}
.field{flex:1 1 240px;min-width:0}

label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:6px;
}

input[type="search"]{
  width:100%;
  padding:11px 13px;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  -webkit-appearance:none;
  appearance:none;
}
input[type="search"]::placeholder{color:var(--ink-3)}

input[type="search"]:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.btn-row{display:flex;align-items:flex-end}

button{
  padding:11px 20px;
  font:inherit;
  font-weight:600;
  font-size:15px;
  color:var(--accent-ink);
  background:var(--accent);
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  white-space:nowrap;
}
button:hover{filter:brightness(1.08)}
button[disabled]{opacity:.55;cursor:progress}

.examples{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:11px;
  font-size:12.5px;
  color:var(--ink-3);
}

.chip{
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  padding:3px 9px;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid transparent;
  border-radius:99px;
  cursor:pointer;
}
.chip:hover{border-color:var(--accent);filter:none}

/* ---------- status ---------- */
.status{
  margin:14px 0;
  font-size:13.5px;
  color:var(--ink-2);
  min-height:20px;
}
.status[data-kind="error"]{
  color:var(--warn);
  background:var(--warn-soft);
  padding:11px 13px;
  border-radius:var(--radius);
}

.count{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  margin-bottom:2px;
}
.count strong{
  font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  font-size:17px;
  font-weight:700;
}
.count span{font-size:12px;color:var(--ink-3)}

/* ---------- results ---------- */
ul{list-style:none;margin:0;padding:0}

li.row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:15px 15px 15px 12px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
li.row:first-child{border-radius:var(--radius) var(--radius) 0 0}
li.row:last-child{border-bottom:none;border-radius:0 0 var(--radius) var(--radius)}

.stripe{
  flex:0 0 3px;
  align-self:stretch;
  border-radius:2px;
  background:var(--ok);
}
.row.out .stripe{background:var(--warn)}

.main{flex:1 1 auto;min-width:0}

.name-en{
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  overflow-wrap:anywhere;
  margin-bottom:2px;
}

.name-ar{
  font-family:"IBM Plex Sans Arabic","Public Sans",sans-serif;
  font-size:14px;
  color:var(--ink-2);
  line-height:1.5;
  overflow-wrap:anywhere;
}

.meta{
  display:flex;
  gap:6px 14px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:12px;
  color:var(--ink-3);
}
.meta b{
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-size:10.5px;
  color:var(--ink-3);
}
.meta i{font-style:normal;color:var(--ink-2);font-weight:500}
.meta .id{font-variant-numeric:tabular-nums}

.side{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  text-align:right;
}

.price{
  font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  font-weight:700;
  font-size:18px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.price small{
  font-weight:500;
  font-size:11px;
  color:var(--ink-3);
  margin-left:2px;
}
.price.none{font-size:14px;font-weight:500;color:var(--ink-3)}

.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:99px;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  background:var(--ok-soft);
  color:var(--ok);
}
.row.out .pill{background:var(--warn-soft);color:var(--warn)}

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex:0 0 auto;
}

@media (max-width:540px){
  li.row{flex-wrap:wrap}
  .side{
    flex:1 1 100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    margin-top:4px;
    padding-top:11px;
    border-top:1px dashed var(--line);
  }
}

/* ---------- footer ---------- */
footer{
  margin-top:30px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--ink-3);
}
footer p{margin:0 0 7px}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;
  background:var(--surface-2);
  padding:1px 5px;
  border-radius:4px;
  color:var(--ink-2);
}

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

/* ---------- per-branch breakdown ---------- */
.branches{margin-top:10px}
.branches summary{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  cursor:pointer;
  width:fit-content;
}
.branches summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.branch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:4px 14px;
  margin-top:8px;
}

.branch{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  padding:3px 0;
  border-bottom:1px dotted var(--line);
}
.branch .bname{color:var(--ink-2);overflow-wrap:anywhere}
.branch .bqty{
  color:var(--ok);
  font-weight:600;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.branch.zero .bqty{color:var(--ink-3);font-weight:500}

.branch-note{
  font-size:11px;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ---------- branch scope selector ---------- */
.field.scope{flex:0 1 210px}

select#scope{
  width:100%;
  padding:11px 13px;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
select#scope:focus-visible{outline:2px solid var(--accent);outline-offset:2px}