*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0a0d12;color:#e9edf3}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{display:flex;min-height:100vh;background:radial-gradient(circle at 80% -10%,rgba(235,168,82,.09),transparent 30%),#0a0d12}.sidebar{width:246px;background:#0d1118;border-right:1px solid #202632;padding:22px 14px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:10}.logo{display:flex;align-items:center;gap:10px;padding:0 10px 24px}.logo-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#e7a54f;color:#15100a;font-weight:900;font-size:21px}.logo b{display:block;letter-spacing:2px;font-size:16px}.logo small,.restaurant small,.user-mini small{display:block;color:#788293;font-size:10px;letter-spacing:1.2px;margin-top:2px}.restaurant{border:1px solid #252c37;background:#121720;padding:11px;border-radius:13px;display:flex;gap:9px;margin-bottom:18px}.restaurant b{font-size:12px}.status-dot{width:7px;height:7px;border-radius:50%;background:#55c878;margin-top:5px;box-shadow:0 0 10px #55c878}.sidebar nav{display:grid;gap:5px}.nav{border:0;background:transparent;color:#9ba5b5;text-align:left;padding:11px 12px;border-radius:10px;display:flex;align-items:center;gap:11px;font-weight:650;font-size:13px}.nav:hover{background:#171d27;color:#fff}.nav.active{background:#1d2632;color:#fff;box-shadow:inset 3px 0 #e7a54f}.nav em{margin-left:auto;background:#252e3b;color:#e7a54f;font-size:10px;border-radius:9px;padding:2px 6px;font-style:normal}.sidebar-bottom{margin-top:auto}.user-mini{display:flex;gap:9px;align-items:center;border-top:1px solid #202632;margin-top:12px;padding:15px 8px}.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#293342;color:#fff;font-weight:800}.user-mini b{font-size:12px}.main{margin-left:246px;width:calc(100% - 246px)}.topbar{height:78px;border-bottom:1px solid #202632;background:rgba(10,13,18,.88);backdrop-filter:blur(15px);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:5}.topbar h1{margin:0;font-size:21px;letter-spacing:-.3px}.topbar p{margin:4px 0 0;color:#778293;font-size:12px}.top-actions{display:flex;gap:12px;align-items:center}.clock{color:#9da7b5;font-variant-numeric:tabular-nums}.mobile-menu{display:none;background:none;border:0;color:#fff;font-size:22px}.icon-btn,.btn,.primary,.ghost,.link{border:1px solid #2a3340;border-radius:9px;background:#151b24;color:#dce2eb;padding:9px 13px;font-weight:700;font-size:12px}.icon-btn{background:#e7a54f;color:#17120a;border-color:#e7a54f}.primary{background:#e7a54f;color:#17120a;border-color:#e7a54f}.ghost{background:transparent}.link{border:0;background:none;color:#e7a54f;padding:4px}.content{padding:27px 32px 45px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.seg{display:flex;background:#121720;border:1px solid #252d38;border-radius:9px;padding:3px}.seg button{border:0;background:none;color:#8d98a8;padding:7px 13px;border-radius:7px;font-size:11px;font-weight:750}.seg button.on{background:#27313e;color:#fff}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.kpis.mini{margin-top:0}.kpi{background:#11161e;border:1px solid #222a35;border-radius:13px;padding:17px 18px;min-height:105px}.kpi span{color:#8a95a5;font-size:11px;font-weight:650}.kpi strong{display:block;font-size:25px;margin:9px 0 3px;letter-spacing:-.7px}.kpi small{color:#606b7b;font-size:10px}.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:15px;margin-bottom:15px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.panel{background:#11161e;border:1px solid #222a35;border-radius:14px;padding:18px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panel-head h2,.panel>h2{font-size:13px;margin:0}.panel-head p,.muted{color:#697486;font-size:11px;margin:5px 0 0}.panel-head>b{font-size:16px}.chart{height:250px}.chart svg{width:100%;height:100%;overflow:visible}.chart line{stroke:#29313d;stroke-width:1}.chart polyline{stroke:#e7a54f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart circle{fill:#e7a54f}.chart text{fill:#687486;font-size:10px}.rank{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #1f2630}.rank:last-child{border:0}.rank>span{width:22px;height:22px;border-radius:7px;background:#1c2530;display:grid;place-items:center;color:#e7a54f;font-size:10px;font-weight:800}.rank b,.rank small{display:block}.rank b{font-size:11px}.rank small{font-size:10px;color:#687486;margin-top:3px}.rank strong{font-size:11px}.mix{margin:15px 0}.mix>div:first-child{display:flex;justify-content:space-between;font-size:11px}.mix b{font-size:11px}.bar{height:6px;background:#202834;border-radius:8px;margin-top:8px;overflow:hidden}.bar i{display:block;height:100%;background:#e7a54f;border-radius:8px}.stock-row,.sale-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #202731;font-size:11px}.stock-row:last-child,.sale-row:last-child{border:0}.warn{color:#e7a54f}.danger,.bad{color:#ef6c6c}.good{color:#58c984}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-grid button{border:1px solid #252e39;background:#171d26;color:#cbd2dd;padding:11px;border-radius:9px;font-size:11px;font-weight:700}.empty{color:#5f6b7c;text-align:center;padding:25px;font-size:11px}.empty.large{padding:80px}.pos-layout{display:grid;grid-template-columns:1.55fr .85fr;gap:15px;align-items:start}.pos-top{display:flex;gap:10px;margin-bottom:13px}.search{background:#0d1218;border:1px solid #29313d;color:#fff;border-radius:9px;padding:9px 12px;outline:0;min-width:220px}.cat-scroll{display:flex;gap:6px;overflow:auto;padding-bottom:10px}.cat{white-space:nowrap;border:1px solid #252e39;background:#151b23;color:#8490a0;padding:7px 10px;border-radius:8px;font-size:10px}.cat.on{color:#15100a;background:#e7a54f;border-color:#e7a54f}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-height:620px;overflow:auto}.product{border:1px solid #252e39;background:#151b23;color:#dfe5ed;border-radius:11px;padding:12px;text-align:left;min-height:112px;display:flex;flex-direction:column}.product:hover{border-color:#e7a54f;transform:translateY(-1px)}.product.disabled{opacity:.4}.product span{font-size:8px;text-transform:uppercase;color:#687486}.product b{font-size:11px;margin:9px 0;line-height:1.35}.product strong{font-size:12px;color:#e7a54f;margin-top:auto}.product em{font-size:8px;color:#ef6c6c;margin-top:4px;font-style:normal}.cart{position:sticky;top:100px}.cart-body{min-height:180px;max-height:330px;overflow:auto}.cart-item{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:11px 0;border-bottom:1px solid #202731}.cart-item b,.cart-item small{display:block}.cart-item b{font-size:11px}.cart-item small{font-size:9px;color:#687486;margin-top:3px}.step{display:flex;align-items:center;border:1px solid #29323e;border-radius:7px}.step button{border:0;background:none;color:#e7a54f;width:26px;height:25px}.step b{font-size:10px}.cart-item>strong{font-size:10px}.order-fields{display:grid;gap:7px;margin-top:10px}.order-fields input,.order-fields select,.order-fields textarea,.form-grid input,.form-grid select{background:#0d1218;color:#dce2ea;border:1px solid #29313d;border-radius:8px;padding:9px;outline:0;width:100%}.order-fields textarea{min-height:55px;resize:vertical}.totals{border-top:1px solid #29313d;margin-top:13px;padding-top:10px}.totals>div{display:flex;justify-content:space-between;padding:5px 0;color:#8c97a6;font-size:11px}.totals .grand{color:#fff;font-size:14px;padding-top:10px}.totals strong{color:#e7a54f;font-size:20px}.full{width:100%;margin-top:10px}.kitchen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.kot{border:1px solid #29323e;border-radius:13px;background:#131a22;padding:15px;box-shadow:0 12px 30px #0003}.kot.status-new{border-top:3px solid #e7a54f}.kot.status-preparing{border-top:3px solid #73a9e8}.kot.status-ready{border-top:3px solid #58c984}.kot header{display:flex;justify-content:space-between}.kot header b,.kot header small{display:block}.kot header b{font-size:14px}.kot header small{color:#768293;font-size:10px;margin-top:3px}.kot header>span{font-size:8px;background:#202936;border-radius:7px;padding:5px 7px;color:#d3dae4}.kot-time{color:#687486;font-size:9px;margin:12px 0}.kot ul{list-style:none;padding:0;margin:0}.kot li{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid #222a34;font-size:11px}.kot li b{color:#e7a54f}.note{background:#1b222c;border-radius:8px;padding:8px;color:#bdc6d2;font-size:10px;margin-top:10px}.kot-actions{display:flex;gap:7px;margin-top:13px}.kot-actions button{flex:1;border:1px solid #303946;background:#202936;color:#fff;border-radius:8px;padding:8px;font-size:9px;font-weight:800}.tables-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.table-card{min-height:170px;border:1px solid #2b3440;background:#121922;color:#fff;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.table-card span{font-size:9px;color:#697586;letter-spacing:2px}.table-card strong{font-size:43px;line-height:1;margin:8px}.table-card small{color:#8490a0}.table-card em{position:absolute;bottom:13px;font-style:normal;text-transform:uppercase;font-size:9px;letter-spacing:1px}.table-card.available{border-color:#294637}.table-card.available em{color:#58c984}.table-card.ordered{border-color:#594b29}.table-card.ordered em{color:#e7a54f}.table-card.check{border-color:#5d3030}.table-card.check em{color:#ef6c6c}.table-panel{padding:0;overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 16px;border-bottom:1px solid #222a34;font-size:11px}th{color:#687486;font-size:9px;text-transform:uppercase;letter-spacing:.7px}td b,td small{display:block}td small{color:#596576;font-size:9px;margin-top:3px}.status{font-size:8px;border-radius:8px;padding:4px 7px;font-weight:800}.status.good{background:#173325}.status.warn{background:#3b3019}.status.bad{background:#3a2020}.icon-link{background:none;border:0;color:#e7a54f;font-size:10px;font-weight:750}.recipe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.recipe-card{background:#141b23;border:1px solid #28313d;color:#fff;text-align:left;padding:14px;border-radius:11px;min-height:105px}.recipe-card:hover{border-color:#e7a54f}.recipe-card b,.recipe-card small,.recipe-card span{display:block}.recipe-card b{font-size:11px}.recipe-card small{font-size:9px;color:#697586;margin:5px 0 12px}.recipe-card span{font-size:9px;color:#e7a54f}.sales-list{max-height:330px;overflow:auto}.sale-row b,.sale-row small{display:block}.sale-row b{font-size:11px}.sale-row small{color:#687486;font-size:9px;margin-top:3px}.settings-panel{max-width:760px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}.form-grid label{color:#8792a2;font-size:10px;font-weight:700}.form-grid input,.form-grid select{margin-top:6px}.recipe-line{display:grid;grid-template-columns:1fr 120px auto;gap:7px;margin-bottom:8px}.modal-backdrop{position:fixed;inset:0;background:#000b;z-index:50;display:grid;place-items:center;padding:20px}.modal{background:#121821;border:1px solid #2a3441;border-radius:15px;width:min(680px,100%);max-height:90vh;overflow:auto;padding:21px;box-shadow:0 25px 80px #000}.modal h2{font-size:17px;margin:0 0 18px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.toast{position:fixed;right:20px;bottom:20px;background:#e7a54f;color:#17120a;padding:11px 15px;border-radius:9px;font-size:11px;font-weight:800;z-index:100;box-shadow:0 10px 35px #0008}.toast.bad{background:#d85d5d;color:#fff}
@media(max-width:1050px){.kpis{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:repeat(3,1fr)}.kitchen-grid,.recipe-grid{grid-template-columns:repeat(2,1fr)}.tables-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.main{margin-left:0;width:100%}.mobile-menu{display:block}.topbar{padding:0 15px;gap:10px}.top-actions .clock{display:none}.content{padding:18px 14px 35px}.grid-2,.pos-layout{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.cart{position:static}.product-grid{grid-template-columns:repeat(2,1fr)}.tables-grid{grid-template-columns:repeat(2,1fr)}.kitchen-grid,.recipe-grid{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-wrap:wrap}.search{min-width:0;width:100%}.pos-top{flex-direction:column}.form-grid{grid-template-columns:1fr}.icon-btn span{display:none}}
@media(max-width:480px){.kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi{padding:13px}.kpi strong{font-size:20px}.content{padding-left:10px;padding-right:10px}.topbar h1{font-size:17px}.product-grid{gap:7px}.product{min-height:105px;padding:10px}.tables-grid{gap:8px}.table-card{min-height:135px}.table-card strong{font-size:35px}}
/* V1 functional additions */
.pay-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.pay{padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);color:inherit;cursor:pointer}.pay.on{border-color:#fff;background:rgba(255,255,255,.12)}.payment-total{font-size:34px;font-weight:800;margin:16px 0}.danger-panel{border-color:rgba(255,80,80,.25)}.danger-btn{border-color:rgba(255,80,80,.4)!important}.status.bad{color:#ff7777}.status.warn{color:#ffd166}.status.good{color:#72e6a4}@media(max-width:900px){.pos-layout,.grid-2,.grid-3{grid-template-columns:1fr}.cart{position:static}.kpis{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   RESTRO — DASHBOARD MATCH / LARGE CLIENT-FRIENDLY UI
   ============================================================ */
:root{
  --dash-bg:#070b10;
  --dash-panel:#10161f;
  --dash-panel-2:#141b25;
  --dash-border:#273342;
  --dash-text:#f4f7fb;
  --dash-muted:#a5afbd;
  --dash-gold:#f4b642;
  --dash-green:#35d583;
  --dash-blue:#4d9cff;
  --dash-red:#f05252;
  --dash-purple:#8b5cf6;
}
.topbar{height:76px;padding:0 28px;background:#080c12;border-bottom:1px solid #222b36}
.topbar>div:first-of-type{display:none}
.top-search{display:flex!important;align-items:center;gap:10px;width:min(580px,45vw);height:46px;border:1px solid #33465d;background:#121b27;border-radius:10px;padding:0 14px;color:#a8b4c5}
.top-search span{font-size:24px;line-height:1}
.top-search input{width:100%;border:0;outline:0;background:transparent;color:#eaf0f7;font-size:15px}
.top-search input::placeholder{color:#9aa8bb}
.topbar-right{display:flex;align-items:center;gap:16px!important}
.clock-wrap{display:flex;align-items:center;gap:10px}
.calendar-icon{font-size:22px;color:#f0f4f8}
.clock-block b{display:block;font-size:14px;color:#dce3ec;font-weight:600}
.clock{font-size:21px;color:#fff;font-weight:800;line-height:1.15}
.theme-btn{width:42px;height:42px;border:1px solid #354357;background:#151d28;color:#fff;border-radius:10px;font-size:19px}
.profile-mini{display:flex;align-items:center;gap:9px;min-width:112px;color:#fff}
.profile-mini b{display:block;font-size:14px}.profile-mini small{display:block;color:#8f9bad;font-size:11px;margin-top:2px}.profile-mini>span{margin-left:auto;color:#9da8b7}
.dashboard-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.period-tabs{display:flex;gap:5px}.period-tabs button{border:1px solid transparent;background:transparent;color:#aab5c3;padding:11px 20px;border-radius:10px;font-size:15px;font-weight:700}.period-tabs button.on{background:#f4b642;color:#15120a;border-color:#f4b642}.toolbar-actions{display:flex;gap:10px}.toolbar-actions .btn{font-size:14px;padding:11px 16px}.toolbar-actions .primary{font-size:14px;padding:11px 18px}
.hero-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px}
.hero-kpi{min-height:126px;border-radius:13px;border:1px solid var(--dash-border);padding:18px 16px;display:flex;align-items:center;gap:13px;background:var(--dash-panel)}
.hero-kpi .hero-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:25px;flex:0 0 50px;background:#17202b;color:#fff}
.hero-kpi span{display:block;color:#d0d8e2;font-size:14px;font-weight:600}.hero-kpi strong{display:block;color:#fff;font-size:29px;line-height:1.2;margin:7px 0 5px;letter-spacing:-.7px}.hero-kpi small{font-size:12px;font-weight:700}.hero-kpi small i{font-style:normal;color:#aeb8c6;font-weight:500}
.sales-card{background:linear-gradient(135deg,#0e3128,#10251f)!important;border-color:#1d684f}.sales-card .hero-icon{background:#0f694a;color:#8ff2bd}.sales-card small{color:#37df88}
.orders-card{background:linear-gradient(135deg,#10294a,#111e31)!important;border-color:#234f80}.orders-card .hero-icon{background:#1754a0;color:#b7d6ff}.orders-card small{color:#5ea6ff}
.average-card{background:linear-gradient(135deg,#3a2b08,#211a0c)!important;border-color:#755b16}.average-card .hero-icon{background:#8c670e;color:#ffe09a}.average-card small{color:#f4bd4f}
.pending-card{background:linear-gradient(135deg,#39151c,#211219)!important;border-color:#6d2632}.pending-card .hero-icon{background:#a52b3a;color:#ffe0e3}.pending-card small{color:#ff666d}
.stock-card{background:linear-gradient(135deg,#28164e,#18152e)!important;border-color:#52358c}.stock-card .hero-icon{background:#5b2ba4;color:#dfc9ff}.stock-card small{color:#a986ff}
.dashboard-main-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:16px}.dashboard-bottom-grid{display:grid;grid-template-columns:1.05fr 1.2fr .95fr;gap:16px}
.dashboard-main-grid .panel,.dashboard-bottom-grid .panel{min-height:0;background:#10161f;border-color:#283544;padding:18px 20px}
.section-title{display:flex;align-items:center;gap:10px}.section-title h2{font-size:17px!important;color:#f4f7fb;margin:0!important}.section-title p{font-size:13px!important;color:#8e9aaa!important;margin:3px 0 0!important}.title-icon{width:29px;height:29px;display:grid;place-items:center;color:#e8eef5;font-size:22px}.title-icon.gold{color:#f4bd4f}.title-icon.warning{color:#f4bd4f}.title-icon.lightning{color:#f4bd4f}
.chart-legend{display:flex;gap:18px;color:#d5dce5;font-size:13px}.chart-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}.legend-sales{background:#f4bd4f}.legend-orders{background:#4d9cff}
.big-chart{height:278px;margin-top:2px}.big-chart svg{width:100%;height:100%}.big-chart svg line{stroke:#283544}.big-chart svg polyline{stroke:#f4bd4f;stroke-width:3.5}.big-chart svg circle{fill:#f4bd4f}.big-chart svg text{fill:#8c99aa;font-size:12px}
.dashboard-table-wrap{overflow:auto}.dashboard-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}.dashboard-table th{background:#1b2634;color:#aeb9c8;font-size:12px;font-weight:700;text-align:left;padding:10px 11px;border-bottom:1px solid #2a3746}.dashboard-table th:first-child{border-radius:8px 0 0 0}.dashboard-table th:last-child{border-radius:0 8px 0 0}.dashboard-table td{padding:10px 11px;color:#e5eaf0;border-bottom:1px solid #26313e;font-size:14px}.dashboard-table td:nth-child(3),.dashboard-table th:nth-child(3){text-align:right}.dashboard-table td:last-child,.dashboard-table th:last-child{text-align:right}.dashboard-table tbody tr:last-child td{border-bottom:0}.dashboard-table b{font-size:14px}.dashboard-table strong{font-size:14px}.rank-num{color:#cbd4df;font-weight:600;width:34px}
.mix-content{display:flex;align-items:center;gap:25px;padding:8px 8px 4px}.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(#35d583 0 var(--p1),#4d9cff var(--p1) var(--p2),#f4bd4f var(--p2) 100%);position:relative;flex:0 0 150px}.donut:after{content:"";position:absolute;inset:22px;border-radius:50%;background:#10161f}.donut>div{position:absolute;z-index:1;inset:0;display:grid;place-content:center;text-align:center}.donut strong{font-size:25px;color:#fff}.donut span{font-size:12px;color:#9aa6b5}.mix-list{flex:1}.mix-row{display:grid;grid-template-columns:14px 1fr auto;gap:9px;align-items:center;padding:9px 0;color:#e4eaf2;font-size:14px}.mix-row b{font-size:14px}.mix-row b small{font-size:12px;color:#8f9aaa;font-weight:500}.mix-dot{width:12px;height:12px;border-radius:50%}
.stock-status{display:inline-block;padding:5px 10px;border-radius:7px;font-size:11px;font-weight:800}.stock-status.low{background:#5c480f;color:#ffd967}.stock-status.out{background:#6a242b;color:#ff9a9f}
.quick-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-action-grid button{min-height:67px;border:1px solid #354357;background:#17202b;color:#f2f5f8;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px}.quick-action-grid button span{font-size:22px}.quick-action-grid .qa-primary{background:#f4b642;color:#17120a;border-color:#f4b642}.quick-action-grid button:nth-child(2){border-color:#48617f}.quick-action-grid button:nth-child(3){border-color:#196b53;background:#102b25}.quick-action-grid button:nth-child(4){border-color:#5b3b9a;background:#21163c}
@media(max-width:1250px){.hero-kpis{grid-template-columns:repeat(3,1fr)}.dashboard-bottom-grid{grid-template-columns:1fr 1fr}.quick-actions-panel{grid-column:1/-1}.top-search{width:38vw}}
@media(max-width:900px){.top-search{display:none!important}.hero-kpis{grid-template-columns:1fr 1fr}.dashboard-main-grid,.dashboard-bottom-grid{grid-template-columns:1fr}.dashboard-bottom-grid .quick-actions-panel{grid-column:auto}.clock-wrap{display:none}.profile-mini{display:none}}
@media(max-width:560px){.hero-kpis{grid-template-columns:1fr}.dashboard-toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{width:100%}.toolbar-actions>*{flex:1}.period-tabs{overflow:auto}.period-tabs button{padding:9px 14px}.mix-content{flex-direction:column}.topbar{padding:0 15px}.content{padding:20px 14px 35px}}

/* Light theme — default */
html[data-theme="light"] body{background:#f4f6f9;color:#1d2733}
html[data-theme="light"] .app-shell{background:#f4f6f9}
html[data-theme="light"] .sidebar{background:#fff;border-right-color:#dfe5ec}
html[data-theme="light"] .logo b{color:#18212d}.logo small{color:#8b96a5}
html[data-theme="light"] .restaurant{background:#f7f9fb;border-color:#dfe5ec}.restaurant b{color:#1d2733}
html[data-theme="light"] .nav{color:#657181}.nav:hover{background:#f2f5f8;color:#1d2733}
html[data-theme="light"] .nav.active{background:#fff4dc;color:#1b1e23;box-shadow:inset 3px 0 #e7a54f}
html[data-theme="light"] .nav em{background:#fff0c7;color:#9a6900}
html[data-theme="light"] .user-mini{border-top-color:#e1e6ed}.user-mini b{color:#1d2733}
html[data-theme="light"] .main{background:#f4f6f9}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.94);border-bottom-color:#dfe5ec}
html[data-theme="light"] .top-search{background:#f7f9fc;border-color:#d4dce6;color:#657181}.top-search input{color:#1d2733}.top-search input::placeholder{color:#8793a3}
html[data-theme="light"] .clock{color:#1d2733}.clock-block b{color:#465364}.calendar-icon{color:#354254}
html[data-theme="light"] .theme-btn{background:#fff;border-color:#d6dee8;color:#273242}
html[data-theme="light"] .btn,html[data-theme="light"] .ghost,html[data-theme="light"] .icon-btn:not(.primary){background:#fff;color:#253141;border-color:#d4dce6}
html[data-theme="light"] .content{background:#f4f6f9}
html[data-theme="light"] .period-tabs{background:#fff;border-color:#d7dfe8}html[data-theme="light"] .period-tabs button{color:#687587}html[data-theme="light"] .period-tabs button.on{background:#f4b642;color:#16120a}
html[data-theme="light"] .dashboard-main-grid .panel,html[data-theme="light"] .dashboard-bottom-grid .panel{background:#fff;border-color:#dce3eb;box-shadow:0 4px 16px rgba(22,34,48,.05)}
html[data-theme="light"] .section-title h2{color:#1d2733!important}.section-title p{color:#718092!important}.chart-legend{color:#566375}
html[data-theme="light"] .big-chart svg line{stroke:#dce3eb}.big-chart svg text{fill:#8290a0}
html[data-theme="light"] .dashboard-table th{background:#eef2f6;color:#687587;border-bottom-color:#dbe2ea}.dashboard-table td{color:#263241;border-bottom-color:#e5e9ee}
html[data-theme="light"] .donut:after{background:#fff}.donut span{color:#748194}.mix-row{color:#334052}
html[data-theme="light"] .quick-action-grid button{background:#f6f8fa;color:#263241;border-color:#d5dde7}.quick-action-grid .qa-primary{background:#f4b642;color:#17120a;border-color:#f4b642}.quick-action-grid button:nth-child(3){background:#eefaf5}.quick-action-grid button:nth-child(4){background:#f3edff}
html[data-theme="light"] .hero-kpi span{color:#465466}.hero-kpi strong{color:#17212d}.hero-kpi small i{color:#667486}
html[data-theme="light"] .search,html[data-theme="light"] .order-fields input,html[data-theme="light"] .order-fields select,html[data-theme="light"] .order-fields textarea,html[data-theme="light"] .form-grid input,html[data-theme="light"] .form-grid select{background:#fff;color:#263241;border-color:#d5dde7}
html[data-theme="light"] .panel,html[data-theme="light"] .kpi,html[data-theme="light"] .product,html[data-theme="light"] .cat{background:#fff;color:#263241;border-color:#dce3eb}
html[data-theme="light"] .product:hover{border-color:#e7a54f}.product b{color:inherit}
html[data-theme="light"] .rank{border-bottom-color:#e5e9ee}.rank b{color:#263241}.rank strong{color:#263241}.rank small{color:#788697}.rank>span{background:#f0f3f7;color:#b07808}
html[data-theme="light"] .bar{background:#e5eaf0}.stock-row,html[data-theme="light"] .sale-row{border-bottom-color:#e5e9ee}
html[data-theme="light"] .empty{color:#8a96a5}
html[data-theme="light"] .kot{background:#fff;border-color:#dce3eb}.kot li{border-bottom-color:#e5e9ee}.note{background:#f6f8fa;color:#566476}
html[data-theme="light"] .table-card{background:#fff;color:#263241;border-color:#dce3eb}.table-card strong{color:#1d2733}
html[data-theme="light"] th{background:#eef2f6;color:#687587}html[data-theme="light"] td{color:#263241;border-bottom-color:#e5e9ee}
html[data-theme="light"] .modal-backdrop{background:rgba(15,23,34,.38)}html[data-theme="light"] .modal{background:#fff;color:#263241;border-color:#d8e0e9}
html[data-theme="light"] .toast{box-shadow:0 10px 30px rgba(20,32,45,.15)}

/* ============================================================
   RESTRO — MERGED PREMIUM DASHBOARD THEME
   Functional dashboard + refined light/dark design system
   ============================================================ */

:root{
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-soft: 0 8px 28px rgba(16,24,40,.06);
  --shadow-dark: 0 12px 34px rgba(0,0,0,.22);
}
html,body{font-family:var(--font-ui);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{letter-spacing:-.005em}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,b,strong{letter-spacing:-.015em}
.topbar{min-height:76px}
.top-search input{font-size:15px}
.top-search input::placeholder{font-size:14px}
.nav{font-size:15px;min-height:44px}
.nav span{font-weight:600}
.logo b{font-size:20px;letter-spacing:.01em}
.logo small{font-size:10px;letter-spacing:.12em}
.restaurant b{font-size:14px}
.restaurant small,.user-mini small{font-size:12px}
.user-mini b{font-size:14px}
.content{padding:28px 32px 40px}
.content > *{max-width:100%}
.dashboard-toolbar{margin-bottom:22px}
.period-tabs button,.toolbar-actions button,.btn,.primary,.ghost,.link{font-size:14px;font-weight:600}
.hero-kpis{gap:16px;margin-bottom:20px}
.hero-kpi{min-height:136px;padding:20px 18px;border-radius:16px;box-shadow:var(--shadow-soft)}
.hero-kpi > div:last-child span{font-size:13px;font-weight:600}
.hero-kpi strong{font-size:28px;line-height:1.1}
.hero-kpi small{font-size:12px}
.hero-icon{width:46px;height:46px;font-size:19px}
.panel{border-radius:16px;box-shadow:var(--shadow-soft)}
.panel-head{padding:18px 20px}
.section-title h2{font-size:18px;line-height:1.2}
.section-title p{font-size:13px;margin-top:3px}
.dashboard-table{font-size:14px}
.dashboard-table th{font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.dashboard-table td{padding:13px 12px}
.mix-row{font-size:14px;padding:10px 0}
.mix-row b{font-size:14px}
.mix-row b small{font-size:12px}
.donut strong{font-size:27px}
.donut span{font-size:12px}
.chart-legend{font-size:12px}
.empty{font-size:14px;padding:28px}
.theme-btn{display:grid;place-items:center;cursor:pointer;transition:.2s ease}
.theme-btn:hover{transform:translateY(-1px)}
/* Consistent controls in both themes */
html[data-theme="light"]{
  --dash-bg:#f5f7fa;
  --dash-panel:#ffffff;
  --dash-panel-2:#f8fafc;
  --dash-border:#e2e8f0;
  --dash-text:#17202b;
  --dash-muted:#667386;
}
html[data-theme="dark"]{
  --dash-bg:#070b10;
  --dash-panel:#10161f;
  --dash-panel-2:#141b25;
  --dash-border:#273342;
  --dash-text:#f4f7fb;
  --dash-muted:#a5afbd;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .hero-kpi{box-shadow:0 8px 26px rgba(15,23,42,.055)}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .hero-kpi{box-shadow:var(--shadow-dark)}
@media (max-width:1200px){
  .content{padding:24px}
  .hero-kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .content{padding:18px 14px 28px}
  .hero-kpis{grid-template-columns:1fr 1fr;gap:12px}
  .hero-kpi{min-height:118px;padding:16px}
  .hero-kpi strong{font-size:23px}
  .panel-head{padding:15px}
}
@media (max-width:480px){
  body{font-size:14px}
  .hero-kpis{grid-template-columns:1fr}
  .hero-kpi{min-height:104px}
}


/* ============================================================
   RESTRO V1 — FINAL UI POLISH
   Readable 15–20px typography + consistent light/dark system
   ============================================================ */
:root{
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-bg:#f4f6f9;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-border:#dbe3ec;
  --ui-text:#17202b;
  --ui-text-2:#475569;
  --ui-muted:#6b7788;
  --ui-accent:#f0ad36;
  --ui-accent-hover:#e39c1f;
  --ui-success:#159a68;
  --ui-danger:#d84b55;
  --ui-info:#397fe0;
  --ui-purple:#7448c8;
  --ui-radius:14px;
}

html[data-theme="dark"]{
  --ui-bg:#080c12;
  --ui-surface:#10161f;
  --ui-surface-soft:#151d28;
  --ui-border:#293747;
  --ui-text:#f4f7fb;
  --ui-text-2:#c6d0dc;
  --ui-muted:#9aa7b7;
  --ui-accent:#f4b642;
  --ui-accent-hover:#ffc85b;
  --ui-success:#35d583;
  --ui-danger:#ff6870;
  --ui-info:#4d9cff;
  --ui-purple:#a986ff;
}

html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

html,body{font-family:var(--ui-font);font-size:16px;line-height:1.5}
body{background:var(--ui-bg);color:var(--ui-text);letter-spacing:0}

/* Global readable typography */
body,.content,.panel,.kpi,.hero-kpi,.product,.recipe-card,.kot,.table-card,
button,input,select,textarea,th,td{font-size:16px}

h1,h2,h3,h4,h5,h6{color:var(--ui-text);line-height:1.25}
p{line-height:1.5}

/* Sidebar */
.sidebar{background:var(--ui-surface)!important;border-right:1px solid var(--ui-border)!important;padding:20px 12px}
.logo{padding:0 10px 22px}
.logo b{font-size:20px!important;color:var(--ui-text)!important;letter-spacing:.01em}
.logo small{font-size:11px!important;color:var(--ui-muted)!important;letter-spacing:.12em}
.restaurant{background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important;padding:13px!important;border-radius:12px!important}
.restaurant b{font-size:15px!important;color:var(--ui-text)!important}
.restaurant small{font-size:12px!important;color:var(--ui-muted)!important}
.nav{font-size:15px!important;min-height:44px;padding:10px 12px!important;color:var(--ui-text-2)!important}
.nav span{font-size:15px!important;font-weight:600}
.nav:hover{background:var(--ui-surface-soft)!important;color:var(--ui-text)!important}
.nav.active{background:#fff3d7!important;color:#1b1e23!important;box-shadow:inset 3px 0 var(--ui-accent)!important}
html[data-theme="dark"] .nav.active{background:#202b39!important;color:#fff!important}
.nav em{font-size:11px!important}
.user-mini{border-top-color:var(--ui-border)!important;padding:15px 8px}
.user-mini b{font-size:15px!important;color:var(--ui-text)!important}
.user-mini small{font-size:12px!important;color:var(--ui-muted)!important}
.avatar{width:34px;height:34px}

/* Header */
.topbar{height:76px;min-height:76px;background:color-mix(in srgb,var(--ui-surface) 94%,transparent)!important;border-bottom:1px solid var(--ui-border)!important;padding:0 28px!important}
.top-search{height:46px!important;background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important;width:min(580px,45vw)!important}
.top-search span{font-size:22px!important;color:var(--ui-muted)}
.top-search input{font-size:16px!important;color:var(--ui-text)!important}
.top-search input::placeholder{font-size:14px!important;color:var(--ui-muted)!important}
.clock-block b{font-size:14px!important;color:var(--ui-text-2)!important}
.clock{font-size:20px!important;color:var(--ui-text)!important}
.calendar-icon{font-size:20px!important;color:var(--ui-text-2)!important}
.theme-btn{width:44px!important;height:44px!important;background:var(--ui-surface)!important;border-color:var(--ui-border)!important;color:var(--ui-text)!important;font-size:19px!important}
.profile-mini{color:var(--ui-text)!important}
.profile-mini b{font-size:14px!important}
.profile-mini small{font-size:11px!important;color:var(--ui-muted)!important}

/* Buttons / controls */
.btn,.primary,.ghost,.icon-btn,.link{font-size:15px!important;line-height:1.2;padding:11px 15px!important;border-radius:10px!important}
.primary,.icon-btn{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:#17120a!important}
.primary:hover,.icon-btn:hover{background:var(--ui-accent-hover)!important;border-color:var(--ui-accent-hover)!important}
.ghost,.btn{background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important}
.link,.icon-link{font-size:15px!important;color:var(--ui-accent-hover)!important}

/* Main layout */
.main,.content{background:var(--ui-bg)!important}
.content{padding:28px 30px 44px!important}
.dashboard-toolbar{margin-bottom:20px!important}
.period-tabs{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:11px;padding:3px}
.period-tabs button{font-size:15px!important;padding:10px 18px!important;color:var(--ui-text-2)!important}
.period-tabs button.on{background:var(--ui-accent)!important;color:#17120a!important}
.toolbar-actions{gap:10px}

/* Dashboard KPI cards — soft in light, rich in dark */
.hero-kpis{gap:14px!important;margin-bottom:18px!important}
.hero-kpi{min-height:132px!important;padding:20px!important;border-radius:15px!important;border:1px solid var(--ui-border)!important}
.hero-kpi > div:last-child span{font-size:14px!important;line-height:1.3}
.hero-kpi strong{font-size:28px!important;line-height:1.15!important;margin:8px 0 5px!important}
.hero-kpi small{font-size:13px!important}
.hero-icon{width:48px!important;height:48px!important;font-size:21px!important;border-radius:13px!important}

html[data-theme="light"] .sales-card{background:linear-gradient(135deg,#e7f8ef,#d8f2e5)!important;border-color:#a9dfc6!important}
html[data-theme="light"] .orders-card{background:linear-gradient(135deg,#e8f1ff,#dceaff)!important;border-color:#b5cef4!important}
html[data-theme="light"] .average-card{background:linear-gradient(135deg,#fff7df,#fff0c2)!important;border-color:#ecd48d!important}
html[data-theme="light"] .pending-card{background:linear-gradient(135deg,#fff0f1,#ffe1e4)!important;border-color:#efb5bb!important}
html[data-theme="light"] .stock-card{background:linear-gradient(135deg,#f2eaff,#e9dcff)!important;border-color:#cbb3f1!important}
html[data-theme="light"] .hero-kpi span{color:#334155!important}
html[data-theme="light"] .hero-kpi strong{color:#17202b!important}
html[data-theme="light"] .hero-kpi small{color:#4b5a6d!important}
html[data-theme="light"] .sales-card small{color:#13865b!important}
html[data-theme="light"] .orders-card small{color:#2d6fc7!important}
html[data-theme="light"] .average-card small{color:#9a6a00!important}
html[data-theme="light"] .pending-card small{color:#b33e49!important}
html[data-theme="light"] .stock-card small{color:#7042b8!important}
html[data-theme="light"] .sales-card .hero-icon{background:#c8f0dc!important;color:#148b5e!important}
html[data-theme="light"] .orders-card .hero-icon{background:#cfe1fb!important;color:#286dc2!important}
html[data-theme="light"] .average-card .hero-icon{background:#f9e5a5!important;color:#936600!important}
html[data-theme="light"] .pending-card .hero-icon{background:#f8cbd0!important;color:#b33b48!important}
html[data-theme="light"] .stock-card .hero-icon{background:#ddccfb!important;color:#713fb5!important}

/* Panels / sections */
.panel,.dashboard-main-grid .panel,.dashboard-bottom-grid .panel{background:var(--ui-surface)!important;border-color:var(--ui-border)!important;border-radius:15px!important;box-shadow:0 6px 22px rgba(15,23,42,.055)!important}
html[data-theme="dark"] .panel,html[data-theme="dark"] .dashboard-main-grid .panel,html[data-theme="dark"] .dashboard-bottom-grid .panel{box-shadow:0 12px 34px rgba(0,0,0,.22)!important}
.panel-head{padding:18px 20px!important;margin-bottom:8px!important}
.panel-head h2,.panel>h2{font-size:18px!important;color:var(--ui-text)!important}
.panel-head p,.muted{font-size:14px!important;color:var(--ui-muted)!important}
.section-title h2{font-size:19px!important;color:var(--ui-text)!important}
.section-title p{font-size:14px!important;color:var(--ui-muted)!important}
.title-icon{font-size:21px!important}
.chart-legend{font-size:13px!important;color:var(--ui-text-2)!important}

/* Dashboard chart */
.big-chart{height:278px!important}
.big-chart svg text{font-size:13px!important;fill:var(--ui-muted)!important}
html[data-theme="light"] .big-chart svg line{stroke:#dce3eb!important}
html[data-theme="dark"] .big-chart svg line{stroke:#2b3948!important}

/* Tables / rankings */
.dashboard-table,table{font-size:15px!important}
.dashboard-table th,th{font-size:12px!important;padding:12px 12px!important;color:var(--ui-muted)!important;background:var(--ui-surface-soft)!important;border-bottom-color:var(--ui-border)!important}
.dashboard-table td,td{font-size:15px!important;padding:13px 12px!important;color:var(--ui-text)!important;border-bottom-color:var(--ui-border)!important}
.dashboard-table b,.dashboard-table strong,td b{font-size:15px!important;color:var(--ui-text)!important}
.rank{padding:12px 0!important;border-bottom-color:var(--ui-border)!important}
.rank b,.rank strong{font-size:15px!important;color:var(--ui-text)!important}
.rank small{font-size:13px!important;color:var(--ui-muted)!important}
.rank>span{font-size:12px!important;width:28px;height:28px}

/* Order mix */
.mix-content{gap:25px!important}
.mix-row{font-size:15px!important;color:var(--ui-text)!important;padding:10px 0!important}
.mix-row b{font-size:15px!important}
.mix-row b small{font-size:13px!important;color:var(--ui-muted)!important}
.donut strong{font-size:28px!important;color:var(--ui-text)!important}
.donut span{font-size:13px!important;color:var(--ui-muted)!important}
html[data-theme="light"] .donut:after{background:#fff!important}
html[data-theme="dark"] .donut:after{background:#10161f!important}

/* Inventory / POS / Recipes / Kitchen */
.search,.order-fields input,.order-fields select,.order-fields textarea,.form-grid input,.form-grid select{background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;font-size:15px!important;padding:11px 12px!important}
.search::placeholder,.order-fields input::placeholder,.order-fields textarea::placeholder,.form-grid input::placeholder{color:var(--ui-muted)!important}
.cat{background:var(--ui-surface)!important;color:var(--ui-text-2)!important;border-color:var(--ui-border)!important;font-size:14px!important;padding:9px 12px!important}
.cat.on{background:var(--ui-accent)!important;color:#17120a!important;border-color:var(--ui-accent)!important}
.product{background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;padding:15px!important;min-height:125px!important}
.product span{font-size:11px!important;color:var(--ui-muted)!important}
.product b{font-size:15px!important;line-height:1.4!important;margin:9px 0!important;color:var(--ui-text)!important}
.product strong{font-size:15px!important;color:var(--ui-accent-hover)!important}
.product em{font-size:12px!important}
.kot{background:var(--ui-surface)!important;border-color:var(--ui-border)!important;padding:17px!important}
.kot header b{font-size:17px!important;color:var(--ui-text)!important}
.kot header small,.kot-time{font-size:13px!important;color:var(--ui-muted)!important}
.kot header>span{font-size:11px!important}
.kot li{font-size:15px!important;border-bottom-color:var(--ui-border)!important;padding:8px 0!important}
.note{font-size:14px!important;background:var(--ui-surface-soft)!important;color:var(--ui-text-2)!important}
.kot-actions button{font-size:14px!important;padding:10px!important}
.table-card{background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important}
.table-card span{font-size:11px!important;color:var(--ui-muted)!important}
.table-card strong{font-size:42px!important;color:var(--ui-text)!important}
.table-card small,.table-card em{font-size:13px!important}
.recipe-card{background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;padding:17px!important;min-height:125px!important}
.recipe-card b{font-size:16px!important;color:var(--ui-text)!important}
.recipe-card small{font-size:13px!important;color:var(--ui-muted)!important;margin:6px 0 13px!important}
.recipe-card span{font-size:13px!important;color:var(--ui-accent-hover)!important}
.status{font-size:11px!important;padding:5px 9px!important}
.icon-link{font-size:14px!important}
.stock-row,.sale-row{font-size:15px!important;padding:12px 0!important;border-bottom-color:var(--ui-border)!important}
.sale-row b{font-size:15px!important;color:var(--ui-text)!important}
.sale-row small{font-size:13px!important;color:var(--ui-muted)!important}
.stock-status{font-size:12px!important;padding:6px 10px!important}
.empty{font-size:15px!important;color:var(--ui-muted)!important}

/* Forms / settings / modals */
.form-grid{gap:14px!important}
.form-grid label{font-size:14px!important;color:var(--ui-text-2)!important}
.modal{background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important}
.modal h2{font-size:20px!important;color:var(--ui-text)!important}
.modal-actions{gap:10px!important}
.payment-total{font-size:28px!important;color:var(--ui-text)!important}
.pay{font-size:15px!important}
.toast{font-size:14px!important}

/* Quick actions */
.quick-action-grid{gap:10px!important}
.quick-action-grid button{min-height:68px!important;font-size:15px!important;background:var(--ui-surface-soft)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important}
.quick-action-grid button span{font-size:21px!important}
.quick-action-grid .qa-primary{background:var(--ui-accent)!important;color:#17120a!important;border-color:var(--ui-accent)!important}
html[data-theme="light"] .quick-action-grid button:nth-child(3){background:#eefaf5!important}
html[data-theme="light"] .quick-action-grid button:nth-child(4){background:#f3edff!important}
html[data-theme="dark"] .quick-action-grid button:nth-child(3){background:#102b25!important}
html[data-theme="dark"] .quick-action-grid button:nth-child(4){background:#21163c!important}

/* Responsive readability */
@media(max-width:1200px){
  .content{padding:24px!important}
  .hero-kpis{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .content{padding:20px 18px 35px!important}
  .nav,.nav span{font-size:15px!important}
}
@media(max-width:760px){
  .hero-kpis{grid-template-columns:1fr 1fr;gap:12px}
  .hero-kpi{min-height:118px!important;padding:16px!important}
  .hero-kpi strong{font-size:24px!important}
  .panel-head{padding:15px!important}
  .section-title h2{font-size:18px!important}
}
@media(max-width:560px){
  body{font-size:15px}
  .content{padding:18px 14px 30px!important}
  .hero-kpis{grid-template-columns:1fr}
  .hero-kpi{min-height:110px!important}
  .hero-kpi strong{font-size:25px!important}
  .btn,.primary,.ghost,.icon-btn{font-size:14px!important}
}

/* ============================================================
   RESTRO — DARK THEME KPI CONTRAST FIX
   Keep all dashboard numbers clearly readable on rich dark cards.
   ============================================================ */
html[data-theme="dark"] .hero-kpi,
html[data-theme="dark"] .hero-kpi > div:last-child{
  color:#ffffff!important;
}
html[data-theme="dark"] .hero-kpi span{
  color:#dce5ef!important;
  opacity:1!important;
}
html[data-theme="dark"] .hero-kpi strong,
html[data-theme="dark"] .sales-card strong,
html[data-theme="dark"] .orders-card strong,
html[data-theme="dark"] .average-card strong,
html[data-theme="dark"] .pending-card strong,
html[data-theme="dark"] .stock-card strong{
  color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 1px 2px rgba(0,0,0,.35)!important;
  font-weight:800!important;
}
html[data-theme="dark"] .hero-kpi small{
  opacity:1!important;
}
html[data-theme="dark"] .hero-kpi small i{
  color:#c3cedb!important;
  opacity:1!important;
}
html[data-theme="dark"] .sales-card strong{color:#f7fffb!important}
html[data-theme="dark"] .orders-card strong{color:#f7fbff!important}
html[data-theme="dark"] .average-card strong{color:#fff9e8!important}
html[data-theme="dark"] .pending-card strong{color:#fff7f8!important}
html[data-theme="dark"] .stock-card strong{color:#fbf8ff!important}

/* Dashboard and report numeric values: never use low-contrast inherited text. */
html[data-theme="dark"] .kpi strong,
html[data-theme="dark"] .payment-total,
html[data-theme="dark"] .donut strong,
html[data-theme="dark"] .table-card strong{
  color:#ffffff!important;
  opacity:1!important;
}


/* ============================================================
   RECEIPT / KOT ACTIONS
   ============================================================ */
.kot-actions{flex-wrap:wrap}
.kot-actions button{min-width:110px}
.sale-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.sale-actions strong{white-space:nowrap}
@media(max-width:560px){.sale-actions{justify-content:flex-start}.sale-actions button{font-size:13px!important}}

/* ============================================================
   TABLE ADD-ITEM / EXTRA ORDER FLOW
   ============================================================ */
.add-items-banner{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  margin:0 0 12px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
  font-size:13px;
}
.add-items-banner b{font-size:14px}
.add-items-banner span{color:var(--muted,#64748b)}
.order-summary-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 16px;
}
.table-order-total{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 14px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border,#e5e7eb);
}
.table-order-total span{color:var(--muted,#64748b)}
.table-order-total strong{font-size:18px}
.order-kot-status{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--border,#e5e7eb);
}
.order-kot-status>b{width:100%;font-size:13px}
.order-kot-status small{width:100%;color:var(--muted,#64748b)}
.status-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:var(--surface-2,#f8fafc);
  border:1px solid var(--border,#e5e7eb);
}
.status-chip.status-ready{font-weight:800}

/* Authentication & access control */
.login-screen{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:radial-gradient(circle at 50% 0%,rgba(231,165,79,.12),transparent 35%),#0a0d12;color:#e9edf3;padding:20px}.login-card{width:min(430px,100%);background:#11161e;border:1px solid #2a3340;border-radius:20px;padding:30px;box-shadow:0 25px 80px rgba(0,0,0,.45)}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.login-brand .logo-mark{flex:none}.login-card h1{margin:0;font-size:24px}.login-card .muted{line-height:1.6}.login-card label,.permission-grid label{display:grid;gap:7px;color:#9ba5b5;font-size:11px;font-weight:700;margin:13px 0}.login-card input,.role-permission-box input{width:100%;padding:12px;border-radius:9px;border:1px solid #2a3340;background:#0d1219;color:#fff;outline:none}.login-card input:focus{border-color:#e7a54f}.login-error{color:#ff7676;font-size:11px;min-height:17px;margin:8px 0}.login-help{margin-top:15px;padding:10px;border:1px dashed #303a48;border-radius:9px;color:#7f8b9c;font-size:10px}.access-denied{padding:50px;text-align:center}.role-list,.user-list{display:grid;gap:10px}.role-row,.user-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px;border:1px solid #252d38;border-radius:10px;background:#0f141c}.role-row small,.user-row small{display:block;color:#697486;margin-top:4px}.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}.permission-grid label{display:flex;flex-direction:row;align-items:center;gap:8px}.permission-grid input{width:auto}.role-permission-box{padding:12px;border:1px solid #252d38;border-radius:10px;background:#0d1219;margin-top:12px}.danger-btn{color:#ff8585!important;border-color:#5a3030!important}.hidden{display:none!important}@media(max-width:700px){.permission-grid{grid-template-columns:1fr}}


/* ============================================================
   TABLE + PAYMENT POLISH
   ============================================================ */
html[data-theme="light"] .table-card.ordered{
  background:linear-gradient(135deg,#fff0f1,#ffe1e4)!important;
  border-color:#efb5bb!important;
  box-shadow:0 4px 16px rgba(179,62,73,.08);
}
html[data-theme="light"] .table-card.ordered span{color:#7d6b70!important}
html[data-theme="light"] .table-card.ordered strong{color:#263241!important}
html[data-theme="light"] .table-card.ordered small{color:#687587!important}
html[data-theme="light"] .table-card.ordered em{color:#b33e49!important}

.pay-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 8px!important}
.pay-options .pay{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:52px!important;
  padding:12px 14px!important;
  border:1px solid var(--ui-border,#d5dde7)!important;
  border-radius:10px!important;
  background:var(--ui-surface-soft,#f6f8fa)!important;
  color:var(--ui-text,#263241)!important;
  cursor:pointer!important;
  font-size:15px!important;
  font-weight:750!important;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .05s ease!important;
}
.pay-options .pay:hover{border-color:var(--ui-accent,#e7a54f)!important}
.pay-options .pay:active{transform:translateY(1px)}
.pay-options .pay.on{
  background:var(--ui-accent,#e7a54f)!important;
  border-color:var(--ui-accent,#e7a54f)!important;
  color:#17120a!important;
  box-shadow:0 0 0 2px rgba(231,165,79,.16)!important;
}
.selected-payment{font-size:13px;color:var(--ui-muted,#718092);margin:5px 0 15px}
.selected-payment b{color:var(--ui-text,#263241)}
html[data-theme="dark"] .pay-options .pay{background:#151b24!important;color:#dce2eb!important;border-color:#2a3340!important}
html[data-theme="dark"] .pay-options .pay.on{background:#e7a54f!important;color:#17120a!important;border-color:#e7a54f!important}
html[data-theme="dark"] .selected-payment{color:#8d98a8}
html[data-theme="dark"] .selected-payment b{color:#fff}


/* ============================================================
   RESTRO — HEADER / USER PROFILE / LIGHT THEME FINAL POLISH
   ============================================================ */
.topbar-right{display:flex!important;align-items:center!important;gap:12px!important;min-width:0}
.profile-mini,.user-mini{cursor:pointer!important;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.profile-mini{display:flex!important;align-items:center!important;gap:9px!important;padding:7px 9px!important;border:1px solid transparent!important;border-radius:12px!important;user-select:none}
.profile-mini:hover{background:var(--ui-surface-soft)!important;border-color:var(--ui-border)!important}
.profile-mini:active,.user-mini:active{transform:translateY(1px)}
.profile-mini .avatar{flex:none}
.profile-mini>div:nth-child(2){min-width:0}
.profile-mini b,.profile-mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.user-mini{border-radius:12px!important;margin:8px 0 0!important}
.user-mini:hover{background:var(--ui-surface-soft)!important}
.user-mini .avatar{flex:none}

/* The header no longer contains a New Order button. Keep its spacing balanced. */
.topbar-right{margin-left:auto!important}

/* Light theme: remove leftover dark-only panels/rows and make every surface consistent. */
html[data-theme="light"] .role-row,
html[data-theme="light"] .user-row,
html[data-theme="light"] .role-permission-box{
  background:var(--ui-surface-soft)!important;
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
}
html[data-theme="light"] .role-row b,
html[data-theme="light"] .user-row b,
html[data-theme="light"] .role-row small,
html[data-theme="light"] .user-row small{
  color:var(--ui-text)!important;
}
html[data-theme="light"] .role-row small,
html[data-theme="light"] .user-row small{color:var(--ui-muted)!important}
html[data-theme="light"] .role-permission-box label{color:var(--ui-text-2)!important}
html[data-theme="light"] .danger-panel{background:var(--ui-surface)!important;border-color:var(--ui-border)!important}
html[data-theme="light"] .settings-panel input,
html[data-theme="light"] .settings-panel select,
html[data-theme="light"] .settings-panel textarea{background:#fff!important;color:var(--ui-text)!important}

/* User account modal */
.account-menu{min-width:min(430px,calc(100vw - 40px))}
.account-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--ui-border)}
.account-avatar{width:48px!important;height:48px!important;background:var(--ui-accent)!important;color:#17120a!important;font-size:16px}
.account-head h2{margin:0!important;font-size:20px!important;color:var(--ui-text)!important}
.account-head p{margin:4px 0 0!important;color:var(--ui-muted)!important;font-size:13px!important}
.account-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.account-actions .btn{min-height:42px}
.account-actions .account-logout{color:var(--ui-danger)!important;border-color:color-mix(in srgb,var(--ui-danger) 35%,var(--ui-border))!important;background:transparent!important}
html[data-theme="dark"] .account-actions .account-logout{color:#ff8585!important}

/* More polished light/dark header surfaces */
html[data-theme="light"] .topbar{background:rgba(255,255,255,.94)!important}
html[data-theme="light"] .top-search{box-shadow:0 2px 8px rgba(15,23,42,.025)!important}
html[data-theme="light"] .theme-btn:hover{background:var(--ui-surface-soft)!important}
html[data-theme="dark"] .topbar{background:rgba(16,22,31,.94)!important}
html[data-theme="dark"] .profile-mini:hover,html[data-theme="dark"] .user-mini:hover{background:#151d28!important;border-color:#293747!important}

/* Keep sidebar user area anchored cleanly to the bottom. */
.sidebar-bottom{padding-top:8px}

@media(max-width:760px){
  .topbar{padding:0 14px!important}
  .clock-wrap{display:none!important}
  .profile-mini>div:nth-child(2){display:none!important}
  .profile-mini{padding:7px!important}
}


/* ============================================================
   RESTRO — LOGIN PASSWORD VISIBILITY
   ============================================================ */
.login-card .password-label{display:grid;gap:7px}
.login-card .password-field{position:relative;width:100%}
.login-card .password-field input{width:100%;padding-right:48px}
.login-card .password-toggle{
  position:absolute;
  right:9px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#7f8b9c;
  cursor:pointer;
  z-index:2;
}
.login-card .password-toggle:hover{
  color:#e7a54f;
  background:rgba(231,165,79,.09);
}
.login-card .password-toggle:focus-visible{
  outline:2px solid #e7a54f;
  outline-offset:2px;
}
.login-card .password-toggle svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html[data-theme="light"] .login-card .password-toggle{color:#6d7887}
html[data-theme="light"] .login-card .password-toggle:hover{color:#b97808;background:#fff4dc}
html[data-theme="light"] .login-card input{background:#fff;color:#1d2733;border-color:#cfd8e3}
html[data-theme="dark"] .login-card input{background:#0d1219;color:#fff;border-color:#2a3340}

/* The global header must stay free of the New Order action. */
.topbar .header-new-order,
.topbar #newOrderTop,
.topbar #topNewOrder{display:none!important}


/* ============================================================
   RESTRO OPERATIONS REPORT
   ============================================================ */
.ops-report-panel{overflow:hidden}
.table-scroll{width:100%;overflow:auto;border:1px solid var(--border,#e5e7eb);border-radius:12px}
.ops-report{width:100%;min-width:1180px;border-collapse:collapse;font-size:13px}
.ops-report th{position:sticky;top:0;z-index:1;background:var(--panel,#fff);color:var(--muted,#667085);font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:12px 10px;border-bottom:1px solid var(--border,#e5e7eb);white-space:nowrap}
.ops-report td{padding:11px 10px;border-bottom:1px solid var(--border,#edf0f3);vertical-align:top;white-space:nowrap}
.ops-report tbody tr:hover{background:rgba(245,158,11,.045)}
.ops-report small{color:var(--muted,#667085)}
.ops-report.compact{min-width:620px}
.report-actions{display:flex;gap:5px;align-items:center}
.report-actions .icon-link{font-size:11px}

.table-live-order{display:block;margin-top:7px;font-size:11px;letter-spacing:.01em}

/* ============================================================
   RESTRO — PAYMENT DISCOUNT / TAX / FINAL VALUE
   ============================================================ */
.payment-base{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--ui-border,#d5dde7);border-radius:10px;background:var(--ui-surface-2,#f7f9fb);margin:8px 0 14px;color:var(--ui-text,#263241)}
.payment-base span{font-size:13px;font-weight:650;color:var(--ui-text-2,#697486)}
.payment-base b{font-size:20px}
.payment-adjustments{margin-bottom:12px}
.payment-adjustments input[readonly]{opacity:.82;cursor:not-allowed}
.final-value-box{display:flex;align-items:center;justify-content:space-between;gap:16px;border:2px solid var(--ui-accent,#e7a54f);border-radius:12px;padding:13px 14px;margin-top:6px;background:rgba(231,165,79,.07)}
.final-value-box div{display:grid;gap:3px}
.final-value-box span{font-size:15px;font-weight:800;color:var(--ui-text,#263241)}
.final-value-box small{font-size:11px;color:var(--ui-muted,#697486)}
.final-value-box input{width:180px!important;text-align:right;font-size:22px!important;font-weight:850!important;background:var(--ui-surface,#fff)!important}
.payment-hint{font-size:11px;line-height:1.45;color:var(--ui-muted,#697486);margin:10px 0 0}
html[data-theme="dark"] .payment-base{background:#151b24;border-color:#2a3340}
html[data-theme="dark"] .final-value-box{background:rgba(231,165,79,.08)}
@media(max-width:650px){.final-value-box{align-items:stretch;flex-direction:column}.final-value-box input{width:100%!important;text-align:left}}


/* ============================================================
   PAYMENT / INVOICE ACTIONS — FINAL OPERATIONS
   ============================================================ */
.payment-single-adjustments{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 12px}
.payment-single-adjustments label,.payment-phone-label{display:grid;gap:6px;color:var(--ui-text-2,#697486);font-size:14px;font-weight:700}
.payment-single-adjustments input,.payment-phone-label input{background:var(--ui-surface,#fff)!important;color:var(--ui-text,#263241)!important;border:1px solid var(--ui-border,#d5dde7)!important;border-radius:9px;padding:11px 12px;width:100%;font-size:15px!important;outline:none}
.payment-single-adjustments input:focus,.payment-phone-label input:focus,.final-value-box input:focus{border-color:var(--ui-accent,#e7a54f)!important;box-shadow:0 0 0 3px rgba(231,165,79,.12)}
.payment-single-adjustments small{font-size:11px;color:var(--ui-muted,#7b8797);font-weight:600}
.payment-phone-label{margin-top:16px}
.payment-breakdown{border-top:1px solid var(--ui-border,#d8e0e9);border-bottom:1px solid var(--ui-border,#d8e0e9);padding:8px 0;margin-top:12px}
.payment-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;color:var(--ui-text-2,#697486)}
.payment-breakdown .breakdown-final{font-size:15px;font-weight:800;color:var(--ui-text,#263241);padding-top:8px}
.payment-breakdown .breakdown-final b{color:var(--ui-accent,#d88d18)}
.payment-success{text-align:center}
.success-mark{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#e9f8ef;color:#16834f;font-size:30px;font-weight:900}
.success-invoice-box{display:grid;gap:5px;border:1px solid var(--ui-border,#d8e0e9);background:var(--ui-surface-2,#f7f9fb);border-radius:12px;padding:14px;margin:14px 0}
.success-invoice-box b{font-size:16px}.success-invoice-box span{font-size:12px;color:var(--ui-muted,#697486)}.success-invoice-box strong{font-size:25px;color:var(--ui-accent,#d88d18)}
.invoice-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.invoice-link-row{display:flex;gap:8px;margin-top:12px}.invoice-link-row input{min-width:0;flex:1;background:var(--ui-surface-2,#f7f9fb);color:var(--ui-text,#263241);border:1px solid var(--ui-border,#d8e0e9);border-radius:8px;padding:9px;font-size:11px}
.success-help{font-size:11px;line-height:1.5;color:var(--ui-muted,#697486);text-align:left;margin:12px 0}
html[data-theme="dark"] .success-mark{background:#173a2a;color:#72e6a4}
html[data-theme="dark"] .success-invoice-box{background:#151b24;border-color:#2a3340}
html[data-theme="dark"] .invoice-link-row input{background:#151b24;color:#fff;border-color:#2a3340}
@media(max-width:650px){.payment-single-adjustments,.invoice-actions{grid-template-columns:1fr}.invoice-link-row{flex-direction:column}}

/* ============================================================
   FINAL PAYMENT FLOW — DISCOUNT ONLY + PDF WHATSAPP
   ============================================================ */
.payment-discount-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 4px}
.payment-discount-grid label,.success-whatsapp-row label{display:grid;gap:6px;color:var(--ui-text-2,#697486);font-size:14px;font-weight:700}
.payment-discount-grid input,.success-whatsapp-row input{background:var(--ui-surface,#fff)!important;color:var(--ui-text,#263241)!important;border:1px solid var(--ui-border,#d5dde7)!important;border-radius:9px;padding:11px 12px;width:100%;font-size:15px!important;outline:none}
.payment-discount-grid input:focus,.success-whatsapp-row input:focus{border-color:var(--ui-accent,#e7a54f)!important;box-shadow:0 0 0 3px rgba(231,165,79,.12)}
.discount-live-note{font-size:12px;font-weight:700;color:var(--ui-accent,#c57d12);min-height:18px;margin:2px 0 8px}
.final-value-box input[readonly]{cursor:not-allowed;opacity:.92;background:var(--ui-surface-2,#f7f9fb)!important}
.success-whatsapp-row{margin-top:12px;text-align:left}
.success-whatsapp-row label{font-size:13px}
.invoice-actions-two{grid-template-columns:repeat(2,1fr)!important}
.whatsapp-action{border-color:#1f9d63!important;color:#087443!important}
@media(max-width:650px){.payment-discount-grid,.invoice-actions-two{grid-template-columns:1fr!important}}


/* FINAL DISCOUNT DATA-FIELD STYLE: plain decimal fields, no number spinners */
.payment-discount-grid input[type="text"] {
  appearance:none; -webkit-appearance:none;
  font-variant-numeric: tabular-nums;
}
.payment-discount-grid input[type="text"]::-webkit-inner-spin-button,
.payment-discount-grid input[type="text"]::-webkit-outer-spin-button { display:none; }
.payment-discount-grid input[type="text"] { text-align:left; }

/* ============================================================
   FINAL PAYMENT ENTRY + REPORT EXPORT / PAYMENT ANALYTICS
   ============================================================ */
.payment-discount-grid input[type="text"]{
  appearance:none!important;-webkit-appearance:none!important;
  font-variant-numeric:tabular-nums;
  text-align:left!important;
}
.payment-discount-grid input[type="text"]::-webkit-inner-spin-button,
.payment-discount-grid input[type="text"]::-webkit-outer-spin-button{display:none!important}
.payment-discount-grid label{font-size:14px!important;color:var(--ui-text,#263241)!important}
.final-value-box{margin-top:12px!important}
.final-value-box div{display:block!important}
.final-value-box span{font-size:15px!important;font-weight:800!important}
.final-value-box small{display:none!important}

.report-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.report-period-tabs{display:flex;gap:5px;flex-wrap:wrap}
.report-export-actions{display:flex;gap:9px;flex-wrap:wrap}
.report-export-actions button{min-width:125px}
.export-format-note{border:1px solid var(--ui-border,#d8e0e9);background:var(--ui-surface-2,#f7f9fb);padding:11px 12px;border-radius:9px;color:var(--ui-muted,#697486);font-size:12px;line-height:1.5}
.payment-chart-panel{overflow:hidden}
.payment-chart-tabs{display:flex;gap:4px;flex-wrap:wrap}
.payment-chart-tabs button{border:1px solid var(--ui-border,#d8e0e9);background:var(--ui-surface,#fff);color:var(--ui-text-2,#697486);padding:7px 10px;border-radius:7px;font-size:11px;font-weight:750;cursor:pointer}
.payment-chart-tabs button.on{background:var(--ui-accent,#f4b642);color:#17120a;border-color:var(--ui-accent,#f4b642)}
.payment-legend{display:flex;gap:18px;align-items:center;padding:0 0 10px;font-size:12px;color:var(--ui-text-2,#697486)}
.payment-legend span{display:inline-flex;align-items:center;gap:6px}
.payment-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.payment-chart-scroll{width:100%;overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--ui-border,#d8e0e9);padding-top:8px}
.payment-chart-svg{display:block;min-width:720px;width:100%;height:300px}
.payment-chart-svg text{fill:var(--ui-muted,#697486);font-size:10px;font-family:inherit}
.payment-chart-svg .payment-bar-value{fill:var(--ui-text,#263241);font-size:11px;font-weight:800}
.payment-chart-svg .payment-period-label{fill:var(--ui-muted,#697486);font-size:10px;font-weight:650}
html[data-theme="dark"] .payment-chart-svg .payment-bar-value{fill:#f1f5f9}
.payment-chart-svg line{stroke:var(--ui-border,#d8e0e9);stroke-width:1}
html[data-theme="dark"] .payment-chart-tabs button{background:#151b24;border-color:#2a3340;color:#aab4c2}
html[data-theme="dark"] .payment-chart-tabs button.on{background:#f4b642;color:#17120a;border-color:#f4b642}
html[data-theme="dark"] .export-format-note{background:#151b24;border-color:#2a3340}

@media(max-width:800px){
  .report-toolbar{align-items:stretch;flex-direction:column}
  .report-period-tabs,.report-export-actions{width:100%}
  .report-export-actions>*{flex:1}
  .payment-chart-panel .panel-head{align-items:flex-start;flex-direction:column}
}

@media print{
  .report-print{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;font-size:8px;padding:12px}
  .report-print h1{font-size:16px;margin:0 0 5px}
  .report-print p{font-size:9px;margin:0 0 10px}
  .report-print table{width:100%;border-collapse:collapse;table-layout:auto}
  .report-print th,.report-print td{border:1px solid #777;padding:4px;text-align:left;white-space:nowrap;font-size:7px}
  .report-print th{background:#eee;font-weight:700}
}

/* ============================================================
   REPORTS LAYOUT — PAYMENTS + GRAPH SIDE BY SIDE
   ============================================================ */
.reports-payment-row{display:grid;grid-template-columns:minmax(250px,0.32fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-bottom:14px}
.reports-payments-panel{margin:0;min-width:0}
.reports-payments-panel .panel-head{margin-bottom:8px}
.reports-payments-panel .stock-row{padding:15px 0;font-size:14px}
.reports-payments-panel .stock-row b{font-size:17px}
.reports-payment-row .payment-chart-panel{margin:0;min-width:0}
.customer-report-panel{margin-top:14px}
.payment-chart-panel .panel-head h2{font-size:18px!important}
.payment-chart-panel .panel-head p{font-size:13px!important}
.payment-chart-tabs button{padding:9px 13px!important;font-size:12px!important}
.payment-legend{font-size:13px!important;padding-bottom:12px!important}
.payment-chart-svg{min-width:900px!important;height:390px!important}
.payment-chart-svg text{font-size:13px!important}
.payment-chart-svg .payment-bar-value{font-size:14px!important;font-weight:850!important}
.payment-chart-svg .payment-period-label{font-size:13px!important;font-weight:750!important}
@media(max-width:1000px){
  .reports-payment-row{grid-template-columns:1fr}
}


/* =========================================================
   RESTRO MOBILE / RESPONSIVE LAYOUT
   Desktop stays unchanged; these rules activate on tablets/phones.
   ========================================================= */

html, body { width:100%; max-width:100%; overflow-x:hidden; }
button, input, select, textarea { touch-action:manipulation; }

@media (max-width: 800px) {
  body { min-width:0; }
  .app-shell { min-height:100dvh; width:100%; }

  /* Sidebar becomes a proper mobile drawer. */
  .sidebar {
    width:min(82vw, 310px);
    max-width:310px;
    height:100dvh;
    z-index:5000;
    box-shadow:20px 0 60px rgba(0,0,0,.28);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.open { transform:translateX(0); }

  .main { min-width:0; width:100%; margin-left:0; }
  .topbar {
    min-height:64px;
    height:auto;
    padding:10px 12px;
    gap:8px;
    position:sticky;
    top:0;
    z-index:100;
  }
  .mobile-menu {
    display:flex !important;
    width:44px;
    height:44px;
    min-width:44px;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:23px;
  }
  .topbar-right { margin-left:auto; gap:8px; min-width:0; }
  .theme-btn { width:42px; height:42px; min-width:42px; }
  .profile-mini {
    display:flex !important;
    max-width:48px;
    padding:4px;
    border-radius:12px;
  }
  .profile-mini > div:not(.avatar),
  .profile-mini > span { display:none; }

  .content {
    width:100%;
    max-width:100%;
    min-width:0;
    padding:16px 12px 34px;
  }

  /* Toolbars stack cleanly instead of becoming cramped. */
  .toolbar,
  .report-toolbar,
  .dashboard-toolbar {
    flex-wrap:wrap;
    gap:10px;
  }
  .toolbar > .search,
  .toolbar > input.search {
    width:100%;
    min-width:0;
    flex:1 1 100%;
  }
  .toolbar > button { min-height:44px; }
  .toolbar-actions { width:100%; }

  /* Dashboard cards. */
  .hero-kpis, .kpis {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }
  .kpi, .hero-kpi { min-width:0; }
  .dashboard-main-grid,
  .dashboard-bottom-grid,
  .grid-2,
  .grid-3,
  .pos-layout {
    grid-template-columns:1fr !important;
  }

  /* POS product cards. */
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px;
  }
  .product {
    min-width:0;
    min-height:110px;
    padding:11px;
  }
  .product button,
  .stepper button,
  .qty-plus,
  .qty-minus { min-width:40px; min-height:40px; }

  /* Tables / kitchen. */
  .tables-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px; }
  .kitchen-grid, .recipe-grid { grid-template-columns:1fr !important; }
  .table-card { min-width:0; }

  /* Prevent wide tables from breaking the page. */
  .table-panel,
  .panel.table-panel,
  .report-table-wrap {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-panel table,
  .report-table-wrap table {
    min-width:680px;
  }

  /* Modal is phone-sized and scrollable. */
  .modal-backdrop {
    align-items:flex-end;
    padding:0;
  }
  .modal {
    width:100%;
    max-width:none;
    max-height:min(92dvh,760px);
    margin:0;
    border-radius:20px 20px 0 0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:20px 16px;
  }
  .form-grid,
  .permission-grid,
  .pay-options,
  .invoice-actions,
  .invoice-actions-two,
  .payment-discount-grid,
  .payment-single-adjustments {
    grid-template-columns:1fr !important;
  }
  .modal-actions {
    position:sticky;
    bottom:0;
    padding-top:12px;
    margin-top:14px;
    background:var(--ui-surface);
    z-index:2;
  }
  .modal-actions button { min-height:46px; }

  /* Menu management: turn each desktop row into a readable mobile card. */
  #menuRows tr {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 12px;
    padding:12px 8px;
  }
  #menuRows tr td {
    border:0 !important;
    padding:3px 0;
  }
  #menuRows tr td:nth-child(1) { grid-column:1/-1; }
  #menuRows tr td:nth-child(6) {
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  #menuRows tr td:nth-child(6) .icon-link {
    min-height:42px;
    padding:9px 14px;
  }

  /* Inventory/settings/user rows remain usable on touch screens. */
  .user-row, .role-row {
    gap:10px;
    flex-wrap:wrap;
  }
  .user-row > div:last-child,
  .role-row > div:last-child {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  .user-row button, .role-row button { min-height:42px; }

  /* Login. */
  .login-screen { padding:12px; }
  .login-card {
    width:100%;
    max-width:430px;
    padding:24px 18px;
    border-radius:18px;
  }
  .login-card input, .login-card button { min-height:48px; }

  /* Make toast and floating elements safe on small screens. */
  #toastRoot {
    left:10px !important;
    right:10px !important;
    bottom:12px !important;
  }
}

@media (max-width: 560px) {
  .topbar { padding:8px 10px; }
  .content { padding:13px 9px 28px; }
  .topbar h1 { font-size:17px !important; }
  .topbar .mobile-menu { width:42px; min-width:42px; height:42px; }

  .hero-kpis, .kpis { grid-template-columns:1fr 1fr !important; gap:8px; }
  .kpi { padding:11px !important; }
  .kpi strong { font-size:20px !important; }

  .product-grid { grid-template-columns:1fr 1fr !important; }
  .product { min-height:112px; padding:9px; }
  .tables-grid { grid-template-columns:1fr 1fr !important; }

  .panel-head {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .panel-head button { width:100%; min-height:44px; }

  .period-tabs,
  .report-period-tabs {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
  }
  .period-tabs button,
  .report-period-tabs button {
    flex:0 0 auto;
    min-height:42px;
  }

  .seg { max-width:100%; }

  /* Larger touch targets for actions. */
  .btn, .primary, .danger-btn, .icon-link { min-height:42px; }
}

@media (max-width: 380px) {
  .hero-kpis, .kpis { grid-template-columns:1fr !important; }
  .product-grid, .tables-grid { grid-template-columns:1fr !important; }
  .content { padding-left:8px; padding-right:8px; }
}


/* =========================================================
   RESTRO VUE 3 MOBILE SHELL
   Only visible at <= 800px.
   ========================================================= */
#mobileVueApp { display:none; }

@media (max-width:800px) {
  #mobileVueApp {
    display:block;
    position:relative;
    z-index:6000;
  }

  .rv-mobile-shell { position:relative; }

  .rv-mobile-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:62px;
    z-index:6100;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    background:var(--ui-surface,#fff);
    border-bottom:1px solid var(--ui-border,#d8e0e9);
    box-shadow:0 2px 12px rgba(0,0,0,.08);
  }

  .rv-menu-button,
  .rv-refresh {
    width:44px;
    height:44px;
    min-width:44px;
    border:1px solid var(--ui-border,#d8e0e9);
    border-radius:12px;
    background:var(--ui-surface,#fff);
    color:var(--ui-text,#263241);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    cursor:pointer;
  }

  .rv-mobile-title {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.05;
    overflow:hidden;
  }
  .rv-mobile-title strong {
    font-size:15px;
    letter-spacing:.8px;
  }
  .rv-mobile-title span {
    margin-top:4px;
    font-size:12px;
    color:var(--ui-text-2,#657181);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Leave room for the fixed Vue mobile header and bottom navigation. */
  .rv-desktop-shell {
    padding-top:62px !important;
    padding-bottom:66px !important;
  }

  .rv-backdrop {
    position:fixed;
    inset:0;
    z-index:6200;
    background:rgba(15,23,34,.42);
  }

  .rv-drawer {
    width:min(84vw,320px);
    height:100dvh;
    overflow-y:auto;
    background:var(--ui-surface,#fff);
    box-shadow:18px 0 50px rgba(0,0,0,.28);
    padding:18px 14px;
    display:flex;
    flex-direction:column;
  }

  .rv-brand {
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 5px 18px;
  }
  .rv-brand > div:last-child {
    display:flex;
    flex-direction:column;
  }
  .rv-brand small {
    margin-top:3px;
    font-size:10px;
    letter-spacing:1px;
    color:var(--ui-text-2,#657181);
  }
  .rv-logo {
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:var(--ui-accent,#e7a54f);
    color:#1b1e23;
    font-weight:900;
    font-size:21px;
  }

  .rv-connection {
    margin:0 3px 12px;
    padding:10px 11px;
    border-radius:10px;
    background:var(--ui-surface-soft,#f4f6f9);
    color:var(--ui-text-2,#657181);
    font-size:11px;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .rv-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
    background:#aaa;
  }
  .rv-dot.online { background:#22a06b; }
  .rv-dot.offline { background:#d14c4c; }

  .rv-nav { display:flex; flex-direction:column; gap:4px; }
  .rv-nav-item {
    width:100%;
    min-height:46px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--ui-text-2,#657181);
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    text-align:left;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
  }
  .rv-nav-item.active {
    background:#fff3d7;
    color:#1b1e23;
    box-shadow:inset 3px 0 var(--ui-accent,#e7a54f);
  }
  .rv-nav-icon {
    width:25px;
    text-align:center;
    font-size:18px;
  }

  .rv-drawer-bottom {
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--ui-border,#d8e0e9);
  }
  .rv-user {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 5px 12px;
  }
  .rv-user > div:last-child {
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  .rv-user small {
    margin-top:2px;
    color:var(--ui-text-2,#657181);
  }
  .rv-avatar {
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#273241;
    color:#fff;
    font-weight:800;
  }
  .rv-logout {
    width:100%;
    min-height:44px;
    border:1px solid rgba(210,70,70,.35);
    border-radius:10px;
    background:transparent;
    color:#c23f3f;
    font-weight:700;
  }

  .rv-bottom-nav {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:6100;
    height:64px;
    display:flex;
    background:var(--ui-surface,#fff);
    border-top:1px solid var(--ui-border,#d8e0e9);
    box-shadow:0 -3px 14px rgba(0,0,0,.08);
    padding:4px 2px;
  }
  .rv-bottom-nav button {
    flex:1;
    min-width:0;
    border:0;
    background:transparent;
    color:var(--ui-text-2,#657181);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:9px;
    font-size:18px;
  }
  .rv-bottom-nav button small {
    font-size:9px;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .rv-bottom-nav button.active {
    color:#9a6900;
    background:#fff4dc;
  }

  html[data-theme="dark"] .rv-nav-item.active,
  html[data-theme="dark"] .rv-bottom-nav button.active {
    background:#202b39;
    color:#fff;
  }

  /* Existing desktop sidebar should not occupy mobile screen. */
  .rv-desktop-shell .sidebar {
    visibility:hidden;
  }

  /* Existing topbar is hidden because Vue provides the mobile header. */
  .rv-desktop-shell > .topbar { display:none !important; }

  @media (max-width:380px) {
    .rv-mobile-header { height:58px; }
    .rv-desktop-shell { padding-top:58px !important; }
    .rv-bottom-nav { height:60px; }
    .rv-desktop-shell { padding-bottom:62px !important; }
    .rv-menu-button,.rv-refresh { width:42px; min-width:42px; height:42px; }
  }
}

/* ============================================================
   RESTRO 2026 — DASHBOARD REBUILD / NOTIFICATIONS / ANALYTICS
   ============================================================ */
.dashboard-hero{position:relative;min-height:145px;border:1px solid #eadfc9;border-radius:18px;overflow:hidden;margin-bottom:18px;background:linear-gradient(100deg,#fff7e9 0%,#fffaf1 52%,#f5e8d0 100%);box-shadow:0 8px 24px rgba(22,34,48,.06);display:flex;align-items:center}
.dashboard-hero-copy{position:relative;z-index:2;padding:20px 34px;max-width:58%}
.dashboard-hero-copy h1{font-size:28px;line-height:1.05;margin:3px 0 6px;color:#152034;letter-spacing:-.8px}
.dashboard-hero-copy p{margin:0 0 12px;color:#657181;font-size:14px}.hero-eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#b27a12}.dashboard-hero-copy .primary{padding:9px 16px;border-radius:9px}
.dashboard-hero-art{position:absolute;right:0;top:0;width:58%;height:100%;background-image:linear-gradient(90deg,rgba(255,247,233,1) 0%,rgba(255,247,233,.5) 16%,rgba(255,247,233,0) 38%),url('https://images.unsplash.com/photo-1755090154823-2832067d402b?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=78&w=1600');background-size:cover;background-position:center 52%}
.dashboard-hero-art:after{content:"Delicious Food\A Brighter Days!";white-space:pre;position:absolute;right:28px;top:25px;font-family:cursive;font-size:22px;line-height:1.05;color:#24201a;transform:rotate(-5deg)}
.notification-btn{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid #d6dee8;background:#fff;color:#263241;display:grid;place-items:center;cursor:pointer;font-size:20px}.notification-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(20,30,45,.08)}.notification-bell{font-size:20px;line-height:1}.notification-btn em{position:absolute;right:2px;top:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#ef4451;color:#fff;border:2px solid #fff;font-size:9px;font-style:normal;font-weight:800;display:grid;place-items:center}.notification-btn em.hidden{display:none}
.notification-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:10px}.notification-modal-head h2{margin:0}.notification-list{display:grid;gap:7px}.notification-item{width:100%;display:grid;grid-template-columns:12px 1fr;text-align:left;gap:11px;border:1px solid var(--ui-border,#dbe3ec);background:var(--ui-surface-soft,#f8fafc);padding:11px;border-radius:11px;color:inherit;cursor:pointer}.notification-item:hover{border-color:#f0ad36}.notification-item.read{opacity:.62}.notification-item b,.notification-item small,.notification-item time{display:block}.notification-item b{font-size:14px}.notification-item small{font-size:12px;color:var(--ui-muted,#6b7788);margin-top:2px}.notification-item time{font-size:10px;color:#9aa5b3;margin-top:5px}.notification-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;background:#f4b642}.notification-dot.low-stock{background:#ef5350}.notification-dot.kitchen-complete{background:#20ad73}.notification-dot{display:block}
.big-chart{height:300px}.big-chart svg .sales-bar{fill:#f5b83f;opacity:.86}.big-chart svg .orders-line{stroke:#2786df;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.big-chart svg .order-dot{fill:#2786df;stroke:#fff;stroke-width:2}.big-chart svg text{font-size:11px}.big-chart svg .axis-title{font-size:10px;font-weight:700;fill:#677487}.big-chart svg line{stroke:#dfe5ec;stroke-width:1}
.top-items-panel .dashboard-table td:first-child{width:35px}.top-item-cell{display:flex;align-items:center;gap:9px}.top-item-photo{width:34px;height:34px;object-fit:cover;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.hero-kpi{transition:transform .18s ease,box-shadow .18s ease}.hero-kpi:hover{transform:translateY(-2px)}
html[data-theme="dark"] .dashboard-hero{background:#151b24;border-color:#293747}.dashboard-hero-copy h1{color:#f5f7fb}.dashboard-hero-copy p{color:#a6b1bf}.dashboard-hero-art{background-image:linear-gradient(90deg,rgba(21,27,36,1) 0%,rgba(21,27,36,.65) 16%,rgba(21,27,36,0) 42%),url('https://images.unsplash.com/photo-1755090154823-2832067d402b?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=78&w=1600')}.dashboard-hero-art:after{color:#fff}.notification-btn{background:var(--ui-surface,#fff);border-color:var(--ui-border,#dbe3ec);color:var(--ui-text,#263241)}.notification-btn em{border-color:var(--ui-surface,#fff)}
@media(max-width:900px){.dashboard-hero-copy{max-width:70%;padding:18px 22px}.dashboard-hero-copy h1{font-size:24px}.dashboard-hero-art{width:64%}.dashboard-hero-art:after{display:none}}
@media(max-width:560px){.dashboard-hero{min-height:185px}.dashboard-hero-copy{max-width:82%;padding:18px}.dashboard-hero-art{width:72%;opacity:.55}.dashboard-hero-copy h1{font-size:23px}.dashboard-hero-copy p{font-size:12px}.notification-btn{width:38px;height:38px}.big-chart{height:270px}}

/* Direct Bill */
.direct-bill-layout{display:grid;grid-template-columns:1.25fr .85fr;gap:15px;align-items:start}.direct-bill-entry{min-height:210px}.direct-item-row{display:grid;grid-template-columns:minmax(260px,1fr) 120px auto;gap:12px;align-items:end;margin-top:18px}.direct-item-row label{display:grid;gap:7px;color:#8792a2;font-size:10px;font-weight:700}.direct-item-row .search{width:100%;min-width:0}.direct-qty{height:37px;justify-content:space-between}.direct-qty button{height:35px;width:35px;font-size:18px}.direct-qty b{min-width:32px;text-align:center;line-height:35px;color:#fff}.direct-add{height:38px;white-space:nowrap}.direct-hint{margin-top:14px;color:#687486;font-size:10px}.direct-cart{position:sticky;top:100px}
html[data-theme="light"] .direct-qty b{color:#1d2733}
@media(max-width:800px){.direct-bill-layout{grid-template-columns:1fr}.direct-cart{position:static}.direct-item-row{grid-template-columns:1fr 110px}.direct-add{grid-column:1/-1}}
@media(max-width:480px){.direct-item-row{grid-template-columns:1fr}.direct-add{grid-column:auto}}

/* Menu management upgrades */
.menu-toolbar{justify-content:space-between;gap:12px;flex-wrap:wrap}.menu-actions{display:flex;gap:8px;flex-wrap:wrap}.menu-thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;border:1px solid var(--line,#2b3a4a);display:block}.menu-thumb-empty{display:grid;place-items:center;color:#718096;background:rgba(255,255,255,.025)}.counter-badge{display:inline-flex;padding:5px 9px;border-radius:999px;border:1px solid var(--line,#2b3a4a);font-size:12px}.menu-row-actions{white-space:nowrap}.danger-link{color:#ff6b6b!important}.menu-image-field small{display:block;margin-top:6px;color:#7f8b9a;font-weight:400}.menu-image-preview-wrap{display:flex;align-items:center;gap:12px}.menu-image-preview{width:112px;height:82px;border:1px dashed var(--line,#344455);border-radius:10px;display:grid;place-items:center;overflow:hidden;color:#778394}.menu-image-preview img{width:100%;height:100%;object-fit:cover}.form-grid select{width:100%;min-height:46px;background:transparent;color:inherit;border:1px solid var(--line,#344455);border-radius:8px;padding:0 12px}.form-grid select option{background:#111a24;color:#fff}@media(max-width:760px){.menu-toolbar .search{width:100%}.menu-actions{width:100%}.menu-actions button{flex:1}.table-panel{overflow-x:auto}.menu-row-actions{min-width:190px}}


/* Granular role permission matrix */
.permission-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.permission-matrix{display:grid;gap:10px;max-height:420px;overflow:auto;padding-right:4px}
.permission-module{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--panel2,#0d151f)}
.permission-module-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.permission-module-head label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.permission-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 12px}
.permission-actions label{display:flex;align-items:center;gap:7px;font-size:13px}
.permission-actions input,.permission-module-head input{accent-color:#f7b63b}

/* Warehouse inventory */
.warehouse-table{min-width:1120px!important}.warehouse-history{margin-top:16px}.warehouse-available{margin-top:8px;padding:11px 13px;border:1px solid var(--ui-border,#29313d);border-radius:9px;background:var(--ui-surface-soft,#0d1218);font-size:12px;color:var(--ui-muted,#8c97a6)}
/* Professional role/permission editor on desktop */
@media (min-width: 900px){.modal.modal-wide{width:min(1120px,94vw);max-width:1120px}.modal-wide .permission-actions{grid-template-columns:repeat(6,minmax(110px,1fr))!important;gap:10px 18px}.modal-wide .permission-module{padding:16px 18px}.modal-wide .permission-module-head{margin-bottom:12px}}

/* ===== FINAL THEME + COMPACT MENU IMAGE POLISH ===== */
html[data-theme="light"]{
  --ui-bg:#f5f7fa;--ui-surface:#ffffff;--ui-surface-soft:#f7f9fc;--ui-border:#d9e1ea;
  --ui-text:#182230;--ui-text-2:#344256;--ui-muted:#6f7d90;--ui-accent:#f4ae32;--ui-accent-hover:#c77a00;
}
html[data-theme="dark"]{
  --ui-bg:#080c12;--ui-surface:#10161f;--ui-surface-soft:#151d28;--ui-border:#293747;
  --ui-text:#f4f7fb;--ui-text-2:#c6d0dc;--ui-muted:#9aa7b7;--ui-accent:#f4b642;--ui-accent-hover:#ffc85b;
}
body,.main,.content{background:var(--ui-bg)!important;color:var(--ui-text)!important}
.panel,.modal,.product,.recipe-card,.table-card,.kot,.cart,.menu-browser,.warehouse-available,.role-permission-box,.role-row,.user-row{
  background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;
}
input,select,textarea,.search,.btn,.seg button,.cat{
  background:var(--ui-surface-soft)!important;color:var(--ui-text)!important;border-color:var(--ui-border)!important;
}
input::placeholder,textarea::placeholder{color:var(--ui-muted)!important}
th,td{border-color:var(--ui-border)!important} th,.muted,small{color:var(--ui-muted)!important}
.modal-backdrop{background:rgba(3,7,12,.68)!important}
html[data-theme="light"] .modal-backdrop{background:rgba(28,39,54,.32)!important}

/* Images never change the card height. */
.product{display:flex!important;align-items:center!important;gap:12px!important;min-height:112px!important;height:112px!important;overflow:hidden!important;text-align:left!important}
.product-thumb{width:82px!important;height:82px!important;flex:0 0 82px!important;object-fit:cover!important;border-radius:10px!important;border:1px solid var(--ui-border)!important}
.product-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.product-copy span,.product-copy b,.product-copy strong,.product-copy em{display:block}
.product-copy b{margin:5px 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.recipe-grid{align-items:stretch!important}
.recipe-card{display:flex!important;align-items:center!important;gap:13px!important;height:125px!important;min-height:125px!important;max-height:125px!important;overflow:hidden!important;text-align:left!important}
.recipe-thumb{width:92px!important;height:92px!important;flex:0 0 92px!important;object-fit:cover!important;border-radius:10px!important;border:1px solid var(--ui-border)!important}
.recipe-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.recipe-copy b,.recipe-copy small,.recipe-copy span{display:block}
.recipe-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Warehouse tables/modals follow theme. */
.warehouse-table,.warehouse-history,.warehouse-history table{background:var(--ui-surface)!important;color:var(--ui-text)!important}
.warehouse-available{padding:12px 14px;border:1px solid var(--ui-border);border-radius:9px;color:var(--ui-text-2)!important}

@media(max-width:700px){
  .product{height:auto!important;min-height:105px!important}.product-thumb{width:68px!important;height:68px!important;flex-basis:68px!important}
  .recipe-card{height:112px!important;min-height:112px!important;max-height:112px!important}.recipe-thumb{width:76px!important;height:76px!important;flex-basis:76px!important}
}

/* ===== LIGHT THEME CONSISTENCY PATCH ===== */
/* Permission matrix must inherit the active theme instead of using dark fallbacks. */
.permission-module{
  background:var(--ui-surface-soft)!important;
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
}
.permission-module-head strong,.permission-actions label,.permission-title strong{color:var(--ui-text)!important}
.permission-module-head label,.permission-title span{color:var(--ui-muted)!important}
.permission-actions input,.permission-module-head input{accent-color:var(--ui-accent)!important}
html[data-theme="light"] .permission-module{box-shadow:0 1px 2px rgba(15,23,42,.025)}
html[data-theme="light"] .permission-matrix{scrollbar-color:#aeb8c4 #edf1f5}
html[data-theme="dark"] .permission-matrix{scrollbar-color:#596474 #111923}

/* Select dropdown menus should also match the current theme. */
html[data-theme="light"] select option,html[data-theme="light"] .form-grid select option{background:#fff!important;color:#182230!important}
html[data-theme="dark"] select option,html[data-theme="dark"] .form-grid select option{background:#111a24!important;color:#f4f7fb!important}

/* Fix dashboard hero rules that previously leaked dark-theme colors into light mode. */
html[data-theme="light"] .dashboard-hero{
  background:linear-gradient(100deg,#fff8ec 0%,#fffaf4 52%,#f8ecd8 100%)!important;
  border-color:#eadfc9!important;
  box-shadow:0 8px 24px rgba(22,34,48,.06)!important;
}
html[data-theme="light"] .dashboard-hero-copy h1{color:#152034!important}
html[data-theme="light"] .dashboard-hero-copy p{color:#657181!important}
html[data-theme="light"] .hero-eyebrow{color:#a96e08!important}
html[data-theme="light"] .dashboard-hero-art{
  background-image:linear-gradient(90deg,rgba(255,248,236,1) 0%,rgba(255,248,236,.55) 16%,rgba(255,248,236,0) 40%),url('https://images.unsplash.com/photo-1755090154823-2832067d402b?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=78&w=1600')!important;
}
html[data-theme="light"] .dashboard-hero-art:after{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.5)}
html[data-theme="dark"] .dashboard-hero{background:#151b24!important;border-color:#293747!important;box-shadow:0 12px 34px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .dashboard-hero-copy h1{color:#f5f7fb!important}
html[data-theme="dark"] .dashboard-hero-copy p{color:#a6b1bf!important}
html[data-theme="dark"] .hero-eyebrow{color:#f4bd4f!important}
html[data-theme="dark"] .dashboard-hero-art{background-image:linear-gradient(90deg,rgba(21,27,36,1) 0%,rgba(21,27,36,.65) 16%,rgba(21,27,36,0) 42%),url('https://images.unsplash.com/photo-1755090154823-2832067d402b?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=78&w=1600')!important}
html[data-theme="dark"] .dashboard-hero-art:after{color:#fff!important}

/* General light surfaces and secondary controls. */
html[data-theme="light"] .seg,html[data-theme="light"] .quick-grid button,html[data-theme="light"] .note,html[data-theme="light"] .kot header>span,html[data-theme="light"] .step{
  background:var(--ui-surface-soft)!important;color:var(--ui-text-2)!important;border-color:var(--ui-border)!important;
}
html[data-theme="light"] .seg button.on{background:#e9eef4!important;color:#182230!important}
html[data-theme="light"] .totals{border-color:var(--ui-border)!important}
html[data-theme="light"] .totals>div{color:var(--ui-muted)!important}
html[data-theme="light"] .totals .grand{color:var(--ui-text)!important}
html[data-theme="light"] .direct-qty b,html[data-theme="light"] .step b{color:var(--ui-text)!important}
html[data-theme="light"] .cart-item,html[data-theme="light"] .rank,html[data-theme="light"] .stock-row,html[data-theme="light"] .sale-row,html[data-theme="light"] .kot li{border-color:var(--ui-border)!important}

/* Tables, settings cards and management rows. */
html[data-theme="light"] table{background:var(--ui-surface)!important;color:var(--ui-text)!important}
html[data-theme="light"] th{background:#eef2f6!important;color:#5f6d7e!important}
html[data-theme="light"] td{color:var(--ui-text-2)!important}
html[data-theme="light"] .role-row,html[data-theme="light"] .user-row{box-shadow:0 1px 2px rgba(15,23,42,.03)}

/* Keep primary actions brand-colored in both themes after generic control overrides. */
.primary,.icon-btn.primary,button.primary{background:var(--ui-accent)!important;color:#17120a!important;border-color:var(--ui-accent)!important}
.primary:hover,.icon-btn.primary:hover,button.primary:hover{filter:brightness(.98)}

/* POS item card: details on left, optional image on right */
.product{
  flex-direction:row-reverse!important;
  justify-content:space-between!important;
  align-items:center!important;
}
.product-copy{
  flex:1 1 auto!important;
  min-width:0!important;
  align-self:stretch!important;
  justify-content:center!important;
}
.product-thumb{
  margin-left:auto!important;
  flex:0 0 82px!important;
  width:82px!important;
  height:82px!important;
  object-fit:cover!important;
  object-position:center!important;
}
@media(max-width:480px){
  .product-thumb{width:64px!important;height:64px!important;flex-basis:64px!important}
  .product-copy b{font-size:13px!important}
  .product-copy strong{font-size:13px!important}
}

/* Add Table / Room Service / Other service-point card */
.add-service-card{
  border-style:dashed!important;
  border-width:2px!important;
  background:color-mix(in srgb,var(--ui-surface) 92%,var(--ui-accent,#e7a54f) 8%)!important;
}
.add-service-card strong{color:var(--ui-accent,#e7a54f)!important;font-size:52px!important;line-height:.9!important}
.add-service-card:hover{border-color:var(--ui-accent,#e7a54f)!important;transform:translateY(-2px)}
.add-service-card em{color:var(--ui-accent,#e7a54f)!important}
.service-point-name{max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme="light"] .add-service-card{background:#fffaf0!important;border-color:#e7a54f!important}
html[data-theme="dark"] .add-service-card{background:#151b23!important}

/* Purchase module */
.purchase-toolbar{align-items:stretch!important;gap:14px!important;flex-wrap:wrap}
.purchase-new-card{min-width:260px;min-height:112px;border:2px dashed var(--ui-accent);border-radius:14px;background:color-mix(in srgb,var(--ui-surface) 94%,var(--ui-accent) 6%);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.18s ease;color:var(--ui-text)}
.purchase-new-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.purchase-new-card span{font-size:10px;letter-spacing:2px;color:var(--ui-muted)}
.purchase-new-card strong{font-size:38px;line-height:1;color:var(--ui-accent)}
.purchase-new-card small{color:var(--ui-muted)}
.purchase-filters{display:flex;gap:8px;align-items:center;flex:1;flex-wrap:wrap}
.purchase-filters .search{min-width:280px;flex:1}
.purchase-stock-note{margin-top:14px;padding:12px 14px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface-soft);color:var(--ui-text-2)}
.purchase-table{min-width:1180px}
html[data-theme="light"] .purchase-new-card{background:#fffaf0}
html[data-theme="dark"] .purchase-new-card{background:#151b23}
@media(max-width:800px){.purchase-new-card{width:100%}.purchase-filters .search{min-width:100%}}


/* Tables: manual selection / delete management */
.table-toolbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.manage-hint{margin:-5px 0 16px;padding:11px 14px;border:1px solid var(--ui-border,#dce3eb);border-radius:10px;background:var(--ui-surface,#fff);color:var(--ui-muted,#687587);font-size:12px}
.table-card.manage-mode{cursor:pointer;padding-top:28px}
.table-card.manage-mode:hover{border-color:#e7a54f!important}
.table-card.selected-for-delete{outline:2px solid #e7a54f;outline-offset:1px;background:color-mix(in srgb,var(--ui-surface,#fff) 92%,#e7a54f 8%)!important}
.table-select-check{position:absolute!important;top:12px!important;left:14px!important;display:flex!important;align-items:center;gap:7px;letter-spacing:0!important;font-size:11px!important;color:var(--ui-text,#263241)!important}
.table-select-check input{width:16px;height:16px;accent-color:#e7a54f;pointer-events:none}
.danger-delete{background:#c94f55!important;border-color:#c94f55!important;color:#fff!important}
.danger-delete:disabled{opacity:.45;cursor:not-allowed}
html[data-theme="dark"] .manage-hint{background:var(--ui-surface,#121922);color:var(--ui-muted,#9aa5b5)}
@media(max-width:800px){.table-toolbar-actions{width:100%}.table-toolbar-actions button{flex:1}}

/* VisionEzy sidebar branding */
.logo{gap:11px;padding-left:7px;padding-right:4px}
.logo-mark{width:42px;height:42px;padding:4px;border-radius:11px;background:var(--surface-2,#fff);border:1px solid var(--border,#252c37);overflow:hidden;flex:0 0 42px}
.logo-mark img{display:block;width:100%;height:100%;object-fit:contain;border-radius:7px}
.logo .brand-copy{min-width:0}
.logo .brand-copy b{font-size:14px;letter-spacing:.7px;white-space:nowrap}
.logo .brand-copy small{font-size:8px;letter-spacing:1.05px;white-space:nowrap}
[data-theme="light"] .logo-mark{background:#fff;border-color:#d7e0ea}
[data-theme="dark"] .logo-mark{background:#11161e;border-color:#252c37}


/* VisionEzy mobile navigation reliability + touch layout */
@media (max-width:800px){
  .rv-drawer{padding:14px 12px 12px;overflow:hidden!important}
  .rv-brand{flex:0 0 auto;padding-bottom:12px}
  .rv-logo{background:transparent!important;overflow:hidden}
  .rv-logo img{width:100%;height:100%;object-fit:contain;display:block}
  .rv-connection{flex:0 0 auto;margin-bottom:8px}
  .rv-nav{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 0 10px;overscroll-behavior:contain}
  .rv-nav-item{flex:0 0 auto;min-height:48px}
  .rv-drawer-bottom{flex:0 0 auto;margin-top:0;background:var(--ui-surface,#fff);padding-top:10px}
  .rv-desktop-shell .sidebar{visibility:hidden!important;pointer-events:none!important}
  .rv-desktop-shell .main{margin-left:0!important;width:100%!important;max-width:100%!important}
  #view{max-width:100%;overflow-x:hidden}
  .panel,.kpi,.hero-kpi,.cart,.purchase-new-card{max-width:100%;min-width:0}
  input,select,textarea{max-width:100%}
}
@media (max-width:480px){
  .rv-drawer{width:min(90vw,340px)}
  .rv-nav-item{font-size:14px;min-height:46px}
  .rv-bottom-nav button small{font-size:8px}
}

/* VisionEzy login branding */
.login-brand .logo-mark{overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff}
.login-brand .logo-mark img{width:100%;height:100%;object-fit:contain;padding:5px;display:block}
.login-brand h1{letter-spacing:.2px}

/* Direct Bill menu + split payment */
.direct-bill-menu-layout .menu-browser{min-width:0}
.split-payment-fields{grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;padding:12px;border:1px solid var(--ui-border,#29313d);border-radius:10px;background:var(--ui-surface-soft,#0d1218)}
.split-payment-fields label{font-size:11px;color:var(--ui-muted,#8792a2);font-weight:700}
.split-payment-fields input{width:100%;margin-top:6px;padding:10px;border:1px solid var(--ui-border,#29313d);border-radius:8px;background:var(--ui-surface,#121821);color:var(--ui-text,#fff)}
.split-payment-fields small{grid-column:1/-1;color:var(--ui-muted,#8792a2)}
@media(max-width:600px){.split-payment-fields{grid-template-columns:1fr}.split-payment-fields small{grid-column:1}.direct-bill-menu-layout .product-grid{grid-template-columns:1fr 1fr!important}}


/* ===== Accounts module ===== */
.nav-group{display:block}.nav-group .nav{width:100%}.nav-chevron{margin-left:auto;font-size:13px;transition:transform .2s}.accounts-nav-group.open .nav-chevron{transform:rotate(180deg)}
.nav-submenu{display:none;margin:2px 0 8px 34px;padding-left:10px;border-left:1px solid var(--ui-border,#dce3eb)}.accounts-nav-group.open .nav-submenu{display:grid;gap:2px}.nav-submenu button{border:0;background:transparent;color:var(--ui-muted,#687587);text-align:left;padding:8px 10px;border-radius:8px;font:inherit;font-size:12px;cursor:pointer}.nav-submenu button:hover{background:var(--ui-soft,#f4f7fa);color:var(--ui-text,#172335)}
.account-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;padding:6px;background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#dce3eb);border-radius:14px;width:max-content;max-width:100%}.account-tabs button{border:0;background:transparent;padding:10px 18px;border-radius:10px;font:inherit;cursor:pointer;color:var(--ui-muted,#687587)}.account-tabs button.active{background:#f6ad2f;color:#201506;font-weight:700}.account-tabs+ #accountBody{min-width:0}
#accountBody .toolbar{margin-bottom:16px}#accountBody table small{display:block;margin-top:3px;color:var(--ui-muted,#687587)}
@media(max-width:800px){.account-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}.account-tabs button{white-space:nowrap;flex:1}.nav-submenu{margin-left:24px}.accounts-nav-group.open .nav-submenu{display:grid}.account-tabs+#accountBody .toolbar{display:grid;gap:10px}.account-tabs+#accountBody .toolbar .search{width:100%;max-width:none}}

/* =========================================================
   CENTRAL ITEM MASTER / SEARCHABLE ITEM SELECTOR
   ========================================================= */
.form-span-2{grid-column:1/-1}
.item-selector{position:relative;width:100%}
.item-selector-input-wrap{position:relative}
.item-selector-input{width:100%;padding-right:34px!important}
.item-selector-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted,#6f7885);font-size:20px;line-height:1;cursor:pointer;padding:3px 5px}
.item-selector-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:10000;background:var(--panel,#fff);border:1px solid var(--line,#dce1e7);border-radius:10px;box-shadow:0 18px 40px rgba(15,23,42,.18);overflow:hidden;min-width:320px}
.item-selector-menu.open{display:block}
.item-selector-results{max-height:280px;overflow:auto;padding:6px}
.item-selector-option{display:flex;width:100%;flex-direction:column;gap:3px;text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 10px;cursor:pointer;color:inherit}
.item-selector-option:hover,.item-selector-option.active{background:rgba(188,139,30,.11)}
.item-selector-option span{font-size:13px}.item-selector-option small{font-size:11px;color:var(--muted,#6f7885)}
.item-selector-empty{padding:16px 12px;text-align:center;color:var(--muted,#6f7885);font-size:12px}
.item-selector-create{width:100%;border:0;border-top:1px solid var(--line,#dce1e7);background:rgba(188,139,30,.08);padding:11px 12px;text-align:left;font-weight:700;cursor:pointer;color:var(--accent,#a77412)}
.item-selector-create:hover{background:rgba(188,139,30,.14)}
.item-selection-details{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 12px;background:rgba(148,163,184,.09);border:1px solid var(--line,#e3e7ec);border-radius:8px;font-size:12px;color:var(--muted,#5f6875)}
.item-master-toolbar{align-items:flex-end;gap:12px}
.item-master-filters{display:flex;gap:8px;flex:1;min-width:0}
.item-master-filters .search{min-width:240px;flex:1}
.inventory-actions{display:flex;gap:8px;flex-wrap:wrap}
.item-master-table th[data-sort]{cursor:pointer;user-select:none}
.item-master-table th[data-sort]:hover{text-decoration:underline}
.item-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line,#e5e7eb);font-size:12px;color:var(--muted,#6b7280)}
.item-pagination>div{display:flex;align-items:center;gap:10px}
.item-view-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.item-view-grid>div{border:1px solid var(--line,#e5e7eb);border-radius:9px;padding:11px;display:flex;flex-direction:column;gap:4px}
.item-view-grid span{font-size:11px;color:var(--muted,#6b7280)}
.item-master-form textarea{width:100%;resize:vertical}
.recipe-line .item-selector{flex:1;min-width:260px}
.recipe-line .recipe-qty{max-width:120px}

@media (max-width:800px){
  .item-master-toolbar{align-items:stretch}.item-master-filters{flex-direction:column}.item-master-filters .search{min-width:0;width:100%}.inventory-actions{display:grid;grid-template-columns:1fr 1fr}.inventory-actions .primary{grid-column:1/-1}.item-selector-menu{min-width:0}.item-view-grid{grid-template-columns:1fr}.item-pagination{align-items:flex-start;flex-direction:column}.recipe-line{align-items:stretch;flex-direction:column}.recipe-line .item-selector,.recipe-line .recipe-qty{min-width:0;max-width:none;width:100%}}

/* =========================================================
   ERP ACCOUNTING / SUPPLIER / MULTI-ITEM PURCHASE
   ========================================================= */
.supplier-selector{position:relative;margin-top:6px}.supplier-selector .item-selector-input-wrap{position:relative}.supplier-selector-input{padding-right:38px!important}.supplier-selector-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--ui-muted,#7c8797);font-size:19px;line-height:1}.supplier-selector-menu{display:none;position:absolute;z-index:95;left:0;right:0;top:calc(100% + 5px);max-height:330px;overflow:auto;background:var(--ui-surface,#121821);border:1px solid var(--ui-border,#2a3441);border-radius:11px;box-shadow:0 18px 45px #0005;padding:6px}.supplier-selector-menu.open{display:block}.supplier-selector-option,.supplier-selector-create{width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:10px 11px;border-radius:8px;display:block}.supplier-selector-option:hover,.supplier-selector-option.active{background:rgba(231,165,79,.12)}.supplier-selector-option span,.supplier-selector-option small{display:block}.supplier-selector-option small{margin-top:4px;color:var(--ui-muted,#758091);font-size:10px}.supplier-selector-create{border-top:1px solid var(--ui-border,#2a3441);border-radius:0;color:#e7a54f;font-weight:800;margin-top:5px}.supplier-master-filters{display:flex;gap:8px;align-items:center}.supplier-master-filters select{min-height:38px}.supplier-master-form textarea{width:100%;margin-top:6px;background:var(--ui-bg,#0d1218);color:inherit;border:1px solid var(--ui-border,#29313d);border-radius:8px;padding:9px}.supplier-ledger-view .panel{margin-top:16px}.purchase-document-form{min-width:0}.purchase-head-fields{margin-bottom:18px}.purchase-lines-head,.purchase-item-row{display:grid;grid-template-columns:minmax(230px,2.3fr) 78px 74px 90px 78px 90px 78px 92px 105px 62px;gap:7px;align-items:center}.purchase-lines-head{padding:0 4px 8px;color:var(--ui-muted,#697486);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}.purchase-item-row{padding:9px 0;border-top:1px solid var(--ui-border,#252d38)}.purchase-item-row input{width:100%;background:var(--ui-bg,#0d1218);color:inherit;border:1px solid var(--ui-border,#29313d);border-radius:8px;padding:9px}.purchase-item-selector .item-selector{margin:0}.purchase-totals-grid{margin:18px 0 0 auto;max-width:760px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.purchase-totals-grid label{font-size:10px;color:var(--ui-muted,#8792a2);font-weight:700}.purchase-totals-grid input{width:100%;margin-top:5px;background:var(--ui-bg,#0d1218);color:inherit;border:1px solid var(--ui-border,#29313d);border-radius:8px;padding:9px}.purchase-stock-note{margin-top:15px;border:1px dashed #8d6b36;background:rgba(231,165,79,.08);padding:11px 13px;border-radius:9px;font-size:11px}.purchase-view-totals{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:16px}.purchase-view-totals span{border:1px solid var(--ui-border,#29313d);border-radius:9px;padding:9px 11px;font-size:10px}.purchase-view-totals b{display:block;margin-top:3px;font-size:12px}.payment-allocation-panel{padding:0;margin-top:8px;overflow:hidden}.payment-allocation-panel .panel-head{padding:14px 16px;margin:0}.payment-allocation-row{display:grid;grid-template-columns:24px 1fr 110px 120px;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--ui-border,#252d38)}.payment-allocation-row>span b,.payment-allocation-row>span small{display:block}.payment-allocation-row>span small{font-size:9px;color:var(--ui-muted,#697486);margin-top:3px}.payment-allocation-row>input[type=number]{width:100%;background:var(--ui-bg,#0d1218);color:inherit;border:1px solid var(--ui-border,#29313d);border-radius:8px;padding:8px}.payment-allocation-summary{display:flex;justify-content:flex-end;gap:18px;padding-top:12px}.payment-allocation-summary span{font-size:11px}.payment-allocation-summary b{margin-left:5px}.danger-link{color:#ef6c6c!important}
@media(max-width:900px){.supplier-master-filters{width:100%;flex-wrap:wrap}.supplier-master-filters .search{flex:1;min-width:180px}.purchase-lines-head{display:none}.purchase-item-row{grid-template-columns:1fr 1fr;gap:8px;padding:14px 0}.purchase-item-selector{grid-column:1/-1}.purchase-item-row .pur-remove-row{grid-column:1/-1;justify-self:end}.purchase-totals-grid{grid-template-columns:1fr 1fr}.payment-allocation-row{grid-template-columns:24px 1fr}.payment-allocation-row>strong,.payment-allocation-row>input[type=number]{grid-column:2}.supplier-master-form .form-grid,.payment-entry-form .form-grid,.receipt-entry-form .form-grid{grid-template-columns:1fr}.supplier-master-form .form-span-2,.payment-entry-form .form-span-2,.receipt-entry-form .form-span-2{grid-column:auto}}

/* UOM master controls */
.field-help{display:block;margin-top:4px;font-size:9px;color:var(--ui-muted,#7c8797);font-weight:500}.purchase-item-row select.pur-line-unit{width:100%;min-width:0;background:var(--ui-bg,#0d1218);color:inherit;border:1px solid var(--ui-border,#29313d);border-radius:8px;padding:9px 6px}.item-master-form select#imUnit{width:100%}

/* ===== Multi-item warehouse transfer + Warehouse Master ===== */
.transfer-head-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px;margin:14px 0 16px}.transfer-head-grid label{font-size:11px;font-weight:700;color:var(--ui-text,#273548)}.transfer-head-grid select,.transfer-head-grid input{width:100%;margin-top:6px}.transfer-lines-head,.transfer-item-row{display:grid;grid-template-columns:minmax(280px,2.4fr) 110px 140px 70px;gap:9px;align-items:center}.transfer-lines-head{padding:0 4px 7px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ui-muted,#697486)}.transfer-item-row{padding:9px 0;border-top:1px solid var(--ui-border,#dce3eb)}.transfer-item-row .transfer-qty{width:100%}.transfer-available{min-height:39px;display:flex;align-items:center;padding:8px 10px;border:1px solid var(--ui-border,#dce3eb);border-radius:8px;background:var(--ui-soft,#f6f8fa);font-size:11px;color:var(--ui-muted,#687587)}.transfer-summary{margin-top:10px;padding:9px 11px;border-radius:8px;background:rgba(231,165,79,.08);font-size:11px;color:var(--ui-muted,#687587)}.warehouse-manager-list{display:grid;gap:8px;max-height:300px;overflow:auto;margin:14px 0}.warehouse-manager-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--ui-border,#dce3eb);border-radius:9px;background:var(--ui-surface,#fff)}.warehouse-manager-row b,.warehouse-manager-row small{display:block}.warehouse-manager-row small{margin-top:3px;color:var(--ui-muted,#687587);font-size:9px}.warehouse-manager-row span{font-size:10px;color:var(--ui-muted,#687587)}.warehouse-create-box{display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;align-items:end;padding:12px;border:1px dashed #b78a3a;border-radius:10px;background:rgba(231,165,79,.06)}.warehouse-create-box label{font-size:10px;font-weight:700}.warehouse-create-box input{width:100%;margin-top:5px}
@media(max-width:800px){.transfer-head-grid{grid-template-columns:1fr}.transfer-lines-head{display:none}.transfer-item-row{grid-template-columns:1fr 1fr;padding:13px 0}.transfer-item-row>div:first-child{grid-column:1/-1}.transfer-item-row .transfer-remove{justify-self:end}.warehouse-create-box{grid-template-columns:1fr}.inventory-actions{grid-template-columns:1fr 1fr}.inventory-actions .primary{grid-column:1/-1}}

/* ===== Administrator security + warehouse manager ===== */
.warehouse-manager-actions{display:flex;align-items:center;gap:12px;justify-content:flex-end}.warehouse-manager-actions>span{font-size:12px;color:var(--muted,#67728a)}.warehouse-remove{min-width:78px}.warehouse-manager-row{gap:16px}.warehouse-manager-row>div:first-child{min-width:0}.warehouse-manager-row small{display:block;margin-top:4px}
.admin-control-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;margin-bottom:16px;border:1px solid #d9a52c;border-radius:12px;background:#fff9e9}.admin-control-banner b{display:block;font-size:14px}.admin-control-banner small{display:block;margin-top:5px;color:#687084}.admin-control-banner>span{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:#e8f7ef;color:#17683f}.admin-control-banner.locked{border-color:#e1b0b0;background:#fff3f3}.admin-control-banner.locked>span{background:#fde4e4;color:#a33131}
.admin-role-section{margin-top:18px}.admin-role-section h3{margin:0 0 10px}.admin-permission-table-wrap{overflow:auto;border:1px solid var(--border,#e1e6ee);border-radius:12px}.admin-permission-table,.admin-field-table{min-width:980px;margin:0}.admin-permission-table th,.admin-permission-table td,.admin-field-table th,.admin-field-table td{white-space:nowrap;text-align:center}.admin-permission-table th:first-child,.admin-permission-table td:first-child,.admin-field-table th:first-child,.admin-field-table td:first-child{text-align:left}.admin-permission-table input[type=checkbox],.admin-field-table input[type=checkbox]{width:17px;height:17px;accent-color:#d99a12}.admin-field-table input[type=text],.admin-field-table input:not([type]){min-width:150px}.admin-field-table input[type=number]{width:74px}.admin-field-selectors{margin-bottom:14px}.administrator-nav.hidden{display:none!important}
@media(max-width:800px){.admin-control-banner{align-items:flex-start;flex-direction:column}.warehouse-manager-actions{align-items:flex-end;flex-direction:column;gap:6px}.warehouse-manager-row{align-items:flex-start}}


/* ===== 2026-10-01 Accounts/KOT administrator UX ===== */
.account-overview-kpis .kpi small{display:block;margin-top:6px;color:var(--ui-muted,#687587);font-size:11px}
.account-payment-graph{overflow:hidden}.account-graph-legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--ui-muted,#687587)}.account-graph-legend span{display:flex;align-items:center;gap:6px}.account-graph-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}.pay-dot{background:#d99a22}.receive-dot{background:#2f7fb8}
.account-method-chart{height:220px;display:flex;align-items:flex-end;justify-content:space-around;gap:24px;padding:30px 28px 14px;border-top:1px solid var(--ui-border,#e3e8ef);background:linear-gradient(to top,rgba(127,139,154,.06) 1px,transparent 1px);background-size:100% 38px}.account-method-group{min-width:105px;text-align:center}.account-bar-pair{height:160px;display:flex;align-items:flex-end;justify-content:center;gap:10px}.account-bar{position:relative;width:34px;min-height:2px;border-radius:8px 8px 3px 3px;transition:height .25s ease}.account-bar span{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);font-size:10px;font-weight:700;white-space:nowrap;color:var(--ui-text,#172335)}.pay-bar{background:#d99a22}.receive-bar{background:#2f7fb8}.account-method-group>b{display:block;margin-top:8px;font-size:12px}
.kitchen-grid.kot-layout-list{display:grid;grid-template-columns:1fr!important}.kitchen-grid.kot-layout-list .kot{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(220px,1fr) auto;gap:14px;align-items:center}.kitchen-grid.kot-layout-list .kot header,.kitchen-grid.kot-layout-list .kot .kot-time,.kitchen-grid.kot-layout-list .kot .kot-actions{margin:0}.kitchen-grid.kot-layout-list .kot ul{margin:0}.kitchen-grid.kot-layout-compact{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:10px}.kitchen-grid.kot-layout-compact .kot{padding:12px}.kitchen-grid.kot-layout-compact .kot-time{font-size:10px}.kitchen-grid.order-kot-compact .kot .note{display:none}.kitchen-grid.order-kot-compact .kot li{padding:3px 0}.kitchen-grid.order-kot-compact .kot header small{display:none}
.admin-ui-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;align-items:end}.admin-ui-settings-grid label{display:grid;gap:6px;font-weight:700}.admin-ui-settings-grid select{min-height:44px}.admin-switch-row{grid-column:1/-1;display:flex!important;align-items:center;justify-content:space-between;padding:13px 14px;border:1px solid var(--ui-border,#dce3eb);border-radius:10px;background:var(--ui-soft,#f7f9fb)}.admin-switch-row span{display:grid;gap:3px}.admin-switch-row small{font-weight:400;color:var(--ui-muted,#687587)}.admin-switch-row input{width:20px;height:20px}
@media(max-width:800px){.account-method-chart{gap:10px;padding-left:10px;padding-right:10px}.account-method-group{min-width:72px}.account-bar{width:26px}.admin-ui-settings-grid{grid-template-columns:1fr}.kitchen-grid.kot-layout-list .kot{display:block}}

/* ================= Print Format Builder ================= */
.print-format-admin-panel .panel-head{align-items:center}.pfb-manager-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.pfb-manager-head h3{margin:0 0 4px}.pfb-manager-head p{margin:0;color:var(--muted,#667085)}.pfb-format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.pfb-format-card{border:1px solid var(--border,#d9e1ec);border-radius:14px;padding:16px;background:var(--card,#fff);display:flex;flex-direction:column;gap:12px}.pfb-format-card h4{margin:8px 0 4px}.pfb-format-card p{margin:0;color:var(--muted,#667085);font-size:12px}.pfb-card-actions{display:flex;gap:8px;flex-wrap:wrap}.pfb-new-card{max-width:850px;padding:8px}.pfb-shell{position:fixed;inset:0;z-index:9995;background:#eef2f7;display:flex;flex-direction:column}.pfb-toolbar{height:58px;background:#fff;border-bottom:1px solid #d8e0ea;display:flex;align-items:center;gap:8px;padding:8px 14px}.pfb-toolbar input{max-width:260px}.pfb-toolbar select{width:auto;min-width:110px}.pfb-grow{flex:1}.pfb-default-check{display:flex;align-items:center;gap:6px}.pfb-workspace{min-height:0;flex:1;display:grid;grid-template-columns:210px minmax(0,1fr) 290px}.pfb-components,.pfb-properties{background:#fff;padding:14px;overflow:auto}.pfb-components{border-right:1px solid #d8e0ea}.pfb-properties{border-left:1px solid #d8e0ea}.pfb-components h4,.pfb-properties h4{margin:0 0 12px}.pfb-components>button{width:100%;text-align:left;margin-bottom:7px;border:1px solid #d8e0ea;background:#f8fafc;border-radius:9px;padding:9px 10px;cursor:grab}.pfb-help{font-size:11px;color:#667085;margin-top:12px;line-height:1.5}.pfb-canvas-stage{overflow:auto;padding:28px;background:#e8edf3}.pfb-page-wrap{min-width:max-content}.pfb-page{position:relative;background:#fff;box-shadow:0 6px 24px #0f172a26;margin:auto;overflow:hidden;transform-origin:top left}.pfb-element{position:absolute;border:1px dashed transparent;cursor:move;overflow:visible}.pfb-element:hover{border-color:#94a3b8}.pfb-element.selected{outline:2px solid #f4a914;outline-offset:2px}.pfb-drag-handle{display:none;position:absolute;right:-8px;top:-8px;background:#f4a914;color:#111;border-radius:50%;width:18px;height:18px;align-items:center;justify-content:center;font-size:12px}.pfb-element.selected .pfb-drag-handle{display:flex}.pfb-properties label{display:block;font-size:11px;font-weight:600;margin:9px 0}.pfb-properties input,.pfb-properties select,.pfb-properties textarea{width:100%;margin-top:4px}.pfb-properties textarea{min-height:68px}.pfb-prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}.pfb-prop-grid label{margin:5px 0}.pfb-prop-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}.pfb-table-cols{border:1px solid #e2e8f0;border-radius:9px;padding:8px;margin:10px 0}.pfb-table-cols label{display:flex;align-items:center;gap:6px}.pfb-table-cols label input{width:auto;margin:0}.pf-live-table{width:100%;border-collapse:collapse}.pf-live-table th,.pf-live-table td{border:1px solid #cbd5e1;padding:4px}.pf-media-placeholder{height:100%;border:1px dashed #94a3b8;display:flex;align-items:center;justify-content:center;color:#94a3b8}.pf-qr-mark{font-size:42px;line-height:1;text-align:center}.pf-bar-mark{font-family:monospace;font-size:20px;letter-spacing:-2px;text-align:center}.pf-sign-line{margin-top:22px;border-top:1px solid #111;padding-top:4px}.pf-muted{color:#94a3b8}.pfb-history{padding:12px}.pfb-version-list{margin-top:16px;display:grid;gap:8px}.pfb-version-list>div{border:1px solid #d8e0ea;border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between}.pfb-version-list small{display:block;color:#667085;margin-top:3px}.pfb-loading{padding:32px;text-align:center;color:#667085}
@media(max-width:900px){.pfb-workspace{grid-template-columns:150px minmax(560px,1fr) 240px}.pfb-shell{overflow:auto}.pfb-toolbar{min-width:850px}.pfb-components,.pfb-properties{padding:10px}.pfb-format-grid{grid-template-columns:1fr}}