/**
 * FrotaCheck — Design System v2 (paleta monocromática)
 * Preto/cinza como base de toda a interface — botões, navegação, texto,
 * bordas. Cor quase não aparece mais: status agora se diferencia por
 * ÍCONE + peso tipográfico, não por matiz. A única cor que sobrou é um
 * vermelho bem contido, reservado só pro que exige atenção imediata
 * (ocorrência aberta) — o resto é tudo preto/cinza.
 *
 * O fundo (--bg-soft) foi mantido exatamente como já estava — não mexi.
 */

:root{
    /* ---------- Escala de preto/cinza — a paleta agora ---------- */
    --ink-900: #0A0A0B;   /* texto de maior ênfase, títulos */
    --ink-800: #18181B;   /* botão primário, marca */
    --ink-700: #27272A;   /* hover de botão primário */
    --gray-600:#52525B;   /* texto secundário forte */
    --gray-500:#71717A;   /* texto secundário padrão (substitui --sub) */
    --gray-400:#A1A1AA;   /* texto terciário / placeholder */
    --gray-300:#D4D4D8;   /* borda em destaque */
    --gray-200:#E4E4E7;   /* borda padrão (substitui --line) */
    --gray-100:#F4F4F5;   /* fundo sutil (hover, tag neutra) */
    --gray-50: #FAFAFA;   /* fundo bem sutil */

    /* Aliases — mantém o nome antigo funcionando em todo CSS já escrito,
       só que agora apontando pra escala de cinza em vez de navy/teal.
       Isso permite migrar o sistema inteiro sem reescrever cada arquivo. */
    --navy:        var(--ink-800);
    --navy-dark:   var(--ink-900);
    --navy-2:      var(--ink-700);
    --teal:        var(--ink-800);
    --teal-dark:   var(--ink-900);
    --teal-light:  var(--gray-100);
    --sub:         var(--gray-500);
    --muted:       var(--gray-400);
    --line:        var(--gray-200);
    --line-strong: var(--gray-300);
    --ink:         #1F2937;

    /* ---------- A única cor que sobrou: urgência ---------- */
    --danger:       #B42318;
    --danger-light: #FBEAE8;
    --coral:        var(--danger);        /* alias de compatibilidade */
    --coral-dark:   var(--danger);
    --coral-light:  var(--danger-light);

    /* Aviso/manutenção — cinza-escuro com ícone, não mais âmbar vibrante */
    --amber:       var(--gray-600);
    --amber-dark:  var(--ink-900);
    --amber-light: var(--gray-100);
    --blue:        var(--gray-600);

    /* ---------- Fundo — INTOCADO por pedido explícito ---------- */
    --bg:          #FFFFFF;
    --bg-soft:     #F5F6F8;
    --bg-soft-2:   var(--gray-100);

    /* ---------- Espaçamento (escala 4px) ---------- */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

    /* ---------- Raio ---------- */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

    /* ---------- Sombra (elevação) — mais discreta, tom neutro ---------- */
    --shadow-xs: 0 1px 2px rgba(10,10,11,.04);
    --shadow-sm: 0 2px 8px rgba(10,10,11,.06);
    --shadow-md: 0 8px 20px rgba(10,10,11,.08);
    --shadow-lg: 0 16px 40px rgba(10,10,11,.14);
    --shadow-focus: 0 0 0 3px rgba(10,10,11,.14);

    /* ---------- Transições ---------- */
    --ease: cubic-bezier(.4,0,.2,1);
    --t-fast: .15s var(--ease);
    --t-med: .25s var(--ease);

    /* ---------- Tipografia ---------- */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{ overflow-x:hidden; }
body{
    font-family: var(--font);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    background: var(--bg-soft);
    overflow-x:hidden;
    max-width:100%;
}
/* Nenhum elemento pode forçar a página a ficar mais larga que a tela —
   trava de segurança pra celular, onde 1 elemento largo demais estoura
   a rolagem horizontal da página inteira. */
img, table, .card-soft, .fc-card{ max-width:100%; }

/* Aperta o respiro lateral em tela muito estreita — usa "body .container-app"
   (mais específico que só ".container-app") pra vencer o padding que cada
   página define localmente, sem precisar editar cada arquivo um por um. */
@media (max-width: 380px){
    body .container-app{ padding-left:.85rem; padding-right:.85rem; }
    body .metric{ padding:.8rem .9rem; }
    body .metric strong{ font-size:1.35rem; }
}
a{ color:inherit; }
::selection{ background: var(--gray-200); color: var(--ink-900); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--r-sm);
}

/* ============================================================
   TIPOGRAFIA UTILITÁRIA
   ============================================================ */
.fc-h1{ font-size:1.5rem; font-weight:700; color:var(--ink-900); letter-spacing:-.01em; line-height:1.25; }
.fc-h2{ font-size:1.15rem; font-weight:700; color:var(--ink-900); letter-spacing:-.005em; }
.fc-eyebrow{ font-size:.8rem; color:var(--gray-500); margin-top:2px; }
.fc-label{ font-size:.78rem; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; }

/* ============================================================
   CARD
   ============================================================ */
.fc-card{
    background: var(--bg);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}
.fc-card-pad{ padding: var(--sp-5); }
.fc-card-hover{ transition: box-shadow var(--t-med), transform var(--t-med); }
.fc-card-hover:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ============================================================
   BOTÕES — preto/cinza como padrão; nada de navy/teal vibrante
   ============================================================ */
.fc-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    font-family: var(--font); font-size:.86rem; font-weight:600;
    padding:.55rem 1.1rem; border-radius: var(--r-md);
    border:1px solid transparent; cursor:pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    text-decoration:none; line-height:1.3;
}
.fc-btn:active{ transform: scale(.98); }
.fc-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.fc-btn-primary{ background: var(--ink-800); border-color: var(--ink-800); color:#fff; }
.fc-btn-primary:hover{ background: var(--ink-900); border-color: var(--ink-900); color:#fff; }

.fc-btn-accent{ background: var(--ink-800); border-color: var(--ink-800); color:#fff; }
.fc-btn-accent:hover{ background: var(--ink-900); border-color: var(--ink-900); color:#fff; }

.fc-btn-outline{ background:#fff; border-color: var(--gray-200); color: var(--ink-900); }
.fc-btn-outline:hover{ border-color: var(--gray-300); background: var(--gray-50); color: var(--ink-900); }

.fc-btn-ghost{ background:transparent; border-color:transparent; color: var(--gray-500); }
.fc-btn-ghost:hover{ background: var(--gray-100); color: var(--ink-900); }

.fc-btn-danger-outline{ background:#fff; border-color: var(--danger-light); color: var(--danger); }
.fc-btn-danger-outline:hover{ background: var(--danger-light); }

.fc-btn-sm{ padding:.4rem .8rem; font-size:.8rem; }
.fc-btn-block{ width:100%; }

/* ============================================================
   PÍLULAS / STATUS — ícone embutido, cor só no estado urgente
   ============================================================ */
.fc-pill{
    display:inline-flex; align-items:center; gap:.32rem;
    font-size:.72rem; font-weight:600; padding:.28rem .7rem;
    border-radius: var(--r-pill); white-space:nowrap; line-height:1.3;
}
.fc-pill svg{ width:12px; height:12px; flex-shrink:0; }

/* Neutro — usado pra a maioria dos status (resolvida, ok, concluída) */
.fc-pill-gray{ background: var(--gray-100); color: var(--gray-600); }
/* Destaque forte, mas ainda em cinza — "em andamento", "com pendência" */
.fc-pill-dark{ background: var(--ink-800); color:#fff; }
/* A única pílula colorida do sistema — reservada pra urgência real */
.fc-pill-urgent{ background: var(--danger-light); color: var(--danger); }

/* Aliases de compatibilidade — telas antigas continuam funcionando
   enquanto vão sendo migradas pros nomes novos acima */
.fc-pill-teal{ background: var(--gray-100); color: var(--gray-600); }
.fc-pill-coral{ background: var(--danger-light); color: var(--danger); }
.fc-pill-amber{ background: var(--gray-100); color: var(--gray-600); }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.fc-input, .form-control, .form-select{
    border-color: var(--gray-200) !important;
    border-radius: var(--r-md) !important;
    font-size: .88rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.fc-input:focus, .form-control:focus, .form-select:focus{
    border-color: var(--ink-800) !important;
    box-shadow: var(--shadow-focus) !important;
}
.fc-input::placeholder{ color: var(--gray-400); }

/* ============================================================
   TABELA
   ============================================================ */
.fc-table{ width:100%; border-collapse:collapse; }
.fc-table thead th{
    font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
    color: var(--gray-400); text-align:left; padding:.7rem 1rem; border-bottom:1px solid var(--gray-200);
}
.fc-table tbody td{ padding:.75rem 1rem; font-size:.87rem; border-bottom:1px solid var(--gray-200); }
.fc-table tbody tr:last-child td{ border-bottom:none; }
.fc-table tbody tr{ transition: background var(--t-fast); }
.fc-table tbody tr:hover{ background: var(--bg-soft); }

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.fc-empty{ text-align:center; padding: var(--sp-8) var(--sp-4); color: var(--gray-500); }
.fc-empty-icon{
    width:48px; height:48px; border-radius:50%; background: var(--gray-100);
    display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-3);
    color: var(--gray-400); font-size:1.3rem;
}
.fc-empty-title{ font-size:.92rem; font-weight:600; color: var(--ink-900); margin-bottom:.25rem; }
.fc-empty-sub{ font-size:.8rem; color: var(--gray-400); }

/* ============================================================
   LOADING — skeleton shimmer
   ============================================================ */
.fc-skeleton{
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
    background-size: 400% 100%;
    animation: fc-shimmer 1.4s ease infinite;
    border-radius: var(--r-sm);
}
@keyframes fc-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.fc-loading-row{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4); }
.fc-loading-line{ height:14px; }

@media (prefers-reduced-motion: reduce){
    .fc-skeleton{ animation:none; }
    .fc-card-hover{ transition:none; }
    .fc-btn{ transition:none; }
}

/* ============================================================
   MODAL (Bootstrap)
   ============================================================ */
.modal-content{ border:none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header{ border-bottom:1px solid var(--gray-200); padding: var(--sp-4) var(--sp-5); }
.modal-footer{ border-top:1px solid var(--gray-200); padding: var(--sp-4) var(--sp-5); }
.modal-body{ padding: var(--sp-5); }
.modal-title{ font-size:1rem; font-weight:700; color:var(--ink-900); }
.btn-close:focus{ box-shadow: var(--shadow-focus); }

/* ============================================================
   TOGGLE SWITCH — preto quando ligado, não mais teal
   ============================================================ */
.fc-toggle{ position:relative; display:inline-block; width:44px; height:25px; flex-shrink:0; }
.fc-toggle input{ opacity:0; width:0; height:0; }
.fc-toggle-track{ position:absolute; inset:0; background:var(--gray-300); border-radius:999px; cursor:pointer; transition:background var(--t-fast); }
.fc-toggle-track::before{ content:""; position:absolute; height:19px; width:19px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform var(--t-fast); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.fc-toggle input:checked + .fc-toggle-track{ background: var(--ink-800); }
.fc-toggle input:checked + .fc-toggle-track::before{ transform:translateX(19px); }