/* =====================================================================================================
   FerHelpDesk — CASCA do layout (Design System Fischer & Rechsteiner)
   Fonte da verdade: D:\...\Projects\Fischer & Rechsteiner Design System (ui_kits/logistics-dashboard + tokens/*).
   Desenho: docs/plans/2026-10-07-novo-layout-fischer-e-mobile-design.md

   ⚠️ O TEMA MANDA SÓ NAS CORES. Os tokens do Design System abaixo LEEM as variáveis do tema (--fer-azul,
   --fer-navy, --fer-cinza, --fer-borda, --menu-fundo, --corpo-fundo...), que o <style id="tema-cores"> do
   layout sobrescreve. Por isso o LMS, o Fischer, o Grafite etc. têm a MESMA estrutura e cores diferentes.
   ===================================================================================================== */

:root {
    /* Tipografia do Design System (arquivos locais: fer-fonts.css). O tema ainda pode trocar via --pref-font-*. */
    --font-display: "Jost", system-ui, "Segoe UI", sans-serif;
    --font-body:    "Lato", Calibri, system-ui, "Segoe UI", sans-serif;

    /* Cores: ponte tema → tokens do Design System */
    --brand-primary:        var(--fer-azul);
    --brand-primary-hover:  color-mix(in srgb, var(--fer-azul) 88%, #000);
    --brand-primary-active: color-mix(in srgb, var(--fer-azul) 74%, #000);
    --surface-inverse:      var(--menu-fundo, var(--fer-navy));
    --surface-sunken:       var(--corpo-fundo, var(--fer-cinza));
    --surface-card:         var(--fer-branco);
    --border-default:       var(--fer-borda);
    --border-strong:        #cfcfcf;
    --text-primary:         #343434;
    --text-secondary:       #5c5c5c;
    /* Cor do texto sobre a barra lateral: o tema escolhe pela luminância do fundo (IdentidadeTema → --menu-on). */
    --menu-on:              #ffffff;

    --status-success: #0f7a3d; --status-success-bg: #e3f5e9;
    --status-warning: #8f5b00; --status-warning-bg: #fbeed9;
    --status-danger:  #c22a2a; --status-danger-bg:  #fbe4e4;
    --status-info:    var(--brand-primary); --status-info-bg: color-mix(in srgb, var(--brand-primary) 9%, #fff);

    --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; --radius-pill: 999px;
    --shadow-s: 0 1px 2px rgba(26,26,26,.06), 0 1px 1px rgba(26,26,26,.04);
    --shadow-m: 0 4px 12px rgba(26,26,26,.08), 0 1px 2px rgba(26,26,26,.04);
    --shadow-l: 0 12px 32px rgba(26,26,26,.12), 0 2px 6px rgba(26,26,26,.06);
    --ease-standard: cubic-bezier(.2,.8,.2,1);
    --duration-fast: 120ms;

    --side-w: 220px;
    --top-h:  56px;
}

body {
    margin: 0;
    font-family: var(--pref-font-corpo);
    font-size: var(--pref-size-corpo);
    color: var(--pref-color-corpo);
    background: var(--surface-sunken);
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, .fd-hero h1 { font-family: var(--font-display); }

/* ── Estrutura: barra lateral escura + área de conteúdo ── */
.fer-shell { display: flex; min-height: 100vh; }

.fer-side {
    width: var(--side-w); flex: none;
    background: var(--surface-inverse); color: var(--menu-on);
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    font-family: var(--pref-font-menu);
    z-index: 60;
}
.fer-brand { padding: 20px 18px; border-bottom: 1px solid color-mix(in srgb, var(--menu-on) 14%, transparent); }
.fer-brand a { display: block; }
/* Marca: o arquivo INTEIRO, proporção preservada (regra do Design System). */
.fer-brand img { display: block; width: 100%; max-width: 184px; height: auto; object-fit: contain; }
/* Logo personalizado do cliente (produto comercializável): sobre uma placa clara, para não sumir no fundo escuro. */
.fer-brand .fer-brand-placa { background: #fff; border-radius: var(--radius-m); padding: 8px 10px; }
.fer-brand small {
    display: block; margin-top: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: color-mix(in srgb, var(--menu-on) 76%, transparent);
}

/* Menu */
.fer-side .menu-lateral { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--menu-on) 30%, transparent) transparent; }
.menu-setor {
    padding: 14px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: color-mix(in srgb, var(--menu-on) 76%, transparent); white-space: nowrap; overflow: hidden;
}
.menu-admin-link, .menu-sistema {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 1px 0;
    border-radius: var(--radius-m); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
    color: color-mix(in srgb, var(--menu-on) 82%, transparent); line-height: 1.5;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
}
.menu-admin-link .bi, .menu-sistema .bi { margin: 0 !important; font-size: 18px; flex: none; }
.menu-admin-link:hover, .menu-sistema:hover {
    background: var(--menu-hover-bg, color-mix(in srgb, var(--menu-on) 9%, transparent));
    color: var(--menu-hover-texto, var(--menu-on));
}
.menu-admin-link.active { background: var(--brand-primary); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--menu-on) 38%, transparent); }
.menu-sistema .chevron { margin-left: auto; font-size: 14px; transition: transform var(--duration-fast); }
.menu-sistema.open .chevron { transform: rotate(180deg); }
.menu-relatorios { display: none; list-style: none; margin: 0; padding: 0 0 4px 14px; }
.menu-relatorios.open { display: block; }
.menu-relatorios li a { font-weight: 400; padding: 8px 12px; }
.menu-relatorios li a.active { font-weight: 700; }
.menu-relatorios mark { background: rgba(255,220,50,.35); color: inherit; border-radius: 2px; padding: 0 1px; }
.menu-setor.hidden, .menu-sistema.hidden, .menu-relatorios.hidden, li.hidden { display: none !important; }

/* Rodapé da barra lateral: quem está logado + Sair */
.fer-user {
    border-top: 1px solid color-mix(in srgb, var(--menu-on) 14%, transparent);
    padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px;
}
.fer-user .av {
    width: 34px; height: 34px; border-radius: 50%; background: var(--brand-primary); color: #fff;
    display: grid; place-items: center; font-weight: 700; flex: none; font-size: 13px;
}
.fer-user .nm { min-width: 0; flex: 1; line-height: 1.3; }
.fer-user .nm b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fer-user .nm span { font-size: 12px; color: color-mix(in srgb, var(--menu-on) 78%, transparent); }
.fer-user .sair {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-m);
    color: color-mix(in srgb, var(--menu-on) 75%, transparent);
}
.fer-user .sair:hover { background: color-mix(in srgb, var(--menu-on) 12%, transparent); color: var(--menu-on); }

/* ── Área de conteúdo ── */
.fer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#main-content { flex: 1; min-width: 0; padding: 28px; }

/* Faixa fina de topo (sem equivalente no modelo: composta só com tokens). Desktop: sino, ajuda e versão. */
.fer-top {
    height: var(--top-h); flex: none; display: flex; align-items: center; gap: 4px; padding: 0 20px;
    background: var(--surface-card); border-bottom: 1px solid var(--border-default);
    position: sticky; top: 0; z-index: 30;
}
.fer-top .sp { flex: 1; }
.fer-top .hb, .fer-top .fer-top-logo { display: none; }
/* Sem login (página de erro): não há menu, então a marca aparece na faixa em qualquer largura. */
.fer-top .fer-top-logo.sem-menu { display: block; background: var(--surface-inverse); padding: 8px 14px; border-radius: var(--radius-m); }
.fer-top .fer-top-logo.sem-menu img { height: 30px; width: auto; display: block; }
.fer-ibtn {
    position: relative; min-width: 40px; height: 40px; padding: 0 10px; border: 0; background: none; border-radius: var(--radius-m);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    color: var(--text-secondary); font-size: 13px; font-weight: 700; text-decoration: none;
}
.fer-ibtn:hover { background: var(--surface-sunken); color: var(--text-primary); }
.fer-ibtn .bi { font-size: 20px; margin: 0 !important; }
.fer-ibtn .badge { position: absolute; top: 3px; right: 3px; }
.fer-ver { font-size: 12px; color: var(--text-secondary); text-decoration: none; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; }
.fer-ver:hover { color: var(--brand-primary); }
.fer-ver .novo { width: 7px; height: 7px; border-radius: 50%; background: #ffc107; box-shadow: 0 0 0 2px rgba(255,193,7,.35); }
.fer-top .dropdown-menu { width: min(330px, 92vw); }

.fer-scrim { display: none; }

/* ── CELULAR (sem equivalente no modelo; composto só com tokens do Design System) ── */
@media (max-width: 900px) {
    .fer-side {
        position: fixed; left: 0; top: 0; bottom: 0; height: auto; transform: translateX(-100%);
        transition: transform .2s var(--ease-standard); box-shadow: var(--shadow-l); width: min(280px, 86vw);
    }
    body.fer-menu-aberto .fer-side { transform: none; }
    body.fer-menu-aberto { overflow: hidden; }
    body.fer-menu-aberto .fer-scrim { display: block; position: fixed; inset: 0; background: rgba(26,26,26,.5); z-index: 55; }

    .fer-top { background: var(--surface-inverse); color: var(--menu-on); padding: 0 6px 0 4px; border-bottom: 0; }
    .fer-top .hb { display: grid; width: 48px; height: 48px; place-items: center; border: 0; background: none; color: var(--menu-on); border-radius: var(--radius-m); }
    .fer-top .hb .bi { font-size: 24px; }
    .fer-top .fer-top-logo { display: block; }
    .fer-top .fer-top-logo img { display: block; height: 30px; width: auto; }
    .fer-ibtn { color: var(--menu-on); min-width: 48px; height: 48px; }
    .fer-ibtn:hover { background: color-mix(in srgb, var(--menu-on) 12%, transparent); color: var(--menu-on); }
    .fer-ibtn .rot, .fer-ver { display: none; }
    /* Alvo de toque >= 44 px */
    .menu-admin-link, .menu-sistema { min-height: 44px; }
    .menu-relatorios li a { min-height: 44px; display: flex; align-items: center; }
    .fer-user .sair { width: 44px; height: 44px; }
    #main-content { padding: 16px 16px 88px; }   /* 88 px embaixo: a bolha do chat não cobre o fim da página */
}

/* =====================================================================================================
   BARRA LATERAL RECOLHÍVEL (desktop) — DESVIO DECLARADO do modelo do Design System, que tem a barra fixa
   de 220 px. Pedido do dono do produto em 07/10/2026: quem já usava o menu recolhido continua podendo.
   Recolhida = faixa de 72 px só com ícones (o nome vai no title). A escolha é guardada por pessoa no navegador
   (localStorage 'fer-menu-recolhido'); o estado é aplicado no <html> antes da pintura (script no <head>).
   ===================================================================================================== */
.fer-brand .fer-brand-marca { display: none; }   /* (0,2,0): vence ".fer-brand img" */
.fer-colapsar {
    display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 0 10px 8px; padding: 9px 12px;
    border: 0; border-radius: var(--radius-m); background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
    color: color-mix(in srgb, var(--menu-on) 82%, transparent);
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.fer-colapsar:hover { background: color-mix(in srgb, var(--menu-on) 9%, transparent); color: var(--menu-on); }
.fer-colapsar .bi { font-size: 18px; flex: none; margin: 0 !important; }
.fer-side { transition: width var(--duration-fast) var(--ease-standard); }
@media (max-width: 900px) { .fer-colapsar { display: none; } }
@media (min-width: 901px) {
    html.fer-menu-recolhido { --side-w: 72px; }
    html.fer-menu-recolhido .fer-brand { padding: 16px 0; text-align: center; }
    html.fer-menu-recolhido .fer-brand > a > img:not(.fer-brand-marca),
    html.fer-menu-recolhido .fer-brand .fer-brand-placa,
    html.fer-menu-recolhido .fer-brand small { display: none; }
    html.fer-menu-recolhido .fer-brand .fer-brand-marca { display: block; width: 40px; height: 40px; margin: 0 auto; border-radius: var(--radius-m); object-fit: contain; }
    html.fer-menu-recolhido .fer-brand-inicial { display: grid; place-items: center; background: var(--brand-primary); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 20px; }
    html.fer-menu-recolhido .fer-side .menu-lateral { padding: 12px 8px; scrollbar-width: none; }
    html.fer-menu-recolhido .menu-setor, html.fer-menu-recolhido .menu-relatorios, html.fer-menu-recolhido .menu-sistema .chevron { display: none !important; }
    html.fer-menu-recolhido .menu-admin-link, html.fer-menu-recolhido .menu-sistema { font-size: 0; justify-content: center; padding: 11px 0; gap: 0; }
    html.fer-menu-recolhido .menu-admin-link .bi, html.fer-menu-recolhido .menu-sistema .bi { font-size: 18px; }
    html.fer-menu-recolhido .fer-colapsar { justify-content: center; width: calc(100% - 16px); margin: 0 8px 8px; padding: 9px 0; }
    html.fer-menu-recolhido .fer-colapsar span { display: none; }
    html.fer-menu-recolhido .fer-colapsar .bi { transform: scaleX(-1); }
    html.fer-menu-recolhido .fer-user { flex-direction: column; padding: 12px 0; gap: 8px; }
    html.fer-menu-recolhido .fer-user .nm { display: none; }
}