/* Equipamentos page — additive only, reuses tokens/classes from dashboard.css and skus.css */

/* The search bar now uses TableFilterPanel (Components/Shared/Tables/TableFilterPanel.razor,
   styled in css/shared/table-filter-panel.css) instead of .equipamentos-toolbar/-search/-toolbar-actions;
   the export/print buttons moved into the page's dashboard-header. */

/* ---------- Equipamento details dialog ---------- */

.equipamento-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 8px;
    min-width: 420px;
}

.equipamento-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equipamento-info-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.equipamento-info-value {
    font-size: 15px;
    color: var(--tm-text);
}

.equipamento-divider {
    margin: 20px 0 16px;
    border-color: var(--tm-border) !important;
}

.equipamento-summary-title.mud-typography {
    font-weight: 700;
    color: var(--tm-text);
    margin-bottom: 12px;
}

.equipamento-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* ---------- Local settings dialog ---------- */

.equipamento-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
    min-width: 380px;
}

/* ---------- Page header actions + summary cards ---------- */

.equipamento-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.equipamento-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* The table carries more columns than the other panels; on narrow screens the TABLE scrolls
   horizontally instead of the cells wrapping and turning every row into a tall block. */
.equipamento-table-panel {
    overflow-x: auto;
}

.equipamento-table {
    min-width: 940px;
}

.equipamento-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background-color: var(--tm-bg);
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    padding: 14px 10px;
}

.equipamento-summary-value {
    font-family: var(--font-tech);
    font-size: 22px;
    font-weight: 700;
    color: var(--tm-text);
    line-height: 1.1;
}

.equipamento-summary-label {
    font-size: 12px;
    color: var(--tm-text-muted);
}

@media (max-width: 1279px) {
    .equipamento-summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .equipamento-info-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .equipamento-summary-grid {
        grid-template-columns: 1fr;
    }

    .equipamento-summary-cards {
        grid-template-columns: 1fr;
    }

    .equipamento-settings-grid {
        min-width: 0;
    }

    .equipamento-header-actions {
        width: 100%;
    }
}

/* ---------- Current-stock dialog ---------- */

.estoque-dialog {
    min-width: 640px;
}

.estoque-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.estoque-search {
    max-width: 320px;
    flex: 1 1 220px;
}

.estoque-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.estoque-tabs {
    margin-bottom: 8px;
}

.estoque-table {
    min-width: 0;
}

/* Sortable header rendered as a real <button> so it is reachable by keyboard and announced
   as an action, instead of a click handler bolted onto plain text. */
.estoque-sort-header {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

.estoque-sort-header:hover {
    color: var(--tm-primary);
}

.estoque-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 12px;
}

.estoque-page-size {
    width: 90px;
}

.estoque-summary {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 16px 20px;
    background-color: var(--tm-bg);
    border: 1px solid var(--tm-border);
    border-radius: 10px;
}

.estoque-summary-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tm-text-muted);
    font-weight: 600;
}

.estoque-summary-value {
    font-family: var(--font-tech);
    font-size: 24px;
    font-weight: 700;
    color: var(--tm-text);
}

.estoque-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
    color: var(--tm-text-muted);
}

.estoque-calculated-at.mud-typography {
    display: block;
    margin-top: 12px;
    color: var(--tm-text-muted);
}

/* ---------- Virtual position names dialog ---------- */

.posicoes-dialog {
    min-width: 640px;
}

.posicoes-table {
    min-width: 0;
}

.posicoes-number-col {
    width: 64px;
}

.posicoes-filter-switch {
    margin-right: 8px;
}

/* A physical position shows why it cannot be edited instead of an inert, greyed-out field. */
.posicoes-readonly {
    color: var(--tm-text-muted);
    font-size: 13px;
    font-style: italic;
}

@media (max-width: 599px) {
    .estoque-dialog,
    .posicoes-dialog {
        min-width: 0;
    }

    .estoque-search {
        max-width: none;
    }
}

/* ---------- Print layout ----------
   "Exportar PDF" and "Imprimir" both call window.print(); this is what makes the printed page a
   clean report instead of a screenshot of the app: no navigation, no buttons, no filter panel,
   no pager, no row actions. The printed header block (hidden on screen) supplies the title,
   timestamp and the filters that produced the list. */

.print-only {
    display: none;
}

@media print {
    @page {
        margin: 12mm;
        size: A4 landscape;
    }

    .print-only {
        display: block;
    }

    /* Chrome/Edge honour this; it keeps the status chips readable on paper. */
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: #fff !important;
    }

    /* App chrome and anything explicitly marked as screen-only.
       .mud-overlay is deliberately NOT in this list: a MudDialog renders inside it, and the
       stock dialog has its own "Imprimir" button. Hiding the overlay would print a blank
       sheet. The scrim is dropped instead, and the dialog is flattened into the page below. */
    .no-print,
    .mud-appbar,
    .mud-drawer,
    .mud-overlay-scrim,
    .mud-snackbar-provider,
    .table-filter-panel,
    .mud-table-pagination,
    .mud-dialog-actions {
        display: none !important;
    }

    /* An open dialog IS the report — take it out of the fixed overlay so it flows onto paper
       at full width instead of being clipped to one viewport-sized box. */
    .mud-overlay,
    .mud-dialog-container,
    .mud-dialog {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .mud-dialog-content {
        overflow: visible !important;
        max-height: none !important;
    }

    /* ...and the page underneath must not print behind it. :has() is supported by the
       Chromium/Firefox versions this app targets; without it the page would simply also
       print, which degrades gracefully rather than breaking. */
    body:has(.mud-dialog) .dashboard-header,
    body:has(.mud-dialog) .equipamento-summary-cards,
    body:has(.mud-dialog) .equipamento-table-panel,
    body:has(.mud-dialog) .print-header {
        display: none !important;
    }

    /* Let the report use the full sheet once the drawer is gone. */
    .mud-main-content,
    .mud-layout,
    .mud-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .panel-card,
    .equipamento-table-panel {
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* The horizontal-scroll min-width is a screen affordance; on paper it would clip. */
    .equipamento-table {
        min-width: 0 !important;
    }

    .print-header h1 {
        font-size: 18pt;
        margin: 0 0 4px;
    }

    .print-header p {
        font-size: 9pt;
        color: #444;
        margin: 0 0 12px;
    }

    /* Declarar 9pt no ancestral não chega às células: o MudBlazor fixa o tamanho direto em
       `.mud-table-root .mud-table-body .mud-table-cell` e `.mud-table-root .mud-table-head
       .mud-table-cell`, e o kit .dash-table repete em (0,3,0). Herança nenhuma sobrevive a isso,
       então o impresso continuava saindo em 13/14px. Os seletores abaixo empatam em (0,3,0) e
       vêm depois na cascata, dentro do próprio @media print. */
    .equipamento-table .mud-table-head .mud-table-cell,
    .equipamento-table .mud-table-body .mud-table-cell {
        font-size: 9pt;
    }

    /* O degrau entre cabeçalho e corpo é o peso, não o tamanho — em 9pt uma diferença de corpo
       viraria ruído. */
    .equipamento-table .mud-table-head .mud-table-cell {
        font-weight: 600;
    }

    .equipamento-table .mud-table-body .mud-table-cell {
        font-weight: 400;
    }

    /* Os valores técnicos precisam vir junto: em tela eles são o degrau de 15px do kit
       .dash-table, declarado em (0,2,0) para spans e (0,4,0) para a própria célula. No papel,
       um serial 66% maior que a linha vizinha desalinharia a grade — empatamos as duas
       especificidades e ganhamos pela ordem (equipamentos.css carrega depois de dashboard.css). */
    .equipamento-table .mono-tech,
    .equipamento-table .mud-table-body .mud-table-cell.mono-tech {
        font-size: 9pt;
    }

    /* Mantida: cobre o que não é célula dentro da tabela (paginação, rodapé, textos soltos). */
    .dash-table {
        font-size: 9pt;
    }

    /* Never split a row across two sheets. */
    .dash-table tr {
        page-break-inside: avoid;
    }

    .dash-table thead {
        display: table-header-group;
    }
}