@charset "UTF-8";
/* ============================================================
   FIsherman - design system (sobre o Bootstrap 5.1 ja carregado)
   Paleta/tipografia aprovadas no mockup (ver conversa) antes de portar aqui.
   ============================================================ */

:root {
    /* Paleta da contabilidade: preto para laranja, degrade moderno. Nomes das variaveis
       mantidos (--ocean-*/--teal-*) por historico. IMPORTANTE (04/08): o fundo da sidebar
       e do hero NAO usam mais essas variaveis via CSS externo - vao inline direto no
       .razor (MainLayout.razor, Home.razor), porque nenhuma regra de folha de estilo pra
       essas cores pintava nessa maquina em nenhum navegador testado, so estilo inline
       funcionou. As variaveis abaixo continuam existindo so como referencia dos tons. */
    --ocean-900: #070503;
    --ocean-800: #4a1f08;
    --ocean-700: #c94f0a;
    --teal-500: #c94f0a;
    --teal-600: #a03e08;
    --teal-tint: #fbe7d9;

    --sand-50: #f7f5f2;
    --surface: #ffffff;
    --border-color: #e7e0d8;

    --ink-900: #1a1512;
    --ink-500: #6b5f56;
    --ink-300: #a89a8f;

    --success: #1e9e6b;
    --success-tint: #e7f6ef;
    --warning: #d98c1f;
    --warning-tint: #fbf1e1;
    --danger: #d6483f;
    --danger-tint: #fbeae8;
    --info: #2f7fd1;
    --info-tint: #e9f2fc;

    --radius: 0.65rem;
    --radius-lg: 1.1rem;
    /* Sombra recalculada em tom de --ink-900 (26,21,18) — antes usava rgba(14,31,38,...), um
       azul-petróleo que sobrou da paleta anterior e destoava do laranja/preto atual. */
    --shadow-sm: 0 1px 2px rgba(26, 21, 18, .07), 0 1px 3px rgba(26, 21, 18, .08);
    --shadow-md: 0 8px 24px rgba(26, 21, 18, .12), 0 2px 6px rgba(26, 21, 18, .07);

    --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

    /* ---- Paleta de dataviz (skill dataviz — categórica validada, slots 1-3) ---- */
    --viz-cat-1: #2a78d6; /* azul — NF-e */
    --viz-cat-2: #eb6834; /* laranja — CT-e */
    --viz-cat-3: #1baf7a; /* água — NFS-e */
    --viz-surface: #fcfcfb;
    --viz-text-primary: #0b0b0b;
    --viz-text-secondary: #52514e;
    --viz-muted: #898781;
    --viz-grid: #e1e0d9;
    --viz-baseline: #c3c2b7;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink-900);
    background-color: var(--sand-50);
}

/* O fundo do .sidebar NAO fica em CSS nenhum (nem aqui, nem no MainLayout.razor.css) -
   fica como estilo inline direto em MainLayout.razor. 04/08: nenhuma regra de folha de
   estilo pra .sidebar (com ou sem atributo de escopo do Blazor, em app.css ou no bundle)
   pintava nessa maquina em nenhum navegador testado, mesmo com o CSS confirmado correto
   por curl e pelo DevTools - so estilo inline funcionou. Causa exata nao identificada. */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.text-muted {
    color: var(--ink-500) !important;
}

a, .btn-link {
    color: var(--teal-600);
}

.content {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

h1:focus {
    outline: none;
}

/* ---------- Botões ---------- */
.btn {
    border-radius: var(--radius);
    font-weight: 500;
}

.btn-primary {
    color: #fff;
    background-color: var(--teal-500);
    border-color: var(--teal-500);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--teal-600);
        border-color: var(--teal-600);
    }

.btn-outline-primary {
    color: var(--teal-600);
    border-color: var(--teal-600);
}

    .btn-outline-primary:hover {
        background-color: var(--teal-600);
        border-color: var(--teal-600);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem var(--teal-tint);
    border-color: var(--teal-500);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: 1.35rem 1.5rem;
}

.card-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-500);
    margin: 0 0 1.1rem;
}

a.card, .card.card-link {
    transition: transform .12s ease, box-shadow .12s ease;
}

    a.card:hover, .card.card-link:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.quicklink svg {
    width: 17px;
    height: 17px;
    color: var(--teal-600);
    flex: none;
}

/* ---------- Gráficos (Components/Charts) ---------- */
.viz-bars {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.viz-bar-row {
    display: flex;
    align-items: center;
}

.viz-bar-label {
    width: 4.4rem;
    flex: 0 0 auto;
    text-align: right;
    padding-right: .65rem;
    font-size: .8rem;
    color: var(--viz-text-secondary);
    white-space: nowrap;
}

.viz-bar-track {
    flex: 1 1 auto;
    background-color: var(--sand-50);
    border-radius: 5px;
    height: 22px;
    overflow: hidden;
}

.viz-bar-fill {
    height: 100%;
    border-radius: 0 5px 5px 0;
    transition: width .3s ease;
}

.viz-bar-value {
    flex: 0 0 auto;
    min-width: 6.4rem;
    padding-left: .65rem;
    font-weight: 700;
    font-size: .85rem;
    color: var(--viz-text-primary);
    font-variant-numeric: tabular-nums;
}

.viz-line-chart {
    width: 100%;
    height: auto;
    display: block;
}

.viz-axis-line {
    stroke: var(--viz-baseline);
    stroke-width: 1;
}

.viz-axis-label {
    font-size: 9px;
    fill: var(--viz-muted);
}

.viz-end-label {
    font-size: 13px;
    font-weight: 700;
    fill: var(--viz-text-primary);
}

.viz-legend {
    display: flex;
    gap: 1.1rem;
    margin-top: .9rem;
    flex-wrap: wrap;
}

.viz-legend-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--ink-500);
}

.viz-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
    display: inline-block;
}

/* ---------- Hero do Home ---------- */
/* background do .hero vai inline em Home.razor (ver comentario no :root pro motivo) */
.hero {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
    color: #fff;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: center;
}

.hero-current {
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
}

.hero-brand {
    position: relative;
    z-index: 1;
}

    .hero-brand .k {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .hero-brand .s {
        font-size: .88rem;
        color: rgba(255, 255, 255, .68);
        margin-top: .3rem;
        max-width: 32ch;
    }

.hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2.25rem;
    flex-wrap: wrap;
}

.hero-stat .v {
    font-size: 1.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.hero-stat .l {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .62);
    margin-top: .3rem;
}

.section-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-500);
    font-weight: 600;
    margin: 2rem 0 .9rem;
}

.topline-user {
    font-size: .85rem;
    color: var(--ink-500);
}

/* ---------- Tabelas ---------- */
.table {
    --bs-table-hover-bg: var(--teal-tint);
}

    .table thead th {
        text-transform: uppercase;
        font-size: .72rem;
        letter-spacing: .04em;
        color: var(--ink-500);
        border-bottom: 2px solid var(--border-color);
        font-weight: 600;
    }

    .table > :not(caption) > * > * {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

.table-responsive {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

    .table-responsive .table {
        margin-bottom: 0;
        border: none;
    }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .4em .65em;
    border-radius: .4rem;
}

/* ---------- Barra de filtros (reutilizada em Documentos, Download, Relatórios, Status) ---------- */
.filter-bar {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

    .filter-bar .row {
        row-gap: .75rem;
    }

    .filter-bar .form-label {
        letter-spacing: .02em;
    }

/* ---------- Alertas ---------- */
.alert {
    border-radius: var(--radius);
    border: none;
}

.alert-band {
    background-color: var(--warning-tint);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    font-size: .86rem;
    color: var(--ink-900);
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

    .alert-band svg {
        width: 18px;
        height: 18px;
        color: var(--warning);
        flex: none;
        margin-top: .1rem;
    }

.alert-light {
    background-color: var(--sand-50);
    border: 1px solid var(--border-color);
}

/* ---------- Validação de formulário ---------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ---------- Reconexão do circuito Blazor Server ----------
   Sem isso, o próprio blazor.web.js injeta um overlay branco translúcido cobrindo a
   página inteira ("esmaecido") sem nenhum texto/ação visível enquanto tenta reconectar —
   e se a reconexão falhar de vez (retomada além de components-reconnect-max-retries,
   ou circuito expirado no servidor), fica esmaecido pra sempre sem dar pra saber o
   que fazer. Aqui a gente assume o controle total do modal (id fixo que o blazor.web.js
   já procura por padrão) com texto e botão de recarregar. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(13, 11, 10, .78);
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }

    #components-reconnect-modal .reconnect-box {
        background: var(--surface);
        color: var(--ink-900);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: 1.75rem 2rem;
        max-width: 22rem;
        text-align: center;
    }

    #components-reconnect-modal .reconnect-box p {
        display: none;
        margin-bottom: 1rem;
    }

    #components-reconnect-modal.components-reconnect-show .reconnect-msg-show,
    #components-reconnect-modal.components-reconnect-failed .reconnect-msg-failed,
    #components-reconnect-modal.components-reconnect-rejected .reconnect-msg-rejected {
        display: block;
    }

    #components-reconnect-modal.components-reconnect-show .reconnect-box button {
        display: none;
    }