/* FiQR / Ember & Olive — shared, local-first visual system. */
:root:root, .admin-app, .auth-shell {
  --ink:#141510; --olive:#575d18; --forest:#2c3216; --orange:#ef7908; --rust:#9c3c0c; --cream:#ead7b9;
  --color-bg:#f6f2e9; --color-surface:#fffdf8; --color-surface-2:#eee9de;
  --color-border:#dfdacd; --color-text:#25261e; --color-text-secondary:#6d6e60;
  --color-accent:#a6410a; --color-accent-contrast:#fff;
  --color-success:#505b20; --color-success-bg:#e9eddc;
  --color-warning:#93450c; --color-warning-bg:#fbe8cf;
  --color-danger:#a12d20; --color-danger-bg:#fae6df;
  --color-new:#5c572a; --color-new-bg:#eeecd7;
  --sidebar-width:252px; --font-display:Georgia,'Times New Roman',serif;
  --radius-lg:16px; color-scheme:light;
}
body {font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
button,.btn,input,select,textarea {transition:background .18s,border-color .18s,box-shadow .18s}
button,.btn {min-height:44px}
:where(button:not(.btn-secondary):not(.btn-link):not(.btn-danger):not(.admin-menu-btn):not(.admin-logout-btn):not(.qty-btn)),:where(.btn:not(.btn-secondary):not(.btn-danger)) {background:var(--orange);color:#231a0f;border:1px solid #d46805;font-weight:700}
.btn-danger {color:#fff;border:1px solid #a30010}
button:hover,.btn:hover {filter:brightness(.96)}
[hidden] {display:none!important}
input[type=hidden] {display:none!important}
:focus-visible {outline:3px solid #a6410a;outline-offset:3px}
input:focus,select:focus,textarea:focus {border-color:#a6410a;box-shadow:0 0 0 3px #ef79081a}
.eyebrow {font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--olive);margin:0 0 14px;line-height:1.7}
.field-help {color:var(--color-text-secondary);font-size:12px;line-height:1.7;margin:0}
.admin-app {background:var(--color-bg);font-size:14px}
.admin-sidebar {background:var(--ink);padding:30px 18px 22px;border-right:1px solid #2f3029}
.admin-brand {font-size:28px;letter-spacing:-1px;padding:0 12px 42px;color:#fff8eb}
.admin-brand-mark {background:var(--orange);color:#1b1c15;border-radius:12px;width:42px;height:42px}
.admin-brand small {color:#aaa99a;letter-spacing:.03em;font-size:11px;margin-top:5px}
.nav-caption {color:#9d9e8b;font-size:9px;margin:0 0 15px;letter-spacing:.18em}
.admin-nav-links {gap:5px}
.admin-nav-link {color:#c7c7b9;min-height:47px;border-radius:9px;font-size:13px;padding:13px 14px}
.admin-nav-link svg {width:19px;height:19px}
.admin-nav-link.active {color:#ffc384;background:#302a1e;box-shadow:inset 3px 0 var(--orange)}
.admin-nav-link:hover,.admin-logout-btn:hover {background:#26291b;color:#fff8eb}
.admin-sidebar-footer {border-color:#34372a;padding-top:18px}
.admin-logout-btn {color:#bcbdad}
.admin-topbar {height:76px;background:#fffdf8c9;border-bottom:1px solid var(--color-border);backdrop-filter:blur(16px);padding:0 40px}
.topbar-divider {color:#b4b09f}
.account-avatar {background:var(--forest);color:#f0dbb9;border-radius:12px;width:36px;height:36px}
.admin-content {padding:38px 40px 60px;max-width:1540px}
.admin-app h1 {font-size:32px;letter-spacing:-1.1px;font-weight:650;line-height:1.2}
.admin-app h2 {font-size:17px;letter-spacing:-.3px}
.page-description {font-size:13px;max-width:640px;color:#6d6e60}
.content-header {margin-bottom:30px}
.content-header-row {gap:14px;flex-wrap:wrap}
.dashboard-heading {display:flex;justify-content:space-between;align-items:center;gap:20px}
.dashboard-welcome {display:flex;align-items:center;gap:8px;font-size:12px;color:#62654e}
.welcome-dot {width:7px;height:7px;background:var(--olive);border-radius:50%}
.admin-app button,.admin-app .btn {border-radius:8px;font-size:12px;min-height:44px;padding:11px 17px}
.admin-app .btn-secondary {background:var(--color-surface);border:1px solid #d5cebd;color:#353728}
.admin-app .btn-secondary:hover {background:#eee9de}
.stat-cards {gap:18px;margin-bottom:34px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat-card {background:var(--color-surface);padding:25px 26px;border:1px solid var(--color-border);border-radius:14px;gap:16px;box-shadow:0 3px 4px #30261903;position:relative;overflow:hidden}
.stat-card .stat-label {color:#696b5b;font-size:12px;font-weight:500}
.stat-value {font-size:33px!important;font-weight:600;letter-spacing:-1.3px;line-height:1.2}
.stat-sub {font-size:11px;color:#757666}
.stat-card-accent {background:var(--forest);border-color:var(--forest)}
.stat-card-accent .stat-label,.stat-card-accent .stat-sub {color:#d2d6bc}
.stat-card-accent .stat-value {color:#fff4dd}
.stat-card-accent:after {content:'';position:absolute;width:150px;height:150px;right:-62px;bottom:-86px;border:28px solid #ffffff08;border-radius:50%;pointer-events:none}
.stat-card-warning {background:#f1e3ca;border-color:#e1d1b4}
.stat-card-warning .stat-value {color:#93450c}
.quick-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}
.quick-card {background:var(--color-surface);border:1px solid var(--color-border);padding:22px;border-radius:12px;display:grid;grid-template-columns:36px 1fr;gap:7px 13px;align-items:center}
.quick-card svg {grid-row:span 2;width:23px;height:23px;color:var(--olive)}
.quick-card span {font-size:13px;font-weight:600}
.quick-card small {font-size:11px;color:#777767}
.quick-card:hover {border-color:#b2ac8c;box-shadow:0 6px 18px #30261909;transform:translateY(-2px)}
.section-heading {align-items:center;margin-bottom:18px}
.section-heading .eyebrow {margin-bottom:7px}
.admin-app .table-wrap {border-radius:13px;border-color:var(--color-border);box-shadow:0 2px 5px #30261903}
.admin-app th {background:#eeeade;color:#6a6b5b;padding:16px 20px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:650}
.admin-app td {padding:18px 20px;font-size:13px;border-color:#ebe6da}
.admin-app tbody tr:hover {background:#f8f4e9}
.admin-app td a {color:var(--rust)}
.admin-app .thumb {width:48px;height:48px;border-radius:10px;background:#eae3d4}
.admin-app .badge {font-size:10px;font-weight:650;padding:6px 10px;gap:5px}
.badge:before {content:'';width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block}
.badge-neutral {color:#6c6e60;background:#eeece3}
.admin-app .list-toolbar {background:var(--color-surface);padding:18px;border:1px solid var(--color-border);border-radius:12px;margin-bottom:20px;gap:16px}
.admin-app .filter-bar {gap:12px;flex:1;align-items:center}
.admin-app .filter-bar label {min-width:0;font-size:11px}
.admin-app .filter-bar select {background:#faf8f1;max-width:200px;min-height:40px}
.table-toolbar {flex:1;min-width:200px;justify-content:flex-end}
.table-search {font-size:11px;max-width:300px}
.admin-app input,.admin-app select,.admin-app textarea {background:#fffefb;border-color:#d8d4c5;border-radius:8px;min-height:46px;font-size:14px;padding:11px 13px}
.admin-app label {color:#555849;font-size:12px;font-weight:600}
.admin-app input[type=checkbox] {accent-color:var(--olive);width:18px;height:18px;min-height:18px}
.admin-app .form-card {background:var(--color-surface);border-radius:14px;box-shadow:0 5px 18px #30261904;padding:30px;max-width:820px}
.admin-app fieldset+fieldset {padding-top:26px;border-color:#e8e2d6}
.admin-app legend {font-size:15px;letter-spacing:-.2px;padding-bottom:16px;width:100%;display:flex;align-items:center;gap:10px}
.step-number {font-size:10px;letter-spacing:.03em;width:26px;height:26px;display:inline-grid;place-items:center;background:#eeecd9;color:#616128;border-radius:8px}
.editor-layout {display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:26px;align-items:start}
.admin-app .product-editor {width:100%;max-width:none}
.admin-app .product-editor fieldset {gap:18px}
.field-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px}
.editor-aside {position:sticky;top:24px;padding-top:8px;min-width:0}
.product-preview {border:1px solid #ddd6c4;border-radius:16px;background:#fffdf8;overflow:hidden}
.preview-image {height:195px;background:#e7dec7;display:grid;place-items:center;overflow:hidden}
.preview-image img {width:100%;height:100%;object-fit:cover}
.preview-image>span {font-family:Georgia,serif;font-size:70px;color:#9c9b75;font-weight:400}
.preview-copy {padding:22px}
.preview-category {font-size:10px;letter-spacing:.1em;color:var(--olive);text-transform:uppercase}
.preview-copy h2 {margin:10px 0!important;overflow-wrap:anywhere}
.preview-copy p {font-size:12px;color:#767565;line-height:1.7;overflow-wrap:anywhere}
.preview-copy strong {display:block;font-size:22px;color:var(--rust);margin:18px 0 12px;overflow-wrap:anywhere}
.editor-note {background:#ecebda;border-radius:12px;padding:24px;margin-top:20px}
.editor-note h3 {font:500 23px/1.2 Georgia,serif;margin:12px 0}
.editor-note p {font-size:12px;line-height:1.8;color:#696b55}
.editor-note a {font-size:12px;font-weight:600;color:var(--forest)}
.admin-app input[type=file] {background:#f8f5ec;padding:22px;border:1px dashed #b8b69d;max-width:100%}
input[type=file]::file-selector-button {border:0;border-radius:6px;background:#e7e8d8;color:#424923;padding:9px 12px;margin-right:12px;cursor:pointer}
.admin-app .image-preview img {width:100px;height:85px;object-fit:cover;border-radius:10px}
.form-actions {padding-top:24px;margin-top:8px;gap:10px}
.stock-toolbar {display:flex;align-items:center;gap:20px;justify-content:space-between;margin:0 0 14px}
.stock-toolbar h2 {margin-bottom:6px}
.stock-search {margin-left:auto;width:240px}
.stock-list {gap:10px}
.stock-item {background:var(--color-surface);border-radius:12px;padding:20px 24px;border-color:#ded9ca;scroll-margin-top:20px}
.stock-item:focus-within {border-color:#9b9d6b}
.stock-item-form {flex-direction:row;gap:18px!important;flex:1;justify-content:flex-end}
.stock-item-info {min-width:190px;flex:1}
.stock-item-name {font-size:14px}
.stock-item-category {font-size:11px;margin-top:5px}
.stock-qty-field input {width:90px}
.stock-item-form .badge {min-width:72px;justify-content:center}
.stock-item-form .stock-qty-field {flex-direction:column;align-items:flex-start;gap:5px}
.report-actions {display:flex;gap:10px}
.report-section {margin-top:28px;min-width:0}
.chart {height:295px;padding:35px 25px 22px;background:repeating-linear-gradient(to top,transparent,transparent 54px,#e8e3d5 55px,#e8e3d5 56px),var(--color-surface);border-radius:14px;border:1px solid var(--color-border);gap:16px}
.chart-bar {background:var(--olive);max-width:36px;border-radius:5px 5px 0 0;flex-shrink:1}
.chart-bar-wrap:last-child .chart-bar {background:var(--orange)}
.chart-bar-wrap {min-width:0;padding-top:15px}
.chart-label {writing-mode:horizontal-tb;transform:none;font-size:9px;margin-top:8px;flex-shrink:0}
.chart-value {background:var(--forest);bottom:100%;left:50%;transform:translateX(-50%);padding:8px;border-radius:6px}
.chart-legend {font-size:11px;color:#777865;display:flex;align-items:center;gap:7px}
.chart-legend i {width:8px;height:8px;background:var(--olive);border-radius:2px}
.reports-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px}
.admin-app .qr-card {max-width:550px}
.admin-app .qr-card img {border-radius:10px}
.admin-menu-btn {background:transparent;border:1px solid #d8d4c5!important;padding:10px!important;min-width:42px}
.admin-menu-btn span {background:#424632}
/* Authentication: editorial composition, with real forms unchanged. */
.auth-shell {min-height:100dvh;display:grid;grid-template-columns:1.08fr 1fr;align-items:stretch;padding:0;background:#f6f2e9;color:#25261e}
.auth-story {position:relative;background:var(--ink);color:#e9dcc5;display:flex;flex-direction:column;padding:48px 10%;overflow:hidden}
.auth-story:after {content:'';position:absolute;right:-165px;top:22%;height:460px;width:460px;border-radius:50%;border:1px solid #a99c5330;box-shadow:0 0 0 40px #a99c5306,0 0 0 80px #a99c5306,0 0 0 120px #a99c5304;pointer-events:none}
.auth-wordmark {font-size:33px;font-weight:750;color:#fff8e8;letter-spacing:-1.5px;position:relative;z-index:1}
.auth-wordmark span {color:var(--orange)}
.auth-wordmark small {display:block;font:600 9px/1.5 ui-sans-serif,system-ui;letter-spacing:.2em;margin-top:7px;color:#9b9e83}
.auth-wordmark:hover {text-decoration:none}
.auth-story-copy {margin:auto 0;padding:80px 0 50px;position:relative;z-index:1}
.auth-story .eyebrow {color:#d4a568;font-size:9px}
.auth-story h2 {font:400 clamp(36px,3.65vw,58px)/1.14 Georgia,serif;letter-spacing:-1.7px;margin:0 0 28px}
.auth-story h2 em {color:#f58b28;font-weight:400}
.auth-story-copy>p:last-child {font-size:14px;line-height:1.9;color:#b9bba8}
.auth-features {display:grid;gap:0;position:relative;z-index:1;margin-bottom:65px}
.auth-features>span {font-size:11px;color:#a9ad7e;padding:17px 0;border-top:1px solid #373b2a;display:flex;gap:22px}
.auth-features b {font-weight:400;font-size:12px;color:#dfdfcf}
.auth-story-footer {display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#d6d8c1;margin:0}
.auth-story-footer span {font-size:10px;color:#90977a}
.auth-form-area {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:55px 45px;min-width:0}
.auth-shell .public-card {border:0;background:transparent;box-shadow:none;padding:0;max-width:365px;margin:0;text-align:left}
.auth-shell .home-hero {text-align:left}
.auth-shell .brand-mark {display:none}
.auth-eyebrow {color:#6a6d4f;letter-spacing:.15em;font-weight:650;font-size:10px;margin:0 0 26px}
.auth-shell h1 {font:600 31px/1.2 ui-sans-serif,system-ui;letter-spacing:-1.1px;margin:0 0 14px}
.auth-shell .public-card>p {line-height:1.8}
.auth-shell .public-card>p small {font-size:13px;color:#777768}
.auth-shell form {gap:22px;margin:32px 0 24px}
.auth-shell label {font-size:12px;font-weight:600;color:#515642;gap:9px}
.auth-shell input {width:100%;min-width:0;height:50px;background:#fffdf8;border:1px solid #d4cebd;border-radius:8px;font-size:14px}
.auth-shell button[type=submit] {height:50px;justify-content:space-between;padding:12px 18px;font-size:13px;border-radius:8px}
.auth-shell .error,.auth-shell .success {padding:14px;font-size:13px;border-radius:8px;line-height:1.7}
.auth-shell .error {background:var(--color-danger-bg);color:var(--color-danger)}
.auth-shell .success {background:var(--color-success-bg);color:var(--color-success)}
.auth-bottom {font-size:10px;color:#858574;letter-spacing:.03em;margin:55px 0 0}
.password-wrap {position:relative;display:block}
.password-wrap input {padding-right:77px}
.auth-shell .password-toggle,.admin-app .password-toggle {position:absolute;right:6px;top:5px;min-height:40px;padding:8px;background:transparent!important;color:#565c3b!important;border:0!important;font-size:11px;font-weight:600}
/* Customer menu shares the same brand palette. */
.public .public-shell:not(.auth-shell) {background:#f6f2e9;justify-content:center}
.public .public-card:not(.auth-shell .public-card) {border:1px solid #d9d0bc;padding:38px;border-radius:18px;box-shadow:0 12px 35px #30261909}
.public .brand-mark {background:var(--orange);color:var(--ink)}
.menu-header {background:var(--ink);color:#f1e4cd;padding:30px max(24px,calc((100vw - 880px)/2));border-bottom:0}
.menu-masthead {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:42px}
.menu-wordmark {font-size:26px;letter-spacing:-1px;font-weight:700}
.menu-wordmark span {display:block;font-size:8px;letter-spacing:.16em;margin-top:2px;color:#9ca080}
.menu-masthead a {font-size:12px;color:#e5c496}
.menu-masthead-actions {display:flex;align-items:center;gap:18px}
.call-staff-btn {background:#c1362b;color:#fff;border:0;border-radius:999px;padding:9px 18px;font-size:12px;font-weight:700;cursor:pointer;transition:filter 160ms ease-out,transform 120ms ease-out}
.call-staff-btn:hover {filter:brightness(1.08)}
.call-staff-btn:active {transform:scale(0.96)}
.menu-header>.eyebrow {color:#c3a770;font-size:9px;margin-bottom:15px}
.public .menu-header h1 {font-size:48px;font-weight:400;line-height:1.1;letter-spacing:-1.4px;margin-bottom:14px;text-align:left}
.menu-header h1 em {color:var(--orange)}
.menu-intro {color:#b6b8a2;font-size:13px}
.category-nav {padding:22px 0 0;gap:8px;justify-content:flex-start}
.category-chip {border:1px solid #565a3b;background:#2c3216;color:#e7e4cb;padding:10px 17px;font-size:12px}
.category-chip:hover {background:#424823;color:#fff}
.menu-body {max-width:920px;padding-top:32px}
.menu-category h2 {font:400 27px/1.3 Georgia,serif;color:var(--forest);margin-bottom:22px}
.menu-item {border:1px solid #e3dccb;background:#fffdf8;border-radius:14px;padding:20px;gap:18px}
.menu-item-img {border-radius:11px;width:88px;height:88px;object-fit:cover}
.menu-item-name {font-weight:600;font-size:15px}
.menu-item-price {color:var(--rust);font-weight:700}
.qty-btn {background:#eee9db;color:#383e21;width:36px;height:36px;min-height:36px;border-radius:8px}
.order-bar {background:#fffdf8;border-color:#dfd5bf;box-shadow:0 -5px 22px #3026190a}
@media(min-width:1550px){.quick-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.quick-card{display:flex}}
@media(max-width:1200px){.admin-content{padding:30px 25px 50px}.editor-layout{grid-template-columns:minmax(0,1fr) 240px;gap:20px}.admin-app .product-editor{padding:24px}.stock-item-form{flex-basis:100%;justify-content:flex-start}.admin-app .filter-bar{flex-wrap:wrap}}
@media(max-width:1000px){.editor-layout{grid-template-columns:1fr}.editor-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:20px}.editor-aside>.eyebrow{grid-column:1/-1;margin:0}.editor-note{margin:0}.reports-grid{grid-template-columns:1fr;gap:0}.dashboard-heading{align-items:flex-start}.dashboard-welcome{max-width:180px}}
@media(max-width:900px){.admin-topbar{height:68px;padding:12px 20px}.admin-app .admin-menu-btn{display:flex}.auth-story{padding:38px 9%}.auth-story h2{font-size:40px}.auth-form-area{padding:40px 28px}.stat-value{font-size:29px!important}}
@media(max-width:700px){.auth-shell{grid-template-columns:1fr}.auth-story{padding:26px 28px}.auth-wordmark{font-size:27px}.auth-wordmark small{display:none}.auth-story-copy{padding:35px 0 6px;margin:0}.auth-story h2{font-size:35px;line-height:1.15}.auth-story h2 br{display:none}.auth-story-copy>p:last-child,.auth-features,.auth-story-footer{display:none}.auth-story:after{width:250px;height:250px;top:0;right:-80px}.auth-form-area{padding:40px 25px}.auth-shell h1{font-size:28px}.auth-eyebrow{margin-bottom:20px}.auth-bottom{margin-top:35px}.auth-shell .public-card{max-width:440px}.stock-toolbar{flex-wrap:wrap}.stock-toolbar>div{width:100%}.stock-search{margin:0;flex:1;min-width:160px}.stock-item-form{flex-direction:row;flex-wrap:wrap}.chart{gap:9px}.dashboard-heading{flex-direction:column;gap:12px}.dashboard-welcome{max-width:none}}
@media(max-width:600px){.admin-app input,.admin-app select,.admin-app textarea{font-size:16px}.admin-content{padding:26px 16px 45px}.admin-app h1{font-size:28px}.admin-topbar{padding:12px 16px}.stat-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-card{padding:19px 16px;gap:12px}.stat-value{font-size:25px!important}.stat-card .stat-label{font-size:11px}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quick-card{display:flex;align-items:flex-start;padding:18px;gap:10px}.section-heading>.field-help{display:none}.field-grid{grid-template-columns:1fr}.admin-app .form-card{padding:22px 18px}.editor-aside{display:block}.editor-aside>.eyebrow{margin:0 0 12px}.editor-note{margin-top:18px}.preview-image{height:200px}.admin-app .filter-bar{align-items:stretch}.admin-app .filter-bar label{align-items:stretch}.admin-app .filter-bar select{max-width:none}.table-toolbar{justify-content:flex-start;min-width:0}.table-search{max-width:none}.page-heading{flex-basis:100%}.stock-item{padding:18px}.stock-item-form{gap:14px!important;justify-content:space-between}.stock-item-form .checkbox{flex:1 1 50%;font-size:11px}.stock-item-form .stock-qty-field{flex:0 0 auto}.stock-item-form button{flex:1}.stock-item-info{min-width:0}.stock-toolbar .btn{font-size:11px}.report-actions{width:100%;margin-top:5px}.report-actions button{flex:1}.chart{height:240px;gap:6px;padding:25px 12px 18px}.chart-label{font-size:8px;writing-mode:vertical-rl;transform:rotate(180deg)}.chart-legend{font-size:9px}.menu-header{padding:24px 20px}.public .menu-header h1{font-size:40px}.menu-masthead{margin-bottom:32px}.menu-item{padding:16px;gap:12px}.menu-item-img{width:68px;height:68px}.menu-item-name{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.admin-sidebar,.admin-topbar,.report-actions,.list-toolbar,.stock-toolbar,.skip-link,.form-actions{display:none!important}.admin-main{margin-left:0!important}.admin-content{padding:0;max-width:none}.admin-app{background:white;color:black}.stat-card,.stat-card-accent,.stat-card-warning{background:white!important;color:black!important;border:1px solid #bbb}.stat-card *{color:black!important}.reports-grid{display:block}.chart,.table-wrap,.stat-card{break-inside:avoid}.chart{print-color-adjust:exact}.admin-app table.responsive{display:table}.admin-app table.responsive thead{display:table-header-group}.admin-app table.responsive tr{display:table-row}.admin-app table.responsive td{display:table-cell}.admin-app table.responsive td:before{display:none}.chart-value{display:none}}
/* Keep the large menu introduction out of the sticky viewport area. */
.menu-header {position:relative;top:auto}
.admin-content>.filter-bar {padding:18px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;margin-bottom:22px}
.admin-content>.table-toolbar {margin-bottom:16px}
@media print {.demo-banner{display:none!important}}
.admin-app input,.admin-app textarea,.admin-app select,.auth-shell input {font-weight:400}
.stat-card {container-type:inline-size}
.stat-card .stat-value {font-size:clamp(18px,10cqw,33px)!important;white-space:nowrap}
@media(max-width:700px){.auth-story h2 br{display:block}.auth-story h2{font-size:34px}.auth-story-copy{padding-bottom:0}.auth-story h2{margin-bottom:12px}}

/*
 * FiQR Ember v3 — complete replacement for web/static/css/ember.css.
 * Load after app.css, admin.css (admin pages) and professional.css.
 * Existing template classes and backend form contracts are unchanged.
 * Sections 01–28 refine the shared compatibility foundation below.
 * QR image quiet zones remain white. No external font or image requests.
 */

/* FiQR — Ember. Shared final theme layer; no external fonts or dependencies. */
:root:root, .admin-app, .auth-shell {
  --ink:#10110e;
  --orange:#f58416;
  --rust:#9c3d10;
  --cream:#ead7b9;
  --olive:#8e9a48;
  --forest:#30381e;
  --color-bg:#151610;
  --color-surface:#1f211a;
  --color-surface-2:#272a20;
  --color-border:#3b3e2f;
  --color-text:#eddfc8;
  --color-text-secondary:#b0b19e;
  --color-accent:#ffad5a;
  --color-accent-contrast:#19180f;
  --color-success:#c0d280;
  --color-success-bg:#323d21;
  --color-warning:#ffbc70;
  --color-warning-bg:#43301b;
  --color-danger:#ffab98;
  --color-danger-bg:#492c25;
  --color-new:#e0c591;
  --color-new-bg:#3b3425;
  --sidebar-width:236px;
  color-scheme:dark;
}
body {
  background:var(--color-bg);
  color:var(--color-text);
}
* {
  box-sizing:border-box;
}
img {
  max-width:100%;
}
a,button,input,select,textarea {
  touch-action:manipulation;
}
:focus-visible {
  outline:3px solid #ffb563;
  outline-offset:4px;
}
.admin-main,.admin-content,.content-header-row>* {
  min-width:0;
}
.admin-content {
  max-width:1680px;
  padding:36px clamp(20px,3vw,48px) 64px;
  width:100%;
}
.admin-sidebar {
  background:#10120e;
  border-color:#303326;
  padding:28px 16px 22px;
}
.admin-brand {
  padding-bottom:40px;
}
.admin-topbar {
  background:#171912eb;
  border-color:#34372a;
  height:72px;
}
.admin-nav-link {
  transition:background .2s,color .2s,transform .2s;
}
.admin-nav-link.active {
  background:#352c1d;
  color:#ffc181;
}
.admin-nav-link:hover {
  transform:translateX(3px);
}
.admin-app h1 {
  font-size:clamp(28px,3vw,38px);
  font-weight:650;
  letter-spacing:-1.3px;
}
.heading-amp {
  color:var(--orange);
  font-weight:400;
}
.eyebrow {
  color:#b5bb86;
  font-size:10px;
  letter-spacing:.19em;
  margin-bottom:10px;
}
.page-description,.field-help,.stat-sub,.quick-card small,.stat-card .stat-label,.admin-app label,.preview-description,.chart-legend,.auth-eyebrow {
  color:var(--color-text-secondary);
}
.page-description {
  line-height:1.7;
  margin-top:10px;
}
.admin-app .btn-secondary,.admin-app a.btn-secondary {
  background:#2a2d22;
  color:#eddfc8;
  border:1px solid #454937;
}
.admin-app .btn-secondary:hover {
  background:#363b2b;
  border-color:#7c8452;
}
.admin-app button,.admin-app .btn {
  font-size:12px;
  border-radius:10px;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
button:active,.btn:active {
  transform:translateY(1px);
}
.admin-app .btn-link {
  background:transparent;
  color:var(--color-accent);
  border:0;
}
.admin-app .btn-danger {
  background:#763725;
  color:#ffe4d7;
  border-color:#b96548;
}
.admin-app input,.admin-app select,.admin-app textarea,.auth-shell input {
  background:#181b14;
  border-color:#454937;
  color:#eee0c9;
  max-width:100%;
}
input::placeholder,textarea::placeholder {
  color:#969c88;
  opacity:1;
}
input:focus,select:focus,textarea:focus {
  border-color:#d98b3a;
  box-shadow:0 0 0 3px #f5841620;
}
.admin-app .list-toolbar,.admin-content>.filter-bar,.admin-app .form-card,.stat-card,.quick-card,.table-wrap {
  background:var(--color-surface);
  border-color:var(--color-border);
  box-shadow:0 8px 30px #00000010;
}
.admin-app .filter-bar select {
  background:#191c14;
}
.admin-app th {
  background:#292e20;
  color:#c1c6aa;
}
.admin-app td {
  border-color:#363b2b;
}
.admin-app tbody tr:hover {
  background:#2a2f21;
}
.admin-app td a {
  color:#ffb46e;
}
.badge-neutral {
  background:#34372b;
  color:#c3c4b0;
}
.stat-card-warning {
  background:#3a2d1d;
  border-color:#604422;
}
.stat-card-warning .stat-value {
  color:#ffc17c;
}
.stat-card-accent {
  background:#303a20;
  border-color:#505c31;
}
.quick-card svg,.menu-category h2 {
  color:#c4d391;
}
.admin-app .thumb {
  background:#303426;
}
.admin-app fieldset+fieldset {
  border-color:#3b402e;
}
.preview-image,.step-number {
  background:#303725;
  color:#c1d18c;
}
.preview-name,.editor-note,.preview-price {
  color:var(--color-text);
}
.chart {
  background:repeating-linear-gradient(to top,transparent,transparent 54px,#393e2c 55px,#393e2c 56px),var(--color-surface);
  border-color:var(--color-border);
}
.admin-menu-btn {
  border-color:#484e37!important;
  color:var(--cream);
}
.admin-menu-btn span {
  background:var(--cream);
}

/* Table management: concise hierarchy, tactile surfaces and independent zones. */
.loca-overview {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:#3b402d;
  border:1px solid #3b402d;
  border-radius:16px;
  overflow:hidden;
  margin:4px 0 26px;
}
.loca-overview>div {
  background:#20251a;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.loca-overview span {
  font-size:12px;
  color:#b9bda5;
  line-height:1.5;
}
.loca-overview strong {
  font-size:28px;
  font-weight:550;
  font-variant-numeric:tabular-nums;
  color:#e8d8b9;
}
.loca-overview>div:nth-child(2) strong {
  color:#c2d383;
}
.loca-overview>div:nth-child(3) strong {
  color:#ffae69;
}
.admin-app .loca-toolbar {
  padding:12px 14px;
  background:#1b1e16;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.loca-filters {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.admin-app .loca-filter {
  background:transparent;
  border:1px solid transparent;
  color:#b9bba9;
  padding:10px 14px;
  font-weight:500;
}
.admin-app .loca-filter[aria-pressed=true] {
  background:#363d27;
  border-color:#535f35;
  color:#e0edbb;
}
.loca-toolbar .table-toolbar {
  margin:0;
  gap:14px;
}
.loca-toolbar .table-search {
  font-size:0;
  width:220px;
}
.loca-toolbar input {
  width:100%;
  min-height:44px;
  font-size:13px;
}
.result-count {
  color:#b4b79f;
  white-space:nowrap;
  font-size:11px;
}
.loca-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
  gap:20px;
  align-items:stretch;
}
.loca-card {
  position:relative;
  min-width:0;
  padding:22px;
  background:linear-gradient(145deg,#272b20,#1d2118);
  border:1px solid #434a33;
  border-radius:18px;
  gap:17px;
  box-shadow:0 8px 24px #0002;
  animation:card-enter .45s both;
}
.loca-card:nth-child(2n) {
  animation-delay:40ms;
}
.loca-card:nth-child(3n) {
  animation-delay:80ms;
}
.loca-card:before {
  content:'';
  position:absolute;
  top:20px;
  bottom:20px;
  left:-1px;
  width:3px;
  border-radius:4px;
  background:#687944;
}
.loca-card.has-orders:before {
  background:#f58416;
}
.loca-card.has-call:before {
  background:#ed9570;
}
.loca-card.has-call {
  border-color:#976342;
}
.loca-card-head {
  padding-bottom:16px;
  border-bottom:1px solid #414731;
  gap:8px;
}
.loca-identity {
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}
.loca-identity h3 {
  font-size:19px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.loca-kicker {
  display:block;
  color:#a0a887;
  font-size:9px;
  letter-spacing:.18em;
  margin-bottom:4px;
}
.loca-table-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  background:#343c26;
  border:1px solid #505d34;
  border-radius:12px;
  color:#c7d392;
}
.loca-table-icon svg {
  width:25px;
  height:25px;
}
.loca-card-stats {
  gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.loca-card-orders,.loca-card-call {
  padding:12px;
  gap:8px;
  align-items:flex-start;
  flex-direction:column;
  border-color:#383f2b;
  background:#1b2016;
  min-width:0;
}
.loca-card-stats .stat-label {
  font-size:11px;
  color:#b0b69e;
}
.loca-card-stats .stat-value {
  font-size:15px!important;
  white-space:normal;
  letter-spacing:0;
  line-height:1.4;
}
.loca-call-status-ok {
  font-size:13px;
  color:#b8c68d;
}
.admin-app .loca-call-ack {
  font-size:11px;
  padding:8px;
  background:#6e3a27;
  color:#ffe0c0;
  border-color:#a96340;
  width:100%;
}
.loca-card-billing {
  padding:17px;
  min-height:160px;
  align-content:center;
  background:#22291a;
  border-color:#414c2e;
  border-radius:12px;
}
.loca-card-billing.active {
  background:linear-gradient(120deg,#333e23,#29311e);
  border-color:#596c39;
}
.loca-card-billing.paused {
  background:#3b2e1d;
  border-color:#826037;
}
.loca-billing-info {
  width:100%;
  gap:7px;
}
.loca-billing-info .stat-value {
  font-size:clamp(23px,2vw,30px)!important;
  letter-spacing:-1px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.loca-billing-info .stat-label {
  color:#c3cfaa;
  font-size:11px;
}
.loca-billing-info .stat-sub {
  font-size:11px;
  line-height:1.6;
}
.loca-billing-select {
  flex:1 1 100%;
  gap:8px;
}
.loca-card-billing select {
  width:100%;
  max-width:100%;
}
.loca-start-button {
  width:100%;
}
.loca-billing-actions {
  width:100%;
  gap:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}
.loca-billing-actions form {
  margin:0;
  display:flex;
}
.loca-billing-actions button,.loca-billing-actions a.btn-secondary {
  width:100%;
  padding:10px 8px;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  text-align:center;
  text-decoration:none;
  min-height:44px;
}
.loca-card-qr {
  background:#191e15;
  border:1px dashed #4b5635;
  padding:14px;
  gap:16px;
}
.loca-qr-thumb {
  width:68px;
  height:68px;
  border-radius:10px;
}
.loca-qr-thumb-empty {
  background:#292f20;
  color:#8d9d68;
  border-color:#45522e;
}
.loca-qr-thumb-empty svg {
  width:36px;
  height:36px;
}
.loca-qr-info {
  gap:7px;
}
.loca-qr-info .stat-label {
  color:#c0c4ad;
  font-size:12px;
}
.loca-card-qr-actions {
  gap:8px;
  align-items:stretch;
}
.loca-card-qr-actions form {
  margin:0;
  flex:1 1 auto;
}
.loca-card-qr-actions button {
  flex:1;
}
.loca-card-actions {
  gap:8px;
  justify-content:space-between;
  border-color:#3c442e;
  padding-top:12px;
  flex-wrap:wrap;
}
.loca-card-actions a {
  color:#c9d4a6;
  font-size:11px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:6px 4px;
}
.loca-card-actions .btn-link {
  color:#efa58a;
  font-size:11px;
  padding:8px;
}
.loca-card-actions a:hover {
  color:#ffb56e;
}
.loca-grid>.stock-item-empty {
  grid-column:1/-1;
  padding:48px;
  border:1px dashed #52603b;
  border-radius:14px;
  text-align:center;
}
@keyframes card-enter {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@media(hover:hover) {
  .loca-card:hover {
    transform:translateY(-4px);
    border-color:#7d8b51;
    box-shadow:0 15px 36px #0004;
  }
  .loca-card:focus-within {
    border-color:#a5b774;
  }
  .loca-qr-thumb {
    transition:transform .2s;
  }
  .loca-card-qr:hover .loca-qr-thumb {
    transform:scale(1.04);
  }
}

/* Customer and authentication pages share the same warm, dark palette. */
.auth-shell,.public .public-shell:not(.auth-shell) {
  background:#191c14;
  color:var(--color-text);
}
.auth-story {
  background:#10130d;
}
.auth-shell label,.auth-shell .public-card>p small,.auth-bottom {
  color:#b5b99f;
}
.auth-shell .password-toggle,.admin-app .password-toggle {
  color:#c9d2ad!important;
}
.public .public-card:not(.auth-shell .public-card) {
  background:#252b1d;
  border-color:#4a5337;
}
.menu-item {
  background:#252b1e;
  border-color:#424d31;
}
.menu-item-price {
  color:#ffb46a;
}
.menu-item-name {
  overflow-wrap:anywhere;
}
.qty-btn {
  background:#3b452b;
  color:#ecdfc7;
}
.order-bar {
  background:#20261a;
  border-color:#4a5437;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px #0004;
}
.menu-masthead-actions {
  flex-wrap:wrap;
}
.admin-app .qr-card {
  background:#272f1e;
  border-color:#4a5834;
}

/* Scan and paper surfaces intentionally retain a white quiet zone. */
.loca-qr-thumb:not(.loca-qr-thumb-empty),.qr-card img {
  background:white;
}
@media(max-width:1200px) {
  .loca-overview>div {
    padding:18px 16px;
  }
  .loca-overview span {
    max-width:110px;
  }
  .admin-content {
    padding-inline:24px;
  }
}
@media(max-width:900px) {
  .admin-sidebar {
    width:min(290px,85vw);
    padding-bottom:max(22px,env(safe-area-inset-bottom));
  }
  .admin-topbar {
    height:auto;
    min-height:68px;
    gap:10px;
    flex-wrap:wrap;
    padding:12px 18px;
  }
  .admin-topbar-brand {
    min-width:0;
  }
  .admin-content {
    padding:28px 20px 48px;
  }
  .loca-grid {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  }
  .loca-overview {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .admin-topbar>.badge {
    max-width:140px;
    overflow-wrap:anywhere;
  }
  .table-wrap {
    max-width:100%;
    overflow-x:auto;
  }
  .admin-sidebar-footer {
    margin-top:auto;
  }
}
@media(max-width:600px) {
  .admin-content {
    padding:24px 14px 40px;
  }
  .content-header-row {
    gap:10px;
  }
  .content-header-row>.page-heading {
    width:100%;
  }
  .content-header-row>.btn {
    flex:1;
    text-align:center;
    justify-content:center;
  }
  .loca-overview {
    margin-bottom:18px;
    border-radius:12px;
  }
  .loca-overview>div {
    padding:16px 14px;
    gap:8px;
  }
  .loca-overview strong {
    font-size:25px;
  }
  .loca-overview span {
    font-size:11px;
  }
  .admin-app .loca-toolbar {
    padding:10px;
    gap:10px;
  }
  .loca-filters {
    width:100%;
    gap:3px;
  }
  .admin-app .loca-filter {
    flex:1;
    padding:9px 7px;
    font-size:11px;
    white-space:nowrap;
  }
  .loca-toolbar .table-toolbar {
    width:100%;
    flex-basis:100%;
    gap:10px;
  }
  .loca-toolbar .table-search {
    width:auto;
    max-width:none;
    flex:1;
    min-width:0;
  }
  .loca-toolbar input,.admin-app input,.admin-app select,.auth-shell input {
    font-size:16px;
  }
  .loca-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .loca-card {
    padding:18px;
    gap:15px;
  }
  .loca-billing-info .stat-value {
    font-size:28px!important;
  }
  .admin-app table.responsive td {
    overflow-wrap:anywhere;
    min-width:0;
  }
  .admin-app table.responsive td:before {
    flex-shrink:0;
    max-width:40%;
  }
  .filter-bar,.form-actions,.report-actions {
    flex-wrap:wrap;
  }
  .filter-bar>* {
    min-width:0;
    max-width:100%;
  }
  .menu-masthead {
    align-items:flex-start;
    gap:12px;
  }
  .menu-masthead-actions {
    justify-content:flex-end;
    gap:8px;
  }
  .menu-item {
    min-width:0;
    flex-wrap:wrap;
  }
  .menu-item-info {
    min-width:0;
    flex:1;
  }
  .order-bar {
    flex-wrap:wrap;
    gap:10px;
  }
  .public .public-card:not(.auth-shell .public-card) {
    padding:26px 20px;
  }
  .auth-shell input {
    background:#191e14;
  }
  .admin-app .table-wrap td .btn,.admin-app .table-wrap td button {
    white-space:normal;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
@media print {
  :root:root,.admin-app,.auth-shell {
    --color-bg:#fff;
    --color-surface:#fff;
    --color-surface-2:#eee;
    --color-text:#111;
    --color-text-secondary:#444;
    --color-border:#ccc;
    color-scheme:light;
  }
  body,.admin-app,.admin-app .qr-card {
    background:#fff!important;
    color:#111!important;
  }
  .loca-toolbar,.loca-overview,.loca-card-actions,.loca-card-qr-actions {
    display:none!important;
  }
  .loca-card {
    background:#fff;
    box-shadow:none;
    break-inside:avoid;
  }
  .qr-card img {
    max-width:100%;
  }
}
.qr-workspace {
  display:grid;
  grid-template-columns:minmax(0,520px) minmax(0,340px);
  gap:40px;
  align-items:start;
}
.admin-app .qr-card {
  width:100%;
  max-width:none;
  text-align:center;
  padding:32px;
}
.qr-card h2 {
  margin-bottom:28px;
}
.qr-card img {
  display:block;
  margin:0 auto 24px;
  padding:14px;
  border-radius:16px;
}
.qr-card form {
  margin-top:24px;
}
.qr-card form button,.qr-card>button {
  width:100%;
}
.qr-card>button {
  margin-top:12px;
}
.qr-menu-url {
  overflow-wrap:anywhere;
  color:var(--color-accent);
}
.qr-empty-state {
  padding:30px 0;
  color:var(--color-text-secondary);
}
.qr-empty-state>span {
  display:block;
  font-size:64px;
  color:#b6c777;
}
.qr-empty-state p {
  font-size:13px;
  line-height:1.8;
}
.qr-guide {
  padding:30px 0;
}
.qr-guide h2 {
  font-size:24px;
}
.qr-guide ol {
  padding-left:24px;
  margin:30px 0;
}
.qr-guide li {
  padding:0 0 26px 10px;
  color:#e4d6bb;
}
.qr-guide li::marker {
  color:#ed9b47;
}
.qr-guide strong,.qr-guide span {
  display:block;
}
.qr-guide span {
  font-size:12px;
  line-height:1.8;
  margin-top:6px;
  color:var(--color-text-secondary);
}
.auth-shell .auth-eyebrow,.dashboard-welcome,.quick-card small {
  color:#b9c198;
}
.menu-category h2 {
  color:#c4d391;
}
.preview-note,.preview-category,.editor-note p {
  color:var(--color-text-secondary);
}
.loca-toolbar .table-search {
  position:relative;
}
.loca-toolbar .table-search:before {
  content:'Masa ara';
  font-size:10px;
  color:#b9bda5;
}
@media(max-width:1000px) {
  .qr-workspace {
    grid-template-columns:1fr;
    gap:12px;
  }
  .qr-guide {
    padding:20px 0;
    max-width:520px;
  }
}
@media(max-width:600px) {
  .admin-app .qr-card {
    padding:24px 18px;
  }
  .loca-card-head-actions>.badge {
    flex-shrink:0;
  }
  .qr-card img {
    height:auto;
  }
}
@media print {
  .qr-guide,.qr-card form,.qr-card>button,.qr-card .eyebrow {
    display:none!important;
  }
  .qr-workspace {
    display:block;
  }
  .qr-card h2,.qr-menu-url {
    color:#000;
  }
  .qr-card img {
    width:240px;
    height:240px;
  }
}

/* Tarife ve oturum başlatma alanındaki taşmayı düzeltir. */
.admin-app form.loca-card-billing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  align-content: center;
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.admin-app form.loca-card-billing > .loca-billing-select {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.admin-app form.loca-card-billing select,
.admin-app form.loca-card-billing > .loca-start-button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* 01 — V3 tokens. Charcoal surfaces, warm typography, restrained olive. */
:root:root,.admin-app,.auth-shell {
  --ui-bg:#11130f;
  --ui-panel:#1c2018;
  --ui-raised:#242a1f;
  --ui-recess:#151911;
  --ui-line:#3c4433;
  --ui-line-soft:#30382a;
  --ui-text:#f0e3ce;
  --ui-muted:#b4bea6;
  --ui-faint:#919e80;
  --ui-orange:#ff9c42;
  --ui-orange-hover:#ffb165;
  --ui-olive:#bdce8b;
  --ui-danger:#ffae96;
  --ui-radius:20px;
  --ui-gap:20px;
  --ui-shadow:0 8px 24px #00000024;
  --ui-shadow-hover:0 18px 40px #00000040;
  --ui-ease:cubic-bezier(.2,.7,.2,1);
  --ui-fast:160ms;
  --ui-medium:240ms;
  --color-bg:var(--ui-bg);
  --color-surface:var(--ui-panel);
  --color-surface-2:var(--ui-raised);
  --color-border:var(--ui-line);
  --color-text:var(--ui-text);
  --color-text-secondary:var(--ui-muted);
  --color-accent:var(--ui-orange);
  --color-success:#c7dca0;
  --color-success-bg:#2f3c23;
  --color-warning:#ffc286;
  --color-warning-bg:#3c2e1e;
  --color-danger:var(--ui-danger);
  --color-danger-bg:#462c23;
  --sidebar-width:236px;
  color-scheme:dark;
}

/* 02 — Shell and page rhythm. */
body {
  background:var(--ui-bg);
  color:var(--ui-text);
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}
.admin-app {
  font-size:14px;
  line-height:1.55;
  overflow-wrap:break-word;
}
.admin-content {
  max-width:1720px;
  padding:36px clamp(20px,3vw,48px) 64px;
  margin-inline:auto;
}
.admin-main {
  min-width:0;
  isolation:isolate;
}
.admin-topbar {
  background:#151911f2;
  border-bottom:1px solid var(--ui-line-soft);
  min-height:72px;
  gap:16px;
}
.admin-topbar-brand {
  font-size:12px;
  line-height:1.5;
  color:var(--ui-muted);
}
#section-label {
  color:var(--ui-text);
  font-weight:650;
}
.topbar-divider {
  color:var(--ui-faint);
  padding-inline:10px;
}
.topbar-account {
  gap:10px;
  min-height:44px;
  color:var(--ui-muted);
  text-decoration:none;
}
.account-avatar {
  width:36px;
  height:36px;
  background:#303922;
  border:1px solid #4f6035;
  color:#d9e6b7;
}
.admin-sidebar {
  background:#0d110c;
  border-right:1px solid #2d3527;
  box-shadow:8px 0 36px #0000000a;
}
.admin-brand {
  padding:0 10px 36px;
  gap:12px;
  font-weight:750;
}
.admin-brand-mark {
  border-radius:13px;
  background:var(--ui-orange);
  color:#201a11;
  box-shadow:0 4px 12px #0003;
}
.admin-brand small {
  font-size:11px;
  color:#acb49b;
  line-height:1.6;
}
.nav-caption {
  margin:0 12px 12px;
  color:#93a080;
  letter-spacing:.16em;
  line-height:1.5;
}
.admin-nav-links {
  gap:6px;
  padding-block:2px;
}
.admin-nav-link {
  min-height:48px;
  border:1px solid transparent;
  padding:12px 14px;
  gap:12px;
  border-radius:11px;
  color:#bcc7ad;
}
.admin-nav-link svg {
  flex:none;
  width:19px;
  height:19px;
  opacity:.85;
}
.admin-nav-link.active {
  color:#ffd0a1;
  background:#342b1d;
  border-color:#5b4127;
  box-shadow:inset 3px 0 var(--ui-orange);
}
.admin-nav-link.active svg {
  opacity:1;
  color:#ffb46e;
}
.admin-sidebar-footer {
  padding-top:18px;
  margin-top:auto;
  border-color:#2d3527;
}
.admin-logout-btn {
  min-height:46px;
  border-radius:11px;
  padding:12px 14px;
  font-size:12px;
}
.content-header {
  margin-bottom:26px;
  padding-block:2px;
}
.content-header-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.page-heading {
  flex:1 1 320px;
  min-width:0;
}
.admin-app .page-heading h1 {
  margin:0;
  font-size:clamp(28px,2.8vw,38px);
  font-weight:700;
  letter-spacing:-1.1px;
  line-height:1.18;
}
.page-heading .eyebrow {
  margin:0 0 9px;
  color:#b9c398;
  font-size:10px;
  letter-spacing:.18em;
}
.page-description {
  max-width:620px;
  margin:10px 0 0;
  color:var(--ui-muted);
  font-size:13px;
  line-height:1.75;
}
.breadcrumb {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:18px;
  color:var(--ui-faint);
  font-size:12px;
}
.breadcrumb a {
  color:var(--ui-muted);
  text-underline-offset:4px;
}
.heading-amp {
  color:var(--ui-orange);
  padding-inline:2px;
  font-weight:500;
}

/* 03 — Shared interactive controls. */
.admin-app :where(button,.btn) {
  min-height:44px;
  border-radius:11px;
  line-height:1.4;
  font-weight:650;
}
.admin-app .btn:not(.btn-secondary):not(.btn-danger) {
  background:var(--ui-orange);
  border-color:#ec872e;
  color:#21170c;
  box-shadow:0 3px 9px #0002;
}
.admin-app .btn-secondary,.admin-app a.btn-secondary {
  background:#2b3224;
  border-color:#46533a;
  color:#e7e2ce;
  box-shadow:0 1px 2px #0002;
}
.admin-app .btn-link {
  color:#dec29c;
  text-underline-offset:4px;
  box-shadow:none;
}
.admin-app .btn-danger {
  background:#653524;
  border-color:#9b5237;
  color:#ffe0ca;
}
.admin-app button:disabled,.admin-app .btn[aria-disabled=true] {
  opacity:.48;
  cursor:not-allowed;
  box-shadow:none;
  filter:none;
  transform:none;
}
.admin-app input:not([type=checkbox]):not([type=radio]),.admin-app select,.admin-app textarea {
  border:1px solid #46513a;
  background:#151a11;
  color:#eee4d0;
  border-radius:10px;
  line-height:1.5;
  padding:11px 13px;
  min-height:46px;
}
.admin-app input::placeholder,.admin-app textarea::placeholder {
  color:#9faa8f;
  opacity:1;
}
.admin-app input:focus,.admin-app select:focus,.admin-app textarea:focus {
  border-color:#d49b5c;
  outline:0;
  box-shadow:0 0 0 3px #e69b4029;
}
.admin-app input:disabled,.admin-app select:disabled,.admin-app textarea:disabled {
  background:#252a20;
  color:#98a088;
  opacity:.65;
  cursor:not-allowed;
}
.admin-app input[readonly],.admin-app textarea[readonly] {
  border-style:dashed;
  color:#bfcaaf;
  cursor:default;
}
.admin-app input[type=checkbox],.admin-app input[type=radio] {
  accent-color:#bdd185;
  flex:none;
  margin:0;
  width:19px;
  height:19px;
  min-height:19px;
}
.admin-app input[type=search]::-webkit-search-cancel-button {
  cursor:pointer;
  margin-inline-start:8px;
}
.admin-app label {
  color:#ccd3bf;
  font-size:12px;
  font-weight:550;
  line-height:1.5;
}
.admin-app select option {
  background:#1e2518;
  color:#ece5d2;
}
.admin-app textarea {
  min-height:130px;
  resize:vertical;
}
.admin-app :where(button,a,input,select,textarea,summary):focus-visible {
  outline:2px solid #ffbe7b;
  outline-offset:4px;
}
::selection {
  background:#d7893a;
  color:#17170e;
}

/* 04 — Overview strip. */
.loca-overview {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border:1px solid #394430;
  border-radius:16px;
  background:#1a2115;
  box-shadow:0 5px 18px #0002;
  margin:0 0 22px;
}
.loca-overview>div {
  background:transparent;
  min-width:0;
  padding:21px 24px;
  border-inline-end:1px solid #394430;
  align-items:center;
  gap:18px;
}
.loca-overview>div:last-child {
  border-inline-end:0;
}
.loca-overview span {
  font-size:12px;
  line-height:1.55;
  color:#bcc6ac;
}
.loca-overview strong {
  font-size:30px;
  line-height:1;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  letter-spacing:-1px;
  color:#e8ddc6;
}
.loca-overview>div:nth-child(2) strong {
  color:#c6db92;
}
.loca-overview>div:nth-child(3) strong {
  color:#ffb172;
}
.loca-overview>div:nth-child(4) strong {
  color:#dbd7af;
}

/* 05 — Search and segmented filters. */
.admin-app .loca-toolbar {
  padding:10px;
  border:1px solid #333e2b;
  background:#181e14;
  border-radius:14px;
  margin-bottom:24px;
  gap:14px;
  box-shadow:none;
}
.loca-filters {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid #303b27;
  border-radius:11px;
  background:#11170e;
}
.admin-app .loca-filter {
  background:transparent;
  border:1px solid transparent;
  color:#b4c1a4;
  border-radius:8px;
  min-height:40px;
  padding:9px 14px;
  font-size:12px;
  font-weight:550;
  box-shadow:none;
}
.admin-app .loca-filter[aria-pressed=true] {
  background:#343f27;
  color:#e1edc5;
  border-color:#596b3e;
  box-shadow:0 2px 6px #0003;
}
.loca-toolbar .table-toolbar {
  display:flex;
  flex-wrap:wrap;
  flex:1 1 250px;
  min-width:0;
  gap:12px;
  justify-content:flex-end;
  align-items:center;
}
.loca-toolbar .table-search {
  display:block;
  position:relative;
  flex:0 1 260px;
  width:260px;
  min-width:0;
  max-width:100%;
  font-size:0;
}
.loca-toolbar .table-search::before {
  content:none;
}
.loca-toolbar input[type=search] {
  width:100%;
  min-width:0;
  min-height:44px;
  padding:10px 14px;
  background:#12180f;
  border-color:#414e34;
  font-size:13px;
}
.loca-toolbar .result-count {
  min-width:65px;
  text-align:right;
  color:#aebd9b;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

/* 06 — Card grid. All direct children occupy a predictable column. */
.loca-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:24px;
  align-items:stretch;
  min-width:0;
}
.loca-grid>.loca-card {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:480px;
  min-width:0;
  padding:24px;
  border:1px solid #465039;
  border-radius:20px;
  background:linear-gradient(155deg,#252c20 0%,#1a2016 70%);
  box-shadow:var(--ui-shadow);
  position:relative;
  isolation:isolate;
  transition:border-color 220ms var(--ui-ease),box-shadow 220ms var(--ui-ease),transform 220ms var(--ui-ease);
  animation:ember-card-arrive 380ms var(--ui-ease) both;
}
.loca-grid>.loca-card>* {
  min-width:0;
  max-width:100%;
}
.loca-grid>.loca-card::before {
  content:'';
  position:absolute;
  top:-1px;
  left:24px;
  right:24px;
  bottom:auto;
  height:2px;
  width:auto;
  background:linear-gradient(90deg,transparent,#829657,transparent);
  border-radius:0 0 8px 8px;
  pointer-events:none;
  opacity:.85;
}
.loca-grid>.loca-card::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 #e7ebbd08;
  pointer-events:none;
  z-index:-1;
}
.loca-card:nth-child(2n) {
  animation-delay:35ms;
}
.loca-card:nth-child(3n) {
  animation-delay:70ms;
}
.loca-card.has-orders {
  border-color:#886239;
}
.loca-grid>.loca-card.has-orders::before {
  background:linear-gradient(90deg,transparent,#f9a553,transparent);
  opacity:1;
}
.loca-grid>.loca-card.has-call {
  border-color:#ac7050;
  box-shadow:0 0 0 1px #a9693520,var(--ui-shadow);
}
.loca-grid>.loca-card.has-call::before {
  background:linear-gradient(90deg,transparent,#ffb491,transparent);
  opacity:1;
}
.loca-card:focus-within {
  outline:0;
  border-color:#b3c38d;
  box-shadow:0 0 0 2px #aab77a20,var(--ui-shadow);
}

/* 07 — Identity row. */
.loca-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:62px;
  padding:0 0 18px;
  margin:0;
  border-bottom:1px solid #3c4631;
  gap:12px;
}
.loca-identity {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  flex:1;
}
.loca-identity>div {
  min-width:0;
}
.loca-kicker {
  color:#b0bd96;
  font-size:9px;
  letter-spacing:.2em;
  line-height:1;
  font-weight:650;
  margin-bottom:7px;
}
.loca-card .loca-identity h3 {
  color:#f0e4cf;
  font-size:20px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.5px;
  margin:0;
  overflow-wrap:anywhere;
}
.loca-card-head-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.loca-card-head-actions>.badge {
  flex:0 0 auto;
  font-size:10px;
  font-weight:650;
  padding:6px 9px;
  line-height:1.3;
  border:1px solid transparent;
}
.loca-card-head-actions>.badge-delivered {
  background:#344326;
  color:#d1e4a8;
  border-color:#536d35;
}
.loca-card-head-actions>.badge-neutral {
  background:#30352a;
  color:#c0c8b2;
  border-color:#4b553d;
}
.loca-card-head-actions form {
  margin:0;
}
.admin-app .loca-card-close {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border:1px solid #465237;
  border-radius:9px;
  background:#20261a;
  color:#aab596;
  font-size:13px;
  line-height:1;
  box-shadow:none;
}
@media(hover:hover) {
  .admin-app .loca-card-close:hover {
    background:#422d21;
    border-color:#8d6041;
    color:#ffceaa;
  }
}

/* 07b — Card body tabs (Oturum/Sipariş/QR): one panel visible at a time. */
.loca-card-tabs {
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid #303b27;
  border-radius:11px;
  background:#11170e;
}
.admin-app .loca-card-tab {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:9px 10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  color:#b4c1a4;
  font-size:12px;
  font-weight:600;
  box-shadow:none;
}
.admin-app .loca-card-tab[aria-selected=true] {
  background:#343f27;
  color:#e1edc5;
  border-color:#596b3e;
  box-shadow:0 2px 6px #0003;
}
.admin-app .loca-card-tab.has-alert {
  color:#ffcb8f;
}
.loca-tab-badge {
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--ui-orange);
  color:#241a0d;
  font-size:10px;
  font-weight:750;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
@media(hover:hover) {
  .admin-app .loca-card-tab:hover {
    color:#e2ebcc;
    background:#26351d;
  }
  .admin-app .loca-card-tab[aria-selected=true]:hover {
    background:#425531;
    border-color:#728951;
  }
}

/* 08 — Two operational metrics share one compact surface. */
.loca-card-stats {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  background:#171e12;
  border:1px solid #39462c;
  border-radius:12px;
  min-width:0;
  overflow:visible;
}
.loca-card .loca-card-orders,.loca-card .loca-card-call {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  width:100%;
  gap:7px;
  min-height:78px;
  padding:13px 14px;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.loca-card .loca-card-orders {
  border-inline-end:1px solid #39462c;
  border-radius:11px 0 0 11px;
  color:#d2dbbd;
  text-decoration:none;
}
.loca-card .loca-card-call {
  border-radius:0 11px 11px 0;
}
.loca-card-stats .stat-label {
  color:#aebd9a;
  font-size:11px;
  line-height:1.4;
  font-weight:500;
}
.loca-card-stats .stat-value {
  font-size:15px!important;
  line-height:1.4;
  font-weight:700;
  letter-spacing:0;
  white-space:normal;
  margin:0;
}
.loca-card-stats .loca-call-status-ok {
  color:#c8d6ab;
  font-size:13px;
  line-height:1.4;
  font-weight:600;
}
.loca-card.has-orders .loca-card-orders {
  background:#382d1c;
  border-color:#69502e;
  color:#ffd09b;
}
.loca-card.has-orders .loca-card-orders .stat-label {
  color:#dfc29a;
}
.loca-card.has-orders .loca-card-orders .stat-value {
  color:#ffbe78;
}
.loca-card .loca-card-call.active {
  background:#3b2b20;
  animation:none;
}
.loca-card-call.active .stat-label {
  color:#ecc3a6;
}
.admin-app .loca-card .loca-call-ack {
  width:100%;
  min-width:0;
  min-height:44px;
  background:#70442d;
  border:1px solid #a86b44;
  border-radius:8px;
  padding:8px 9px;
  color:#ffe4cb;
  font-size:11px;
  line-height:1.4;
  white-space:normal;
  box-shadow:none;
}

/* 09 — Billing surface, shared by empty, running and paused states. */
.loca-card>.loca-card-billing {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:center;
  align-content:normal;
  gap:16px;
  width:100%;
  min-width:0;
  min-height:210px;
  height:100%;
  margin:0;
  padding:18px;
  background:#1d2616;
  border:1px solid #455a30;
  border-radius:13px;
  box-shadow:inset 0 1px 0 #cbd9a308;
}
.loca-card>.loca-card-billing.active {
  background:linear-gradient(145deg,#304025,#202c19);
  border-color:#647e43;
}
.loca-card>.loca-card-billing.paused {
  background:linear-gradient(145deg,#3e3221,#2c251a);
  border-color:#8f713c;
}
.loca-card-billing.active .stat-label {
  color:#d0dfb5;
}
.loca-card-billing.paused .stat-label {
  color:#ebce9b;
}
.loca-billing-info {
  display:flex;
  flex-direction:column;
  gap:9px;
  width:100%;
  min-width:0;
}
.loca-billing-info>.stat-label {
  display:block;
  font-size:11px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.03em;
}
.loca-billing-info .stat-value {
  color:#f3e8d1;
  font-size:clamp(24px,2.1vw,32px)!important;
  font-weight:650;
  line-height:1.15;
  letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.loca-billing-info>.stat-sub {
  color:#c1cbaa;
  font-size:11px;
  line-height:1.7;
}
/* The running total was reading as just another muted detail next to
   "Başladı: HH:MM" — bumped to the theme's accent color and a larger,
   heavier weight so the number staff actually care about mid-session
   doesn't get lost in the row. */
.loca-billing-live {
  color:var(--ui-orange);
  font-weight:750;
  font-size:13px;
}
/* Eye icon next to the running total opens the same breakdown table the
   "Hesabı kapat" close-preview page already shows (süre ücreti / sipariş
   toplamı / genel toplam) — just a second, lower-commitment way in for
   staff who only want a quick look, not to actually close the tab yet.
   Visiting that page is a plain GET; nothing closes until its own button
   is pressed there. */
.loca-billing-detail-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:4px;
  color:#ffc17c;
  vertical-align:-4px;
}
.loca-billing-detail-trigger svg {
  width:14px;
  height:14px;
}
@media (hover:hover) {
  .loca-billing-detail-trigger:hover {
    color:#ffe0b3;
  }
}
.loca-billing-info [data-billing-total] {
  font-variant-numeric:tabular-nums;
}
.loca-card-billing.paused .loca-billing-info>.stat-sub {
  color:#d5c19b;
}

/* 10 — Start form: explicit grid prevents inherited column-wrap overflow. */
.admin-app .loca-card>form.loca-card-billing {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-auto-flow:row;
  grid-template-rows:auto auto;
  align-content:center;
  align-items:stretch;
  justify-content:stretch;
  gap:16px;
  width:100%;
  min-width:0;
  max-width:100%;
}
.admin-app .loca-card>form.loca-card-billing>.loca-billing-select {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex:none;
  gap:9px;
  width:100%;
  min-width:0;
  max-width:100%;
  color:#bccaa6;
  font-size:11px;
  line-height:1.4;
}
.admin-app .loca-card>form.loca-card-billing select {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:46px;
  margin:0;
  padding:11px 12px;
  border:1px solid #53633e;
  background:#17210f;
  color:#e5e4cb;
  border-radius:9px;
  font-size:13px;
  box-sizing:border-box;
}
.admin-app .loca-card>form.loca-card-billing>.loca-start-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:46px;
  margin:0;
  padding:12px 14px;
  border:1px solid #dc8b3d;
  border-radius:10px;
  background:linear-gradient(180deg,#ffac59,#f3963e);
  color:#281b0d;
  font-size:12px;
  font-weight:750;
  letter-spacing:.01em;
  white-space:normal;
  box-shadow:0 4px 10px #0002,inset 0 1px 0 #ffe1b830;
}
.loca-start-button::after {
  content:'→';
  font-size:17px;
  line-height:1;
  font-weight:500;
}

/* 11 — Running session actions. */
.loca-billing-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:8px;
  width:100%;
  min-width:0;
  margin-top:2px;
}
.loca-billing-actions>form {
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:0;
  margin:0;
  min-width:0;
}
.admin-app .loca-billing-actions button,.admin-app .loca-billing-actions>a.btn-secondary {
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  width:100%;
  min-height:44px;
  border:1px solid #596847;
  background:#303d26;
  color:#e0e6cc;
  border-radius:9px;
  padding:10px 8px;
  font-size:11px;
  line-height:1.4;
  text-align:center;
  white-space:normal;
  text-decoration:none;
  box-shadow:none;
}
.loca-card-billing.paused .loca-billing-actions button,.loca-card-billing.paused .loca-billing-actions>a.btn-secondary {
  background:#493b28;
  border-color:#78623f;
  color:#efdfbd;
}
/* Duraklat/Hesabı kapat/Sipariş ekle share one row of three; a timed
   session also gets a "Süresiz" button (clears the duration limit, back
   to open-ended), and four in a row got too cramped — that case goes
   2x2 instead of wrapping the last one onto its own half-empty row. */
.loca-billing-actions-3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.loca-billing-actions-4 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Pencil icon inline after "Başladı: HH:MM" opens the start-time dialog
   (data-start-edit-dialog, below) — ghost icon so it doesn't compete with
   the time itself for attention. Prefixed with .admin-app (unlike most
   one-off classes here) because a <button> whose padding loses a
   specificity fight to `.admin-app button {padding:11px 17px}` also, as
   a Chromium quirk, ignores this rule's own explicit width/height and
   falls back to content+padding sizing — winning the padding fight too
   is what keeps the icon its intended 20x20 instead of ballooning to
   fit that padding. */
.admin-app .loca-start-edit-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  min-height:20px;
  margin:0 2px;
  padding:0;
  border:0;
  background:transparent;
  color:#8d9d68;
  vertical-align:-5px;
  cursor:pointer;
}
.loca-start-edit-trigger svg {
  width:13px;
  height:13px;
}
@media (hover:hover) {
  .loca-start-edit-trigger:hover {
    color:#dbe6c8;
  }
}
.loca-start-edit-dialog .loca-duration-hours input[type=datetime-local] {
  min-height:46px;
  padding:10px 12px;
}

/* 12 — Guest QR surface. */
.loca-card-qr {
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-height:104px;
  padding:16px;
  border:1px solid #3f4c30;
  border-radius:13px;
  background:#141c10;
  box-shadow:none;
}
.loca-qr-thumb {
  display:block;
  width:70px;
  height:70px;
  min-width:70px;
  max-width:70px;
  padding:5px;
  border-radius:10px;
  border:1px solid #cad1b4;
  object-fit:contain;
  flex:none;
}
.loca-qr-thumb:not(.loca-qr-thumb-empty) {
  background:#fff;
  image-rendering:auto;
  filter:none;
}
.loca-qr-thumb-empty {
  display:grid;
  place-items:center;
  background:#26331c;
  border:1px dashed #647948;
  color:#bbcf94;
}
.loca-qr-thumb-empty svg {
  width:36px;
  height:36px;
  opacity:.9;
}
.loca-qr-info {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.loca-qr-info>.stat-label {
  color:#d4dcc2;
  font-size:12px;
  line-height:1.3;
  font-weight:600;
}
.loca-qr-info>.badge {
  font-size:10px;
  line-height:1.5;
  padding:4px 8px;
  white-space:normal;
  max-width:100%;
}
.loca-qr-info>.badge-neutral {
  background:#303b24;
  color:#c1ceaa;
  border:1px solid #4b5e33;
}
.loca-qr-info>.badge-delivered {
  background:#334927;
  color:#d1e9aa;
  border:1px solid #5b783a;
}
.loca-qr-info>.stat-sub {
  margin:0;
  color:#adbda0;
  font-size:10px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

/* 13 — QR controls and card footer. */
.loca-card-qr-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:8px;
  min-width:0;
}
.loca-card-qr-actions>form {
  display:flex;
  flex-direction:column;
  flex:1 1 110px;
  min-width:0;
  margin:0;
  gap:0;
}
.admin-app .loca-card-qr-actions button {
  width:100%;
  min-width:0;
  min-height:44px;
  font-size:11px;
  line-height:1.4;
  padding:10px;
  border-radius:9px;
  white-space:normal;
}
.admin-app .loca-card-qr-actions .btn-secondary {
  background:#28351e;
  border-color:#526940;
  color:#d4e3b7;
  box-shadow:none;
}
.admin-app .loca-card-qr-actions .btn-link {
  background:transparent;
  border:1px dashed #61503a;
  color:#d6b795;
}
.loca-card>.loca-card-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #3c4830;
}
.loca-card-actions a {
  display:inline-flex;
  flex:1;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 10px;
  background:#242c1c;
  border:1px solid #465237;
  font-size:11px;
  font-weight:650;
  color:#d6dfc0;
  border-radius:9px;
  text-decoration:none;
}
.loca-card-actions form {
  margin:0;
  gap:0;
  flex:1;
}
.admin-app .loca-card-actions .btn-link {
  width:100%;
  min-height:40px;
  padding:8px 10px;
  background:#2e1d18;
  border:1px solid #6b4030;
  border-radius:9px;
  color:#ffb69b;
  font-size:11px;
  font-weight:650;
}
.loca-grid>.stock-item-empty {
  grid-column:1/-1;
  padding:56px 24px;
  min-height:160px;
  display:grid;
  place-items:center;
  border:1px dashed #586d3e;
  border-radius:16px;
  background:#1a2213;
  color:#c2cead;
  font-size:14px;
  line-height:1.7;
  text-align:center;
}

/* 14 — QR detail and print controls. */
.qr-workspace {
  display:grid;
  grid-template-columns:minmax(0,520px) minmax(240px,360px);
  align-items:start;
  gap:32px;
}
.admin-app .qr-card {
  padding:32px;
  border-radius:22px;
  background:linear-gradient(145deg,#2a3620,#1b2415);
  border:1px solid #566e3c;
  box-shadow:var(--ui-shadow);
  text-align:center;
}
.qr-card>.eyebrow {
  color:#b8cc94;
  margin:0 0 12px;
  letter-spacing:.17em;
}
.admin-app .qr-card h2 {
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.6px;
  margin:0 0 28px;
}
.qr-card img {
  display:block;
  width:240px;
  max-width:100%;
  height:auto;
  margin:0 auto 24px;
  padding:16px;
  border-radius:16px;
  background:#fff;
  filter:none;
  box-shadow:0 8px 24px #0003;
}
.qr-card p {
  color:#bfceaa;
  font-size:12px;
  line-height:1.75;
}
.qr-menu-url {
  overflow-wrap:anywhere;
  padding:12px;
  border:1px dashed #566a3c;
  border-radius:9px;
  background:#1b2513;
}
.qr-card form {
  margin-top:24px;
  gap:12px;
}
.qr-card form button,.qr-card>button {
  width:100%;
  min-height:48px;
  font-size:13px;
  border-radius:10px;
}
.qr-guide {
  padding:26px 0;
  min-width:0;
}
.qr-guide h2 {
  font-size:26px;
  line-height:1.2;
  letter-spacing:-.5px;
  margin:0 0 20px;
}
.qr-guide ol {
  padding-left:22px;
  margin:28px 0 12px;
}
.qr-guide li {
  padding:0 0 24px 10px;
}
.qr-guide li::marker {
  color:#e9ab65;
  font-weight:650;
}
.qr-guide strong {
  font-size:13px;
  line-height:1.5;
  color:#e0dfc5;
}
.qr-guide span {
  color:#b6c4a4;
  font-size:12px;
  line-height:1.8;
  margin-top:6px;
}
.qr-empty-state {
  border:1px dashed #5e7342;
  border-radius:15px;
  background:#1d2815;
  margin-block:24px;
  padding:28px 18px;
}
.qr-empty-state>span {
  color:#bed294;
  font-size:64px;
  line-height:1;
  margin-bottom:18px;
}
.qr-empty-state h3 {
  font-size:17px;
  margin:0 0 12px;
}

/* 15 — Consistent secondary cards and lists. */
.stat-cards {
  gap:18px;
  margin-bottom:28px;
}
.stat-card {
  min-width:0;
  padding:24px;
  border:1px solid #465337;
  border-radius:17px;
  background:#20281a;
  box-shadow:var(--ui-shadow);
  gap:14px;
}
.stat-card .stat-label {
  color:#bbc8a7;
  font-size:12px;
  line-height:1.5;
}
.stat-card .stat-value {
  color:#ece4cd;
  font-weight:650;
  letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;
}
.stat-card .stat-sub {
  color:#a9b994;
  font-size:11px;
  line-height:1.5;
}
.stat-card-accent {
  background:linear-gradient(130deg,#394b29,#28391e);
  border-color:#607b41;
}
.stat-card-warning {
  background:linear-gradient(130deg,#493923,#302719);
  border-color:#856332;
}
.stat-card-warning .stat-value {
  color:#ffca8b;
}
.quick-grid {
  gap:14px;
  margin-bottom:28px;
}
.quick-card {
  min-width:0;
  min-height:90px;
  padding:20px;
  border:1px solid #435533;
  border-radius:15px;
  background:#202a18;
  box-shadow:0 4px 14px #0002;
}
.quick-card svg {
  width:24px;
  height:24px;
  color:#bfd395;
}
.quick-card span {
  font-size:13px;
  line-height:1.4;
  color:#e0e5cd;
}
.quick-card small {
  color:#b1c09e;
  font-size:11px;
  line-height:1.5;
}
.stock-item {
  padding:20px;
  border:1px solid #405431;
  border-radius:16px;
  background:#20291a;
  box-shadow:0 4px 16px #0002;
  gap:18px;
}
.stock-item-info {
  min-width:0;
  flex:1 1 180px;
}
.stock-item-info h3 {
  font-size:15px;
  line-height:1.45;
  margin:0 0 5px;
  overflow-wrap:anywhere;
}
.stock-item-info small {
  color:#b7c69f;
  line-height:1.6;
}
.stock-item-form {
  min-width:0;
  align-items:center;
  flex-wrap:wrap;
}
.stock-toolbar {
  padding:14px;
  border:1px solid #3d4e2f;
  border-radius:13px;
  background:#1a2414;
  gap:12px;
}
.stock-search {
  min-width:0;
  max-width:100%;
}

/* 16 — Forms, validation and editor. */
.admin-app .form-card {
  max-width:840px;
  padding:30px;
  background:#20291a;
  border:1px solid #4a5b36;
  border-radius:19px;
  box-shadow:var(--ui-shadow);
}
.admin-app .form-card form {
  gap:22px;
  min-width:0;
}
.admin-app .form-card fieldset {
  min-width:0;
  padding:0;
  border:0;
  margin:0;
}
.admin-app .form-card fieldset+fieldset {
  padding-top:24px;
  border-top:1px solid #435332;
}
.admin-app .form-card legend {
  padding:0 0 18px;
  color:#e2e6cb;
  font-size:15px;
  line-height:1.4;
  font-weight:650;
}
.field-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.field-grid>label {
  min-width:0;
}
.field-help {
  color:#aabd93;
  font-size:11px;
  line-height:1.7;
  margin-top:3px;
}
.form-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding-top:22px;
  border-top:1px solid #3f5030;
  margin-top:4px;
}
.form-actions>* {
  min-height:46px;
}
.checkbox {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  min-height:44px;
  cursor:pointer;
}
.editor-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:24px;
  align-items:start;
}
.editor-layout>.product-editor {
  max-width:none;
  width:100%;
}
.editor-aside {
  min-width:0;
  top:100px;
}
.preview-image {
  border:1px solid #435530;
  border-radius:14px;
  overflow:hidden;
  background:#26351c;
}
.preview-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.preview-name {
  margin:16px 0 8px;
  color:#e5e9cf;
  font-size:18px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.preview-description {
  color:#b3c39c;
  font-size:12px;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.preview-price {
  color:#ffc084;
  font-size:19px;
  font-weight:700;
  margin-top:14px;
  font-variant-numeric:tabular-nums;
}
.editor-note {
  padding:17px;
  border:1px solid #415530;
  border-radius:12px;
  background:#1c2914;
  color:#bace9d;
}
.step-number {
  width:27px;
  height:27px;
  border:1px solid #526c38;
  border-radius:8px;
  background:#2f4220;
  color:#d3e3b2;
}
.admin-app input:user-invalid,.admin-app select:user-invalid,.admin-app textarea:user-invalid {
  border-color:#d68768;
  box-shadow:0 0 0 3px #ca69421c;
}
.banner {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-radius:12px;
  font-size:13px;
  line-height:1.7;
  margin-bottom:20px;
}
.banner-success {
  background:#2b3d20;
  border:1px solid #536f38;
  color:#d2e2b4;
}
.banner-error {
  background:#402b20;
  border:1px solid #8c543a;
  color:#f2c9b1;
}
.banner-dismiss {
  margin-left:auto;
  min-height:44px;
  border:1px solid currentColor;
  border-radius:8px;
  font-size:11px;
  padding:8px 12px;
}
.error {
  color:#ffc1a1;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.success {
  color:#d2e5b0;
  line-height:1.7;
}

/* 17 — Tables and order cards. */
.admin-app .table-wrap {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  border:1px solid #465735;
  border-radius:16px;
  background:#1d2817;
  box-shadow:var(--ui-shadow);
}
.admin-app table {
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.admin-app th {
  background:#2a3820;
  color:#c0d2a5;
  font-size:10px;
  letter-spacing:.09em;
  font-weight:650;
  line-height:1.6;
  padding:16px 18px;
  white-space:nowrap;
}
.admin-app td {
  padding:17px 18px;
  border-color:#3a4b2b;
  font-size:13px;
  line-height:1.6;
  color:#dce3c9;
}
.admin-app tr:last-child td {
  border-bottom:0;
}
.admin-app td a {
  color:#ffc38a;
  text-underline-offset:4px;
}
.admin-app td .thumb {
  width:48px;
  height:48px;
  border:1px solid #51653a;
  border-radius:10px;
  object-fit:cover;
}
.action-buttons {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.order-card {
  border:1px solid #4a6036;
  border-radius:17px;
  padding:24px;
  background:#23301a;
  box-shadow:var(--ui-shadow);
  margin-bottom:20px;
}
.order-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:1px solid #445b30;
}
.order-card-head h3 {
  font-size:17px;
  line-height:1.4;
  margin:0;
}
.order-total {
  border-top:1px solid #4d6237;
  margin-top:18px;
  padding-top:16px;
  color:#e4e8c8;
  font-size:18px;
  font-weight:650;
  text-align:right;
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  border-radius:999px;
  line-height:1.4;
}
.badge::before {
  flex:none;
  width:5px;
  height:5px;
}
.badge-neutral {
  background:#34422a;
  color:#c6d3b2;
}
.badge-cancelled {
  background:#513222;
  color:#ffc3a4;
}
.badge-delivered {
  background:#344c26;
  color:#d0e9a8;
}

/* 18 — Customer cards and navigation. */
.menu-header {
  background:#11180d;
  border-bottom:1px solid #344b27;
}
.menu-masthead {
  gap:20px;
  align-items:center;
}
.menu-wordmark {
  color:#f1e1bf;
  font-weight:750;
}
.menu-wordmark span {
  color:#b5c69b;
}
.menu-intro {
  max-width:640px;
  color:#b9cda1;
  font-size:13px;
  line-height:1.8;
}
.category-nav {
  display:flex;
  overflow-x:auto;
  flex-wrap:nowrap;
  gap:9px;
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:#6a8244 #1b2a13;
}
.category-chip {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  border:1px solid #4e6b36;
  border-radius:999px;
  background:#273b1c;
  color:#dbe6c0;
  font-size:12px;
}
.category-chip-img {
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
}
.menu-body {
  max-width:960px;
  padding:30px 20px 130px;
}
.menu-category {
  scroll-margin-top:24px;
  margin-bottom:32px;
}
.menu-category h2 {
  color:#d1dfa9;
  font-size:27px;
  line-height:1.3;
  margin-bottom:20px;
}
.menu-item {
  min-width:0;
  padding:20px;
  gap:18px;
  border:1px solid #4c6236;
  border-radius:17px;
  background:linear-gradient(135deg,#2a381f,#202d16);
  box-shadow:0 5px 18px #0002;
}
.menu-item-img {
  width:88px;
  height:88px;
  border-radius:12px;
  border:1px solid #607143;
  object-fit:cover;
  flex:none;
}
.menu-item-info {
  min-width:0;
  flex:1;
}
.menu-item-name {
  font-size:15px;
  line-height:1.4;
  color:#e9e6c9;
  font-weight:650;
  overflow-wrap:anywhere;
}
.menu-item-desc {
  font-size:12px;
  line-height:1.75;
  color:#becda5;
  margin-top:6px;
  overflow-wrap:anywhere;
}
.menu-item-price {
  color:#ffbf7c;
  font-size:15px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}
.menu-item-oos {
  opacity:.65;
  background:#262e21;
  border-style:dashed;
}
.qty-btn {
  min-width:44px;
  width:44px;
  min-height:44px;
  height:44px;
  border:1px solid #637d44;
  border-radius:10px;
  background:#384e25;
  color:#e5edce;
  font-size:18px;
}
.order-bar {
  background:#1b2a13f5;
  border-top:1px solid #556f39;
  box-shadow:0 -10px 35px #0003;
  gap:14px;
}
.call-staff-btn {
  min-height:44px;
  padding:10px 16px;
  background:#864b29;
  border:1px solid #b77445;
  color:#ffe2bd;
}

/* 19 — Authentication surfaces. */
.auth-shell {
  background:#182112;
  min-height:100dvh;
}
.auth-story {
  background:linear-gradient(155deg,#10170c,#1c2a12);
  border-right:1px solid #3d5329;
}
.auth-story h2 {
  color:#ede6c8;
  text-wrap:balance;
}
.auth-story h2 em {
  color:#ffa64a;
}
.auth-story-copy>p:last-child {
  color:#bbcda1;
  line-height:1.85;
}
.auth-form-area {
  background:#1a2513;
  padding:48px 40px;
}
.auth-shell .public-card {
  width:100%;
  max-width:390px;
}
.auth-shell h1 {
  color:#ede6cc;
  font-size:31px;
  line-height:1.25;
}
.auth-shell input {
  min-height:50px;
  border:1px solid #586d3d;
  border-radius:10px;
  background:#141f0e;
  color:#e7e9cc;
  padding:12px 14px;
}
.auth-shell label {
  gap:9px;
  color:#c5d3ae;
  font-size:12px;
  line-height:1.5;
}
.auth-shell button[type=submit] {
  min-height:50px;
  border-radius:10px;
  font-size:13px;
  background:#ffa449;
  border-color:#da8a36;
  color:#241b0e;
}
.auth-shell .password-toggle {
  min-width:58px;
  min-height:40px;
  top:5px;
  right:5px;
  color:#c6d7aa!important;
}
.auth-bottom {
  color:#a6ba8e;
  line-height:1.6;
  text-align:center;
}

/* 20 — Pointer interactions. Motion uses transforms only on large surfaces. */
@media(hover:hover) {
  .loca-grid>.loca-card:hover {
    transform:translateY(-3px);
    border-color:#80975b;
    box-shadow:var(--ui-shadow-hover);
  }
  .loca-grid>.loca-card.has-call:hover {
    border-color:#d99668;
  }
  .loca-card .loca-card-orders:hover {
    background:#28381e;
    text-decoration:none;
  }
  .loca-card.has-orders .loca-card-orders:hover {
    background:#493721;
  }
  .admin-app .loca-filter:hover {
    color:#e2ebcc;
    background:#26351d;
  }
  .admin-app .loca-filter[aria-pressed=true]:hover {
    background:#425531;
    border-color:#728951;
  }
  .admin-app .loca-card>form.loca-card-billing>.loca-start-button:hover {
    background:linear-gradient(180deg,#ffbb72,#ffa148);
    border-color:#ffd19a;
    box-shadow:0 6px 16px #0003;
  }
  .admin-app .loca-billing-actions .btn-secondary:hover {
    background:#425435;
    border-color:#8b9c70;
    color:#f0efd6;
  }
  .admin-app .loca-card-qr-actions .btn-secondary:hover {
    background:#3c512b;
    border-color:#809b57;
  }
  .admin-app .loca-card-qr-actions .btn-link:hover {
    color:#f2c193;
    background:#30281b;
  }
  .loca-card-actions a:hover {
    background:#303f24;
    color:#e8f0d1;
  }
  .admin-app .loca-card-actions .btn-link:hover {
    background:#422d21;
    border-color:#8d6041;
    color:#ffceaa;
  }
  .admin-app .loca-card .loca-call-ack:hover {
    background:#885238;
    border-color:#d58e65;
  }
  .loca-card-qr:hover .loca-qr-thumb {
    transform:none;
  }
  .quick-card:hover {
    background:#2b3a20;
    border-color:#718d4c;
    transform:translateY(-2px);
  }
  .admin-app tbody tr:hover {
    background:#293d1d;
  }
  .category-chip:hover {
    background:#3a5427;
    border-color:#8ca861;
    color:#edf0d0;
  }
  .menu-item:hover {
    border-color:#7e9b53;
  }
  .qty-btn:hover {
    background:#4b6931;
    color:#fff3d2;
  }
}
@keyframes ember-card-arrive {
  from {
    opacity:0;
    transform:translateY(9px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* 22 — Wide screens retain readable card widths. */
@media(min-width:1700px) {
  .admin-content {
    padding-inline:44px;
  }
  .loca-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
  }
  .loca-grid>.loca-card {
    padding:22px;
  }
  .loca-overview>div {
    padding:24px 28px;
  }
  .loca-overview strong {
    font-size:32px;
  }
  .loca-card .loca-identity h3 {
    font-size:21px;
  }
}
@media(min-width:1101px) and (max-width:1399px) {
  .loca-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .loca-grid>.loca-card {
    padding:24px;
  }
  .loca-overview>div {
    padding:18px 16px;
    gap:10px;
  }
  .loca-overview span {
    font-size:11px;
  }
  .loca-overview strong {
    font-size:27px;
  }
  .loca-billing-info .stat-value {
    font-size:30px!important;
  }
}

/* 23 — Tablet, compact desktop and editor. */
@media(max-width:1100px) {
  .admin-content {
    padding:28px 22px 48px;
  }
  .loca-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .loca-grid>.loca-card {
    padding:20px;
  }
  .loca-overview {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .loca-overview>div:nth-child(2) {
    border-inline-end:0;
  }
  .loca-overview>div:nth-child(-n+2) {
    border-bottom:1px solid #394430;
  }
  .loca-overview>div {
    padding:18px 20px;
  }
  .loca-overview span {
    max-width:none;
  }
  .editor-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .editor-aside {
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .editor-aside>.eyebrow {
    grid-column:1/-1;
  }
  .qr-workspace {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
  .qr-guide {
    max-width:520px;
    padding:10px 0;
  }
  .admin-app .filter-bar {
    flex-wrap:wrap;
    gap:12px;
  }
}
@media(min-width:901px) and (max-width:1100px) {
  .loca-card-head {
    flex-wrap:wrap;
  }
  .loca-identity {
    gap:12px;
  }
  .loca-card .loca-identity h3 {
    font-size:18px;
  }
  .loca-card>.loca-card-billing {
    padding:14px;
  }
  .loca-card-qr {
    padding:12px;
    gap:12px;
    grid-template-columns:60px minmax(0,1fr);
  }
  .loca-qr-thumb {
    width:60px;
    height:60px;
    min-width:60px;
    max-width:60px;
  }
}

/* 24 — Mobile navigation and intermediate width. */
@media(max-width:900px) {
  .admin-sidebar {
    width:min(290px,85vw);
    padding:26px 16px max(22px,env(safe-area-inset-bottom));
    box-shadow:18px 0 48px #0006;
  }
  .admin-main {
    margin-left:0;
    width:100%;
  }
  .admin-topbar {
    min-height:68px;
    height:auto;
    padding:12px 18px;
    gap:10px;
    flex-wrap:wrap;
  }
  .admin-topbar-brand {
    font-size:11px;
  }
  .admin-menu-btn {
    flex:none;
    width:44px;
    height:44px;
    min-height:44px;
    border-radius:10px;
  }
  .admin-topbar>.badge {
    max-width:150px;
    white-space:normal;
  }
  .admin-topbar>form {
    margin:0;
  }
  .admin-topbar>form button {
    min-height:44px;
    font-size:11px;
  }
  .admin-content {
    padding:26px 20px 48px;
  }
  .loca-grid {
    gap:18px;
  }
  .loca-billing-info .stat-value {
    font-size:28px!important;
  }
  .auth-story {
    padding-inline:8%;
  }
  .reports-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .chart {
    min-width:0;
  }
}
@media(max-width:700px) {
  .loca-grid {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .loca-grid>.loca-card {
    grid-row:auto;
    grid-template-rows:auto auto auto auto auto auto;
    gap:17px;
    padding:23px;
  }
  .loca-card-head {
    min-height:64px;
  }
  .loca-card>.loca-card-billing {
    min-height:190px;
    height:auto;
  }
  .loca-card .loca-identity h3 {
    font-size:22px;
  }
  .loca-card-stats {
    min-height:78px;
  }
  .loca-card-qr {
    grid-template-columns:72px minmax(0,1fr);
    min-height:108px;
  }
  .loca-qr-thumb {
    width:72px;
    height:72px;
    min-width:72px;
    max-width:72px;
  }
  .loca-billing-info .stat-value {
    font-size:32px!important;
  }
  .loca-overview>div {
    padding:18px;
  }
  .admin-app .loca-toolbar {
    align-items:stretch;
    gap:12px;
    padding:12px;
  }
  .loca-filters {
    width:100%;
  }
  .admin-app .loca-filter {
    flex:1;
    text-align:center;
  }
  .loca-toolbar .table-toolbar {
    flex:1 1 100%;
    justify-content:space-between;
  }
  .loca-toolbar .table-search {
    flex:1;
    width:auto;
  }
  .auth-shell {
    grid-template-columns:1fr;
  }
  .auth-story {
    border-right:0;
    border-bottom:1px solid #3d5329;
    padding:26px;
  }
  .auth-story h2 {
    font-size:34px;
  }
  .auth-form-area {
    padding:36px 26px;
  }
  .editor-aside {
    display:block;
  }
  .editor-note {
    margin-top:20px;
  }
  .stock-item {
    flex-wrap:wrap;
  }
}

/* 25 — Phone layouts. Inputs keep 16px text to prevent focus zoom. */
@media(max-width:600px) {
  .admin-content {
    padding:24px 14px 40px;
  }
  .admin-topbar {
    padding:10px 14px;
    gap:8px;
  }
  .admin-topbar-brand {
    font-size:10px;
    line-height:1.5;
  }
  .topbar-divider {
    padding-inline:5px;
  }
  .account-avatar {
    width:34px;
    height:34px;
    border-radius:10px;
  }
  .content-header {
    margin-bottom:22px;
  }
  .content-header-row {
    gap:10px;
  }
  .page-heading {
    flex-basis:100%;
  }
  .admin-app .page-heading h1 {
    font-size:29px;
    line-height:1.2;
  }
  .page-description {
    font-size:12px;
    line-height:1.75;
    margin-top:9px;
  }
  .content-header-row>.btn {
    flex:1 1 120px;
    padding:11px 10px;
    font-size:11px;
    justify-content:center;
  }
  .loca-overview {
    margin-bottom:18px;
    border-radius:13px;
  }
  .loca-overview>div {
    padding:16px 14px;
    gap:10px;
  }
  .loca-overview span {
    font-size:11px;
    line-height:1.5;
  }
  .loca-overview strong {
    font-size:27px;
  }
  .admin-app .loca-toolbar {
    border-radius:13px;
    margin-bottom:20px;
    padding:10px;
  }
  .loca-filters {
    padding:3px;
    gap:3px;
    border-radius:10px;
  }
  .admin-app .loca-filter {
    padding:9px 6px;
    font-size:11px;
    min-height:40px;
    white-space:normal;
  }
  .loca-toolbar .table-toolbar {
    gap:10px;
  }
  .loca-toolbar .result-count {
    min-width:55px;
    font-size:10px;
  }
  .admin-app .loca-toolbar input[type=search] {
    font-size:16px;
    padding:10px 11px;
  }
  .loca-grid>.loca-card {
    padding:20px;
    border-radius:18px;
    gap:16px;
  }
  .loca-card-head {
    padding-bottom:16px;
    gap:10px;
  }
  .loca-table-icon {
    width:46px;
    height:46px;
    flex-basis:46px;
    border-radius:12px;
  }
  .loca-identity {
    gap:12px;
  }
  .loca-card .loca-identity h3 {
    font-size:20px;
  }
  .loca-kicker {
    font-size:9px;
    margin-bottom:6px;
  }
  .loca-card .loca-card-orders,.loca-card .loca-card-call {
    padding:12px;
    min-height:78px;
  }
  .loca-card-stats .stat-label {
    font-size:11px;
  }
  .loca-card>.loca-card-billing {
    padding:17px;
    border-radius:12px;
  }
  .admin-app .loca-card>form.loca-card-billing select {
    font-size:16px;
    min-height:48px;
  }
  .admin-app .loca-card>form.loca-card-billing>.loca-start-button {
    min-height:48px;
    font-size:12px;
  }
  .loca-billing-info .stat-value {
    font-size:30px!important;
  }
  .loca-billing-info>.stat-sub {
    font-size:11px;
    line-height:1.7;
  }
  .loca-start-edit-dialog .loca-duration-hours input[type=datetime-local] {
    font-size:16px;
    min-height:46px;
  }
  .admin-app .loca-billing-actions button,.admin-app .loca-billing-actions>a.btn-secondary {
    min-height:46px;
    font-size:11px;
  }
  .loca-card-qr {
    padding:14px;
    gap:14px;
  }
  .loca-qr-info>.stat-label {
    font-size:12px;
  }
  .loca-card-actions a {
    font-size:11px;
    padding-inline:4px;
  }
  .admin-app .loca-card-actions .btn-link {
    font-size:11px;
  }
  .admin-app input:not([type=checkbox]):not([type=radio]),.admin-app select,.admin-app textarea {
    font-size:16px;
  }
  .field-grid {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .admin-app .form-card {
    padding:23px 18px;
    border-radius:16px;
  }
  .form-actions {
    gap:10px;
    padding-top:20px;
  }
  .form-actions>.btn,.form-actions>button {
    flex:1;
    font-size:12px;
  }
  .stat-cards {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .stat-card {
    padding:18px 14px;
    border-radius:13px;
    gap:12px;
  }
  .stat-card .stat-label {
    font-size:11px;
  }
  .quick-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .quick-card {
    padding:16px;
    min-height:98px;
    align-items:flex-start;
    border-radius:13px;
  }
  .quick-card span {
    font-size:12px;
  }
  .stock-toolbar {
    flex-wrap:wrap;
    padding:12px;
  }
  .stock-item {
    padding:17px;
    gap:16px;
    border-radius:14px;
  }
  .stock-item-form {
    flex-basis:100%;
    gap:12px!important;
  }
  .stock-item-form button {
    min-height:46px;
  }
  .qr-workspace {
    gap:18px;
  }
  .admin-app .qr-card {
    padding:26px 18px;
    border-radius:18px;
  }
  .admin-app .qr-card h2 {
    font-size:23px;
  }
  .qr-guide {
    padding:8px 4px;
  }
  .qr-guide h2 {
    font-size:23px;
  }
  .order-card {
    padding:18px;
    border-radius:14px;
  }
  .order-card-head h3 {
    font-size:16px;
  }
  .menu-body {
    padding:24px 14px 150px;
  }
  .menu-header {
    padding:24px 18px;
  }
  .menu-masthead {
    align-items:flex-start;
    gap:12px;
  }
  .menu-masthead-actions {
    gap:8px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .menu-item {
    padding:16px;
    gap:13px;
    flex-wrap:wrap;
    border-radius:14px;
  }
  .menu-item-img {
    width:72px;
    height:72px;
    border-radius:10px;
  }
  .menu-item-info {
    flex:1 1 140px;
  }
  .menu-item-name {
    font-size:14px;
  }
  .menu-item-desc {
    font-size:12px;
  }
  .menu-item-price {
    font-size:14px;
  }
  .order-bar {
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }
  .auth-shell input {
    font-size:16px;
  }
  .auth-form-area {
    padding:32px 22px;
  }
}

/* 26 — Narrow phones. No clipping is used to disguise layout errors. */
@media(max-width:380px) {
  .admin-content {
    padding-inline:10px;
  }
  .admin-topbar {
    padding-inline:10px;
  }
  .admin-topbar-brand {
    max-width:150px;
    overflow-wrap:anywhere;
  }
  .loca-grid>.loca-card {
    padding:16px;
    gap:14px;
  }
  .loca-card-head {
    gap:8px;
  }
  .loca-identity {
    gap:9px;
  }
  .loca-table-icon {
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:11px;
  }
  .loca-table-icon svg {
    width:23px;
    height:23px;
  }
  .loca-card .loca-identity h3 {
    font-size:18px;
  }
  .loca-card-head-actions>.badge {
    font-size:9px;
    padding:5px 7px;
  }
  .loca-kicker {
    font-size:8px;
    letter-spacing:.16em;
  }
  .loca-card .loca-card-orders,.loca-card .loca-card-call {
    padding:11px 10px;
  }
  .loca-card-stats .stat-label {
    font-size:10px;
  }
  .loca-card>.loca-card-billing {
    padding:14px;
  }
  .loca-billing-info .stat-value {
    font-size:27px!important;
  }
  .loca-card-qr {
    grid-template-columns:60px minmax(0,1fr);
    padding:12px;
    gap:12px;
  }
  .loca-qr-thumb {
    width:60px;
    height:60px;
    min-width:60px;
    max-width:60px;
  }
  .loca-qr-info>.badge {
    font-size:9px;
    padding:4px 6px;
  }
  .loca-overview>div {
    padding:14px 12px;
  }
  .loca-overview span {
    font-size:10px;
  }
  .loca-overview strong {
    font-size:25px;
  }
  .admin-app .loca-filter {
    font-size:10px;
    padding-inline:5px;
  }
  .loca-toolbar .result-count {
    min-width:50px;
  }
  .loca-card-actions a {
    font-size:10px;
  }
  .stat-card {
    padding:15px 12px;
  }
  .quick-card {
    padding:14px;
  }
  .menu-item-info {
    flex-basis:120px;
  }
  .menu-item-img {
    width:60px;
    height:60px;
  }
}

/* 27 — Touch, accessibility and short landscape viewports. */
@media(pointer:coarse) {
  .admin-app button,.admin-app .btn,.admin-app select {
    min-height:46px;
  }
  .loca-card-actions a {
    min-height:46px;
  }
  .admin-nav-link {
    min-height:48px;
  }
  .loca-grid>.loca-card:hover {
    transform:none;
  }
  .category-chip {
    min-height:46px;
  }
  .qty-btn {
    width:46px;
    height:46px;
  }
}
@media(max-height:550px) and (max-width:900px) {
  .admin-sidebar {
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .admin-brand {
    padding-bottom:20px;
  }
  .admin-sidebar-footer {
    margin-top:20px;
  }
  .admin-topbar {
    position:relative;
  }
}
@media(prefers-contrast:more) {
  :root:root,.admin-app,.auth-shell {
    --ui-line:#94a678;
    --ui-line-soft:#758b5c;
    --ui-muted:#d6e1c4;
  }
  .loca-grid>.loca-card {
    border-color:#a9b985;
  }
  .loca-card>.loca-card-billing {
    border-color:#a2b778;
  }
  .loca-card-qr {
    border-color:#a2b778;
  }
  .loca-card-stats {
    border-color:#a2b778;
  }
  .loca-card-stats .stat-label {
    color:#d7e4bd;
  }
  .loca-billing-info>.stat-sub {
    color:#e1e9cf;
  }
  .loca-card-actions a {
    text-decoration:underline;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .loca-grid>.loca-card:hover {
    transform:none;
  }
  .admin-nav-link:hover {
    transform:none;
  }
  .quick-card:hover {
    transform:none;
  }
}
@media(forced-colors:active) {
  .loca-grid>.loca-card,.loca-card-stats,.loca-card>.loca-card-billing,.loca-card-qr {
    border:1px solid CanvasText;
    background:Canvas;
    color:CanvasText;
    box-shadow:none;
  }
  .loca-filter[aria-pressed=true] {
    outline:2px solid Highlight;
    outline-offset:-3px;
  }
  .loca-qr-thumb:not(.loca-qr-thumb-empty) {
    forced-color-adjust:none;
    background:white;
  }
}

/* 28 — Paper output keeps QR contrast and removes UI-only controls. */
@media print {
  :root:root,.admin-app,.auth-shell {
    --ui-bg:#fff;
    --ui-panel:#fff;
    --ui-text:#111;
    --ui-muted:#444;
    --color-bg:#fff;
    --color-surface:#fff;
    --color-text:#111;
    --color-text-secondary:#444;
    color-scheme:light;
  }
  .admin-sidebar,.admin-topbar,.loca-overview,.loca-toolbar,.loca-card-actions,.loca-card-qr-actions,.loca-billing-actions,.loca-start-edit-trigger,.loca-start-edit-dialog,.qr-guide,.qr-card form,.qr-card>button {
    display:none!important;
  }
  .admin-main {
    margin:0!important;
    width:100%;
  }
  .admin-content {
    max-width:none;
    width:100%;
    padding:0;
  }
  .loca-grid {
    display:block;
  }
  .loca-grid>.loca-card {
    display:block;
    break-inside:avoid;
    padding:18px;
    margin-bottom:16px;
    background:#fff!important;
    color:#111;
    border:1px solid #777;
    box-shadow:none;
    animation:none;
  }
  .loca-grid>.loca-card::before,.loca-grid>.loca-card::after {
    display:none;
  }
  .loca-card-head,.loca-card-stats,.loca-card>.loca-card-billing,.loca-card-qr {
    background:#fff!important;
    border-color:#aaa;
    margin-bottom:14px;
    color:#111;
  }
  .loca-card .loca-identity h3,.loca-billing-info .stat-value,.loca-card .stat-label,.loca-card .stat-sub {
    color:#111!important;
  }
  .loca-card>form.loca-card-billing {
    display:none!important;
  }
  .loca-qr-thumb:not(.loca-qr-thumb-empty) {
    background:white!important;
    filter:none;
  }
  .qr-workspace {
    display:block;
  }
  .admin-app .qr-card {
    max-width:100%;
    background:white!important;
    color:black!important;
    border:0;
    box-shadow:none;
    padding:20px;
  }
  .qr-card h2,.qr-card p,.qr-menu-url {
    color:black!important;
    background:white!important;
  }
  .qr-card img {
    width:240px;
    height:240px;
    box-shadow:none;
    padding:16px;
    background:white!important;
  }
  .qr-card .eyebrow {
    display:none;
  }
}

/* Themed confirm dialog — replaces the bare, unstyled window.confirm()
   box for every data-confirm button (see admin-shell.js). */
.confirm-dialog {
  max-width:400px;
  width:calc(100% - 40px);
  padding:26px;
  border:1px solid var(--color-border);
  border-radius:16px;
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:0 20px 50px #00000040;
}
.confirm-dialog::backdrop {
  background:#05060380;
  backdrop-filter:blur(2px);
}
.confirm-dialog-message {
  margin:0 0 22px;
  font-size:14px;
  line-height:1.6;
}
.confirm-dialog-actions {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
}
/* The primary button only ever gets a border-COLOR from the shared
   button theme (.admin-app .btn:not(.btn-secondary)); with no
   border-style of its own, that's a no-op against app.css's base
   `button{border:none}` reset, so it renders with no border while its
   .btn-secondary sibling (which sets a full border shorthand) does —
   next to each other here, that mismatch reads as the two buttons being
   slightly misaligned. Forcing a real 1px border on both makes their
   edges line up. */
.confirm-dialog-actions button {
  min-width:96px;
  border-width:1px;
  border-style:solid;
}

/* 29 — Masalar (locas) fixes: scoped and additive, no shared-component
   edits, so nothing outside admin/locas/*.html is affected. */

/* Dashed borders mean "empty / not set up yet" everywhere else in this
   UI (loca-card-qr, qr-empty-state) — but this box holds a live menu
   URL, so a dashed edge wrongly reads as an inactive placeholder. */
.qr-menu-url {
  border-style:solid;
}

/* Replaces the bare "⌗" glyph (renders as a missing-glyph box under
   several font stacks) with the same outline icon already used for the
   empty QR state in the locas grid, for one consistent icon family. */
.qr-empty-state-icon {
  display:block;
  width:52px;
  height:52px;
  margin:0 auto 18px;
  color:#8d9d68;
}

/* The locas edit form only has a name field and a checkbox — size its
   card to that instead of the shared 840px form width, which left the
   field stretched edge-to-edge. */
.admin-app .form-card-compact {
  max-width:440px;
}

/* Session close/receipt: keep the line-item table and its total close
   together at wide viewports instead of spanning the full content
   width, and fold the total into the table's own card as a footer row
   instead of leaving it as a disconnected paragraph below. */
.receipt-shell {
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:640px;
}
.table-wrap>.order-total {
  margin:0;
  padding:16px 18px;
  border-top:1px solid #4d6237;
  border-radius:0 0 16px 16px;
}

/* Customer menu: which table this QR belongs to, and — for venues that
   bill by time — when its play session started, so a guest can see both
   at a glance instead of having to ask staff. */
.menu-table-strip {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 20px;
}
.menu-table-since {
  font-size:12px;
  color:#b9cda1;
}
.menu-cost-strip {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 20px;
  padding:12px 16px;
  background:#1f2a17;
  border:1px solid #4c6236;
  border-radius:12px;
  font-variant-numeric:tabular-nums;
}
.menu-cost-strip .stat-label {
  font-size:12px;
  color:#b9cda1;
}
.menu-cost-strip strong {
  font-size:20px;
  font-weight:750;
  color:#ffbf7c;
  letter-spacing:-0.3px;
}

/* Floating countdown for a timed session — fixed to the corner so it
   stays visible while the guest scrolls the menu, since a running clock
   is exactly the kind of thing you want to glance at anytime, not
   something buried in page content that scrolls away. Translucent
   material per the app's floating-chrome treatment (content scrolls
   underneath), not an opaque card. */
.menu-countdown {
  position:fixed;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 14px;
  border-radius:14px;
  background:#1b2513ee;
  border:1px solid #4c6236;
  box-shadow:0 8px 24px #0004;
  backdrop-filter:blur(10px) saturate(160%);
  font-variant-numeric:tabular-nums;
}
.menu-countdown-label {
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b9cda1;
}
.menu-countdown strong {
  font-size:18px;
  font-weight:750;
  color:#ffbf7c;
  letter-spacing:-0.2px;
  line-height:1.2;
}
.menu-countdown-expired {
  border-color:#a12d20;
  background:#3a1712ee;
}
.menu-countdown-expired strong {
  color:#ffab98;
}
@media (prefers-reduced-transparency:reduce) {
  .menu-countdown {
    background:#1b2513;
    backdrop-filter:none;
  }
  .menu-countdown-expired {
    background:#3a1712;
  }
}
/* The countdown badge floats above the page, independent of the header's
   own flex layout, so it can't push "Personel çağır"/"Siparişlerim" out
   of its way on its own — reserve the badge's own footprint from the
   header's right edge instead, only when a countdown is actually on the
   page (this sibling selector matches nothing otherwise). */
.menu-countdown ~ .menu-header .menu-masthead-actions {
  padding-right:136px;
}
/* Keep "Personel çağır" a normal, single-line pill instead of letting it
   shrink and wrap its own text mid-word when the flex row runs short on
   room (e.g. once the countdown reserves space above) — the whole
   button/link should drop to the next line together, not compress. */
.menu-masthead-actions form,
.menu-masthead-actions > a {
  flex-shrink:0;
}
.call-staff-btn {
  white-space:nowrap;
}

/* Briefly draws the eye to a specific loca card when a staff-call toast
   is clicked, so "jump to the table" reads as an obvious, deliberate
   response rather than a silent scroll. */
.loca-card-flash {
  animation:loca-card-flash 2.2s ease-out;
}
@keyframes loca-card-flash {
  0%, 100% { box-shadow:0 8px 24px #0002; }
  15%, 45% { box-shadow:0 0 0 3px #f58416, 0 8px 24px #0002; }
}
@media (prefers-reduced-motion:reduce) {
  .loca-card-flash {
    animation:none;
    outline:2px solid #f58416;
    outline-offset:2px;
  }
}

/* Generic iOS-style switch, first used for "show live cost to guest" on
   the start-session form. Track color carries the on/off meaning (not
   just thumb position), so it reads correctly for color-blind users too. */
.switch {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  cursor:pointer;
  font-size:12px;
  color:#c3cfaa;
  user-select:none;
  flex:1 1 100%;
}
.switch input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  margin:0;
}
.switch-track {
  position:relative;
  flex:none;
  width:40px;
  height:24px;
  border-radius:999px;
  background:#3b3e2f;
  border:1px solid #4a5b36;
  transition:background 160ms ease-out, border-color 160ms ease-out;
}
.switch-thumb {
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#dfe6c8;
  box-shadow:0 1px 3px #0004;
  transition:transform 160ms cubic-bezier(0.2,0.8,0.2,1);
}
.switch input:checked ~ .switch-track {
  background:var(--olive);
  border-color:#a7b579;
}
.switch input:checked ~ .switch-track .switch-thumb {
  transform:translateX(16px);
  background:#fff8ea;
}
.switch input:focus-visible ~ .switch-track {
  outline:3px solid #ffb563;
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce) {
  .switch-track, .switch-thumb {
    transition:none;
  }
}

/* "Süreli oturum" and "Misafire canlı ücreti göster" sit side by side on
   the start-session form instead of stacking — each switch's own
   flex:1 1 100% (meant for stacking directly in the form's grid) is
   overridden here so the two always share one row, splitting it evenly
   even on a narrow card; the label text wraps onto a second line instead
   of forcing the whole switch down. */
.loca-session-switches {
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:10px;
}
.loca-session-switches .switch {
  flex:1 1 0;
  min-width:0;
}
.loca-session-switches .switch-label {
  white-space:normal;
  line-height:1.25;
}

/* Lets staff flip "show live cost to guest" from the corner of an
   already-running Oturum card, not just once at start time. The label
   sits before the track in the markup (rather than after, as every
   other switch has it) so its text reads to the left of the toggle,
   growing inward from the card's right edge instead of pushing the
   track past it. */
.loca-card-billing {
  position:relative;
}
.loca-guest-cost-toggle {
  position:absolute;
  top:10px;
  right:10px;
  z-index:1;
  max-width:calc(100% - 20px);
}
.loca-guest-cost-toggle .switch {
  min-height:0;
  flex:none;
  gap:8px;
}
.loca-guest-cost-toggle .switch-label {
  font-size:11px;
  white-space:normal;
  text-align:right;
}
/* Reserves room so the now-visible label never sits under the "Oturum"
   heading in the opposite corner (only the icon-only version fit safely
   without this). */
.loca-guest-cost-toggle ~ .loca-billing-info {
  margin-top:28px;
}

/* A small icon-button, first used for "add a time limit" in the corner
   of a running Oturum card — same footprint as loca-card-close so the
   card's two corner controls (this one, the guest-cost switch, the edit
   link) read as one consistent family. Also used on an <a> (the edit
   link), hence the text-decoration reset. */
.loca-icon-btn {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border:1px solid #465237;
  border-radius:9px;
  background:#20261a;
  color:#aab596;
  text-decoration:none;
}
.loca-icon-btn svg {
  width:16px;
  height:16px;
}
@media (hover:hover) {
  .loca-icon-btn:hover {
    background:#2d3a20;
    border-color:#637d44;
    color:#dbe6c8;
  }
}
.loca-duration-trigger {
  position:absolute;
  top:10px;
  left:10px;
  z-index:1;
}
/* Unlike the guest-cost switch in the opposite (empty) corner, the
   top-left corner already has the "Oturum" label starting flush — make
   room so the icon doesn't sit on top of it. */
.loca-duration-trigger ~ .loca-billing-info {
  margin-top:36px;
}
.loca-duration-dialog .loca-duration-hours {
  margin:18px 0 0;
}

/* Keeps the start-session duration dialog out of `.loca-grid>.loca-card>*`
   (which caps every direct child's width at 100% — right for the card's
   own fields, but it also clamped this dialog to the full card width
   instead of the themed confirm-dialog's 400px cap, since a dialog shown
   via showModal() sizes against the viewport, not the card). The wrapper
   is display:contents so it's invisible to layout (no extra flex gap in
   the card) while still making the dialog a grandchild, not a direct
   child, so that selector no longer matches it. */
.loca-start-duration-dialog-wrap {
  display:contents;
}

/* Shows the duration picked in the start-session "Süreli oturum" dialog;
   doubles as a button to reopen that dialog and change it. */
.loca-duration-summary {
  background:transparent;
  border:0;
  padding:0;
  margin:-4px 0 0;
  font-size:12px;
  color:#dec29c;
  text-align:left;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* Remaining-time badge next to the elapsed-time value on a timed
   session's card, so staff sees the countdown without opening the
   guest-facing menu. */
.loca-duration-remaining {
  display:inline-block;
  margin-top:2px;
  font-size:12px;
  font-weight:600;
  color:#ffc17c;
}
.loca-duration-remaining.loca-duration-expired {
  color:#ff8c78;
}

/* "Süreli oturum" hours field on the start-session form — same shape as
   the neighboring Tarife select so the two read as one field group. */
.loca-duration-hours {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:#c3cfaa;
  flex:1 1 100%;
}
.loca-card-billing .loca-duration-hours input {
  width:100%;
  max-width:100%;
  min-height:38px;
}

/* Duration dialog lets staff type either minutes or hours — the number
   input and unit select read as one control. Both get a flexible basis
   (not flex-shrink:0 on the select) so a narrow dialog squeezes both
   evenly instead of forcing all the shrinkage onto the number input and
   overflowing the dialog; flex-wrap is a safety net below ~230px. */
.loca-duration-input-group {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.loca-duration-input-group input {
  flex:1 1 120px;
  min-width:0;
  min-height:38px;
}
.loca-duration-input-group select {
  flex:1 1 110px;
  min-width:0;
  min-height:38px;
}

/* "Sipariş ekle" sits in the same row as Duraklat/Hesabı kapat (see
   .loca-billing-actions-3/-4 above) and opens a wide product picker
   dialog. That dialog is nested inside .loca-card-billing (a grandchild
   of .loca-card, not a direct child), so — unlike the earlier
   start-session duration dialog — it doesn't need the display:contents
   wrapper trick to dodge .loca-grid>.loca-card>*'s width clamp. */
.loca-order-dialog {
  max-width:640px;
}
.loca-order-picker {
  max-height:min(52vh,420px);
  overflow-y:auto;
  margin:18px -4px 0;
  padding:2px 4px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.loca-order-picker .menu-category h2 {
  margin:0 0 10px;
  font:650 13px/1.3 inherit;
  color:#dbe6c8;
}
.loca-order-picker .menu-item {
  padding:10px 12px;
  gap:12px;
}
.loca-order-picker .menu-item-img {
  width:48px;
  height:48px;
  border-radius:8px;
}
.loca-order-dialog-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.loca-order-dialog-total {
  color:var(--ui-orange);
  font-weight:750;
  font-size:14px;
}
/* .qty-btn is otherwise only ever used on the guest-facing public menu
   (outside .admin-app), so its own width/height never had to fight
   .admin-app button's higher-specificity padding — first use here,
   inside the admin dialog, hits the same Chromium quirk documented on
   .loca-start-edit-trigger above (losing that padding fight makes the
   browser ignore the button's own explicit size entirely). Same fix:
   more specific selector wins the fight instead of just adding a size
   that'd still lose. */
.admin-app .qty-btn {
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border-width:1px;
  border-style:solid;
}

/* Ürünler list — the price itself is the "edit" button, styled as text
   with a dashed underline (not a boxed button) so it reads as an
   in-place value you can click, not a separate action alongside the
   row. Prefixed with .admin-app for the same reason as .qty-btn just
   above: a plain <button> can otherwise lose its own explicit sizing to
   .admin-app button's higher-specificity padding. */
.admin-app .price-edit-trigger {
  width:auto;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:#eee4d0;
  font:inherit;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  text-decoration:underline dashed;
  text-underline-offset:3px;
  cursor:pointer;
}
@media (hover:hover) {
  .admin-app .price-edit-trigger:hover {
    color:#ffc17c;
  }
}
.price-edit-field {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:18px 0 0;
  font-size:12px;
  color:#c3cfaa;
}
.price-edit-field input {
  min-height:46px;
}

/* Ürünler list — the Aktif/Pasif badge is itself the toggle button now
   (submits straight to toggle-active), replacing the separate "Satıştan
   kaldır"/"Satışa aç" text link in İşlemler. Resets it back down to the
   badge's own compact pill size instead of a full button's min-height,
   and trims the horizontal padding a bit further than a regular badge —
   this one stands alone in its own column instead of sitting inline next
   to other text, so it doesn't need as much breathing room. Pasif gets
   its own red variant (badge-neutral elsewhere stays gray/olive, used as
   a plain "no particular status" indicator in other tables) so active
   vs. inactive reads at a glance. */
.admin-app .badge-toggle {
  min-height:0;
  padding:6px 10px;
  border:0;
  cursor:pointer;
}
.badge-toggle-off {
  background:#4a211d;
  color:#ffaa9b;
}
@media (hover:hover) {
  .admin-app .badge-toggle:hover {
    filter:brightness(1.12);
  }
}

/* Product form's "Mevcut resimlerden seç" picker, and the standalone
   Medya Kütüphanesi page — same thumbnail-grid look in both. */
.image-picker-dialog {
  max-width:560px;
}
.image-picker-grid,.media-library-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;
  max-height:min(52vh,420px);
  overflow-y:auto;
  margin:18px -4px 0;
  padding:2px 4px;
}
.admin-app .image-picker-thumb {
  width:100%;
  min-height:0;
  padding:0;
  border:1px solid #465237;
  border-radius:10px;
  background:#151a11;
  overflow:hidden;
  cursor:pointer;
}
.image-picker-thumb img {
  display:block;
  width:100%;
  height:80px;
  object-fit:cover;
}
@media (hover:hover) {
  .admin-app .image-picker-thumb:hover {
    border-color:#8d9d68;
  }
}

/* Medya Kütüphanesi — each entry is its own small form (Sil, super_admin
   only) so a thumbnail's own delete button doesn't need JS to scope it. */
.media-library-item {
  border:1px solid #465237;
  border-radius:10px;
  background:#151a11;
  overflow:hidden;
}
.media-library-item img {
  display:block;
  width:100%;
  height:110px;
  object-fit:cover;
}
.media-library-item form {
  margin:0;
  padding:8px;
}
.admin-app .media-library-item .btn-link {
  width:100%;
  min-height:0;
  padding:0;
  color:#ff9d8a;
}