/* AppsBrain Restaurant OS 0.18: cohesive design layer.
 * Intentional progressive override of the legacy layout, no build dependencies. */
:root {
  --bg:#f5f7fb;
  --white:#fff;
  --ink:#172539;
  --muted:#697b91;
  --line:#e4eaf2;
  --nav:#101d30;
  --primary:#245fdb;
  --primary-dark:#184baF;
  --green:#147f5f;
  --red:#b83b46;
  --radius:16px;
  --shadow:0 2px 14px rgba(21,36,57,.025);
}
html {scroll-behavior:smooth}
body {color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.modal-open {overflow:hidden}
:where(button,a,input,select,textarea,summary):focus-visible {outline:3px solid #8fb3fa!important;outline-offset:2px}
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link {position:fixed;top:-90px;left:14px;z-index:1000;padding:12px 20px;border-radius:10px;background:#fff;color:var(--primary);font-weight:800;box-shadow:0 8px 30px #0002}
.skip-link:focus {top:12px}
.sidebar {width:256px;min-width:256px;height:100dvh;min-height:0;position:sticky;top:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 14px 14px;background:#101e30;scrollbar-width:thin;scrollbar-color:#33465f transparent}
.sidebar .brand {font-size:23px;letter-spacing:-.07em;margin:0 12px 20px}
.sidebar .brand small {font-size:9px;letter-spacing:.2em;margin-top:-3px}
.sidebar-search {height:39px;margin:0 6px 25px;border:1px solid #35465e;border-radius:10px;display:flex;gap:7px;align-items:center;color:#a0b4ce;padding:0 11px;background:#1a2a40;box-shadow:inset 0 1px 1px #0002}
.sidebar-search > span:not(.sr-only) {font-size:23px;line-height:1}
.sidebar-search input[type=search] {min-width:0;max-width:none;width:100%;border:0;background:transparent;color:#f5f8fe;font-size:12px;padding:0;height:32px;min-height:0;box-shadow:none!important}
.sidebar-search input::placeholder {color:#8fa3bb}
.sidebar-search kbd {font-family:inherit;font-weight:700;font-size:11px;border:1px solid #52627a;border-radius:4px;padding:0 5px;color:#9fb1c9}
.sidebar-search:focus-within {border-color:#7aabff}
.nav-section {margin:0 0 10px}
.nav-label {list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;padding:9px 13px;margin:0 0 2px;font-size:10px;letter-spacing:.12em;color:#91a2b9;text-transform:uppercase;user-select:none}
.nav-label::-webkit-details-marker {display:none}
.nav-label:hover {color:#f5faff}
.nav-chevron {font-size:16px;line-height:1;transition:transform .2s;color:#8fa6c2}
.nav-section[open] .nav-chevron {transform:rotate(180deg)}
.nav-links {padding:2px 0 8px;display:grid;gap:3px}
.nav-link {min-height:39px;border-radius:9px;padding:8px 11px;font-size:12.5px;gap:11px;color:#afbed2;transition:background .14s,color .14s}
.nav-link:hover {background:#21344f;color:#fff}
.nav-link.active,.nav-link.active:hover {color:#fff;background:#2c5fd0;box-shadow:inset 3px 0 0 #9fc5ff}
.nav-link .ui-icon {width:18px;height:18px;flex:none;opacity:.9}
.nav-link .nav-text {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-emoji {display:grid;place-items:center;width:20px;min-width:20px;font-size:14px}
.nav-section.nav-group-hidden,.nav-link.nav-item-hidden {display:none!important}
.side-footer {position:sticky;bottom:-14px;background:#101e30;border-top:1px solid #2b3b51;margin:18px -14px -14px;padding:19px 20px 18px;z-index:1}
.user-avatar {width:36px;height:36px;border-radius:11px;background:#314d7c}
.side-user b {font-size:12px}
.sidebar-backdrop {display:none}
.main-shell {min-width:0}
.topbar {height:75px;padding:0 clamp(18px,2.5vw,42px);position:relative;z-index:3;background:rgba(255,255,255,.96);gap:12px}
.topbar-left,.topbar-right {gap:15px;min-width:0}
.crumb {font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#7e8da2}
.crumb strong {font-weight:800;color:#293a50}
.topbar-right form {margin:0}
.top-link {white-space:nowrap}
.icon-button {display:grid;place-items:center;width:36px;height:36px;border:1px solid #e7ecf4;background:#fff;border-radius:10px;font-size:20px}
.icon-button:hover {background:#f2f6fb;border-color:#cbd9ec}
.branch-chip {font-size:12px;border-color:#dfebfb;color:#345479;background:#f4f8fe;padding:9px 12px}
.workspace {max-width:1680px;padding:clamp(18px,2.5vw,40px);width:100%}
h1 {font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.25;letter-spacing:-.04em}
h2 {font-size:16px;letter-spacing:-.02em}
.page-heading {margin-bottom:24px;align-items:center}
.page-heading p {margin-top:7px;font-size:12.5px;line-height:1.5;color:#788a9d}
.btn {border-radius:10px;min-height:40px;padding:9px 15px;font-size:12.5px;gap:8px;transition:background .16s,box-shadow .16s,transform .16s}
.btn.primary {background:#245fdb;border-color:#245fdb;color:white;box-shadow:0 2px 7px rgba(36,95,219,.14)}
.btn.primary:hover {background:#184fb8;border-color:#184fb8;box-shadow:0 5px 13px rgba(36,95,219,.2)}
.btn.danger:hover {background:#fee8e8;border-color:#e9b4b8}
.btn:disabled {opacity:.52;cursor:not-allowed}
.btn.small {min-height:33px;padding:6px 11px;font-size:11.5px}
.btn:active:not(:disabled),.menu-tile:active {transform:translateY(1px)}
.panel {border:1px solid #e5eaf1;box-shadow:var(--shadow);padding:clamp(18px,1.9vw,27px);border-radius:16px;margin-bottom:18px}
.panel-heading {margin-bottom:20px}
.panel-heading h2 {font-size:16px}
.metrics {grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:18px}
.metric {min-height:134px;padding:20px;position:relative;overflow:hidden}
.metric::before {content:'';position:absolute;right:-24px;top:-28px;width:74px;height:74px;border-radius:50%;background:#f5f8ff}
.metric:nth-child(2)::before {background:#f5fbf9}
.metric:nth-child(4)::before {background:#fffbf2}
.metric span {color:#607086;font-size:12px;line-height:1.4;position:relative}
.metric strong {margin-top:13px;font-size:clamp(20px,1.85vw,28px);letter-spacing:-.055em;position:relative;overflow-wrap:anywhere}
.metric small {font-size:11px;position:relative;line-height:1.4}
.dashboard-grid {grid-template-columns:minmax(0,1.5fr) minmax(285px,1fr);gap:17px}
.quick-links a {padding:13px 9px;gap:14px;color:#7293bf;border-radius:7px}
.quick-links a:hover {background:#f6f9fd}
.quick-links span {font-size:12px}
.quick-links small {font-size:11px;margin-top:2px}
.notice {font-size:12.5px;padding:13px 16px;border-radius:10px}
.pill {font-size:10.5px;letter-spacing:0;padding:5px 11px}
.table-wrap {border:1px solid #eef1f5;border-radius:11px;overflow:auto;max-width:100%}
table {font-size:12.5px}
thead {background:#f7f9fc}
th {font-size:10px;color:#6f7d91;padding:12px 13px}
td {padding:13px;line-height:1.45;color:#4b6074}
tr:last-child td {border-bottom:0}
tr:hover td {background:#f8fbff}
.row-actions {display:flex;gap:5px;justify-content:flex-end;align-items:center;white-space:nowrap}
.row-actions form {margin:0}
.item-link {text-decoration:none;color:#245fdb}
.item-link:hover {text-decoration:underline}
.list-tools {flex-wrap:wrap;gap:12px}
.list-tools form {flex-wrap:wrap}
input:not([type=checkbox]):not([type=radio]),select,textarea {min-height:42px;font-size:12.5px;border-radius:9px;border:1px solid #dce4ee;color:#273b51;padding:10px 12px}
textarea {resize:vertical}
input:focus,select:focus,textarea:focus {border-color:#6c9aed;box-shadow:0 0 0 3px #316ee41a}
input[readonly],input:disabled,select:disabled,textarea:disabled {background:#f3f5f8;opacity:.72}
input[type=checkbox],input[type=radio] {accent-color:#2761d7;width:16px;height:16px;vertical-align:middle}
.field,label {font-size:12px;color:#51657b}
.form-grid {gap:17px}
.form-grid label {min-width:0}
.form-actions {padding-top:15px;border-top:1px solid #edf0f5;gap:10px}
.empty-state {padding:46px 18px;color:#8494a6;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:9px;justify-content:center}
.empty-icon {height:48px;width:48px;display:grid;place-items:center;border:1px solid #dfeaf9;border-radius:14px;background:#f2f6fc;color:#6084b9}
.empty-icon .ui-icon {width:23px;height:23px}
.empty-state p {font-size:13px;max-width:340px;margin:0}
.filter-tabs {gap:6px}
.filter-tabs a {font-size:11.5px;min-height:35px;display:flex;align-items:center}
.filter-tabs a.current {background:#eaf2ff;color:#225bca}
.pager {gap:10px;flex-wrap:wrap}
.app-footer {font-size:11px;padding:19px}
.pos-grid {grid-template-columns:minmax(0,1.65fr) minmax(325px,.85fr);gap:17px}
.pos-menu {min-height:600px}
.pos-tools {gap:16px}
.category-pills button {min-height:36px;font-size:11.5px;border-radius:10px;padding:7px 15px}
.category-pills button.current {background:#245fdb;color:white;border-color:#245fdb}
.item-grid {grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
.menu-tile {border-radius:13px;min-height:138px;padding:17px;transition:transform .16s,border-color .16s,box-shadow .16s}
.menu-tile:hover {border-color:#8bb4fa;box-shadow:0 7px 20px #225dc013}
.menu-tile strong {font-size:13.5px;color:#29384a;line-height:1.4}
.menu-tile .tile-bottom {color:#245fdb}
.cart-panel {position:sticky;top:16px;align-self:start;max-height:calc(100dvh - 45px);display:flex;flex-direction:column}
.cart-panel .cart-items {min-height:75px;flex:1;overflow:auto;max-height:none}
.cart-line {padding:13px 4px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.cart-line-info strong {font-size:12.5px;color:#29384e}
.cart-line-info small {font-size:11px;line-height:1.5}
.cart-line>strong {font-size:13px;white-space:nowrap}
.cart-row-controls {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cart-stepper {display:flex;align-items:center;gap:4px;background:#f7f9fc;border:1px solid #e8edf4;border-radius:9px;padding:3px}
.cart-stepper button {width:28px;height:28px;border:0;background:white;color:#27549c;border-radius:6px;font-size:17px;font-weight:700;display:grid;place-items:center}
.cart-stepper output {min-width:23px;text-align:center;color:#24384e;font-size:12px;font-weight:800}
.cart-remove {color:#bb3d4b!important;background:transparent!important;width:auto!important;height:auto!important;padding:5px 8px;font-size:11px!important;font-weight:700}
.cart-total strong {font-size:24px}
.dialog-card {max-width:465px;border-radius:18px;padding:29px}
.option-row {min-height:45px}
.dialog-card .qty-group {gap:10px}
.dialog-card .qty-group button {width:42px;height:42px}
.dialog-card .qty-group strong {min-width:35px;text-align:center;font-size:17px}
.login-body,.setup-body {background:radial-gradient(circle at 18% 10%,#e4eeff 0,transparent 37%),#f5f7fb}
.login-card,.setup-card {border:1px solid #e7edf5;box-shadow:0 28px 95px #1b2a4913}
.login-art {background:linear-gradient(115deg,#142b53,#245fdb);min-height:115px}
.kds-ticket {border-radius:14px}
.kds-ticket:has(.pill.pending) {border-top:3px solid #e0a041}
.kds-ticket:has(.pill.positive) {border-top:3px solid #28a27c}
@media(max-width:1380px){.metrics {grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-grid {grid-template-columns:1fr}}
@media(max-width:1150px){.sidebar {width:235px;min-width:235px}.metrics {grid-template-columns:repeat(3,minmax(0,1fr))}.pos-grid {grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:950px){
  .sidebar {position:fixed;left:0;top:0;bottom:0;width:min(290px,85vw);min-width:0;height:100dvh;transform:translateX(-110%);z-index:90;transition:transform .2s ease;box-shadow:none}
  .nav-open .sidebar {transform:translateX(0);box-shadow:0 15px 60px #0004}
  .sidebar-backdrop {display:block;position:fixed;inset:0;background:#0b193bb0;z-index:80;border:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
  .nav-open .sidebar-backdrop {opacity:1;visibility:visible;pointer-events:auto}
  .nav-trigger {display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid #e6ebf3;background:#fff;font-size:18px}
  .topbar {height:66px;padding:0 20px}
  .workspace {padding:22px}
  .pos-grid,.order-layout,.split-layout,.platform-grid {grid-template-columns:1fr}
  .cart-panel {position:static;max-height:none}
  .cart-panel .cart-items {max-height:320px}
}
@media(max-width:680px){
  .workspace {padding:14px}
  .topbar {height:62px;padding:0 14px}
  .topbar-left,.topbar-right {gap:7px}
  .top-link {display:none}
  .branch-chip {display:none}
  .crumb {font-size:11.5px}
  .page-heading {flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}
  .heading-actions {display:flex;width:100%;gap:8px}
  .heading-actions .btn {flex:1}
  .metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric {padding:16px;min-height:120px}
  .metric strong {font-size:21px}
  .panel {padding:17px;border-radius:13px}
  .pos-menu {min-height:0}
  .item-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .menu-tile {padding:13px;min-height:124px}
  .form-grid {grid-template-columns:1fr}
  .row-actions {min-width:200px}
  .report-filter label {min-width:130px}
  .app-footer span {display:none}
  .login-card,.setup-card {padding:24px}
}
@media(max-width:380px){.metrics{grid-template-columns:1fr}.item-grid{grid-template-columns:1fr 1fr}.order-types span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print {
  .sidebar-backdrop,.skip-link,.sidebar-search,.cart-stepper,.cart-remove {display:none!important}
  body {background:#fff!important}
  .print-paper {border:0!important;box-shadow:none!important}
  .print-paper .table-wrap {border:0!important}
}
.cart-count {color:#6881a0;font-size:11px;font-family:'DM Sans',system-ui,sans-serif;margin-left:7px;font-weight:500;letter-spacing:0}
/* Touch cashier convenience: open the cart without scrolling past long menus. */
#mobile-cart-jump {display:none}
@media(max-width:950px) {
  #mobile-cart-jump {position:fixed;bottom:18px;right:17px;z-index:60;display:flex;align-items:center;gap:12px;min-height:50px;padding:9px 16px;background:#245fdb;color:#fff;border:1px solid #356add;border-radius:14px;font-size:12px;font-weight:700;box-shadow:0 10px 25px #163d9580;cursor:pointer}
  #mobile-cart-jump strong {font-size:15px;color:#fff}
  #mobile-cart-jump span:last-child {font-size:19px;font-weight:400}
  #mobile-cart-jump.is-near-cart {display:none}
}
@media(max-width:680px) {
  .branch-chip {display:inline-flex;min-width:0;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;padding:7px}
  .topbar .crumb {max-width:min(40vw,230px)}
  .topbar .icon-button {height:33px;width:33px}
}
@media print {#mobile-cart-jump{display:none!important}}

/* v0.19 practical operations polish */
.platform-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.platform-metrics .metric{padding:18px 20px;min-height:94px}
.platform-metrics .metric strong{font-size:25px}
.platform-editor,.platform-delete{margin-bottom:18px}
.platform-editor .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.platform-delete{max-width:760px}
.platform-backup{margin-top:22px}
.platform-backup summary,.optional-details summary{cursor:pointer;font-weight:700;padding:12px 2px}
.optional-details{grid-column:1/-1;border-top:1px solid var(--border,#e0e6ef);margin:8px 0 0;padding:8px 0 12px}
.optional-details .form-grid{margin-top:12px}
.check-row{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px}
.check-row input{width:auto!important;margin-top:4px}
.reservation-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,0.85fr);gap:18px;align-items:start}
.reservation-layout .row-actions{min-width:220px}
.table-status-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.table-status-legend span{padding:9px 15px;background:#fff;border:1px solid #e1e8f1;border-radius:999px;color:#36445a}
.table-status-legend strong{margin-left:6px;color:#152b4a}
.table-card-wrap{min-width:0;position:relative}
.table-card-wrap .table-card{height:calc(100% - 31px)}
.table-card.reserved{border-color:#e9b34d;background:#fffbef}
.table-book-link{font-size:12px;display:block;text-align:center;padding:7px;color:#315ec9;text-decoration:none}
@media(max-width:1050px){.reservation-layout{grid-template-columns:1fr}.platform-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.platform-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.platform-editor .form-grid{grid-template-columns:1fr}.reservation-layout .row-actions{min-width:0}.table-status-legend{gap:6px}}

.quick-customer{margin-top:8px;border:1px dashed #d5deea;border-radius:10px;padding:8px 12px}
.quick-customer summary{font-size:12px;font-weight:700;cursor:pointer;color:#2459bb}
.quick-customer-form{display:grid;gap:10px;padding:13px 0 3px}
.quick-customer-form label{font-size:12px}
.quick-customer-form input{margin-top:5px}
.quick-customer-form p{font-size:12px;margin:0;color:#37516f}

.table-card.seated{border-color:#88b7ee;background:#eef6ff}