/* Business panel + kitchen board. Mobile: bottom tabs. Desktop: left rail. */
.panel-page { background: var(--paper); }
.p-auth { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.p-auth .card { width: 100%; max-width: 440px; padding: 28px 22px; display: grid; gap: 16px; box-shadow: var(--shadow); }
.p-auth h1 { font-size: 26px; }
.p-auth .alt { text-align: center; font-size: 14px; color: var(--muted); }
.p-auth .alt a { color: var(--brand); font-weight: 600; }
.p-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p-kinds label { position: relative; }
.p-kinds input { position: absolute; opacity: 0; }
.p-kinds span { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--line-2); border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; background: var(--card); }
.p-kinds input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
.p-kinds input:focus-visible + span { outline: 3px solid var(--brand-soft); }

.p-shell { min-height: 100svh; display: grid; grid-template-columns: 1fr; }
.p-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.p-venue { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.p-main { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); max-width: 1080px; width: 100%; margin: 0 auto; }
.p-tabs { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.p-tabs a { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 9px; text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 600; min-height: 56px; }
.p-tabs a svg { width: 22px; height: 22px; }
.p-tabs a[aria-current="page"] { color: var(--brand); }
.p-tabs .badge { position: absolute; transform: translate(12px, -4px); min-width: 18px; height: 18px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 5px; }
.p-tabs a { position: relative; }
@media (min-width: 960px) {
  .p-shell { grid-template-columns: 232px 1fr; }
  .p-tabs { position: sticky; top: 0; height: 100svh; grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: start; gap: 2px; padding: 76px 12px 12px; border-top: 0; border-inline-end: 1px solid var(--line); background: var(--paper); }
  .p-tabs a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; min-height: 44px; justify-items: start; }
  .p-tabs a[aria-current="page"] { background: var(--brand-soft); }
  .p-tabs .badge { position: static; transform: none; margin-inline-start: auto; }
  .p-top { grid-column: 1 / -1; }
  .p-main { padding-bottom: 40px; }
}

.p-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.p-h h1 { font-size: 24px; }
.p-h p { width: 100%; color: var(--muted); font-size: 14px; }
.p-sec { padding: 16px; display: grid; gap: 12px; margin-bottom: 14px; }
.p-sec > h2 { font-size: 17px; }
.p-sec > p.muted { font-size: 14px; }

/* Empty state / onboarding */
.p-start { display: grid; gap: 10px; }
.p-start button { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; text-align: start; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.p-start button:hover { border-color: var(--brand); }
.p-start .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.p-start strong { display: block; font-size: 16px; }
.p-start small { color: var(--muted); font-size: 13.5px; }

/* Menu editor */
.p-cat { margin-bottom: 14px; overflow: hidden; }
.p-cat-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.p-cat-h h2 { font-size: 16.5px; }
.p-cat-h .meta { font-size: 12.5px; color: var(--muted); }
.p-items { display: grid; }
.p-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.p-item:last-child { border-bottom: 0; }
.p-item .th { width: 52px; height: 52px; border-radius: 10px; background: var(--sand); object-fit: cover; }
.p-item .th.ph { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.p-item .nm { font-weight: 600; font-size: 15px; cursor: pointer; background: none; border: 0; padding: 0; text-align: start; }
.p-item .sub { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.p-item.off .nm { color: var(--muted); text-decoration: line-through; }
.p-add { display: flex; gap: 8px; padding: 10px 16px 14px; }
.p-move { display: inline-flex; flex-direction: column; }
.p-move button { border: 0; background: none; color: var(--muted); padding: 0 6px; height: 18px; cursor: pointer; font-size: 12px; line-height: 1; }
.p-move button:hover { color: var(--ink); }

.p-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-tr { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.p-tr summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.p-photo { display: flex; gap: 12px; align-items: center; }
.p-photo img, .p-photo .ph { width: 88px; height: 88px; border-radius: 14px; object-fit: cover; background: var(--sand); display: grid; place-items: center; color: var(--muted); font-size: 12px; }

/* Places / QR */
.p-places { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.p-place { padding: 12px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.p-place .qr svg { width: 100%; height: auto; }
.p-place .lb { font-weight: 700; }
.p-link { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--sand); border-radius: 12px; font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }

/* Insights */
.p-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p-kpi { padding: 14px; }
.p-kpi b { display: block; font-size: 26px; letter-spacing: -0.02em; }
.p-kpi span { font-size: 12.5px; color: var(--muted); }
.p-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.p-bars i { flex: 1; background: var(--brand-soft); border-radius: 4px 4px 0 0; min-height: 2px; }
.p-list li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; font-size: 14.5px; }
.p-list { list-style: none; margin: 0; padding: 0; }

/* Import preview */
.p-prev-cat { font-weight: 700; margin-top: 8px; }
.p-prev-item { display: grid; grid-template-columns: 1fr 96px 36px; gap: 6px; align-items: center; }
.p-prev-item .input { min-height: 38px; padding: 6px 10px; font-size: 14.5px; }

/* Board */
.b-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.b-title { font-size: 20px; }
.b-stations { display: flex; gap: 6px; flex-wrap: wrap; }
.b-live { font-size: 12.5px; font-weight: 700; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.b-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.b-live.off { color: var(--bad); }
@keyframes pulse { 50% { opacity: .3; } }
.b-calls { display: grid; gap: 8px; margin-bottom: 12px; }
.b-call { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); border: 1px solid rgba(180, 83, 9, .25); font-size: 15px; }
.b-call.kind-hesap { background: var(--ok-soft); border-color: rgba(21, 128, 61, .25); }
.b-call.kind-soru { background: #EEF2FF; border-color: #C7D2FE; }
.b-cols { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .b-cols { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.b-col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.b-count { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0 8px; font-size: 12px; min-width: 22px; text-align: center; }
.b-count:empty { display: none; }
.b-col-body { display: grid; gap: 10px; }
.b-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: var(--shadow); }
.b-card.is-new { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.b-card.is-late .b-age { color: var(--bad); font-weight: 700; }
.b-card-top { display: flex; align-items: center; gap: 8px; }
.b-num { font-size: 20px; letter-spacing: -0.02em; }
.b-place { font-weight: 700; }
.b-age { font-size: 12.5px; color: var(--muted); }
.b-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 16px; }
.b-note { font-size: 13.5px; color: var(--warn); font-weight: 600; }
.b-onote { padding: 6px 10px; background: var(--warn-soft); border-radius: 8px; }
.b-card-foot { display: flex; align-items: center; gap: 8px; }
.b-empty { color: var(--muted); font-size: 14px; padding: 18px 4px; }

/* Kitchen screen: dark, big */
.kitchen-page { --paper: #121212; --card: #1C1C1C; --ink: #F5F2EC; --muted: #A49C92; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.2); --sand: #262626; color-scheme: dark; background: var(--paper); color: var(--ink); }
.kitchen-page .p-main { max-width: none; padding: 14px 14px 24px; }
.kitchen-page .b-lines { font-size: 18px; }
.kitchen-page .btn { background: #F5F2EC; color: #121212; }
.kitchen-page .btn.brand { background: var(--brand); color: #fff; }
.kitchen-page .btn.ghost, .kitchen-page .btn.danger { background: transparent; color: var(--ink); }
.kitchen-page .chip { background: var(--card); color: var(--ink); }
.kitchen-page .chip[aria-pressed="true"] { background: var(--ink); color: #121212; }
.kitchen-page .b-call { color: #121212; }

/* Print: QR cards and price list */
.print-only { display: none; }
@media print {
  body * { visibility: hidden !important; }
  .print-only, .print-only * { visibility: visible !important; }
  .print-only { display: block !important; position: absolute; inset: 0; }
  @page { size: A4; margin: 10mm; }
}
.qr-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8mm; font-family: var(--font); color: #111; }
.qr-card { border: 1px dashed #bbb; border-radius: 4mm; padding: 6mm; display: grid; justify-items: center; gap: 2mm; text-align: center; break-inside: avoid; }
.qr-card .vn { font-weight: 800; font-size: 13pt; }
.qr-card .ml { font-size: 9pt; color: #444; }
.qr-card svg { width: 46mm; height: 46mm; }
.qr-card .pl { font-size: 15pt; font-weight: 800; }
.qr-card .u { font-size: 8pt; color: #555; font-family: var(--mono); }
.pl-doc { font-family: var(--font); color: #111; font-size: 10.5pt; }
.pl-doc h1 { font-size: 18pt; margin-bottom: 1mm; }
.pl-doc h2 { font-size: 12pt; margin: 5mm 0 2mm; border-bottom: 1px solid #999; padding-bottom: 1mm; }
.pl-doc table { width: 100%; border-collapse: collapse; }
.pl-doc td { padding: 1.2mm 0; border-bottom: 1px dotted #ccc; }
.pl-doc td.p { text-align: right; white-space: nowrap; font-weight: 700; }
.pl-doc .ft { margin-top: 6mm; font-size: 9pt; color: #444; }

/* QR tiles: keep two per row on phones */
.p-place { min-width: 0; }
.p-place .qr { width: 100%; max-width: 132px; }
.p-place .qr svg { display: block; width: 100%; height: auto; }
.p-places { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }


/* P1 product option editor */
.panel-page details.p-tr .m-box {
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}
.panel-page details.p-tr .m-box .input {
  min-width:0;
}


/* Hospitality workspace: typography, spacing and controls share the guest system. */
.panel-page { --muted:#626c62; --space-unit:8px; }
.panel-page .p-main { max-width:1200px; padding-top:32px; }
.panel-page .p-h { margin-bottom:24px; gap:12px; }
.panel-page .p-h h1,.panel-page .p-auth h1 { font:600 36px/1.1 var(--serif); }
.panel-page .p-h p { font-size:14px; max-width:65ch; }
.panel-page .p-sec { padding:24px; gap:16px; margin-bottom:24px; }
.panel-page .card { box-shadow:0 4px 24px -18px #243c2933; }
.panel-page .p-cat { border-radius:18px; margin-bottom:24px; }
.panel-page .p-cat-h { padding:18px 20px; flex-wrap:wrap; }
.panel-page .p-cat-h h2 { font:600 26px/1.1 var(--serif); }
.panel-page .p-item { grid-template-columns:64px minmax(0,1fr) auto; padding:16px 20px; gap:16px; }
.panel-page .p-item .th { width:64px; height:70px; border-radius:12px; }
.panel-page .p-item .nm { min-height:44px; line-height:1.35; }
.panel-page .p-item .sub { gap:8px; }
.panel-page .p-add { padding:16px 20px; background:color-mix(in srgb,var(--sand) 45%,var(--card)); }
.panel-page .p-add .btn { min-height:44px; }
.panel-page .p-kpi { padding:24px; border-radius:16px; }
.panel-page .p-kpi b { font-size:32px; color:var(--brand); }
.panel-page .p-kpi span { font-size:13px; }
.panel-page .p-place { padding:20px; gap:14px; }
.panel-page .p-auth .card { padding:32px; gap:20px; border-radius:24px; }
.panel-page .p-photo img,.panel-page .p-photo .ph { width:112px; height:112px; }
.panel-page .btn,.panel-page .input,.panel-page .select { min-height:44px; border-radius:10px; }
.panel-page .sheet-head { padding:20px; }
.panel-page .sheet-head h2 { font-size:20px; }
.panel-page .sheet-body { gap:20px; padding:24px; }
.panel-page .sheet-foot { padding-inline:24px; }
.panel-page .p-tr { padding:16px; background:var(--paper); }
.panel-page .p-tr summary { min-height:32px; }
@media(min-width:960px) {
  .panel-page .p-tabs { background:#1b3326; padding-top:28px; }
  .panel-page .p-tabs a { color:#d3ddd1; min-height:48px; margin:2px 0; }
  .panel-page .p-tabs a[aria-current='page'] { color:#fff; background:#ffffff18; box-shadow:inset 3px 0 var(--gold); }
  .panel-page .p-main { padding:36px 40px 48px; }
  .panel-page .p-top { min-height:70px; padding-inline:28px; }
}
@media(max-width:480px) {
  .panel-page .p-main { padding-top:24px; }
  .panel-page .p-h h1 { font-size:30px; }
  .panel-page .p-cat-h,.panel-page .p-item,.panel-page .p-add { padding-inline:14px; }
  .panel-page .p-item { grid-template-columns:48px minmax(0,1fr) auto; gap:10px; }
  .panel-page .p-item .th { width:48px; height:56px; }
  .panel-page .p-item .sub { font-size:12px; }
  .panel-page .p-kpis { gap:8px; }
  .panel-page .p-kpi { padding:14px 10px; }
  .panel-page .p-kpi b { font-size:24px; }
  .panel-page .p-kpi span { font-size:11px; }
  .panel-page .p-sec { padding:18px; }
}
.panel-page .p-h p { flex-basis:100%; max-width:none; }
@media(min-width:960px) {
  .panel-page .p-shell { grid-template-rows:70px 1fr; }
  .panel-page .p-top { grid-row:1; z-index:30; }
  .panel-page .p-tabs { grid-column:1; grid-row:2; top:70px; height:calc(100svh - 70px); align-self:start; z-index:20; }
  .panel-page .p-main { grid-column:2; grid-row:2; min-width:0; }
}
@media(max-width:600px) {
  .panel-page .p-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
  .panel-page .p-top .wordmark { grid-column:1; grid-row:1; }
  .panel-page .p-top .p-venue { grid-column:1; grid-row:2; max-width:none; font-size:12px; }
  .panel-page .p-top .spacer { display:none; }
  .panel-page .p-top>.btn { grid-column:2; grid-row:1 / span 2; font-size:12px; padding-inline:12px; }
}
/* Curated style picker and an actual read-only guest-menu preview. */
.p-style-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.p-style-card { display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line-2); border-radius:14px; background:var(--card); text-align:start; cursor:pointer; }
.p-style-card[aria-pressed='true'] { border:2px solid var(--brand); padding:15px; background:var(--brand-soft); }
.p-style-copy { min-width:0; display:grid; gap:6px; }
.p-style-copy strong { font-size:15px; }
.p-style-copy>span,.p-style-copy small { font-size:12px; line-height:1.5; color:var(--muted); }
.p-style-copy b { font-size:11px; color:var(--brand); }
.p-style-sample { width:64px; min-width:64px; min-height:86px; display:grid; align-content:center; gap:6px; border:1px solid var(--line-2); border-radius:8px; background:#faf8f0; padding:10px; color:#214c39; }
.p-style-sample>span { font:600 25px var(--serif); }
.p-style-sample i { display:block; background:currentColor; opacity:.25; height:3px; border-radius:2px; }
.p-style-sample i:last-child { width:65%; }
.p-style-sample.essential>span,.p-style-sample.bold>span,.p-style-sample.grid>span,.p-style-sample.single>span,.p-style-sample.international>span { font-family:var(--font); }
.p-style-sample.gallery i:first-of-type { height:18px; opacity:.6; }
.p-style-sample.bold { background:#fce5bf; color:#984728; }
.p-style-sample.bold>span { font-weight:850; }
.p-style-sample.dark { background:#131915; color:#edc88c; }
.p-style-sample.app { background:#080b0d; color:#ff650b; }
.p-style-sample.app>span { font-family:var(--font); font-weight:800; }
.p-style-sample.editorial { color:#742a3a; }
.p-style-sample.single { gap:4px; }
.p-style-sample.international { color:#205359; }
.p-palettes { display:flex; flex-wrap:wrap; gap:10px; }
.p-palette { min-width:44px; min-height:44px; border:3px solid var(--card); outline:1px solid var(--line-2); border-radius:50%; color:#fff; font-size:19px; cursor:pointer; }
.p-palette[aria-pressed='true'] { outline:2px solid var(--brand); }
.p-accent-input { width:48px; height:44px; padding:3px; border:1px solid var(--line-2); border-radius:8px; background:var(--card); cursor:pointer; }
.p-style-preview { padding:16px; border:1px solid var(--line-2); border-radius:14px; background:var(--paper); }
.p-style-preview summary { min-height:28px; font-size:14px; font-weight:650; cursor:pointer; }
.p-preview-toolbar { display:flex; justify-content:center; padding:12px; }
.p-menu-preview { display:block; width:100%; max-width:420px; height:620px; margin:auto; border:1px solid var(--line-2); border-radius:16px; background:var(--paper); }
@media(max-width:700px) { .p-style-cards { grid-template-columns:1fr; } }