:root {
    --azul: #07346f;
    --azul-escuro: #05295a;
    --azul-hover: #28578f;
    --azul-claro: #2563eb;
    --verde: #16a34a;
    --vermelho: #dc2626;
    --cinza: #eef2f7;
    --texto: #1f2a3d;
    --muted: #667085;
    --borda: #dce3ee;
    --card: #ffffff;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Segoe UI,Arial,sans-serif;
    background: var(--cinza);
    color: var(--texto);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden
}

button, input, select, textarea {
    font-family: inherit
}

button {
    cursor: pointer
}

.sidebar {
    width: 270px;
    background: linear-gradient(180deg,var(--azul),#062657);
    color: #fff;
    padding: 18px 16px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 30;
    overflow-y: auto
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 34px
}

.brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #fff;
    color: var(--azul);
    display: grid;
    place-items: center;
    font-weight: 900
}

.brand strong {
    display: block;
    font-size: 16px
}

.brand span {
    display: block;
    font-size: 13px;
    color: #b7cff5;
    margin-top: 2px
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.menu-item {
    border: 0;
    background: transparent;
    color: #e8f1ff;
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    transition: .2s ease
}

    .menu-item:hover, .menu-item.active {
        background: rgba(255,255,255,.12);
        color: #fff
    }

.menu-parent {
    justify-content: space-between;
    font-weight: 700;
    margin: 0
}

    .menu-parent span {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .menu-parent b {
        font-size: 12px;
        color: #b7cff5;
        transition: transform .2s ease
    }

    .menu-parent.open b {
        transform: rotate(180deg)
    }

.submenu {
    display: none;
    margin: 0 0 8px 0;
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden
}

    .submenu.open {
        display: flex;
        flex-direction: column;
        gap: 4px;
        animation: drop .18s ease
    }

@keyframes drop {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.submenu::before, .submenu::after, .menu-item::before, .menu-item::after {
    display: none !important;
    content: none !important
}

.sub-item {
    min-height: 42px;
    padding: 11px 14px 11px 42px;
    border-radius: 10px;
    color: #d7e7ff;
    font-size: 14px;
    font-weight: 400;
    background: transparent
}

    .sub-item:hover, .sub-item.active {
        background: rgba(255,255,255,.10);
        color: #fff
    }

.app {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh
}

.topbar {
    height: 76px;
    background: #fff;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 10
}

    .topbar h3, .muted {
        margin: 0
    }

.muted {
    color: var(--muted);
    font-size: 12px
}

.top-actions {
    display: flex;
    gap: 12px;
    align-items: center
}

.ghost, .ai, .user {
    border: 1px solid var(--borda);
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px
}

.ai {
    background: linear-gradient(90deg,#0aa37f,#0b58bd);
    color: #fff;
    border: 0;
    font-weight: 700
}

.mobile-menu {
    display: none;
    border: 1px solid var(--borda);
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 18px;
    color: var(--azul)
}

.sidebar-backdrop {
    display: none
}

.view {
    display: none;
    padding: 26px
}

.active-view {
    display: block
}

.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 16px
}

    .page-title h1 {
        margin: 0;
        font-size: 28px
    }

    .page-title p {
        margin: 6px 0 0;
        color: var(--muted)
    }

.primary, .secondary, .ghost-btn {
    border: 0;
    border-radius: 10px;
    padding: 13px 20px;
    font-weight: 700
}

.primary {
    background: var(--azul);
    color: #fff
}

    .primary:hover {
        background: #0a438c
    }

.secondary {
    background: #e8edf5;
    color: var(--azul);
    border: 1px solid var(--borda)
}

.ghost-btn {
    background: #fff;
    border: 1px solid var(--borda);
    color: var(--texto)
}

.cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    margin-bottom: 18px
}

.card, .panel {
    background: var(--card);
    border: 1px solid var(--borda);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18,38,63,.06)
}

.card {
    padding: 22px
}

    .card span {
        color: var(--muted)
    }

    .card strong {
        display: block;
        font-size: 34px;
        margin: 10px 0
    }

    .card small {
        color: var(--verde);
        font-weight: 700
    }

    .card.warning small {
        color: var(--vermelho)
    }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.panel {
    padding: 22px
}

    .panel h2 {
        margin: 0 0 18px;
        font-size: 18px
    }

.chart {
    height: 260px;
    display: flex;
    align-items: end;
    gap: 18px;
    border-left: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    padding: 20px
}

    .chart span {
        background: linear-gradient(180deg,#1d63d5,var(--azul));
        color: #fff;
        flex: 1;
        border-radius: 8px 8px 0 0;
        display: flex;
        align-items: end;
        justify-content: center;
        padding-bottom: 8px;
        font-size: 12px
    }

.doc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--borda);
    gap: 12px
}

.filters {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 14px;
    margin-bottom: 18px
}

.cadastro-filter {
    grid-template-columns: 2fr 1fr 160px
}

label {
    font-size: 13px;
    color: var(--muted)
}

input, select, textarea {
    width: 100%;
    margin-top: 7px;
    border: 1px solid #d5dce8;
    border-radius: 8px;
    padding: 11px;
    background: #fff;
    color: var(--texto)
}

textarea {
    resize: vertical;
    min-height: 110px
}

table {
    width: 100%;
    border-collapse: collapse
}

th, td {
    text-align: left;
    padding: 15px;
    border-bottom: 1px solid var(--borda);
    font-size: 14px
}

th {
    color: var(--muted);
    background: #f7f9fc
}

.status, .badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    display: inline-block
}

.Autorizado, .Ativo {
    background: #dcfce7;
    color: #166534
}

.Rejeitado {
    background: #fee2e2;
    color: #991b1b
}

.Cancelado {
    background: #e5e7eb;
    color: #374151
}

.Em-Digitação {
    background: #dbeafe;
    color: #1e40af
}

.actions, .row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

    .actions button, .row-actions button {
        border: 1px solid var(--borda);
        background: #fff;
        border-radius: 8px;
        padding: 7px 9px
    }

        .actions button:hover, .row-actions button:hover {
            border-color: var(--azul);
            color: var(--azul)
        }

.form h2 {
    margin-top: 22px
}

    .form h2:first-child {
        margin-top: 0
    }

.form-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

    .form-grid.small {
        grid-template-columns: repeat(4,1fr)
    }

.items {
    border: 1px solid var(--borda);
    border-radius: 12px;
    overflow: hidden
}

.item-row {
    display: grid;
    grid-template-columns: 1fr 90px 150px 150px;
    gap: 12px;
    padding: 12px;
    background: #fff
}

    .item-row.header {
        background: #f7f9fc;
        font-weight: 700;
        color: var(--muted)
    }

.footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 18px
}

    .modal.open {
        display: flex
    }

.modal-card {
    width: min(920px,100%);
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--borda);
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
    padding: 22px
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

    .modal-head h2 {
        margin: 0
    }

    .modal-head button {
        border: 0;
        background: #eef2f7;
        border-radius: 10px;
        font-size: 24px;
        width: 42px;
        height: 42px;
        color: var(--azul)
    }

@media(max-width:1200px) {
    .cards {
        grid-template-columns: repeat(2,1fr)
    }

    .filters {
        grid-template-columns: repeat(3,1fr)
    }

    .form-grid, .form-grid.small {
        grid-template-columns: repeat(2,1fr)
    }
}

/* =====================================================================
   MOBILE — versão reformulada: mais moderna, mais contraste, mais "app"
   ===================================================================== */
@media(max-width:768px) {
    :root {
        --nf-shadow-sm: 0 2px 8px rgba(18,38,63,.07);
        --nf-shadow-md: 0 10px 28px rgba(18,38,63,.10);
        --nf-shadow-lg: 0 -8px 32px rgba(15,23,42,.18);
        --azul-grad: linear-gradient(135deg,#0b58bd,#07346f 65%);
    }

    body {
        display: block;
        background: #f2f5fa;
        overflow-x: hidden
    }

    html {
        overflow-x: hidden
    }

    img, svg {
        max-width: 100%;
        height: auto
    }

    /* ---------- Topbar: fixa, com leve blur e mais respiro ---------- */
    .mobile-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--borda);
        color: var(--azul);
        box-shadow: var(--nf-shadow-sm);
    }

    .topbar {
        height: auto;
        min-height: 64px;
        padding: 10px 14px;
        gap: 10px;
        padding-top: calc(10px + env(safe-area-inset-top));
        box-shadow: var(--nf-shadow-sm);
        backdrop-filter: saturate(180%) blur(8px);
        background: rgba(255,255,255,.92);
    }

        .topbar h3 {
            font-size: 15px;
            font-weight: 800;
            letter-spacing: .2px
        }

    .top-actions {
        gap: 8px
    }

    .ai {
        display: none
    }

    .user {
        display: none
    }

    /* ---------- Sidebar: drawer com cantos arredondados e overlay suave */
    .sidebar {
        width: 82vw;
        max-width: 300px;
        left: -100vw;
        border-radius: 0 20px 20px 0;
        transition: left .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 22px 0 50px rgba(0,0,0,.25);
        padding-top: calc(18px + env(safe-area-inset-top));
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    body.sidebar-open .sidebar {
        left: 0
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(9,16,33,.55);
        backdrop-filter: blur(2px);
        z-index: 20;
    }

    body.sidebar-open .sidebar-backdrop {
        display: block
    }

    .menu-item {
        min-height: 50px;
        border-radius: 14px;
        font-size: 15px
    }

        .menu-item.active {
            background: rgba(255,255,255,.18);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.15)
        }

    .sub-item {
        min-height: 44px;
        border-radius: 12px
    }

    .app {
        margin-left: 0;
        width: 100%
    }

    .view {
        padding: 14px 14px 100px
    }

    .page-title {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 16px;
        gap: 2px
    }

        .page-title h1 {
            font-size: 22px;
            font-weight: 800
        }

        .page-title p {
            font-size: 13px
        }

        .page-title > div:last-child {
            width: 100%
        }

        .page-title .primary, .page-title .secondary, .page-title .ghost-btn {
            width: 100%
        }

    /* ---------- Botões: alvo de toque maior, mais "app" ---------- */
    .primary, .secondary, .ghost-btn {
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .primary {
        background: var(--azul-grad);
        box-shadow: 0 6px 16px rgba(7,52,111,.28)
    }

        .primary:active {
            transform: scale(.98)
        }

    .secondary, .ghost-btn {
        border-width: 1.5px
    }

    /* ---------- Cards de indicadores: layout tipo app moderno ---------- */
    .cards, .grid-2, .filters, .cadastro-filter, .form-grid, .form-grid.small {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card, .panel {
        border-radius: 16px;
        padding: 18px;
        box-shadow: var(--nf-shadow-sm);
        border-color: var(--borda);
    }

    .card {
        position: relative;
        overflow: hidden;
        padding-left: 20px;
    }

        .card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: var(--azul-grad);
        }

        .card.warning::before {
            background: linear-gradient(180deg,var(--vermelho),#7f1d1d)
        }

        .card span {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .04em;
            font-weight: 700;
            color: var(--muted)
        }

        .card strong {
            font-size: 26px;
            margin: 8px 0 4px
        }

        .card small {
            font-size: 12.5px
        }

    .panel h2 {
        font-size: 16px
    }

    .chart {
        height: 190px;
        gap: 8px;
        padding: 12px 14px;
        overflow-x: auto;
        border-radius: 0 0 8px 8px
    }

        .chart span {
            min-width: 42px;
            font-size: 11px;
            border-radius: 10px 10px 0 0
        }

    .doc-row {
        padding: 12px 0;
        gap: 10px;
        font-size: 14px
    }

    /* ---------- Filtros: empilhados, mais respiro ---------- */
    .filters {
        border-radius: 16px;
        padding: 14px;
        box-shadow: var(--nf-shadow-sm)
    }

        .filters button {
            width: 100%;
            min-height: 46px
        }

    label {
        font-size: 12.5px;
        font-weight: 600
    }

    input, select, textarea {
        min-height: 46px;
        border-radius: 10px;
        font-size: 15px;
        padding: 11px 12px;
        border-color: #cfd8e6;
    }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--azul-claro);
            box-shadow: 0 0 0 3px rgba(37,99,235,.15);
        }

    /* ---------- Tabela → cartão de documento (ZERO rolagem horizontal) ----------
     Cada <tr> vira um cartão auto-contido, do tamanho exato da tela:
       • 1ª coluna  = título do cartão (ex.: cliente), em destaque
       • coluna com .status/.badge = flutua no canto superior direito
       • coluna com .actions/.row-actions = faixa inferior, botões circulares
       • demais colunas = pares rótulo/valor em grade de 2 colunas
     Não depende de largura de tela nem de scroll — só de flexbox.       */
    .view, .panel, .card, .table-panel {
        max-width: 100%;
        overflow-x: hidden
    }

    .table-panel {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none
    }

    table {
        width: 100% !important;
        max-width: 100%
    }

    table, thead, tbody {
        display: block;
        width: 100%
    }

    thead {
        display: none
    }

    tr {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 6px 14px;
        position: relative;
        background: #fff;
        border: 1px solid var(--borda);
        border-radius: 16px;
        margin-bottom: 12px;
        padding: 16px 150px 14px 16px;
        /*padding: 16px 96px 14px 16px;*/
        box-shadow: var(--nf-shadow-sm);
        width: 100%;
    }

    td {
        border: 0;
        padding: 0;
        font-size: 13.5px;
        min-width: 0
    }

        /* título do cartão — primeira coluna */
        td:first-child {
            flex: 1 1 100%;
            font-size: 15.5px;
            font-weight: 800;
            color: var(--texto);
            line-height: 1.25;
            word-break: break-word;
        }

            td:first-child::before {
                content: none
            }

        /* status/badge — flutua fixo no canto superior direito do cartão */
        td:has(.status), td:has(.badge) {
            position: absolute;
            top: 16px;
            right: 16px;
            flex: none;
            width: auto;
            max-width: 88px;
        }

            td:has(.status)::before, td:has(.badge)::before {
                content: none
            }

    .status, .badge {
        font-size: 11px;
        padding: 5px 10px;
        white-space: nowrap
    }

    /* ações — faixa inferior, largura total, botões circulares */
    td:has(.actions), td:has(.row-actions) {
        flex: 1 1 100%;
        order: 9;
        margin-top: 6px;
        padding-top: 10px;
        border-top: 1px dashed var(--borda);
    }

        td:has(.actions)::before, td:has(.row-actions)::before {
            content: none
        }

    .actions, .row-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px
    }

        .actions button, .row-actions button {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            padding: 0;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f5f7fb;
        }

            .actions button:active, .row-actions button:active {
                background: #e8edf5
            }

            .actions button svg, .row-actions button svg {
                width: 18px;
                height: 18px
            }

    /* demais colunas — pares rótulo/valor compactos, em grade fluida */
    td:not(:first-child):not(:has(.status)):not(:has(.badge)):not(:has(.actions)):not(:has(.row-actions)) {
        flex: 1 1 40%;
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: var(--texto);
    }

        td:not(:first-child):not(:has(.status)):not(:has(.badge)):not(:has(.actions)):not(:has(.row-actions))::before {
            content: attr(data-label);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: #9aa5b8;
        }

    /* ---------- Formulários ---------- */
    .form-grid, .form-grid.small {
        gap: 12px
    }

    .items {
        border-radius: 14px
    }

    .item-row, .item-row.header {
        grid-template-columns: 1fr
    }

        .item-row.header {
            display: none
        }

    .item-row {
        border-radius: 12px;
        margin: 8px;
        box-shadow: var(--nf-shadow-sm);
        border: 1px solid var(--borda)
    }

    /* ---------- Barra de ações inferior: fixa e segura (notch) ---------- */
    .footer-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(10px);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        margin-top: 0;
        flex-direction: column-reverse;
        gap: 8px;
        box-shadow: var(--nf-shadow-lg);
        border-top: 1px solid var(--borda);
    }

        .footer-actions button {
            width: 100%
        }

    /* ---------- Modal como bottom sheet, com "puxador" ---------- */
    .modal {
        align-items: flex-end;
        padding: 0
    }

    .modal-card {
        border-radius: 22px 22px 0 0;
        max-height: 92vh;
        overflow: auto;
        padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
        position: relative;
    }

        .modal-card::before {
            content: "";
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 42px;
            height: 5px;
            border-radius: 99px;
            background: #d8dfeb;
        }

    .modal-head h2 {
        font-size: 18px
    }
}

@media(max-width:420px) {
    .ghost {
        display: none
    }

    .primary, .secondary, .ghost-btn {
        width: 100%;
        padding: 12px 14px
    }

    input, select, textarea {
        font-size: 16px
    }

    .submenu.open {
        gap: 2px
    }

    .sub-item {
        padding-left: 34px
    }

    .card strong {
        font-size: 24px
    }

    .page-title h1 {
        font-size: 20px
    }
}