/* UI-087 / Oficina 1499 Cardápio Studio.
   Breakpoints: rail icônica 72px desktop (expandível), bottom nav 4 destinos
   no mobile e drawer somente para ferramentas secundárias.
   390px/1440px não podem criar overflow. Estilos somados ao tema antigo. */
:root{--studio-accent:#c6ff00;--rail-w:72px;--dock-h:72px}
html,body{max-width:100%;overflow-x:clip}
body{--studio-surface:#1b271f}
body[data-rail-expanded=true]{--rail-w:220px}
.studio-layout{grid-template-columns:var(--rail-w) minmax(0,1fr) minmax(275px,332px);min-height:calc(100dvh - 130px)}
.studio-top{min-height:74px;padding:10px clamp(12px,1.5vw,22px)}
.studio-brand h1{font-size:clamp(1.13rem,1.7vw,1.5rem)}
.studio-brand p{font-size:.68rem}
.studio-brand>.studio-back{padding:9px}
.studio-brand .eyebrow{font-size:.58rem}
.studio-nav{position:sticky;top:0;min-height:calc(100dvh - 120px);height:calc(100dvh - 120px);width:var(--rail-w);display:flex;flex-direction:column;gap:6px;overflow:visible;padding:12px 7px;border-right:1px solid #3e5640}
.studio-nav .nav-title{display:none}
.rail-toggle,.hub-nav-button,.rail-theme-toggle{position:relative;display:flex;align-items:center;gap:11px;width:100%;border:1px solid transparent;border-radius:12px;min-height:48px;padding:12px;color:#d4e8d0;background:transparent;font-weight:800;font-size:.81rem;cursor:pointer;white-space:nowrap;overflow:hidden}
.rail-toggle{background:#27372a;border:1px solid #718d68;color:#dcf7c0;justify-content:center;min-height:45px;margin:0 0 8px}
.rail-toggle svg{transition:transform .2s;flex:none}
body[data-rail-expanded=true] .rail-toggle svg{transform:rotate(180deg)}
.rail-toggle .nav-copy{font-size:.68rem}
.hub-nav-button svg{width:23px;height:23px;flex:none}
.hub-nav-button:hover,.rail-theme-toggle:hover{background:#2a432d}
.hub-nav-button.active{background:color-mix(in srgb,var(--studio-accent) 78%,#94aa79);color:#17200f;border-color:var(--studio-accent)}
.studio-nav .nav-copy{display:none}
body[data-rail-expanded=true] .studio-nav .nav-copy{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis}
body:not([data-rail-expanded=true]) .studio-nav :is(.hub-nav-button,.rail-theme-toggle){justify-content:center;padding:10px}
body:not([data-rail-expanded=true]) .rail-toggle{justify-content:center}
body[data-rail-expanded=true] .rail-toggle{justify-content:flex-start;padding-left:14px}
.rail-footer{margin-top:auto;display:grid;gap:8px}
.rail-theme-toggle{font-size:1.3rem}
.studio-nav .nav-bottom{font-size:.69rem;padding:7px;min-height:35px;display:flex;justify-content:center;gap:8px;margin:0}
body[data-rail-expanded=true] .studio-nav .nav-bottom{justify-content:flex-start}
.studio-nav .status-dot{box-shadow:0 0 0 3px #c6ff0033}
.studio-nav .hub-nav-button:focus-visible,.rail-toggle:focus-visible{outline-offset:0}
.studio-nav .hub-nav-button[title]:hover::after,
.studio-nav .rail-toggle[title]:hover::after{content:attr(title);position:absolute;left:calc(var(--rail-w) - 8px);z-index:9;background:#142318;color:#d8f2cd;border:1px solid #799870;padding:6px 10px;border-radius:7px;white-space:nowrap;pointer-events:none}
body[data-rail-expanded=true] .studio-nav .hub-nav-button::after{display:none}
.studio-mobile-bottom,.studio-mobile-drawer,.mobile-menu-open{display:none}
.studio-subnav{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;padding:1px 1px 13px;margin-bottom:7px;scrollbar-width:thin;min-height:44px}
.studio-subnav button{border:1px solid #526a52;background:#253428;color:#c9ddc6;border-radius:999px;min-height:37px;padding:7px 13px;white-space:nowrap;font-size:.76rem;font-weight:850;flex:none}
.studio-subnav button[aria-current=page]{background:var(--studio-accent);color:#1b2618;border-color:var(--studio-accent)}
.studio-content{padding:clamp(12px,1.6vw,24px);min-width:0}
.studio-screen[hidden]{display:none!important}
.studio-screen .screen-title{margin-bottom:16px}
.studio-screen .screen-title p{max-width:68ch}
.overview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:15px}
.overview-stat{display:grid;gap:6px;min-width:0;border:1px solid #435f46;border-radius:16px;padding:16px;background:linear-gradient(150deg,#263629,#152119);position:relative}
.overview-stat .stat-icon{font-size:1.3rem;color:var(--studio-accent)}
.overview-stat strong{font-size:clamp(1.6rem,2.6vw,2.35rem);line-height:1;font-variant-numeric:tabular-nums}
.overview-stat small{font-size:.75rem;color:#b5ceac;line-height:1.35}
.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:stretch}
.overview-grid .studio-card{margin:0}
.overview-grid .studio-card h3{margin:0}
.overview-grid .overview-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.overview-grid .overview-actions .studio-btn{flex:1 1 auto;min-width:100px}
.overview-health-line{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:11px 0;border-bottom:1px solid #38543a;font-size:.8rem}
.overview-health-line span:last-child{font-weight:900;color:#b9e48d}
.empty-chart{position:relative;display:grid;align-content:center;min-height:160px;padding:20px;gap:7px;border:1px dashed #698065;border-radius:12px;text-align:center;background:repeating-linear-gradient(0deg,transparent 0 35px,#97a88e14 36px,transparent 37px),repeating-linear-gradient(90deg,transparent 0 56px,#97a88e11 57px,transparent 58px)}
.empty-chart span:first-child{font-weight:900}
.empty-chart span:last-child{font-size:.74rem;color:#a7c29e}
.board-layout{display:grid;grid-template-columns:minmax(210px,36%) minmax(0,1fr);gap:13px;align-items:start}
.board-layout>.studio-card{min-width:0}
.board-inventory{position:sticky;top:12px;max-height:calc(100dvh - 145px);display:flex;flex-direction:column;gap:9px}
.board-bag{display:grid;gap:7px;overflow-y:auto;overscroll-behavior:contain;min-height:120px;max-height:65vh;padding-right:4px}
.board-token,.board-equipped{border:1px solid #58765c;border-radius:11px;padding:10px 11px;display:flex;align-items:center;gap:10px;min-width:0;background:#213327;touch-action:pan-y}
.board-token[draggable=true],.board-equipped[draggable=true]{cursor:grab}
.board-token.dragging,.board-equipped.dragging{opacity:.5}
.board-token .drag-indicator{font-size:1.15rem;color:#b8ca9d}
.board-token .item-copy,.board-equipped .item-copy{display:grid;gap:2px;flex:1;min-width:0}
.board-token .item-copy strong,.board-equipped strong{font-size:.8rem;overflow-wrap:anywhere}
.board-token .item-copy small,.board-equipped small{font-size:.68rem;color:#abc59f}
.board-token select,.board-equipped select{min-height:36px;padding:6px;font-size:.72rem;max-width:125px}
.board-token button,.board-equipped button{flex:none;min-width:32px;min-height:35px;border:1px solid #708875;border-radius:8px;background:#324a35;color:#e0f2d8;font-weight:800}
.board-token button:disabled,.board-equipped button:disabled{opacity:.4}
.board-sections{display:grid;gap:11px}
.board-slot{border:1px solid #49644d;border-radius:14px;background:#1b2c20;min-height:105px}
.board-slot[data-drag-over=true]{border:2px dashed var(--studio-accent);background:#2b4430}
.board-slot-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;border-bottom:1px solid #3b5940}
.board-slot-head strong{font-size:.88rem}
.board-slot-head small{font-size:.68rem;color:#aaca9b}
.board-slot-body{display:grid;gap:6px;padding:10px;min-height:58px}
.board-slot-empty{font-size:.75rem;color:#9aba99;padding:9px;text-align:center;border:1px dashed #4b6950;border-radius:10px}
.board-equipped button{font-size:.78rem}
.tag-manager-layout,.combos-layout{display:grid;grid-template-columns:minmax(220px,34%) minmax(0,1fr);gap:14px;align-items:start}
.tag-manager-layout>.studio-card,.combos-layout>.studio-card{min-width:0}
.tag-manager-layout #tag-create-form{display:grid;gap:13px}
.tag-manage-list{display:grid;gap:9px}
.tag-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,150px) auto;gap:8px;align-items:center;padding:9px;border:1px solid #3e5943;border-radius:10px;background:#223328;min-width:0}
.tag-entry input,.tag-entry select{min-width:0}
.tag-entry .tag-actions{display:flex;gap:5px}
.tag-entry .studio-btn{min-height:38px;padding:7px;font-size:.72rem}
.studio-tag-picker{display:grid;gap:9px;border:1px solid #48654a;padding:11px;border-radius:11px}
.item-tags-picker{display:flex;flex-wrap:wrap;gap:7px}
.item-tag-toggle{min-height:35px;padding:6px 10px;border:1px solid #648066;border-radius:99px;background:#24362a;color:#d9ead3;font-size:.75rem;font-weight:750}
.item-tag-toggle[aria-pressed=true]{background:var(--studio-accent);color:#17210f}
.combo-list,.combo-choices{display:grid;gap:7px;margin-top:11px}
.combo-list button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:7px;text-align:left;background:#263b2b;color:#ecf5e6;border:1px solid #4d6850;border-radius:10px;padding:12px;font-weight:850}
.combo-choices{max-height:290px;overflow-y:auto;border:1px solid #445e47;border-radius:10px;padding:8px}
.combo-choices label{display:flex;align-items:center;gap:9px;min-height:39px;padding:7px;border-radius:7px}
.combo-choices label:hover{background:#304334}
.combo-choices input{flex:none}
.combo-calculation{padding:15px;border-radius:10px;border:1px solid #77935b;background:#2c3925;color:#e1f3ce;font-size:.85rem;font-weight:800}
#combo-form{display:grid;gap:14px}
#combo-form h4{margin:0}
.layout-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.layout-option{display:grid;gap:10px;align-items:start;text-align:left;min-height:192px;padding:13px;border-radius:14px;background:#24372a;color:#ebf5e7;border:1px solid #4b664b}
.layout-option[aria-pressed=true]{border:2px solid var(--studio-accent);background:#2b432f;box-shadow:0 0 16px #a7c56225}
.layout-option strong{font-size:.93rem}
.layout-option small{font-size:.73rem;color:#bad3b3}
.layout-schematic{display:grid;gap:5px;height:81px;padding:8px;background:#121d15;border:1px solid #638160;border-radius:8px}
.layout-schematic i{display:block;background:#638d51;border-radius:4px}
.schematic-list i{height:15px;width:100%}
.schematic-market{grid-template-columns:1fr 1fr;grid-template-rows:28px 28px}
.schematic-market i:first-child{grid-column:1/-1;background:#bad857}
.schematic-blocks{grid-template-columns:1fr 1fr}
.schematic-blocks i:first-child{grid-row:1/3}
.feature-list{display:grid;gap:10px;margin-top:12px}
.feature-card{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px;border:1px solid #506d51;border-radius:13px;background:#223428}
.feature-card[draggable=true]{cursor:grab}
.feature-card .feature-fields{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-card .feature-fields label{font-size:.73rem}
.feature-card .feature-controls{display:flex;flex-direction:column;gap:7px}
.feature-card .feature-controls button{min-height:36px}
.feature-card .feature-assignment{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.feature-card .feature-assignment label{display:flex!important;gap:5px;align-items:center;background:#2d4532;border:1px solid #527257;border-radius:8px;padding:6px;font-size:.7rem}
.feature-card .feature-assignment input{flex:none}
.settings-display{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.settings-display .studio-btn[data-active=true]{background:var(--studio-accent);color:#17220f}
.integration-slots{display:grid;gap:12px;margin:16px 0}
.integration-slot{display:grid;gap:10px;border:1px solid #507354;border-radius:12px;padding:13px;background:#23372b}
.integration-slot h4{margin:0}
.integration-slot .fields{margin:0}
.integration-slot .not-connected{font-size:.73rem;color:#b6cfae}
.color-details{margin-top:14px}
.color-details>summary{padding:14px 17px;cursor:pointer;font-weight:900;font-size:.85rem}
.color-details-body{padding:12px}
.color-details .colors-card{margin:0}
.preview-rail{padding:12px 10px}
.preview-rail .phone-shell{width:min(100%,328px);height:clamp(650px,78dvh,920px);max-height:none;aspect-ratio:auto}
.preview-rail .phone-shell iframe{height:100%;overflow:auto}
.mobile-preview-holder .phone-shell{width:min(100%,390px);height:clamp(570px,calc(100dvh - 160px),960px);max-height:none;aspect-ratio:auto}
.mobile-preview-holder .phone-shell iframe{height:100%}
@media(max-width:1450px){
 .studio-layout{grid-template-columns:var(--rail-w) minmax(0,1fr) 288px}
 .preview-rail .phone-shell{height:clamp(700px,88dvh,1010px)}
}
@media(max-width:1130px){
 .studio-layout{grid-template-columns:var(--rail-w) minmax(0,1fr)}
 .preview-rail{display:none}
 .products-grid{grid-template-columns:minmax(230px,36%) minmax(0,1fr)}
}
@media(max-width:930px){
 .studio-layout{display:block;min-height:0}
 .studio-nav{display:none}
 .studio-top{position:sticky;top:0;z-index:40;background:#121b15;border-bottom:1px solid #4f6852;min-height:58px;padding:8px 11px}
 .studio-brand{gap:7px}
 .studio-brand h1{font-size:1.12rem}
 .studio-brand p,.studio-brand .eyebrow{display:none}
 .studio-brand .studio-back{font-size:.7rem}
 .top-actions{width:auto;margin-left:auto;gap:5px}
 .top-actions .studio-btn{min-height:38px;font-size:.7rem;padding:7px}
 .top-actions #top-preview{display:none}
 .top-actions #top-save{display:none}
 .top-actions #top-publish{display:none}
 .top-actions .top-status{display:none}
 .top-actions .menu-open-mobile{display:flex}
 .studio-content{padding:14px 13px calc(var(--dock-h) + env(safe-area-inset-bottom) + 30px)}
 .studio-subnav{position:sticky;top:59px;background:#121b15;z-index:30;margin:0 -13px 11px;padding:9px 13px;border-bottom:1px solid #415d46}
 .studio-subnav button{min-height:39px}
 .studio-mobile-bottom{position:fixed;z-index:55;left:0;right:0;bottom:0;height:calc(var(--dock-h) + env(safe-area-inset-bottom));padding:6px 7px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:#121b15ee;backdrop-filter:blur(16px);border-top:1px solid #607d57}
 .studio-mobile-bottom button{display:grid;place-items:center;gap:1px;border:0;border-radius:11px;color:#b7cfb6;background:transparent;padding:6px 2px;font-weight:800;min-width:0}
 .studio-mobile-bottom button svg{width:21px;height:21px}
 .studio-mobile-bottom button small{font-size:.61rem;white-space:nowrap}
 .studio-mobile-bottom button[data-active=true]{background:var(--studio-accent);color:#182215}
 .mobile-drawer-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:65;background:#0009}
 .studio-mobile-drawer:not([hidden]){position:fixed;display:flex;flex-direction:column;z-index:66;top:max(8px,env(safe-area-inset-top));right:8px;width:min(350px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;background:#142017;border:1px solid #738d6c;border-radius:18px;padding:14px;box-shadow:0 12px 70px #000b}
 .drawer-heading{display:flex;justify-content:space-between;align-items:center;padding:5px 4px 12px}
 .drawer-heading strong{font-size:1rem}
 .drawer-heading button{border:1px solid #6c876a;background:#2a3c2d;color:#eef6e9;border-radius:10px;min-width:40px;min-height:40px;font-size:1.3rem}
 .mobile-drawer-list{display:grid;gap:7px}
 .mobile-drawer-list button{width:100%;display:flex;justify-content:space-between;text-align:left;align-items:center;min-height:43px;border:1px solid #4c6750;border-radius:10px;padding:10px 12px;background:#253729;color:#d8edd0;font-size:.84rem;font-weight:780}
 .mobile-drawer-list .drawer-group{font-size:.64rem;color:#9fb995;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin:9px 2px 1px}
 .mobile-drawer-list button[data-active=true]{border-color:var(--studio-accent)}
 .overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .overview-grid{grid-template-columns:1fr}
 .board-layout{grid-template-columns:1fr}
 .board-inventory{position:static;max-height:none}
 .board-bag{max-height:310px}
 .tag-manager-layout,.combos-layout{grid-template-columns:1fr}
 .layout-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mobile-preview-holder .phone-shell{height:calc(100dvh - 200px);min-height:560px;width:min(100%,390px)}
 .studio-screen:not([hidden]){display:block}
}
@media(max-width:650px){
 .studio-brand h1{font-size:1.07rem}
 .products-grid{grid-template-columns:1fr}
 .layout-options{grid-template-columns:1fr}
 .layout-option{grid-template-columns:106px minmax(0,1fr);grid-template-rows:auto auto;min-height:115px;align-items:center}
 .layout-option .layout-schematic{grid-row:1/3;height:84px}
 .layout-option strong{align-self:end}
 .layout-option small{align-self:start}
 .feature-card{grid-template-columns:1fr}
 .feature-card .feature-controls{flex-direction:row}
 .feature-card .feature-fields{grid-template-columns:1fr}
 .feature-card .feature-assignment{grid-column:1}
 .overview-stat{padding:12px}
 .overview-stat strong{font-size:1.72rem}
 .overview-stat small{font-size:.72rem}
 .studio-content{padding-left:11px;padding-right:11px}
 .studio-subnav{margin-left:-11px;margin-right:-11px;padding-left:11px;padding-right:11px}
 .tag-entry{grid-template-columns:minmax(0,1fr) 112px;gap:7px}
 .tag-entry .tag-actions{grid-column:1/-1}
 .studio-mobile-bottom button small{font-size:.58rem}
 .mobile-preview-holder .phone-shell{min-height:520px;height:calc(100dvh - 195px)}
}
@media(max-width:370px){
 .studio-brand .studio-back span{display:none}
 .studio-brand h1{font-size:.95rem}
 .studio-mobile-bottom button small{font-size:.54rem}
 .studio-subnav button{font-size:.7rem;padding:6px 10px}
 .board-token select{max-width:105px}
}
/* Day mode is only for the operator, never alters the customer menu. */
body[data-panel-theme=light]{--text:#213126;--muted:#526d55;background:#eef2e9;color:#213126}
body[data-panel-theme=light] .studio-app{color:#213126}
body[data-panel-theme=light] :is(.studio-top,.studio-subnav,.studio-nav,.studio-mobile-bottom){background:#e3ebdf;color:#24452d}
body[data-panel-theme=light] :is(.studio-card,.overview-stat,.feature-card,.tag-entry,.board-slot,.board-token,.board-equipped,.integration-slot,.board-inventory,.board-slots){background:#fffefb;color:#233629;border-color:#b9cbb7;box-shadow:none}
body[data-panel-theme=light] :is(.studio-card label,.studio-card h3,.studio-card strong,.screen-title,.screen-title h2){color:#213126}
body[data-panel-theme=light] :is(.screen-title p,.field-hint,.subtle,.overview-stat small,.studio-card small){color:#536c56}
body[data-panel-theme=light] :is(input,textarea,select){background:#fff;color:#23372a;border-color:#8ba58b}
body[data-panel-theme=light] :is(.studio-subnav button,.studio-btn:not(.primary),.board-token button,.board-equipped button){background:#f0f4eb;color:#243d27;border-color:#a5baa0}
body[data-panel-theme=light] :is(.hub-nav-button,.rail-theme-toggle,.studio-mobile-bottom button){color:#28412e}
body[data-panel-theme=light] :is(.hub-nav-button.active,.studio-mobile-bottom button[data-active=true],.studio-subnav button[aria-current=page]){color:#142216;background:var(--studio-accent)}
body[data-panel-theme=light] :is(.studio-tag-picker,.pdf-panel,.settings-switches>label){background:#f8fbf5;border-color:#acbfa8;color:#233d28}
body[data-panel-theme=light] .studio-mobile-drawer:not([hidden]){background:#edf4e7;color:#243d27}
body[data-panel-theme=light] .mobile-drawer-list button{background:#f8fcf3;color:#263a29;border-color:#aabbac}
body[data-panel-theme=light] .studio-top{border-color:#a2b89a}
@media(prefers-reduced-motion:reduce){.rail-toggle svg{transition:none}}