/* =====================================================
   FVC Corporate Theme — Radzen sobre standard-base.css
   Skin dos componentes Radzen no estilo Corporate UI
   Dashboard (Creative Tim) com a paleta FVC.
   Fonte de verdade: .agents/skills/design_system.md
   Carregado depois de app.css — vence conflitos legados.
   ===================================================== */

/* ============ 1. Tokens ============ */
:root {
    /* standard-base.css não define esta variável (só vem no theme completo
       standard.css, que não carregamos) — sem ela o glyph do .rzi (ex.: "check"
       do checkbox) fica em fonte normal em vez do ícone, e não aparece. */
    --rz-icon-font-family: "Material Symbols";

    /* Paleta */
    --rz-primary: var(--fvc-primary);
    --rz-on-primary: #ffffff;
    --rz-primary-light: color-mix(in srgb, var(--rz-primary) 85%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--rz-primary) 12%, white);
    --rz-primary-dark: color-mix(in srgb, var(--rz-primary) 88%, black);
    --rz-primary-darker: color-mix(in srgb, var(--rz-primary) 72%, black);
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: var(--rz-primary-dark);
    --rz-secondary: #64748b;
    --rz-on-secondary: #ffffff;
    --rz-secondary-light: color-mix(in srgb, var(--rz-secondary) 85%, white);
    --rz-secondary-lighter: color-mix(in srgb, var(--rz-secondary) 12%, white);
    --rz-secondary-dark: color-mix(in srgb, var(--rz-secondary) 85%, black);
    --rz-secondary-darker: color-mix(in srgb, var(--rz-secondary) 70%, black);
    --rz-success: var(--fvc-success);
    --rz-warning: var(--fvc-warning);
    --rz-danger: var(--fvc-error);
    --rz-error: var(--fvc-error);
    --rz-info: var(--fvc-info);

    /* Superfícies e texto */
    --rz-body-background-color: var(--fvc-bg-light);
    --rz-layout-body-background-color: var(--fvc-bg-light);
    --rz-base-background-color: #ffffff;
    --rz-text-color: var(--fvc-text-primary);
    --rz-text-title-color: var(--fvc-text-primary);
    --rz-text-secondary-color: var(--fvc-text-secondary);
    --rz-text-tertiary-color: var(--fvc-text-tertiary);
    --rz-text-disabled-color: var(--fvc-text-tertiary);
    --rz-border-color: var(--fvc-border);
    --rz-border-normal: 1px solid var(--rz-border-color);

    /* Tipografia */
    --rz-text-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rz-body-font-size: 0.875rem;

    /* Raios (design system: controlos 6px, cards 8px, modais 12px) */
    --rz-border-radius: 6px;
    --rz-card-border-radius: 8px;

    /* Sombras (base rgba(12,26,36,*) do template Corporate UI) */
    --rz-shadow-xs: 0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.10), 0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04);
    --rz-shadow-lg: 0 0.5rem 1.5rem -0.25rem rgba(12, 26, 36, 0.15), 0 0.5rem 0.6275rem -0.3125rem rgba(12, 26, 36, 0.06);
    --rz-card-shadow: var(--rz-shadow-xs);

    /* Botões */
    --rz-button-border-radius: 6px;
    --rz-button-shadow: 0 1px 2px 0 rgba(12, 26, 36, 0.06);
    --rz-button-hover-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.07);
    --rz-button-active-shadow: 0 1px 2px 0 rgba(12, 26, 36, 0.10);
    --rz-button-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary) 15%, transparent);
    --rz-button-hover-gradient: none;
    --rz-button-focus-gradient: none;
    --rz-button-active-gradient: none;
    --rz-button-base-background-color: var(--fvc-bg-gray);
    --rz-button-base-color: #374151;
    --rz-button-disabled-opacity: 0.65;

    /* Inputs */
    --rz-input-background-color: #ffffff;
    --rz-input-border: 1px solid var(--fvc-border);
    --rz-input-border-radius: 6px;
    --rz-input-shadow: 0 1px 2px 0 rgba(12, 26, 36, 0.06);
    --rz-input-hover-border: 1px solid var(--fvc-border-light);
    --rz-input-hover-shadow: 0 1px 2px 0 rgba(12, 26, 36, 0.06);
    --rz-input-focus-border: 1px solid var(--rz-primary);
    --rz-input-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    --rz-input-focus-outline: none;
    --rz-input-min-height: 34px;
    --rz-input-placeholder-color: var(--fvc-text-tertiary);
    --rz-input-disabled-background-color: var(--fvc-bg-light);
    --rz-input-disabled-color: var(--fvc-text-tertiary);
    --rz-input-disabled-border: 1px solid var(--fvc-border);
    --rz-input-disabled-opacity: 1;

    /* Form field (labels estáticos por cima — ver secção 5) */
    --rz-form-field-label-color: #374151;
    --rz-form-field-label-focus-color: #374151;
    --rz-form-field-helper-padding: 0.25rem 0 0 0.125rem;
    --rz-form-field-margin-block: 0;
    --rz-form-field-margin-inline: 0;

    /* Checkbox / radio / switch */
    --rz-checkbox-checked-background-color: var(--rz-primary);
    --rz-checkbox-checked-hover-background-color: var(--fvc-primary-dark);
    --rz-checkbox-checked-color: #ffffff;
    --rz-checkbox-checked-hover-color: #ffffff;
    --rz-checkbox-checked-border: 1px solid var(--rz-primary);
    --rz-checkbox-border-radius: 4px;
    --rz-switch-background-color: var(--fvc-border);
    --rz-switch-checked-background-color: var(--rz-primary);
    --rz-switch-circle-background-color: #ffffff;
    --rz-switch-checked-circle-background-color: #ffffff;

    /* DataGrid */
    --rz-grid-header-background-color: var(--fvc-bg-light);
    --rz-grid-header-color: var(--fvc-text-secondary);
    --rz-grid-header-font-size: 0.6875rem;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: uppercase;
    --rz-grid-cell-font-size: 0.8125rem;
    --rz-grid-filter-font-size: 0.8125rem;
    --rz-grid-stripe-background-color: #fafafa;
    --rz-grid-hover-background-color: var(--fvc-bg-gray);
    --rz-grid-selected-background-color: rgba(37, 99, 235, 0.08);
    --rz-grid-selected-color: var(--fvc-text-primary);
    --rz-grid-frozen-cell-background-color: #ffffff;
    --rz-grid-detail-template-background-color: transparent;

    /* Pager */
    --rz-pager-numeric-button-background-color: transparent;
    --rz-pager-numeric-button-color: var(--fvc-text-secondary);
    --rz-pager-numeric-button-hover-background-color: var(--fvc-bg-gray);
    --rz-pager-numeric-button-hover-color: var(--fvc-text-primary);
    --rz-pager-numeric-button-selected-background-color: var(--rz-primary);
    --rz-pager-numeric-button-selected-color: #ffffff;
    --rz-pager-summary-color: var(--fvc-text-secondary);
    --rz-pager-button-border-radius: 6px;

    /* Tabs (estilo pills do template) */
    --rz-tabs-border: none;
    --rz-tabs-tab-background-color: transparent;
    --rz-tabs-tab-color: var(--fvc-text-secondary);
    --rz-tabs-tab-hover-background-color: rgba(255, 255, 255, 0.6);
    --rz-tabs-tab-hover-color: var(--fvc-text-primary);
    --rz-tabs-tab-selected-background-color: #ffffff;
    --rz-tabs-tab-selected-color: var(--fvc-text-primary);
    --rz-tabs-tab-font-weight: 600;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-padding-block: 0.5rem;
    --rz-tabs-tab-padding-inline: 1rem;

    /* Dialog */
    --rz-dialog-border-radius: 12px;
    --rz-dialog-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
    --rz-dialog-background-color: #ffffff;
    --rz-dialog-title-font-size: 1.125rem;
    --rz-dialog-title-font-weight: 600;
    --rz-dialog-mask-background-color: rgba(0, 0, 0, 0.5);

    /* Dropdown / popup panels */
    --rz-dropdown-open-background-color: #ffffff;
    --rz-dropdown-panel-border: 1px solid var(--fvc-border);
    --rz-dropdown-panel-shadow: var(--rz-shadow-lg);
    --rz-dropdown-item-padding: 0.375rem 0.75rem;
    --rz-dropdown-item-font-size: 0.75rem;
    --rz-dropdown-item-hover-background-color: var(--fvc-bg-gray);
    --rz-dropdown-item-hover-color: var(--fvc-text-primary);
    --rz-dropdown-item-selected-background-color: rgba(37, 99, 235, 0.10);
    --rz-dropdown-item-selected-color: var(--rz-primary);
    --rz-dropdown-item-selected-hover-background-color: rgba(37, 99, 235, 0.16);
    --rz-dropdown-item-selected-hover-color: var(--rz-primary);

    /* Notificações (estilo soft do design system) */
    --rz-notification-border-radius: 8px;
    --rz-notification-shadow: var(--rz-shadow-lg);
    --rz-notification-padding: 0.5rem 0.75rem;
    --rz-notification-gap: 0.5rem;
    --rz-notification-success-background-color: #ecfdf5;
    --rz-notification-success-color: #065f46;
    --rz-notification-success-icon-color: var(--fvc-success);
    --rz-notification-error-background-color: #fef2f2;
    --rz-notification-error-color: #991b1b;
    --rz-notification-error-icon-color: var(--fvc-error);
    --rz-notification-warning-background-color: #fffbeb;
    --rz-notification-warning-color: #92400e;
    --rz-notification-warning-icon-color: var(--fvc-warning);
    --rz-notification-info-background-color: #f5f3ff;
    --rz-notification-info-color: #5b21b6;
    --rz-notification-info-icon-color: var(--fvc-info);

    /* Badges */
    --rz-badge-text-transform: uppercase;
    --rz-badge-font-size: 0.6875rem;
    --rz-badge-font-weight: 600;
    --rz-badge-border-radius: 4px;

    /* Tooltip */
    --rz-tooltip-background-color: var(--fvc-text-primary);
    --rz-tooltip-color: #ffffff;
    --rz-tooltip-border-radius: 6px;
    --rz-tooltip-font-size: 0.75rem;

    /* Botão de exportação Excel (ExcelExportButton.razor) — CTA escuro como nas prints */
    --rz-export-color: #1e293b;
    --rz-text-export-color: #ffffff;

    /* Botões dos diálogos de confirmação/eliminação (DeleteDialog.razor) */
    --rz-confirm-color: var(--fvc-error);
    --rz-confirm-text-color: #ffffff;
    --rz-dialog-cancel-color: var(--fvc-bg-gray);
    --rz-dialog-cancel-text-color: #374151;
}

/* ============ 2. Tipografia base ============ */
body {
    font-weight: 400;
    color: var(--rz-text-color);
}

/* ============ 2b. Banda de topo em gradiente azul (prints) ============ */
.main-content {
    position: relative;
}

.main-content:not(.auth-main-wrapper)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 210px;
    background: url("/_content/FVC.Shared/images/header.png") center center / cover no-repeat;
    pointer-events: none;
    z-index: 0;
}

.main-content > * {
    position: relative;
    z-index: 1;
}

/* Logo da sidebar com o tamanho do design (o corporate limita a 2rem) */
.sidenav .navbar-brand-img.big-size {
    max-height: 40px;
    height: 40px;
    width: auto !important;
    max-width: calc(100% - 1rem);
}

/* Sidebar mais compacta */
.sidenav .sidenav-header {
    height: 4rem;
    flex-shrink: 0;
}

/* Só a zona do meio do menu tem scroll — header e footer ficam fixos */
.sidenav.navbar-expand-xs {
    display: flex !important;
    flex-direction: column;
    overflow-y: hidden !important;
}

.sidenav .sidenav-body {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow: visible !important;
}

.sidenav .sidenav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
}

.sidenav .sidenav-footer {
    flex-shrink: 0;
}

.sidenav .navbar-nav > .nav-item {
    margin-bottom: 0.125rem !important;
}

.sidenav .env-summary-item,
.sidenav .user-summary-item {
    margin-bottom: 0.25rem !important;
}

.sidenav hr.horizontal {
    margin: 0.5rem 0 !important;
}

/* Sidebar width — larga o suficiente para as labels mais compridas sem cortar.
   A largura da sidenav e o offset do conteúdo têm de andar sincronizados, senão o
   conteúdo ou sobrepõe a sidebar ou deixa uma faixa branca. */
.sidenav.fixed-start:not(.d-lg-none) {
    width: 275px !important;
    max-width: 275px !important;
}

/* Collapsed (icon-rail) state — needs to win over the rule above, which also carries !important,
   so this selector must be at least as specific (4 classes vs. 3) or it's silently ignored and the
   sidebar stays 275px wide while .main-content's margin-left already shrinks to 6rem below,
   leaving the content overlapped by the still-wide sidebar. */
.g-sidenav-hidden .sidenav.fixed-start:not(.d-lg-none) {
    width: 6rem !important;
    max-width: 6rem !important;
}

/* Deixa as labels do menu usar a largura toda em vez de serem cortadas. */
.sidenav .nav-item .nav-link .nav-link-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Conteúdo colado à sidebar (sem faixa branca entre ambos). Só faz sentido enquanto a
   sidebar está fixa — isso é desktop (>=1200px). Abaixo disso a sidebar é off-canvas, por
   isso o conteúdo NÃO pode ser empurrado para a direita. */
@media (min-width: 1200px) {
    .sidenav.fixed-start:not(.d-lg-none) ~ .main-content {
        margin-left: 275px;
    }

    .g-sidenav-hidden .navbar-vertical.fixed-start ~ .main-content {
        margin-left: 6rem;
    }

    /* .g-sidenav-fully-hidden (ocultar por completo, a seta em SharedSidebar.razor) não tem regra
       aqui — o transform da sidebar e a margem do conteúdo principal para esse estado são aplicados
       diretamente em JS (window.toggleSidenavFullyHidden, corporate-layout.js), não por CSS. */
}

@media (max-width: 1199.98px) {
    .sidenav.fixed-start ~ .main-content {
        margin-left: 0 !important;
    }
}

/* Navbar transparente sobre a banda, título e breadcrumb a branco */
.navbar-main {
    background: transparent !important;
    box-shadow: none !important;
}

.navbar-main .text-color,
.navbar-main .breadcrumb-item,
.navbar-main .breadcrumb-item a,
.navbar-main .breadcrumb-item span {
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-main .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6) !important;
}

.page-title-breadcrumb .breadcrumb-item:last-child {
    color: #ffffff !important;
    font-size: 1.125rem;
    font-weight: 600;
}

.navbar-main .sidenav-toggler-inner .sidenav-toggler-line {
    background-color: #ffffff !important;
}

/* Card "glass" translúcido sobre a banda (stat cards das prints) */
.rz-card.glass-card,
.card.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-subtitle1, .rz-text-subtitle2 {
    color: var(--fvc-text-primary);
    letter-spacing: -0.01em;
}

.rz-text-h5 { font-size: 1.25rem; font-weight: 600; }
.rz-text-h6 { font-size: 1rem; font-weight: 600; }
.rz-text-subtitle1 { font-size: 0.9375rem; font-weight: 600; }
.rz-text-subtitle2 { font-size: 0.875rem; font-weight: 600; }
.rz-text-body1 { font-size: 0.875rem; color: var(--fvc-text-primary); }
.rz-text-body2 { font-size: 0.8125rem; color: var(--fvc-text-secondary); }

/* ============ 3. Cards ============ */
.rz-card {
    background: #ffffff;
    border: 1px solid var(--fvc-border);
    border-radius: var(--rz-card-border-radius);
    box-shadow: var(--rz-card-shadow);
}

/* ============ 4. Botões ============ */
.rz-button {
    font-size: 0.8125rem;
    letter-spacing: -0.0125rem;
    text-transform: none;
}

.rz-button-md {
    padding: 0.4375rem 1rem;
    font-weight: 600;
}

.rz-button-md.rz-button-icon-only,
.rz-button-md.rz-pager-element {
    padding: 0.5rem;
}

.rz-button-lg {
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 0.875rem 2rem;
}

/* CTAs primários escuros (slate) como nas prints: Guardar / Exportar / Sign in */
.rz-button.rz-primary,
.rz-button.rz-primary.rz-shade-default {
    background-color: var(--fvc-sidenav-active);
    color: #ffffff;
}

/* Hover/active: a cor ativa do tema misturada com preto (em vez de um slate fixo), para escurecer sem mudar de tom */
.rz-button.rz-primary:enabled:hover { background-color: color-mix(in srgb, var(--fvc-sidenav-active) 70%, black); }
.rz-button.rz-primary:enabled:active { background-color: color-mix(in srgb, var(--fvc-sidenav-active) 50%, black); }

/* Secundário = botão branco com borda (ex.: "+ Linha", "Ver Todas") */
.rz-button.rz-secondary,
.rz-button.rz-secondary.rz-shade-default {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid var(--fvc-border);
}

.rz-button.rz-secondary:enabled:hover {
    background-color: #ffffff;
    border-color: var(--fvc-text-secondary);
    color: var(--fvc-text-primary);
}

.rz-button.rz-danger:enabled:hover { background-color: color-mix(in srgb, var(--rz-danger) 88%, black); }
.rz-button.rz-danger:enabled:active { background-color: color-mix(in srgb, var(--rz-danger) 78%, black); }
.rz-button.rz-success:enabled:hover { background-color: color-mix(in srgb, var(--rz-success) 88%, black); }
.rz-button.rz-warning:enabled:hover { background-color: color-mix(in srgb, var(--rz-warning) 88%, black); }
.rz-button.rz-info:enabled:hover { background-color: color-mix(in srgb, var(--rz-info) 88%, black); }
.rz-button.rz-base:enabled:hover { background-color: var(--fvc-border); }

/* Light = botão "branco" com borda subtil, texto escuro */
.rz-button.rz-light,
.rz-button.rz-light.rz-shade-default {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid var(--fvc-border);
}

.rz-button.rz-light:enabled:hover {
    background-color: #ffffff;
    border-color: var(--fvc-text-secondary);
    color: var(--fvc-text-primary);
}

.rz-timepicker .rz-button-md { text-transform: none; }

/* ============ 5. Form field — label estático por cima ============ */
.rz-form-field {
    width: 100%;
}

/* Reserva espaço para a label acima da caixa do input */
.rz-form-field:has(> .rz-form-field-content > .rz-form-field-label) {
    padding-block-start: 1.4rem;
}

.rz-form-field .rz-form-field-label {
    position: absolute;
    inset-block-start: -1.4rem !important;
    inset-inline-start: 0.125rem !important;
    transform: none !important;
    padding: 0;
    max-width: 100%;
    font-size: 0.8125rem !important;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--rz-form-field-label-color) !important;
    background: transparent !important;
    transition: none;
}

.rz-form-field.rz-state-focused .rz-form-field-label,
.rz-form-field .invalid ~ .rz-form-field-label {
    color: var(--rz-form-field-label-color) !important;
}

.rz-state-disabled .rz-form-field-content > .rz-form-field-label {
    color: var(--fvc-text-tertiary) !important;
}

/* Labels vazias (campos sem título) não reservam espaço nem renderizam */
.rz-form-field .rz-form-field-label:empty {
    display: none;
}

/* Texto dos inputs */
.rz-form-field-content,
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-multiselect,
.rz-numeric,
.rz-colorpicker,
.rz-datepicker > .rz-inputtext,
.rz-spinner {
    font-size: 0.75rem;
    color: var(--fvc-text-primary);
}

.rz-form-field-content ::placeholder {
    color: var(--fvc-text-tertiary);
}

/* Mensagens de validação */
.rz-message.rz-messages-error {
    font-size: 0.75rem;
    color: var(--fvc-error);
}

/* ============ 6. Checkbox / Radio / Switch ============ */
.rz-chkbox-box {
    border-radius: var(--rz-checkbox-border-radius);
}

.rz-chkbox-box:not(.rz-state-active) {
    border: 1px solid var(--fvc-border-light);
    background: #ffffff;
}

/* Switch compacto (base standard traz 3rem × 1.8rem — demasiado grande).
   O nudge de 2px para baixo alinha opticamente com o texto ao lado (o
   line-box do texto tem mais espaço abaixo da linha de base do que acima). */
.rz-switch {
    vertical-align: middle;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 1.25rem;
    margin-top: 2px;
}

.rz-switch .rz-switch-circle:before {
    width: 0.875rem;
    height: 0.875rem;
    inset-inline-start: 0.1875rem;
    margin-block-start: -0.4375rem;
}

.rz-switch.rz-switch-checked .rz-switch-circle:before {
    transform: translateX(1rem);
}

/* ============ 7. DataGrid ============ */
.rz-data-grid {
    border-radius: var(--rz-card-border-radius);
}

.rz-grid-table thead th {
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--fvc-border);
}

.rz-grid-table thead th .rz-column-title {
    color: var(--fvc-text-secondary);
}

/* Ícone de filtro colado ao título. O Radzen dá ao título flex:auto + width:100%, o que empurra o ícone para o
   extremo oposto da coluna; nos cabeçalhos com filtro o título só ocupa o que o texto precisa (e continua a cortar
   com reticências se faltar espaço) e o alinhamento da coluna passa para o contentor, para título + ícone andarem juntos. */
.rz-grid-table thead th:has(.rz-grid-filter-icon) .rz-column-title {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.rz-grid-table thead th.rz-text-align-center:has(.rz-grid-filter-icon) > div:not(.rz-cell-filter) {
    justify-content: center;
}

.rz-grid-table thead th.rz-text-align-right:has(.rz-grid-filter-icon) > div:not(.rz-cell-filter) {
    justify-content: flex-end;
}

.rz-grid-table td {
    border-bottom: 1px solid var(--fvc-bg-gray);
    color: var(--fvc-text-primary);
}

.rz-grid-table tbody tr:last-child td {
    border-bottom: 0;
}

.rz-density-compact .rz-grid-table td {
    padding: 0.3125rem 0.625rem;
}

.rz-density-compact .rz-grid-table thead th {
    padding: 0.375rem 0.625rem;
}

.rz-grid-table td,
.rz-grid-table th {
    line-height: 1.35;
}

/* Botões de ação (ex.: editar/apagar) mais pequenos dentro das tabelas */
.rz-data-grid .icon-only-btn.rz-button {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.rz-data-grid .icon-only-btn.rz-button i {
    font-size: 0.75rem;
}

/* Ícones da coluna "Ações" encostados à direita, independentemente de o Template ser um botão
   único (sem wrapper) ou um <div> com vários botões — TextAlign="Right" no próprio componente
   (CustomRadzenDataGridColumnActions) só alinha o cabeçalho, porque .row-action-btn é
   display:flex (fvc-components.css), e um elemento de bloco/flex ignora o text-align do
   ancestral. Tornar a célula em si num flex container com justify-content:flex-end resolve para
   os dois casos sem precisar de "justify-content-end" repetido em cada página. */
.rz-grid-table td.blocked-column .rz-cell-data {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* .rz-grid-table tem table-layout:fixed + width:100% — sempre que a soma das larguras declaradas
   das colunas é menor do que a largura real da tabela, o browser distribui o espaço a mais
   PROPORCIONALMENTE por todas as colunas, mesmo as que têm Width=MinWidth=MaxWidth iguais como a
   "Ações" (Radzen só define o valor inicial; quem decide a largura final é o algoritmo nativo de
   table-layout:fixed do browser, não há JS a reimpor nada depois). Numa tabela com poucas colunas
   (ex.: Traduções, só "Chave"/"Valor") isso fazia a coluna de ações ficar desproporcionadamente
   enorme, e numa com muitas (ex.: Configurações) ficava reduzida a menos do previsto — em ambos os
   casos o "!important" isolado não bastava, porque tanto o <col> como o <th>/<td> da PRIMEIRA linha
   têm de estar simultaneamente a "auto" para essa coluna deixar de participar na distribuição
   proporcional (confirmado por várias tentativas ao vivo no browser). Sendo a "Ações" sempre uma
   coluna de utilidade (1-2 ícones) que nunca deve crescer, e as colunas de conteúdo é que devem
   absorver toda a folga: fixa-se a largura da coluna de ações (<col> E <th>/<td>) e liberta-se
   TODAS as outras para "auto", que passam a dividir entre si o espaço que sobra.
   Exceção: grids com class="grid-keep-widths" (muitas colunas, scroll horizontal) mantêm o Width de
   cada coluna e deixam redimensionar. O :not(:where(...)) não mexe na especificidade destas regras. */
.rz-grid-table:has(.rz-frozen-cell-right-end):not(:where(.grid-keep-widths *)) colgroup col:not(:last-child) {
    width: auto !important;
}

.rz-grid-table:has(.rz-frozen-cell-right-end):not(:where(.grid-keep-widths *)) th:not(.rz-frozen-cell),
.rz-grid-table:has(.rz-frozen-cell-right-end):not(:where(.grid-keep-widths *)) td:not(.rz-frozen-cell) {
    width: auto !important;
}

/* A largura da coluna "Ações" vem do ActionWidth em CustomRadzenDataGridColumnActions (inline, por
   nº de botões). Não fixar aqui um valor com !important: um 84px fixo cortava as ações em tabelas
   com mais de 2 botões (ex.: Fornecedores, com 4). */

/* A coluna "Ações" (CustomRadzenDataGridColumnActions) fica fixa à direita (Frozen="true"), e o
   Radzen aplica-lhe sempre uma sombra a separá-la do resto da tabela — mesmo sem haver scroll
   horizontal para justificar o efeito de "flutuar por cima" — o que a torna numa barra escura bem
   visível em todas as tabelas do site. Reduzir para uma sombra mais suave/estreita. */
.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end {
    box-shadow: rgba(0, 0, 0, 0.06) -3px 0px 3px -3px;
}

/* Scrollbars azuis nas tabelas (prints) */
.rz-data-grid ::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.rz-data-grid ::-webkit-scrollbar-thumb {
    background: var(--fvc-primary-light);
    border-radius: 4px;
}

.rz-data-grid ::-webkit-scrollbar-track {
    background: var(--fvc-bg-gray);
    border-radius: 4px;
}

/* Pager */
.rz-pager {
    border: none;
    background: transparent;
    padding: 0.5rem 0.25rem 0.125rem;
    font-size: 0.8125rem;
}

.rz-pager .rz-pager-element {
    border-radius: var(--rz-pager-button-border-radius);
    font-weight: 500;
    box-shadow: none;
}

/* Dropdown do "itens por página" — o valor selecionado não estava centrado
   verticalmente dentro da caixa. */
.rz-pager .rz-dropdown {
    display: flex;
    align-items: center;
}

.rz-pager .rz-dropdown .rz-dropdown-label {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
    line-height: normal;
}

.rz-pager .rz-dropdown .rz-dropdown-trigger,
.rz-pager .rz-dropdown .rz-dropdown-trigger-icon {
    display: flex;
    align-items: center;
}

/* ============ 8. Tabs (pills) ============ */
.rz-tabview-nav {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 0.25rem;
    gap: 0.25rem;
}

.rz-tabview-top > .rz-tabview-nav li,
.rz-tabview-nav li {
    border: none !important;
    border-radius: 6px;
    background-color: transparent;
}

.rz-tabview-nav li a {
    border-radius: 6px;
    font-size: 0.875rem;
}

.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    border-radius: 6px;
}

.rz-tabview-nav .rz-tabview-selected {
    background-color: #ffffff;
    box-shadow: var(--rz-shadow-xs);
    border-radius: 6px;
}

/* Sem barra de tinta/acento herdado */
.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-bottom: none;
}

/* Conteúdo (search bar / tabela) mais colado às tabs */
.tabs-layout-shell {
    margin-bottom: -0.5rem;
}

/* Scrollbar fina e discreta por baixo das tabs, para sinalizar overflow horizontal */
.tabs-layout-shell .rz-tabview-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
    padding-bottom: 0.35rem;
}

.tabs-layout-shell .rz-tabview-nav::-webkit-scrollbar {
    display: block;
    height: 6px;
}

.tabs-layout-shell .rz-tabview-nav::-webkit-scrollbar-track {
    background: transparent;
}

.tabs-layout-shell .rz-tabview-nav::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.25);
    border-radius: 999px;
}

.tabs-layout-shell .rz-tabview-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 23, 42, 0.4);
}

.rz-tabview,
.rz-tabview-panels {
    background: transparent;
}

/* ── Settings layout margins ── */
.settings-layout-inner {
    padding: 0 1.5rem 1.5rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-body-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============ 9. Dialog ============ */
.rz-dialog-titlebar {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--fvc-border);
}

.rz-dialog-title {
    color: var(--fvc-text-primary);
}

.rz-dialog-content {
    padding: 1.5rem;
    color: var(--fvc-text-primary);
}

/* Dialog lateral mantém cantos direitos rentes à borda */
.rz-dialog-side {
    border-radius: 0;
}

.rz-dialog-side .rz-dialog-titlebar {
    border-bottom: 1px solid var(--fvc-border);
}

/* Confirm dialog */
.rz-dialog-confirm-buttons {
    gap: 0.5rem;
}

/* ============ 10. Notificações ============ */
.rz-notification-item {
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-inline-start: 4px solid transparent;
    align-items: center;
}

.rz-notification-success .rz-notification-item { border-inline-start-color: var(--fvc-success); }
.rz-notification-error .rz-notification-item { border-inline-start-color: var(--fvc-error); }
.rz-notification-warn .rz-notification-item { border-inline-start-color: var(--fvc-warning); }
.rz-notification-info .rz-notification-item { border-inline-start-color: var(--fvc-info); }

/* Compactas: título e mensagem pequenos, sem espaço extra por baixo do texto. */
.rz-notification-item-wrapper {
    width: auto;
    min-width: 16rem;
    max-width: 24rem;
    margin: 0.5rem 0;
}

.rz-notification-title {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.3;
}

.rz-notification-content {
    font-size: 0.8rem;
    line-height: 1.35;
    margin-block-end: 0;
}

.rz-notification-icon {
    font-size: 1.1rem !important;
}

.rz-notification-close .rzi {
    font-size: 1rem;
}

/* ============ 11. Popups / overlay panels ============ */
.rz-popup,
.rz-overlaypanel {
    background: #ffffff;
    border: 1px solid var(--fvc-border);
    border-radius: 8px;
    box-shadow: var(--rz-shadow-lg);
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel {
    border-radius: 8px;
    overflow: hidden;
}

.rz-dropdown-items li,
.rz-multiselect-items li,
.rz-dropdown-item,
.rz-multiselect-item {
    border-radius: 6px;
    margin: 0.125rem 0.25rem;
}

.rz-dropdown-items li.rz-state-highlight,
.rz-multiselect-items li.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight,
.rz-dropdown-items li:hover,
.rz-multiselect-items li:hover {
    border-radius: 6px !important;
}

.rz-dropdown-filter-container {
    padding: 0.5rem;
    border-bottom: 1px solid var(--fvc-border);
}

/* Calendário do datepicker */
.rz-datepicker-group {
    border-radius: 8px;
}

/* ============ 12. Badges ============ */
.rz-badge {
    line-height: 1.2;
    padding: 0.3125rem 0.625rem;
}

.rz-badge-success { background: #d1fae5; color: #065f46; }
.rz-badge-danger { background: #fee2e2; color: #991b1b; }
.rz-badge-warning { background: #fef3c7; color: #92400e; }
.rz-badge-info { background: #ede9fe; color: #5b21b6; }
.rz-badge-primary { background: #dbeafe; color: #1e40af; }
.rz-badge-secondary { background: var(--fvc-bg-gray); color: #374151; }
.rz-badge-light { background: var(--fvc-bg-light); color: var(--fvc-text-secondary); }

/* ============ 13. Skeleton / loading ============ */
.rz-skeleton {
    background-color: var(--fvc-bg-gray);
    border-radius: 6px;
}

/* ============ 14. Acessibilidade — foco visível ============ */
.rz-button:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* ============ 15. Stat card (Components/Card/StatCard.razor) ============ */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid var(--fvc-border);
    border-radius: var(--rz-card-border-radius);
    box-shadow: var(--rz-card-shadow);
    padding: 1.125rem 1.25rem;
    height: 100%;
    min-height: 5.25rem;
}

.stat-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--rz-primary-lighter);
    border-radius: 10px;
    color: var(--rz-primary);
    font-size: 1.0625rem;
}

.stat-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stat-card-label {
    font-size: 0.8125rem;
    color: var(--fvc-text-secondary);
    margin: 0;
    line-height: 1.3;
}

.stat-card-value {
    font-size: clamp(1.25rem, 1.35vw + 0.85rem, 1.75rem);
    font-weight: 700;
    color: var(--fvc-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

/* ============ 16. Sidebar — ícones e secções compactos ============ */
.sidenav .section-group-label {
    padding: 0.75rem 1rem 0.375rem;
    margin: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.sidenav .menu-item-icon {
    width: 1.375rem;
    height: 1.375rem;
    background: transparent !important;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.sidenav .menu-item-icon i {
    font-size: 1rem;
    color: inherit !important;
}

.sidenav .nav-link:hover .menu-item-icon,
.sidenav .nav-link.active .menu-item-icon {
    color: #ffffff;
}

.sidenav .menu-item-link {
    padding-right: 0.75rem;
}

.sidenav .menu-item-label {
    font-size: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidenav .nav-link[data-bs-toggle="collapse"]::after {
    flex-shrink: 0;
    margin-left: 0.5rem !important;
}

.g-sidenav-hidden .sidenav .section-group-label,
.g-sidenav-hidden .sidenav .menu-item-label,
.g-sidenav-hidden .sidenav .username-text {
    display: none !important;
}

/* ============ Sidebar recolhida (icon-only) ============ */
/* NOTA: a lógica de recolhida/hover está centralizada em app.css
   ("SIDEBAR COLLAPSED MODE FIXES") para evitar duas fontes de verdade
   a competir pelas mesmas classes (.g-sidenav-hidden .navbar-vertical). */

/* Logout: apenas ícone, sem chrome de botão */
.logout-icon-btn.rz-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 !important;
    border-radius: 6px;
}

.logout-icon-btn.rz-button:enabled:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ============ 17. Tabs — reforço de contraste do selecionado ============ */
.rz-tabview-nav li a,
.rz-tabview-nav li button {
    color: var(--fvc-text-secondary);
    font-weight: 500;
}

.rz-tabview-nav .rz-tabview-selected {
    box-shadow: var(--rz-shadow-xs), inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.rz-tabview-nav .rz-tabview-selected a,
.rz-tabview-nav .rz-tabview-selected button {
    color: var(--fvc-primary) !important;
    font-weight: 700;
}

/* Settings tabs: unselected tab text in a legible slate colour with a touch more weight so it
   doesn't wash out against the glass tab bar. The selected tab keeps the primary colour + card
   styling above. Scoped to .tabs-layout-shell, which only the Settings page uses. */
.tabs-layout-shell .rz-tabview-nav li:not(.rz-tabview-selected) a,
.tabs-layout-shell .rz-tabview-nav li:not(.rz-tabview-selected) button {
    color: #334155;
    font-weight: 600;
}

.tabs-layout-shell .rz-tabview-nav li:not(.rz-tabview-selected):hover a,
.tabs-layout-shell .rz-tabview-nav li:not(.rz-tabview-selected):hover button {
    color: #1e293b;
}

/* ============ 18. Checkbox — estado selecionado bem visível ============ */
/* Um form-field a envolver um checkbox/switch/radio não deve parecer uma caixa de texto:
   remove a borda/sombra/anel de foco do container, deixando o próprio controlo mostrar
   claramente o seu estado (senão o "input" gigante ofusca a caixinha pequena lá dentro). */
.rz-form-field:has(.rz-chkbox) .rz-form-field-content,
.rz-form-field:has(.rz-switch) .rz-form-field-content,
.rz-form-field:has(.rz-radiobutton) .rz-form-field-content {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.rz-chkbox-box {
    box-shadow: none !important;
}

.rz-chkbox-box.rz-state-active {
    background-color: var(--rz-primary) !important;
    border: 1px solid var(--rz-primary) !important;
    box-shadow: none !important;
}

.rz-chkbox-box.rz-state-active .rzi {
    color: #ffffff !important;
    font-size: 0.9375rem;
}

/* ============ 19. Botões de ação quadrados (IconButton sem texto) ============ */
.icon-only-btn.rz-button {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
    padding: 0 !important;
}

.icon-only-btn.rz-button-xs {
    width: 1.6875rem;
    height: 1.6875rem;
    min-width: 1.6875rem;
    min-height: 1.6875rem;
}

.icon-only-btn.rz-button-sm {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
}

.icon-only-btn i {
    margin: 0;
    line-height: 1;
}

.rz-chkbox-box.rz-state-active .rzi {
    color: var(--fvc-text-primary) !important;
}
/* Sidebar counter pill (e.g. Validações: erros por resolver do ano ativo). */
.menu-item-badge {
    margin-left: auto;
    background-color: #dc2626;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    min-width: 1.4rem;
    text-align: center;
}

/* ============ 20. Dashboard (Pages/Home.razor) ============ */
.stat-card-sublabel {
    font-size: 0.8125rem;
    color: var(--fvc-text-secondary);
    white-space: nowrap;
}

.stat-card {
    position: relative;
}

.stat-card.has-action .stat-card-body {
    padding-right: 2.25rem;
}

.stat-card-action {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.dash-card-title {
    font-weight: 700;
    color: var(--fvc-text-primary);
    margin: 0;
}

.dash-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--fvc-border);
}

.dash-list-item:last-child {
    border-bottom: none;
}

.dash-list-item-name {
    font-weight: 600;
    color: var(--fvc-text-primary);
    margin: 0;
}

.dash-badge {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}

.dash-badge.ok {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.dash-badge.err {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.dash-notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.25rem 0.85rem 0.9rem;
    border-bottom: 1px solid var(--fvc-border);
    border-left: 3px solid transparent;
}

.dash-notification-item:last-child {
    border-bottom: none;
}

.dash-notification-item.err {
    border-left-color: var(--fvc-error);
}

.dash-notification-item.ok {
    border-left-color: var(--fvc-success);
}

.dash-notification-item .dash-notification-heading {
    font-weight: 600;
    color: var(--fvc-text-primary);
    margin: 0 0 0.1rem 0;
}

.dash-notification-item .dash-notification-message {
    color: var(--fvc-text-secondary);
    font-size: 0.85rem;
    margin: 0 0 0.2rem 0;
}

.dash-notification-item .dash-notification-meta {
    color: var(--fvc-text-tertiary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-empty {
    color: var(--fvc-text-tertiary);
    padding: 1rem 0.25rem;
}