/* Tably · Mango Masala. The brand skin for the owner and counter apps, switched on by "tm" next to "ui sh".
   Burnt orange + mango on cream, ink outlines with hard shadows, Bricolage Grotesque headings. */

.ui.sh.tm {
  --bg: #FFF7EC; --surface: #FFFFFF; --subtle: #FCEBD7; --primary: #C2410C; --primary-strong: #9A3412; --primary-soft: #FFE8D6;
  --accent: #FFC94A; --text: #1F1A17; --text2: #4A3F38; --muted: #6B5A4C; --border: #F0D9BE; --on: #FFFFFF;
  --ok: #2F6B12; --ok-soft: #EAF6D9; --warn: #9A5B00; --warn-soft: #FFF1CC; --bad: #B42318; --bad-soft: #FDE4E1;
  --veg: #1E8E3E; --nonveg: #8B4513; --ink: #1F1A17; --ring: rgba(194, 65, 12, .30);
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

/* Type */
.tm .h1, .tm .h2, .tm .h3, .tm .kpi .v, .tm .big, .tm .tcard .tn, .tm .hdr, .tm .total { font-family: var(--display); }
.tm .h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; }
.tm .h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.tm .kpi .v { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.tm .tcard .tn { font-weight: 800; }

/* Cards: ink outline + hard shadow, the Tably signature */
.tm .card, .tm .panel, .tm .tcard { background: var(--surface); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
.tm .card .card-tight[style*="subtle"], .tm .card .card.card-tight { border: none; box-shadow: none; }
.tm .tcard.empty { border-style: dashed; box-shadow: none; background: transparent; }
.tm .tcard.hot { box-shadow: 4px 4px 0 var(--primary); }
.tm .tcard.sel { box-shadow: 4px 4px 0 var(--accent); }
.tm .tbl-box { border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.tm .tbl th { background: var(--subtle); color: var(--text2); font-weight: 700; }
.tm .tbl tr:hover td { background: #FFFBF4; }

/* Buttons */
.tm .btn { border-radius: 12px; font-weight: 700; }
.tm .btn-p { background: var(--primary); color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tm .btn-p:hover { background: var(--primary-strong); }
.tm .btn-p:active, .tm .btn-s:active { transform: translate(3px, 3px); box-shadow: none; }
.tm .btn-s { background: var(--surface); color: var(--text); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tm .btn-s:hover { background: var(--subtle); }
.tm .btn-q { color: var(--primary-strong); }

/* Chips */
.tm .chip { border-radius: 999px; font-weight: 600; }
.tm .c-solid { background: var(--primary); color: #fff; border: 1.5px solid var(--ink); }
.tm .c-brand { background: var(--accent); color: var(--ink); border: 1.5px solid var(--ink); }
.tm .c-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tm .c-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.tm .c-bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

/* Sidebar, with the Tably lockup on top of every owner screen */
.tm .side { background: var(--bg); border-right: 2px solid var(--ink); }
.tm .side::before {
  content: 'tably'; display: block; min-height: 32px; line-height: 32px; padding: 0 0 12px 42px; margin: 0 4px 8px;
  background: url(/app/tably-mark.svg?v=mvvb8tbcfl) 0 0 / 32px 32px no-repeat;
  font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.045em; color: var(--ink);
  border-bottom: 2px dashed var(--border);
}
.tm .nav { border: 2px solid transparent; border-radius: 12px; }
.tm .nav:hover { background: var(--subtle); }
.tm .nav.on { background: var(--accent); color: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
.tm .logo { background: var(--primary); color: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); font-family: var(--display); font-weight: 800; }

/* Inputs, notes, small parts */
.tm .input, .tm .search { border: 2px solid var(--ink); border-radius: 12px; box-shadow: none; }
.tm .input:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent); }
.tm .note { border: 2px solid var(--ink); border-radius: 14px; }
.tm .opt { border: 2px solid var(--ink); border-radius: 12px; }
.tm .opt.on { background: var(--accent); box-shadow: 2px 2px 0 var(--ink); }
.tm .lang { border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
.tm .bars span { background: var(--primary-soft); border: 1.5px solid var(--ink); border-bottom: none; }
.tm .bars .hi { background: var(--primary); }
.tm .meter { border: 1.5px solid var(--ink); background: var(--surface); }
.tm .ibox { border: 1.5px solid var(--ink); }
.tm .swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* Phone app bars */
.tm .top, .tm .hdr { background: var(--bg); border-bottom: 2px solid var(--ink); backdrop-filter: none; }
.tm .cta-bar { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* Motion layer pieces (live feed, toasts) get the same outline */
.tm .toast { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.tm .ti { border: 1.5px solid var(--ink); }

/* ---- Motion. Entrances play only on the first paint of a screen or tab ("enter" on the root, set by the app),
   so live updates never replay them. Pulses and hover effects are always on. ---- *//* ---- Motion
@keyframes tm-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tm-pop { 0% { opacity: 0; transform: scale(.88) translateY(8px); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes tm-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes tm-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tm-nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateX(-2px); } 96% { transform: translateX(2px); } }

/* Page sections rise in order */
.tm.enter .main > *, .tm.enter .body > *, .tm.enter > .card { animation: tm-up .6s cubic-bezier(.22, 1, .36, 1) both; }
.tm.enter .main > :nth-child(2), .tm.enter .body > :nth-child(2) { animation-delay: .07s; }
.tm.enter .main > :nth-child(3), .tm.enter .body > :nth-child(3) { animation-delay: .14s; }
.tm.enter .main > :nth-child(4), .tm.enter .body > :nth-child(4) { animation-delay: .21s; }
.tm.enter .main > :nth-child(5), .tm.enter .body > :nth-child(5) { animation-delay: .28s; }
.tm.enter .main > :nth-child(n+6), .tm.enter .body > :nth-child(n+6) { animation-delay: .35s; }

/* Cards in grids pop one after another */
.tm.enter .grid2 > *, .tm.enter .grid3 > *, .tm.enter .grid4 > *, .tm.enter .split > * > .card { animation: tm-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .25s; }
.tm.enter :is(.grid2, .grid3, .grid4) > :nth-child(2), .tm.enter .split > * > .card:nth-child(2) { animation-delay: .33s; }
.tm.enter :is(.grid2, .grid3, .grid4) > :nth-child(3), .tm.enter .split > * > .card:nth-child(3) { animation-delay: .41s; }
.tm.enter :is(.grid2, .grid3, .grid4) > :nth-child(4) { animation-delay: .49s; }
.tm.enter :is(.grid2, .grid3, .grid4) > :nth-child(5) { animation-delay: .57s; }
.tm.enter :is(.grid2, .grid3, .grid4) > :nth-child(n+6) { animation-delay: .65s; }

/* Table rows and list rows slide up */
.tm.enter .tbl tr { animation: tm-row .45s ease-out both; animation-delay: .3s; }
.tm.enter .tbl tr:nth-child(2) { animation-delay: .36s; }
.tm.enter .tbl tr:nth-child(3) { animation-delay: .42s; }
.tm.enter .tbl tr:nth-child(4) { animation-delay: .48s; }
.tm.enter .tbl tr:nth-child(5) { animation-delay: .54s; }
.tm.enter .tbl tr:nth-child(n+6) { animation-delay: .6s; }
.tm.enter .card > .row { animation: tm-row .45s ease-out both; animation-delay: .45s; }
.tm.enter .card > .row:nth-child(3) { animation-delay: .52s; }
.tm.enter .card > .row:nth-child(4) { animation-delay: .59s; }
.tm.enter .card > .row:nth-child(n+5) { animation-delay: .66s; }

/* Sidebar links glide in */
.tm.enter .side > * { animation: tm-slide .45s ease-out both; }
.tm.enter .side > :nth-child(2) { animation-delay: .04s; }
.tm.enter .side > :nth-child(3) { animation-delay: .08s; }
.tm.enter .side > :nth-child(4) { animation-delay: .12s; }
.tm.enter .side > :nth-child(5) { animation-delay: .16s; }
.tm.enter .side > :nth-child(6) { animation-delay: .2s; }
.tm.enter .side > :nth-child(7) { animation-delay: .24s; }
.tm.enter .side > :nth-child(8) { animation-delay: .28s; }
.tm.enter .side > :nth-child(n+9) { animation-delay: .32s; }

/* Small lives: alerts pulse, warnings nudge, "New" badges shine */
.tm.fx .main .c-bad, .tm.fx .body .c-bad { animation: fx-dim 1.8s ease-in-out 1s infinite; }
.tm.fx .main .c-warn, .tm.fx .body .c-warn { animation: tm-nudge 4s ease-in-out 1.2s infinite; }
.tm.fx .nav .c-brand { position: relative; overflow: hidden; }
.tm.fx .nav .c-brand::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: fx-sheen 3s 1s ease-in-out infinite; }

/* Hover: cards lift off their shadow, buttons press in */
.tm.fx .card, .tm.fx .tcard, .tm.fx .btn { transition: transform .15s ease, box-shadow .15s ease; }
.tm.fx a.card:hover, .tm.fx .grid3 > .card:hover, .tm.fx .grid4 > .card:hover, .tm.fx .tcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.tm.fx .btn-p:hover, .tm.fx .btn-s:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .tm.fx *, .tm.fx *::before, .tm.fx *::after { animation: none !important; transition: none !important; }
}

/* In-stock switches are spans; give them a box so they show in table cells. */
.tm .toggle { display: inline-block; vertical-align: middle; border: 1.5px solid var(--ink); }

/* Tably lockup where there is no sidebar: owner on a phone, and the sign-in card. */
@media (max-width: 899px) {
  .tm.owner .main::before {
    content: 'tably'; display: block; min-height: 30px; line-height: 30px; padding-left: 38px; margin-bottom: 2px;
    background: url(/app/tably-mark.svg?v=mvvb8tbcfl) 0 0 / 30px 30px no-repeat;
    font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.045em; color: var(--ink);
  }
}
.tb-lock { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tb-lock img { width: 34px; height: 34px; }
.tb-lock span { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.045em; color: #1F1A17; }
.tb-lock small { font-size: 13px; color: #6B5A4C; font-weight: 600; letter-spacing: 0; margin-left: 2px; }

/* Hour labels under the orders-by-hour bars (same flex + gap as .bars so each label sits under its bar). */
.bars-x { display: flex; gap: 8px; margin-top: 6px; }
.bars-x span { flex: 1; min-width: 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bars-x .hi { color: var(--primary-strong); font-weight: 800; }

/* Owner PIN pad on the locked counter */
.pin-box { max-width: 360px; width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.pin-box .h1, .pin-box .sm { margin: 0; }
.fx .ibox.pin-ico { width: 56px; height: 56px; border-radius: 16px; align-self: center; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 4px 0; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); transition: background .12s; }
.pin-dots .on { background: var(--primary); }
.pin-err { min-height: 20px; margin: 0; font-size: 14px; font-weight: 700; color: var(--bad); }
.pin-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pin-pad button { min-height: 56px; border: 2px solid var(--ink); border-radius: 14px; background: var(--surface); box-shadow: 3px 3px 0 var(--ink); font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); cursor: pointer; }
.pin-pad button:active { transform: translate(3px, 3px); box-shadow: none; }
.pin-pad .del { background: var(--subtle); }
.pin-pad .gap { visibility: hidden; }
@keyframes pin-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.pin-shake { animation: pin-shake .4s ease-in-out; }

/* Dialogs on the counter stay in view, centred, whatever the page scroll. */
.fixed-overlay { position: fixed; z-index: 50; overflow-y: auto; }