/* =========================================================
   SwadSathi — product UI recreations
   Live HTML/CSS renderings of the real application screens,
   so the tour stays sharp at any size and needs no image files.
   Screen labels and figures mirror the shipped product.
   ========================================================= */

.ui{
  --ui-bg:      #f7f8fa;
  --ui-panel:   #ffffff;
  --ui-line:    #e6e8ec;
  --ui-ink:     #1a1d23;
  --ui-ink-2:   #5a616e;
  --ui-ink-3:   #8b93a1;
  --ui-brand:   #d94f2b;
  --ui-blue:    #2d6cdf;
  --ui-green:   #12805c;
  --ui-amber:   #d98315;
  --ui-red:     #d33a3a;
  --ui-side:    #191d26;

  font-size:10px;                 /* everything below scales off this */
  line-height:1.35;
  color:var(--ui-ink);
  background:var(--ui-bg);
  border-radius:10px;
  overflow:hidden;
  user-select:none;
  container-type:inline-size;
}
@media (min-width:700px){ .ui{ font-size:11px } }
@media (min-width:1000px){ .ui{ font-size:11.6px } }

.ui *{ box-sizing:border-box }
.ui b{ font-weight:700 }

/* ---------- desktop shell ---------- */
.ui-app{ display:grid; grid-template-columns:15em 1fr; min-height:34em }
@container (max-width: 560px){ .ui-app{ grid-template-columns:4.2em 1fr } }

.ui-side{ background:var(--ui-side); color:rgba(255,255,255,.62); padding:1.1em .8em; overflow:hidden }
.ui-side__brand{
  display:flex; align-items:center; gap:.7em;
  color:#fff; font-weight:800; font-size:1.25em; letter-spacing:-.02em;
  padding:0 .4em 1em;
}
.ui-side__brand i{
  width:1.9em; height:1.9em; border-radius:.5em; flex:none;
  background:linear-gradient(135deg,var(--ui-brand),#e8a33d);
  display:grid; place-items:center; color:#fff; font-size:.8em; font-style:normal; font-weight:800;
}
.ui-side__group{ font-size:.82em; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.3); padding:.9em .6em .4em }
.ui-side a{ display:flex; align-items:center; gap:.7em; padding:.55em .6em;
  border-radius:.5em; font-size:1.02em }
.ui-side a i{ width:1.1em; height:1.1em; border-radius:.25em; background:rgba(255,255,255,.22); flex:none }
.ui-side a.on{ background:rgba(255,255,255,.1); color:#fff; font-weight:600 }
.ui-side a.on i{ background:var(--ui-brand) }
@container (max-width: 560px){
  .ui-side__brand span,.ui-side a span,.ui-side__group{ display:none }
  .ui-side a{ justify-content:center }
}

.ui-main{ padding:1.1em 1.3em 1.4em; overflow:hidden }
.ui-top{ display:flex; align-items:center; gap:.8em; padding-bottom:1em }
/* The mock screens use .ui-h1 / .ui-h2 rather than real heading tags: they are
   decorative UI labels, and real <h1>/<h2> here would pollute the page outline. */
.ui-top .ui-h1{ font-size:1.45em; font-weight:700; letter-spacing:-.02em; margin:0 }
.ui-top .sp{ margin-left:auto }
.ui-chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.3em .7em; border-radius:99px; font-size:.9em; font-weight:600;
  background:#eef1f5; color:var(--ui-ink-2);
}
.ui-chip--live{ background:#e6f4ef; color:var(--ui-green) }
.ui-chip--live::before{ content:''; width:.5em; height:.5em; border-radius:50%;
  background:var(--ui-green); animation:ui-blink 1.6s infinite }
@keyframes ui-blink{ 50%{ opacity:.25 } }
.ui-btn{ padding:.45em .9em; border-radius:.5em; font-size:.95em; font-weight:600;
  background:var(--ui-panel); border:1px solid var(--ui-line); color:var(--ui-ink-2) }
.ui-btn--p{ background:var(--ui-brand); border-color:var(--ui-brand); color:#fff }

/* ---------- KPI cards ---------- */
.ui-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5em,1fr)); gap:.75em }
.ui-kpi{ background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:.7em; padding:.85em .9em }
.ui-kpi span{ display:block; font-size:.82em; letter-spacing:.08em; text-transform:uppercase; color:var(--ui-ink-3) }
.ui-kpi b{ display:block; font-size:1.75em; letter-spacing:-.03em; margin:.15em 0 .1em }
.ui-kpi small{ font-size:.85em; color:var(--ui-ink-3) }
.ui-kpi--accent b{ color:var(--ui-brand) }

/* ---------- generic panel ---------- */
.ui-cols{ display:grid; gap:.75em; margin-top:.75em; grid-template-columns:1.5fr 1fr }
@container (max-width: 620px){ .ui-cols{ grid-template-columns:1fr } }
.ui-panel{ background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:.7em; overflow:hidden }
.ui-panel__h{ display:flex; align-items:center; gap:.6em; padding:.75em .9em; border-bottom:1px solid var(--ui-line) }
.ui-panel__h .ui-h2{ font-size:1.05em; font-weight:700; margin:0 }
.ui-panel__h .sp{ margin-left:auto; font-size:.9em; color:var(--ui-blue); font-weight:600 }
.ui-panel__b{ padding:.8em .9em }

/* rows / table */
.ui-row{ display:flex; align-items:center; gap:.7em; padding:.55em 0; border-bottom:1px solid #f1f3f6; font-size:.98em }
.ui-row:last-child{ border-bottom:none }
.ui-row .id{ font-variant-numeric:tabular-nums; color:var(--ui-ink-2); font-size:.92em }
.ui-row .t{ font-weight:700; background:#eef1f5; border-radius:.35em; padding:.1em .45em; font-size:.9em }
.ui-row .amt{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums }
.ui-tag{ padding:.15em .5em; border-radius:.35em; font-size:.85em; font-weight:600 }
.ui-tag--k{ background:#fff3e2; color:var(--ui-amber) }
.ui-tag--r{ background:#e6f4ef; color:var(--ui-green) }
.ui-tag--n{ background:#fdecec; color:var(--ui-red) }
.ui-tag--b{ background:#e8effc; color:var(--ui-blue) }

/* queue meters */
.ui-meter{ display:flex; align-items:center; gap:.7em; padding:.45em 0; font-size:.98em }
.ui-meter i{ width:.6em; height:.6em; border-radius:50%; flex:none }
.ui-meter .bar{ flex:1; height:.45em; border-radius:99px; background:#eef1f5; overflow:hidden }
.ui-meter .bar em{ display:block; height:100%; border-radius:99px }
.ui-meter b{ font-variant-numeric:tabular-nums; min-width:1.4em; text-align:right }

/* ---------- floor plan ---------- */
.ui-floor{ display:grid; grid-template-columns:repeat(auto-fill,minmax(6.2em,1fr)); gap:.6em }
.ui-table{
  border:1px solid var(--ui-line); border-radius:.6em; background:var(--ui-panel);
  padding:.7em .6em; text-align:center; position:relative; overflow:hidden;
}
.ui-table b{ display:block; font-size:1.25em; letter-spacing:-.02em }
.ui-table span{ display:block; font-size:.82em; color:var(--ui-ink-3); margin-top:.1em }
.ui-table em{ display:block; font-style:normal; font-size:.95em; font-weight:700; margin-top:.3em }
.ui-table::before{ content:''; position:absolute; inset:0 auto 0 0; width:.25em; background:#dfe3e9 }
.ui-table--free::before{ background:#c9d0da }
.ui-table--run{ background:#fffaf3 } .ui-table--run::before{ background:var(--ui-amber) }
.ui-table--ready{ background:#f2fbf7 } .ui-table--ready::before{ background:var(--ui-green) }
.ui-table--clear{ background:#fdf3f3 } .ui-table--clear::before{ background:var(--ui-red) }

/* ---------- kitchen tickets ---------- */
.ui-kds{ background:#12151c; padding:1em; min-height:30em }
.ui-kds .ui-top .ui-h1{ color:#fff }
.ui-kds .ui-chip{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.8) }
.ui-kot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(11em,1fr)); gap:.7em }
.ui-kot{ background:#1d222c; border:1px solid #2b323f; border-top:.28em solid var(--ui-amber);
  border-radius:.6em; padding:.7em .75em; color:#e8eaef }
.ui-kot--new{ border-top-color:var(--ui-blue) }
.ui-kot--late{ border-top-color:var(--ui-red) }
.ui-kot--ready{ border-top-color:var(--ui-green) }
.ui-kot__h{ display:flex; align-items:baseline; gap:.5em; margin-bottom:.5em }
.ui-kot__h b{ font-size:1.25em }
.ui-kot__h span{ margin-left:auto; font-size:.9em; font-variant-numeric:tabular-nums; color:#9aa3b2 }
.ui-kot--late .ui-kot__h span{ color:#ff8f8f; font-weight:700 }
.ui-kot li{ display:flex; gap:.5em; font-size:.98em; padding:.18em 0; color:#cdd2db }
.ui-kot li b{ color:#fff; min-width:1.3em }
.ui-kot li i{ font-style:normal; color:#8d95a4; font-size:.88em }
.ui-kot__f{ display:flex; gap:.4em; margin-top:.6em }
.ui-kot__f span{ flex:1; text-align:center; padding:.3em; border-radius:.4em;
  font-size:.88em; font-weight:700; background:#2b323f; color:#aeb6c4 }
.ui-kot__f span.go{ background:var(--ui-green); color:#fff }

/* ---------- phone ---------- */
.ui-phone{
  width:100%; max-width:16em; margin-inline:auto;
  background:#fff; border-radius:1.6em; overflow:hidden;
  border:.55em solid #16181d; box-shadow:0 1.6em 3em -1.2em rgba(0,0,0,.4);
  font-size:1em;
}
.ui-phone__bar{ display:flex; align-items:center; padding:.45em .9em; font-size:.82em;
  font-weight:600; color:var(--ui-ink-2); background:#fff }
.ui-phone__bar .sp{ margin-left:auto; letter-spacing:.1em }
.ui-phone__hd{ background:var(--ui-side); color:#fff; padding:.8em .9em }
.ui-phone__hd b{ font-size:1.15em } .ui-phone__hd span{ display:block; font-size:.85em; opacity:.6 }
.ui-phone__body{ padding:.8em; min-height:20em; background:var(--ui-bg) }
.ui-phone__tabs{ display:flex; border-top:1px solid var(--ui-line); background:#fff }
.ui-phone__tabs span{ flex:1; text-align:center; padding:.6em .2em; font-size:.85em; color:var(--ui-ink-3) }
.ui-phone__tabs span.on{ color:var(--ui-brand); font-weight:700;
  box-shadow:inset 0 .18em 0 var(--ui-brand) }

.ui-dish{ display:flex; align-items:center; gap:.6em; background:#fff;
  border:1px solid var(--ui-line); border-radius:.5em; padding:.5em .6em; margin-bottom:.4em }
.ui-dish b{ font-size:.98em } .ui-dish span{ display:block; font-size:.85em; color:var(--ui-ink-3) }
.ui-dish .qty{ margin-left:auto; display:flex; align-items:center; gap:.5em; font-weight:700 }
.ui-dish .qty i{ width:1.5em; height:1.5em; border-radius:.35em; background:#eef1f5;
  display:grid; place-items:center; font-style:normal; color:var(--ui-ink-2) }
.ui-total{ display:flex; align-items:center; margin-top:.7em; padding-top:.6em;
  border-top:1px dashed var(--ui-line); font-weight:800; font-size:1.1em }
.ui-total span{ margin-left:auto }
.ui-cta{ display:block; text-align:center; margin-top:.7em; padding:.65em;
  border-radius:.5em; background:var(--ui-brand); color:#fff; font-weight:700; font-size:1em }

/* ---------- bill ---------- */
.ui-bill{ background:#fff; max-width:20em; margin-inline:auto; padding:1.2em 1.3em;
  border:1px solid var(--ui-line); border-radius:.5em; font-variant-numeric:tabular-nums }
.ui-bill h3{ text-align:center; font-size:1.2em; margin:0 0 .1em }
.ui-bill .sub{ text-align:center; font-size:.85em; color:var(--ui-ink-3); margin-bottom:.8em }
.ui-bill .li{ display:flex; gap:.6em; font-size:.95em; padding:.2em 0 }
.ui-bill .li span:last-child{ margin-left:auto }
.ui-bill hr{ border:none; border-top:1px dashed var(--ui-line); margin:.6em 0 }
.ui-bill .tot{ display:flex; font-weight:800; font-size:1.15em }
.ui-bill .tot span:last-child{ margin-left:auto }

/* ---------- chart ---------- */
.ui-chart{ display:flex; align-items:flex-end; gap:.4em; height:7em; padding-top:.5em }
.ui-chart i{ flex:1; border-radius:.25em .25em 0 0; background:linear-gradient(180deg,var(--ui-brand),#f0a882) }
.ui-chart i:nth-child(even){ opacity:.72 }