/* Funtasty Operations v2 — the back office and kitchen in the brand of the website and the two apps.
   Decisions: 01_Brief/Restaurant_Admin_Whole_System_Decisions_v3.md; spec: Restaurant_Admin_Whole_System_v2_ChatGPT.md.
   Scoped to .ft (admin shell, kitchen, dialogs). Plain CSS, no library. */

@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/Montserrat-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/Poppins-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('../assets/fonts/Anton-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Kaushan Script'; src: url('../assets/fonts/KaushanScript-Regular.woff2') format('woff2'); font-display: swap; }

.ft {
  /* surfaces: canvas → panel → raised → hover; a warm tint for selection */
  --canvas: #0F0F0F; --side: #121212; --panel: #171717; --raised: #1F1F1F; --hover: #262626; --sel: #2A1C0C;
  --line: #2B2B2B; --line-2: #3A3A3A;
  --brand: #FF8A00; --brand-hi: #FFA126; --brand-lo: #E77C00; --gold: #FFC107; --cream: #F5E6C8;
  --brand-a: rgba(255, 138, 0, .14); --gold-a: rgba(255, 193, 7, .14);
  --t1: #F7F7F7; --t2: #C4C4C4; --t3: #9A9A9A; --on-brand: #1A1A1A;
  /* status: text colour + tinted fill, all ≥ 4.5:1 on --panel */
  --ok: #7EE29A; --ok-a: rgba(126, 226, 154, .13);
  --warn: #FFD65A; --warn-a: rgba(255, 214, 90, .13);
  --bad: #FF8585; --bad-a: rgba(255, 133, 133, .13);
  --info: #91BFFF; --info-a: rgba(145, 191, 255, .13);
  --way: #80E0E1; --way-a: rgba(128, 224, 225, .13);
  --mute-a: rgba(255, 255, 255, .07);
  --f-display: 'Anton', sans-serif; --f-head: 'Montserrat', sans-serif; --f-body: 'Poppins', sans-serif; --f-script: 'Kaushan Script', cursive;
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --pill: 999px;
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --ring: 0 0 0 3px rgba(255, 138, 0, .28);
  --ease: cubic-bezier(.2, .8, .2, 1); --fast: 120ms; --norm: 180ms;
  --side-w: 248px; --top-h: 68px; --pad: 28px;
  /* the page never grows past this (wide screens: centred, nothing stretched); the map and kitchen pages may go wider */
  --page-max: 1840px;
  color: var(--t1); background: var(--canvas); font: 400 14px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.ft *, .ft *::before, .ft *::after { box-sizing: border-box; }
.ft button, .ft input, .ft textarea, .ft select { font: inherit; color: inherit; }
.ft button { background: none; border: 0; padding: 0; cursor: pointer; }
.ft a { color: inherit; } .ft p { margin: 0; }
.ft .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
@media (min-width: 1800px) { .ft { --pad: 36px; } }
@media (prefers-reduced-motion: reduce) { .ft *, .ft *::before, .ft *::after { transition: none !important; animation: none !important; } }

/* scrollbars: thin, dark, the thumb lights up in brand orange on hover */
/* Firefox has only the standard properties; Chrome 121+ would let them override the ::-webkit look (and its orange
   hover), so they apply only where ::-webkit-scrollbar does not exist */
@supports not selector(::-webkit-scrollbar) { .ft, .ft * { scrollbar-width: thin; scrollbar-color: #3A3A3A transparent; } }
.ft ::-webkit-scrollbar { width: 12px; height: 12px; }
.ft ::-webkit-scrollbar-track { background: transparent; }
.ft ::-webkit-scrollbar-thumb { background: #3A3A3A; border: 4px solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 40px; }
.ft ::-webkit-scrollbar-thumb:hover { background: var(--brand); border-width: 3px; }
.ft ::-webkit-scrollbar-corner { background: transparent; }
.ft :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft ::selection { background: rgba(255, 138, 0, .35); }

/* ---------- type ---------- */
.ft h1, .ft h2, .ft h3, .ft h4 { margin: 0; font-family: var(--f-head); letter-spacing: -.01em; }
.ft .h1 { font: 800 28px/36px var(--f-head); letter-spacing: -.015em; }
.ft .h2 { font: 700 18px/26px var(--f-head); }
.ft .h3 { font: 700 15px/22px var(--f-head); }
.ft .num { font: 800 30px/1.1 var(--f-head); letter-spacing: -.02em; }
.ft .anton { font-family: var(--f-display); font-weight: 400; letter-spacing: .01em; }
.ft .script { font-family: var(--f-script); color: var(--brand); font-size: 22px; line-height: 1.2; }
.ft .t2 { color: var(--t2); } .ft .t3 { color: var(--t3); } .ft .brand { color: var(--brand); }
.ft .sm { font-size: 13px; line-height: 20px; } .ft .xs { font-size: 12px; line-height: 18px; }
.ft .b { font-weight: 600; } .ft .mono { font-variant-numeric: tabular-nums; }
.ft .r { text-align: right; } .ft .nowrap { white-space: nowrap; }
.ft .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- icons ---------- */
.ft .ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ft .ico svg { width: 100%; height: 100%; }
.ft .ico.s16 { width: 16px; height: 16px; } .ft .ico.s20 { width: 20px; height: 20px; } .ft .ico.s22 { width: 22px; height: 22px; }

/* ---------- layout helpers ---------- */
.ft .row { display: flex; align-items: center; } .ft .col { display: flex; flex-direction: column; }
.ft .g4 { gap: 4px; } .ft .g6 { gap: 6px; } .ft .g8 { gap: 8px; } .ft .g12 { gap: 12px; } .ft .g16 { gap: 16px; } .ft .g20 { gap: 20px; } .ft .g24 { gap: 24px; }
.ft .f1 { flex: 1; min-width: 0; } .ft .wrap { flex-wrap: wrap; } .ft .between { justify-content: space-between; }

/* ---------- shell ---------- */
.ft.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr); height: 100vh; overflow: hidden; }
.ft.shell.focus { grid-template-columns: 0 minmax(0, 1fr); }
.ft.shell.focus .side { visibility: hidden; }
.ft .side { grid-row: 1 / 3; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.ft .side .logo { height: var(--top-h); display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); flex: none; }
.ft .side .logo img { height: 34px; }
.ft .side nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.ft .side .grp { font: 600 12px/16px var(--f-head); color: var(--t3); padding: 16px 12px 6px; }
.ft .side .grp:first-child { padding-top: 4px; }
.ft .side nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: var(--r); color: var(--t2); text-decoration: none; font: 600 14px/1 var(--f-head); transition: background var(--fast), color var(--fast); }
.ft .side nav a .ico { color: var(--t3); transition: color var(--fast); }
.ft .side nav a:hover { background: var(--hover); color: var(--t1); }
.ft .side nav a:hover .ico { color: var(--t1); }
.ft .side nav a.on { background: var(--brand-a); color: var(--t1); }
.ft .side nav a.on .ico { color: var(--brand); }
.ft .side nav a.on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.ft .side nav a .cnt { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--pill); background: var(--brand); color: var(--on-brand); font: 700 12px/22px var(--f-head); text-align: center; }
.ft .side nav a .cnt.alert { background: var(--bad); }
.ft .side .me { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.ft .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFC107, #FF8A00); color: var(--on-brand); font: 800 13px/1 var(--f-head); flex: none; }
.ft .avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.ft .avatar.grey { background: var(--raised); color: var(--t2); border: 1px solid var(--line-2); }

.ft .top { grid-column: 2; display: flex; align-items: center; gap: 12px; padding: 0 max(var(--pad), calc((100% - var(--page-max)) / 2 + var(--pad))); border-bottom: 1px solid var(--line); background: rgba(15, 15, 15, .92); min-width: 0; }
.ft .main { grid-column: 2; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.ft .page { padding: 26px var(--pad) 40px; display: flex; flex-direction: column; gap: 22px; min-height: 100%; width: 100%; max-width: var(--page-max); margin: 0 auto; }
.ft.shell.wide { --page-max: 2400px; }
.ft .page.fill { height: 100%; min-height: 0; }
.ft .phead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ft .phead .sub { color: var(--t2); font-size: 14px; margin-top: 4px; }
.ft .phead .acts { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ft .crumbs { display: flex; gap: 8px; align-items: center; color: var(--t3); font: 600 13px/18px var(--f-head); margin-bottom: 6px; }
.ft .crumbs a { color: var(--t3); text-decoration: none; } .ft .crumbs a:hover { color: var(--brand); }

/* ---------- top bar parts ---------- */
.ft .search { position: relative; width: min(420px, 38vw); }
.ft .search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--t3); }
.ft .search input { padding-left: 42px; padding-right: 54px; }
.ft .kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--f-head); color: var(--t3); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 6px; }
.ft .live-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; flex-shrink: 0; white-space: nowrap; padding: 0 14px 0 12px; border-radius: var(--pill); font: 700 13px/1 var(--f-head); border: 1px solid transparent; cursor: pointer; background: none; color: inherit; }
.ft .live-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.ft .live-chip.open { color: var(--ok); background: var(--ok-a); border-color: rgba(126, 226, 154, .28); }
.ft .live-chip.paused { color: var(--warn); background: var(--warn-a); border-color: rgba(255, 214, 90, .28); }
.ft .live-chip.closed { color: var(--bad); background: var(--bad-a); border-color: rgba(255, 133, 133, .28); }
.ft .live-chip .sub { color: var(--t2); font-weight: 500; }
.ft .clock { font: 800 16px/1 var(--f-head); color: var(--t1); display: inline-flex; gap: 8px; align-items: center; }
.ft .clock .ico { color: var(--brand); }
.ft .lang { display: inline-flex; padding: 3px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--panel); }
.ft .lang a, .ft .lang button { display: inline-block; min-width: 38px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--pill); background: none; color: var(--t2); font: 700 12px/30px var(--f-head); text-align: center; text-decoration: none; cursor: pointer; }
.ft .lang .on { background: var(--brand); color: var(--on-brand); }
.ft .iconbtn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--panel); color: var(--t1); cursor: pointer; transition: background var(--fast), border-color var(--fast); }
.ft .iconbtn:hover { background: var(--hover); border-color: #4a4a4a; }
.ft .iconbtn .pip { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid var(--panel); }
.ft .iconbtn.sq { border-radius: var(--r); }
.ft .userbtn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 4px; border-radius: var(--pill); border: 1px solid transparent; background: none; color: inherit; cursor: pointer; }
.ft .userbtn:hover { background: var(--hover); }
.ft .userbtn .nm { font: 700 13px/16px var(--f-head); text-align: left; } .ft .userbtn .rl { font-size: 12px; color: var(--t3); line-height: 16px; text-align: left; }

/* ---------- controls ---------- */
.ft .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--pill); border: 1px solid transparent; font: 700 14px/1 var(--f-head); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast); }
.ft .btn:active { transform: translateY(1px); }
.ft .btn.pri { background: var(--brand); color: var(--on-brand); box-shadow: 0 6px 18px rgba(255, 138, 0, .22); }
.ft .btn.pri:hover { background: var(--brand-hi); } .ft .btn.pri:active { background: var(--brand-lo); }
.ft .btn.sec { background: var(--raised); color: var(--t1); border-color: var(--line-2); }
.ft .btn.sec:hover { background: var(--hover); border-color: #4a4a4a; }
.ft .btn.ghost { background: transparent; color: var(--t2); } .ft .btn.ghost:hover { background: var(--hover); color: var(--t1); }
.ft .btn.danger { background: var(--bad-a); color: var(--bad); border-color: rgba(255, 133, 133, .3); } .ft .btn.danger:hover { background: rgba(255, 133, 133, .2); }
.ft .btn.ok { background: #2FBF5B; color: #06210F; } .ft .btn.ok:hover { background: #3AD068; }
.ft .btn.gold { background: var(--gold); color: var(--on-brand); } .ft .btn.gold:hover { background: #FFCD38; }
.ft .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; } .ft .btn.lg { height: 48px; padding: 0 24px; font-size: 15px; }
.ft .btn.xl { height: 56px; font-size: 17px; border-radius: var(--r-lg); width: 100%; }
.ft .btn[disabled], .ft .btn.dis { opacity: .45; pointer-events: none; box-shadow: none; }
.ft .btn.icon { width: 40px; padding: 0; } .ft .btn.icon.sm { width: 32px; }
.ft .link { color: var(--brand); font: 700 13px/1 var(--f-head); text-decoration: none; background: none; border: 0; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.ft .link:hover { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; }

.ft .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ft .fld > label, .ft .lbl { font: 600 13px/18px var(--f-head); color: var(--t2); }
.ft .fld .help { font-size: 12px; color: var(--t3); } .ft .fld .err { font-size: 12px; color: var(--bad); display: flex; gap: 6px; align-items: center; }
.ft .in { width: 100%; height: 42px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--raised); color: var(--t1); font: 400 14px/1 var(--f-body); transition: border-color var(--fast), box-shadow var(--fast), background var(--fast); outline: none; }
.ft .in::placeholder { color: var(--t3); }
.ft .in:hover { border-color: #4a4a4a; }
.ft .in:focus, .ft .in.focus { border-color: var(--brand); box-shadow: var(--ring); background: #222; }
.ft .in.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 133, 133, .18); }
.ft textarea.in { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: none; }
.ft .in-affix { position: relative; } .ft .in-affix .in { padding-right: 40px; }
.ft .in-affix .affix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--t3); font: 600 14px/1 var(--f-head); pointer-events: none; }
/* select / date trigger: looks like an input with a chevron; the menu below is ours */
.ft .select { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--raised); color: var(--t1); font: 500 14px/1 var(--f-body); cursor: pointer; text-align: left; }
.ft .select:hover { border-color: #4a4a4a; } .ft .select.open { border-color: var(--brand); box-shadow: var(--ring); }
.ft .select .ico:last-child { margin-left: auto; color: var(--t3); }
.ft .select .ico:first-child { color: var(--brand); }
.ft .menu { position: absolute; z-index: 30; min-width: 220px; max-height: 320px; overflow: auto; padding: 6px; border-radius: var(--r-lg); background: #1C1C1C; border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); }
.ft .menu .opt { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--r-sm); color: var(--t1); font-size: 14px; cursor: pointer; }
.ft .menu .opt:hover, .ft .menu .opt.hi { background: var(--hover); }
.ft .menu .opt.sel { color: var(--brand); font-weight: 600; } .ft .menu .opt.sel::after { content: '✓'; margin-left: auto; }
.ft .menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.ft .menu .opt.danger { color: var(--bad); }
/* calendar */
/* the calendar shows whole (month, weekdays, presets): not .menu's 320 px list height, which cut the presets off and scrolled.
   Seven equal columns: plain 1fr tracks (minimum auto) with the 100 %-wide day buttons came out unequal in the absolute
   popover, Mo and Di only 17 px wide, so their numbers ran together */
.ft .cal { width: 300px; padding: 14px; max-height: none; overflow: visible; }
.ft .cal .mh { display: flex; align-items: center; justify-content: space-between; font: 700 14px/1 var(--f-head); margin-bottom: 10px; }
.ft .cal .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.ft .cal .wd { font: 600 11px/28px var(--f-head); color: var(--t3); }
.ft .cal .d { width: 100%; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); font-size: 13px; cursor: pointer; }
.ft .cal .d:hover { background: var(--hover); }
.ft .cal .d.out { color: #555; } .ft .cal .d.today { box-shadow: inset 0 0 0 1px var(--brand); }
.ft .cal .d.in { background: var(--brand-a); border-radius: 0; } .ft .cal .d.a, .ft .cal .d.z { background: var(--brand); color: var(--on-brand); font-weight: 700; }
.ft .cal .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* checkbox / radio / toggle */
.ft .check { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: 14px; }
.ft .check .box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #555; display: grid; place-items: center; flex: none; transition: all var(--fast); }
.ft .check.on .box { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ft .check.on .box::after { content: ''; width: 10px; height: 6px; border: solid var(--on-brand); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.ft .check.mixed .box { background: var(--brand); border-color: var(--brand); } .ft .check.mixed .box::after { content: ''; width: 10px; height: 2.5px; background: var(--on-brand); border-radius: 2px; }
.ft .radio .box { border-radius: 50%; } .ft .radio.on .box { background: transparent; } .ft .radio.on .box::after { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--brand); transform: none; }
.ft .tog { position: relative; width: 48px; height: 28px; border-radius: var(--pill); background: #3A3A3A; border: 0; cursor: pointer; flex: none; transition: background var(--norm) var(--ease); }
.ft .tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform var(--norm) var(--ease); }
.ft .tog.on { background: var(--brand); } .ft .tog.on::after { transform: translateX(20px); }
.ft .tog.lg { width: 60px; height: 34px; } .ft .tog.lg::after { width: 28px; height: 28px; } .ft .tog.lg.on::after { transform: translateX(26px); }
/* stepper */
.ft .stepper { display: inline-flex; align-items: center; height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--raised); overflow: hidden; }
.ft .stepper button { width: 38px; height: 100%; border: 0; background: none; color: var(--t1); font: 700 18px/1 var(--f-head); cursor: pointer; } .ft .stepper button:hover { background: var(--hover); color: var(--brand); }
.ft .stepper input { width: 64px; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: none; color: var(--t1); text-align: center; font: 600 14px/1 var(--f-body); outline: none; }

/* segmented (app-style pill tabs) and underline tabs */
.ft .seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--pill); background: var(--panel); border: 1px solid var(--line-2); }
.ft .seg a, .ft .seg button { height: 34px; padding: 0 18px; border-radius: var(--pill); border: 0; background: none; color: var(--t2); font: 700 13px/34px var(--f-head); cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; transition: background var(--fast), color var(--fast); }
.ft .seg a:hover, .ft .seg button:hover { color: var(--t1); }
.ft .seg .on { background: var(--brand); color: var(--on-brand); box-shadow: 0 4px 14px rgba(255, 138, 0, .25); }
.ft .seg .on .n { background: rgba(0, 0, 0, .18); color: var(--on-brand); }
.ft .seg .n, .ft .chips .n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--mute-a); font: 700 11px/20px var(--f-head); text-align: center; }
.ft .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ft .chips a, .ft .chips button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--panel); color: var(--t2); font: 600 13px/1 var(--f-head); cursor: pointer; text-decoration: none; transition: all var(--fast); }
.ft .chips a:hover, .ft .chips button:hover { border-color: #4a4a4a; color: var(--t1); }
.ft .chips .on { border-color: var(--brand); color: var(--t1); background: var(--brand-a); } .ft .chips .on .n { background: var(--brand); color: var(--on-brand); }
.ft .chips img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-left: -6px; }

/* status pills: tinted fill, icon/dot, text — never colour alone */
.ft .st { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: var(--pill); font: 700 12px/1 var(--f-head); white-space: nowrap; }
.ft .st .ico { width: 14px; height: 14px; }
.ft .st.new { color: var(--brand); background: var(--brand-a); } .ft .st.prep { color: var(--warn); background: var(--warn-a); }
.ft .st.ready { color: var(--info); background: var(--info-a); } .ft .st.way { color: var(--way); background: var(--way-a); }
.ft .st.done { color: var(--ok); background: var(--ok-a); } .ft .st.cancel { color: var(--bad); background: var(--bad-a); }
.ft .st.mute { color: var(--t2); background: var(--mute-a); }
.ft .tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-xs); background: var(--mute-a); color: var(--t2); font: 600 12px/1 var(--f-head); white-space: nowrap; }
.ft .tag .ico { width: 14px; height: 14px; }
.ft .tag.brand { background: var(--brand-a); color: var(--brand); } .ft .tag.gold { background: var(--gold-a); color: var(--gold); }
.ft .tag.ok { background: var(--ok-a); color: var(--ok); } .ft .tag.bad { background: var(--bad-a); color: var(--bad); } .ft .tag.info { background: var(--info-a); color: var(--info); }
.ft .delta { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--pill); font: 700 12px/1 var(--f-head); }
.ft .delta.up { color: var(--ok); background: var(--ok-a); } .ft .delta.down { color: var(--bad); background: var(--bad-a); } .ft .delta.flat { color: var(--t2); background: var(--mute-a); }

/* ---------- panels ---------- */
.ft .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; display: flex; flex-direction: column; }
.ft .panel > .ph { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; }
.ft .panel > .ph .meta { color: var(--t3); font-size: 13px; }
.ft .panel > .pb { padding: 0 22px 20px; }
.ft .panel > .pf { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); margin-top: auto; }
.ft .panel.pad { padding: 22px; }
.ft .divider { height: 1px; background: var(--line); }
.ft .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ft .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* KPI tiles (rider-app stat tiles: orange line icon in a tinted circle) */
.ft .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ft .kpi { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.ft .kpi .ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-a); color: var(--brand); flex: none; }
.ft .kpi .ic .ico { width: 22px; height: 22px; }
.ft .kpi .lb { font: 600 13px/18px var(--f-head); color: var(--t2); }
.ft .kpi .num { margin: 6px 0 8px; }
.ft .kpi .hint { font-size: 12px; color: var(--t3); }
.ft .kpi.hero { background: linear-gradient(160deg, #24170A 0%, var(--panel) 60%); border-color: rgba(255, 138, 0, .35); }

/* ---------- table ---------- */
.ft .tw { overflow: auto; min-height: 0; }
.ft table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ft .tbl th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font: 600 12px/16px var(--f-head); color: var(--t3); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ft .tbl th.sort { cursor: pointer; } .ft .tbl th.sort:hover { color: var(--t1); } .ft .tbl th.sorted { color: var(--t1); }
.ft .tbl th.sorted::after { content: ' ↓'; color: var(--brand); }
.ft .tbl td { padding: 10px 14px; height: 64px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ft .tbl th:first-child, .ft .tbl td:first-child { padding-left: 22px; } .ft .tbl th:last-child, .ft .tbl td:last-child { padding-right: 22px; }
.ft .tbl tbody tr { cursor: pointer; transition: background var(--fast); }
.ft .tbl tbody tr:hover td { background: #1C1C1C; }
.ft .tbl tbody tr.sel td { background: var(--sel); } .ft .tbl tbody tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
.ft .tbl tbody tr:last-child td { border-bottom: 0; }
.ft .tbl td.r, .ft .tbl th.r { text-align: right; } .ft .tbl td.st-cell { overflow: visible; }
.ft .tbl .ono { font: 800 15px/1 var(--f-head); } .ft .tbl .sub { display: block; font-size: 12px; color: var(--t3); margin-top: 4px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; }
.ft .tbl .amt { font: 700 15px/1 var(--f-head); }
.ft .tbl.compact td { height: 52px; }
/* dish thumbnails, stacked like avatars */
.ft .thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--raised); flex: none; display: block; }
.ft .thumb.s36 { width: 36px; height: 36px; border-radius: 9px; } .ft .thumb.s40 { width: 40px; height: 40px; }
.ft .thumb.s56 { width: 56px; height: 56px; border-radius: 12px; } .ft .thumb.s64 { width: 64px; height: 64px; border-radius: 12px; }
.ft .thumb.ph { display: grid; place-items: center; color: var(--t3); border: 1px dashed var(--line-2); }
.ft .stack { display: flex; align-items: center; }
.ft .stack .thumb { width: 40px; height: 40px; border: 2px solid var(--panel); border-radius: 12px; }
.ft .stack .thumb + .thumb { margin-left: -14px; }
.ft .stack .more { margin-left: -14px; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--panel); background: var(--raised); display: grid; place-items: center; font: 800 12px/1 var(--f-head); color: var(--t2); }
.ft tr:hover .stack .thumb, .ft tr:hover .stack .more { border-color: #1C1C1C; } .ft tr.sel .stack .thumb, .ft tr.sel .stack .more { border-color: var(--sel); }

/* pagination */
.ft .pager { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ft .pager .range { color: var(--t2); font-size: 13px; } .ft .pager .range b { color: var(--t1); }
.ft .pager .pages { display: flex; gap: 4px; margin-left: auto; }
.ft .pager .pages a, .ft .pager .pages button { min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--t2); font: 700 13px/34px var(--f-head); text-align: center; text-decoration: none; cursor: pointer; }
.ft .pager .pages a:hover, .ft .pager .pages button:hover { background: var(--hover); color: var(--t1); }
.ft .pager .pages .on { background: var(--brand); color: var(--on-brand); }
.ft .pager .pages .dis { opacity: .35; pointer-events: none; } .ft .pager .pages .gap { pointer-events: none; }
.ft .pager .size { display: flex; align-items: center; gap: 8px; color: var(--t3); font-size: 13px; }
.ft .pager .size .select { height: 36px; width: 84px; }

/* empty / skeleton / banners / toast / dialog */
.ft .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 24px; color: var(--t2); }
.ft .empty .ill { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-a); color: var(--brand); }
.ft .empty .ill .ico { width: 28px; height: 28px; } .ft .empty .h3 { color: var(--t1); }
.ft .skel { background: linear-gradient(90deg, #1E1E1E 0%, #2A2A2A 50%, #1E1E1E 100%); background-size: 200% 100%; animation: ft-sk 1.4s linear infinite; border-radius: var(--r-sm); }
@keyframes ft-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ft .banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); font-size: 14px; }
.ft .banner.warn { background: var(--warn-a); color: var(--warn); border: 1px solid rgba(255, 214, 90, .25); }
.ft .banner.bad { background: var(--bad-a); color: var(--bad); border: 1px solid rgba(255, 133, 133, .25); }
.ft .banner.info { background: var(--info-a); color: var(--info); border: 1px solid rgba(145, 191, 255, .25); }
.ft .banner.brand { background: var(--brand-a); color: var(--t1); border: 1px solid rgba(255, 138, 0, .3); } .ft .banner.brand .ico { color: var(--brand); }
.ft .banner .acts { margin-left: auto; display: flex; gap: 8px; }
.ft .toast { display: flex; align-items: center; gap: 12px; width: 380px; padding: 14px 16px; border-radius: var(--r-lg); background: #1E1E1E; border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); font-size: 14px; }
.ft .toast .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ft .toast.ok .ic { background: var(--ok-a); color: var(--ok); } .ft .toast.bad .ic { background: var(--bad-a); color: var(--bad); }
.ft .tip { display: inline-block; padding: 8px 10px; border-radius: var(--r-sm); background: #2A2A2A; color: var(--t1); font-size: 12px; line-height: 16px; box-shadow: var(--shadow-pop); }
.ft .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .62); display: grid; place-items: center; z-index: 50; }
.ft .dialog { width: min(560px, 92vw); border-radius: var(--r-xl); background: #191919; border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); overflow: hidden; }
.ft .dialog .dh { display: flex; gap: 14px; align-items: flex-start; padding: 24px 24px 8px; }
.ft .dialog .db { padding: 8px 24px 20px; color: var(--t2); }
.ft .dialog .df { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: #151515; border-top: 1px solid var(--line); }
.ft .dialog .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bad-a); color: var(--bad); }

/* ---------- split list + detail ---------- */
.ft .split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 480px); gap: 20px; min-height: 0; flex: 1; }
.ft .split > .panel { min-height: 0; overflow: hidden; }
.ft .detail { overflow-y: auto; }
.ft .detail .dhd { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ft .detail > .sec { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ft .detail > .sec:last-child { border-bottom: 0; }
.ft .detail > .sec > .h { font: 700 13px/18px var(--f-head); color: var(--t2); }
.ft .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; } .ft .kv dt { color: var(--t3); } .ft .kv dd { margin: 0; text-align: right; }
.ft .line { display: flex; gap: 14px; align-items: center; }
.ft .line .q { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-a); color: var(--brand); display: grid; place-items: center; font: 800 13px/1 var(--f-head); flex: none; }
.ft .line .nm { font: 600 14px/20px var(--f-head); } .ft .line .md { font-size: 12px; color: var(--t3); line-height: 18px; }
.ft .line .md .wish { color: var(--gold); }
.ft .sumrow { display: flex; justify-content: space-between; font-size: 14px; color: var(--t2); } .ft .sumrow.tot { color: var(--t1); font: 800 18px/1 var(--f-head); padding-top: 10px; border-top: 1px dashed var(--line-2); }
.ft .sumrow.disc { color: var(--ok); }
/* status stepper (customer-app order stepper) */
.ft .stepper-st { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.ft .stepper-st::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 3px; background: var(--line-2); border-radius: 3px; }
.ft .stepper-st .bar { position: absolute; left: 12.5%; top: 17px; height: 3px; background: var(--brand); border-radius: 3px; }
.ft .stepper-st .s { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 600 12px/1.2 var(--f-head); color: var(--t3); text-align: center; }
.ft .stepper-st .s .c { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); border: 2px solid var(--line-2); color: var(--t3); }
.ft .stepper-st .s.done .c { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ft .stepper-st .s.cur .c { background: #2A1A08; border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 5px rgba(255, 138, 0, .16); }
.ft .stepper-st .s.done, .ft .stepper-st .s.cur { color: var(--t1); }
.ft .timeline { display: flex; flex-direction: column; gap: 0; }
.ft .timeline .ev { display: grid; grid-template-columns: 52px 18px 1fr; gap: 10px; font-size: 13px; min-height: 34px; }
.ft .timeline time { color: var(--t3); text-align: right; font-variant-numeric: tabular-nums; }
.ft .timeline .dot { position: relative; } .ft .timeline .dot::before { content: ''; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.ft .timeline .ev:not(:last-child) .dot::after { content: ''; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--line-2); }

/* ---------- charts ---------- */
.ft .chart svg { display: block; width: 100%; height: 100%; }
.ft .chart .tick { fill: var(--t3); font: 500 12px var(--f-body); }
.ft .chart .lab { fill: var(--t1); font: 800 13px var(--f-head); }
.ft .rank { display: grid; grid-template-columns: 22px 48px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 22px; }
.ft .rank .pos { font: 800 14px/1 var(--f-head); color: var(--t3); } .ft .rank .pos.p1 { color: var(--gold); }
.ft .rank .bar { grid-column: 3 / -1; height: 6px; border-radius: 6px; background: var(--raised); overflow: hidden; } .ft .rank .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--brand)); }
.ft .mixbar { display: flex; height: 12px; border-radius: 12px; overflow: hidden; gap: 3px; } .ft .mixbar i { display: block; border-radius: 12px; }
.ft .legend { display: flex; gap: 10px; align-items: center; font-size: 14px; } .ft .legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.ft .heat { display: grid; grid-template-columns: 34px repeat(11, 1fr); gap: 4px; font-size: 11px; color: var(--t3); }
.ft .heat .c { height: 30px; border-radius: 6px; background: var(--raised); }

/* ---------- menu grid ---------- */
.ft .catnav { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.ft .catnav a { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: var(--r); color: var(--t2); text-decoration: none; font: 600 14px/1 var(--f-head); }
.ft .catnav a img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ft .catnav a:hover { background: var(--hover); color: var(--t1); } .ft .catnav a.on { background: var(--brand-a); color: var(--t1); }
.ft .catnav a .n { margin-left: auto; color: var(--t3); font-size: 12px; }
.ft .dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.ft .dish { position: relative; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--fast), transform var(--fast); cursor: pointer; }
.ft .dish:hover { border-color: #4a4a4a; }
.ft .dish .ph { flex: none; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 46%, rgba(255, 138, 0, .16), transparent 68%), var(--raised); position: relative; }
.ft .dish .ph img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.ft .dish .ph .tags { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.ft .dish .ph .tags .tag { background: rgba(15, 15, 15, .82); }
.ft .dish.out .ph img { filter: grayscale(1) brightness(.55); }
.ft .dish.out .ph::after { content: attr(data-out); position: absolute; inset: auto 10px 10px auto; padding: 6px 10px; border-radius: var(--pill); background: var(--bad); color: #2A0606; font: 800 12px/1 var(--f-head); }
.ft .dish .bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ft .dish .nm { font: 700 15px/20px var(--f-head); } .ft .dish .ds { font-size: 12px; color: var(--t3); line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.ft .dish .ft-row { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.ft .dish .price { font: 800 17px/1 var(--f-head); color: var(--brand); } .ft .dish .price small { font: 500 12px/1 var(--f-body); color: var(--t3); margin-right: 4px; }
.ft .upload { border: 2px dashed var(--line-2); border-radius: var(--r-lg); display: grid; place-items: center; text-align: center; gap: 8px; padding: 22px; color: var(--t2); }
.ft .photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 46%, rgba(255, 138, 0, .16), transparent 68%), var(--raised); } .ft .photo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; }
.ft .photo .acts { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.ft .photo .acts .btn { background: rgba(15, 15, 15, .88); border-color: var(--line-2); color: var(--t1); }
.ft .photo .acts .btn.danger { color: var(--bad); }

/* ---------- map (dispatch) ---------- */
.ft .mapbox { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #141414; min-height: 0; }
.ft .mapbox > img.tiles { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.ft .mapbox .chip { position: absolute; left: 16px; top: 16px; display: inline-flex; gap: 8px; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--pill); background: rgba(15, 15, 15, .88); border: 1px solid var(--line-2); font: 700 13px/1 var(--f-head); }
.ft .mapbox .chip .ico { color: var(--brand); }
.ft .mapbox .legend-box { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 16px; padding: 10px 14px; border-radius: var(--r); background: rgba(15, 15, 15, .88); border: 1px solid var(--line-2); font-size: 12px; color: var(--t2); }
.ft .mapbox .zoom { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.ft .pin { position: absolute; transform: translate(-50%, -50%); }
.ft .pin .b { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); box-shadow: 0 0 30px rgba(255, 138, 0, .8), 0 0 0 8px rgba(255, 138, 0, .28); }
/* the apps' pins (packages/funtasty_ui map.dart): the website's Funtasty rider on the yellow scooter on an orange disc (green when free; 42 px, set in dispatch.tsx), 3D house on a dark disc
   with a gold ring, the logo badge for the restaurant */
.ft .pin .b img { width: 38px; height: 38px; object-fit: contain; display: block; pointer-events: none; }
.ft .pin.free .b { background: #2FBF5B; box-shadow: 0 0 30px rgba(47, 191, 91, .75), 0 0 0 8px rgba(47, 191, 91, .26); }
.ft .pin.home .b { width: 48px; height: 48px; background: radial-gradient(circle at 40% 35%, #2A2420, #141210); border: 2px solid var(--gold); box-shadow: 0 0 22px rgba(255, 193, 7, .45), 0 0 0 6px rgba(255, 193, 7, .2); }
.ft .pin.home .b img { width: 32px; height: 32px; }
.ft .pin.home.wait .b { border-color: #91BFFF; box-shadow: 0 0 22px rgba(145, 191, 255, .45), 0 0 0 6px rgba(145, 191, 255, .2); }
.ft .pin.rest .b { width: 54px; height: 54px; background: none; box-shadow: 0 0 0 6px rgba(255, 138, 0, .25), 0 8px 20px rgba(0, 0, 0, .6); }
.ft .pin.rest .b img { width: 54px; height: 54px; border-radius: 50%; }
.ft .pin .lbl2 { position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: var(--r-xs); background: rgba(15, 15, 15, .9); font: 700 11px/1 var(--f-head); }
.ft .route { position: absolute; inset: 0; pointer-events: none; }
.ft .qi { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); }
.ft .qi.late { border-color: rgba(255, 133, 133, .45); box-shadow: inset 4px 0 0 var(--bad); }
.ft .rider { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); }
.ft .rider .on-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.ft .rider .off-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }

/* ---------- kitchen (KDS) ---------- */
.ft .kds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 0; flex: 1; }
.ft .lane { display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-xl); background: #131313; border: 1px solid var(--line); overflow: hidden; }
.ft .lane .lh { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--lane) 10%, transparent), transparent); box-shadow: inset 0 3px 0 var(--lane); flex: none; }
.ft .lane .lh .h2 { font-size: 20px; }
.ft .lane .lh .cnt { min-width: 30px; height: 28px; padding: 0 9px; border-radius: var(--pill); background: var(--lane); color: var(--on-brand); font: 800 14px/28px var(--f-head); text-align: center; }
.ft .lane .lh .meta { margin-left: auto; color: var(--t3); font-size: 13px; }
.ft .lane .lb { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ft .lane.l-new { --lane: var(--brand); } .ft .lane.l-prep { --lane: var(--gold); } .ft .lane.l-ready { --lane: #6FA8FF; }
.ft .ticket { border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; flex: none; }
.ft .ticket.fresh { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 138, 0, .18); }
.ft .ticket.warn { border-color: rgba(255, 214, 90, .6); }
.ft .ticket.late { border-color: var(--bad); box-shadow: inset 0 4px 0 var(--bad); }
.ft .ticket .th { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.ft .ticket .no { font: 400 34px/1 var(--f-display); letter-spacing: .01em; }
.ft .ticket .who { font-size: 13px; color: var(--t2); line-height: 18px; }
.ft .ticket .timer { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ft .ticket .timer .tt { text-align: right; } .ft .ticket .timer .tt b { display: block; font: 800 18px/1 var(--f-head); white-space: nowrap; } .ft .ticket .timer .tt span { font-size: 12px; color: var(--t3); white-space: nowrap; }
.ft .ring { width: 46px; height: 46px; flex: none; } .ft .ring circle { fill: none; stroke-width: 5; } .ft .ring .bg { stroke: #2E2E2E; } .ft .ring .fg { stroke: var(--gold); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ft .ticket.warn .ring .fg { stroke: var(--warn); } .ft .ticket.late .ring .fg { stroke: var(--bad); } .ft .ticket.late .timer .tt b { color: var(--bad); }
.ft .ticket .meta-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; }
.ft .ticket .items { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.ft .ticket .it { display: grid; grid-template-columns: 44px 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.ft .ticket .it .thumb { width: 44px; height: 44px; border-radius: 10px; }
.ft .ticket .it .q { font: 800 20px/1 var(--f-head); color: var(--brand); }
.ft .ticket .it .nm { font: 700 18px/24px var(--f-head); } .ft .ticket .it .md { font-size: 14px; color: var(--t2); line-height: 20px; }
.ft .ticket .it .wish { display: inline-block; margin-top: 4px; padding: 3px 9px; border-radius: var(--r-xs); background: var(--gold-a); color: var(--gold); font: 700 13px/18px var(--f-head); }
.ft .ticket .note { margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-a); color: var(--warn); font-size: 14px; display: flex; gap: 8px; }
.ft .ticket .ta { display: flex; gap: 10px; padding: 0 16px 16px; }
.ft .ticket .ta .btn { height: 54px; border-radius: var(--r-lg); font-size: 17px; }
.ft .ticket .ta .btn.f1 { flex: 1; }
.ft .kds-top { display: flex; align-items: center; gap: 16px; }
.ft .kstat { display: flex; gap: 10px; }
.ft .kstat .s { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); font: 700 14px/1 var(--f-head); }
.ft .kstat .s b { font-size: 18px; }
/* standalone kitchen device: bigger, no sidebar */
/* the dynamic viewport (100dvh): exactly the visible height under a tablet browser's bars, so the bar never scrolls away;
   100vh stays for browsers without dvh */
.ft.kdev { display: grid; grid-template-rows: 76px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.ft.kdev .top { grid-column: 1; height: 76px; gap: 14px; }
.ft.kdev .top .logo img { height: 40px; }
.ft.kdev .body { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ft.kdev .iconbtn { width: 48px; height: 48px; }
.ft.kdev .lang a { height: 38px; line-height: 38px; min-width: 46px; }
.ft.kdev .top .klbl, .ft.kdev .top .kbreak { display: none; }
.ft.kdev .top .live-chip { white-space: nowrap; }
/* the tablet's tickets (portrait and landscape): number and timer on the first row, name · time and type below, so the
   timer's "15 Min" / "fertig seit" never break inside a narrow card */
.ft.kdev .ticket .th { flex-wrap: wrap; row-gap: 8px; }
.ft.kdev .ticket .th > div:not(.timer) { order: 1; flex: 1 1 100%; }
/* touch targets: at least 44 × 44 px for the finger where the design draws the control smaller (DE | EN, status chip,
   the ticket number, "Gesehen"); a transparent hit area around it, the look unchanged */
.ft.kdev .lang button, .ft.kdev .live-chip, .ft .ticket .no, .ft .alert-card .btn.ghost { position: relative; }
.ft.kdev .lang button::after, .ft.kdev .live-chip::after, .ft .ticket .no::after, .ft .alert-card .btn.ghost::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
/* DE and EN touch each other: each one's extra width goes outwards, so a tap near the middle never lands on the other */
.ft.kdev .lang button:first-child::after { transform: translate(calc(-50% - 3px), -50%); }
.ft.kdev .lang button:last-child::after { transform: translate(calc(-50% + 3px), -50%); }
/* portrait tablet (iPad 834 px, Android 800 px; no design reference): the bar gets a second row with every action as
   icon + label (≥ 56 px high), New and Preparing side by side, Ready below over the full width with its tickets in two
   columns; a ticket's head wraps (number and timer above, name and type below) and dish names wrap instead of clipping */
@media (max-width: 1100px) {
  .ft.kdev { grid-template-rows: auto minmax(0, 1fr); }
  .ft.kdev .top { height: auto; flex-wrap: wrap; row-gap: 10px; padding-top: 10px !important; padding-bottom: 10px !important; }
  .ft.kdev .top > * { flex: none; }
  .ft.kdev .top > .f1 { flex: 1 1 0; }
  .ft.kdev .top .kbreak { display: block; order: 1; flex: 0 0 100%; height: 0; }
  .ft.kdev .top .kact { order: 2; flex: 1 1 0; min-width: 0; width: auto; height: 56px; padding: 0 6px; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: none; }
  .ft.kdev .top .kact > span { display: block; max-width: 100%; font: 700 12px/14px var(--f-head); white-space: nowrap; }
  .ft.kdev .kds { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
  .ft.kdev .lane.l-ready { grid-column: 1 / -1; }
  .ft.kdev .lane.l-ready .lb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; }
  .ft.kdev .lane.l-ready .lb > .empty { grid-column: 1 / -1; }
  .ft.kdev .ticket .it .nm, .ft.kdev .ticket .it .md { overflow-wrap: anywhere; hyphens: auto; }
}

/* new-order alert */
.ft .alert-card { width: min(520px, 92vw); border-radius: var(--r-xl); overflow: hidden; background: #191919; border: 2px solid var(--brand); box-shadow: 0 0 0 8px rgba(255, 138, 0, .18), var(--shadow-pop); }
.ft .alert-card .ah { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: linear-gradient(120deg, #FFC107, #FF8A00); color: var(--on-brand); }
.ft .alert-card .ah .bell { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .14); }

/* settings form */
.ft .snav { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.ft .snav a { display: flex; gap: 12px; align-items: center; height: 44px; padding: 0 14px; border-radius: var(--r); color: var(--t2); text-decoration: none; font: 600 14px/1 var(--f-head); }
.ft .snav a:hover { background: var(--hover); color: var(--t1); } .ft .snav a.on { background: var(--brand-a); color: var(--t1); } .ft .snav a.on .ico { color: var(--brand); }
.ft .formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.ft .setrow { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ft .setrow:last-child { border-bottom: 0; }
.ft .savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: var(--r-lg); background: #1C1C1C; border: 1px solid rgba(255, 138, 0, .4); box-shadow: var(--shadow-pop); }
.ft .offer { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.ft .offer:last-child { border-bottom: 0; }
.ft .offer .big { width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center; background: linear-gradient(140deg, #FFC107, #FF8A00); color: var(--on-brand); font: 400 26px/1 var(--f-display); }
.ft .offer .big.off { background: var(--raised); color: var(--t3); }

@media (max-width: 1440px) { .ft { --side-w: 232px; --pad: 24px; } .ft .kpi .num { font-size: 26px; } .ft .split { grid-template-columns: minmax(0, 1fr) 380px; } }
.ft col.c-dish { width: 128px; } .ft col.c-no { width: 118px; } .ft col.c-items { width: 22%; } .ft col.c-type { width: 160px; } .ft col.c-st { width: 160px; } .ft col.c-amt { width: 108px; }
@media (max-width: 1600px) {
  .ft col.c-dish { width: 96px; } .ft col.c-no { width: 116px; } .ft col.c-type { width: 132px; } .ft col.c-st { width: 148px; } .ft col.c-amt { width: 96px; }
  .ft .tbl .stack .thumb + .thumb, .ft .tbl .stack .more { margin-left: -22px; }
}
@media (max-width: 1600px) { .ft .tbl .c-items { display: none; } .ft col.c-items { visibility: collapse; width: 0 !important; } .ft .chips a, .ft .chips button { padding: 0 12px; } }
@media (max-width: 1300px) { .ft .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ft .tbl td:has(> button), .ft .tbl td:has(> .btn), .ft .tbl td:has(> a.btn) { text-overflow: clip; }
/* pizzas keep their original photos (owner, 2026-10-26): they fill the frame like before the studio tiles */
.ft .dish .ph img[src*="/food/pizza"], .ft .photo img[src*="/food/pizza"] { object-fit: cover; padding: 0; }