/* Copiado de referencia-hub/app/static/css/hub.css em 14/10/2026 (visual do HUB = ponto de partida, CLAUDE.md).
   Sem os @font-face da Inter: as fontes não vieram na referência; vale a fonte do sistema. */
/* Design do HUB — replica o visual do sistema atual (Tabler + refinamentos). */

:root {
    --bg-page: #f4f6fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border-soft: #e7ebf3;
    --text-main: #18212f;
    --text-soft: #667085;
    --brand: #004db8;
    --brand-2: #0086b8;
    --green: #16a34a;
    --red: #e04f4f;
    --blue-soft: #e6edf8;
    --green-soft: #eaf8ef;
    --sidebar: #ffffff;
    --shadow-soft: 0 8px 22px rgba(15, 23, 42, .045);
    --radius-lg: 18px;
    --radius-md: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13.7px;
    color: var(--text-main);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

.hub-layout { display: flex; min-height: 100vh; }

/* ---------------- Sidebar ---------------- */
.hub-sidebar {
    width: 248px;
    flex: 0 0 248px;
    background: var(--sidebar);
    border-right: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 0 .7rem 1.2rem;
    transition: width .2s ease, flex-basis .2s ease, padding .2s ease;
}

/* menu recolhido: some para a esquerda e a área de conteúdo (tabela) ganha o espaço */
html.menu-recolhido .hub-sidebar {
    width: 0;
    min-width: 0;
    max-width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    border-right: 0;
}

.hub-toggle {
    flex: 0 0 auto;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: #52627a;
    border-radius: 10px;
    padding: .4rem .5rem;
    line-height: 0;
}
.hub-toggle:hover { background: #f4f7fb; color: var(--brand); }

.hub-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.05rem .55rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--border-soft);
}

.hub-brand-img { display: block; height: auto; }

.hub-nav-section {
    margin: 1rem .6rem .35rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #94a0b8;
}

.hub-nav-item {
    display: flex; align-items: center; gap: .68rem;
    padding: .6rem .7rem;
    margin-bottom: .12rem;
    border-radius: 11px;
    color: #52627a;
    font-size: .88rem; font-weight: 500;
    transition: background .12s, color .12s;
}
.hub-nav-item:hover { background: #f4f7fb; color: #003e93; }
.hub-nav-item.active { background: var(--blue-soft); color: var(--brand); font-weight: 600; }
.hub-nav-ic { width: 22px; text-align: center; font-size: 1rem; }

/* ---- menu expansível (grupo dropdown) ---- */
.hub-nav-toggle { width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.hub-nav-chevron { margin-left: auto; display: inline-flex; align-items: center; transition: transform .18s; }
.hub-nav-chevron .hub-ic { width: 15px; height: 15px; }
.hub-nav-group.open > .hub-nav-toggle .hub-nav-chevron { transform: rotate(180deg); }
.hub-nav-sub { display: none; margin: .05rem 0 .3rem .95rem; padding-left: .55rem; border-left: 2px solid #e7ecf3; }
.hub-nav-group.open .hub-nav-sub { display: block; }
.hub-nav-subitem { padding: .42rem .7rem; font-size: .84rem; }

/* ---------------- Main ---------------- */
.hub-main { flex: 1 1 auto; min-width: 0; background: linear-gradient(180deg, #f7f9fd, #f3f5fa); }
.hub-content { padding: 1.1rem 1.4rem 2rem; }

.hub-header { padding: 1.2rem 1.4rem .4rem; }
.hub-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .32rem .7rem; border-radius: 999px;
    background: rgba(0, 77, 184, .08); color: #003e93;
    font-size: .76rem; font-weight: 600;
}
.hub-title { margin: .5rem 0 0; font-size: 1.32rem; font-weight: 700; color: #1b2559; letter-spacing: -.02em; }
.hub-subtitle { margin: .25rem 0 0; max-width: 720px; color: var(--text-soft); font-size: .86rem; }

.hub-user-card, .hub-filter-card {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .8rem; min-height: 58px;
    border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow-soft);
}
.hub-user-avatar {
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--blue-soft); color: var(--brand); border: 1px solid #ccdbf1;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem; text-transform: uppercase;
}
.hub-mini-label {
    display: block; margin-bottom: .2rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .045em;
    text-transform: uppercase; color: #73809a;
}
.hub-user-name { font-size: .9rem; font-weight: 600; color: #17243f; }

/* ---------------- Cards (refinados) ---------------- */
.card {
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
}
.card-header { border-bottom: 1px solid var(--border-soft); padding: .8rem 1.05rem; }
.card-title { color: #1b2559; font-weight: 600; font-size: .96rem; }

.hub-metric-icon {
    width: 48px; height: 48px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.hub-metric-blue { background: var(--blue-soft); border: 1px solid #ccdbf1; }
.hub-metric-green { background: var(--green-soft); border: 1px solid #cdeed7; }

.hub-card-title-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--blue-soft); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
    margin-right: .55rem;
}

/* listas laterais (marketplace / UF) */
.hub-list-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; padding: .5rem 0; border-bottom: 1px solid #edf1f7; font-size: .84rem;
}
.hub-list-row:last-child { border-bottom: 0; }
.hub-uf-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 24px; padding: 0 .5rem; border-radius: 999px;
    background: var(--blue-soft); color: #003e93; font-size: .72rem; font-weight: 600;
}

/* ---------------- Ícones SVG (Tabler Icons inline) ---------------- */
.hub-ic { width: 20px; height: 20px; stroke-width: 1.9; vertical-align: -.18em; flex: 0 0 auto; }
.hub-nav-ic { width: 22px; display: inline-flex; justify-content: center; }
.hub-nav-ic .hub-ic { width: 19px; height: 19px; }
.hub-card-title-icon .hub-ic { width: 18px; height: 18px; }
.hub-metric-icon .hub-ic { width: 24px; height: 24px; stroke-width: 1.8; }
.hub-metric-blue .hub-ic { color: var(--brand); }
.hub-metric-green .hub-ic { color: var(--green); }

/* ---------------- DataTables afinado ao Tabler ---------------- */
.dataTables_wrapper { padding: .3rem .2rem 0; }
.dataTables_wrapper .row:first-child { padding: .6rem .8rem; align-items: center; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-soft); border-radius: 10px;
    padding: .32rem .6rem; font-size: .85rem; background: #fbfcfe;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: #a6c1e6; }
table.dataTable thead th {
    background: var(--surface-2); color: #55617a; font-weight: 600;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--border-soft) !important; cursor: pointer;
}
table.dataTable tbody td { font-size: .86rem; border-bottom: 1px solid #eef1f6; }
table.dataTable tbody tr:hover { background: #f7f9fd; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand) !important; border-color: var(--brand) !important;
    color: #fff !important; border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px; padding: .25rem .6rem; font-size: .82rem;
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--text-soft); font-size: .82rem; }

@media (max-width: 991.98px) {
    .hub-sidebar { position: fixed; z-index: 1030; transform: translateX(-100%); transition: transform .2s; }
    .hub-sidebar.aberta { transform: translateX(0); }
    .hub-content, .hub-header { padding-left: 1rem; padding-right: 1rem; }
}

/* ---- Expedição: cores de situação — padrão único das telas Transportadoras,
   Mercado Livre (Com/Sem Estoque) e Crossdocking (decisão do Diego, 07/09/2026) ---- */
:root{--st-andamento:#004db8;--st-pronto:#2fb344;--st-agendado:#ae3ec9;--st-pendente:#f76707;
      --st-problema:#d63939;--st-concluido:#6c7a91;--st-cancelado:#a12020;--st-atencao:#f59f00}
.st-badge{display:inline-block;padding:.28em .6em;border-radius:6px;font-weight:600;
    font-size:.78rem;line-height:1.2;color:#fff;white-space:nowrap}
.st-badge.st-conta{font-size:.72rem;padding:.18em .5em;margin-left:.35rem}
.st-andamento{background:var(--st-andamento)}.st-pronto{background:var(--st-pronto)}
.st-agendado{background:var(--st-agendado)}.st-pendente{background:var(--st-pendente)}
.st-problema{background:var(--st-problema)}.st-concluido{background:var(--st-concluido)}
.st-cancelado{background:var(--st-cancelado)}
.cx-andamento{--cx-cor:var(--st-andamento)}.cx-pronto{--cx-cor:var(--st-pronto)}
.cx-agendado{--cx-cor:var(--st-agendado)}.cx-pendente{--cx-cor:var(--st-pendente)}
.cx-problema{--cx-cor:var(--st-problema)}.cx-concluido{--cx-cor:var(--st-concluido)}
.cx-cancelado{--cx-cor:var(--st-cancelado)}
.st-atencao{background:var(--st-atencao)}.cx-atencao{--cx-cor:var(--st-atencao)}

/* ---- Expedição: visualização de lista JÁ IMPRESSA (histórico) — cor própria pra
   não confundir com a tela de pedidos a imprimir (Diego, 07/09/2026) ---- */
:root{--lista-impressa:#b35c00;--lista-impressa-bg:#fff3e0}
.lista-impressa-aviso{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
    background:var(--lista-impressa-bg);border:2px solid var(--lista-impressa);border-radius:10px;
    color:var(--lista-impressa);padding:.6rem 1rem;margin-bottom:.9rem;font-size:.95rem}
.lista-impressa-aviso .lia-titulo{font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.card.lista-impressa{border:3px solid var(--lista-impressa)!important;box-shadow:0 0 0 4px var(--lista-impressa-bg)}
.card.lista-impressa thead th{background:var(--lista-impressa-bg)!important;color:var(--lista-impressa)!important}
.me-status .st-badge,.prop-status .st-badge{white-space:normal;line-height:1.25}

/* sino de notificações no topo (Diego, 09/10/2026) */
.hub-sino{ position:relative; display:flex; align-items:center; }
.hub-sino-botao{ position:relative; }
.hub-sino-badge{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
                 background:var(--tblr-red, #d63939); color:#fff; font-size:.68rem; font-weight:700; line-height:18px; text-align:center; }
.hub-sino-painel{ position:absolute; right:0; top:calc(100% + 6px); width:360px; max-width:calc(100vw - 2rem); background:var(--surface);
                  border:1px solid var(--border-soft); border-radius:var(--radius-md); box-shadow:0 10px 30px rgba(28,37,54,.14); z-index:1050; }
.hub-sino-topo{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .8rem; border-bottom:1px solid var(--border-soft); }
.hub-sino-lista{ max-height:420px; overflow-y:auto; }
.hub-sino-item{ display:block; padding:.55rem .8rem; border-bottom:1px solid var(--border-soft); color:var(--text-main); text-decoration:none;
                font-weight:600; font-size:.86rem; overflow-wrap:anywhere; }
.hub-sino-item:hover{ background:var(--surface-2); color:var(--text-main); }
.hub-sino-item.lida{ font-weight:400; color:var(--text-soft); opacity:.7; }
.hub-sino-item small{ display:block; color:var(--text-soft); font-weight:400; font-size:.75rem; }
.hub-sino-vazio{ padding:.8rem; color:var(--text-soft); font-size:.85rem; }

/* Início: saudação e cartões do dia (Diego, 09/10/2026) */
.hub-metric-red { background: #fdecec; border: 1px solid #f5c6c6; }
.hub-metric-orange { background: #fff1e3; border: 1px solid #f7d6b5; }
.hub-metric-red .hub-ic { color: #d63939; }
.hub-metric-orange .hub-ic { color: #f76707; }
.hub-metric-purple { background: #f1ecfb; border: 1px solid #ddd0f3; }
.hub-metric-purple .hub-ic { color: #6f42c1; }
.hub-metric-secondary { background: var(--surface-2); border: 1px solid var(--border-soft); }   /* bloco zerado */
.hub-metric-secondary .hub-ic { color: #8a94a8; }
.inicio-ola { padding: .2rem .2rem 0; }
.inicio-saudacao { margin: .25rem 0 0; font-size: 1.6rem; font-weight: 700; color: #1b2559; letter-spacing: -.02em; }
.inicio-frase { font-size: .9rem; font-weight: 600; color: #55617a; padding: .35rem .75rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.inicio-frase-ok { background: var(--green-soft); color: var(--green); border-color: #cdeed7; }
.inicio-tile { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.inicio-tile:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,37,54,.10); }
.inicio-num { font-size: 2rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.inicio-rotulo { font-weight: 600; color: #1b2559; margin-top: .15rem; }