:root{--bg:#f7f7f7;--card:#fff;--text:#3e3e3e;--muted:#717171;--accent:#ea1d2c;--accent-rgb:234,29,44;--accent-h:#d91a29;--ok:#00a04a;--danger:#ea1d2c;--warn:#f5a623;--border:#f0f0f0;--input:#f7f7f7;--shadow:0 4px 16px rgba(0,0,0,.10);--shadow-sm:0 2px 8px rgba(0,0,0,.06);--shadow-lg:0 12px 32px rgba(0,0,0,.14);--r:16px;--rl:24px;--sidebar-w:260px;--sidebar-bg:#1a1a1a}
        body.dark{--bg:#0f0f0f;--card:#1a1a1a;--text:#f5f5f5;--muted:#a0a0a0;--border:#2a2a2a;--input:#0f0f0f;--shadow:0 8px 24px rgba(0,0,0,.4);--shadow-sm:0 4px 12px rgba(0,0,0,.3);--shadow-lg:0 16px 40px rgba(0,0,0,.5)}
        *{box-sizing:border-box;margin:0;padding:0}
        html,body{overflow-x:hidden;max-width:100%;scrollbar-width:none;-ms-overflow-style:none}
        html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
        body{font-family:'Inter','Segoe UI',sans-serif;background:var(--bg);color:var(--text);transition:.3s}
        .hidden{display:none!important}

        /* ANIMAÇÕES DE ENTRADA — inspiradas no EX-CommerceHub (globals.css) */
        @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
        @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
        .animate-fade-in{animation:fadeIn .35s ease both}
        .animate-slide-up{animation:slideUp .4s ease both}
        .stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.10s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.20s}

        /* LOGIN — prévia local inspirada na referência desktop/mobile */
        #login-screen{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;height:100dvh;min-height:0;padding:clamp(20px,4vw,56px);background:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);color:#1a1a1a;overflow:hidden}
        .login-shell{display:grid;grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr);width:100%;max-width:none;height:100%;min-height:0;padding:0;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.16);border-radius:30px;box-shadow:0 28px 80px rgba(0,0,0,.38)}
        .login-form-panel{display:flex;align-items:center;justify-content:center;padding:clamp(48px,6vw,82px) clamp(42px,7vw,92px);background:#fff}.login-box{width:100%;max-width:390px;text-align:left;animation:loginFadeScale .35s ease both}.login-card{background:transparent;border:0;padding:0;box-shadow:none}.login-logo-wrap{display:flex;justify-content:center;margin-bottom:34px;padding:0;border:0}.login-logo-wrap img{height:96px;width:auto;max-width:100%;object-fit:contain}.login-title{margin-bottom:30px;text-align:center}.login-title h2{font-size:clamp(23px,2vw,29px);font-weight:900;letter-spacing:-.035em;color:#1a1a1a;margin-bottom:8px}.login-title p{font-size:14px;line-height:1.55;color:#717171;font-weight:500}.login-form{display:flex;flex-direction:column;gap:18px}.login-field label{display:block;font-size:13px;font-weight:800;color:#1a1a1a;margin-bottom:7px}#login-screen .login-box input{width:100%;padding:14px 16px;border:1.5px solid #e6e9ed;border-radius:10px;font-size:14px;outline:none;background:#f8fafb;color:#1a1a1a;transition:all .15s;box-sizing:border-box;font-weight:600}#login-screen .login-box input::placeholder{color:#afb5bd;font-weight:500}#login-screen .login-box input:focus{border-color:#ea1d2c;box-shadow:0 0 0 3px rgba(234,29,44,.10);background:#fff}.pass-wrapper{position:relative;width:100%}#login-screen .pass-wrapper input{padding-right:48px}.pass-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#8a929b;padding:4px;display:flex;align-items:center;justify-content:center;transition:.15s}.pass-toggle svg{width:18px;height:18px;fill:currentColor;transition:.2s}.pass-toggle:hover{color:#ea1d2c}.btn-login{width:100%;background:linear-gradient(135deg,#ea1d2c 0%,#c41020 100%);color:#fff;border:none;padding:15px;border-radius:10px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 6px 18px rgba(234,29,44,.25);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px}.btn-login:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(234,29,44,.34);background:linear-gradient(135deg,#ea1d2c 0%,#c41020 100%)}.login-error{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;background:rgba(234,29,44,.08);border:1px solid rgba(234,29,44,.20);color:#ea1d2c;font-size:13px;font-weight:600;margin-top:0;line-height:1.35}.login-error::before{content:'!';width:16px;height:16px;border-radius:50%;border:2px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0}.login-version{text-align:center;font-size:12px;color:#a2a7ad;margin-top:28px;font-weight:500}.login-version strong{color:#ea1d2c;font-weight:800}.field-status{font-size:.7rem;font-weight:600;margin:-6px 0 8px;padding:2px 0}
        .login-art-panel{position:relative;min-height:100%;overflow:hidden;background:#e9dfcf url('assets/login-color-deck-fan.png') center/cover no-repeat}/* WebP de 350 KB no lugar do PNG de 4,8 MB (mesmo tamanho, 1459x1440); navegador sem image-set() com type() ignora esta regra e fica com o PNG da regra acima */.login-art-panel{background-image:image-set(url('assets/login-color-deck-fan.webp') type('image/webp'),url('assets/login-color-deck-fan.png') type('image/png'))}.login-art-panel::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,8,10,.14),transparent 28%,rgba(8,10,13,.08))}
        .login-carousel-track{position:absolute;inset:0;z-index:0;display:flex;height:100%;touch-action:pan-y;cursor:grab}
        .login-carousel-track.dragging{cursor:grabbing}
        .login-carousel-slide{position:relative;flex:0 0 100%;height:100%}
        .login-carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
        .login-carousel-dots{position:absolute;left:0;right:0;bottom:20px;z-index:2;display:flex;justify-content:center;gap:7px}
        .login-carousel-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s;border:none;padding:0}
        .login-carousel-dot.active{background:#fff;width:20px;border-radius:4px}
        @media(max-width:820px){.login-carousel-dots{bottom:10px}}
        @media(max-width:820px){#login-screen{height:100dvh;min-height:100dvh;padding:28px;overflow:auto}.login-shell{grid-template-columns:1fr;max-width:560px;height:auto;min-height:0;border-radius:26px}.login-art-panel{order:-1;min-height:230px}.login-form-panel{padding:42px clamp(28px,8vw,64px)}.login-logo-wrap{margin-bottom:26px}.login-version{text-align:center}.login-art-panel::after{background:linear-gradient(90deg,rgba(6,8,10,.05),transparent)}}
        @media(max-width:520px){#login-screen{align-items:center;height:100svh;min-height:0;padding:16px;background:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);overflow:auto}.login-shell{width:100%;max-width:440px;height:auto;min-height:0;border:0;border-radius:28px;box-shadow:0 18px 44px rgba(77,10,10,.25);background:#fff}.login-art-panel{min-height:0;height:158px;margin:12px 12px 0;border-radius:20px}.login-form-panel{align-items:flex-start;padding:26px 24px 28px}.login-logo-wrap{margin-bottom:18px}.login-logo-wrap img{height:60px}.login-title{margin-bottom:20px}.login-title h2{font-size:24px}.login-title p{font-size:14px}.login-form{gap:14px}#login-screen .login-box input{padding:13px 15px}.btn-login{padding:14px}.login-version{margin-top:18px}}
        @keyframes loginFadeScale{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
        .field-status.valid{color:var(--ok)}
        .field-status.invalid{color:var(--danger)}
        .field-status.loading{color:var(--muted)}
        .input-valid{border-color:var(--ok)!important}
        .input-invalid{border-color:var(--danger)!important}

        /* HEADER */
        header{background:var(--card);padding:0 1.2rem;height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.08)}
        .hdr-left{display:flex;align-items:center;gap:0;min-width:220px}
        .hdr-center{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}
        .hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:220px;justify-content:flex-end}
        .hdr-selects-mobile{display:none;background:var(--card);padding:8px 1rem;border-bottom:1px solid var(--border);position:sticky;top:56px;z-index:99;gap:6px;box-shadow:0 1px 3px rgba(0,0,0,.05);flex-wrap:wrap}
        .hamburger{width:40px;height:40px;border:none;background:transparent;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
        .hamburger:hover{background:rgba(0,0,0,.06)}
        .hamburger svg{width:22px;height:22px;fill:var(--text)}
        .logo{display:flex;align-items:center;justify-content:flex-start;gap:0;height:42px;font-size:.95rem;font-weight:900;color:var(--accent);letter-spacing:-.3px;overflow:hidden}
        .logo img:not(.sd-brand-logo){height:28px}
        .sd-brand-logo{display:block;object-fit:contain;object-position:center center;user-select:none;-webkit-user-drag:none;filter:none!important;box-shadow:none!important}
        .sd-brand-logo--header{width:184px;height:auto;max-width:184px;max-height:42px;margin-left:-20px}
        .sd-brand-logo--sidebar{width:176px;height:auto;max-width:176px;max-height:66px}
        .sd-brand-logo--dark{display:none}
        body.dark .sd-brand-logo--light{display:none}
        body.dark .sd-brand-logo--dark{display:block}
        /* Sidebar é sempre escura (independente do Modo Escuro do conteúdo), então sua logo sempre usa a variante escura */
        .sidebar .sd-brand-logo--light{display:none}
        .sidebar .sd-brand-logo--dark{display:block}
        .sidebar-header .sd-brand-logo{margin:auto}
        .sidebar-header{box-sizing:border-box}
        .hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
        .badge{font-size:.6rem;font-weight:700;padding:4px 8px;border-radius:6px;background:var(--input);color:var(--muted)}
        .badge.on{color:var(--ok)}.badge.off{color:var(--danger)}
        .btn-sm{padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--input);font-size:.7rem;font-weight:700;cursor:pointer;color:var(--text);transition:background .15s ease,transform .15s ease}
        .btn-sm:hover{background:var(--border);transform:translateY(-1px)}
        .btn-sm.red{background:var(--accent);color:#fff;border:none}
        .btn-sm.red:hover{background:var(--accent-h)}
        .btn-sm.blue{background:#2563eb;color:#fff;border:none}
        .btn-sm.blue:hover{background:#1d4ed8}

        /* SELEÇÃO DE ESCOPO PÓS-LOGIN */
        #app .hdr-center{display:none!important}
        #mobile-selects{display:none!important}
        .scope-modal{max-width:520px}
        .scope-modal h3{font-size:1rem;font-weight:900;margin-bottom:.4rem;color:var(--text)}
        .scope-modal-desc{font-size:.78rem;color:var(--muted);line-height:1.45;margin-bottom:1rem}
        .scope-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:1rem}
        .scope-field label{display:block;font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
        .scope-field .sel{width:100%;padding:10px 12px;font-size:.86rem}
        .scope-field .sel:disabled{opacity:.6;cursor:not-allowed}
        .scope-summary{background:var(--input);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:.75rem;color:var(--muted);font-weight:700;margin-bottom:1rem}
        .scope-summary strong{color:var(--text)}
        .scope-modal-actions{display:flex;gap:10px;margin-top:1rem}
        .scope-modal-actions .btn{justify-content:center}
        .scope-modal-actions .btn-outline{width:100%}
        .btn-scope{background:var(--accent);color:#fff;border:none}
        .btn-scope:hover{background:var(--accent-h)}
        @media(max-width:768px){.scope-modal{width:94%;padding:1.2rem}.scope-modal-actions{flex-direction:column}.btn-scope{font-size:.66rem;padding:6px 8px}}

        /* SIDEBAR OVERLAY */
        .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
        .sidebar-overlay.open{opacity:1;visibility:visible}

        /* SIDEBAR — sempre no visual escuro (#1a1a1a), independente do toggle "Modo Escuro"
           que controla só o conteúdo principal. Inspirado no EX-CommerceHub (app-irmão). */
        .sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100%;background:var(--sidebar-bg);z-index:300;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px rgba(0,0,0,.24);display:flex;flex-direction:column;overflow:hidden}
        .sidebar.open{transform:translateX(0)}
        .sidebar-header{padding:8px 16px;display:flex;align-items:center;gap:0;border-bottom:1px solid rgba(255,255,255,.08);justify-content:center;min-height:92px;height:92px;text-align:center}
        .sidebar-header img:not(.sd-brand-logo){height:36px}
        .sidebar-header .sidebar-brand{font-size:1rem;font-weight:900;color:var(--accent);line-height:1.1}
        .sidebar-header .sidebar-brand small{display:block;font-size:.6rem;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:.5px;margin-top:2px}
        .sidebar-nav{flex:1;padding:.6rem 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
        .sidebar-nav::-webkit-scrollbar{display:none}
        .sidebar-nav .nav-section{padding:0 1rem;margin-bottom:.3rem;font-size:.6rem;font-weight:700;color:rgba(255,255,255,.30);text-transform:uppercase;letter-spacing:.8px}
        .nav-item{display:flex;align-items:center;gap:12px;padding:10px 1rem;cursor:pointer;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.60);transition:.15s;border-radius:0;position:relative;white-space:nowrap}
        .nav-item:hover{background:rgba(255,255,255,.06)}
        .nav-item.active{background:rgba(234,29,44,.18);color:#fff}
        .nav-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:0 4px 4px 0}
        .nav-item svg{width:20px;height:20px;flex-shrink:0;fill:rgba(255,255,255,.45)}
        #nav-calibracao svg{width:23px;height:23px;margin-left:-1.5px;margin-right:-1.5px;transform-origin:center}
        .nav-item.active svg{fill:var(--accent)}
        .home-logo-dark{display:none}
        body.dark .home-logo-light{display:none}
        body.dark .home-logo-dark{display:inline}
        .nav-divider{height:1px;background:rgba(255,255,255,.08);margin:.5rem 1rem}
        /* Cartões de usuário no rodapé da sidebar (perfil + Sair, separados, como
           no EX-CommerceHub) — substituem o antigo rodapé só com texto "SMALLDROP
           TEXWHITE — Cloud Edition". */
        /* Encosta nas bordas da sidebar, igual ao border-bottom do .sidebar-header
           lá em cima — diferente do .nav-divider (que tem recuo de 1rem). */
        .sidebar-footer-divider{height:1px;background:rgba(255,255,255,.08);margin-bottom:.5rem}
        .sidebar-user-card{margin:.15rem .8rem .5rem;padding:.65rem .7rem;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
        .sidebar-user-info{display:flex;align-items:center;gap:10px;min-width:0}
        .sidebar-user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-h));display:flex;align-items:center;justify-content:center;flex-shrink:0}
        /* Cor + ícone por papel vêm de ROLE_AVATAR (JS, fonte única) — o background
           é aplicado inline. Sem nudge: cada ícone é centrado pelo próprio viewBox. */
        .sidebar-user-avatar svg{width:17px;height:17px;fill:#fff}
        .sidebar-user-text{min-width:0}
        .sidebar-user-name{font-size:.8rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .sidebar-user-role{font-size:.64rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .sidebar-logout-card{margin:0 .8rem .9rem;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);overflow:hidden}
        .sidebar-user-logout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;background:none;border:none;color:rgba(255,255,255,.65);font-size:.76rem;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
        .sidebar-user-logout:hover{color:#fff;background:rgba(255,255,255,.08)}
        .sidebar-user-logout svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}

        /* SWITCH COLORISTA */
        .switch-colorista{position:relative;display:inline-block;width:46px;height:24px}
        .switch-colorista input{opacity:0;width:0;height:0}
        .slider-colorista{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:24px;transition:.3s}
        .slider-colorista:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
        .switch-colorista input:checked+.slider-colorista{background:#6c5ce7}
        .switch-colorista input:checked+.slider-colorista:before{transform:translateX(22px)}

        /* ADMIN ACTIONS IN SIDEBAR */
        .sidebar-actions{padding:.5rem .9rem}
        .sidebar-actions .btn-sm{width:100%;text-align:center;margin-bottom:6px;padding:10px;font-size:.76rem;white-space:nowrap;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
        .sidebar-actions .btn-sm:hover{background:rgba(255,255,255,.12)}
        .sidebar-actions .btn-sm.red{background:var(--accent);border-color:var(--accent);color:#fff}
        .sidebar-actions .btn-sm.red:hover{background:var(--accent-h)}
        /* Botão "Contexto de Loja" — mesmo tratamento escuro do restante da sidebar */
        .sidebar .sidebar-context-header{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
        .sidebar .sidebar-context-header:hover,.sidebar .sidebar-context-header.open{border-color:var(--accent);color:#fff}


        /* MAIN */
        main{max-width:1200px;margin:1rem auto;padding:0 1rem}
        .card{background:var(--card);padding:1.2rem;border-radius:var(--rl);box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:1rem}
        /* Elevação no hover só em cards clicáveis (o app já marca esses com cursor:pointer inline) —
           cards estáticos (formulários, listas grandes) não devem "flutuar" ao passar o mouse. */
        .card[style*="cursor:pointer"]{transition:transform .2s ease,box-shadow .2s ease}
        .card[style*="cursor:pointer"]:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
        .card h3{font-size:.95rem;font-weight:800;margin-bottom:1rem}
        .tbl{width:100%;border-collapse:collapse;font-size:.8rem}
        .tbl th{text-align:left;padding:8px 10px;background:var(--input);font-weight:700;color:var(--muted);font-size:.7rem;text-transform:uppercase}
        .tbl td{padding:8px 10px;border-bottom:1px solid var(--border)}
        .tbl tr:hover{background:var(--input)}
        .chip{display:inline-block;padding:3px 8px;border-radius:6px;font-size:.65rem;font-weight:700}
        .chip.green{background:#e6f9ee;color:var(--ok)}.chip.red{background:#fde8e8;color:var(--danger)}
        .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
        .pump-card{border:1px solid var(--border);padding:.8rem;border-radius:var(--r);background:var(--card);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
        .pump-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
        .pump-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:700;font-size:.85rem}
        .pump-id{font-size:.5rem;color:var(--muted);font-weight:700;background:var(--input);padding:2px 5px;border-radius:4px}
        .progress-wrap{width:100%;height:6px;background:var(--input);border-radius:3px;margin-bottom:8px;overflow:hidden}
        .progress-bar{height:100%;width:100%;transition:width .1s linear;border-radius:3px}
        input[type=number],input[type=text],input[type=password],input[type=email]{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:.85rem;background:var(--input);color:var(--text);outline:none;font-weight:600}
        input:focus{border-color:var(--accent);background:var(--card)}
        .btn{padding:10px 16px;border:none;border-radius:var(--r);cursor:pointer;font-weight:700;font-size:.85rem;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;display:inline-flex;align-items:center;gap:6px}
        .btn:hover{transform:translateY(-1px)}
        .btn-primary{background:var(--accent);color:#fff;width:100%;box-shadow:0 4px 14px rgba(var(--accent-rgb),.28)}.btn-primary:hover{background:var(--accent-h);box-shadow:0 6px 18px rgba(var(--accent-rgb),.36)}.btn-primary:disabled{background:#ccc;cursor:not-allowed;box-shadow:none;transform:none}
        .btn-outline{background:var(--input);color:var(--text);border:1px solid var(--border)}
        .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}
        /* Feedback de operação (showOperationSuccess/showOperatorFeedback/etc.) precisa aparecer
           por cima de QUALQUER outro modal — muitas telas chamam feedback antes de fechar o
           próprio modal de formulário, e como todo .modal-bg tinha o mesmo z-index, quem estava
           depois no HTML tampava quem vinha antes (feedback ficava escondido atrás do formulário). */
        #modal-operator-feedback{z-index:1001}
        .modal{background:var(--card);padding:1.5rem;border-radius:var(--rl);width:90%;max-width:480px;max-height:90vh;overflow-y:auto}
        .modal h3{margin-bottom:1rem;font-size:1rem}
        .modal input{margin-bottom:8px}
        .modal-actions{display:flex;gap:10px;margin-top:1rem}
        .modal-actions .btn{flex:1;justify-content:center}
        .field-hint{font-size:.65rem;color:var(--muted);margin:-4px 0 8px;font-weight:600}
        .field-label{display:block;font-size:.72rem;font-weight:700;color:var(--text);margin-bottom:4px;opacity:.85}
        #console{margin-top:1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px;height:80px;overflow-y:auto;font-family:monospace;font-size:.7rem;display:none}
        .sel{padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--input);color:var(--text);font-weight:600;font-size:.8rem;outline:none;cursor:pointer}
        .action-btns{display:flex;gap:4px;flex-wrap:wrap}

        /* CADASTROS — navegação em drill-down (empresas → loja → máquinas) */
        .cadastros-breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-bottom:1rem}
        .cadastros-breadcrumb.hidden{display:none}
        .cadastros-breadcrumb .crumb-link{color:var(--accent);cursor:pointer;font-weight:600}
        .cadastros-breadcrumb .crumb-link:hover{text-decoration:underline}
        .cadastros-breadcrumb .crumb-sep{color:var(--border)}
        .cadastros-breadcrumb .crumb-current{color:var(--text);font-weight:700}
        .badge-sync{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:5px;background:#0984e3;color:#fff;letter-spacing:.3px;white-space:nowrap}
        .badge-matriz{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:5px;background:#8e44ad;color:#fff;letter-spacing:.3px;white-space:nowrap}
        .cadastros-detail-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:1rem}
        .cadastros-detail-title h3{font-size:1.05rem;font-weight:800;margin:0 0 3px;color:var(--text)}
        .cadastros-detail-title p{font-size:.78rem;color:var(--muted);margin:0}
        .cadastros-detail-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
        .cadastros-section-label{font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:1.2rem 0 .6rem}
        .crumb-back{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}
        .crumb-back:hover{background:var(--input)}
        .crumb-back svg{width:16px;height:16px;fill:var(--text)}
        .info-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
        .info-chip{display:inline-flex;align-items:center;gap:5px;background:var(--input);border:1px solid var(--border);border-radius:6px;padding:3px 9px;font-size:.72rem;color:var(--muted);font-weight:600}
        .info-chip svg{width:12px;height:12px;fill:currentColor;flex-shrink:0}
        .info-chip strong,.info-chip code{color:var(--text);font-weight:700}
        .info-chip code{font-family:monospace;background:none;padding:0}
        .cadastros-tabs-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:1rem;display:flex}
        .cadastros-tab{flex:1;padding:14px 16px;font-size:.85rem;font-weight:700;border:none;background:transparent;color:var(--muted);cursor:pointer;position:relative;transition:all .2s}
        .cadastros-tab:hover:not(.active){color:var(--text);background:var(--input)}
        .cadastros-tab.active{color:var(--accent)}
        .cadastros-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--accent);border-radius:3px 3px 0 0}
        .cadastros-search{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:.85rem;background:var(--input);color:var(--text);margin-bottom:14px}
        .cadastros-row{margin-bottom:.8rem;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;cursor:pointer;user-select:none}
        .cadastros-row:hover{background:var(--input)}

        /* PAGE TITLE */
        .page-title{display:flex;align-items:center;gap:10px;margin-bottom:1rem}
        .page-title h2{font-size:1.1rem;font-weight:800;color:var(--text)}
        .page-title .page-icon{width:28px;height:28px;fill:var(--accent)}

        /* DARK MODE TOGGLE */
        .theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 1.2rem;cursor:pointer;transition:.15s}
        .theme-toggle:hover{background:rgba(0,0,0,.04)}
        .theme-toggle-label{display:flex;align-items:center;gap:12px;font-size:.88rem;font-weight:600;color:var(--text)}
        .theme-toggle-label svg{width:20px;height:20px;fill:var(--text);flex-shrink:0}
        .toggle-switch{width:44px;height:24px;background:var(--border);border-radius:12px;position:relative;transition:.3s;flex-shrink:0;cursor:pointer;display:inline-block}
        .toggle-switch.active{background:var(--accent)}
        .toggle-switch:not(label)::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
        .toggle-switch.active::after{left:23px}
        label.toggle-switch{margin:0}
        label.toggle-switch input{display:none}
        label.toggle-switch .toggle-slider{display:block;width:44px;height:24px;background:var(--border);border-radius:12px;position:relative;transition:.3s}
        label.toggle-switch .toggle-slider::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
        label.toggle-switch input:checked + .toggle-slider{background:var(--accent)}
        label.toggle-switch input:checked + .toggle-slider::after{left:23px}
        /* "Modo Escuro" fica na sidebar (sempre escura) — precisa de cores fixas, não var(--text)/var(--border) */
        .sidebar .theme-toggle:hover{background:rgba(255,255,255,.06)}
        .sidebar .theme-toggle-label{color:rgba(255,255,255,.60)}
        .sidebar .theme-toggle-label svg{fill:rgba(255,255,255,.45)}
        .sidebar .toggle-switch{background:rgba(255,255,255,.15)}

        /* ==================== ABASTECIMENTO ==================== */
        .supply-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
        .supply-card{border:1px solid var(--border);padding:1rem;border-radius:var(--r);background:var(--card);transition:.2s;position:relative;overflow:hidden}
        .supply-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
        .supply-card.low{border-color:var(--warn);box-shadow:0 0 0 2px rgba(245,166,35,.25)}
        .supply-card.empty{border-color:var(--danger);box-shadow:0 0 0 2px rgba(234,29,44,.25)}
        .supply-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
        .supply-card-name{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:8px}
        .supply-color-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
        .supply-card-id{font-size:.5rem;color:var(--muted);font-weight:700;background:var(--input);padding:2px 5px;border-radius:4px}
        .supply-card-body{display:flex;align-items:flex-start;gap:12px}
        .supply-card-left{flex-shrink:0}
        .supply-card-right{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
        .supply-drop-wrap{position:relative;display:flex;justify-content:center;align-items:center;width:80px;height:110px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
        .supply-drop-svg{width:80px;height:110px;display:block;overflow:visible}
        .supply-drop-pct{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:900;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.3);letter-spacing:.5px;z-index:2}
        .supply-drop-pct.dark-text{color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,.2)}
        .supply-filling .supply-drop-wrap{animation:dropFillBounce 1.5s cubic-bezier(.36,.07,.19,.97) 1}
        @keyframes dropFillBounce{0%{transform:scale(1)}15%{transform:scale(.92)}30%{transform:scale(1.12)}45%{transform:scale(.97)}60%{transform:scale(1.05)}75%{transform:scale(.99)}100%{transform:scale(1)}}
        @keyframes bubbleRise{0%{transform:translateY(0) scale(1);opacity:.6}50%{opacity:.8}100%{transform:translateY(-60px) scale(.3);opacity:0}}
        @keyframes shimmer{0%{opacity:.08}50%{opacity:.2}100%{opacity:.08}}
        @keyframes glowPulse{0%,100%{filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}50%{filter:drop-shadow(0 4px 20px var(--glow-color,.3))}}
        .supply-drop-wrap[data-low="true"]{animation:glowPulse 2s ease-in-out infinite}
        .supply-bubble{animation:bubbleRise 3s ease-in infinite;transform-origin:center}
        .supply-shimmer{animation:shimmer 3s ease-in-out infinite}
        .supply-right-info{font-size:.8rem;font-weight:700;color:var(--text)}
        .supply-right-ml{font-size:.7rem;color:var(--muted);font-weight:600}
        .supply-right-refill{display:flex;flex-direction:column;gap:4px;margin-top:4px}
        .supply-right-refill input{width:100%;margin:0;padding:6px 8px;font-size:.75rem;border-radius:6px;border:1px solid var(--border);background:var(--input);color:var(--text);text-align:center}
        .supply-right-refill button{width:100%;padding:6px;font-size:.7rem;font-weight:700;border-radius:6px;cursor:pointer;border:none;background:var(--accent);color:#fff;transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px}
        .supply-right-refill button:hover{opacity:.85}
        .supply-right-drain{margin-top:6px}
        .btn-drain{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:6px;font-size:.65rem;font-weight:700;border-radius:6px;cursor:pointer;border:1px solid var(--danger);background:transparent;color:var(--danger);transition:.2s;letter-spacing:.5px}
        .btn-drain:hover{background:var(--danger);color:#fff}
        .supply-bar-wrap{width:100%;height:12px;background:var(--input);border-radius:6px;overflow:hidden;margin:8px 0}
        .supply-bar{height:100%;border-radius:6px;transition:width .4s ease}
        .supply-info{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;color:var(--muted);margin-bottom:10px}
        .supply-info .supply-ml{color:var(--text);font-weight:700}
        .supply-info .supply-pct{font-weight:700}
        .supply-pct.ok{color:var(--ok)}
        .supply-pct.warn{color:var(--warn)}
        .supply-pct.danger{color:var(--danger)}
        .supply-refill-row{display:flex;gap:6px;align-items:center}
        .supply-refill-row input{flex:1;margin:0}
        .supply-refill-row button{flex-shrink:0;white-space:nowrap}
        .supply-alert{background:rgba(245,166,35,.1);border:1px solid var(--warn);border-radius:10px;padding:10px 14px;margin-bottom:1rem;font-size:.8rem;font-weight:600;color:#b87a00;display:flex;align-items:center;gap:8px}
        .supply-alert svg{width:20px;height:20px;fill:var(--warn);flex-shrink:0}
        .supply-alert.danger{background:rgba(234,29,44,.08);border-color:var(--danger);color:var(--danger)}
        .supply-alert.danger svg{fill:var(--danger)}
        .supply-empty-msg{color:var(--muted);font-size:.85rem;text-align:center;padding:2rem 0}
        .supply-summary{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
        .supply-stat{background:var(--input);border-radius:10px;padding:10px 16px;flex:1;min-width:120px;text-align:center}
        .supply-stat .stat-val{font-size:1.3rem;font-weight:800;color:var(--text)}
        .supply-stat .stat-label{font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;margin-top:2px}
        .supply-stat.warn .stat-val{color:var(--warn)}
        .supply-stat.danger .stat-val{color:var(--danger)}

        /* DOSAGEM AUTOMÁTICA */
        .auto-dos-filters{display:flex;flex-direction:column;gap:12px}
        .auto-dos-row{display:flex;gap:12px}
        .auto-dos-field{flex:1;display:flex;flex-direction:column;gap:4px}
        .auto-dos-field label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
        .auto-dos-field .sel{width:100%}
        .auto-dos-field select:disabled,.auto-dos-field input:disabled{background:#e9ecef;color:#adb5bd;cursor:not-allowed;border-color:#dee2e6;opacity:.7}
        .auto-dos-field select:disabled option{color:#adb5bd}
        .auto-recipe-match{color:var(--ok);font-weight:700;font-size:.75rem}
        .auto-recipe-miss{color:var(--danger);font-weight:700;font-size:.75rem}
        .autocomplete-wrap{position:relative;width:100%}
        .autocomplete-wrap input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--input);color:var(--text);font-weight:600;font-size:.8rem;outline:none;text-transform:uppercase}
        .autocomplete-wrap input:focus{border-color:var(--accent)}
        .autocomplete-list{position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.1);display:none}
        .autocomplete-list.show{display:block}
        .autocomplete-item{padding:8px 12px;font-size:.8rem;font-weight:600;cursor:pointer;text-transform:uppercase;color:var(--text)}
        .autocomplete-item:hover{background:rgba(234,29,44,.15);color:var(--text)}
        .autocomplete-item.active{background:var(--accent);color:#fff}
        .autocomplete-count{padding:6px 12px;font-size:.65rem;color:var(--muted);font-weight:700;border-bottom:1px solid var(--border);text-transform:uppercase}
        .dosing-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999;flex-direction:column;gap:16px}
        .dosing-overlay .dosing-msg{background:var(--card);padding:2rem 2.5rem;border-radius:var(--rl);text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.3)}
        .dosing-overlay .dosing-msg h3{font-size:1.1rem;font-weight:800;color:var(--accent);margin-bottom:8px}
        .dosing-overlay .dosing-msg p{font-size:.85rem;color:var(--muted);font-weight:600}
        .dosing-peso{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);min-width:240px}
        .dosing-peso-total{font-size:1.5rem;font-weight:900;color:var(--text);letter-spacing:.3px;font-variant-numeric:tabular-nums}
        .dosing-peso-aviso{margin-top:8px;font-size:.7rem;font-weight:600;color:var(--warn);line-height:1.35;text-align:left}
        .dosing-progress{margin-top:14px;min-width:260px}
        .dosing-progress-track{height:10px;background:var(--input);border-radius:5px;overflow:hidden;border:1px solid var(--border)}
        .dosing-progress-fill{height:100%;width:0;background:var(--accent);border-radius:5px;transition:width .4s ease}
        .dosing-progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-variant-numeric:tabular-nums}
        .firmware-overlay-progress{display:none;margin-top:14px;text-align:left;min-width:280px;max-width:360px}
        .firmware-overlay-progress.active{display:block}
        .firmware-overlay-progress .firmware-progress-track{width:100%;height:10px;background:var(--border);border-radius:999px;overflow:hidden;border:1px solid var(--border)}
        .firmware-overlay-progress .firmware-progress-fill{height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .35s ease,background .2s ease}
        .firmware-overlay-progress .firmware-progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.2px}
        .firmware-overlay-progress .firmware-progress-hint{margin-top:8px;font-size:.68rem!important;font-weight:600!important;line-height:1.35;color:var(--muted)!important}
        /* Botão "DOSAR AGORA" do wizard de calibração que vira barra de progresso.
           O preenchimento é uma camada absoluta ATRÁS do texto (z-index), então o botão
           continua sendo um botão normal — não troca de elemento no meio da dosagem.
           Alimentado pelo mesmo doseProgress do firmware que move a barra da dosagem. */
        .cal-dose-btn{position:relative;overflow:hidden;isolation:isolate}
        .cal-dose-btn .cal-dose-fill{position:absolute;inset:0;width:0;background:rgba(255,255,255,.28);transition:width .4s ease;z-index:-1;pointer-events:none}
        .cal-dose-btn .cal-dose-label{position:relative;z-index:1}
        .cal-dose-btn.is-dosing{cursor:progress}
        .cal-dose-btn.is-done{background:#27ae60!important;border-color:#27ae60!important;color:#fff!important;cursor:default;opacity:1}
        .cal-dose-btn.is-done .cal-dose-fill{width:100%;background:transparent}
        .dosing-spinner{width:48px;height:48px;border:4px solid var(--border);border-top:4px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}
        @keyframes spin{to{transform:rotate(360deg)}}
        /* Loading feedback reutilizável: botões e selects */
        .btn-spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top:2.5px solid #fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
        .btn-spinner.dark{border-color:var(--border);border-top-color:var(--accent)}
        .sel-wrap{position:relative}
        .sel-wrap .sel-spinner{display:none;position:absolute;right:10px;top:50%;margin-top:-7.5px;width:15px;height:15px;border:2px solid var(--border);border-top:2px solid var(--accent);border-radius:50%;animation:spin .7s linear infinite;pointer-events:none}
        .sel-wrap.loading .sel-spinner{display:block}
        .sel-wrap.loading select{opacity:.6;-webkit-appearance:none;-moz-appearance:none;appearance:none}
        .inline-spinner{width:22px;height:22px;border:3px solid var(--border);border-top:3px solid var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 8px}
        .modal-confirm-body{text-align:center;padding:1rem 0}
        .modal-confirm-body svg{width:48px;height:48px;fill:var(--warn);margin-bottom:.8rem}
        .modal-confirm-body p{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
        .modal-confirm-body .confirm-detail{font-size:.75rem;color:var(--muted);font-weight:500}
        .operator-feedback-modal{text-align:center;max-width:420px}
        .operator-feedback-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .9rem;font-size:1.45rem;font-weight:900;color:#fff}
        .operator-feedback-icon.success{background:var(--ok)}
        .operator-feedback-icon.error{background:var(--danger)}
        .operator-feedback-icon.info{background:var(--accent)}
        .operator-feedback-icon.warning{background:var(--warn)}
        #operator-feedback-title{font-size:1rem;font-weight:900;margin-bottom:.55rem;color:var(--text)}
        #operator-feedback-message{font-size:.82rem;color:var(--muted);font-weight:600;line-height:1.45;white-space:pre-line;margin-bottom:1rem}

        /* RESPONSIVE */
        @media(max-width:600px){
            .hdr-right .badge{font-size:.5rem;padding:3px 5px}
            .hdr-right .badge.hide-mobile{display:none}
            .logo-text{display:none}
            .logo{width:140px;height:34px;flex-basis:140px}
            .sd-brand-logo--header{width:140px;height:auto;max-width:140px;max-height:34px}
            .sd-brand-logo--sidebar{width:170px;max-width:170px;max-height:64px}
            .sidebar{width:min(76vw,270px)}
            .nav-item{gap:11px;padding:10px .95rem;font-size:.83rem}
            .hdr-center{display:none}
            .hdr-left{min-width:auto}
            .hdr-right{min-width:auto}
            .hdr-selects-mobile{display:flex!important;flex-wrap:wrap;gap:6px;padding:8px 10px}
            .hdr-selects-mobile .sel{flex:1 1 calc(50% - 3px);min-width:calc(50% - 3px);max-width:calc(50% - 3px);font-size:.72rem;padding:7px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
            .hdr-selects-mobile .sel.hidden{display:none!important}
            .hdr-selects-mobile.single-select{display:none!important}
            .hdr-center.client-mobile{display:flex!important;flex:1;justify-content:center}
            .hdr-center.client-mobile .sel{font-size:.72rem;padding:7px 10px;max-width:none;width:auto}
            /* Cards da Início ficam 2x2 no mobile — nenhum deles ocupa linha inteira. */
            .hide-mobile-cal{display:none}
            .action-btns{flex-direction:column;gap:4px}
            .action-btns .btn-sm{width:100%;text-align:center;padding:8px}
            header{height:50px;overflow:visible}
            /* O top:50px das faixas (.admin-banner / .role-impersonation-banner)
               que acompanham esse header de 50px fica logo depois das regras-base
               delas, mais abaixo no arquivo — senão a base top:56px, que vem
               DEPOIS deste @media, ganharia a cascata e voltaria o vão. */
            .hamburger{width:36px;height:36px}
            .logo img{height:24px}
            .hdr-right{flex-wrap:nowrap;gap:4px}
            .hdr-right .btn-sm{font-size:.6rem;padding:5px 8px;white-space:nowrap}
            /* Cabeçalho mobile pode ter 2 controles de largura variável (empresa
               ativa, máquina ativa) disputando o mesmo espaço — em vez de deixar
               o conjunto vazar pra fora da tela, cada um trunca o próprio texto com
               reticências dentro de um teto fixo, garantindo que a soma sempre caiba.
               SAIR saiu do cabeçalho (foi pra sidebar, ver .sidebar-user-card). */
            .admin-company-filter{min-width:0;flex-shrink:1}
            #admin-company-btn.admin-company-btn{max-width:128px;min-width:0;padding:5px 7px;font-size:.66rem;overflow:hidden}
            #admin-company-btn-label.admin-company-btn-label{max-width:70px}
            #btn-scope-select.btn-scope{max-width:88px;min-width:0;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
            /* Sem o chip de máquina por perto (ainda não entrou numa loja), a empresa
               não precisa dividir espaço com ninguém — solta o teto de 128px/70px pra
               aproveitar a tela toda em vez de truncar à toa. */
            .hdr-right:not(:has(#btn-scope-select:not(.hidden))) #admin-company-btn.admin-company-btn{max-width:none}
            .hdr-right:not(:has(#btn-scope-select:not(.hidden))) #admin-company-btn-label.admin-company-btn-label{max-width:none}
            .sd-brand-logo--header{width:120px;max-width:120px;max-height:32px;margin-left:-16px}
            .hdr-selects-mobile{top:50px}
            .supply-grid{grid-template-columns:1fr}
            /* Botões de ação da empresa lado a lado no mobile */
            .action-btns.empresa-btns{flex-direction:row!important;flex-wrap:wrap;gap:6px}
            .action-btns.empresa-btns .btn-sm{width:auto!important;padding:6px 10px;font-size:.7rem}
            .auto-dos-row{flex-direction:column;gap:8px}
            /* Tabela responsiva com scroll horizontal */
            .tbl-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1.2rem;padding:0 1.2rem}

            .tbl{min-width:520px}
            .tbl td .action-btns{flex-direction:row;flex-wrap:wrap;gap:4px}
            .tbl td .action-btns .btn-sm{width:auto;padding:4px 8px;font-size:.65rem}
        }
    
/* Sub-abas de Gerenciar Produtos */
.produtos-tab { transition: all .2s; }
.produtos-tab.active { color: var(--accent) !important; }
.produtos-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
.produtos-tab:hover:not(.active) { color: var(--text) !important; background: var(--input); }
.markup-input-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.markup-input { width: 60px; padding: 4px 6px; border: 1.5px solid var(--border); border-radius: 6px; font-size: .75rem; font-weight: 600; text-align: center; background: var(--input); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.markup-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(0,119,255,.15); }
.markup-input.saving { border-color: #f39c12; box-shadow: 0 0 0 3px rgba(243,156,18,.15); }
.markup-input.saved { border-color: #00b894; box-shadow: 0 0 0 3px rgba(0,184,148,.15); }
.markup-input.save-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,71,87,.15); }
.markup-percent { font-weight: 600; font-size: .75rem; color: var(--muted); }
.markup-save-indicator { font-size: .62rem; font-weight: 700; margin-left: 4px; transition: opacity .3s; }
.markup-save-indicator.saving { color: #f39c12; }
.markup-save-indicator.saved { color: #00b894; }
.markup-save-indicator.error { color: var(--danger); }
.price-final { font-weight: 600; font-size: .75rem; }
.cost-display { font-weight: 600; font-size: .75rem; }
/* Scroll vertical para tabelas com mais de 10 linhas (~35px por linha + header = ~420px) */
.tbl-scroll{max-height:500px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--card)}
.tbl-scroll::-webkit-scrollbar{width:6px}
.tbl-scroll::-webkit-scrollbar-track{background:var(--card);border-radius:3px}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
.tbl-scroll::-webkit-scrollbar-thumb:hover{background:#ff5252}
.tbl-scroll thead th{position:sticky;top:0;z-index:2;background:var(--card);box-shadow:0 1px 0 rgba(255,255,255,.08)}

        /* ==================== RECEITAS PAGE ==================== */
        .receitas-shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1rem;align-items:start}
        .receitas-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--shadow);padding:1rem}
        .receitas-panel-title{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.85rem}
        .receitas-panel-title h3{margin:0;font-size:.92rem;font-weight:850;color:var(--text);text-transform:uppercase;letter-spacing:.35px}
        .receitas-help{font-size:.72rem;color:var(--muted);line-height:1.45;margin-bottom:.85rem}
        .receitas-create{display:flex;gap:.5rem;margin-bottom:.85rem}
        .receitas-create input{min-width:0;flex:1;text-transform:uppercase}
        .receitas-collection-list{display:flex;flex-direction:column;gap:.55rem;max-height:610px;overflow:auto;padding-right:.15rem}
        .receitas-collection-card{width:100%;text-align:left;border:1px solid var(--border);background:var(--input);color:var(--text);border-radius:14px;padding:.78rem .85rem;cursor:pointer;transition:.15s;font-weight:800;font-size:.78rem;letter-spacing:.2px;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
        .receitas-collection-card:hover{border-color:var(--accent)}
        .receitas-collection-card.active{background:rgba(234,29,44,.08);border-color:var(--accent);color:var(--accent)}
        .receitas-collection-card small{font-size:.62rem;color:var(--muted);font-weight:750;text-transform:uppercase;white-space:nowrap}
        .receitas-main-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
        .receitas-selected-label{display:inline-flex;align-items:center;gap:.4rem;background:rgba(234,29,44,.08);color:var(--accent);border:1px solid rgba(234,29,44,.16);border-radius:999px;padding:.38rem .7rem;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.3px}
        .receitas-actions-bar{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:flex-end}
        .receitas-import-box{background:var(--input);border:1px dashed var(--border);border-radius:14px;padding:.85rem;margin-bottom:.9rem}
        .receitas-toolbar{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
        .receitas-toolbar input{flex:1;text-transform:uppercase}
        .receitas-filtros{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
        .receitas-filtro-sel{font-size:.72rem;padding:6px 10px;min-width:0;flex:1;text-transform:uppercase}
        .receitas-table-wrap{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card)}
        .receitas-table{width:100%;border-collapse:collapse;font-size:.78rem}
        .receitas-table th{background:var(--input);color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.45px;text-align:left;padding:.72rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
        .receitas-table td{padding:.72rem .75rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)}
        .receitas-table tr:last-child td{border-bottom:none}
        .receitas-table tr:hover td{background:rgba(0,0,0,.025)}
        .receitas-color-name{font-weight:850;color:var(--text)}
        .receitas-pill{display:inline-flex;align-items:center;border-radius:999px;padding:.18rem .45rem;background:var(--input);border:1px solid var(--border);font-size:.66rem;font-weight:750;color:var(--muted);margin:.08rem .12rem .08rem 0;white-space:nowrap}
        .receitas-empty{padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.84rem;background:var(--card)}
        .receitas-footer{display:flex;gap:.65rem;margin-top:.8rem;align-items:center;justify-content:center;flex-wrap:wrap}
        @media (max-width: 900px){.receitas-shell{grid-template-columns:1fr}.receitas-main-head{flex-direction:column}.receitas-actions-bar{justify-content:flex-start}.receitas-table-wrap{overflow-x:auto}.receitas-table{min-width:760px}.receitas-create{flex-direction:column}.receitas-create .btn-sm{width:100%}}

        /* ==================== ADMIN DASHBOARD ==================== */
        .admin-banner{display:none;align-items:center;gap:10px;padding:8px 1.2rem;background:linear-gradient(90deg,#ea1d2c 0%,#c41020 100%);color:#fff;font-size:.78rem;font-weight:700;position:sticky;top:56px;z-index:98;box-shadow:0 2px 8px rgba(234,29,44,.3)}
        .admin-banner.active{display:flex}
        .admin-banner-left{display:flex;align-items:center;gap:10px}
        .admin-banner-left svg{width:16px;height:16px;fill:#fff;flex-shrink:0}
        /* Variante 'admin'/'support': roxo + escudo-estrela, mesma identidade visual do
           avatar 'admin' (ROLE_AVATAR) e do ícone do Dashboard Administração — o banner
           não pode anunciar "ADMINISTRADOR" pra quem é Gerente (mesmo motivo do
           ADMIN_DASH_ICON_PLAIN em renderAdminDashboard). */
        .admin-banner.superadmin{background:linear-gradient(90deg,#7C3AED 0%,#5B21B6 100%);box-shadow:0 2px 8px rgba(124,58,237,.35)}

        /* Banner do "Entrar como" (impersonar Suporte/Gerente/Cliente) —
           cor própria (azul), pra nunca ser confundido com o banner de contexto
           acima (vermelho pra GERENTE, roxo pra ADMINISTRADOR): aqui a sessão é de
           verdade a do usuário alvo, não um filtro de escopo do administrador. */
        .role-impersonation-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 1.2rem;background:linear-gradient(90deg,#2563eb 0%,#1d4ed8 100%);color:#fff;font-size:.78rem;font-weight:700;position:sticky;top:56px;z-index:98;box-shadow:0 2px 8px rgba(37,99,235,.35);flex-wrap:wrap}
        .role-impersonation-left{display:flex;align-items:center;gap:10px}
        .role-impersonation-left svg{width:16px;height:16px;fill:#fff;flex-shrink:0}
        .role-impersonation-banner button{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:.68rem;font-weight:800;padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.15s}
        .role-impersonation-banner button:hover{background:rgba(255,255,255,.28)}
        /* No mobile o header é 50px (ver @media acima), mas estas faixas grudam
           com top:56px — e position:sticky não deixa o elemento subir acima do
           próprio top, então cada uma era empurrada 6px pra baixo e sobrava um vão
           branco sob o header. Precisa vir DEPOIS das regras-base (top:56px) pra
           ganhar a cascata; dentro do @media lá de cima, a base venceria. */
        @media(max-width:600px){
            .admin-banner,.role-impersonation-banner{top:50px}
        }

        .admin-company-filter{display:none;align-items:center;gap:6px;position:relative}
        .admin-company-filter.active{display:flex}
        .admin-company-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:8px;background:var(--input);font-size:.7rem;font-weight:700;cursor:pointer;color:var(--text);transition:.15s;white-space:nowrap;max-width:200px}
        .admin-company-btn.locked{cursor:default}
        .admin-company-btn.locked .chevron{display:none}
        .admin-company-btn:hover{background:var(--border)}
        .admin-company-btn svg{width:14px;height:14px;fill:var(--accent);flex-shrink:0}
        .admin-company-btn .chevron{width:12px;height:12px;fill:var(--muted);margin-left:2px;transition:.2s}
        .admin-company-btn.open .chevron{transform:rotate(180deg)}
        .admin-company-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;overflow:hidden;animation:dropdownFade .15s ease}
        @keyframes dropdownFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
        .admin-company-dropdown-header{padding:10px 14px 6px;font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
        .admin-company-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:.12s;font-size:.8rem;font-weight:600;color:var(--text)}
        .admin-company-dropdown-item:hover{background:var(--bg)}
        .admin-company-dropdown-item.active{color:var(--accent)}
        .admin-company-dropdown-item svg{width:16px;height:16px;fill:var(--muted);flex-shrink:0}
        .admin-company-dropdown-item.active svg{fill:var(--accent)}
        .admin-company-dropdown-item .check{width:14px;height:14px;fill:var(--accent);margin-left:auto;opacity:0}
        .admin-company-dropdown-item.active .check{opacity:1}
        .admin-company-search{padding:8px 14px;border-bottom:1px solid var(--border)}
        .admin-company-search input{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:.78rem;background:var(--bg);color:var(--text);outline:none;box-sizing:border-box}
        .admin-company-search input:focus{border-color:var(--accent)}
        .admin-company-list{max-height:220px;overflow-y:auto}
        .admin-dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
        @media(max-width:900px){.admin-dash-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:480px){.admin-dash-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}}
        .admin-dash-card{background:var(--card);border-radius:var(--r);padding:1.1rem 1rem;border:1px solid var(--border);display:flex;flex-direction:column;gap:.4rem;transition:transform .2s ease,box-shadow .2s ease}
        .admin-dash-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
        .admin-dash-card-label{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
        .admin-dash-card-value{font-size:1.6rem;font-weight:900;color:var(--text);line-height:1}
        .admin-dash-card-sub{font-size:.7rem;color:var(--muted);font-weight:500}
        .admin-dash-card-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:.2rem}
        .admin-dash-card-icon svg{width:18px;height:18px}
        .admin-dash-card.accent .admin-dash-card-value{color:var(--accent)}
        .admin-dash-card.ok .admin-dash-card-value{color:var(--ok)}
        .admin-dash-card.warn .admin-dash-card-value{color:var(--warn)}
        .admin-dash-card.purple .admin-dash-card-value{color:#6c5ce7}
        .admin-dash-section{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:1.2rem 0 .6rem}
        .admin-dash-table{width:100%;border-collapse:collapse;font-size:.8rem}
        .admin-dash-table th{text-align:left;font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:.5rem .8rem;border-bottom:2px solid var(--border)}
        .admin-dash-table td{padding:.65rem .8rem;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);font-weight:500}
        .admin-dash-table tr:last-child td{border-bottom:none}
        .admin-dash-table tr:hover td{background:var(--bg)}
        .admin-dash-table .btn-enter{padding:4px 12px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.7rem;font-weight:700;cursor:pointer;transition:.15s}
        .admin-dash-table .btn-enter:hover{background:var(--accent-h)}
        .admin-dash-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0}
        .admin-dash-status-dot.ok{background:var(--ok)}
        .admin-dash-status-dot.danger{background:var(--danger)}
        .admin-dash-status-dot.warn{background:var(--warn)}
        .admin-dash-reservoir-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;min-width:60px}
        .admin-dash-reservoir-bar-fill{height:100%;border-radius:3px;transition:.3s}
        .admin-dash-reservoir-bar-fill.ok{background:var(--ok)}
        .admin-dash-reservoir-bar-fill.warn{background:var(--warn)}
        .admin-dash-reservoir-bar-fill.danger{background:var(--danger)}
        /* ===== CONTEXTO DE LOJA (sidebar admin) ===== */
        /* Contexto de Loja — dropdown absoluto igual ao Empresa Ativa */
        .sidebar-context-filter{position:relative;display:none;align-items:center;gap:6px;margin:.5rem 1rem 0}
        .sidebar-context-filter.active{display:flex}
        .sidebar-context-header{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);cursor:pointer;user-select:none;transition:.15s;font-size:.78rem;font-weight:700;color:var(--text);white-space:nowrap;flex:1;min-width:0}
        .sidebar-context-header:hover{border-color:var(--accent);color:var(--accent)}
        .sidebar-context-header.open{border-color:var(--accent);color:var(--accent)}
        .sidebar-context-header svg.store-icon{width:20px;height:20px;fill:currentColor;flex-shrink:0}
        .ctx-chevron{width:12px!important;height:12px!important;margin-left:auto;transition:transform .2s;fill:var(--muted)!important;flex-shrink:0}
        .sidebar-context-header:hover .ctx-chevron{fill:var(--accent)!important}
        .sidebar-context-header.open .ctx-chevron{transform:rotate(180deg)}
        .sidebar-context-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:200;overflow:hidden;display:none}
        .sidebar-context-dropdown.open{display:block;animation:ctxDropdownFade .15s ease}
        @keyframes ctxDropdownFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
        .sidebar-context-dropdown-header{padding:10px 14px 6px;font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
        .sidebar-context-company{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:.12s;font-size:.8rem;font-weight:600;color:var(--text)}
        .sidebar-context-company:hover{background:var(--hover)}
        .sidebar-context-company.active{background:rgba(var(--accent-rgb),.08);color:var(--accent)}
        .sidebar-context-company.active svg{fill:var(--accent)}
        .sidebar-context-company svg{width:16px;height:16px;fill:var(--muted);flex-shrink:0}
        .sidebar-context-company .ctx-company-sub{font-size:.68rem;color:var(--muted);font-weight:400}
        .sidebar-context-company.active .ctx-company-sub{color:var(--accent)}
        .sidebar-context-company .ctx-check{width:14px;height:14px;fill:var(--accent);margin-left:auto;opacity:0}
        .sidebar-context-company.active .ctx-check{opacity:1}
        .sidebar-context-unit{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 2rem;cursor:pointer;transition:.12s;font-size:.8rem;font-weight:600;color:var(--text)}
        .sidebar-context-unit:hover{background:var(--hover)}
        .sidebar-context-unit.active{background:rgba(var(--accent-rgb),.08);color:var(--accent)}
        .sidebar-context-unit svg{width:16px;height:16px;fill:var(--muted);flex-shrink:0}
        .sidebar-context-unit.active svg{fill:var(--accent)}
        .sidebar-context-unit .ctx-unit-sub{font-size:.68rem;color:var(--muted);font-weight:400}
        .sidebar-context-unit.active .ctx-unit-sub{color:var(--accent)}
        .sidebar-context-unit .ctx-check{width:14px;height:14px;fill:var(--accent);margin-left:auto;opacity:0}
        .sidebar-context-unit.active .ctx-check{opacity:1}
        .sidebar-context-list{max-height:280px;overflow-y:auto}
        .sidebar-context-divider{height:1px;background:var(--border);margin:4px 1.1rem}
        /* Header: dropdown de empresa-mãe */
        .admin-company-btn{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;cursor:pointer;background:var(--card);border:1px solid var(--border);font-size:.78rem;font-weight:700;color:var(--text);transition:.15s;white-space:nowrap;max-width:220px;overflow:hidden}
        .admin-company-btn:hover{border-color:var(--accent);color:var(--accent)}
        .admin-company-btn.open{border-color:var(--accent);color:var(--accent)}
        .admin-company-btn svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
        .admin-company-btn .chevron{transition:.2s;margin-left:auto;flex-shrink:0}
        .admin-company-btn.open .chevron{transform:rotate(180deg)}
        /* Sem isso o <span> ignora max-width (é inline) e o nome da empresa
           empurra o botão SAIR pra fora da tela no mobile — ver relato do usuário. */
        .admin-company-btn-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;min-width:0;vertical-align:middle}
        .admin-company-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:200;overflow:hidden}
        .admin-company-dropdown-header{padding:10px 14px 6px;font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
        .admin-company-search{padding:0 10px 8px}
        .admin-company-search input{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:.78rem;outline:none;box-sizing:border-box}
        .admin-company-list{max-height:280px;overflow-y:auto}
        .admin-company-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:.12s;font-size:.8rem;font-weight:600}
        .admin-company-item:hover{background:var(--hover)}
        .admin-company-item.selected{background:rgba(var(--accent-rgb),.08);color:var(--accent)}
        .admin-company-item svg{width:16px;height:16px;fill:var(--muted);flex-shrink:0}
        .admin-company-item.selected svg{fill:var(--accent)}
        .admin-company-item .check{margin-left:auto;opacity:0}
        .admin-company-item.selected .check{opacity:1;fill:var(--accent)}
        .admin-company-item-sub{font-size:.68rem;color:var(--muted);font-weight:400}
        .admin-company-item-mode{font-size:.68rem;color:var(--accent);font-weight:700;background:rgba(var(--accent-rgb),.1);padding:1px 6px;border-radius:4px}