/* ============================================================
   Raizen design system - Operations Manager

   Color tokens are global. Component geometry and typography enter
   module by module through a shared scope:

     .rz-scope        - page shell, applied on MudMainContent by MainLayout
     .rz-scope-dialog - dialogs, which render outside the page tree
     .rz-<modulo>     - only what is genuinely specific to one module

   Generic rules live in .rz-scope and are never duplicated per module.
   Adequating a module is adding its route prefix to MainLayout and the
   scope class to its dialogs. When every module is adequated, going
   global is dropping the prefix in one place.

   Mobile first: every responsive override uses min-width.
   ============================================================ */

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/outfit-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
    /* Brand */
    --rz-petroleo: #005D5E;
    --rz-cana: #6CBE4B;
    --rz-azul: #003087;

    /* Petroleo scale */
    --rz-petroleo-50: #E8F2F2;
    --rz-petroleo-100: #C9E2E2;
    --rz-petroleo-200: #96C6C7;
    --rz-petroleo-300: #5CA5A6;
    --rz-petroleo-400: #2A8384;
    --rz-petroleo-500: #005D5E;
    --rz-petroleo-600: #004E4F;
    --rz-petroleo-700: #003D3E;
    --rz-petroleo-800: #002C2D;
    --rz-petroleo-900: #001C1D;

    /* Cana scale */
    --rz-cana-50: #F1F9ED;
    --rz-cana-100: #DDF0D2;
    --rz-cana-200: #BFE3AC;
    --rz-cana-300: #9AD37F;
    --rz-cana-400: #6CBE4B;
    --rz-cana-500: #55A538;
    --rz-cana-600: #43862C;
    --rz-cana-700: #346821;
    --rz-cana-800: #264B18;
    --rz-cana-900: #16300F;

    /* Green-tinted neutrals */
    --rz-neutro-25: #FAFBFA;
    --rz-neutro-50: #F2F5F4;
    --rz-neutro-100: #E4E9E8;
    --rz-neutro-200: #CBD3D2;
    --rz-neutro-300: #A8B3B2;
    --rz-neutro-400: #7D8988;
    --rz-neutro-500: #5A6564;
    --rz-neutro-600: #414A49;
    --rz-neutro-700: #2C3433;
    --rz-neutro-900: #101615;

    /* Semantic */
    --rz-success: #43862C;
    --rz-warning: #C77700;
    --rz-error: #B4231C;
    --rz-info: #003087;

    /* Tintas claras das semanticas, para texto sobre fundo escuro. As escalas de
       petroleo e cana ja tinham esse degrau; as semanticas nao. */
    --rz-success-100: #DDF0D2;
    --rz-warning-100: #F7E7CC;
    --rz-error-100: #FBEBEA;
    --rz-info-100: #D6DEF0;

    /* Spacing, radius and elevation */
    --rz-sp1: 4px;
    --rz-sp2: 8px;
    --rz-sp4: 16px;
    --rz-sp5: 20px;
    --rz-sp6: 24px;
    --rz-sp10: 40px;
    --rz-radius-sm: 6px;
    --rz-radius-md: 10px;
    --rz-radius-lg: 16px;
    --rz-radius-field: 4px;
    --rz-elev-1: 0 1px 2px rgba(16, 22, 21, .08);
    --rz-elev-3: 0 2px 6px rgba(16, 22, 21, .08), 0 8px 20px rgba(16, 22, 21, .06);
    --rz-elev-8: 0 6px 16px rgba(16, 22, 21, .10), 0 20px 44px rgba(16, 22, 21, .10);

    /* Existing splash consumes these aliases before Blazor starts. Eles moram so aqui:
       o splash-screen.css nao os redeclara, senao as duas listas divergem em silencio. */
    --om-ink-900: #001C1D;
    --om-ink-850: #002C2D;
    --om-on-dark: #FFFFFF;
    --om-on-dark-body: #C9E2E2;
    --om-on-dark-muted: #96C6C7;
    --om-line: rgba(201, 226, 226, 0.18);
    --om-brand: #005D5E;
    --om-mint: #6CBE4B;
    --om-mint-soft: #9AD37F;
    --om-gradient: linear-gradient(90deg, #005D5E 0%, #2A8384 58%, #6CBE4B 100%);
}

/* Global color rollout. Geometry remains unchanged outside Lacracao. */
body.om-app-ready,
body {
    background-color: var(--mud-palette-background, var(--rz-neutro-50)) !important;
}

.mud-nav-link.active {
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--rz-petroleo-50);
    color: var(--rz-petroleo-700);
    font-weight: 600;
}

.mud-theme-dark .mud-nav-link.active {
    background: #1E2827;
    color: var(--rz-petroleo-200);
}

.om-splash::after {
    background: rgba(0, 93, 94, .45);
}

.operations-manager-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--rz-petroleo) !important;
}

.operations-manager-confirm-button {
    border-radius: var(--rz-radius-md) var(--rz-radius-md) var(--rz-radius-md) 0 !important;
    background: var(--rz-petroleo) !important;
    color: #FFFFFF !important;
}

.operations-manager-cancel-button {
    border-color: var(--rz-petroleo-200) !important;
    background: var(--rz-petroleo-50) !important;
    color: var(--rz-petroleo) !important;
}

/* Module page shell --------------------------------------------------- */
.mud-main-content.rz-scope {
    min-height: calc(100vh - 64px);
    padding: var(--rz-sp4) !important;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: "Manrope", system-ui, sans-serif;
}

/* Casca herdada: o wrapper existia so para o MudOverlay de carregamento ter caixa.
   Virou classe, e o cartao dentro dele continua recebendo a forma do sistema. */
.rz-scope .rz-page {
    position: relative;
    min-height: 100%;
}

.rz-scope > .mud-card,
.rz-scope > .rz-page > .mud-card {
    width: 100%;
    margin-top: 0 !important;
    overflow: hidden;
    border: 0;
    border-radius: var(--rz-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--rz-elev-1);
}

.rz-scope .mud-card-content {
    padding: var(--rz-sp4) !important;
}

.rz-scope .mud-paper-outlined {
    border-color: var(--mud-palette-divider);
    border-radius: var(--rz-radius-lg);
    background: var(--mud-palette-surface);
}

.rz-scope .mud-divider {
    border-color: var(--mud-palette-divider);
}

/* Typography ---------------------------------------------------------- */
.rz-scope .mud-typography-h4,
.rz-scope .mud-typography-h5,
.rz-scope .mud-typography-h6,
.rz-scope .app-page-header__title {
    font-family: "Outfit", "Manrope", sans-serif;
}

.rz-scope .mud-typography-h4 {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.015em;
}

.rz-scope .mud-typography-h5 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.33;
}

.rz-scope .mud-typography-h6 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.44;
}

.rz-scope .mud-typography-body1 {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.625;
}

.rz-scope .mud-typography-body2 {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .875rem;
    line-height: 1.57;
}

/* Texto de apoio. Global de proposito: vale tambem na casca sem escopo (login,
   recuperacao de senha), onde Color.Secondary pintaria o texto de cana. */
.rz-text-secondary,
.rz-text-secondary.mud-typography {
    color: var(--mud-palette-text-secondary);
}

.rz-scope .mud-typography-caption,
.rz-scope .rz-num,
.rz-lacracao .mud-table-cell[data-label*="N"],
.rz-lacracao .mud-table-cell[data-label*="Data"],
.rz-lacracao .mud-table-cell[data-label*="Início"] {
    font-family: "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
}

/* Page header: essential context remains visible on mobile. */
.rz-scope .app-page-header {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--rz-sp2);
    row-gap: var(--rz-sp4);
    min-height: auto;
    /* O mesmo recuo do card-content: empilhado, o header estava encostando nas bordas do cartao
       enquanto todo o resto da tela respeitava 16px. */
    padding: var(--rz-sp4);
    border-bottom: 0;
    background: transparent;
}

.rz-scope .app-page-header__side--left,
.rz-scope .app-page-header__title,
.rz-scope .app-page-header__side--right {
    display: flex !important;
}

.rz-scope .app-page-header__title {
    position: static;
    width: auto;
    min-width: 0;
    transform: none;
    text-align: left;
    pointer-events: auto;
}

.rz-scope .app-page-header__title-content {
    justify-content: flex-start;
}

.rz-scope .app-page-header__title .mud-typography {
    color: var(--mud-palette-text-primary);
}

.rz-scope .app-page-header__title-icon {
    color: var(--mud-palette-primary);
}

.rz-scope .app-page-header__side--right {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.rz-scope .app-page-header__right-actions,
.rz-scope .app-page-header__right-actions > .d-flex {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
}

/* Empilhado, esticar tudo transformava o chip de status numa barra do tamanho de um botao, e ele
   passava a disputar a leitura com a acao. Quem ocupa a largura toda e so o que se clica. */
.rz-scope .app-page-header__right-actions .mud-chip {
    align-self: flex-start;
}

.rz-lacracao .seletor-unidade-ativa {
    width: 100%;
}

.rz-lacracao .seletor-unidade-ativa .mud-input.mud-input-outlined {
    height: 56px;
    min-height: 56px;
    align-items: center;
}

.rz-lacracao .seletor-unidade-ativa .mud-select-input {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 56px;
    min-height: 56px;
}

.rz-lacracao .seletor-unidade-ativa .mud-select-input .mud-input-slot {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    height: 100%;
    min-height: 0;
    padding-block: 0;
}

.rz-lacracao .seletor-unidade-ativa .mud-input-adornment {
    align-self: center;
}

.rz-scope .app-page-header--without-back .app-page-header__side--left {
    display: none !important;
}

.rz-scope .app-page-header--without-back .app-page-header__title {
    grid-column: 1 / -1;
}

/* Buttons ------------------------------------------------------------- */
.rz-scope .mud-button-root,
.rz-scope .mud-icon-button,
.rz-scope-dialog .mud-button-root,
.rz-scope-dialog .mud-icon-button {
    min-height: 48px;
}

.rz-scope .mud-button-root,
.rz-scope-dialog .mud-button-root {
    border-radius: var(--rz-radius-md);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rz-scope .mud-button-root.mud-button-filled-primary:not(.mud-icon-button),
.rz-scope-dialog .mud-button-root.mud-button-filled-primary:not(.mud-icon-button) {
    padding-inline: 26px;
    color: #FFFFFF;
    background: var(--rz-petroleo-500);
}

.rz-scope .mud-button-root.mud-button-filled-primary:not(.mud-icon-button):hover,
.rz-scope-dialog .mud-button-root.mud-button-filled-primary:not(.mud-icon-button):hover {
    background: var(--rz-petroleo-600);
}

.rz-scope .mud-button-root.mud-button-filled-primary:not(.mud-icon-button):active,
.rz-scope-dialog .mud-button-root.mud-button-filled-primary:not(.mud-icon-button):active {
    background: var(--rz-petroleo-700);
}

.rz-scope .mud-button-outlined-primary,
.rz-scope-dialog .mud-button-outlined-primary {
    border-width: 1.5px;
}

/* One brand cut per surface: the main page/header or dialog action.
   .rz-scope .rz-cut is not redundant: bare .rz-cut loses to the button rule
   above (.rz-scope .mud-button-root), so inside the scope the manual cut only
   lands with the scope in the selector. */
.rz-scope .app-page-header__right-actions .mud-button-root.mud-button-filled-primary:not(.mud-icon-button),
.rz-scope-dialog .mud-dialog-actions .mud-button-filled-primary:last-child,
.rz-scope .rz-cut,
.rz-scope-dialog .rz-cut,
.rz-cut {
    border-radius: var(--rz-radius-md) var(--rz-radius-md) var(--rz-radius-md) 0;
}

.rz-scope .app-page-header__back-button {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: var(--rz-radius-md);
}

/* Material 3 outlined fields ---------------------------------------- */
.rz-scope .mud-input.mud-input-outlined .mud-input-outlined-border,
.rz-scope-dialog .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: var(--rz-radius-field);
}

.rz-scope .mud-input.mud-input-outlined > .mud-input-slot,
.rz-scope-dialog .mud-input.mud-input-outlined > .mud-input-slot {
    box-sizing: border-box;
    min-height: 56px;
    padding-inline: var(--rz-sp4);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1rem;
}

.rz-scope .mud-input.mud-input-outlined.mud-select-input > div.mud-input-slot,
.rz-scope-dialog .mud-input.mud-input-outlined.mud-select-input > div.mud-input-slot {
    display: flex !important;
    align-items: center;
    height: 56px;
    padding-block: 0;
}

.rz-scope .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.rz-scope-dialog .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--mud-palette-primary);
}

.rz-scope .mud-input-label-outlined.mud-input-label-inputcontrol,
.rz-scope-dialog .mud-input-label-outlined.mud-input-label-inputcontrol {
    padding-inline: var(--rz-sp1);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .75rem;
    line-height: 1.2;
}

.rz-scope .mud-input-control-helper-container,
.rz-scope-dialog .mud-input-control-helper-container {
    padding: var(--rz-sp1) var(--rz-sp4) 0;
    font-size: .75rem;
}

.rz-scope .mud-input-error .mud-input-outlined-border,
.rz-scope-dialog .mud-input-error .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--mud-palette-error);
}

/* Overview filters sit directly on the page instead of inside nested cards. */
.rz-lacracao .lacracao-filter-bar {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Chips --------------------------------------------------------------- */
.rz-scope .mud-chip,
.rz-scope-dialog .mud-chip {
    min-height: 32px;
    padding-inline: 14px;
    border-radius: var(--rz-radius-sm);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .8125rem;
    font-weight: 600;
}

.rz-scope .mud-chip-filled-primary {
    color: var(--rz-petroleo-700);
    background: var(--rz-petroleo-50);
}

.rz-scope .mud-chip-filled-secondary {
    color: var(--rz-cana-800);
    background: var(--rz-cana-100);
}

/* Chip neutro do sistema: a variante outlined sem cor de papel. Os dois pares
   de seletores cobrem as duas formas que o MudBlazor pode emitir para
   Color.Default (sem classe de cor, ou com mud-chip-color-default); o que não
   pode acontecer é pegar os outlined coloridos, que seguem a cor deles. */
.rz-scope .mud-chip-outlined:not([class*="mud-chip-color-"]),
.rz-scope .mud-chip-outlined.mud-chip-color-default,
.rz-scope-dialog .mud-chip-outlined:not([class*="mud-chip-color-"]),
.rz-scope-dialog .mud-chip-outlined.mud-chip-color-default {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* Tables -------------------------------------------------------------- */
.rz-scope .mud-table-container {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--rz-radius-md);
}

.rz-scope .mud-table-head .mud-table-cell,
.rz-scope .mud-simple-table thead th {
    padding-block: 12px;
    background: var(--rz-petroleo-500);
    color: #FFFFFF;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rz-scope .mud-table-body .mud-table-cell,
.rz-scope .mud-simple-table tbody td {
    padding-block: 14px;
    border-color: var(--mud-palette-divider);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .875rem;
}

.rz-scope .mud-table-body .mud-table-row:nth-child(even),
.rz-scope .mud-simple-table tbody tr:nth-child(even) {
    background: var(--mud-palette-table-striped);
}

.rz-scope .mud-table-body .mud-table-row:hover,
.rz-scope .mud-simple-table tbody tr:hover {
    background: var(--mud-palette-table-hover) !important;
}

.rz-scope .mud-table-cell-custom-group {
    color: var(--rz-petroleo-700);
    background: var(--rz-petroleo-50);
}

/* Tabs and alerts ----------------------------------------------------- */
.rz-scope .mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.rz-scope .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.rz-scope .mud-alert,
.rz-scope-dialog .mud-alert {
    border-width: 0 0 0 3px;
    border-radius: 0 var(--rz-radius-md) var(--rz-radius-md) 0;
    box-shadow: none;
}

.rz-scope .mud-alert-filled-success,
.rz-scope .mud-alert-outlined-success,
.rz-scope-dialog .mud-alert-filled-success,
.rz-scope-dialog .mud-alert-outlined-success {
    border-left-color: var(--rz-success);
    background: var(--rz-cana-50);
    color: var(--rz-cana-900);
}

.rz-scope .mud-alert-filled-warning,
.rz-scope .mud-alert-outlined-warning,
.rz-scope-dialog .mud-alert-filled-warning,
.rz-scope-dialog .mud-alert-outlined-warning {
    border-left-color: var(--rz-warning);
    background: #FCF2E4;
    color: #714300;
}

.rz-scope .mud-alert-filled-error,
.rz-scope .mud-alert-outlined-error,
.rz-scope-dialog .mud-alert-filled-error,
.rz-scope-dialog .mud-alert-outlined-error {
    border-left-color: var(--rz-error);
    background: #FBEBEA;
    color: #761712;
}

.rz-scope .mud-alert-filled-info,
.rz-scope .mud-alert-outlined-info,
.rz-scope-dialog .mud-alert-filled-info,
.rz-scope-dialog .mud-alert-outlined-info {
    border-left-color: var(--rz-info);
    background: var(--rz-petroleo-50);
    color: var(--rz-petroleo-800);
}

/* Dialogs ------------------------------------------------------------- */
.rz-scope-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    background: var(--mud-palette-surface);
    box-shadow: var(--rz-elev-8);
    font-family: "Manrope", system-ui, sans-serif;
}

.rz-scope-dialog .mud-dialog-content {
    flex: 1;
    overflow-y: auto;
}

.rz-scope-dialog .mud-dialog-title,
.rz-scope-dialog .mud-typography-h6 {
    font-family: "Outfit", "Manrope", sans-serif;
    font-weight: 600;
}

.rz-scope-dialog .mud-dialog-actions {
    gap: var(--rz-sp2);
    padding: var(--rz-sp4) var(--rz-sp6) var(--rz-sp6);
}

@media (min-width: 600px) {
    .mud-main-content.rz-scope {
        padding: var(--rz-sp6) !important;
    }

    .rz-scope .mud-card-content {
        padding: var(--rz-sp6) !important;
    }

    .rz-scope .mud-button-root,
    .rz-scope .mud-icon-button,
    .rz-scope-dialog .mud-button-root,
    .rz-scope-dialog .mud-icon-button {
        min-height: 44px;
    }

    .rz-scope .app-page-header__back-button {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .rz-scope .app-page-header {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        min-height: 68px;
        padding: 10px var(--rz-sp4);
        border-bottom: 1px solid var(--mud-palette-divider);
        background: var(--mud-palette-surface);
    }

    .rz-scope .app-page-header__side--right {
        grid-column: auto;
        width: auto;
    }

    .rz-scope .app-page-header__right-actions,
    .rz-scope .app-page-header__right-actions > .d-flex {
        width: auto;
        flex-direction: row;
        align-items: center !important;
    }

    /* Em linha o chip volta a acompanhar a altura dos vizinhos. */
    .rz-scope .app-page-header__right-actions .mud-chip {
        align-self: center;
    }

    .rz-lacracao .seletor-unidade-ativa {
        width: 260px;
    }

    .rz-scope .app-page-header--without-back {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rz-scope .app-page-header--without-back .app-page-header__title {
        grid-column: auto;
    }

    .rz-scope-dialog {
        width: auto;
        min-width: min(560px, calc(100vw - 64px));
        max-width: calc(100vw - 64px);
        height: auto;
        max-height: calc(100vh - 64px);
        margin: 32px;
        border-radius: var(--rz-radius-lg);
    }
}

@media (min-width: 1280px) {
    .mud-main-content.rz-scope {
        padding-inline: var(--rz-sp10) !important;
    }

    .rz-scope > .mud-card {
        max-width: 1440px;
        margin-inline: auto;
    }
}

/* Migalha de pao (AppBreadcrumbs) ------------------------------------- */
/* Chrome de navegacao, nao superficie: sem faixa e sem elevacao, para nao somar um
   terceiro nivel de profundidade sobre o card. Some abaixo de 768px - no celular o
   rastro ocupa a primeira dobra e quem leva de volta e o botao Voltar do cabecalho.
   E a unica razao para uma media query fora das duas do sistema: o ponto em que a
   trilha inteira cabe em uma linha sem quebrar. */
.app-breadcrumbs {
    display: none;
}

@media (min-width: 768px) {
    .app-breadcrumbs {
        display: block;
        margin-bottom: var(--rz-sp4);
    }

    .app-breadcrumbs .mud-breadcrumbs {
        padding: 0;
        font-family: "Manrope", system-ui, sans-serif;
        font-size: .8125rem;
        font-weight: 600;
        letter-spacing: .01em;
    }

    /* O link ja vem petroleo do proprio MudBlazor (.mud-primary-text, com
       !important). Aqui ele so ganha area de clique, raio e o realce de hover -
       tentar repintar a cor daqui nao venceria, e nao precisa. */
    .app-breadcrumbs .mud-breadcrumb-item > a {
        gap: var(--rz-sp1);
        min-height: 32px;
        padding: 0 10px;
        border-radius: var(--rz-radius-sm);
        text-decoration: none;
        transition: background-color .15s ease;
    }

    .app-breadcrumbs .mud-breadcrumb-item > a:hover,
    .app-breadcrumbs .mud-breadcrumb-item > a:focus-visible {
        background: var(--mud-palette-action-default-hover);
        text-decoration: none;
    }

    .app-breadcrumbs .mud-breadcrumb-item > a .mud-icon-root {
        font-size: 1.125rem;
        color: currentColor;
    }

    /* O item atual nao e link: e o "voce esta aqui". Mantem o peso, perde o realce. */
    .app-breadcrumbs .mud-breadcrumb-item.mud-disabled > a {
        background: transparent;
        color: var(--mud-palette-text-primary);
        font-weight: 700;
        opacity: 1;
    }

    .app-breadcrumbs .mud-breadcrumb-item.mud-disabled > a .mud-icon-root {
        color: var(--mud-palette-primary);
    }

    .app-breadcrumbs .mud-breadcrumb-separator {
        padding: 0 2px;
    }

    .app-breadcrumbs .mud-breadcrumb-separator .mud-icon-root {
        font-size: 1rem;
        color: var(--mud-palette-text-secondary);
        opacity: .45;
    }
}

/* KPI ----------------------------------------------------------------- */
/* Cartao de indicador: superficie chapada com contorno, sem elevacao propria.
   A profundidade da tela ja vem do card que o contem - empilhar sombra aqui
   seria o terceiro nivel. O numero vai em .rz-num (JetBrains Mono). */
.rz-scope .rz-kpi {
    height: 100%;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--rz-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: none;
}

.rz-scope .rz-kpi--ativo {
    border-left: 3px solid var(--rz-success);
}

.rz-scope .rz-kpi__head {
    display: flex;
    align-items: center;
    gap: var(--rz-sp2);
    margin-bottom: var(--rz-sp1);
}

.rz-scope .rz-kpi__head .mud-typography-overline {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .06em;
}

.rz-scope .rz-kpi .mud-typography-h4 {
    font-family: "Outfit", "Manrope", sans-serif;
}

/* Notas de apoio ------------------------------------------------------ */
/* Bloco de informacao dentro do formulario: a mesma familia de cor dos alertas,
   sem o peso de um MudAlert. Neutra por padrao; a variante define a severidade.
   Existe porque as telas vinham resolvendo isso com rgba do Material no style=. */
.rz-scope .rz-nota,
.rz-scope-dialog .rz-nota {
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 var(--rz-radius-md) var(--rz-radius-md) 0;
    background: var(--mud-palette-background-gray);
    box-shadow: none;
}

.rz-scope .rz-nota--info,
.rz-scope-dialog .rz-nota--info {
    border-left-color: var(--rz-info);
    background: var(--rz-petroleo-50);
    color: var(--rz-petroleo-800);
}

.rz-scope .rz-nota--success,
.rz-scope-dialog .rz-nota--success {
    border-left-color: var(--rz-success);
    background: var(--rz-cana-50);
    color: var(--rz-cana-900);
}

.rz-scope .rz-nota--warning,
.rz-scope-dialog .rz-nota--warning {
    border-left-color: var(--rz-warning);
    background: #FCF2E4;
    color: #714300;
}

.rz-scope .rz-nota .mud-typography,
.rz-scope-dialog .rz-nota .mud-typography {
    color: inherit;
}

/* Superficie de marca -------------------------------------------------- */
/* Faixa petroleo com texto branco - cabecalho de card, barra de painel. O texto
   e branco porque o fundo e petroleo; sobre cana ele seria cana 900. */
.rz-scope .rz-superficie-marca,
.rz-scope-dialog .rz-superficie-marca {
    background: var(--mud-palette-primary);
    color: #FFFFFF;
}

.rz-scope .rz-superficie-marca .mud-typography,
.rz-scope-dialog .rz-superficie-marca .mud-typography {
    color: inherit;
}

/* Acao sobre superficie de marca: inverte, porque um filled-primary sumiria ali.
   A altura continua vindo da regra de botao do escopo (48px em xs, 44px acima). */
.rz-scope .rz-acao-flutuante.mud-button-root,
.rz-scope-dialog .rz-acao-flutuante.mud-button-root {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--rz-elev-1);
}

.rz-scope .rz-acao-flutuante.mud-button-root:hover,
.rz-scope-dialog .rz-acao-flutuante.mud-button-root:hover {
    background: var(--rz-petroleo-50);
}

/* Cabecalho de categoria da inspecao ----------------------------------- */
.rz-scope .rz-categoria-cabecalho {
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.rz-scope .rz-categoria-cabecalho--concluida {
    background: var(--rz-cana-50);
}

/* Item da fila de upload ----------------------------------------------- */
.rz-upload-item {
    margin-bottom: var(--rz-sp1);
    border-radius: var(--rz-radius-field);
    background: var(--mud-palette-background-gray);
}

.rz-upload-item--sucesso {
    background: var(--rz-cana-50);
}

.rz-upload-item--erro {
    background: #FBEBEA;
}

.rz-upload-item--enviando {
    background: var(--rz-petroleo-50);
}

/* Casca de autenticacao (login, senha) --------------------------------- */
/* Estas telas usam HeadlessLayout: ficam fora do MudMainContent e por isso o
   escopo nao chega pelo MainLayout - o wrapper carrega rz-scope no proprio
   razor, e dai vem botao, campo, alerta e tipografia. O que sobra aqui e o
   arranjo das colunas e o painel de marca.

   A foto e a mascara sao as mesmas da splash, no mesmo arquivo: a tela de
   login e a splash assentando, nao uma identidade nova - e a imagem ja esta
   em cache quando o Blazor sobe. */

/* A segunda faixa e 1fr, nao minmax(0, 1fr): com minimo zero o painel
   centralizado corta o topo do formulario quando o teclado do celular abre. */
/* A cor de texto e declarada aqui porque o HeadlessLayout nao tem MudLayout: e
   o MudLayout que leva --mud-palette-text-primary para a arvore. Sem isso o
   texto cai no padrao do navegador - invisivel no modo escuro, e no claro o
   acaso de ser preto sobre branco escondia a falha. */
.rz-auth {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

/* Painel de marca ------------------------------------------------------ */
.rz-auth__visual {
    position: relative;
    z-index: 0;
    display: flex;
    overflow: hidden;
    min-height: 32vh;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--rz-sp6);
    padding: var(--rz-sp5) var(--rz-sp4) var(--rz-sp10);
    color: #FFFFFF;
    background: var(--rz-petroleo-900);
    isolation: isolate;
}

.rz-auth__visual-img {
    position: absolute;
    z-index: -2;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% 42%;
}

/* A foto da base e clara (ceu, patio). As paradas abaixo sustentam o texto
   sobre ela; clarear a mascara derruba o contraste. */
.rz-auth__visual-shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(0, 28, 29, .97) 0%, rgba(0, 28, 29, .8) 44%, rgba(0, 28, 29, .5) 100%),
        linear-gradient(0deg, rgba(0, 93, 94, .22), rgba(0, 93, 94, .22));
}

.rz-auth__visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rz-sp4);
}

.rz-auth__brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.rz-auth__brand-icon {
    flex: 0 0 44px;
    overflow: hidden;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(0, 28, 29, .28);
}

.rz-auth__brand-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rz-auth__brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.rz-auth__brand-name {
    font-family: "Outfit", "Manrope", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.015em;
}

.rz-auth__brand-unit {
    color: var(--rz-petroleo-200);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .63rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* O alternador de modo fica sobre a foto: branco, e nao Color.Primary, que
   sumiria no petroleo do fundo. A altura de toque vem do rz-scope. */
.rz-auth__mode.mud-icon-button {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #FFFFFF;
    background: rgba(255, 255, 255, .1);
}

.rz-auth__mode.mud-icon-button:hover {
    background: rgba(255, 255, 255, .2);
}

.rz-auth__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--rz-sp2);
    color: var(--rz-cana-300);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.rz-auth__eyebrow::before {
    flex: 0 0 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--rz-petroleo-300) 0%, var(--rz-cana-300) 55%, var(--rz-cana-400) 100%);
    content: "";
}

.rz-auth__title {
    margin: 0;
    font-family: "Outfit", "Manrope", sans-serif;
    font-size: clamp(1.75rem, 7.4vw, 2.375rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.03em;
}

/* inline-block por dois motivos: o trecho em degrade quebra como unidade (solto,
   ele deixava "em" na linha de cima, em branco), e o recorte do gradiente passa a
   valer para uma caixa so, em vez de recomecar a cada linha. */
.rz-auth__title span {
    display: inline-block;
    background: linear-gradient(90deg, #FFFFFF 0%, var(--rz-cana-300) 55%, var(--rz-cana-400) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Faixa curta no celular: eyebrow e titulo bastam. O resto entra em 900px. */
.rz-auth__lead,
.rz-auth__capabilities {
    display: none;
}

/* Painel do formulario ------------------------------------------------- */
/* Sobe 20px sobre a faixa: e o cartao do formulario cobrindo a foto. */
.rz-auth__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -20px;
    padding: var(--rz-sp6) var(--rz-sp4) var(--rz-sp5);
    border-radius: var(--rz-radius-lg) var(--rz-radius-lg) 0 0;
    background: var(--mud-palette-surface);
}

.rz-auth__panel-inner {
    display: flex;
    width: min(420px, 100%);
    flex-direction: column;
    gap: var(--rz-sp6);
    margin-inline: auto;
}

.rz-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--rz-sp4);
}

.rz-auth__intro {
    display: flex;
    flex-direction: column;
    gap: var(--rz-sp1);
}

.rz-auth__submit {
    margin-top: var(--rz-sp2);
}

.rz-auth__link-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rz-sp2);
    text-align: center;
}

.rz-auth__footer {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: .72rem;
    line-height: 1.4;
    text-align: center;
}

.rz-auth__footer a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.rz-auth__footer a:hover {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
}

.rz-auth__footer a:focus-visible {
    border-radius: var(--rz-radius-sm);
    outline: 3px solid var(--rz-petroleo-200);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .rz-auth__panel-inner {
        animation: rz-auth-entrada 420ms cubic-bezier(.2, .6, .2, 1) both;
    }
}

@keyframes rz-auth-entrada {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Duas colunas: a marca deixa de ser faixa e vira a metade esquerda. */
@media (min-width: 900px) {
    .rz-auth {
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    }

    .rz-auth__visual {
        min-height: 100%;
        padding: var(--rz-sp10) clamp(40px, 4.2vw, 68px);
    }

    .rz-auth__visual-img {
        object-position: 58% 42%;
    }

    /* Sem a faixa horizontal, a mascara abre para a direita - onde a foto
       encontra o painel branco do formulario. */
    .rz-auth__visual-shade {
        background:
            linear-gradient(90deg, rgba(0, 28, 29, .96) 0%, rgba(0, 28, 29, .86) 46%, rgba(0, 28, 29, .5) 100%),
            linear-gradient(0deg, rgba(0, 28, 29, .72) 0%, rgba(0, 28, 29, .1) 42%, rgba(0, 28, 29, .38) 100%),
            linear-gradient(0deg, rgba(0, 93, 94, .22), rgba(0, 93, 94, .22));
    }

    /* Largura em rem, nao em ch: o ch vale a fonte do bloco (Manrope 16px) e
       apertava a lista de modulos, que e uppercase e vinha quebrando com o
       separador sobrando no fim da linha. */
    .rz-auth__hero {
        max-width: 34rem;
    }

    .rz-auth__title {
        max-width: 14ch;
        font-size: clamp(2.25rem, 3.4vw, 3.25rem);
        line-height: 1;
        letter-spacing: -.04em;
    }

    .rz-auth__lead {
        display: block;
        max-width: 46ch;
        margin: var(--rz-sp6) 0 0;
        color: var(--rz-petroleo-100);
        font-family: "Manrope", system-ui, sans-serif;
        font-size: 1.0625rem;
        line-height: 1.55;
    }

    .rz-auth__capabilities {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 18px;
        margin: var(--rz-sp6) 0 0;
        color: var(--rz-petroleo-200);
        font-family: "Manrope", system-ui, sans-serif;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .rz-auth__capabilities span {
        display: inline-flex;
        align-items: center;
        gap: 18px;
    }

    .rz-auth__capabilities span:not(:last-child)::after {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--rz-cana-400);
        content: "";
    }

    .rz-auth__panel {
        margin-top: 0;
        padding: var(--rz-sp10) clamp(40px, 3.4vw, 56px);
        border-radius: 0;
    }
}

/* Atalhos da Home ------------------------------------------------------ */
.rz-scope .rz-atalho-link {
    display: block;
    height: 100%;
    color: inherit;
}

.rz-scope .rz-atalho-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--rz-radius-md);
}

.rz-scope .rz-atalho {
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rz-radius-md);
    background: var(--mud-palette-surface);
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.rz-scope .rz-atalho:hover {
    border-color: var(--mud-palette-primary);
    background: var(--rz-petroleo-50);
}

.rz-scope .rz-atalho .mud-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--rz-sp1);
    min-height: 148px;
}