/* v3.5.0 interface overhaul — works after customer/admin theme without replacing branding tokens.
   Scope intentionally avoids receipts/print views and native content templates. */
:root{--ui-ease:180ms ease;--ui-focus:0 0 0 3px rgba(46,97,94,.18);--ui-card-shadow:0 5px 23px rgba(39,32,24,.055)}
html,body{max-width:100%}
:where(.admin-content,.admin-top,.pos-layout,.order-desk-shell,.kds-board-shell,.modal-card,.web-container){min-width:0}
:where(.admin-content,.admin-content .panel,.modal-card,.order-pane,.order-desk-detail) *{min-width:0}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) :is(p,h1,h2,h3,h4,label,strong,small){overflow-wrap:break-word}
:where(.admin-content,.modal-card,.order-pane,.web-container,.order-desk-shell) :is(input,select,textarea){min-width:0;max-width:100%;accent-color:var(--teal-dark,#2e615e)}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea){border:1px solid #c8c5bd;border-radius:10px;background-color:#fffdf8;color:#2b2824;font-size:14px;line-height:1.35;min-height:44px;padding:10px 13px;transition:border-color var(--ui-ease),box-shadow var(--ui-ease)}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) :is(input,textarea,select):focus-visible{outline:0;border-color:var(--teal-dark,#2e615e);box-shadow:var(--ui-focus)}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) :is(input,select,textarea):disabled{background:#f0eee7;color:#736c64;cursor:not-allowed}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) select:not([multiple]){padding-right:36px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b6560' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 12px center}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) textarea{min-height:96px;resize:vertical;line-height:1.5}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) :is(button,.btn){transition:background-color var(--ui-ease),border-color var(--ui-ease),box-shadow var(--ui-ease);line-height:1.25;max-width:100%;white-space:normal;overflow-wrap:break-word}
:where(.admin-content,.modal-card,.order-pane,.order-desk-shell,.web-container) :is(button,.btn):focus-visible{outline:3px solid var(--ochre,#d4a857);outline-offset:2px}
.btn{border-radius:10px;min-height:40px;gap:7px;box-shadow:none}
.btn.small{min-height:36px;padding:8px 12px;font-size:12px}
:where(.admin-content,.modal-card,.pos-layout,.order-desk-shell) .toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-width:0}
:where(.admin-content,.modal-card) .panel{box-shadow:var(--ui-card-shadow);border:1px solid #e0d6c4;border-radius:17px;padding:clamp(15px,1.3vw,24px)}
:where(.admin-content,.modal-card) .panel h2{font-size:clamp(19px,1.3vw,24px);letter-spacing:-.025em;line-height:1.2}
:where(.admin-content,.modal-card) .panel h3{font-size:16px;letter-spacing:-.012em}
:where(.admin-content,.modal-card) .panel-head{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
:where(.admin-content,.modal-card) .field{gap:7px;min-width:0}
:where(.admin-content,.modal-card) .field label{font-size:12px;text-transform:none;letter-spacing:.005em;font-weight:800;color:#52473c;line-height:1.35}
:where(.admin-content,.modal-card) :is(.form-grid,.settings-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;min-width:0}
:where(.admin-content,.modal-card) .field.full{grid-column:1/-1}
/* Cap vast single-field editors, while allowing paired fields to fill their grid tracks. */
.admin-content .panel>.field:not(.full){max-width:600px}
.admin-content .panel>.field>input:not([type=color]),.admin-content .panel>.field>textarea{width:100%;max-width:620px}
.admin-content .panel>.field>select{width:100%;max-width:450px}
.admin-content .settings-grid .field>select,.admin-content .form-grid .field>select{width:100%;max-width:420px}
.admin-content .field :is(input[type=number],input[type=time],input[type=date]){max-width:220px}
.admin-content .field :is(input[type=text],input[type=email],input[type=url]){width:100%}
.admin-content .field.full :is(input,textarea){max-width:680px}
.admin-content .field.full textarea{min-height:110px}
.admin-content .setting-toggle{border:1px solid #dcd2c0;border-radius:12px;padding:12px 14px;min-width:0;gap:12px;line-height:1.38;background:#fffdf7;font-size:13px}
.admin-content .setting-toggle input{flex:none}
/* Administration shell: wider links, scrolling sidebar, non-squeezed toolbars. */
.admin-shell{grid-template-columns:235px minmax(0,1fr);background:#f5f1e7}
.admin-side{height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:18px 12px;background:#263d37}
.admin-side .web-brand{padding:8px 9px 18px;margin-bottom:5px;border-bottom:1px solid #ffffff20;gap:10px}
.admin-side .web-brand div:last-child{font-size:13px;line-height:1.24;overflow-wrap:anywhere}
.admin-links{gap:5px;padding-bottom:18px}
.admin-links a{min-height:44px;display:flex;align-items:center;gap:5px;padding:10px 12px;font-size:12px;font-weight:750;border-radius:10px;color:#eae8de}
.admin-links a span{font-size:18px;flex:0 0 24px;text-align:center}
.admin-links a.active{background:#f7eed9!important;color:#243c35!important;border:0;border-left:4px solid #d2a153}
.admin-links a:hover:not(.active){background:#ffffff16}
.admin-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:13px clamp(16px,1.7vw,30px);min-height:78px;height:auto;background:#fffdf8;border-bottom:1px solid #e6dac7}
.admin-title-block{min-width:0;flex:1 1 170px}.admin-title-block h1{font-size:clamp(21px,1.65vw,28px);letter-spacing:-.03em;overflow-wrap:anywhere}
.admin-top .toolbar{justify-content:flex-end;flex:0 1 auto}
.admin-content{width:100%;padding:clamp(16px,1.7vw,30px);max-width:1900px;margin:0 auto}
.admin-grid2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px}
.admin-sections{gap:16px}
.admin-content .stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr));gap:14px}
.admin-content .stat-card{border-radius:14px;min-width:0;padding:17px}
/* Dense records: table scroll is intentional, fields inside remain bounded and legible. */
.admin-content .table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #e4ddcf;border-radius:12px;background:#fff}
.admin-content .data-table{min-width:760px;width:100%;font-size:12px;border-collapse:separate;border-spacing:0;table-layout:auto}
.admin-content .data-table :is(th,td){padding:12px 11px;border-bottom:1px solid #eee8dd;vertical-align:middle;overflow-wrap:normal}
.admin-content .data-table th{background:#f4f0e7;top:0;z-index:2;color:#4f504c;white-space:normal;font-size:10px}
.admin-content .data-table tr:hover td{background:#faf7ef}
.admin-content .data-table input:not([type=checkbox]):not([type=radio]),.admin-content .data-table select,.admin-content .data-table textarea{min-height:38px;padding:7px 9px;font-size:12px;border-radius:8px}
.admin-content .data-table :is(input[type=number],.price-input){width:108px;max-width:108px;min-width:80px}
.admin-content .data-table input:not([type=number]):not([type=checkbox]):not([type=radio]){min-width:130px;max-width:285px}
.admin-content .data-table select{min-width:138px;max-width:250px}
.admin-content .data-table textarea{width:220px;max-width:320px;min-height:56px}
.admin-content .data-table .toolbar{min-width:175px;align-items:center;justify-content:flex-start}
.admin-content .data-table .btn.small{padding:7px 10px;min-height:34px}
.admin-content .menu-cell{min-width:195px;gap:11px}
.admin-content .menu-cell img{width:54px;height:54px;flex:none}
.admin-content .menu-image-editor{min-width:135px}
.admin-content .option-editor,.admin-content .category-editor{min-width:0;max-width:100%}
.admin-content .option-row{grid-template-columns:minmax(120px,1fr) minmax(90px,110px) 42px;gap:10px}
.admin-content .option-editor.two .option-row{grid-template-columns:minmax(0,1fr) 42px}
.admin-content .option-row :is(input,select){width:100%;min-width:0}
.admin-content .visuals-grid{gap:16px}.admin-content .visuals-grid .panel{min-width:0}
.admin-content .visual-photo-grid{gap:14px}
.admin-content .visual-add-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.admin-content .visual-add-row select{flex:1 1 210px;min-width:0;max-width:450px}
.admin-content .visual-sticky-save{bottom:9px;gap:12px;flex-wrap:wrap;box-shadow:0 5px 25px #211a1026}
.admin-content .visual-sticky-save .btn{margin-left:auto}
.admin-content .flavor-photo-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px}
.admin-content .flavor-choice{grid-template-columns:62px minmax(0,1fr) auto;min-width:0;gap:8px}
.admin-content .flavor-choice img{width:62px;height:62px}
.admin-content .flavor-choice button{max-width:130px}
.admin-content .visual-product-row{gap:9px}
.admin-content .visual-row-actions{flex:none;flex-wrap:wrap;justify-content:flex-end}
/* Popups: scroll inside and keep actions reachable, no narrow sideways squeeze. */
.modal{padding:clamp(10px,2vw,25px);overscroll-behavior:contain}
.modal-card{width:min(900px,100%);max-height:calc(100dvh - 30px);overflow-x:hidden;overflow-y:auto;border-radius:17px;box-shadow:0 24px 85px #150f0b56}
.modal-head{padding:20px clamp(16px,2vw,28px) 8px;gap:12px}
.modal-head>div{flex:1;min-width:0}
.modal-head h2{font-size:clamp(20px,2.1vw,28px);line-height:1.18;max-width:100%}
.modal .close{flex:none;width:40px;height:40px;min-width:40px}
.modal-card .form-grid{gap:14px}
.modal-card .field>select{max-width:520px}
.modal-card .field>textarea{max-width:750px}
.modal-card .checkout-actions{flex-wrap:wrap;gap:12px}
.modal-card .choice-row{gap:9px}
.modal-card .choice span{font-size:12px;min-height:42px;display:grid;place-items:center}
/* POS: readable station-grade controls and guaranteed room for the active order. */
.pos-layout{grid-template-columns:minmax(0,1fr) clamp(340px,27vw,430px);grid-template-rows:auto minmax(0,1fr);gap:0;min-width:0}
.pos-cats{min-width:0;padding:14px 10px;scrollbar-gutter:stable}
.pos-cat{min-height:47px;padding:12px 10px;gap:8px;font-size:12px;border-radius:10px;line-height:1.25;white-space:normal}
.pos-main{min-width:0;padding:18px;scrollbar-gutter:stable}
.pos-products{grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:12px}
.pos-product{border-radius:14px;min-height:216px;box-shadow:var(--ui-card-shadow)}
.pos-product h4{min-height:0;font-size:13px}
.order-pane{min-width:0;border-left:2px solid #daceb9}
.order-pane-head{flex-wrap:wrap;gap:10px}
.order-pane .order-actions,.pos-service-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.order-pane .order-actions>*{flex:1 1 125px;max-width:100%;min-width:0}
.pos-service-switch button{max-width:100%;min-width:0}
.pos-top{height:66px;min-height:66px;flex-wrap:nowrap;gap:9px;padding:7px 14px}
.pos-top .app-top-right{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;min-width:0}
.pos-top .app-top-right .btn{white-space:nowrap}
.pos-top-brand{min-width:0}.pos-top .search{min-width:160px;flex:1 1 210px;max-width:420px}
.pos-order-context{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
/* Kitchen & order desk: long ticket details scroll vertically, not across adjacent lanes. */
.kitchen-page .kds-board-shell{min-width:0}
.kitchen-page .kds-board{min-width:0}
.kitchen-page .kds-lane{min-width:0}
.kitchen-page .kds-card,.kitchen-page .kds-card :is(h3,p,small,strong){min-width:0;overflow-wrap:anywhere}
.kitchen-page .kds-card .toolbar,.kitchen-page .ticket-actions{min-width:0;display:flex;flex-wrap:wrap;gap:7px}
.kitchen-page .kds-card :is(.btn,button){white-space:normal;min-width:0}
.kitchen-top{height:auto;min-height:66px;flex-wrap:wrap;gap:10px;padding-block:10px}
.order-desk-page .order-desk-top{display:flex;flex-wrap:wrap;gap:12px;min-height:68px;height:auto}
.order-desk-page .order-desk-search{min-width:0;max-width:500px}
.order-desk-page .order-desk-search input{max-width:100%;width:100%}
.order-desk-page .order-desk-grid{min-width:0}
.order-desk-page .order-desk-tabs{display:flex;flex-wrap:wrap;gap:8px}
.order-desk-page :is(.queue-order-card,.order-desk-detail){min-width:0;overflow-wrap:anywhere}
/* Customer forms and builders: deliberate measure, comfortable tap targets. */
.web-container .form-grid{gap:15px 18px}
.web-container .field{gap:8px}
.web-container .field label{font-size:12px;color:#4c493f;font-weight:750;letter-spacing:0;text-transform:none}
.web-container :is(.field,fieldset){min-width:0}
.web-container .field input:not([type=radio]):not([type=checkbox]),.web-container .field select{width:100%;max-width:560px}
.web-container .field.full textarea{max-width:760px}
.web-container .checkout-actions{display:flex;flex-wrap:wrap;gap:11px}
.web-container .checkout-actions .btn{min-width:140px}
.pizza-builder{grid-template-columns:minmax(240px,320px) minmax(0,1fr)}
.pizza-builder .builder-side{min-width:0}
.pizza-builder .choice-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,95px),1fr))}
.pizza-builder .half-box{grid-template-columns:repeat(2,minmax(0,1fr))}
.pizza-builder .builder-bottom{flex-wrap:wrap}
/* Laptops / tablets */
@media(max-width:1250px){
 .admin-shell{grid-template-columns:205px minmax(0,1fr)}
 .admin-top{gap:8px}.admin-top .toolbar{gap:5px}
 .pos-layout{grid-template-columns:minmax(0,1fr) 340px}
 .admin-content .visuals-grid{grid-template-columns:1fr}
 .admin-content .visuals-grid .visual-wide{grid-column:auto}
 .admin-content .admin-grid2{grid-template-columns:1fr}
}
@media(max-width:950px){
 .admin-shell{grid-template-columns:72px minmax(0,1fr)}
 .admin-side .web-brand div:last-child,.admin-links a{font-size:0}
 .admin-links a{display:flex;justify-content:center;min-height:48px;padding:8px 3px}
 .admin-links a span{font-size:19px;flex:none}
 .admin-side{padding:12px 7px}
 .admin-side .web-brand{justify-content:center;padding:8px 0 17px}
 .admin-side .web-brand .admin-logo-image{width:42px;max-width:100%}
 .admin-content .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pos-layout{grid-template-columns:minmax(0,1fr)}
 .order-pane{position:fixed;right:0;top:108px;height:calc(100dvh - 108px);width:min(410px,100vw);transform:translateX(100%);transition:transform .2s;z-index:60}
 .order-pane.open{transform:none}
 .pos-top .search{max-width:300px}
 .pizza-builder{grid-template-columns:1fr}
}
@media(max-width:650px){
 .admin-content{padding:12px}
 .admin-top{padding:12px;align-items:flex-start}
 .admin-top .toolbar{justify-content:flex-start;width:100%}
 .admin-top .toolbar :is(.btn,.pill){font-size:11px}
 .admin-content .panel{padding:15px;border-radius:13px}
 .admin-content .settings-grid,.admin-content .form-grid,.admin-content .visual-photo-grid,.admin-content .visual-palette{grid-template-columns:1fr}
 .admin-content .field.full{grid-column:auto}
 .admin-content .option-editor.two{grid-template-columns:1fr}
 .admin-content .option-row{grid-template-columns:minmax(0,1fr) 78px 38px;gap:6px}
 .admin-content .visual-photo-grid{gap:10px}
 .admin-content .flavor-choice{grid-template-columns:56px minmax(0,1fr)}
 .admin-content .flavor-choice button{grid-column:1/-1;max-width:none}
 .admin-content .visual-sticky-save{margin-inline:-4px}
 .admin-content .table-wrap{margin-inline:-1px}
 .modal-card{width:100%;max-height:calc(100dvh - 18px);border-radius:13px}
 .modal-card .form-grid,.pizza-builder .half-box{grid-template-columns:1fr}
 .pos-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .pos-cats{display:flex}
 .pos-main{padding:12px}
 .pos-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .pos-top{height:64px;min-height:64px;flex-wrap:nowrap}
 .pos-top .search{display:none}
 .pos-top .app-top-right{justify-content:flex-end}
 .pos-top .pos-secondary-action{display:none}
 .pos-service-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
 .order-desk-page .order-desk-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px}
 .web-container .form-grid{grid-template-columns:1fr}
 .web-container .checkout-actions .btn{flex:1 1 145px}
 .kitchen-top .toolbar{flex-wrap:wrap;gap:6px}
}
@media(max-width:380px){
 .admin-content .panel{padding:12px}
 .admin-content .option-row{grid-template-columns:minmax(0,1fr) 65px 35px}
 .admin-content .flavor-choice{grid-template-columns:1fr}
 .admin-content .flavor-choice img{width:80px;height:70px}
 .pos-top .app-top-right .btn{font-size:11px}
 .pos-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{.modal-card{max-height:none;box-shadow:none}.admin-top,.admin-side{position:static}}
