/* ==========================================================================
   ESTILOS DO SISTEMA DE COTAÇÕES - GRUPO PRIME B2B
   ========================================================================== */

/* Cabeçalho Global Padronizado (Idêntico ao Painel e Expedição) */
.global-header {
    height: 60px;
    flex-shrink: 0;
    background: #0f172a;
    color: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1001;
    box-shadow: 0 2px 6px -1px rgba(0,0,0,.15);
    width: 100%;
}
.header-nav { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.header-button {
    font-size: 0.92rem;
    line-height: 1.25;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .85rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.header-button i { color: #38bdf8; font-size: .95rem; }
.header-button:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.4);
}
.header-button.active {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}

/* Base Body */
body { 
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Inputs Minimalistas */
.input-field {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: #f1f5f9;
    color: #334155;
    transition: all 0.2s ease;
    font-weight: 500;
}
.input-field:hover:not(.input-disabled) {
    background-color: #e2e8f0;
}
.input-field:focus:not(.input-disabled) { 
    outline: none; 
    background-color: #ffffff;
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); 
}
.input-disabled { 
    background-color: #e2e8f0 !important; 
    color: #64748b !important; 
    cursor: not-allowed; 
    opacity: 0.8;
    border-color: transparent !important;
}

/* Modais */
.modal { display: none; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); }
.modal.active { display: flex; }

/* Dark Mode Suave */
body.dark { background-color: #0f172a; color: #f8fafc; }
body.dark .bg-white { background-color: #1e293b; }
body.dark .bg-gray-50, body.dark .bg-slate-50 { background-color: #0f172a; }
body.dark .bg-gray-100, body.dark .bg-slate-100 { background-color: #1e293b; }
body.dark .text-gray-800, body.dark .text-gray-700 { color: #f8fafc; }
body.dark .text-gray-600, body.dark .text-gray-500 { color: #94a3b8; }
body.dark .border-gray-200, body.dark .border-gray-300 { border-color: #334155; }

body.dark .input-field { 
    background-color: #0f172a; 
    color: #f8fafc; 
    border-color: #334155; 
}
body.dark .input-field:hover:not(.input-disabled) { background-color: #1e293b; }
body.dark .input-field:focus:not(.input-disabled) {
    background-color: #1e293b;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); 
}
body.dark .input-disabled { background-color: #0f172a !important; color: #64748b !important; border-color: transparent !important; }

/* Amoled Mode */
body.dark.amoled { background-color: #000000; }
body.dark.amoled .bg-white, body.dark.amoled .bg-slate-50, body.dark.amoled .bg-slate-100 { background-color: #000000; border-color: #1a1a1a; }
body.dark.amoled .input-field { background-color: #050505; border-color: #222; }
body.dark.amoled .input-field:hover:not(.input-disabled) { background-color: #111; }
body.dark.amoled .input-field:focus:not(.input-disabled) { background-color: #000; border-color: #4f46e5; }
body.dark.amoled .input-disabled { background-color: #111 !important; color: #555 !important; border-color: #222 !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
body.dark ::-webkit-scrollbar-thumb { background: #475569; }

@keyframes fillBar {
    0% { transform: scaleX(0); }
    50% { transform: scaleX(0.5); }
    100% { transform: scaleX(1); }
}
.animate-loader { animation: fillBar 1.5s infinite alternate ease-in-out; transform-origin: left; }

/* Validação Visual de Campos Obrigatórios */
.input-invalido {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
body.dark .input-invalido {
    border-color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}
body.dark.amoled .input-invalido {
    border-color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.18) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}

/* Container Unificado de Dimensões (C x L x A cm) */
.dim-container {
    display: inline-flex;
    align-items: center;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 2px 6px;
    gap: 3px;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}
body.dark .dim-container {
    background-color: #0f172a;
    border-color: #334155;
}
body.dark.amoled .dim-container {
    background-color: #050505;
    border-color: #222;
}
.dim-container:focus-within {
    border-color: #818cf8;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
body.dark .dim-container:focus-within {
    background-color: #1e293b;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.dim-container input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 3px 2px !important;
    width: 38px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
}
.dim-container.has-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}
body.dark .dim-container.has-error {
    border-color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
}

/* Seletor Compacto de Remetente (Pílulas / Botoes) */
.btn-remetente {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-remetente:hover {
    border-color: #818cf8 !important;
    background-color: #f8fafc;
}
body.dark .btn-remetente:hover {
    background-color: #1e293b;
    border-color: #6366f1 !important;
}
.btn-remetente.active {
    border-color: #4f46e5 !important;
    background-color: #eef2ff !important;
    color: #4338ca !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}
body.dark .btn-remetente.active {
    border-color: #818cf8 !important;
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #a5b4fc !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35) !important;
}
.btn-remetente.active .status-dot {
    background-color: #4f46e5 !important;
}
body.dark .btn-remetente.active .status-dot {
    background-color: #818cf8 !important;
}
#grupoBotoesRemetente.input-invalido {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    border-radius: 0.75rem;
    padding: 4px;
}
body.dark #grupoBotoesRemetente.input-invalido {
    border-color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}