/* ==========================================================================
   CARTE APP — the working interface, in the house style.
   Paper, pine, paprika; Fraunces for titles, Instrument Sans for readable UI.
   ========================================================================== */

:root {
    --paper:        #F7F1E4;
    --paper-deep:   #EFE6D2;
    --paper-card:   #FCF8EE;
    --ink:          #16241C;
    --ink-soft:     #44524A;
    --ink-faint:    #6C7A70;
    --pine:         #1D3529;
    --pine-deep:    #122319;
    --paprika:      #C4502B;
    --paprika-hot:  #E0623A;
    --gold:         #C29A4B;
    --sage:         #93A48B;
    --line:         rgba(22, 36, 28, 0.16);
    --line-soft:    rgba(22, 36, 28, 0.09);
    --light-line:   rgba(247, 241, 228, 0.18);
    --font-display: "Fraunces", Georgia, serif;
    --font-body:    "Instrument Sans", -apple-system, sans-serif;
    --font-mono:    "Spline Sans Mono", "SF Mono", monospace;
    --radius:       12px;
    --radius-lg:    18px;
    --shadow-soft:  0 2px 6px rgba(18, 35, 25, 0.06), 0 14px 38px -16px rgba(18, 35, 25, 0.22);
    --shadow-pop:   0 4px 10px rgba(18, 35, 25, 0.08), 0 26px 64px -20px rgba(18, 35, 25, 0.35);
    --ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55;
    color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 520; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.icon { flex: none; display: block; }

/* ---------- shell ---------- */
.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.app-side {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
    background: var(--pine-deep); color: rgba(247, 241, 228, 0.82); padding: 20px 14px 16px;
}
.app-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); padding: 4px 10px 16px; }
.app-brand .brand-mark { color: var(--paprika-hot); }
.app-brand-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 560; }
.app-brand-name i { font-style: normal; color: var(--paprika-hot); }

.app-venue { margin: 4px 10px 16px; padding: 12px 14px; border: 1px solid var(--light-line); border-radius: var(--radius); }
.app-venue-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.app-venue-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--paper); margin-top: 2px; }

.app-nav { display: grid; gap: 2px; }
.app-nav-item {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
    font-size: 0.9rem; font-weight: 550; color: rgba(247, 241, 228, 0.72); text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.app-nav-item .icon { color: rgba(247, 241, 228, 0.45); transition: color 0.15s; }
.app-nav-item:hover { background: rgba(247, 241, 228, 0.07); color: var(--paper); }
.app-nav-item:hover .icon { color: var(--gold); }
.app-nav-item.is-active { background: var(--paprika); color: #FFF6EA; }
.app-nav-item.is-active .icon { color: #FFF6EA; }

.app-side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--light-line); }
.app-user { display: flex; align-items: center; gap: 10px; padding: 12px 10px 4px; }
.app-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: rgba(247, 241, 228, 0.12); color: var(--gold); font-family: var(--font-display); font-style: italic;
}
.app-user-text { min-width: 0; }
.app-user-text strong { display: block; font-size: 0.82rem; color: var(--paper); }
.app-user-text small { display: block; font-size: 0.68rem; color: rgba(247, 241, 228, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-logout { margin-left: auto; color: rgba(247, 241, 228, 0.5); padding: 6px; border-radius: 8px; }
.app-logout:hover { color: var(--paprika-hot); background: rgba(247, 241, 228, 0.07); }

/* ---------- main column ---------- */
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px;
    padding: 18px 30px; background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft);
}
.app-title { font-size: 1.55rem; }
.app-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.app-content { padding: 26px 30px 60px; }

.app-flash {
    display: flex; align-items: center; gap: 10px; margin: 18px 30px -6px;
    background: rgba(147, 164, 139, 0.18); border: 1px solid rgba(147, 164, 139, 0.5);
    color: #3F5138; border-radius: var(--radius); padding: 12px 16px; font-weight: 550; font-size: 0.88rem;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 0.86rem; line-height: 1; padding: 11px 18px; border-radius: 999px;
    text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--paprika); color: #FFF6EA; box-shadow: 0 8px 20px -8px rgba(196, 80, 43, 0.6); }
.btn-primary:hover { background: var(--paprika-hot); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--pine); transform: translateY(-1px); }
.btn-sm { padding: 8px 13px; font-size: 0.78rem; }
.btn-danger { color: var(--paprika); border-color: rgba(196, 80, 43, 0.4); }
.btn-danger:hover { background: rgba(196, 80, 43, 0.08); border-color: var(--paprika); }

/* ---------- cards / panels ---------- */
.panel { background: var(--paper-card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.panel-pad { padding: 22px 24px; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); }
.panel-head h2 { font-size: 1.15rem; }
.panel-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.eyebrow {
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--paprika); margin-bottom: 8px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* stat tiles */
.stat-tile { padding: 20px 22px; }
.stat-tile .v { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.stat-tile .v sup { font-size: 0.5em; color: var(--paprika); }
.stat-tile .l { margin-top: 8px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

/* leader rows */
.leader-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.88rem; }
.leader-dots { flex: 1; min-width: 20px; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.leader-label { font-weight: 600; }
.leader-value { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field > label { font-size: 0.8rem; font-weight: 650; }
.field small.hint { font-size: 0.72rem; color: var(--ink-faint); }
.input, .field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field select, .field textarea {
    font: inherit; font-size: 0.9rem; color: var(--ink); width: 100%;
    background: #FFFDF6; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
    outline: none; border-color: var(--paprika); box-shadow: 0 0 0 3px rgba(196, 80, 43, 0.12);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error {
    background: rgba(196, 80, 43, 0.08); border: 1px solid rgba(196, 80, 43, 0.4);
    border-radius: var(--radius); padding: 12px 16px; font-size: 0.86rem; color: #8A3119;
}

/* ---------- chips & badges ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
    font-size: 0.6rem; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--line); color: var(--ink-soft); text-transform: uppercase;
}
.chip.c-v  { border-color: rgba(147, 164, 139, 0.8); color: #54664B; background: rgba(147, 164, 139, 0.16); }
.chip.c-ve { border-color: rgba(147, 164, 139, 0.8); color: #3F5138; background: rgba(147, 164, 139, 0.24); }
.chip.c-gf, .chip.c-df { border-color: rgba(194, 154, 75, 0.7); color: #8A6B27; background: rgba(194, 154, 75, 0.14); }
.chip.c-allergen { border-color: rgba(196, 80, 43, 0.45); color: var(--paprika); background: rgba(196, 80, 43, 0.08); }
.badge-live { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(196, 80, 43, 0.1); color: var(--paprika); border: 1px solid rgba(196, 80, 43, 0.35); }
.badge-draft { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(22, 36, 28, 0.06); color: var(--ink-faint); border: 1px solid var(--line-soft); }

/* ---------- menu editor ---------- */
.ed-section { margin-bottom: 18px; }
.ed-section-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: var(--paper-deep); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.ed-section-head .sec-grip { cursor: grab; color: var(--ink-faint); }
.ed-section-name {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-soft); background: transparent; border: 0; padding: 4px 6px; border-radius: 6px; min-width: 200px;
}
.ed-section-name:focus { outline: none; background: #FFFDF6; box-shadow: 0 0 0 2px rgba(196, 80, 43, 0.25); }
.ed-section-head .right { margin-left: auto; display: flex; gap: 6px; }

.ed-dishes { display: grid; gap: 6px; padding: 10px 4px 2px; min-height: 16px; }
.ed-dish {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px;
    background: var(--paper-card); border: 1px solid var(--line-soft); border-radius: var(--radius);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ed-dish:hover { border-color: var(--line); box-shadow: var(--shadow-soft); }
.ed-dish.sortable-ghost { opacity: 0.4; }
.ed-dish.sortable-drag { box-shadow: var(--shadow-pop); border-color: var(--paprika); transform: rotate(-0.5deg); }
.ed-dish.is-86 { opacity: 0.55; }
.ed-dish.is-86 .ed-dish-name { text-decoration: line-through; text-decoration-color: rgba(196, 80, 43, 0.6); }
.ed-grip { cursor: grab; color: var(--line); }
.ed-grip:hover { color: var(--ink-faint); }
.ed-dish-text { min-width: 0; flex: 1; }
.ed-dish-name { font-weight: 650; font-size: 0.92rem; }
.ed-dish-desc { font-size: 0.78rem; color: var(--ink-faint); font-style: italic; }
.ed-dish-meta { display: flex; align-items: center; gap: 5px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.ed-price { font-family: var(--font-mono); font-size: 0.85rem; min-width: 64px; text-align: right; }
.ed-actions { display: flex; gap: 2px; flex: none; }
.icon-btn { padding: 7px; border-radius: 8px; color: var(--ink-faint); transition: background 0.15s, color 0.15s; }
.icon-btn:hover { background: rgba(22, 36, 28, 0.06); color: var(--ink); }
.icon-btn.danger:hover { background: rgba(196, 80, 43, 0.1); color: var(--paprika); }
.t86 {
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; padding: 5px 10px;
    border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); transition: all 0.15s;
}
.t86:hover { border-color: var(--paprika); color: var(--paprika); }
.t86.on { background: var(--paprika); border-color: var(--paprika); color: #FFF6EA; }

.ed-add-row { display: flex; gap: 8px; padding: 8px 4px 0; }

/* ---------- modal ---------- */
.modal-back {
    position: fixed; inset: 0; z-index: 200; background: rgba(18, 35, 25, 0.55);
    display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px);
}
.modal {
    width: min(620px, 100%); max-height: 90vh; overflow: auto; background: var(--paper);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 26px 28px;
}
.modal h2 { font-size: 1.3rem; margin-bottom: 18px; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-picker label {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 550;
    padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
    transition: all 0.15s; user-select: none;
}
.tag-picker input { display: none; }
.tag-picker label:has(input:checked) { background: var(--pine); border-color: var(--pine); color: var(--paper); }
.tag-picker.allergens label:has(input:checked) { background: var(--paprika); border-color: var(--paprika); }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tbl th, .tbl td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tbl th { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.tbl tbody tr { transition: background 0.12s; }
.tbl tbody tr:hover { background: rgba(22, 36, 28, 0.025); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .mono { font-family: var(--font-mono); font-size: 0.8rem; }
.tbl .dot-yes { color: var(--paprika); font-size: 1.1em; }

/* matrix table */
.matrix-wrap { overflow-x: auto; }
.matrix-tbl th:not(:first-child), .matrix-tbl td:not(:first-child) { text-align: center; }
.matrix-tbl th.rot span { writing-mode: vertical-rl; transform: rotate(190deg); display: inline-block; letter-spacing: 0.1em; }
.matrix-tbl td:first-child { font-weight: 600; white-space: nowrap; }
.matrix-tbl .sec-row td { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paprika); background: rgba(196, 80, 43, 0.05); }

/* ---------- menu cards (list) ---------- */
.menu-card { display: flex; flex-direction: column; text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.menu-card .panel-pad { flex: 1; }
.menu-card h3 { font-size: 1.25rem; }
.menu-card .meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 0.78rem; color: var(--ink-faint); }
.menu-card .rows { margin-top: 14px; display: grid; gap: 7px; border-top: 2px dotted var(--line); padding-top: 12px; }
.menu-card .foot { display: flex; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line-soft); }

/* ---------- publish page ---------- */
.pub-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.code-snip {
    font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7; background: var(--pine-deep);
    color: rgba(247, 241, 228, 0.85); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; white-space: pre;
}
.qr-box { display: grid; place-items: center; gap: 12px; padding: 24px; }
.qr-box svg, .qr-box canvas, .qr-box img { background: #FFFDF6; padding: 12px; border-radius: 12px; border: 1px solid var(--line); }

/* ---------- audit log ---------- */
.log-list { display: grid; }
.log-item { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 2px dotted var(--line-soft); font-size: 0.85rem; }
.log-item:last-child { border-bottom: 0; }
.log-ts { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); flex: none; width: 118px; }
.log-user { font-weight: 650; flex: none; }

/* ---------- auth screens ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 30px 20px; position: relative; }
.auth-card { width: min(420px, 100%); background: var(--paper-card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 34px 34px 30px; position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; color: var(--ink); text-decoration: none; }
.auth-brand .brand-mark { color: var(--paprika); }
.auth-brand-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 560; }
.auth-brand-name i { font-style: normal; color: var(--paprika); }
.auth-card h1 { font-size: 1.45rem; text-align: center; }
.auth-sub { text-align: center; font-size: 0.85rem; color: var(--ink-faint); margin: 6px 0 22px; }
.auth-foot { text-align: center; font-size: 0.82rem; color: var(--ink-faint); margin-top: 18px; }
.auth-foot a { color: var(--paprika); font-weight: 600; }
.auth-demo { margin-top: 16px; padding: 12px 16px; border: 1.5px dashed var(--line); border-radius: var(--radius); font-size: 0.78rem; color: var(--ink-soft); text-align: center; }
.auth-demo code { font-family: var(--font-mono); color: var(--paprika); }

/* save pulse */
#save-pulse {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: #54664B;
    opacity: 0; transition: opacity 0.3s;
}
#save-pulse.show { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
    .app-venue, .app-side-foot { display: none; }
    .app-nav { display: flex; flex-wrap: wrap; }
    .grid-3, .grid-4, .grid-2, .pub-grid { grid-template-columns: 1fr; }
    .app-content { padding: 20px 16px 50px; }
    .app-topbar { padding: 14px 16px; }
}