@import url('./main-layout.css');

/* ===== Modern Blue Theme - Inspired by Google Stitch ===== */
html {
    /* Primary: Light blue accent */
    --lumo-primary-color: #0d47a1;
    --lumo-primary-color-50pct: rgba(13, 71, 161, 0.5);
    --lumo-primary-color-10pct: rgba(13, 71, 161, 0.1);
    --lumo-primary-text-color: #0d47a1;

    /* Base colors */
    --lumo-base-color: #ffffff;
    --lumo-body-text-color: #1f2937;
    --lumo-secondary-text-color: #6b7280;
    --lumo-contrast-10pct: rgba(0, 0, 0, 0.06);
    --lumo-contrast-20pct: rgba(0, 0, 0, 0.1);

    /* Header colors */
    --lumo-header-text-color: #1f2937;

    /* Custom app tokens */
    --app-bg: #f8f9fa;
    --app-surface: #ffffff;
    --app-border: #e5e7eb;
    --app-sidebar-bg: #ffffff;
    --app-sidebar-width: 260px;
    --app-navbar-height: 56px;
    --app-accent: #0d47a1;
    --app-accent-light: #d9e8f7;
    --app-accent-dark: #093170;
    --app-text-primary: #1f2937;
    --app-text-secondary: #6b7280;
    --app-text-muted: #9ca3af;
    /* Texto/ícones do menu lateral: azul-ardósia, em harmonia com o drawer azulado */
    --app-menu-text: #2e4a6b;
    --app-menu-text-muted: #7b90a8;
    --app-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --app-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --app-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --app-btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --app-btn-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.1);
    --app-grid-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --app-grid-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
    --app-radius: 12px;
    --app-radius-sm: 8px;

    /* Sizing */
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2.25rem;
    --lumo-size-s: 1.875rem;
    --lumo-size-xs: 1.5rem;

    /* Spacing */
    --lumo-space-xl: 1.75rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.75rem;
    --lumo-space-s: 0.5rem;
    --lumo-space-xs: 0.25rem;

    /* Typography */
    --lumo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lumo-font-size: 0.9375rem;
    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.6875rem;
    --lumo-line-height-m: 1.5;
    --lumo-line-height-s: 1.3;
    --lumo-line-height-xs: 1.2;

    /* Border radius */
    --lumo-border-radius-s: 6px;
    --lumo-border-radius-m: 8px;
    --lumo-border-radius-l: 12px;
}

body {
    background-color: var(--app-bg);
    font-family: var(--lumo-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== App Layout ===== */
vaadin-app-layout {
    --vaadin-app-layout-drawer-overlay: false;
}

vaadin-app-layout::part(navbar) {
    background: linear-gradient(
        to right,
        #dbe7f3 0%,
        #cddded 18%,
        #dae2ec 40%,
        #e4e6e9 65%,
        #e8e9eb 100%
    );
    border-bottom: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    height: var(--app-navbar-height);
    min-height: var(--app-navbar-height);
    /* navbar é position:fixed — margens não reservam espaço no fluxo; o gap até a
       barra de filtros é controlado pelo padding-top das views (regra abaixo) */
    margin: 0.75rem 1rem 0 1.25rem;
}

vaadin-app-layout::part(drawer) {
    border-right: none;
    border-radius: 8px 12px 12px 8px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.10), 8px 0 40px rgba(0, 0, 0, 0.06), 1px 0 6px rgba(0, 0, 0, 0.04);
    width: var(--app-sidebar-width);
    overflow: hidden;
    margin: 0.75rem 0.75rem 0.75rem 0.75rem;

    /* Clean light gradient — top-to-bottom with subtle blue tint */
    background: linear-gradient(
        175deg,
        #dbe7f3 0%,
        #cddded 18%,
        #dae2ec 40%,
        #e4e6e9 65%,
        #e8e9eb 100%
    );
}

vaadin-app-layout::part(content) {
    background: var(--app-bg);
}

/* Add left gap on slotted views so they align with the top navbar's left edge.
   padding-top: o AppLayout desloca o conteúdo apenas pela ALTURA da navbar (que é
   position:fixed) — a margem superior dela (0.75rem) encobre o topo do conteúdo.
   Compensamos a margem encoberta e somamos o gap desejado (--lumo-space-s),
   deixando 0.5rem visíveis entre a navbar e a barra de filtros — o mesmo gap
   interno das views (BaseView). */
vaadin-app-layout > :not([slot]) {
    /* esquerda/direita casam com as margens da navbar (0.75rem 1rem 0 1.25rem):
       banner de MFA e conteúdo (filtros/grid) ficam com a MESMA largura dela */
    padding-left: 1.25rem;
    padding-right: 1rem;
    padding-top: calc(0.75rem + var(--lumo-space-s));
    box-sizing: border-box;
}

/* As views roteadas são VerticalLayout com padding Lumo próprio (16px) — sem
   isto, filtros e grid ficariam recuados em relação à navbar/banner. O recuo
   lateral vem do padding da coluna acima e o vão superior do banner de MFA
   (margin-bottom) ou do padding-top da coluna quando o banner está oculto. */
.app-router-outlet > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

/* Rótulo dos itens do menu (Span no light DOM): quebra de linha em vez de
   corte — o slot do shadow aplica nowrap+ellipsis a nós de texto e não é
   estilizável de fora no Vaadin 25. */
vaadin-side-nav-item > .menu-item-rotulo {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* ===== Side Nav Item: allow label wrapping ===== */
vaadin-side-nav-item::part(link),
vaadin-side-nav-item::part(content) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    line-height: 1.3;
    align-items: center !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* ===== Grid ===== */
vaadin-grid {
    background: var(--app-surface);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-grid-shadow);
    transition: box-shadow 0.2s ease;
    overflow: hidden;
}

vaadin-grid:hover {
    box-shadow: var(--app-grid-shadow-hover);
}

/* formularios: sem padding no wrapper — componentes encostam nas bordas.
   grids (.list-view) mantem o padding original do VerticalLayout */
vaadin-app-layout > vaadin-vertical-layout[theme~="padding"]:not(.list-view) {
    /* laterais iguais as da navbar (conteudo 280..1424 num viewport 1440) e
       respiro pequeno embaixo da navbar */
    padding: 8px 16px 12px 20px !important;
}

/* barras das views: os campos de busca/filtro esticam ate a largura do
   grid (antes ficavam estreitos, sobrando vazio a direita da toolbar) */
/* campos dentro de linhas (horizontal-layout): esticam no espaco sobrado
   (!important vence o width inline tipo 400px que as views definem) */
.toolbar vaadin-horizontal-layout > :is(vaadin-text-field, vaadin-combo-box,
        vaadin-multi-select-combo-box, vaadin-date-picker, vaadin-time-picker) {
    flex-grow: 1 !important;
    min-width: 0 !important;
    width: auto !important;
}

/* campos direto num vertical-layout (filiacoes): a coluna alinha no inicio
   e width:auto encolhia para o minimo — aqui o certo e 100% */
.toolbar vaadin-vertical-layout > :is(vaadin-text-field, vaadin-combo-box,
        vaadin-multi-select-combo-box, vaadin-date-picker, vaadin-time-picker) {
    width: 100% !important;
}

.toolbar > * {
    flex-grow: 1;
    min-width: 0;
}

/* o VerticalLayout do Flow nasce com padding=true; somado ao wrapper da
   toolbar os campos ficavam 24-48px mais estreitos que o grid */
.toolbar :is(vaadin-vertical-layout, vaadin-horizontal-layout) {
    padding: 0;
}

/* e os layouts intermediarios que contem campos (filiacoes/visitas montam
   a barra dentro de h-l/v-l proprios, que encolhiam para o conteudo) */
.toolbar :is(vaadin-horizontal-layout, vaadin-vertical-layout):has(> :is(vaadin-text-field, vaadin-combo-box, vaadin-multi-select-combo-box, vaadin-date-picker, vaadin-time-picker)) {
    width: 100%;
    box-sizing: border-box;
}

/* popUps: rodape de botoes fixo (ver tambem a regra de scroll no
   vaadin-dialog-overlay.css) — o ultimo layout horizontal do conteudo e a
   barra Gravar/Cancelar, colada no fundo com fundo solido */
vaadin-dialog-content > vaadin-vertical-layout > vaadin-horizontal-layout:last-child,
vaadin-dialog vaadin-dialog-content > vaadin-vertical-layout > vaadin-horizontal-layout:last-child {
    position: sticky;
    bottom: 0;
    background: var(--lumo-base-color);
    z-index: 2;
    padding-top: 4px;
}

/* ===== Cards ===== */
/* linha de KPIs: divide a largura igualmente e so quebra em telas estreitas;
   !important anula o min-width inline do KpiCard para caberem 4-5 por linha */
.kpiRow {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    width: 100%;
    box-sizing: border-box;
}

.kpiRow > * {
    flex: 1 1 150px;
    min-width: 0 !important;
}

.app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: var(--lumo-space-l);
    box-shadow: var(--app-card-shadow);
    transition: box-shadow 0.2s ease;
}

/* Os cards das réguas (etapas e perguntas do questionário) em cor suave:
   o tom claro do acento separa a navegação do conteúdo sem gritar (31/08). */
.wiz-cartao,
.wiz-cartao:hover {
    background: var(--app-accent-light);
    box-shadow: var(--app-card-shadow);
}

.app-card:hover {
    box-shadow: var(--app-card-shadow-hover);
}

/* KPI Card */
.kpi-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.25rem 1.5rem;
    min-width: 180px;
    flex: 1;
    box-shadow: var(--app-card-shadow);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.kpi-card:hover {
    box-shadow: var(--app-card-shadow-hover);
    transform: translateY(-2px);
}

.kpi-card .kpi-label {
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    color: var(--app-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem 0;
}

.kpi-card .kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0;
    line-height: 1.2;
}

/* Rótulo do KPI dentro do carrossel. Ali o card tem largura fixa e o rótulo divide
   a linha com o ícone de 42px, sobrando 228px. Em caixa alta com letter-spacing o
   rótulo mais longo ("Boletines esperando análisis de documentos") pede 367px e
   quebra em duas linhas — e a caixa alta sozinha custa mais largura do que a
   redução de corpo: some com ela e o mesmo texto cai para 282px. Com 10px sem
   caixa alta, os 21 rótulos dos três idiomas cabem em uma linha. */
.carousel-3d .kpi-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.carousel-3d .kpi-card .kpi-label {
    font-size: 10px;
    text-transform: none;
    letter-spacing: normal;
}

/* O valor também é mais discreto no carrossel: a 1.75rem um total de contratos
   na casa do bilhão ocupa 274px dos 278px úteis e encosta na borda do card. */
.carousel-3d .kpi-card .kpi-value {
    font-size: 1.375rem;
}

.kpi-card .kpi-badge {
    font-size: var(--lumo-font-size-xxs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 0.5rem;
}

.kpi-badge-positive {
    background: var(--app-accent-light);
    color: var(--app-accent);
}

.kpi-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.kpi-badge-critical {
    background: #fee2e2;
    color: #991b1b;
}

.kpi-badge-neutral {
    background: #f3f4f6;
    color: #4b5563;
}

/* Complementos do kit de dashboards (KpiCard): faixa superior e ícone circular.
   A cor de destaque é sobrescrevível por card via --kpi-accent. */
.kpi-card {
    position: relative;
    overflow: hidden;
}

.kpi-card__stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--kpi-accent, var(--app-accent)),
        color-mix(in srgb, var(--kpi-accent, var(--app-accent)) 55%, transparent));
}

.kpi-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--kpi-accent, var(--app-accent)) 12%, transparent);
    color: var(--kpi-accent, var(--app-accent));
    flex: 0 0 auto;
}

/* Cabeçalho dos painéis (HomeBackoffice / HomeCliente) — mesmo gradiente de
   identidade do spotlight, com a altura menor de uma faixa de título. As cores
   saem dos tokens do tema: o painel não pode ter paleta própria. */
.dashboard-header {
    /* mesma rampa do .spotlight-card, entrando um passo depois: a faixa é
       estreita e abrir no navy do --app-accent-dark pesava demais à esquerda */
    background: linear-gradient(135deg, var(--app-accent) 0%, #3a6ca8 55%, #6b8fae 100%);
    color: #ffffff;
    border-radius: var(--app-radius-sm);
    padding: 15px 20px;
    box-shadow: var(--app-card-shadow);
    box-sizing: border-box;
    width: 100%;
    /* sem margin-top: o vão acima já vem de cima — do margin-bottom do banner de
       MFA quando ele aparece, e do padding-top da coluna de conteúdo quando não.
       Uma margem própria aqui somava aos dois e abria 16px contra os 8px que
       separam a navbar do banner. */
}

.dashboard-header__title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.dashboard-header__subtitle {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
}

/* Spotlight / Highlight card */
.spotlight-card {
    background: linear-gradient(135deg, var(--app-accent-dark) 0%, #0d47a1 25%, #3a6ca8 45%, #6b8fae 60%, #7f8b96 75%, #8f959c 88%, #9ca3af 100%);
    color: #ffffff;
    border-radius: var(--app-radius);
    padding: 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
    max-width: 100%;
}

.spotlight-card .spotlight-label {
    font-size: var(--lumo-font-size-xxs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.75rem 0;
}

.spotlight-card .spotlight-title {
    font-size: var(--lumo-font-size-xl);
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.spotlight-card .spotlight-subtitle {
    font-size: var(--lumo-font-size-s);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem 0;
}

/* Timeline */
.timeline-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--app-card-shadow);
}

.timeline-card .timeline-title {
    font-size: var(--lumo-font-size-m);
    font-weight: 600;
    color: var(--app-text-primary);
    margin: 0 0 1rem 0;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.timeline-item .timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-accent);
    margin-top: 6px;
    flex-shrink: 0;
}

.timeline-item .timeline-dot.secondary {
    background: var(--app-text-muted);
}

.timeline-item .timeline-text {
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    color: var(--app-text-primary);
    margin: 0;
}

.timeline-item .timeline-meta {
    font-size: var(--lumo-font-size-xxs);
    color: var(--app-text-muted);
    margin: 2px 0 0 0;
}

/* ===== Page Header ===== */
.page-header {
    margin-bottom: 0;
}

.page-header .page-subtitle {
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-text-secondary);
    margin: 0 0 0.25rem 0;
}

.page-header .page-title {
    font-size: var(--lumo-font-size-xxxl);
    font-weight: 700;
    color: var(--app-text-primary);
    /* respiro entre o titulo e o subtitulo (antes ficavam grudados) */
    margin: 0 0 0.375rem 0;
}

/* ===== Sidebar Styles ===== */
.sidebar-org-name {
    font-size: var(--lumo-font-size-l);
    font-weight: 700;
    color: var(--app-text-primary);
    margin: 0;
}

.sidebar-org-role {
    font-size: var(--lumo-font-size-xs);
    color: var(--app-text-secondary);
    margin: 0;
}

/* ===== Navbar Tabs ===== */
.navbar-tabs {
    gap: 0;
}

.navbar-tabs vaadin-tab {
    font-size: var(--lumo-font-size-m);
    font-weight: 500;
    color: var(--app-text-secondary);
    padding: 0 1rem;
}

.navbar-tabs vaadin-tab[selected] {
    color: var(--app-text-primary);
    font-weight: 600;
}

/* ===== Navbar Icons ===== */
.navbar-actions {
    gap: 0.5rem;
    align-items: center;
}

.navbar-action-btn {
    color: var(--app-text-secondary);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.navbar-action-btn:hover {
    background: var(--lumo-contrast-10pct);
}

/* ===== Buttons ===== */
vaadin-button {
    box-shadow: var(--app-btn-shadow);
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}

vaadin-button:hover {
    box-shadow: var(--app-btn-shadow-hover);
    transform: translateY(-1px);
}

vaadin-button:active {
    box-shadow: var(--app-btn-shadow-active);
    transform: translateY(0);
}

vaadin-button[theme~="primary"] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.10);
}

vaadin-button[theme~="primary"]:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.12);
}

vaadin-button[theme~="primary"]:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

vaadin-button[theme~="tertiary"],
vaadin-button[theme~="tertiary-inline"] {
    box-shadow: none;
}

vaadin-button[theme~="tertiary"]:hover,
vaadin-button[theme~="tertiary-inline"]:hover {
    box-shadow: none;
    transform: none;
}

.btn-primary {
    background: var(--app-accent) !important;
    color: white !important;
    border-radius: var(--app-radius-sm) !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.10) !important;
}

.btn-primary:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
    color: var(--app-text-primary) !important;
    font-weight: 500 !important;
    box-shadow: var(--app-btn-shadow) !important;
}

.btn-outline:hover {
    box-shadow: var(--app-btn-shadow-hover) !important;
    transform: translateY(-1px);
}

/* ===== Status bar hidden ===== */
.v-status-message {
    display: none;
}

/* ===== Loading Indicator ===== */
.v-loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
    z-index: 2147483647;
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
}

.v-loading-indicator:before {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -24px 0 0 -24px;
    border: 3px solid var(--app-accent-light);
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
    content: "";
}

.v-loading-indicator.first:before,
.v-loading-indicator.second:before,
.v-loading-indicator.third:before {
    border-top-color: var(--app-accent);
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

@keyframes fadein {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* ===== Login View ===== */
.login-view {
    width: 100%;
    min-height: 100vh;
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: min(420px, 100%);
    margin: auto;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    padding: 1.25rem 1.75rem 1.25rem;
    overflow: visible;
    box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.30),
            0 10px 28px rgba(0, 0, 0, 0.18),
            0 2px 6px rgba(0, 0, 0, 0.10),
            0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    animation: login-card-in 0.4s ease-out;
    text-align: center;
}

.login-card > .login-logo,
.login-card > .login-welcome,
.login-card > .login-version {
    align-self: center;
}

/* Flatten the inner LoginForm so it blends with the card */
.login-card vaadin-login-form,
.login-card vaadin-login-form-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: stretch !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.login-card vaadin-login-form-wrapper::part(form) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.login-card vaadin-login-form-wrapper::part(vaadin-login-native-form-wrapper),
.login-card vaadin-login-form-wrapper::part(native-form) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

@keyframes login-card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo {
    margin: 0 !important;
}

.login-welcome {
    margin: 0.25rem 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.login-card vaadin-login-form {
    width: 100%;
}

.login-card vaadin-login-form-wrapper {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.login-version {
    font-size: 0.6rem;
    color: var(--app-text-muted);
    margin-top: 0.1rem;
}

@media (max-width: 480px) {
    .login-card {
        padding: 2rem 1.25rem 1rem;
        border-radius: 8px;
    }
}

/* ===== Home (InicioView) ===== */
/* titulo e subtitulo sao spans inline: sem block eles ficam na mesma linha
   (grudados) — cada um ocupa a propria linha */
.home-view .page-header .page-title,
.home-view .page-header .page-subtitle {
    display: block;
}

/* coluna flex: o cabecalho tem altura propria e o TabSheet ocupa o resto;
   com tabs.setSizeFull() + cabecalho a soma passava da tela (scroll inutil) */
.home-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    /* o conjunto cabeca (flex), o que sobra vira scroll DENTRO do tab, nao na
       pagina — sem isto a soma cabecalho+tab passava ~9px e a janela inteira
       ganhava barra de rolagem */
    overflow: hidden;
}

.home-view .page-header {
    flex-shrink: 0;
    margin-bottom: var(--lumo-space-s);
}

.home-view vaadin-tabsheet {
    flex: 1 1 auto;
    min-height: 0;
}

/* o painel do tab (unico filho sem slot) preenche o tabsheet — a tira de abas
   fica nos 40px proprios; e o grafico (expand da view) estica com a janela */
.home-view vaadin-tabsheet > :not([slot]) {
    height: 100%;
    box-sizing: border-box;
}

/* ===== Drawer footer (logo + versao) ===== */
[slot="drawer"]:is(footer) {
    justify-content: center;
    gap: 2px;
    padding-top: var(--lumo-space-s);
    opacity: 0.9;
}

[slot="drawer"]:is(footer) img {
    max-height: 26px;
}

[slot="drawer"]:is(footer) h6 {
    font-size: var(--lumo-font-size-xxs);
    font-weight: 400;
    color: var(--app-text-muted);
    margin: 0;
}

.home-view vaadin-tabsheet > :not([slot]) {
    overflow: auto;
}

/* login: remove "App name"/descricao (Flow mantem os slots de title mesmo
   com i18n.header null; o logo da faixa fica so no [part=brand]) */
vaadin-login-overlay [slot="title"],
vaadin-login-overlay [slot="description"] {
    display: none;
}

/* popups de formulario (parceiro/visitante): o [part=content] do overlay e do
   tabsheet ficam no shadow DOM, entao usamos ::part(); form preenche o
   restante e o painel da aba repassa a altura para os grids full-height */
.parceiro-popup::part(content) {
    display: flex;
    flex-direction: column;
}

.parceiro-popup .parceiro-form {
    flex: 1 1 auto;
    min-height: 0;
}

.parceiro-popup vaadin-tabsheet {
    height: 100%;
    min-height: 0;
}

.parceiro-popup vaadin-tabsheet::part(content) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.parceiro-popup vaadin-tabsheet > * {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* ===== Recuperar Senha (mesmo visual do login) ===== */
.recuperar-senha-form {
    /* o url() e aplicado inline via Java: Vite reescreve url() de styles.css
       para /VAADIN/build (asset que nao vai no prod.bundle -> 404) */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.recuperar-senha-card {
    width: min(420px, 100%) !important;
    margin: auto;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.30),
            0 10px 28px rgba(0, 0, 0, 0.18),
            0 2px 6px rgba(0, 0, 0, 0.10),
            0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    display: flex;
    flex-direction: column;
    text-align: center;
    animation: login-card-in 0.4s ease-out;
}

.recuperar-senha-brand {
    background: #0d47a1;
    min-height: 90px;
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recuperar-senha-brand img {
    width: min(240px, 70%);
    height: auto;
}

.recuperar-senha-body {
    padding: 1.25rem 1.75rem;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.recuperar-senha-body h5 {
    margin: 0.25rem 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.recuperar-senha-version {
    font-size: 0.75rem;
    color: var(--app-text-muted, #9ca3af);
    margin-top: 0.75rem;
    text-align: center;
}

.recuperar-senha-clue {
    display: block;
    text-align: center;
}

.recuperar-senha-clue img {
    height: 36px;
}