:root{
  --bg:#f3f5f7;
  --panel:#ffffff;
  --card:#ffffff;
  --field:#ffffff;
  --text:#2c333a;
  --muted:#6b7280;
  --border:#e3e6ea;
  --ink:#2c333a;
  --accent:#f5c400;
  --accent-deep:#e0b000;
  --accent-soft:#fff6d0;
  --danger:#e23d3d;
  --occupied:#e23d3d;
  --free:#1aa34a;
  --link:#3a424c;
  --btn-bg:#ffffff;
  --hover:#f7f8fa;
  --focus:rgba(245,196,0,.45);
  --sidebar:228px;
}

*{ box-sizing:border-box }
body{ margin:0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
a{ color:var(--link); text-decoration:none }
.layout{ display:grid; grid-template-columns: 1fr; min-height:100vh; }
.sidebar{ display:none; background:var(--panel); border-right:1px solid var(--border); padding:12px 10px; position:sticky; top:0; height:100vh; overflow:auto; }
body.withSide .layout{ grid-template-columns: var(--sidebar) 1fr; }
body.withSide .sidebar{ display:block; }
.brand{ font-weight:800; letter-spacing:.2px; margin:4px 8px 12px; font-size:18px; color:#1f2933; }
.navSec{ margin:14px 8px 4px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8b95a1; }
.nav a{ display:block; padding:8px 10px; border-radius:8px; color:#3a424c; margin:2px 0; border:1px solid transparent; font-size:13.5px; }
.nav a:hover{ background:var(--hover); }
.nav a.active{ background:#f3f5f7; color:#2c333a; font-weight:700; box-shadow:inset 3px 0 0 var(--accent); }
.appbar{ position:sticky; top:0; z-index:50; display:flex; align-items:stretch; height:64px; background:#fff; color:#3a424c; border-bottom:3px solid var(--accent); }
.appLogo{ display:flex; align-items:center; justify-content:center; width:64px; flex:none; background:#fff; padding:6px; }
.appLogo img{ width:100%; height:100%; object-fit:contain; display:block; }
.appIcons{ display:flex; align-items:stretch; min-width:0; overflow:auto; }
.appIcon{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:72px; max-width:92px; padding:6px 8px; color:#6b7280; font-size:10px; line-height:1.15; text-align:center; }
.appOrderCount{ position:absolute; top:2px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:#e23b2f; color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; }
.appOrderCount[hidden]{ display:none; }
.appBellBtn{ margin-right:6px; border:1px solid #f0d48a; background:#fff3cd; color:#7a4b00; border-radius:8px; padding:6px 10px; font-weight:800; cursor:pointer; }
.appIcon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.appIcon span{ display:block; }
.appIcon:hover{ background:#f3f5f7; color:#3a424c; }
.appIcon.active, .appIcon.active:hover{ background:var(--accent); color:#1c1608; box-shadow:none; }
.appTools{ margin-left:auto; display:flex; align-items:center; position:relative; flex:none; }
.appUserBtn{ background:transparent; color:#3a424c; border:0; cursor:pointer; font-weight:700; padding:8px 14px; font:inherit; }
.appUserBtn:hover{ background:#f3f5f7; }
.appUserMenu{ position:absolute; right:8px; top:56px; background:#fff; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:12px; width:260px; box-shadow:0 10px 28px rgba(16,24,40,.16); z-index:70; }
.appUserMenu[hidden]{ display:none; }
.appSub{ position:sticky; top:64px; z-index:40; display:flex; align-items:stretch; gap:2px; background:#fff; border-bottom:1px solid var(--border); padding:0 10px; min-height:44px; overflow:auto; }
.appSub[hidden]{ display:none; }
.appSub a{ display:flex; align-items:center; padding:0 12px; color:#3a424c; font-weight:650; white-space:nowrap; border-bottom:3px solid transparent; }
.appSub a:hover{ color:#1f2933; }
.appSub a.active{ color:#1c1608; border-bottom-color:var(--accent); }
body.hasAppbar .sidebar{ top:64px; height:calc(100vh - 64px); }
body.noSide .layout{ grid-template-columns:1fr; }
body.noSide .sidebar{ display:none; }
.main{ padding:14px 16px; }
.topbar{ display:flex; align-items:center; gap:12px; margin-bottom:10px; min-height:36px; }
.topbar .spacer{ margin-left:auto; }
.btn{ padding:7px 12px; border-radius:8px; border:1px solid #d5dbe2; background:#fff; color:var(--text); cursor:pointer; font-size:13px; }
.btn:hover{ background:#f6f8f9; }
.btn.primary{ background:var(--accent); border-color:var(--accent-deep); color:#1c1608; font-weight:700; }
.btn.primary:hover{ background:#e6b400; }
.btn.danger{ background:#fff; border-color:#f0b4b4; color:#c62828; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; margin:8px 0; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
input, select, textarea{ width:100%; padding:10px 10px; border-radius:10px; border:1px solid var(--border); background:var(--field); color:var(--text); }
input[type="checkbox"], input[type="radio"]{ width:auto; padding:0; margin:0; }
input.clock24{ font-variant-numeric:tabular-nums; letter-spacing:.04em; }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent-deep);
  box-shadow:0 0 0 3px var(--focus);
}
select option{ background:var(--panel); color:var(--text); }
label{ font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
table{ width:100%; border-collapse:collapse; }
th,td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; font-size:13px; }
th{ color:var(--muted); font-weight:700; }
tbody tr:hover{ background:var(--hover); }
.muted{ color:var(--muted); }

.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tab{ padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; user-select:none; font-size:13px; }
.tab.active{ background:var(--accent); border-color:var(--accent-deep); color:#1c1608; font-weight:700; }

.split{ display:grid; grid-template-columns: minmax(320px, 1fr) 400px; gap:10px; align-items:start; }
.floorSplit{ grid-template-columns: 1fr 400px; }
@media (max-width: 1100px){ .split{ grid-template-columns: 1fr; } }
.list{ background:var(--hover); border:1px solid var(--border); border-radius:14px; overflow:auto; max-height:75vh; }
.list .rowItem{ padding:10px 10px; border-bottom:1px solid var(--border); cursor:pointer; }
.list .rowItem:hover{ background:var(--hover); }
.badge{ font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.badge.green{ border-color:#b7e4c7; color:#146c36; background:#e8f7ee; }
.badge.orange{ border-color:#f3d19a; color:#8a5a00; background:#fff6e8; }
.badge.red{ border-color:#f3b4b4; color:#a32020; background:#fdecec; }

.board{ display:flex; gap:10px; overflow-x:auto; align-items:flex-start; padding-bottom:4px; }
.boardCol{ flex:1 0 220px; min-width:220px; background:#f7f8fa; border:1px solid var(--border); border-radius:10px; padding:8px; }
.boardCol h3{ margin:0 0 8px; font-size:12px; font-weight:800; color:var(--muted); }
.boardCol .colCount{ font-weight:700; }
.boardCard{ border:1px solid var(--border); border-radius:12px; padding:8px; margin-bottom:8px; background:var(--card); cursor:pointer; }
.boardCard:hover, .boardCard.selected{ border-color:var(--accent-deep); }
.catRow{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.prodGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:8px; max-height:68vh; overflow:auto; }
.prodTile{ text-align:left; min-height:78px; display:flex; flex-direction:column; justify-content:space-between; gap:6px; padding:8px; }
.prodTile img{ width:100%; height:72px; object-fit:cover; border-radius:8px; background:#f3f4f6; }
.prodTile .price{ font-size:12px; color:var(--muted); }
.expressSplit{ grid-template-columns: 1fr 420px; }
@media (max-width: 1100px){ .expressSplit{ grid-template-columns: 1fr; } }

.tablesGrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap:10px; }
.tablesGrid.tablesGridPositioned{ grid-template-columns: repeat(12, 1fr); grid-auto-rows: 84px; }
.tableCard{ border:1px solid #d7ddd8; border-radius:10px; padding:10px 8px; background:#fff; text-align:center; cursor:pointer; user-select:none; min-height:78px; }
.tableCard:hover{ filter:brightness(.97); }
.tableCard.free{ background:#e9f8ee; border-color:#8ed4a4; }
.tableCard.free .num{ color:#157a3a; }
.tableCard.busy{ background:#fde8e6; border-color:#f0a49e; }
.tableCard.busy .num{ color:#b42318; }
.tableCard.paying{ background:#fff4df; border-color:#f0c98a; }
.tableCard.paying .num{ color:#9a6700; }
.tableCard .num{ font-size:26px; font-weight:800; line-height:1.1; }
.tableCard .sub{ font-size:11px; color:#5c6770; margin-top:4px; }