/* ==================================================================================
   Uai Technology — UaiFlow OS Global Stylesheet
   v4.1 — + Fonte de marca ITC Avant Garde Gothic (títulos / nome da marca)
   ================================================================================== */

/* ── Fonte da marca ─────────────────────────────────────────────────────────────
   ITC Avant Garde Gothic Demi — usada na identidade visual (nome da empresa,
   "UaiFlow OS", títulos). O navegador lê OTF direto via format('opentype').
   font-display: swap evita "texto invisível" enquanto a fonte carrega. */
@font-face {
    font-family: 'Avant Garde';
    src: url('fonts/AvantGardeDemi.otf') format('opentype');
    /* Peso único declarado como "normal": assim o navegador SINTETIZA o negrito
       quando pedimos font-weight:bold (ex.: "UaiFlow"), e mantém o peso natural
       no "normal" (ex.: "OS"). Sem isto (range 400-700) não haveria contraste. */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Variáveis de tema ──────────────────────────────────────────────────────── */
:root {
    /* Fonte da marca */
    --font-brand: 'Avant Garde', 'Inter', system-ui, -apple-system, sans-serif;

    /* Cores Dark Theme (Premium Agressivo) */
    --bg-primary:        #020617; /* Slate ultra profundo */
    --bg-secondary:      rgba(255, 255, 255, 0.02); /* Fundo sutil */
    --bg-tertiary:       rgba(15, 23, 42, 0.7); /* Inputs */
    --text-primary:      #f8fafc;
    --text-secondary:    #cbd5e1;
    --border-color:      rgba(255, 255, 255, 0.1); 
    --accent-color:      #f97316;
    --accent-text-color: #ffffff;
    --focus-ring:        rgba(249, 115, 22, 0.5);
    
    --control-height-sm: 2.5rem;
    --control-height-md: 3.25rem;
    --control-height-lg: 3.75rem;
    --radius-control:    1.25rem;
    --radius-control-lg: 1.75rem;

    /* Escala tipográfica responsiva */
    --text-2xs:  clamp(10px, 0.65vw + 7.5px, 11px);
    --text-xs:   clamp(11px, 0.65vw + 8.5px, 12px);
    --text-sm:   clamp(12px, 0.65vw + 9.5px, 14px);
    --text-base: clamp(13px, 0.65vw + 10px,  15px);
    --text-lg:   clamp(14px, 0.8vw  + 10px,  18px);
    --text-xl:   clamp(16px, 1vw    + 10px,  22px);
    --text-2xl:  clamp(20px, 1.5vw  + 10px,  28px);
    --text-3xl:  clamp(24px, 2vw    + 10px,  36px);
    
    /* Efeitos de Vidro e Brilhos Agressivos */
    --glass-bg:          rgba(15, 23, 42, 0.45);
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-border-top:  rgba(255, 255, 255, 0.25);
    --glass-shadow:      0 25px 50px -12px rgba(0, 0, 0, 0.65), 
                         0 0 0 1px rgba(255,255,255,0.03),
                         inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --glow-accent:       rgba(249, 115, 22, 0.35);
}

/* ── Classes Mágicas de Glassmorphism (Premium Design Playbook) ── */
.glass-panel {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid var(--glass-border) !important;
    border-top: 1px solid var(--glass-border-top) !important;
    border-radius: 28px !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--text-primary);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.glass-panel::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.03), transparent);
    transform: skewX(-25deg);
    transition: all 0.7s ease;
    pointer-events: none;
}
.glass-panel:hover::before {
    left: 200%;
}
.glass-panel:hover {
    transform: translateY(-1px);
    border-top-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.7), 
                0 0 12px rgba(249, 115, 22, 0.12),
                inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

:root.light-theme {
    --bg-primary:        #f1f5f9; /* Slate claro acetinado */
    --bg-secondary:      rgba(255, 255, 255, 0.70); /* Vidro branco translúcido */
    --bg-tertiary:       #ffffff;
    --text-primary:      #0f172a;
    --text-secondary:    #475569;
    --border-color:      rgba(15, 23, 42, 0.18);
    --glass-bg:          rgba(255, 255, 255, 0.70);
    --glass-border:      rgba(15, 23, 42, 0.12);
    --glass-shadow:      0 8px 32px 0 rgba(15, 23, 42, 0.06), 
                         inset 0 1px 0 rgba(255, 255, 255, 0.80);
    --glow-accent:       rgba(234, 88, 12, 0.15);
}

/* ── Inputs legíveis no tema claro ─────────────────────────────────────────── */
.light-theme .form-input,
.light-theme input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.light-theme select,
.light-theme textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    -webkit-text-fill-color: #0f172a !important;
}
.light-theme .form-input::placeholder,
.light-theme input::placeholder,
.light-theme textarea::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}
.light-theme .form-input:focus,
.light-theme input:not([type="file"]):focus,
.light-theme select:focus,
.light-theme textarea:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
}
.light-theme select option {
    background: #ffffff;
    color: #0f172a;
}

/* ── Texto e seções escuras no tema claro ──────────────────────────────────── */
/* Textos hardcoded brancos/cinzas que ficam invisíveis em fundo claro */
.light-theme .uai-modal-body .text-white,
.light-theme .uai-modal-body p.text-white,
.light-theme .uai-modal-body h3.text-white,
.light-theme .uai-modal-body span.text-white,
.light-theme .uai-modal-body label.text-white,
.light-theme .uai-modal-body div.text-white {
    color: #1e293b !important;
}
.light-theme .uai-modal-body .text-gray-300 { color: #475569 !important; }
.light-theme .uai-modal-body .text-gray-400 { color: #64748b !important; }
.light-theme .uai-modal-body .text-gray-500 { color: #64748b !important; }
.light-theme .uai-modal-body .text-gray-600 { color: #475569 !important; }

/* Seções com fundo escuro hardcoded dentro de formulários / modais */
.light-theme .uai-modal-body [class*="bg-gray-8"],
.light-theme .uai-modal-body [class*="bg-gray-9"],
.light-theme .uai-modal-body [class*="bg-\[#0b0f"],
.light-theme #modal-container [class*="bg-gray-8"],
.light-theme #modal-container [class*="bg-gray-9"],
.light-theme #modal-container [class*="bg-slate-8"],
.light-theme #modal-container [class*="bg-slate-9"],
.light-theme #modal-container [class*="bg-\[#0b0f"] {
    background-color: rgba(241, 245, 249, 0.85) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Painéis temáticos coloridos no tema claro */
.light-theme #modal-container [class*="bg-indigo-95"],
.light-theme #modal-container [class*="bg-indigo-90"],
.light-theme .uai-modal-body [class*="bg-indigo-95"],
.light-theme .uai-modal-body [class*="bg-indigo-90"] {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
}
.light-theme #modal-container [class*="bg-indigo-95"] p,
.light-theme #modal-container [class*="bg-indigo-90"] p { color: #3730a3 !important; }

.light-theme #modal-container [class*="bg-purple-95"],
.light-theme #modal-container [class*="bg-purple-90"],
.light-theme .uai-modal-body [class*="bg-purple-95"],
.light-theme .uai-modal-body [class*="bg-purple-90"] {
    background-color: #faf5ff !important;
    border-color: #e9d5ff !important;
}
.light-theme #modal-container [class*="bg-purple-95"] p,
.light-theme #modal-container [class*="bg-purple-90"] p { color: #6b21a8 !important; }

.light-theme #modal-container [class*="bg-cyan-95"],
.light-theme #modal-container [class*="bg-cyan-90"],
.light-theme .uai-modal-body [class*="bg-cyan-95"],
.light-theme .uai-modal-body [class*="bg-cyan-90"] {
    background-color: #ecfeff !important;
    border-color: #a5f3fc !important;
}
.light-theme #modal-container [class*="bg-cyan-95"] p,
.light-theme #modal-container [class*="bg-cyan-90"] p { color: #155e75 !important; }

.light-theme #modal-container [class*="bg-emerald-95"],
.light-theme #modal-container [class*="bg-emerald-90"],
.light-theme .uai-modal-body [class*="bg-emerald-95"],
.light-theme .uai-modal-body [class*="bg-emerald-90"] {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

/* Bordas de seção escuras viram slate */
.light-theme .uai-modal-body [class*="border-gray-7"] { border-color: #e2e8f0 !important; }
.light-theme .uai-modal-body [class*="border-gray-8"] { border-color: #e2e8f0 !important; }

/* Tabelas dentro de modais */
.light-theme .uai-modal-body thead tr,
.light-theme .uai-modal-body [class*="bg-\[#0b0f1a\]"] {
    background-color: #f8fafc !important;
}
.light-theme .uai-modal-body tbody tr:hover {
    background-color: rgba(248, 250, 252, 0.8) !important;
}

/* Seção de stat/kpi com texto branco */
.light-theme .uai-modal-body .font-black.text-white,
.light-theme .uai-modal-body .font-bold.text-white {
    color: #0f172a !important;
}

/* Corrigir o contraste de botões coloridos no tema claro */
.light-theme .uai-btn--ghost {
    --uai-btn-bg: rgba(0, 0, 0, 0.05);
    --uai-btn-bg-hover: rgba(0, 0, 0, 0.1);
    --uai-btn-border: rgba(0, 0, 0, 0.15);
    --uai-btn-border-hover: rgba(0, 0, 0, 0.25);
    --uai-btn-color: #1f2937;
}

.light-theme .uai-btn--secondary {
    --uai-btn-color: #312e81; /* Dark indigo */
    --uai-btn-bg: rgba(99, 102, 241, 0.12);
    --uai-btn-border: rgba(99, 102, 241, 0.3);
}

.light-theme .uai-btn--success {
    --uai-btn-color: #064e3b; /* Dark emerald */
    --uai-btn-bg: rgba(22, 163, 74, 0.12);
    --uai-btn-border: rgba(22, 163, 74, 0.3);
}

.light-theme .uai-btn--warning {
    --uai-btn-color: #78350f; /* Dark amber */
    --uai-btn-bg: rgba(217, 119, 6, 0.12);
    --uai-btn-border: rgba(217, 119, 6, 0.3);
}

.light-theme .uai-btn--danger {
    --uai-btn-color: #7f1d1d; /* Dark red */
    --uai-btn-bg: rgba(220, 38, 38, 0.12);
    --uai-btn-border: rgba(220, 38, 38, 0.3);
}

/* Overrides para o Hub de Links Úteis no tema claro */
.light-theme #useful-links-hub section {
    background-color: #f9fafb !important;
    border-color: #cbd5e1 !important;
}
.light-theme #useful-links-hub h3 {
    color: #0f172a !important;
}
.light-theme #useful-links-hub article {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
.light-theme #useful-links-hub p.text-white {
    color: #0f172a !important;
}
.light-theme #useful-links-hub p.text-slate-400 {
    color: #475569 !important;
}
.light-theme #useful-links-hub div.bg-blue-500\/10 {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}
.light-theme #useful-links-hub p.text-blue-300 {
    color: #1d4ed8 !important;
}

/* ── Formas de Pagamento (payment-method-*) ─────────────────────────────────── */
.light-theme .payment-method-row {
    background: rgba(109, 40, 217, 0.07) !important;
    border-color: rgba(109, 40, 217, 0.25) !important;
}
.light-theme .payment-method-name {
    color: #3b0764 !important;
}
.light-theme .payment-method-amount {
    color: #6d28d9 !important;
}
.light-theme .payment-method-remove {
    background: rgba(220, 38, 38, 0.10) !important;
    color: #991b1b !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}
.light-theme .payment-summary {
    background: rgba(241, 245, 249, 0.85) !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
}
.light-theme .payment-summary p {
    color: #1e293b !important;
}
.light-theme .payment-summary span {
    color: #475569 !important;
}
.light-theme .payment-summary strong {
    color: #0f172a !important;
}
.light-theme .payment-summary[data-payment-state="ok"] {
    background: rgba(22, 163, 74, 0.08) !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
}
.light-theme .payment-summary[data-payment-state="ok"] p,
.light-theme .payment-summary[data-payment-state="ok"] strong {
    color: #166534 !important;
}
.light-theme .payment-summary[data-payment-state="pending"] {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
.light-theme .payment-summary[data-payment-state="pending"] p,
.light-theme .payment-summary[data-payment-state="pending"] strong {
    color: #92400e !important;
}
.light-theme .payment-summary[data-payment-state="error"] {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
.light-theme .payment-summary[data-payment-state="error"] p,
.light-theme .payment-summary[data-payment-state="error"] strong {
    color: #991b1b !important;
}

/* ── Notificação / drawer (cores hardcoded dark) ─────────────────────────────── */
.light-theme #notif-drawer {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
.light-theme #notif-drawer .text-white,
.light-theme #notif-drawer [class*="text-gray-1"],
.light-theme #notif-drawer [class*="text-gray-2"],
.light-theme #notif-drawer [class*="text-gray-3"],
.light-theme #notif-drawer [class*="text-gray-4"] {
    color: #1e293b !important;
}

/* ── OS Filter pill (dark bg) ───────────────────────────────────────────────── */
.light-theme .os-filter-pill {
    background: rgba(241, 245, 249, 0.9) !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
    color: #334155 !important;
}
.light-theme .os-filter-pill.active {
    background: rgba(234, 88, 12, 0.12) !important;
    border-color: rgba(234, 88, 12, 0.35) !important;
    color: #c2410c !important;
}

/* ── OS flow step (dark mode text leak) ─────────────────────────────────────── */
.light-theme .os-flow-step {
    color: #334155 !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}
.light-theme .os-flow-step.is-ok {
    color: #166534 !important;
    background: #f0fdf4 !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
}
.light-theme .os-flow-step.is-waiting {
    color: #92400e !important;
    background: #fffbeb !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

/* ── Base global ────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px; /* âncora para rem */
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary) !important;
    background-image: 
        radial-gradient(ellipse at 15% 0%, rgba(234, 88, 12, 0.18), transparent 45%),
        radial-gradient(ellipse at 85% 100%, rgba(14, 165, 233, 0.12), transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(2, 6, 23, 0.5), transparent 100%) !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s;
    position: relative;
    overflow-x: hidden;
}

body::before, body::after {
    content: "";
    position: fixed;
    width: 45vw;
    height: 45vw;
    border-radius: 50%;
    filter: blur(12vw);
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
    transition: all 0.5s ease;
}

body::before {
    top: -15vw;
    left: -10vw;
    background: radial-gradient(circle, #ea580c, transparent 70%);
}

body::after {
    bottom: -15vw;
    right: -10vw;
    background: radial-gradient(circle, #6366f1, transparent 70%);
}

.light-theme body::before {
    opacity: 0.06;
    background: radial-gradient(circle, #ea580c, transparent 70%);
}

.light-theme body::after {
    opacity: 0.06;
    background: radial-gradient(circle, #6366f1, transparent 70%);
}

/* ── Fonte da marca — SOMENTE onde a marca aparece ──────────────────────────
   A Avant Garde é a fonte OFICIAL DA MARCA, então NÃO é aplicada em títulos
   genéricos da interface (h1/h2/h3, "AÇÕES RÁPIDAS", "NOVA OS"…). Ela só entra
   onde a marca está presente: o nome da empresa no cabeçalho (#header-company-name)
   e qualquer elemento marcado explicitamente com .font-brand / .brand-name /
   .brand-text (ex.: "Uai Technology", "UaiFlow OS"). */
#header-company-name,
.font-brand, .brand-name, .brand-text {
    font-family: var(--font-brand);
    letter-spacing: 0.01em;
}

/* Wordmark oficial "UaiFlow OS": "UaiFlow" em NEGRITO, "OS" em peso NORMAL.
   Uso: <span class="uaiflow-mark"><b>UaiFlow</b> <span class="os">OS</span></span>
   O .os fica sempre normal, mesmo dentro de containers com font-black. */
.uaiflow-mark {
    font-family: var(--font-brand);
    letter-spacing: 0.01em;
    font-weight: normal;
}
.uaiflow-mark b {
    /* A fonte da marca tem peso ÚNICO (Demi), então o negrito sintético do
       navegador sai fraco. O text-stroke engrossa "UaiFlow" de forma garantida
       e visível, criando contraste real com o "OS" (que fica no peso natural). */
    font-weight: 700;
    -webkit-text-stroke: 0.5px currentColor;
    text-stroke: 0.5px currentColor;
}
.uaiflow-mark .os {
    font-weight: 400;
    -webkit-text-stroke: 0;
    text-stroke: 0;
}

/* ── Override Tailwind CDN — neutraliza micro-fontes (<= 10px) ──────────────
   Tailwind injeta .text-\[9px\] etc. depois do nosso CSS.
   Usamos seletores de atributo para ganhar na especificidade
   sem precisar de !important em cada classe dos templates.
   ─────────────────────────────────────────────────────────────────────────── */

/* 8px → 11px */
[class*="text-[8px]"],
[class*="text-[8."] {
    font-size: 11px !important;
    line-height: 1.5 !important;
}

/* 9px → 11px */
[class*="text-[9px]"],
[class*="text-[9."] {
    font-size: 11px !important;
    line-height: 1.5 !important;
}

/* 10px → 12px */
[class*="text-[10px]"],
[class*="text-[10."] {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* 11px → 12px */
[class*="text-[11px]"],
[class*="text-[11."] {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* 12px / 13px → respeitamos, mas garantimos line-height */
[class*="text-[12px]"],
[class*="text-[13px]"] {
    line-height: 1.5 !important;
}

/* Tailwind utilitários padrão — escala responsiva */
.text-xs   { font-size: var(--text-xs)   !important; }
.text-sm   { font-size: var(--text-sm)   !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg   { font-size: var(--text-lg)   !important; }
.text-xl   { font-size: var(--text-xl)   !important; }
.text-2xl  { font-size: var(--text-2xl)  !important; }
.text-3xl  { font-size: var(--text-3xl)  !important; }

/* Títulos principais (h2 no header dos cards) */
h1 { font-size: clamp(22px, 3vw, 36px); }
h2 { font-size: clamp(18px, 2vw, 28px); }
h3 { font-size: clamp(13px, 1.1vw, 16px); }

/* Parágrafos — sem herança silenciosa de 12px */
p {
    font-size: inherit;
    line-height: 1.6;
}

/* ── Formulários ────────────────────────────────────────────────────────────── */
.form-input {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-control) !important;
    width: 100%;
    padding: 0.55rem 0.75rem !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    min-height: 42px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Emergência: OS form ULTRA compacto */
.os-panel-basic .form-input,
.os-panel-diag .form-input,
.os-panel-items .form-input,
.os-panel-finance .form-input,
.os-panel-terms .form-input,
.os-new-form-flow .form-input,
.os-edit-form-flow .form-input {
    padding: 0.45rem 0.65rem !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    min-height: 38px !important;
}

.os-panel-basic select.form-input,
.os-panel-diag select.form-input,
.os-panel-items select.form-input,
.os-panel-finance select.form-input,
.os-panel-terms select.form-input {
    padding-right: 1.5rem !important; /* espaço pra seta */
}

.os-panel-basic input[type="date"],
.os-panel-diag input[type="date"],
.os-panel-items input[type="date"],
.os-panel-finance input[type="date"],
.os-panel-terms input[type="date"] {
    padding: 0.45rem 0.65rem !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    min-height: 38px !important;
}

.os-panel-basic textarea.form-input,
.os-panel-diag textarea.form-input,
.os-panel-items textarea.form-input,
.os-panel-finance textarea.form-input,
.os-panel-terms textarea.form-input {
    padding: 0.5rem 0.65rem !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: 60px !important;
}

.form-input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.35);
    outline: none;
}

input:not([type="file"]),
select,
textarea {
    font-size: var(--text-sm) !important;
    line-height: 1.5 !important;
    color: var(--text-primary);
}

label {
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* ── Tabelas ────────────────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }

th {
    font-size: var(--text-2xs);
    line-height: 1.4;
    letter-spacing: 0.06em;
}

td {
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Compact table badges/actions used across menus. Prevents narrow columns from
   breaking words into ugly stacked labels. */
.uai-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    min-height: 1.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.uai-chip i {
    flex: 0 0 auto;
    margin-right: 0 !important;
}

.uai-chip--square {
    border-radius: 0.55rem;
}

/* Chip color variants — defined here to avoid Tailwind CDN timing issues
   with dynamically injected HTML. Use instead of bg-*/text-*/border-* utilities. */
.uai-chip-green  { background: rgba(34,197,94,.22);  color: #4ade80;  border-color: rgba(34,197,94,.40);  }
.uai-chip-green2 { background: rgba(34,197,94,.22);  color: #22c55e;  border-color: rgba(34,197,94,.40);  }
.uai-chip-purple { background: rgba(168,85,247,.22); color: #c084fc;  border-color: rgba(168,85,247,.40); }
.uai-chip-orange { background: rgba(249,115,22,.22); color: #fb923c;  border-color: rgba(249,115,22,.40); }
.uai-chip-blue   { background: rgba(59,130,246,.22); color: #60a5fa;  border-color: rgba(59,130,246,.40); }
.uai-chip-red    { background: rgba(239,68,68,.22);  color: #f87171;  border-color: rgba(239,68,68,.40);  }
.uai-chip-gray   { background: rgba(55,65,81,.80);   color: #9ca3af;  border-color: rgba(75,85,99,.90);   }

.uai-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.55rem;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.uai-compact-table th,
.uai-compact-table td {
    vertical-align: middle;
}

table span[class*="rounded"][class*="uppercase"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1 !important;
}

table button[class*="uppercase"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    line-height: 1.1 !important;
}

@media (max-width: 1180px) {
    table td:last-child > div {
        gap: 0.35rem !important;
    }

    table td:last-child button,
    table td:last-child .uai-table-action {
        width: 2.15rem !important;
        min-width: 2.15rem !important;
        height: 2.15rem !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
        gap: 0 !important;
    }

    table td:last-child button i,
    table td:last-child .uai-table-action i {
        margin: 0 !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
    }
}

/* ── Botões ─────────────────────────────────────────────────────────────────── */
button {
    font-size: var(--text-xs);
    line-height: 1.4;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.uai-btn:focus-visible,
.uai-icon-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.uai-btn,
.uai-icon-btn {
    --uai-btn-bg: rgba(255, 255, 255, 0.055);
    --uai-btn-bg-hover: rgba(255, 255, 255, 0.095);
    --uai-btn-border: rgba(255, 255, 255, 0.12);
    --uai-btn-border-hover: rgba(255, 255, 255, 0.22);
    --uai-btn-color: #f8fafc;
    --uai-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
    min-height: var(--control-height-md);
    border: 1px solid var(--uai-btn-border);
    border-radius: var(--radius-control);
    background: var(--uai-btn-bg);
    color: var(--uai-btn-color);
    box-shadow: var(--uai-btn-shadow);
    font-size: 12px !important;
    font-weight: 900;
    line-height: 1.15 !important;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        color 0.16s ease,
        opacity 0.16s ease;
}

.uai-btn {
    padding: 0.72rem 1.05rem;
}

.uai-icon-btn {
    width: var(--control-height-md);
    min-width: var(--control-height-md);
    flex: 0 0 auto;
    padding: 0;
    border-radius: 999px;
}

.uai-btn:hover,
.uai-icon-btn:hover {
    transform: translateY(-1px);
    border-color: var(--uai-btn-border-hover);
    background: var(--uai-btn-bg-hover);
}

.uai-btn:active,
.uai-icon-btn:active {
    transform: translateY(0) scale(0.985);
}

.uai-btn:disabled,
.uai-icon-btn:disabled,
.uai-btn[aria-disabled="true"],
.uai-icon-btn[aria-disabled="true"] {
    opacity: 0.46;
    transform: none !important;
    box-shadow: none;
}

.uai-btn i,
.uai-icon-btn i {
    flex: 0 0 auto;
    line-height: 1;
}

.uai-btn__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uai-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uai-btn--primary {
    --uai-btn-bg: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
    --uai-btn-bg-hover: linear-gradient(180deg, #fdba74 0%, #ea580c 100%);
    --uai-btn-border: rgba(251, 146, 60, 0.52);
    --uai-btn-border-hover: rgba(251, 191, 36, 0.78);
    --uai-btn-color: #fff;
    --uai-btn-shadow:
        0 10px 28px -14px rgba(249, 115, 22, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.uai-btn--secondary {
    --uai-btn-bg: rgba(99, 102, 241, 0.14);
    --uai-btn-bg-hover: rgba(99, 102, 241, 0.22);
    --uai-btn-border: rgba(129, 140, 248, 0.32);
    --uai-btn-border-hover: rgba(129, 140, 248, 0.58);
    --uai-btn-color: #e0e7ff;
}

.uai-btn--success {
    --uai-btn-bg: rgba(22, 163, 74, 0.18);
    --uai-btn-bg-hover: rgba(22, 163, 74, 0.28);
    --uai-btn-border: rgba(34, 197, 94, 0.34);
    --uai-btn-border-hover: rgba(74, 222, 128, 0.62);
    --uai-btn-color: #bbf7d0;
}

.uai-btn--warning {
    --uai-btn-bg: rgba(217, 119, 6, 0.18);
    --uai-btn-bg-hover: rgba(217, 119, 6, 0.28);
    --uai-btn-border: rgba(251, 191, 36, 0.34);
    --uai-btn-border-hover: rgba(251, 191, 36, 0.64);
    --uai-btn-color: #fde68a;
}

.uai-btn--danger {
    --uai-btn-bg: rgba(220, 38, 38, 0.18);
    --uai-btn-bg-hover: rgba(220, 38, 38, 0.30);
    --uai-btn-border: rgba(248, 113, 113, 0.36);
    --uai-btn-border-hover: rgba(248, 113, 113, 0.68);
    --uai-btn-color: #fecaca;
}

.uai-btn--ghost {
    --uai-btn-bg: rgba(15, 23, 42, 0.22);
    --uai-btn-bg-hover: rgba(30, 41, 59, 0.68);
    --uai-btn-border: rgba(148, 163, 184, 0.18);
    --uai-btn-border-hover: rgba(148, 163, 184, 0.34);
    --uai-btn-color: #cbd5e1;
}

.uai-btn--sm {
    min-height: var(--control-height-sm);
    padding: 0.52rem 0.8rem;
    border-radius: 0.78rem;
    font-size: 11px !important;
}

.uai-btn--lg {
    min-height: var(--control-height-lg);
    padding: 0.88rem 1.35rem;
    border-radius: var(--radius-control-lg);
}

.uai-btn--block {
    width: 100%;
}

.uai-btn--selected,
.uai-btn[aria-pressed="true"] {
    border-color: rgba(251, 146, 60, 0.72);
    box-shadow:
        0 0 0 2px rgba(251, 146, 60, 0.20),
        var(--uai-btn-shadow);
}

.uai-btn.is-loading,
.uai-icon-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}

.uai-btn.is-loading::after,
.uai-icon-btn.is-loading::after {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: uai-spin 0.7s linear infinite;
}

.uai-fab {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    border-radius: 999px;
    box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.72), var(--uai-btn-shadow);
}
.uai-fab.hidden { display: none !important; }

@keyframes uai-spin {
    to { transform: rotate(360deg); }
}

/* Portal PJ ticket modal */
.portal-ticket-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.95);
}

.portal-ticket-toolbar__link {
    flex: 0 0 auto;
}

.portal-ticket-card {
    padding: 1rem;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 55, 0.95);
    border-radius: 1rem;
    background: #151b28;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.portal-ticket-card:hover {
    border-color: rgba(249, 115, 22, 0.34);
}

.portal-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.portal-ticket-main {
    min-width: 0;
}

.portal-ticket-client,
.portal-ticket-description,
.portal-ticket-meta {
    overflow-wrap: anywhere;
    word-break: normal;
}

.portal-ticket-badges {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.portal-ticket-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.portal-ticket-meta {
    min-width: 0;
}

.portal-ticket-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.portal-ticket-actions .uai-btn {
    min-height: 2.35rem;
}

@media (max-width: 640px) {
    #portal-modal-content {
        padding-right: 0 !important;
        overflow-x: hidden;
    }

    .portal-ticket-toolbar {
        align-items: stretch;
    }

    .portal-ticket-toolbar__link {
        width: auto;
        min-width: 7.8rem;
    }

    .portal-ticket-card {
        padding: 0.9rem;
        border-radius: 0.9rem;
    }

    .portal-ticket-head,
    .portal-ticket-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-ticket-badges {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }

    .portal-ticket-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.5rem;
    }

    .portal-ticket-actions .uai-btn {
        width: 100%;
        min-width: 0;
        min-height: 2.65rem;
        padding-inline: 0.55rem;
    }
}

/* Sales product picker */
.sales-product-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding: 0.85rem;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 1rem;
    background: rgba(34, 197, 94, 0.055);
}

.sales-product-picker__select {
    min-width: 0;
}

.sales-product-picker__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.sales-form-flow {
    color: #0f172a;
}

.sales-form-flow .glass-panel {
    color: #0f172a;
}

.sales-form-flow label,
.sales-form-flow .text-gray-500,
.sales-product-picker label {
    color: #475569 !important;
}

.sales-form-flow .form-input,
.sales-product-picker .form-input {
    min-height: 2.65rem;
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.sales-form-flow .form-input::placeholder,
.sales-product-picker .form-input::placeholder {
    color: #64748b !important;
    opacity: 1;
}

.sales-form-flow .form-input:focus,
.sales-product-picker .form-input:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

.sales-product-picker {
    border-color: rgba(34, 197, 94, 0.35);
    background: #f0fdf4;
}

.sales-product-picker #sale-add-product-selector {
    min-height: 2.9rem;
    border: 1px solid #94a3b8 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    caret-color: #ea580c;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #0f172a !important;
}

.sales-product-picker #sale-add-product-selector:focus {
    border-color: #f97316 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22) !important;
}

.sales-product-picker #sale-add-product-selector:disabled {
    border-color: #cbd5e1 !important;
    background: #e2e8f0 !important;
    color: #334155 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #334155 !important;
}

.sales-product-picker #sale-add-product-selector option {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 0.9rem;
    font-weight: 800;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #0f172a !important;
}

.sales-product-picker #sale-add-product-selector option:checked,
.sales-product-picker #sale-add-product-selector option:hover {
    background: #e0f2fe !important;
    color: #0f172a !important;
}

.sales-product-picker #sale-add-product-selector option[value=""] {
    color: #475569 !important;
    font-weight: 700;
}

.sales-product-picker__actions .uai-btn,
.sales-form-flow .uai-btn {
    opacity: 1 !important;
}

.sales-product-picker__actions .uai-btn--success,
.sales-form-flow .uai-btn--success {
    --uai-btn-bg: #16a34a;
    --uai-btn-bg-hover: #15803d;
    --uai-btn-border: #16a34a;
    --uai-btn-border-hover: #15803d;
    --uai-btn-color: #ffffff;
    --uai-btn-shadow: 0 12px 24px -14px rgba(22, 163, 74, 0.8);
}

.sales-product-picker__actions .uai-btn--ghost,
.sales-form-flow .uai-btn--ghost {
    --uai-btn-bg: #e2e8f0;
    --uai-btn-bg-hover: #cbd5e1;
    --uai-btn-border: #cbd5e1;
    --uai-btn-border-hover: #94a3b8;
    --uai-btn-color: #334155;
}

.sales-product-picker__actions .uai-btn:disabled,
.sales-form-flow .uai-btn:disabled {
    opacity: 0.72 !important;
    color: #475569 !important;
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

.sales-form-flow .uai-btn i,
.sales-product-picker__actions .uai-btn i,
.sales-form-flow .uai-btn span,
.sales-product-picker__actions .uai-btn span {
    color: inherit !important;
    opacity: 1 !important;
}

/* v255 - Vendas: o seletor de catalogo precisa ser legivel em qualquer tema/estado */
.sales-product-picker,
.light-theme .sales-product-picker {
    background: #ecfdf5 !important;
    border-color: rgba(22, 163, 74, 0.42) !important;
}

.sales-product-picker label,
.sales-product-picker .text-gray-500 {
    color: #334155 !important;
}

.sales-product-picker select#sale-add-product-selector,
.sales-product-picker select#sale-add-product-selector.form-input,
.light-theme .sales-product-picker select#sale-add-product-selector,
.light-theme .sales-product-picker select#sale-add-product-selector.form-input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: #64748b !important;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 24px -20px rgba(15, 23, 42, 0.45) !important;
}

.sales-product-picker select#sale-add-product-selector option,
.sales-product-picker select#sale-add-product-selector optgroup,
.light-theme .sales-product-picker select#sale-add-product-selector option,
.light-theme .sales-product-picker select#sale-add-product-selector optgroup {
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 850 !important;
}

.sales-product-picker select#sale-add-product-selector option[value=""],
.light-theme .sales-product-picker select#sale-add-product-selector option[value=""] {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}

.sales-product-picker__actions .uai-btn:disabled,
.sales-product-picker__actions .uai-btn[disabled],
.sales-form-flow .uai-btn:disabled,
.sales-form-flow .uai-btn[disabled] {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.sales-list-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.55rem;
}

.sales-table-panel {
    overflow: hidden;
    margin-bottom: 5rem;
}

.sales-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.sales-table {
    width: 100%;
    min-width: 1120px;
    table-layout: fixed;
    border-collapse: collapse;
}

.sales-table thead tr {
    color: #475569;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 252, 0.88);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sales-table th {
    padding: 0.85rem 0.8rem;
}

.sales-table-row {
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    transition: background 0.16s ease;
}

.sales-table-row:hover {
    background: rgba(34, 197, 94, 0.035);
}

.sales-cell {
    min-width: 0;
    padding: 0.95rem 0.8rem;
    vertical-align: middle;
    overflow: hidden;
}

.sales-cell-center {
    text-align: center;
}

.sales-cell-money {
    text-align: right;
}

.sales-cell-actions {
    text-align: right;
}

.sales-cell-actions .sales-list-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sales-cell-actions .sales-os-action {
    min-width: 34px;
    min-height: 34px;
    color: var(--sales-os-action-color) !important;
    background: var(--sales-os-action-bg) !important;
    border-color: var(--sales-os-action-border) !important;
}

.sales-cell-actions .sales-os-action i,
.sales-cell-actions .sales-os-action span {
    color: inherit !important;
}

.sales-cell-actions .sales-os-action:hover {
    color: #ffffff !important;
    background: var(--sales-os-action-hover-bg) !important;
    border-color: var(--sales-os-action-hover-border) !important;
}

.sales-os-action--view {
    --sales-os-action-color: #0f172a;
    --sales-os-action-bg: #ffffff;
    --sales-os-action-border: rgba(15, 23, 42, 0.16);
    --sales-os-action-hover-bg: #334155;
    --sales-os-action-hover-border: #334155;
}

.sales-os-action--edit {
    --sales-os-action-color: #3b82f6;
    --sales-os-action-bg: rgba(59, 130, 246, 0.14);
    --sales-os-action-border: rgba(59, 130, 246, 0.44);
    --sales-os-action-hover-bg: #2563eb;
    --sales-os-action-hover-border: #2563eb;
}

.sales-os-action--pdf {
    --sales-os-action-color: #f97316;
    --sales-os-action-bg: rgba(249, 115, 22, 0.14);
    --sales-os-action-border: rgba(249, 115, 22, 0.44);
    --sales-os-action-hover-bg: #ea580c;
    --sales-os-action-hover-border: #ea580c;
}

.sales-os-action--cancel {
    --sales-os-action-color: #ef4444;
    --sales-os-action-bg: rgba(239, 68, 68, 0.10);
    --sales-os-action-border: rgba(239, 68, 68, 0.32);
    --sales-os-action-hover-bg: #dc2626;
    --sales-os-action-hover-border: #dc2626;
}

.sales-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.sales-sale-number,
.sales-status-badge,
.sales-fiscal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 1.55rem;
    padding: 0.24rem 0.55rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.sales-sale-number {
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.26);
    background: rgba(34, 197, 94, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sales-status-badge[class*="green"],
.sales-status-badge[class*="emerald"] {
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.32) !important;
    background: #ecfdf5 !important;
}

.sales-status-badge[class*="orange"],
.sales-status-badge[class*="yellow"] {
    color: #c2410c !important;
    border-color: rgba(249, 115, 22, 0.34) !important;
    background: #fff7ed !important;
}

.sales-status-badge[class*="blue"],
.sales-status-badge[class*="indigo"] {
    color: #1d4ed8 !important;
    border-color: rgba(59, 130, 246, 0.34) !important;
    background: #eff6ff !important;
}

.sales-status-badge[class*="red"] {
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.34) !important;
    background: #fef2f2 !important;
}

.sales-row-date,
.sales-row-origin,
.sales-row-contact,
.sales-row-identification,
.sales-row-client,
.sales-metric-note,
.sales-money-line {
    margin: 0.28rem 0 0;
    color: #64748b;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 700;
}

.sales-row-title {
    margin: 0;
    color: #0f172a;
    font-size: 0.92rem;
    line-height: 1.25;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-row-client,
.sales-row-identification {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-row-client i,
.sales-row-identification i {
    color: #94a3b8;
    flex: 0 0 auto;
}

.sales-metric-value {
    margin: 0;
    color: #334155;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 900;
}

.sales-metric-label {
    margin: 0.18rem 0 0;
    color: #64748b;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 900;
    text-transform: uppercase;
}

.sales-fiscal-pill {
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.30);
    background: #eff6ff;
}

.sales-total {
    margin: 0;
    color: #16a34a;
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .sales-product-picker {
        grid-template-columns: 1fr;
    }

    .sales-product-picker__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .sales-product-picker__actions .uai-btn {
        width: 100%;
        min-width: 0;
    }

    .sales-list-actions { width: 100%; }
}

@media (min-width: 1181px) {
    .sales-cell-actions .sales-list-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .sales-cell-actions .os-action-btn {
        min-width: auto;
    }
}

@media (max-width: 1180px), (orientation: portrait) {
    .sales-table,
    .sales-table tbody,
    .sales-table tr,
    .sales-table td {
        display: block;
        width: 100%;
    }

    .sales-table {
        min-width: 0;
    }

    .sales-table thead {
        display: none;
    }

    .sales-table-scroll {
        overflow-x: hidden;
    }

    .sales-table-row {
        padding: 0.95rem;
        border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    }

    .sales-cell {
        padding: 0;
    }

    .sales-cell-sale {
        margin-bottom: 0.75rem;
    }

    .sales-cell-main {
        margin-bottom: 0.85rem;
    }

    /* Mostrar e alinhar os blocos Itens, Fiscal e Pagamento lado a lado */
    .sales-table td.sales-cell-center.sales-wide-info {
        display: inline-block !important;
        width: 32% !important;
        text-align: center !important;
        margin-bottom: 0.75rem;
        vertical-align: top;
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.02);
        padding: 0.5rem 0.25rem !important;
        border-radius: 0.75rem;
    }
    
    .light-theme .sales-table td.sales-cell-center.sales-wide-info {
        border-color: rgba(0, 0, 0, 0.05);
        background: rgba(0, 0, 0, 0.02);
    }

    /* Garantir que as informações extras dentro do dinheiro e do cliente sejam exibidas de forma legível */
    p.sales-wide-info, span.sales-wide-info {
        display: block !important;
    }

    .sales-cell-money {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        margin-bottom: 0.9rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        gap: 0.25rem;
    }

    .sales-cell-money .sales-total {
        font-size: 1.15rem;
        font-weight: 900;
        color: #4ade80;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sales-cell-money .sales-total::before {
        content: "Total Geral";
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .sales-cell-money .sales-money-line {
        font-size: 11px;
        color: #94a3b8;
        display: flex;
        justify-content: space-between;
    }
    
    .light-theme .sales-cell-money .sales-money-line {
        color: #4b5563;
    }

    .sales-row-title {
        white-space: normal;
    }

    .sales-cell-actions .sales-list-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .uai-btn {
        min-height: 44px;
        padding: 0.72rem 0.95rem;
        white-space: normal;
    }

    .uai-icon-btn {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .uai-btn--sm {
        min-height: 40px;
    }

    .uai-btn__label {
        white-space: normal;
    }
}

/* ── Navegação / Tabs ───────────────────────────────────────────────────────── */
#main-header {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#desktop-nav {
    overflow-x: hidden !important;
}

#tabs-container {
    overflow-x: hidden !important;
}

.os-edit-form-flow,
.os-new-form-flow {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.os-edit-form-flow > *,
.os-new-form-flow > * {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}
/* ORDEM DOS PAINÉIS DA OS — é ESTE bloco que manda na tela, não a ordem do HTML.
   O formulário é flex, então o `order` daqui reposiciona os cards visualmente.
   Ordem pedida: preencher a OS na sequência em que o atendimento acontece —
   primeiro o que o cliente traz e o defeito, só depois preço e pagamento. */
.os-panel-origin,
.os-panel-basic   { order: 10; }  /* 1. Informações Básicas   */
.os-panel-diag    { order: 20; }  /* 2. Detalhes e Diagnóstico */
.os-panel-items   { order: 30; }  /* 3. Peças e Serviços + Resumo / Termos + Financeiro */
.os-panel-finance { order: 40; }
.os-panel-terms   { order: 50; }
.os-panel-rat     { order: 90; }
.os-panel-gallery { order: 95; }
.os-panel-save    { order: 100; } /* Botão Salvar — sempre por último */
.service-location-card {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}
.service-location-card .sel-badge {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 8px;
    border-radius: 0 0 0 8px;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}
.service-location-card.is-selected {
    transform: translateY(-1px);
}
.service-location-card.is-selected[data-location="balcao"] {
    border-color: #0891b2 !important;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(8, 145, 178, 0.06)) !important;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.22), 0 10px 26px rgba(8, 145, 178, 0.14) !important;
}
.service-location-card.is-selected[data-location="no_cliente"] {
    border-color: #ea580c !important;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.18), rgba(234, 88, 12, 0.06)) !important;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.22), 0 10px 26px rgba(234, 88, 12, 0.14) !important;
}
.service-location-card.is-selected[data-location="balcao"] .sel-badge {
    background: #06b6d4;
}
.service-location-card.is-selected[data-location="no_cliente"] .sel-badge {
    background: #f97316;
}
.service-location-card.is-selected[data-location="remoto"] {
    border-color: #a855f7 !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0.06)) !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.22), 0 10px 26px rgba(168, 85, 247, 0.14) !important;
}
.service-location-card.is-selected[data-location="remoto"] .sel-badge {
    background: #a855f7;
}
.service-location-card.is-selected .sel-badge {
    display: block;
}
.os-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.os-action-btn {
    min-width: 34px;
    min-height: 34px;
    justify-content: center;
}
.discount-toggle {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    overflow: visible !important;
    border-radius: 0.45rem;
}
#os-discount-btn-rs,
#os-discount-btn-pct,
#edit-discount-btn-rs,
#edit-discount-btn-pct {
    min-width: 34px !important;
    height: 24px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    font-size: 10px !important;
    flex: 0 0 auto;
}
.os-finance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 1.25rem;
}
.os-summary-panel,
.os-terms-panel,
.os-finance-panel {
    font-size: 12px;
}
.os-summary-panel p,
.os-terms-panel p,
.os-finance-panel p,
.os-summary-panel label,
.os-terms-panel label,
.os-finance-panel label {
    letter-spacing: 0.04em;
}
.payment-method-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    align-items: center;
    gap: 0.65rem;
    min-height: 42px;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    background: rgba(126, 34, 206, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.26);
}
.payment-method-name {
    min-width: 0;
    color: #f5f3ff;
    font-size: 0.78rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payment-method-amount {
    color: #d8b4fe;
    font-size: 0.78rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.payment-method-remove {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(220, 38, 38, 0.16);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.36);
    transition: all 0.18s ease;
}
.payment-method-remove:hover {
    background: #dc2626;
    color: #fff;
}
.payment-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.45rem 0 0.65rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(15, 23, 42, 0.45);
}
.payment-summary p {
    margin: 0;
    color: #e5e7eb;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}
.payment-summary span {
    display: block;
    margin-top: 0.15rem;
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 700;
}
.payment-summary strong {
    color: #fff;
    font-size: 0.86rem;
    font-weight: 950;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.payment-summary[data-payment-state="ok"] {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(22, 163, 74, 0.10);
}
.payment-summary[data-payment-state="ok"] p,
.payment-summary[data-payment-state="ok"] strong {
    color: #4ade80;
}
.payment-summary[data-payment-state="pending"] {
    border-color: rgba(245, 158, 11, 0.34);
    background: rgba(245, 158, 11, 0.10);
}
.payment-summary[data-payment-state="pending"] p,
.payment-summary[data-payment-state="pending"] strong {
    color: #fbbf24;
}
.payment-summary[data-payment-state="error"] {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(220, 38, 38, 0.12);
}
.payment-summary[data-payment-state="error"] p,
.payment-summary[data-payment-state="error"] strong {
    color: #f87171;
}

@media (max-width: 900px) {
    .os-finance-grid {
        grid-template-columns: 1fr;
    }
}
.input-with-icon {
    position: relative;
}
.input-with-icon > i {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 2;
}
.input-with-icon > input,
.input-with-icon > .glass-input,
.input-with-icon > .form-input {
    padding-left: 2.45rem !important;
}
.relative > i.fa-search:first-child ~ input,
.relative > i.fa-search:first-child ~ .glass-input,
.relative > i.fa-search:first-child ~ .form-input {
    padding-left: 2.45rem !important;
}
.relative > i.fa-search:first-child {
    pointer-events: none;
}

@media (max-width: 1280px) {
    .os-action-btn span {
        display: none;
    }
    .uai-compact-table td:last-child button span {
        display: none;
    }
    .uai-compact-table td:last-child button {
        min-width: 34px;
        min-height: 34px;
        justify-content: center;
    }
}

.tab-btn {
    color: var(--text-secondary);
    border-radius: 0.5rem;
    font-size: 13px !important;
    font-weight: 500;
    padding: 0.6rem 1rem;
    letter-spacing: 0;
    transition: all 0.2s;
    margin: 0 2px;
    white-space: nowrap;
    min-height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BLOQUEIO PERMANENTE — SOLICITADO PELO USUÁRIO — NÃO ALTERAR JAMAIS
   Os ícones (.tab-icon) NÃO devem aparecer nos botões do menu de navegação.
   Esta regra foi solicitada múltiplas vezes. Qualquer IA/Codex que remover
   esta regra está errado. Os ícones nos demais locais do sistema são mantidos.
   ══════════════════════════════════════════════════════════════════════════════ */
.tab-btn .tab-icon { display: none !important; }

/* LOCK: mobile nav icons always visible — DO NOT remove or override */
.mob-nav-btn i { display: inline-flex !important; }
.mob-nav-btn span { display: inline !important; }

.tab-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.tab-btn.active {
    background-color: var(--accent-color) !important;
    color: var(--accent-text-color) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px -2px rgba(234, 88, 12, 0.4);
}

/* ── Scrollbars ─────────────────────────────────────────────────────────────── */
body.modal-open {
    overflow: hidden !important;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* ── Conteúdo principal — âncora de fonte para todo conteúdo das abas ──────── */
.uai-content {
    font-size: var(--text-base);
    line-height: 1.65;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
footer {
    background: rgba(9, 9, 11, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
}
.light-theme footer {
    background: rgba(241, 245, 249, 0.65);
}

/* ── Animações ──────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes pulse-logo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.05); }
}
.loading-logo { animation: pulse-logo 2s infinite ease-in-out; }

/* Playbook: Logo Pulse Glow — brilho pulsante no logo do header */
@keyframes logoPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); }
    50%      { box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); }
}
#header-logo {
    animation: logoPulseGlow 3s ease-in-out infinite;
    border-radius: 0.75rem;
}

@keyframes bounce-short {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(-6px); }
}
.animate-bounce-short { animation: bounce-short 0.6s ease; }

/* Playbook: Botão "press" suave — feedback tátil ao clicar */
.uai-btn:active,
button:active {
    transform: scale(0.98) !important;
}

/* ── Login Slideshow ────────────────────────────────────────────────────────── */

/* Overlay gradiente premium sobre o slideshow */
#login-slideshow::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg,
        rgba(8, 12, 20, 0.95) 0%,
        rgba(8, 12, 20, 0.6) 40%,
        rgba(234, 88, 12, 0.15) 100%
    );
    pointer-events: none;
}

#login-slideshow img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: loginSlide 18s infinite;
    transform: scale(1.02);
}
#login-slideshow img:nth-child(2) { animation-delay: 6s; }
#login-slideshow img:nth-child(3) { animation-delay: 12s; }

@keyframes loginSlide {
    0%, 30%  { opacity: 1; transform: scale(1.05); }
    36%, 100% { opacity: 0; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — WhatsApp / Instagram style
   Sempre presente no DOM; CSS controla visibilidade por breakpoint
   ══════════════════════════════════════════════════════════════════════════════ */

/* Por padrão (desktop/tablet): oculto */
#mobile-bottom-nav,
#mob-more-overlay,
#mob-more-sheet {
    display: none;
}

/* Mobile < 768px: aparece */
@media (max-width: 767px) {
    /* ── Bottom nav wrapper ── */
    #mobile-bottom-nav {
        display: flex;
        align-items: center;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 45;
        height: 56px;
        padding: 6px 10px;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        background: rgba(15, 23, 42, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 999px !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(16px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
        scrollbar-width: none;
    }
    
    .light-theme #mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
    }

    #mobile-bottom-nav::-webkit-scrollbar { display: none; }

    /* ── Cada botão da nav ── */
    .mob-nav-btn {
        flex: 0 0 auto;
        min-width: 66px;
        height: 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 9px;
        color: #94a3b8;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(148, 163, 184, 0.10);
        border-radius: 999px;
        cursor: pointer;
        transition: color 0.15s ease, transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
        position: relative;
        scroll-snap-align: start;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-nav-btn i {
        display: inline-flex !important;
        font-size: 11px;
        line-height: 1;
    }

    .mob-nav-btn span {
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0;
        line-height: 1;
        pointer-events: none;
        white-space: nowrap;
    }

    /* Ativo: laranja */
    .mob-nav-btn.mob-active {
        color: #fff;
        background: linear-gradient(135deg, #ea580c, #fb923c);
        border-color: rgba(251, 146, 60, 0.65);
        box-shadow: 0 6px 18px rgba(234, 88, 12, 0.24);
    }

    /* Indicador pontinho laranja no topo */
    .mob-nav-btn.mob-active::before { display: none; }

    .mob-nav-btn:active:not(.mob-active) {
        color: #e5e7eb;
        transform: scale(0.92);
    }

    /* ── Overlay escuro ── */
    #mob-more-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 48;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;
        transition: background 0.25s ease;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    #mob-more-overlay.mob-open {
        background: rgba(0, 0, 0, 0.6);
        pointer-events: auto;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* ── Sheet "Mais" ── */
    #mob-more-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 49;
        background: #111827;
        border-top: 1px solid rgba(55, 65, 81, 0.8);
        border-radius: 1.5rem 1.5rem 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
    }

    #mob-more-sheet.mob-open {
        transform: translateY(0);
    }

    .mob-sheet-handle {
        width: 40px;
        height: 4px;
        background: #374151;
        border-radius: 99px;
        margin: 0.75rem auto 0;
    }

    .mob-sheet-title {
        font-size: 10px !important;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: #6b7280;
        text-align: center;
        padding: 0.5rem 0 0.75rem;
    }

    #mob-more-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        padding: 0 1rem 1.25rem;
    }

    /* Cada item do sheet */
    .mob-sheet-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0.85rem 0.25rem;
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #9ca3af;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-sheet-item i {
        display: none !important;
    }

    .mob-sheet-item span {
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: center;
        line-height: 1.2;
    }

    .mob-sheet-item:active,
    .mob-sheet-item.mob-active {
        background: rgba(234, 88, 12, 0.15);
        color: var(--accent-color);
        border-color: rgba(234, 88, 12, 0.35);
    }

    /* ── Desktop nav oculto no mobile ── */
    #desktop-nav {
        display: none !important;
    }

    /* Padding para o conteúdo não ficar atrás da bottom nav */
    body {
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    }

    #app-container {
        padding: 0.5rem !important;
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVO — ajustes específicos por breakpoint
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile < 768px ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* ── Header mobile compacto ── */
    #main-header {
        border-radius: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    #main-header > div {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Lado esquerdo: tema + logo + nome */
    #main-header > div > .flex:first-child {
        min-width: 0;
        gap: 0.35rem !important;
        align-items: center !important;
    }

    /* Remove o separador lateral no mobile — ocupa espaço desnecessário */
    #main-header > div > .flex:first-child > .flex.items-center.border-l {
        border-left: none !important;
        padding-left: 0 !important;
    }

    #theme-toggle-btn {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px;
        font-size: 0.8rem !important;
        border-radius: 50% !important;
    }

    #header-logo {
        height: 26px !important;
        margin-right: 0.3rem !important;
    }

    #header-company-name {
        font-size: 13px !important;
        line-height: 1.1 !important;
        max-width: 38vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 900 !important;
    }

    #header-subtitle {
        display: none !important; /* oculta o subtítulo no mobile — mais limpo */
    }

    #auth-container {
        gap: 0.25rem !important;
        flex-shrink: 0;
    }

    #auth-container button,
    #auth-container a {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
    }

    /* ── Header compacto ── */
    #main-header {
        border-radius: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    #main-header > div {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    #main-header > div > .flex:first-child {
        min-width: 0;
        gap: 0.35rem !important;
        align-items: center !important;
    }

    #main-header > div > .flex:first-child > .flex.items-center.border-l {
        border-left: none !important;
        padding-left: 0 !important;
    }

    #theme-toggle-btn {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px;
        font-size: 0.8rem !important;
        border-radius: 50% !important;
    }

    #header-logo { height: 26px !important; margin-right: 0.3rem !important; }

    #header-company-name {
        font-size: 13px !important;
        line-height: 1.1 !important;
        max-width: 38vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 900 !important;
    }

    #header-subtitle { display: none !important; }

    #auth-container { gap: 0.25rem !important; flex-shrink: 0; }

    #auth-container button,
    #auth-container a {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
    }

    /* ── FABs discretos no mobile ── */
    #suggestion-fab { display: none !important; }

    #portal-fab {
        width: 34px !important;
        height: 34px !important;
        left: auto !important;
        right: 0.75rem !important;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        opacity: 0.55 !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
        background: rgba(234, 88, 12, 0.7) !important;
    }
    #portal-fab:hover { opacity: 1 !important; }
    #portal-fab span:not(#portal-ticket-badge) { display: none !important; }

    /* ── Footer silencioso ── */
    footer {
        padding: 0.25rem 0 !important;
        opacity: 0.15 !important;
        border-top: none !important;
        pointer-events: none;
    }
    footer * { display: none !important; }
    footer::after {
        content: "Uai Technology";
        display: block !important;
        text-align: center;
        font-size: 9px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--text-secondary);
        font-weight: 700;
        padding: 0.15rem 0;
    }

    /* Cards com menos padding */
    [class*="rounded-xl"][class*="p-5"],
    [class*="rounded-2xl"][class*="p-6"] { padding: 0.85rem !important; }

    h2 { font-size: clamp(16px, 5vw, 22px); }
    h3 { font-size: clamp(12px, 4vw, 15px); }
}

/* ── Tablet portrait / monitor estreito (768px-1180px) ─────────────────────── */
@media (min-width: 768px) and (max-width: 1180px) {
    #desktop-nav {
        justify-content: center !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    #tabs-container {
        width: 100%;
        min-width: 0;
        max-width: 100% !important;
        flex-wrap: nowrap;
        overflow: hidden;
        justify-content: space-between;
        gap: 0.1rem;
    }

    .tab-btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px !important;
        padding: 0.62rem 0.5rem !important;
        min-height: 42px;
        letter-spacing: 0 !important;
        margin: 0 !important;
    }

}

/* ── Telas grandes (1280px+) ───────────────────────────────────────────────── */
@media (min-width: 1280px) {
    body { font-size: 15px; }

    .tab-btn {
        font-size: 13px !important;
        padding: 0.5rem 1.1rem !important;
    }
}

/* ── Full HD / Ultrawide (1920px+): expande conteúdo, sem margens gigantes ── */
@media (min-width: 1920px) {
    body { font-size: 16px; }

    :root {
        --text-xs:   13px;
        --text-sm:   14px;
        --text-base: 16px;
    }

    /* Remove a limitação de 1536px — ocupa a tela toda */
    #app-container {
        max-width: 100% !important;
        padding: 1rem 2.5rem !important;
    }

    /* Tabs mais espaçadas */
    .tab-btn {
        font-size: 14px !important;
        padding: 0.55rem 1.4rem !important;
        letter-spacing: 0.01em !important;
    }
}

/* ── TV / 4K / Dashboard Mode (2560px+) ─────────────────────────────────── */
@media (min-width: 2560px) {
    body { font-size: 18px; }

    :root {
        --text-xs:   14px;
        --text-sm:   15px;
        --text-base: 18px;
        --text-lg:   21px;
    }

    #app-container {
        max-width: 100% !important;
        padding: 1.5rem 4rem !important;
    }

    .tab-btn {
        font-size: 15px !important;
        padding: 0.65rem 1.7rem !important;
    }
}

/* ── Monitor retrato físico (1050–1350px, altura > largura implícita) ──────── */
/* Identifica portrait quando viewport é ~1:1.77 invertido (monitor girado 90°) */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1350px) {
    #desktop-nav {
        justify-content: center !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    #tabs-container {
        width: 100%;
        min-width: 0;
        max-width: 100% !important;
        flex-wrap: nowrap;
        overflow: hidden;
        justify-content: space-between;
        gap: 0.1rem;
    }

    .tab-btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px !important;
        padding: 0.62rem 0.5rem !important;
        min-height: 42px;
        margin: 0 !important;
    }

}

/* Havia aqui um override de .financial-header/.financial-actions para retrato
   que forçava display:grid com 2 colunas e posicionava #fin-period-filter e
   #btn-add-payable por id. Foi escrito para a estrutura antiga, em que esses
   elementos eram filhos DIRETOS de .financial-actions. Depois que o cabeçalho
   passou a agrupar busca/período e botões em sub-divs, o grid de 2 colunas
   passou a fatiar os grupos errados e os seletores por id não pegavam mais
   nada: a busca cobria o período e os rótulos dos botões saíam cortados.
   O layout agora é resolvido no próprio HTML e vale para as duas orientações. */

@media (orientation: portrait) and (min-width: 768px) {
    /* Cabeçalho Fornecedores: título + botão lado a lado em retrato */
    .supplier-header {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .supplier-header > div:last-child {
        width: auto !important;
    }

    .supplier-header #btn-add-supplier {
        width: auto !important;
    }
}
/* OS client autocomplete: readable in both themes */
.os-client-dropdown {
    background: #0b0f1a !important;
}

.os-client-option-name {
    color: #f9fafb;
}

.os-client-empty {
    color: #9ca3af;
}

.os-client-empty b {
    color: #f9fafb;
}

.light-theme .os-client-dropdown {
    background: #ffffff !important;
}

.light-theme .os-client-option-name {
    color: #111827 !important;
}

.light-theme .os-client-empty {
    color: #6b7280 !important;
}

.light-theme .os-client-empty b {
    color: #111827 !important;
}

/* OS catalog autocomplete: keep product names readable in light/dark themes */
.os-catalog-search-input,
[id$="catalog-search-input"].os-catalog-search-input {
    min-height: 2.75rem;
    border: 1px solid rgba(249, 115, 22, 0.55) !important;
    background: #111827 !important;
    color: #f8fafc !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    caret-color: #fb923c;
    box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.95);
}

.os-catalog-search-input::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

.os-catalog-search-input:focus {
    border-color: #f97316 !important;
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22), 0 14px 28px -22px rgba(15, 23, 42, 0.9) !important;
}

.os-catalog-dropdown {
    background: #0b1220 !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.os-catalog-option {
    color: #f8fafc !important;
}

.os-catalog-option-name {
    color: #f8fafc !important;
}

.os-catalog-option-price {
    color: #fb5a14 !important;
    font-weight: 950 !important;
}

.os-catalog-option-meta {
    color: #94a3b8 !important;
}

.os-catalog-option mark {
    background: rgba(249, 115, 22, 0.22) !important;
    color: #fed7aa !important;
}

.os-catalog-empty {
    padding: 14px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
}

.light-theme .os-catalog-search-input,
.light-theme [id$="catalog-search-input"].os-catalog-search-input {
    border-color: rgba(249, 115, 22, 0.68) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.35);
}

.light-theme .os-catalog-search-input::placeholder {
    color: #475569 !important;
}

.light-theme .os-catalog-search-input:focus {
    border-color: #f97316 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), 0 14px 28px -22px rgba(15, 23, 42, 0.4) !important;
}

.light-theme .os-catalog-dropdown {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.light-theme .os-catalog-option {
    color: #0f172a !important;
}

.light-theme .os-catalog-option-name {
    color: #0f172a !important;
}

.light-theme .os-catalog-option-price {
    color: #ea580c !important;
}

.light-theme .os-catalog-option-meta {
    color: #334155 !important;
}

.light-theme .os-catalog-option mark {
    background: rgba(249, 115, 22, 0.18) !important;
    color: #9a3412 !important;
}

.light-theme .os-catalog-empty {
    color: #475569 !important;
}

/* OS: status summary + compact responsive filter bar */
.os-status-total-active {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.38rem 0.7rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--chip-color, #64748b) 24%, transparent);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(226, 232, 240, 0.82);
    font-variant-numeric: tabular-nums;
}

.os-status-total-active .total-title {
    color: color-mix(in srgb, var(--chip-color, #64748b) 62%, white);
    font-size: 0.62rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.os-status-total-active strong {
    color: #e5e7eb;
    font-size: 0.82rem;
    font-weight: 950;
}

.os-status-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    align-items: center;
}

.status-chip {
    min-width: 0;
    min-height: 32px;
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto) auto;
    align-items: center;
    gap: 0.32rem;
    padding: 0.3rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.035);
    color: #e5e7eb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.status-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.075);
}

.status-chip[data-tone="colored"] {
    border-color: color-mix(in srgb, var(--chip-color) 24%, transparent);
    background: color-mix(in srgb, var(--chip-color) 8%, transparent);
    color: color-mix(in srgb, var(--chip-color) 72%, white);
}

.chip-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--chip-color, #94a3b8);
    box-shadow: 0 0 16px color-mix(in srgb, var(--chip-color, #94a3b8) 65%, transparent);
}

.chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.chip-count {
    min-width: 1.22rem;
    height: 1.22rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--chip-color, #64748b) 78%, white);
    color: white;
    font-size: 0.56rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.os-filter-panel {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 210px) minmax(170px, 210px) auto auto auto;
    gap: 0.75rem;
    align-items: center;
    overflow: hidden;
}

.os-filter-panel > * {
    min-width: 0;
    max-width: 100%;
}

.os-filter-panel .glass-input,
.os-filter-action,
.os-filter-pill {
    width: 100%;
}

.os-filter-action {
    justify-content: center;
    min-height: 42px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1180px) {
    .os-status-grid {
        gap: 0.34rem;
    }

    .os-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .os-filter-panel .input-with-icon,
    .os-filter-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .os-status-panel {
        padding: 0.75rem !important;
    }

    .os-status-grid {
        gap: 0.32rem;
    }

    .status-chip {
        min-height: 31px;
        padding: 0.28rem 0.5rem;
    }

    .chip-label {
        font-size: 0.54rem;
    }

    .os-status-total-active {
        width: 100%;
        justify-content: space-between;
    }

    .os-filter-panel {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .os-filter-action {
        white-space: normal !important;
        line-height: 1.25;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (max-width: 1350px) {
    .os-status-grid {
        gap: 0.36rem;
    }

    .os-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .os-filter-panel .input-with-icon,
    .os-filter-action {
        grid-column: 1 / -1;
    }
}

/* OS / Gestao de Notas: landscape precisa mostrar a lista cedo, sem perder os chips. */
@media (orientation: landscape) and (min-width: 900px) {
    .os-notes-shell {
        padding-inline: clamp(0.75rem, 1.2vw, 1.4rem) !important;
    }

    .os-notes-header {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        gap: 0.75rem !important;
    }

    .os-notes-header > div:first-child {
        gap: 0.75rem !important;
    }

    .os-notes-header > div:first-child > .relative {
        width: 2.55rem !important;
        height: 2.55rem !important;
        border-radius: 0.95rem !important;
    }

    .os-notes-header h2 {
        font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
        line-height: 0.95 !important;
    }

    .os-notes-header p {
        margin-top: 0.12rem !important;
        font-size: 0.62rem !important;
        line-height: 1.1 !important;
    }

    .os-notes-header > div:last-child {
        flex-direction: row !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    .os-notes-header button {
        min-height: 38px !important;
        padding: 0.62rem 0.9rem !important;
        border-radius: 0.9rem !important;
    }

    .os-notes-status-panel {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start !important;
        gap: 0.45rem 0.65rem !important;
        padding: 0.55rem !important;
        margin-bottom: 0.55rem !important;
    }

    .os-notes-status-panel .os-status-total-active {
        margin-bottom: 0 !important;
        min-height: 29px !important;
        padding: 0.24rem 0.55rem !important;
        border-radius: 0.7rem !important;
    }

    .os-notes-status-panel .os-status-total-active .total-title {
        font-size: 0.54rem !important;
    }

    .os-notes-status-panel .os-status-total-active strong {
        font-size: 0.72rem !important;
    }

    .os-notes-status-panel .os-status-grid {
        max-height: 66px;
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: 0.24rem !important;
        padding-right: 0.15rem;
    }

    .os-notes-status-panel .status-chip {
        min-height: 28px !important;
        padding: 0.2rem 0.44rem !important;
        gap: 0.24rem !important;
        border-radius: 999px !important;
    }

    .os-notes-status-panel .chip-dot {
        width: 0.32rem !important;
        height: 0.32rem !important;
    }

    .os-notes-status-panel .chip-label {
        font-size: 0.52rem !important;
    }

    .os-notes-status-panel .chip-count {
        min-width: 1.05rem !important;
        height: 1.05rem !important;
        font-size: 0.5rem !important;
    }

    .os-filter-panel {
        grid-template-columns: minmax(280px, 1fr) minmax(135px, 170px) minmax(135px, 170px) minmax(86px, auto) minmax(150px, auto) minmax(150px, auto) !important;
        gap: 0.45rem !important;
        padding: 0.55rem !important;
        margin-bottom: 0.65rem !important;
        align-items: stretch !important;
    }

    .os-filter-panel .glass-input,
    .os-filter-action,
    .os-filter-pill {
        min-height: 38px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-radius: 0.8rem !important;
    }

    .os-filter-panel .input-with-icon i {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .os-notes-table-panel {
        margin-top: 0 !important;
    }

    .os-notes-table-panel th {
        padding: 0.55rem 0.75rem !important;
    }

    .os-notes-table-panel td {
        padding: 0.62rem 0.75rem !important;
    }

    .os-notes-table-panel .os-action-group {
        gap: 0.25rem !important;
    }

    .os-notes-table-panel .os-action-btn {
        min-height: 32px !important;
        min-width: 32px !important;
        padding: 0.42rem 0.58rem !important;
    }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 760px) {
    .os-notes-status-panel .os-status-grid {
        max-height: 54px;
    }

    .os-notes-table-panel td {
        padding-top: 0.48rem !important;
        padding-bottom: 0.48rem !important;
    }
}

/* v78.39 - Cliente autocomplete: dropdown preso ao viewport, sem vazar da tela */
.os-client-dropdown[data-positioned="fixed"] {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    overscroll-behavior: contain !important;
}

.os-client-dropdown[data-positioned="fixed"] .os-client-option {
    width: 100% !important;
    max-width: 100% !important;
}

.os-client-dropdown[data-positioned="fixed"] .os-client-option-name,
.os-client-dropdown[data-positioned="fixed"] span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

/* v78.40 — alinhamento financeiro/termos e campos monetários */
.os-panel-terms .grid > div > label,
.os-panel-finance label,
.os-finance-panel label {
  min-height: 22px;
  display: flex;
  align-items: flex-end;
  line-height: 1.15;
}

.os-panel-terms input.form-input,
.os-panel-terms textarea.form-input,
.os-panel-finance input.form-input,
.os-finance-panel input.form-input {
  width: 100%;
}

.os-panel-terms .flex.gap-2,
.os-finance-grid,
.os-panel-items {
  align-items: start;
}

input[data-centavos-mask-bound="1"] {
  font-variant-numeric: tabular-nums;
  text-align: left;
}


/* v78.42 — cliente dropdown em portal + alinhamento firme dos campos de pagamento */
#os-client-dropdown-portal-host {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
}

#os-client-dropdown-portal-host .os-client-dropdown {
  display: block;
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
}

#os-client-dropdown-portal-host .os-client-dropdown.hidden {
  display: none !important;
}

#os-client-dropdown-portal-host .os-client-option {
  background: #fff !important;
  color: #111827 !important;
}

#os-client-dropdown-portal-host .os-client-option:hover {
  background: rgba(249, 115, 22, 0.08) !important;
}

.os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label {
  min-height: 14px !important;
  height: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > input.form-input,
.os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > textarea.form-input {
  margin-top: 0 !important;
}


/* v78.44 - Central Operacional da OS minimizada + fluxo */
.os-operational-command-panel {
  overflow: visible;
  padding: 0 !important;
}
.os-operational-command-panel > summary {
  list-style: none;
}
.os-operational-command-panel > summary::-webkit-details-marker {
  display: none;
}
.os-op-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  padding: 1rem 1.25rem;
  border-radius: inherit;
  user-select: none;
}
.os-op-summary:hover {
  background: rgba(249, 115, 22, .045);
}
.os-op-summary-main {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}
.os-op-summary-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fb923c;
  background: rgba(249, 115, 22, .12);
  border: 1px solid rgba(249, 115, 22, .18);
}
.os-op-summary-title {
  margin: 0;
  font-size: .62rem;
  line-height: .95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #fb923c;
}
.os-op-summary-subtitle {
  margin: .08rem 0 0;
  font-size: .68rem;
  line-height: .95rem;
  font-weight: 700;
  color: #94a3b8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.os-op-summary-badges {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}
.os-op-summary-toggle {
  width: 2rem;
  height: 2rem;
  border-radius: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: rgba(15, 23, 42, .55);
  border: 1px solid rgba(148, 163, 184, .15);
  transition: transform .18s ease;
}
.os-operational-command-panel[open] .os-op-summary-toggle {
  transform: rotate(180deg);
}
.os-op-body {
  padding: 0 1.25rem 1.25rem;
}
.os-op-check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  background: rgba(15, 23, 42, .38);
  min-width: 0;
}
.os-op-check.is-ok {
  border-color: rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .07);
}
.os-op-check.is-pending {
  border-color: rgba(249, 115, 22, .28);
  background: rgba(249, 115, 22, .08);
}
.os-op-dot {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: .62rem;
  margin-top: .05rem;
  background: rgba(100, 116, 139, .16);
  color: #94a3b8;
}
.os-op-check.is-ok .os-op-dot {
  color: #22c55e;
  background: rgba(34, 197, 94, .16);
}
.os-op-check.is-pending .os-op-dot {
  color: #fb923c;
  background: rgba(249, 115, 22, .16);
}
.os-op-label {
  font-size: .58rem;
  line-height: .85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #e5e7eb;
  margin: 0;
}
.os-op-detail {
  font-size: .62rem;
  line-height: .95rem;
  font-weight: 700;
  color: #94a3b8;
  margin: .08rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.os-flow-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
}
.os-flow-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem .65rem;
  border-radius: .95rem;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .36);
  color: #94a3b8;
  font-size: .58rem;
  line-height: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
  white-space: nowrap;
  overflow: hidden;
}
.os-flow-step > i,
.os-flow-step > span:not(.os-flow-index) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-flow-index {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: .45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: .52rem;
  background: rgba(148, 163, 184, .14);
}
.os-flow-step.is-ok {
  color: #22c55e;
  border-color: rgba(34, 197, 94, .24);
  background: rgba(34, 197, 94, .07);
}
.os-flow-step.is-waiting {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, .22);
  background: rgba(245, 158, 11, .055);
}
@media (max-width: 1024px) {
  .os-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .os-op-summary { align-items: flex-start; flex-direction: column; }
  .os-op-summary-badges { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .os-op-summary-subtitle { white-space: normal; }
  .os-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .os-op-detail { white-space: normal; }
}

/* v78.48 - Central Operacional legível de verdade */
.os-operational-command-panel {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
}
.os-operational-command-panel .os-op-body {
  color: #0f172a !important;
}
.os-operational-command-panel .os-op-check {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05) !important;
}
.os-operational-command-panel .os-op-check.is-ok {
  background: #ecfdf5 !important;
  border-color: rgba(16, 185, 129, .32) !important;
}
.os-operational-command-panel .os-op-check.is-pending {
  background: #fff7ed !important;
  border-color: rgba(249, 115, 22, .35) !important;
}
.os-operational-command-panel .os-op-label {
  color: #0f172a !important;
  font-size: .68rem !important;
  line-height: 1rem !important;
  letter-spacing: .045em !important;
}
.os-operational-command-panel .os-op-detail {
  color: #475569 !important;
  font-size: .72rem !important;
  line-height: 1.08rem !important;
  font-weight: 800 !important;
}
.os-operational-command-panel .os-op-check.is-ok .os-op-detail {
  color: #047857 !important;
}
.os-operational-command-panel .os-op-check.is-pending .os-op-detail {
  color: #c2410c !important;
}
.os-operational-command-panel .os-op-dot {
  background: #f1f5f9 !important;
  color: #334155 !important;
}
.os-operational-command-panel .os-op-check.is-ok .os-op-dot {
  background: #bbf7d0 !important;
  color: #047857 !important;
}
.os-operational-command-panel .os-op-check.is-pending .os-op-dot {
  background: #fed7aa !important;
  color: #c2410c !important;
}
.os-operational-command-panel .os-flow-grid {
  gap: .7rem !important;
}
.os-operational-command-panel .os-flow-step {
  background: #ffffff !important;
  color: #334155 !important;
  border-color: rgba(15, 23, 42, .14) !important;
  font-size: .66rem !important;
  line-height: .95rem !important;
  padding: .7rem .75rem !important;
}
.os-operational-command-panel .os-flow-step.is-ok {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, .35) !important;
}
.os-operational-command-panel .os-flow-step.is-waiting {
  background: #fff7ed !important;
  color: #c2410c !important;
  border-color: rgba(249, 115, 22, .35) !important;
}
.os-operational-command-panel .os-flow-index {
  background: rgba(15, 23, 42, .08) !important;
  color: inherit !important;
}
.os-operational-command-panel .os-op-body .bg-slate-950\/30 {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, .10) !important;
}
.os-operational-command-panel .os-op-body .bg-blue-500\/10 {
  background: #eff6ff !important;
  border-color: rgba(59, 130, 246, .25) !important;
}
.os-operational-command-panel .os-op-body .text-gray-300 {
  color: #334155 !important;
}


/* v78.49 - OS: filtro sem buraco, campos alinhados e central mais limpa */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1350px) {
  .os-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  .os-filter-panel .input-with-icon {
    grid-column: 1 / -1 !important;
  }
  .os-filter-panel #os-filter-status,
  .os-filter-panel #os-filter-type,
  .os-filter-panel #os-count,
  .os-filter-panel .os-feedback-filter-btn,
  .os-filter-panel #os-dash-filter-badge {
    grid-column: auto !important;
    min-height: 42px !important;
  }
  .os-filter-panel #os-count,
  .os-filter-panel .os-feedback-filter-btn {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  .os-filter-panel .os-feedback-filter-btn,
  .os-filter-panel #os-dash-filter-badge {
    grid-column: 1 / -1 !important;
  }
}

.os-edit-form-flow .os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div,
.os-new-form-flow .os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div,
.os-panel-finance .grid.grid-cols-2.gap-3 > div,
.os-edit-form-flow .glass-panel.flex.flex-col.gap-4 .grid.grid-cols-2.gap-3 > div {
  display: flex !important;
  flex-direction: column !important;
}

.os-edit-form-flow .os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label,
.os-new-form-flow .os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label,
.os-panel-finance .grid.grid-cols-2.gap-3 > div > label,
.os-panel-finance .grid.grid-cols-2.gap-3 > div > .flex.items-center.justify-between,
.os-edit-form-flow .glass-panel.flex.flex-col.gap-4 .grid.grid-cols-2.gap-3 > div > label,
.os-edit-form-flow .glass-panel.flex.flex-col.gap-4 .grid.grid-cols-2.gap-3 > div > .flex.items-center.justify-between {
  min-height: 2.15rem !important;
  display: flex !important;
  align-items: flex-end !important;
  margin-bottom: .35rem !important;
}


#edit-manual-item-price,
#new-os-manual-item-price {
  width: 5rem !important;
  min-width: 5rem !important;
  max-width: 5rem !important;
  flex-shrink: 0 !important;
  padding: 0.1rem 0.35rem !important;
}

#edit-manual-item-desc,
#new-os-manual-item-desc {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 0 !important;
}

.os-operational-command-panel .os-op-summary {
  min-height: 64px !important;
}
.os-operational-command-panel .os-op-body .bg-slate-950\/30,
.os-operational-command-panel .os-op-body .bg-blue-500\/10 {
  padding: .85rem !important;
}
.os-operational-command-panel .os-flow-step {
  min-height: 38px !important;
}

/* v78.50 - Hotfix Vendas: botoes/icone visiveis no padrao da aba OS */
.sales-cell-actions .sales-list-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sales-cell-actions .sales-os-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0.45rem 0.7rem !important;
  gap: 0.35rem !important;
  border: 1px solid var(--sales-os-action-border) !important;
  background: var(--sales-os-action-bg) !important;
  color: var(--sales-os-action-color) !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
}

.sales-cell-actions .sales-os-action > i,
.sales-cell-actions .sales-os-action > i::before,
.sales-cell-actions .sales-os-action > span {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sales-cell-actions .sales-os-action > i,
.sales-cell-actions .sales-os-action > i::before {
  width: auto !important;
  height: auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.sales-cell-actions .sales-os-action:hover {
  background: var(--sales-os-action-hover-bg) !important;
  border-color: var(--sales-os-action-hover-border) !important;
  color: #ffffff !important;
}

@media (max-width: 1280px), (orientation: portrait) {
  .sales-cell-actions .sales-list-actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .sales-cell-actions .sales-os-action {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    flex: 0 0 34px !important;
    overflow: visible !important;
    font-size: 0 !important;
  }

  .sales-cell-actions .sales-os-action > span {
    display: none !important;
  }

  .sales-cell-actions .sales-os-action > i,
  .sales-cell-actions .sales-os-action > i::before {
    display: inline-flex !important;
    font-size: 14px !important;
  }
}

/* Overrides para o drawer de notificações no tema claro */
.light-theme #notif-drawer {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* v237 - Sprint SaaS/IA: overlay bloqueante e mobile de Vendas */
.saas-locked {
    overflow: hidden !important;
}

/* saas-lock-overlay so aparece quando NAO tem a classe hidden — evita conflito
   com os padroes responsive do Tailwind (hidden sm:block, hidden lg:flex etc.)
   que quebrariam se .hidden tivesse display:none !important globalmente. */
.saas-lock-overlay:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 15%, rgba(249, 115, 22, 0.18), transparent 24rem),
        rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.saas-lock-card {
    width: min(100%, 560px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 1.6rem;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.saas-lock-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #fb923c, #ea580c);
    box-shadow: 0 18px 34px rgba(234, 88, 12, 0.28);
}

.saas-lock-kicker {
    margin-top: 1rem;
    color: #fb923c;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.saas-lock-card h2 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.55rem, 4vw, 2.25rem);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: 0;
}

.saas-lock-message {
    margin-top: 0.8rem;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.55;
}

.saas-lock-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 1.2rem 0;
}

.saas-lock-meta > div {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    padding: 0.85rem;
    background: rgba(15, 23, 42, 0.52);
}

.saas-lock-meta span,
.saas-lock-meta strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saas-lock-meta span {
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.saas-lock-meta strong {
    margin-top: 0.25rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 900;
}

.saas-lock-actions {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0.7rem;
}

@media (max-width: 767px) {
    .saas-lock-card {
        border-radius: 20px;
        padding: 1.15rem;
    }

    .saas-lock-meta,
    .saas-lock-actions {
        grid-template-columns: 1fr;
    }

    .sales-table-panel {
        border-radius: 18px !important;
        margin-bottom: 2.5rem !important;
    }

    .sales-table-row {
        padding: 0.95rem 0.75rem !important;
    }

    .sales-cell-main,
    .sales-cell-sale {
        margin-bottom: 0.7rem !important;
    }

    .sales-row-title {
        font-size: 0.98rem !important;
        line-height: 1.18 !important;
    }

    .sales-table td.sales-cell-center.sales-wide-info {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr);
        align-items: center;
        text-align: left !important;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.55rem 0.7rem !important;
    }

    .sales-table td.sales-cell-center.sales-wide-info::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 0.58rem;
        font-weight: 950;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .sales-cell-actions .sales-list-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        gap: 0.5rem !important;
        justify-content: stretch !important;
    }

    .sales-cell-actions .sales-os-action {
        width: 100% !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex-basis: auto !important;
        border-radius: 0.75rem !important;
    }
}
.light-theme #notif-drawer p.text-white,
.light-theme #notif-drawer div.text-white {
    color: #0f172a !important;
}
.light-theme #notif-drawer p.text-gray-400 {
    color: #475569 !important;
}
.light-theme #notif-drawer .bg-gray-800\/50 {
    background-color: #f9fafb !important;
    border-color: #e2e8f0 !important;
}
.light-theme #notif-drawer button[data-action="close-notif-drawer"] {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
.light-theme #notif-drawer button[data-action="close-notif-drawer"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}
.light-theme #notif-drawer .bg-gray-800\/40 {
    background-color: #f1f5f9 !important;
}

/* Custom Map Marker styles for Leaflet */
.uai-map-marker {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(255, 90, 31, 0.45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.uai-map-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #ffffff;
  border-right: 1px solid rgba(255, 90, 31, 0.45);
  border-bottom: 1px solid rgba(255, 90, 31, 0.45);
  transform: rotate(45deg);
}

.uai-map-marker img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────
   GLASSMORPHISM & PREMIUM UI OVERRIDES — AUTO-GLOW
   ───────────────────────────────────────────────────────────── */

/* Scrollbar fina de alta qualidade */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.22);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45);
}

/* Painéis de vidro reutilizáveis */
.glass-panel,
.card,
.tp-card,
[class*="rounded-2xl"][class*="border-gray-800"],
[class*="p-4"][class*="bg-gray-950"] {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Micro-animações em Cards operacionais */
.glass-panel:hover,
.card:hover,
.tp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45), 
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(251, 146, 60, 0.25) !important; /* Glow leve no hover */
}

/* Cabeçalho principal sintonizado com vidro */
#main-header {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

/* Inputs Modernos com Glow Focado */
.form-input,
input:not([type="file"]),
select,
textarea {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    min-height: 40px !important;
}

.form-input:focus,
input:not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 14px var(--glow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    outline: none !important;
    background-color: var(--bg-secondary) !important;
}

option {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}
/* Tabelas e visualização densa */
table {
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead tr {
    border-bottom: 2px solid var(--border-color) !important;
    background: rgba(15, 23, 42, 0.40) !important;
}

.light-theme thead tr {
    background: rgba(0, 0, 0, 0.03) !important;
}

th {
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 1rem 1.25rem !important;
}

td {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
}

tr {
    transition: all 0.2s ease !important;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

.light-theme tr:hover td {
    background: rgba(0, 0, 0, 0.02) !important;
    color: #000000 !important;
}

/* Botões do Menu Ativos com Gradiente Sleek */
#tabs-container {
    background: rgba(15, 23, 42, 0.40) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    padding: 0.4rem !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.light-theme #tabs-container {
    background: rgba(255, 255, 255, 0.45) !important;
}

.tab-btn {
    border-radius: 999px !important;
    margin-inline: 3px !important;
    padding: 0.55rem 1.25rem !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
}

.tab-btn.active {
    background: linear-gradient(135deg, #ea580c 0%, #ff7a18 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px -4px rgba(234, 88, 12, 0.45) !important;
    font-weight: 700 !important;
    transform: scale(1.03) !important;
}

.tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

.light-theme .tab-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Tailwind Classes Neutralization */
#app-container .bg-gray-900,
#app-container .bg-gray-950 {
    background-color: var(--bg-primary) !important;
}

#app-container .bg-gray-800,
#app-container .bg-gray-900\/90,
#app-container .bg-gray-900\/70,
#app-container .bg-gray-950\/50,
#app-container .bg-gray-950\/30,
#app-container .bg-gray-950\/40 {
    background-color: var(--bg-secondary) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.border-gray-800,
.border-gray-700,
.border-gray-700\/50,
.border-gray-700\/30 {
    border-color: var(--border-color) !important;
}

/* Notif-drawer e popups */
#notif-drawer,
.dropdown-menu,
.absolute.right-0.mt-2.w-48 {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 1rem !important;
}

.light-theme #notif-drawer,
.light-theme .dropdown-menu {
    background: var(--bg-secondary) !important;
}

/* ─────────────────────────────────────────────────────────────
   ADDITIONAL PREMIUM UI ALIGNMENT & CONTRAST FIXES
   ───────────────────────────────────────────────────────────── */

/* Eliminate gaps by allowing grid-child cards to stretch and align symmetrically */
.grid > .glass-panel,
.grid > .card,
.grid > div > .glass-panel,
.grid > div > .card {
    max-width: 100% !important;
    width: 100% !important;
}

/* Stylize card inline buttons (staff actions, reset buttons) into premium items */
.glass-panel button[class*="text-[9px]"],
.card button[class*="text-[9px]"],
.glass-panel button[class*="text-[8px]"],
.card button[class*="text-[8px]"] {
    border-radius: 0.55rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.55rem 0.8rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid transparent !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.glass-panel button[class*="bg-orange-600/10"],
.card button[class*="bg-orange-600/10"] {
    background: rgba(234, 88, 12, 0.12) !important;
    color: #f97316 !important;
    border-color: rgba(234, 88, 12, 0.25) !important;
}
.glass-panel button[class*="bg-orange-600/10"]:hover,
.card button[class*="bg-orange-600/10"]:hover {
    background: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25) !important;
}

.glass-panel button[class*="bg-gray-700/50"],
.card button[class*="bg-gray-700/50"] {
    background: rgba(148, 163, 184, 0.12) !important;
    color: var(--text-secondary) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}
.glass-panel button[class*="bg-gray-700/50"]:hover,
.card button[class*="bg-gray-700/50"]:hover {
    background: rgba(148, 163, 184, 0.25) !important;
    color: var(--text-primary) !important;
}

.glass-panel button[class*="bg-purple-600/10"],
.card button[class*="bg-purple-600/10"] {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #a78bfa !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
}
.glass-panel button[class*="bg-purple-600/10"]:hover,
.card button[class*="bg-purple-600/10"]:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

.glass-panel button[class*="bg-blue-600/10"],
.card button[class*="bg-blue-600/10"] {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
.glass-panel button[class*="bg-blue-600/10"]:hover,
.card button[class*="bg-blue-600/10"]:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

/* Light Theme Contrast Enhancements for action buttons & text */
.light-theme .glass-panel button[class*="bg-orange-600/10"],
.light-theme .card button[class*="bg-orange-600/10"] {
    background: rgba(234, 88, 12, 0.08) !important;
    color: #c2410c !important;
    border-color: rgba(234, 88, 12, 0.2) !important;
}
.light-theme .glass-panel button[class*="bg-purple-600/10"],
.light-theme .card button[class*="bg-purple-600/10"] {
    background: rgba(109, 40, 217, 0.08) !important;
    color: #6d28d9 !important;
    border-color: rgba(109, 40, 217, 0.2) !important;
}
.light-theme .glass-panel button[class*="bg-blue-600/10"],
.light-theme .card button[class*="bg-blue-600/10"] {
    background: rgba(29, 78, 216, 0.08) !important;
    color: #1d4ed8 !important;
    border-color: rgba(29, 78, 216, 0.2) !important;
}

/* Escopo inclui #modal-container (todos os modais) além de #app-container --
   modais são irmãos de #app-container no DOM (fora dele), então uma regra
   restrita a "#app-container .text-gray-200" nunca alcança texto de modal
   e ficava quase invisível (cinza claro sobre fundo lilás claro) no tema claro. */
.light-theme #app-container .text-white,
.light-theme #app-container .text-gray-100,
.light-theme #app-container .text-slate-100,
.light-theme #app-container .text-gray-200,
.light-theme #app-container .text-slate-200,
.light-theme #app-container .text-gray-300,
.light-theme #app-container .text-slate-300,
.light-theme #modal-container .text-white,
.light-theme #modal-container .text-gray-100,
.light-theme #modal-container .text-slate-100,
.light-theme #modal-container .text-gray-200,
.light-theme #modal-container .text-slate-200,
.light-theme #modal-container .text-gray-300,
.light-theme #modal-container .text-slate-300 {
    color: var(--text-primary) !important;
}

.light-theme #app-container .text-gray-400,
.light-theme #app-container .text-slate-400,
.light-theme #app-container .text-gray-500,
.light-theme #app-container .text-slate-500,
.light-theme #modal-container .text-gray-400,
.light-theme #modal-container .text-slate-400,
.light-theme #modal-container .text-gray-500,
.light-theme #modal-container .text-slate-500 {
    color: var(--text-secondary) !important;
}

/* ── Tema Claro — paridade visual com o escuro ─────────────────────────────
   Traz o que o escuro tem (profundidade glass, glow no hover, neon das barras
   coloridas) adaptado pra fundo claro: glow suave, sombras slate em vez de
   preto puro. */

/* Glassmorphism com profundidade real no claro (sombra em camadas + brilho topo) */
.light-theme .glass-panel,
.light-theme #main-header {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
        0 10px 30px -12px rgba(15, 23, 42, 0.22),
        0 4px 12px -6px rgba(15, 23, 42, 0.10) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

/* Hover com glow laranja suave (substitui a sombra preta pesada do tema escuro) */
.light-theme .glass-panel:hover {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
        0 18px 40px -14px rgba(15, 23, 42, 0.28),
        0 0 18px -2px rgba(249, 115, 22, 0.22) !important;
    border-color: rgba(249, 115, 22, 0.35) !important;
}

/* Barras de destaque dos cards ganham glow colorido (o "neon" do tema escuro).
   Escopo preciso: só o filete absoluto no rodapé (bottom-0) com gradiente. */
.light-theme .glass-panel > [class*="bottom-0"][class*="from-orange-"] { box-shadow: 0 0 14px 0 rgba(249, 115, 22, 0.55); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-blue-"]   { box-shadow: 0 0 14px 0 rgba(59, 130, 246, 0.50); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-cyan-"]   { box-shadow: 0 0 14px 0 rgba(34, 211, 238, 0.50); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-teal-"]   { box-shadow: 0 0 14px 0 rgba(20, 184, 166, 0.50); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-yellow-"] { box-shadow: 0 0 14px 0 rgba(234, 179, 8, 0.50); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-green-"]  { box-shadow: 0 0 14px 0 rgba(34, 197, 94, 0.50); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-violet-"] { box-shadow: 0 0 14px 0 rgba(139, 92, 246, 0.50); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-slate-"]  { box-shadow: 0 0 12px 0 rgba(100, 116, 139, 0.45); }
.light-theme .glass-panel > [class*="bottom-0"][class*="from-gray-"]   { box-shadow: 0 0 12px 0 rgba(107, 114, 128, 0.45); }

/* Ambiência de fundo um tom mais viva (radiais laranja/índigo). */
.light-theme body::before { opacity: 0.10 !important; }
.light-theme body::after  { opacity: 0.10 !important; }

/* ── Tela de Login — Slideshow + Glassmorphism ─────────────────────────────
   Sempre escuro independente do light-theme do app.
   Slideshow via CSS @keyframes (3 slides, fade automático).
   ──────────────────────────────────────────────────────────────────────── */
#login-screen {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    background: #080c14;
    /* Forçar variáveis dark mesmo com .light-theme ativo */
    --bg-tertiary:   rgba(30, 41, 59, 0.55);
    --text-primary:  #f8fafc;
    --text-secondary:#94a3b8;
    --border-color:  rgba(255, 255, 255, 0.08);
    --accent-color:  #ea580c;
}
.login-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
/* PNG do sistema removido — só foto real + texto HTML */
.login-slide-design { display: none; }
/* Texto HTML — centralizado na imagem, fonte da marca */
.login-slide-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}
.login-slide-text h3 {
    font-family: var(--font-brand);
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.login-slide-text p {
    font-family: var(--font-brand);
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.login-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: uaiLoginSlide 90s infinite;
    transform: scale(1.05);
}
.login-slide:nth-child(1)  { animation-delay:  0s; }
.login-slide:nth-child(2)  { animation-delay:  6s; }
.login-slide:nth-child(3)  { animation-delay: 12s; }
.login-slide:nth-child(4)  { animation-delay: 18s; }
.login-slide:nth-child(5)  { animation-delay: 24s; }
.login-slide:nth-child(6)  { animation-delay: 30s; }
.login-slide:nth-child(7)  { animation-delay: 36s; }
.login-slide:nth-child(8)  { animation-delay: 42s; }
.login-slide:nth-child(9)  { animation-delay: 48s; }
.login-slide:nth-child(10) { animation-delay: 54s; }
.login-slide:nth-child(11) { animation-delay: 60s; }
.login-slide:nth-child(12) { animation-delay: 66s; }
.login-slide:nth-child(13) { animation-delay: 72s; }
.login-slide:nth-child(14) { animation-delay: 78s; }
.login-slide:nth-child(15) { animation-delay: 84s; }
@keyframes uaiLoginSlide {
    0%    { opacity: 0; transform: scale(1.05); }
    1.1%  { opacity: 1; }
    5.6%  { opacity: 1; transform: scale(1.00); }
    6.7%  { opacity: 0; }
    100%  { opacity: 0; transform: scale(1.05); }
}
.login-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}
.login-brand-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4rem;
    color: #fff;
}
.login-form-panel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.login-glass {
    background: rgba(8, 12, 20, 0.88);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(249, 115, 22, 0.20);
    box-shadow: 0 32px 64px -16px rgba(0,0,0,0.70),
                inset 0 1px 0 rgba(255,255,255,0.04);
    border-radius: 1.5rem;
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
}
@media (min-width: 1024px) {
    .login-brand-panel  { display: flex; }
    .login-form-panel   { width: auto; min-width: 480px; padding: 3rem; }
    .login-glass        { max-width: 420px; }
}
@media (max-width: 480px) {
    .login-glass {
        padding: 1.75rem 1.5rem;
        border-radius: 1.25rem;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }
    .login-form-panel { align-items: center; padding: 1rem; }
}

/* ─── Correções de Layout Contra Caching e Purga ─── */
#main-content {
    display: flex !important;
    flex-direction: column !important;
}

@media (min-width: 768px) {
    #portal-fab, #quick-links-fab, #suggestion-fab {
        position: fixed !important;
        left: auto !important;
        right: 1.25rem !important;
        z-index: 40 !important;
    }

    #portal-fab {
        bottom: 6rem !important;
    }

    #quick-links-fab {
        bottom: 10rem !important;
    }

    #suggestion-fab {
        bottom: 2rem !important;
    }
}


/* v433+ — Financeiro Preliminar/Termos: menos espaço morto entre linhas.
   As regras antigas forçavam labels com 2.15rem de altura mínima (pra alinhar
   colunas), desperdiçando ~12px por linha em cards que agora são empilhados. */
.os-finance-panel .grid.grid-cols-2.gap-3 > div > label,
.os-finance-panel .grid.grid-cols-2.gap-3 > div > .flex.items-center.justify-between,
.os-edit-form-flow .os-terms-panel .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label,
.os-new-form-flow .os-terms-panel .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label {
    min-height: 1.4rem !important;
    margin-bottom: 0.3rem !important;
}
.os-finance-panel.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem !important;
}

/* Valores de Repasse (Garantia/RMA): alinha os inputs quando um rótulo quebra
   em 2 linhas ("Repasse Mão de Obra (R$)") e o vizinho não. */
#os-warranty-fields-section .grid.grid-cols-2 > div > label,
#edit-warranty-fields-section .grid.grid-cols-2 > div > label {
    min-height: 2rem !important;
    display: flex !important;
    align-items: flex-end !important;
    margin-bottom: 0.35rem !important;
}

/* ── FORÇAR campos maiores e compactos em TODOS os painéis OS ───────────── */
/* Aumenta a fonte e reduz o padding/altura mínima em inputs/textareas/selects
   dos formulários de criação e edição de OS. Usamos ID + classes para máxima
   especificidade, anulando QUALQUER !important anterior. */
#new-os-form input.form-input,
#new-os-form select.form-input,
#new-os-form textarea.form-input,
.os-edit-form-flow input.form-input,
.os-edit-form-flow select.form-input,
.os-edit-form-flow textarea.form-input {
    font-size: 15px !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
}

/* Anula h-6(24px) / h-7(28px) / h-8(32px) do Tailwind nas textareas OS */
#new-os-form textarea.h-6,
#new-os-form textarea.h-7,
#new-os-form textarea.h-8,
.os-edit-form-flow textarea.h-6,
.os-edit-form-flow textarea.h-7,
.os-edit-form-flow textarea.h-8 {
    height: auto !important;
    min-height: 50px !important;
}

/* Garante que selects dentro dos painéis OS também tenham o mesmo tamanho */
#new-os-form select.form-input,
.os-edit-form-flow select.form-input {
    padding: 0.15rem 1.5rem 0.15rem 0.75rem !important;
    min-height: 40px !important;
}

/* Inputs dentro de grid de 2 colunas nao precisam ocupar 100% da coluna */
.os-new-form-flow .grid.grid-cols-2 input.form-input,
.os-new-form-flow .grid.grid-cols-2 select.form-input,
.os-edit-form-flow .grid.grid-cols-2 input.form-input,
.os-edit-form-flow .grid.grid-cols-2 select.form-input {
    max-width: 100% !important;
}

/* Labels dos campos — mais espaco para acompanhar o campo maior */
.os-new-form-flow label,
.os-edit-form-flow label {
    margin-bottom: 4px !important;
}

/* Força labels que estavam com min-height fixo */
.os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label {
    min-height: auto !important;
.login-slide-text p {
    font-family: var(--font-brand);
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.login-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: uaiLoginSlide 90s infinite;
    transform: scale(1.05);
}
.login-slide:nth-child(1)  { animation-delay:  0s; }
.login-slide:nth-child(2)  { animation-delay:  6s; }
.login-slide:nth-child(3)  { animation-delay: 12s; }
.login-slide:nth-child(4)  { animation-delay: 18s; }
.login-slide:nth-child(5)  { animation-delay: 24s; }
.login-slide:nth-child(6)  { animation-delay: 30s; }
.login-slide:nth-child(7)  { animation-delay: 36s; }
.login-slide:nth-child(8)  { animation-delay: 42s; }
.login-slide:nth-child(9)  { animation-delay: 48s; }
.login-slide:nth-child(10) { animation-delay: 54s; }
.login-slide:nth-child(11) { animation-delay: 60s; }
.login-slide:nth-child(12) { animation-delay: 66s; }
.login-slide:nth-child(13) { animation-delay: 72s; }
.login-slide:nth-child(14) { animation-delay: 78s; }
.login-slide:nth-child(15) { animation-delay: 84s; }
@keyframes uaiLoginSlide {
    0%    { opacity: 0; transform: scale(1.05); }
    1.1%  { opacity: 1; }
    5.6%  { opacity: 1; transform: scale(1.00); }
    6.7%  { opacity: 0; }
    100%  { opacity: 0; transform: scale(1.05); }
}
.login-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}
.login-brand-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4rem;
    color: #fff;
}
.login-form-panel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.login-glass {
    background: rgba(8, 12, 20, 0.88);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(249, 115, 22, 0.20);
    box-shadow: 0 32px 64px -16px rgba(0,0,0,0.70),
                inset 0 1px 0 rgba(255,255,255,0.04);
    border-radius: 1.5rem;
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
}
@media (min-width: 1024px) {
    .login-brand-panel  { display: flex; }
    .login-form-panel   { width: auto; min-width: 480px; padding: 3rem; }
    .login-glass        { max-width: 420px; }
}
@media (max-width: 480px) {
    .login-glass {
        padding: 1.75rem 1.5rem;
        border-radius: 1.25rem;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }
    .login-form-panel { align-items: center; padding: 1rem; }
}

/* ─── Correções de Layout Contra Caching e Purga ─── */
#main-content {
    display: flex !important;
    flex-direction: column !important;
}

@media (min-width: 768px) {
    #portal-fab, #quick-links-fab, #suggestion-fab {
        position: fixed !important;
        left: auto !important;
        right: 1.25rem !important;
        z-index: 40 !important;
    }

    #portal-fab {
        bottom: 6rem !important;
    }

    #quick-links-fab {
        bottom: 10rem !important;
    }

    #suggestion-fab {
        bottom: 2rem !important;
    }
}


/* v433+ — Financeiro Preliminar/Termos: menos espaço morto entre linhas.
   As regras antigas forçavam labels com 2.15rem de altura mínima (pra alinhar
   colunas), desperdiçando ~12px por linha em cards que agora são empilhados. */
.os-finance-panel .grid.grid-cols-2.gap-3 > div > label,
.os-finance-panel .grid.grid-cols-2.gap-3 > div > .flex.items-center.justify-between,
.os-edit-form-flow .os-terms-panel .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label,
.os-new-form-flow .os-terms-panel .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label {
    min-height: 1.4rem !important;
    margin-bottom: 0.3rem !important;
}
.os-finance-panel.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem !important;
}

/* Valores de Repasse (Garantia/RMA): alinha os inputs quando um rótulo quebra
   em 2 linhas ("Repasse Mão de Obra (R$)") e o vizinho não. */
#os-warranty-fields-section .grid.grid-cols-2 > div > label,
#edit-warranty-fields-section .grid.grid-cols-2 > div > label {
    min-height: 2rem !important;
    display: flex !important;
    align-items: flex-end !important;
    margin-bottom: 0.35rem !important;
}

/* ── FORÇAR campos maiores e compactos em TODOS os painéis OS ───────────── */
/* Aumenta a fonte e reduz o padding/altura mínima em inputs/textareas/selects
   dos formulários de criação e edição de OS. Usamos ID + classes para máxima
   especificidade, anulando QUALQUER !important anterior. */
#new-os-form input.form-input,
#new-os-form select.form-input,
#new-os-form textarea.form-input,
.os-edit-form-flow input.form-input,
.os-edit-form-flow select.form-input,
.os-edit-form-flow textarea.form-input {
    font-size: 15px !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
}

/* Anula h-6(24px) / h-7(28px) / h-8(32px) do Tailwind nas textareas OS */
#new-os-form textarea.h-6,
#new-os-form textarea.h-7,
#new-os-form textarea.h-8,
.os-edit-form-flow textarea.h-6,
.os-edit-form-flow textarea.h-7,
.os-edit-form-flow textarea.h-8 {
    height: auto !important;
    min-height: 50px !important;
}

/* Garante que selects dentro dos painéis OS também tenham o mesmo tamanho */
#new-os-form select.form-input,
.os-edit-form-flow select.form-input {
    padding: 0.15rem 1.5rem 0.15rem 0.75rem !important;
    min-height: 40px !important;
}

/* Inputs dentro de grid de 2 colunas nao precisam ocupar 100% da coluna */
.os-new-form-flow .grid.grid-cols-2 input.form-input,
.os-new-form-flow .grid.grid-cols-2 select.form-input,
.os-edit-form-flow .grid.grid-cols-2 input.form-input,
.os-edit-form-flow .grid.grid-cols-2 select.form-input {
    max-width: 100% !important;
}

/* Labels dos campos — mais espaco para acompanhar o campo maior */
.os-new-form-flow label,
.os-edit-form-flow label {
    margin-bottom: 4px !important;
}

/* Força labels que estaban com min-height fixo */
.os-panel-terms .grid.grid-cols-1.md\:grid-cols-2.gap-4 > div > label {
    min-height: auto !important;
    height: auto !important;
    margin-bottom: 4px !important;
}

/* Remove CSS que encolhia a font dos labels nos painéis Terms/Finance */
.os-panel-terms label,
.os-panel-finance label,
.os-finance-panel label {
    font-size: 10px !important;
}

/* Proteção Anti-Artefato: Impede que filhos com fundo sobressaiam em cantos arredondados */
#modal-container > div, .modal-card, .uai-modal-card, .glass-panel, .glass-pill, .portal-ticket-card, article.rounded-3xl, article.rounded-2xl {
    overflow: hidden !important;
}

/* ── ESTILOS DE LAYOUT DA AGENDA (Mês, Semana, Dia) ───────────── */
.calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
}
.calendar-header-cell {
    padding: 10px 4px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--text-secondary, #94a3b8) !important;
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 10px !important;
}
.light-theme .calendar-header-cell {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #475569 !important;
}
.calendar-cell {
    min-height: 100px !important;
    padding: 8px !important;
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.light-theme .calendar-cell {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
.calendar-cell.other-month {
    opacity: 0.35 !important;
}
.calendar-cell.today {
    border-color: #f97316 !important;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.25) !important;
    background: rgba(249, 115, 22, 0.08) !important;
}
.calendar-day-num {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: var(--text-primary, #f8fafc) !important;
    margin-bottom: 2px !important;
}
.calendar-event {
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    border-left: 3px solid !important;
    cursor: pointer !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Visão de Horários da Agenda (Semana / Dia) */
.agenda-time-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow-x: auto !important;
}
.agenda-grid-header {
    display: flex !important;
    margin-left: 60px !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}
.agenda-header-day {
    flex: 1 !important;
    min-width: 100px !important;
    text-align: center !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--text-secondary, #cbd5e1) !important;
}
.agenda-header-day.today {
    color: #f97316 !important;
}
.agenda-grid-body {
    position: relative !important;
    height: 1440px !important;
    display: flex !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.agenda-time-col {
    width: 60px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
}
.agenda-hour-label {
    position: absolute !important;
    right: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    transform: translateY(-50%) !important;
}
.agenda-days-container {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    min-width: 700px !important;
}
.agenda-day-col {
    flex: 1 !important;
    position: relative !important;
    border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.05)) !important;
}
.agenda-hour-line {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: var(--border-color, rgba(255, 255, 255, 0.05)) !important;
}
.agenda-absolute-event {
    position: absolute !important;
    left: 4px !important;
    right: 4px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-left: 3px solid !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
}

/* ── BASE DE CONHECIMENTO (CARDS DE ALTA DEFINIÇÃO & DESIGN NOTION) ─── */
.kb-hero-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
}

/* Card Principal: Caixa com Fundo Branco Neve e Borda de 2px + Borda Esquerda de 6px por Categoria */
.light-theme .kb-article-card,
.kb-article-card {
    background-color: #ffffff !important;
    border: 2px solid #94a3b8 !important; /* Borda cinza bem nítida */
    border-radius: 20px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 22px !important;
}

body:not(.light-theme) .kb-article-card {
    background-color: #0f172a !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
}

/* Bordas Laterais por Categoria para Diferenciação Visual Imediata */
.kb-article-card[data-cat="hardware"]    { border-left: 6px solid #2563eb !important; }
.kb-article-card[data-cat="software"]    { border-left: 6px solid #10b981 !important; }
.kb-article-card[data-cat="rede"]        { border-left: 6px solid #8b5cf6 !important; }
.kb-article-card[data-cat="seguranca"]   { border-left: 6px solid #ef4444 !important; }
.kb-article-card[data-cat="email"]       { border-left: 6px solid #f59e0b !important; }
.kb-article-card[data-cat="impressora"]  { border-left: 6px solid #06b6d4 !important; }
.kb-article-card[data-cat="windows"]     { border-left: 6px solid #6366f1 !important; }
.kb-article-card[data-cat="outro"]       { border-left: 6px solid #64748b !important; }

.kb-article-card:hover {
    transform: translateY(-4px) !important;
    border-color: #2563eb !important;
    box-shadow: 0 20px 40px -8px rgba(37, 99, 235, 0.25) !important;
}

.kb-article-title {
    color: #0f172a !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}
body:not(.light-theme) .kb-article-title {
    color: #f8fafc !important;
}

.kb-article-desc {
    color: #334155 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}
body:not(.light-theme) .kb-article-desc {
    color: #94a3b8 !important;
}

.kb-tag-item {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
body:not(.light-theme) .kb-tag-item {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.kb-edit-btn {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 12px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    transition: all 0.2s ease !important;
}
.kb-edit-btn:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}
body:not(.light-theme) .kb-edit-btn {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.kb-cat-btn {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    transition: all 0.2s ease !important;
}
.kb-cat-btn:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}
.kb-cat-btn.active {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}