/* ==========================================================================
   QRMenu — BackOffice shell
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Left rail ---------------------------------------------------------- */
.app-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink-950);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.rail-head .logo-word small {
  display: block;
  font-family: var(--face-ui);
  font-size: 10px;
  color: var(--tx-faint);
  letter-spacing: 0.04em;
  margin-top: -3px;
}

.rail-scope {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.scope-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-tight);
  background: var(--ink-850);
  text-align: left;
  transition: border-color var(--quick);
}
.scope-btn:hover { border-color: var(--line-firm); }
.scope-btn .thumb { width: 26px; height: 26px; border-radius: 6px; font-size: 10px; }
.scope-btn b { display: block; font-size: var(--t-sm); font-weight: 550; line-height: 1.3; }
.scope-btn span { font-size: 11px; color: var(--tx-mute); }
.scope-btn svg { width: 13px; height: 13px; margin-left: auto; color: var(--tx-faint); flex: none; }

.rail-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-3) var(--s-5);
}
.nav-group + .nav-group { margin-top: var(--s-5); }
.nav-group-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--tx-faint);
  padding: 0 10px;
  margin-bottom: 7px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-tight);
  font-size: var(--t-sm);
  color: var(--tx-soft);
  transition: background var(--quick), color var(--quick);
  position: relative;
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: 0.8; }
.nav-item:hover { background: rgba(240, 228, 202, 0.05); color: var(--tx); }
.nav-item[aria-current="page"] {
  background: rgba(217, 172, 85, 0.11);
  color: var(--brass-lit);
  font-weight: 550;
}
.nav-item[aria-current="page"] svg { opacity: 1; }
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -11px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--brass);
}
.nav-item .nav-tag {
  margin-left: auto;
  font-family: var(--face-num);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-round);
  background: var(--st-danger);
  color: #FFF;
  font-weight: 600;
}
.nav-item .nav-tag[data-quiet="true"] { background: rgba(240, 228, 202, 0.1); color: var(--tx-mute); }
.nav-item[data-soon="true"] { opacity: 0.42; pointer-events: none; }

.rail-foot { flex: none; border-top: 1px solid var(--line); padding: var(--s-3); }
.rail-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-tight);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  transition: background var(--quick);
}
.rail-user:hover { background: rgba(240, 228, 202, 0.05); }
.rail-user b { display: block; font-size: var(--t-sm); font-weight: 550; }
.rail-user span { font-size: 11px; color: var(--tx-mute); }

/* --- Topbar ------------------------------------------------------------- */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--topbar-h);
  padding: 0 var(--s-6);
  background: rgba(19, 17, 13, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
[data-skin="linen"] .app-topbar {
  background: rgba(250, 246, 238, 0.92);
}
.crumb { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--tx-mute); min-width: 0; }
.crumb a:hover { color: var(--tx); }
.crumb b { color: var(--tx); font-weight: 550; }
.crumb-sep { color: var(--tx-faint); }

.topbar-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }





.rail-toggle { display: none; }
@media (max-width: 1080px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--rail-w);
    z-index: 75;
    transform: translateX(-100%);
    transition: transform var(--calm);
    box-shadow: var(--lift-2);
  }
  .app-rail[data-open="true"] { transform: none; }
  .rail-toggle { display: grid; }
}

/* --- Page header -------------------------------------------------------- */
.app-body { padding: var(--s-6); flex: 1; }





/* --- Layout splits ------------------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--s-5); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1fr) 400px; }
.split-left { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 1160px) {
  .split, .split-wide, .split-left { grid-template-columns: minmax(0, 1fr); }
}

/* --- Live order board --------------------------------------------------- */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  align-items: start;
}
.board-col {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.board-col-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.board-col-head b { font-size: var(--t-sm); font-weight: 600; }
.board-col-head .count {
  margin-left: auto;
  font-family: var(--face-num);
  font-size: var(--t-xs);
  color: var(--tx-mute);
}
.board-col-head .pip { width: 7px; height: 7px; border-radius: 50%; }
.board-col-list { padding: var(--s-3); display: grid; gap: var(--s-3); }

.order-card {
  padding: var(--s-3) var(--s-4);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-tight);
  border-left: 3px solid var(--o-tint, var(--line-loud));
  display: grid;
  gap: 7px;
  transition: border-color var(--quick), transform var(--quick);
  cursor: pointer;
}
.order-card:hover { border-color: var(--line-firm); transform: translateY(-1px); }
.order-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.order-no { font-family: var(--face-num); font-size: var(--t-sm); font-weight: 600; }
.order-age { font-family: var(--face-num); font-size: var(--t-xs); color: var(--tx-mute); }
.order-age[data-late="true"] { color: var(--st-danger); font-weight: 600; }
.order-meta { display: flex; gap: var(--s-3); font-size: var(--t-xs); color: var(--tx-mute); }
.order-items { font-size: var(--t-xs); color: var(--tx-soft); line-height: 1.5; }
.order-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.order-total { font-family: var(--face-num); font-size: var(--t-sm); font-weight: 600; }

/* --- Menu builder ------------------------------------------------------- */
.builder { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 0; }
.builder-side { border-right: 1px solid var(--line); padding: var(--s-3); }
.cat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-tight);
  font-size: var(--t-sm);
  color: var(--tx-soft);
  cursor: pointer;
  transition: background var(--quick);
}
.cat-item:hover { background: rgba(240, 228, 202, 0.05); }
.cat-item[aria-current="true"] { background: var(--ink-700); color: var(--tx); font-weight: 550; }
.cat-item .grip { color: var(--tx-faint); cursor: grab; }
.cat-item .count { margin-left: auto; font-family: var(--face-num); font-size: 11px; color: var(--tx-faint); }
@media (max-width: 900px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder-side { border-right: 0; border-bottom: 1px solid var(--line); }
}

.item-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.item-row:hover { background: rgba(240, 228, 202, 0.03); }
.item-row .thumb { width: 52px; height: 52px; border-radius: 9px; }
.item-name { font-size: var(--t-sm); font-weight: 550; }
.item-desc { font-size: var(--t-xs); color: var(--tx-mute); margin-top: 2px; }
.item-price { font-family: var(--face-num); font-size: var(--t-sm); }




@media (max-width: 720px) {
  .item-row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: var(--s-2); }
}

/* --- Table grid (dining tables) ----------------------------------------- */
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--s-3); }
.table-tile {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--ink-850);
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  text-align: center;
  transition: border-color var(--quick);
}
.table-tile:hover { border-color: var(--line-firm); }
.table-tile[data-busy="true"] { border-color: rgba(224, 163, 46, 0.4); background: rgba(224, 163, 46, 0.05); }
.table-code { font-family: var(--face-num); font-size: var(--t-md); font-weight: 600; }
.table-seats { font-size: var(--t-xs); color: var(--tx-mute); }

/* --- Reports ------------------------------------------------------------ */
.report-filters {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: var(--s-5);
}
.heat { display: grid; grid-template-columns: 42px repeat(12, minmax(0, 1fr)); gap: 3px; font-size: 10px; }
.heat-label { color: var(--tx-faint); font-family: var(--face-num); display: flex; align-items: center; }
.heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(217, 172, 85, calc(var(--v, 0) * 0.9 + 0.04));
}
.heat-head { color: var(--tx-faint); font-family: var(--face-num); text-align: center; }

/* --- Kitchen print sheet / QR sheet ------------------------------------- */
.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--s-4); }
.qr-card {
  padding: var(--s-5) var(--s-4);
  background: var(--linen-50);
  color: var(--on-linen);
  border-radius: 6px;
  text-align: center;
  box-shadow: var(--lift-paper);
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}
.qr-card h3 { font-family: var(--face-display); font-size: var(--t-md); font-weight: 600; }
.qr-card .table-code { color: var(--on-linen); }
.qr-card p { font-size: 11px; color: var(--on-linen-mute); line-height: 1.5; }
.qr-card .cut {
  width: 100%;
  border-top: 1px dashed var(--line-paper);
  padding-top: 9px;
  font-family: var(--face-num);
  font-size: 10px;
  color: var(--on-linen-mute);
}

/* --- Invoice paper ------------------------------------------------------ */
.invoice-paper { padding: var(--s-7); max-width: 760px; }
.invoice-head { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.invoice-head h2 { font-family: var(--face-display); font-size: var(--t-lg); font-weight: 600; }
.invoice-no { font-family: var(--face-num); font-size: var(--t-sm); color: var(--on-linen-soft); }








/* --- Tighter gutters on small screens ----------------------------------- */
@media (max-width: 640px) {
  .app-body { padding: var(--s-4); }
  .app-topbar { padding: 0 var(--s-4); }
  .page-head { align-items: flex-start; flex-direction: column; gap: var(--s-3); }
  .toolbar { padding: var(--s-3) var(--s-4); }
  table.data thead th,
  table.data tbody td { padding-inline: var(--s-4); }
  .panel-body, .panel-head, .panel-foot { padding-inline: var(--s-4); }
}