/*
 * The Barology app, drawn for the holding page. Sized in em off .app so a whole screen
 * scales as one; container queries reflow it like the real responsive app would.
 */
.app{--s-bg:#f3f6f5;--s-card:#fff;--s-line:#e2e8e6;--s-ink:#10272b;--s-mut:#66787b;--s-good:#147a57;--s-good-bg:#e3f4ec;--s-warn:#a1620c;--s-warn-bg:#fdf1dc;
  display:grid;grid-template-columns:13em minmax(0,1fr);font-size:.875rem;line-height:1.4;color:var(--s-ink);background:var(--s-bg);border-radius:14px;overflow:hidden;text-align:left;user-select:none}
.app .ico{width:1.15em;height:1.15em}
.side{display:flex;flex-direction:column;gap:1.5em;padding:1.25em .9em;background:#03414a;color:#cfe3e0}
.brand{display:flex;align-items:center;gap:.6em;padding:0 .4em;color:#fff;font-size:1.1em}
.brand img{width:1.75em;height:1.75em;border-radius:7px;background:#fff;padding:.2em}
.side nav{display:grid;gap:.2em}
.side nav>span{display:flex;align-items:center;gap:.7em;padding:.6em .7em;border-radius:8px;font-weight:500}
.side nav>span.on{background:rgba(255,255,255,.12);color:#fff}
.side nav em,.venue-mini em{font-style:normal}
.venue-mini{display:flex;align-items:center;gap:.6em;margin-top:auto;padding:.6em .4em;border-top:1px solid rgba(255,255,255,.12);font-size:.9em}
.venue-mini span{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:7px;background:#5cc9bc;color:#03414a;font-weight:700;font-size:.85em}
.main{display:flex;flex-direction:column;min-width:0}
.abar{display:flex;align-items:center;gap:1em;padding:.85em 1.4em;background:var(--s-card);border-bottom:1px solid var(--s-line)}
.switch{display:flex;align-items:center;gap:.4em;font-weight:600}
.search{display:flex;align-items:center;gap:.5em;margin-left:auto;padding:.45em .9em;min-width:14em;border-radius:999px;background:var(--s-bg);color:var(--s-mut)}
.bell{position:relative;display:grid;place-items:center;color:var(--s-mut)}
.bell i{position:absolute;top:-.1em;right:-.1em;width:.5em;height:.5em;border-radius:50%;background:#e0662f}
.me{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#03414a;color:#fff;font-size:.8em;font-weight:600}
.pg{padding:1.4em;display:grid;gap:1em;align-content:start}
.pg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1em}
.pg-head h4{margin:0;font-size:1.45em;font-weight:650;letter-spacing:-.02em;color:#03414a}
.pg-head p{margin:.2em 0 0;color:var(--s-mut)}
.pill{display:inline-flex;align-items:center;gap:.45em;padding:.4em .8em;border-radius:999px;background:var(--s-card);box-shadow:inset 0 0 0 1px var(--s-line);font-size:.9em;font-weight:500;white-space:nowrap}
.pill.good{background:var(--s-good-bg);color:var(--s-good);box-shadow:none}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1em}
.kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{padding:1em 1.1em;border-radius:10px;background:var(--s-card);box-shadow:inset 0 0 0 1px var(--s-line)}
.kpi>span{display:block;font-size:.85em;color:var(--s-mut)}
.kpi b{display:block;margin-top:.25em;font-size:1.6em;font-weight:650;letter-spacing:-.025em;color:#03414a;font-variant-numeric:tabular-nums}
.kpi b.warn{color:var(--s-warn)}
.kpi small{display:block;margin-top:.2em;font-size:.82em;color:var(--s-mut)}
.kpi small.up{color:var(--s-good);font-weight:500}
.grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1em}
.card{padding:1.1em 1.2em;border-radius:10px;background:var(--s-card);box-shadow:inset 0 0 0 1px var(--s-line);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.9em}
.muted{color:var(--s-mut);font-size:.9em}
.legend{display:flex;align-items:center;gap:.45em;font-size:.82em;color:var(--s-mut)}
.legend i{width:.75em;height:.75em;border-radius:3px}
.legend .l1{background:#01867f}
.legend .l2{height:2px;border-radius:2px;background:#e0662f;margin-left:.6em}
.plot{display:block;width:100%;height:11em;overflow:visible}
.plot rect{fill:#b8dcd7}
.plot rect.now{fill:#01867f}
.plot .ln{fill:none;stroke:#e0662f;stroke-width:1.6;stroke-dasharray:3 3}
.axis{display:flex;justify-content:space-between;margin-top:.5em;font-size:.78em;color:var(--s-mut)}
.todo ul,.exp,.levels{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.todo li{display:flex;align-items:flex-start;gap:.65em;padding:.6em .7em;border-radius:8px;background:var(--s-bg)}
.todo li>span:not(.ico){display:grid}
.todo li em{font-style:normal;font-size:.85em;color:var(--s-mut)}
.todo li.ok .ico{color:var(--s-good)}
.todo li.due{background:var(--s-warn-bg)}
.todo li.due i,.tbl .ring,.ph-tasks li i{flex:none;width:1.15em;height:1.15em;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--s-warn)}
.todo li.due em{color:var(--s-warn);font-weight:500}
.score{position:relative;display:grid;place-items:center;width:3.6em;height:3.6em}
.score svg{position:absolute;inset:0;transform:rotate(-90deg)}
.score circle{fill:none;stroke-width:3.4}
.score .t{stroke:var(--s-line)}
.score .v{stroke:#01867f;stroke-linecap:round}
.score b{font-size:.95em;font-weight:650;color:#03414a}
.grid2.wide{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{padding:.5em .6em;font-size:.8em;font-weight:500;color:var(--s-mut);text-align:left;border-bottom:1px solid var(--s-line)}
.tbl td{padding:.6em;border-bottom:1px solid var(--s-line);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{display:flex;align-items:center;gap:.55em;font-weight:500}
.tbl tr.ok td:first-child .ico{color:var(--s-good)}
.tbl tr.warn td:first-child .ico{color:var(--s-warn)}
.tbl tr.warn{background:var(--s-warn-bg)}
.tbl tr.due td{color:var(--s-mut)}
.tbl td.good{color:var(--s-good);font-weight:600}
.tbl td.warn{color:var(--s-warn);font-weight:600}
.exp li{display:grid;gap:.1em;padding:.65em .75em;border-radius:8px;background:var(--s-bg)}
.exp li>span{font-size:.85em;color:var(--s-mut)}
.exp li.warn{background:var(--s-warn-bg)}
.exp li.warn>span{color:var(--s-warn);font-weight:500}
.rota .tbl td,.rota .tbl th{text-align:center}
.rota .tbl td:first-child{justify-content:flex-start;text-align:left}
.av{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:#d7ece8;color:#03414a;font-size:.8em;font-weight:700}
.sh{display:inline-block;padding:.3em .55em;border-radius:6px;background:#e7f2f0;color:#03414a;font-size:.85em;font-weight:500}
.sh.today{background:#01867f;color:#fff}
.sh.hol{background:#fdf1dc;color:var(--s-warn)}
.note{display:flex;align-items:center;gap:.5em;margin:.8em 0 0;padding:.55em .7em;border-radius:8px;font-size:.9em}
.note.warn{background:var(--s-warn-bg);color:var(--s-warn)}
.levels li{display:grid;grid-template-columns:1fr 5em auto;align-items:center;gap:.8em}
.levels i{height:.45em;border-radius:3px;background:linear-gradient(90deg,#e0662f var(--p),transparent var(--p))}
.levels em{font-style:normal;font-size:.85em;color:var(--s-mut);text-align:right}
.btn-ui{display:block;margin-top:1em;padding:.7em;border-radius:8px;background:#03414a;color:#fff;font-weight:600;text-align:center}

/* the till */
.appw,.tillw{container-type:inline-size}
.till-ui{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.9em;padding:.9em;font-size:.875rem;line-height:1.3;background:#0e2e33;border-radius:16px;color:#eaf4f2;user-select:none}
.t-cats{display:flex;gap:.4em;flex-wrap:wrap;margin-bottom:.8em}
.t-cats span{padding:.55em .9em;border-radius:8px;background:rgba(255,255,255,.07);font-weight:500}
.t-cats span.on{background:#5cc9bc;color:#03414a}
.t-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55em}
.t-grid span{display:grid;align-content:space-between;gap:.6em;min-height:5.2em;padding:.8em;border-radius:10px;background:#fff;color:#10272b;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.t-grid b{font-weight:600;line-height:1.2}
.t-grid em{font-style:normal;color:#66787b;font-variant-numeric:tabular-nums}
.t-grid span.hit{background:#d7ece8;box-shadow:inset 0 0 0 2px #01867f}
.t-ticket{display:flex;flex-direction:column;padding:1em;border-radius:12px;background:#fff;color:#10272b}
.t-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:.7em;border-bottom:1px dashed #d4dcda}
.t-h span{font-size:.85em;color:#66787b}
.t-ticket ul{list-style:none;margin:.6em 0 0;padding:0;display:grid;gap:.45em;font-variant-numeric:tabular-nums}
.t-ticket li{display:flex;justify-content:space-between;gap:.8em}
.t-ticket li em{font-style:normal}
.t-ticket li.new{color:#01867f;font-weight:600}
.t-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:.8em;border-top:1px solid #e2e8e6}
.t-total b{font-size:1.6em;font-weight:700;letter-spacing:-.02em;color:#03414a}
.t-pay{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-top:.8em}
.t-pay span{padding:.85em;border-radius:9px;background:#eef1ef;font-weight:600;text-align:center}
.t-pay span.card{background:#01867f;color:#fff}

/* the staff phone */
.phone{width:15.5em;padding:.55em;border-radius:2.4em;background:#10272b;box-shadow:0 40px 80px -30px rgba(3,40,46,.55),inset 0 0 0 1px rgba(255,255,255,.08);font-size:.875rem;user-select:none}
.ph-in{display:grid;gap:.75em;padding:1em .95em 1.1em;border-radius:1.9em;background:#f3f6f5;color:#10272b}
.ph-top{display:flex;justify-content:space-between;align-items:center;font-size:.78em;font-weight:600}
.ph-top i{width:4.5em;height:1.2em;border-radius:999px;background:#10272b;margin-right:auto;margin-left:auto;transform:translateX(-1em)}
.ph-hi{margin:.2em 0 0;font-size:1.35em;font-weight:650;letter-spacing:-.02em;color:#03414a}
.ph-shift{display:grid;gap:.15em;padding:.85em;border-radius:12px;background:#03414a;color:#fff}
.ph-shift span{font-size:.8em;color:#bcd8d4}
.ph-shift b{font-size:1.15em;font-weight:600}
.ph-shift em{display:flex;align-items:center;gap:.35em;font-style:normal;font-size:.8em;color:#5cc9bc}
.ph-sub{margin:.2em 0 0;font-size:.8em;font-weight:600;color:#66787b}
.ph-tasks{list-style:none;margin:0;padding:0;display:grid;gap:.45em}
.ph-tasks li{display:flex;align-items:center;gap:.55em;padding:.6em .65em;border-radius:10px;background:#fff;font-size:.9em;font-weight:500}
.ph-tasks li.ok .ico{color:#147a57}
.ph-tasks li.now{box-shadow:inset 0 0 0 1.5px #01867f}
.ph-tasks li.now .ico{color:#01867f}
.ph-tasks li>span:not(.ico){margin-left:auto;font-size:.8em;color:#01867f;font-weight:600}
.ph-tasks li i{color:#9aa8aa}
.ph-btn{display:block;padding:.75em;border-radius:12px;background:#01867f;color:#fff;font-weight:600;text-align:center}

/* reflow like the real app */
@container (max-width:900px){
  .app{grid-template-columns:4em minmax(0,1fr)}
  .side{padding-inline:.55em}
  .brand b,.side nav em,.venue-mini em{display:none}
  .brand{justify-content:center;padding:0}
  .side nav>span{justify-content:center;padding:.65em}
  .venue-mini{justify-content:center}
  .search{min-width:0}
}
@container (max-width:720px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid2.wide{grid-template-columns:1fr}
  .search{display:none}
  .bell{margin-left:auto}
  .rota{overflow:hidden}
  .rota .tbl th:nth-child(n+5),.rota .tbl td:nth-child(n+5){display:none}
}
@container (max-width:520px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .pg{padding:1em}
  .pg-head .pill{display:none}
  .kpis.three{grid-template-columns:1fr}
  .tbl th:nth-child(4),.tbl td:nth-child(4){display:none}
  .rota .tbl th:nth-child(n+4),.rota .tbl td:nth-child(n+4){display:none}
}
@container (max-width:640px){
  .till-ui{grid-template-columns:1fr}
  .t-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (max-width:520px){
  .tbl td{white-space:normal}
  .card:not(.rota) .tbl th:nth-child(3),.card:not(.rota) .tbl td:nth-child(3){display:none}
}