/**
 * CronoGas App - Base styles (v0.4.2)
 * Conforme landing Figma Cronogas: paleta, tipografia, header, footer e seções.
 */

:root {
    /* Paleta Figma Cronogas */
    --bg-page: #FAFAFA;
    --cronogas-dark: #011141;
    --text-on-dark: #FFFFFF;
    --text-body: #666666;
    --cronogas-primary: #1819FF;
    --bg-section-alt: #F0F0F0;
    --header-overlay: rgba(255, 255, 255, 0.15);
    --border-color: #666666;
    /* Compatibilidade / utilitários */
    --text-primary: var(--cronogas-dark);
    --radius-header: 50px;
    --radius-cta: 24px;
    --app-stack-space-sm: 0.75rem;
    --app-stack-space-md: 1rem;
    --app-stack-space-lg: 1.35rem;
    --app-stack-space-xl: 1.75rem;
    --app-card-min-height: 132px;
}

/* Tipografia — Figma: Poppins, Raleway, Montserrat */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.714;
}

.main-content {
    flex: 1;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--bg-page);
}

/* ========== Header (barra arredondada, logo + menu + botão CONTATO) ========== */
.cronogas-header {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 160px);
    max-width: 1120px;
    height: 54px;
    background: var(--header-overlay);
    border-radius: var(--radius-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
}

.cronogas-header .logo {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-on-dark);
    text-decoration: none;
}

.cronogas-header .logo:hover {
    color: var(--text-on-dark);
}

.cronogas-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.cronogas-nav a {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2.75;
    color: var(--text-on-dark);
    text-decoration: none;
}

.cronogas-nav a:hover {
    color: var(--text-on-dark);
    opacity: 0.9;
}

.cronogas-nav .nav-home {
    font-weight: 600;
}

.cronogas-header .btn-contato {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    height: 32px;
    background: var(--cronogas-primary);
    color: var(--text-on-dark) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 2.75;
    text-transform: uppercase;
    border-radius: var(--radius-cta);
    text-decoration: none;
    border: none;
}

.cronogas-header .btn-contato:hover {
    opacity: 0.9;
    color: var(--text-on-dark);
}

/* v0.4.12.1: Navbar com cor sólida ao rolar — contraste em seções claras */
.cronogas-header.is-scrolled {
    background: rgba(1, 17, 65, 0.5);
    box-shadow: 0 2px 12px rgba(1, 17, 65, 0.15);
}

/* Landing sobre o hero: barra inicia mais clara (overlay) e escurece com scroll via .is-scrolled */
body.cg-header--over-hero .cronogas-header:not(.is-scrolled) {
    background: var(--header-overlay);
    box-shadow: none;
}

/* Páginas com header sempre sólido (ex.: calculadora pública) */
body.cg-header--solid .cronogas-header {
    background: rgba(1, 17, 65, 0.5);
    box-shadow: 0 2px 12px rgba(1, 17, 65, 0.15);
}

/* Login: manter contraste no header em fundo claro */
body.page-login .cronogas-header {
    background: rgba(1, 17, 65, 0.5);
    box-shadow: 0 2px 12px rgba(1, 17, 65, 0.15);
}

/* Menu mobile: botão e painel (comportamento .is-nav-open no header) */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark);
    cursor: pointer;
    transition: background 260ms ease, border-color 260ms ease, transform 260ms ease;
}

.nav-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.16);
}

.nav-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.nav-toggle-line {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 260ms ease, opacity 260ms ease;
}

.nav-toggle-line + .nav-toggle-line {
    margin-top: 4px;
}

/* Espaço para header fixo na landing (hero começa atrás do header) */
body.has-landing-header {
    padding-top: 0;
}

/* Alinhamento Hero, Sobre nós e Serviços: mesmo container 1120px + 24px padding */
.landing-container {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Serviços já usa .container; garantir mesmo alinhamento na landing */
.main-content #servicos .container,
.main-content #servicos.section .container {
    max-width: 1120px;
    padding-left: 24px;
    padding-right: 24px;
}

/* ========== Hero ========== */
.hero-landing {
    min-height: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(135deg, var(--cronogas-dark) 0%, #022166 100%);
    background-size: cover;
    background-position: center;
    padding: 120px 0 80px;
    position: relative;
}

.hero-landing.hero-landing-bg {
    background-size: cover;
    background-position: center;
}

.cronogas-header .logo-img {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}

.landing-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* Serviços: imagem mais estreita e alta (Figma) */
.servico-img-wrap {
    border-radius: 8px;
    overflow: hidden;
}

.servico-img-medicao {
    max-width: 400px;
    aspect-ratio: 3 / 4;
    margin-left: auto;
}

.servico-img-medicao .landing-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== Sobre nós — composição em camadas (fundo + conteúdo sobreposto) ========== */
.section-sobre-nos {
    position: relative;
    padding: 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.section-sobre-nos::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: max(24px, calc((100vw - 1120px) / 2 + 24px));
    background-color: #011141;
    z-index: 0;
}

.section-sobre-nos .sobre-nos-stack {
    --sobre-media-shift: 35%;
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: 56px 24px 72px;
    min-height: 520px;
    z-index: 1;
}

.sobre-nos-bg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sobre-nos-bg-blue {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: calc(33.333% - 16px);
    background-color: var(--cronogas-dark);
}

.sobre-nos-fg-layer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
    align-items: center;
    overflow: visible;
}

.sobre-nos-media {
    position: relative;
    z-index: 2;
    transform: translateX(var(--sobre-media-shift));
    padding: 56px 40px 56px 32px;
}

.sobre-nos-img-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.sobre-nos-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.sobre-nos-panel {
    position: relative;
    z-index: 1;
    background-color: #FFFFFF;
    display: flex;
    justify-content: flex-end;
    padding-left: var(--sobre-media-shift);
}

.sobre-nos-text-inner {
    max-width: 560px;
    padding: 72px 72px 72px 56px;
}

.section-label-sobre {
    color: var(--cronogas-primary) !important;
    margin-bottom: 0.5rem;
}

.sobre-nos-headline {
    font-family: 'Poppins', sans-serif;
    font-weight: 275;
    font-size: 48px;
    line-height: 0.83;
    color: var(--cronogas-dark);
    margin-bottom: 1rem;
}

.sobre-nos-panel .section-body {
    color: var(--text-body);
    margin-bottom: 1rem;
}

.sobre-nos-panel .section-body:last-of-type {
    margin-bottom: 0;
}

.hero-landing .hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 275;
    font-size: 48px;
    line-height: 1;
    color: var(--text-on-dark);
    margin-bottom: 1rem;
    max-width: 425px;
}

.hero-landing .hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.2;
    color: var(--text-on-dark);
    max-width: 600px;
}

/* ========== Seções — labels e títulos ========== */
.section-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.714;
    color: var(--cronogas-primary);
    margin-bottom: 0.5rem;
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 275;
    font-size: 48px;
    line-height: 0.83;
    color: var(--cronogas-dark);
}

/* Serviços: "O que fazemos" menor conforme Figma */
.section-title-servicos {
    font-size: 32px;
}

.section-title-on-dark {
    color: var(--text-on-dark);
}

.section-body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.714;
    color: var(--text-body);
}

/* Bloco fundo azul escuro (#011141) */
.block-dark {
    background-color: var(--cronogas-dark);
    color: var(--text-on-dark);
}

.block-dark .section-label,
.block-dark .section-title,
.block-dark .section-body {
    color: var(--text-on-dark);
}

.block-dark .section-body {
    color: rgba(255, 255, 255, 0.9);
}

.block-dark .section-title {
    color: var(--text-on-dark);
}

/* Seção Contato: card centralizado (estilo cronogas.com.br) */
.section-contato {
    padding: 80px 24px 48px;
}

.section-contato .contato-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-contato .contato-card {
    background: #fff;
    border-radius: 12px;
    padding: 2.5rem 3rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.section-contato .contato-card-title {
    color: var(--cronogas-dark);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-contato .contato-card-body {
    color: var(--text-body);
}

.section-contato .contato-card-link {
    color: var(--cronogas-primary);
    text-decoration: none;
}

.section-contato .contato-card-link:hover {
    color: #619AFF;
    text-decoration: underline;
}

/* Seção fundo cinza (#F0F0F0) */
.section-alt {
    background-color: var(--bg-section-alt);
}

/* Bloco CTA arredondado (ex.: Contato) */
.block-cta-rounded {
    background-color: var(--cronogas-dark);
    border-radius: var(--radius-cta);
    padding: 48px 59px;
    color: var(--text-on-dark);
}

/* Botão primário (ACESSAR A CALCULADORA) */
.btn-cronogas-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    min-height: 48px;
    background: var(--cronogas-primary);
    color: var(--text-on-dark) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 2.75;
    text-transform: uppercase;
    border-radius: var(--radius-cta);
    text-decoration: none;
    border: none;
}

.btn-cronogas-primary:hover {
    opacity: 0.9;
    color: var(--text-on-dark);
}

/* ========== Footer ========== */
.cronogas-footer {
    background-color: var(--cronogas-dark);
    color: var(--text-on-dark);
    padding: 24px 80px 32px;
}

.cronogas-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 48px;
    max-width: 1120px;
    margin: 0 auto 32px;
}

.cronogas-footer .footer-col-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.cronogas-footer .footer-col-links {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.714;
}

.cronogas-footer .footer-col-links a {
    color: var(--cronogas-primary);
    text-decoration: none;
}

.cronogas-footer .footer-col-links a:hover {
    color: #619AFF;
    text-decoration: underline;
}

.cronogas-footer .footer-interested {
    text-align: right;
}

.cronogas-footer .footer-interested .title {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.cronogas-footer .footer-interested .link {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.714;
}

.cronogas-footer .footer-interested a {
    color: var(--text-on-dark);
    text-decoration: none;
}

.cronogas-footer .footer-interested a:hover {
    text-decoration: underline;
}

.cronogas-footer .footer-divider {
    height: 1px;
    background: var(--text-on-dark);
    max-width: 1120px;
    margin: 0 auto 24px;
}

.cronogas-footer .footer-copyright {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.36;
    color: var(--text-on-dark);
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
}

/* Utilitários Bulma sobrescritos para landing */
.main-content .title {
    color: var(--text-primary);
}

.main-content .subtitle {
    color: var(--text-body);
}

.main-content .content {
    color: var(--text-body);
}

.main-content .content strong {
    color: var(--text-primary);
}

.main-content .has-text-grey {
    color: var(--text-body) !important;
}

.main-content a:not(.button):not(.btn-cronogas-primary):not(.btn-contato) {
    color: var(--cronogas-primary);
    text-decoration: none;
}

/* Quadro suave para destaque do texto "Valor gerado" (v0.4.12.2) */
.valor-gerado-box {
    background: rgba(1, 17, 65, 0.06);
    border: 1px solid rgba(1, 17, 65, 0.12);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.valor-gerado-box .section-body {
    margin: 0;
}

/* Seções da landing ocultas até fase dedicada (ex.: Resultados, link tarifas) */
.landing-hidden {
    display: none !important;
}

/* Links da navbar/footer para seções ocultas (Resultados, Contato) — ocultos até fase dedicada */
.nav-landing-hidden {
    display: none !important;
}

/* Rodapé: Redes Sociais e "Ficou interessado?" ocultos até fase dedicada */
.footer-landing-hidden {
    display: none !important;
}

/* Responsividade básica */
@media (max-width: 1023px) {
    .cronogas-header {
        width: calc(100% - 32px);
        top: 16px;
    }

    .cronogas-nav {
        gap: 20px;
    }

    .hero-landing {
        min-height: 480px;
        padding: 100px 0 48px;
    }

    .hero-landing .hero-title {
        font-size: 32px;
    }

    .hero-landing .hero-subtitle {
        font-size: 18px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-contato {
        padding: 48px 16px 32px;
    }

    .section-contato .contato-card {
        padding: 2rem 1.5rem;
    }

    .cronogas-footer {
        padding: 24px 24px 24px;
    }

    .section-sobre-nos .sobre-nos-stack {
        --sobre-media-shift: 35%;
        padding-top: 40px;
        padding-bottom: 56px;
        min-height: 0;
    }

    .sobre-nos-bg-blue {
        width: clamp(240px, 32vw, 340px);
    }

    .sobre-nos-media {
        padding: 40px 24px 40px 24px;
    }

    .sobre-nos-text-inner {
        padding: 48px 40px 48px 24px;
    }

    .sobre-nos-headline {
        font-size: 32px;
    }
}

/* Header: menu hamburguer e painel (deve vir após o bloco 1023px para não ser sobrescrito) */
@media (max-width: 820px) {
    .cronogas-header {
        width: calc(100% - 24px);
        top: max(12px, env(safe-area-inset-top));
        height: 50px;
        padding: 0 12px 0 16px;
        border-radius: 16px;
    }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
    }

    .cronogas-nav {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem;
        border-radius: 16px;
        background: rgba(1, 17, 65, 0.98);
        box-shadow: 0 12px 30px rgba(1, 17, 65, 0.32);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 260ms ease, transform 260ms ease, visibility 260ms ease;
        max-height: calc(100vh - 90px - env(safe-area-inset-top));
        overflow-y: auto;
        flex-wrap: nowrap;
    }

    .cronogas-header.is-nav-open .cronogas-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .cronogas-header.is-nav-open .nav-toggle-line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .cronogas-header.is-nav-open .nav-toggle-line:nth-child(2) {
        opacity: 0;
    }

    .cronogas-header.is-nav-open .nav-toggle-line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .cronogas-nav a {
        display: block;
        width: 100%;
        font-size: 14px;
        line-height: 1.3;
        padding: 0.72rem 0.78rem;
        border-radius: 10px;
    }

    .cronogas-nav a:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .cronogas-header .btn-contato {
        margin-top: 0.35rem;
        width: 100%;
        min-height: 44px;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    .section-sobre-nos .sobre-nos-stack {
        --sobre-media-shift: 0px;
        padding: 32px 16px 40px;
        min-height: 0;
    }

    .sobre-nos-bg-layer {
        display: none;
    }

    .sobre-nos-fg-layer {
        grid-template-columns: 1fr;
    }

    .sobre-nos-media {
        background-color: var(--cronogas-dark);
        transform: none;
        padding: 20px 16px;
    }

    .sobre-nos-panel {
        padding-left: 0;
    }

    .sobre-nos-text-inner {
        max-width: none;
        padding: 40px 24px;
    }

    .sobre-nos-headline {
        font-size: 28px;
    }
}

/* ========== Login (v0.4.4) ========== */
.page-login .main-content {
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.login-section {
    width: 100%;
    padding: 2rem 1rem;
}
.login-box {
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(1, 17, 65, 0.08);
}
.login-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--cronogas-dark);
    margin-bottom: 0.25rem;
}
.login-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: var(--text-body);
    margin-bottom: 1.5rem;
}
.login-form .field {
    margin-bottom: 1.25rem;
}
.login-form .label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: var(--cronogas-dark);
}
.login-form .input {
    border-radius: 8px;
    border-color: var(--border-color);
}
.btn-cronogas-login {
    width: 100%;
    background: var(--cronogas-primary) !important;
    color: var(--text-on-dark) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-cta);
    padding: 0.6rem 1.5rem;
}
.btn-cronogas-login:hover {
    opacity: 0.9;
    color: var(--text-on-dark);
}
.login-back {
    margin-top: 1.5rem;
    text-align: center;
}
.login-back a {
    color: var(--cronogas-primary);
    font-size: 14px;
}

/* ========== App layout multi-unidade (v0.4.3) ========== */
.app-body {
    padding-top: 0;
    background: #f3f6fb;
}
.app-icons-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.app-icons-defs symbol path,
.app-icons-defs symbol rect,
.app-icons-defs symbol circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.app-layout {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
}
.app-sidebar {
    width: 300px;
    min-height: 100vh;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, #05184d 0%, #03103a 100%);
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 0.95rem 1.2rem;
    box-shadow: 14px 0 36px rgba(2, 8, 26, 0.28);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.app-sidebar-header {
    padding: 0.2rem 0.2rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.app-logo {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 0.45rem 0.4rem;
    border-radius: 14px;
    min-height: 64px;
}
.app-logo:hover {
    opacity: 0.96;
}
.app-logo-img {
    width: clamp(132px, 70%, 178px);
    max-height: 44px;
    height: auto;
    display: block;
    object-fit: contain;
}
.app-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.app-sidebar-section {
    position: relative;
}
.app-sidebar-section + .app-sidebar-section {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.app-nav-section-label {
    margin: 0.1rem 0 0.55rem;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    font-weight: 600;
}
.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: 12px;
    padding: 0.54rem 0.65rem;
    line-height: 1.35;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.app-nav-link-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    opacity: 0.92;
    transition: opacity 0.18s ease, filter 0.18s ease;
}
.app-nav-link-icon svg {
    width: 18px;
    height: 18px;
}
.app-nav-link-icon use,
.app-sidebar-section-icon use {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.app-nav-link-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-nav-link:hover {
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(1px);
}
.app-nav-link:hover .app-nav-link-icon {
    color: #fff;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(196, 218, 255, 0.45));
}
.app-nav-link.is-active {
    background: linear-gradient(90deg, rgba(94, 138, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 100%);
    color: #fff;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(190, 216, 255, 0.35), 0 8px 16px rgba(5, 18, 56, 0.34);
}
.app-nav-link.is-active .app-nav-link-icon {
    color: #fff;
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(196, 218, 255, 0.5));
}
.app-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.app-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0.52rem 0.65rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease;
}
.app-nav-group-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}
.app-nav-group-toggle:hover .app-nav-group-title {
    color: rgba(255, 255, 255, 0.97);
}
.app-nav-group-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.app-nav-group-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
}
.app-nav-group-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-right: 0.1rem;
    transition: transform 0.2s ease, color 0.2s ease;
}
.app-nav-group-toggle[aria-expanded='true'] .app-nav-group-caret {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.96);
}
.app-nav-group-toggle[aria-expanded='true'] {
    background: rgba(255, 255, 255, 0.1);
}
.app-nav-submenu {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    margin-left: 0.55rem;
    padding-left: 0.7rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    transition: grid-template-rows 0.23s ease, opacity 0.2s ease, margin-top 0.2s ease;
}
.app-nav-submenu-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding-top: 0.22rem;
}
.app-nav-group-toggle[aria-expanded='false'] + .app-nav-submenu {
    grid-template-rows: 0fr;
    opacity: 0.4;
    margin-top: -0.1rem;
}
.app-nav-group-toggle[aria-expanded='false'] + .app-nav-submenu .app-nav-submenu-inner {
    visibility: hidden;
}
.app-nav-group-toggle[aria-expanded='true'] + .app-nav-submenu .app-nav-submenu-inner {
    visibility: visible;
}
.app-nav-sublink {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
}
.app-nav-sublink .app-nav-link-icon {
    width: 16px;
    height: 16px;
}
.app-nav-sublink .app-nav-link-icon svg {
    width: 16px;
    height: 16px;
}
.app-unit-switcher {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.app-sidebar-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.app-sidebar-section-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
}
.app-sidebar-section-icon svg {
    width: 16px;
    height: 16px;
}
.app-unit-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
}
.app-unit-link {
    display: inline-flex;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.app-unit-link:hover {
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.15);
}
.app-unit-link.is-active {
    font-weight: 600;
    background: rgba(153, 191, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(178, 213, 255, 0.45);
}
.app-unit-sep {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 4px;
    font-size: 12px;
}
.app-sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.app-user-menu {
    position: relative;
}
.app-user-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 0.54rem 0.62rem;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
.app-user-trigger:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(201, 221, 255, 0.35);
}
.app-user-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.app-user-more {
    font-size: 0.95rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    margin-left: auto;
}
.app-user-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.5rem);
    background: #0a1c53;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 16px 28px rgba(2, 8, 26, 0.45);
    padding: 0.4rem;
    z-index: 120;
    opacity: 0;
    transform: translateY(6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.app-user-menu.is-open .app-user-dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}
.app-user-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--text-on-dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    padding: 0.45rem 0.55rem;
}
.app-user-dropdown-item:hover {
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.13);
}
.app-logout-button {
    width: 100%;
    border-color: transparent;
    color: var(--text-on-dark);
    font-family: 'Poppins', sans-serif;
    border-radius: 8px;
}
.app-logout-button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-on-dark);
}
.app-main {
    flex: 1;
    min-width: 0;
    padding: 1.35rem 1.15rem 1.35rem;
    background:
        radial-gradient(circle at 6% 0%, rgba(93, 140, 255, 0.1) 0%, rgba(93, 140, 255, 0) 45%),
        #f3f6fb;
}
/* Seções do app: respiro no topo da primeira dobra */
.app-main .section {
    padding-top: 0.35rem;
    padding-bottom: 1.15rem;
}
.app-main .container {
    max-width: 1200px !important;
}
.app-main .app-programacao-section .container {
    max-width: 920px !important;
}
.app-main .title {
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.45rem;
}
.app-main .subtitle {
    color: #5f6b88;
    max-width: 72ch;
    line-height: 1.55;
}
.app-main .box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(9, 28, 82, 0.08);
    box-shadow: 0 8px 22px rgba(9, 28, 82, 0.07);
}
.app-main .box + .box {
    margin-top: 1rem;
}
.app-main .box .subtitle.is-5 {
    font-size: 1rem;
    font-weight: 600;
    color: #11265c;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(17, 38, 92, 0.08);
}
.app-main .table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5a6a90;
    border-bottom-color: rgba(17, 38, 92, 0.14);
}
.app-main .table td {
    border-color: rgba(17, 38, 92, 0.08);
    color: #1f2b4d;
}
.app-main .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: rgba(17, 38, 92, 0.03);
}
.app-main .button.is-link {
    background: linear-gradient(180deg, #2e5cf4 0%, #1b40ca 100%);
    border: 1px solid rgba(8, 31, 117, 0.2);
    border-radius: 10px;
    box-shadow: 0 7px 14px rgba(27, 64, 202, 0.22);
}
.app-main .button.is-link:hover {
    filter: brightness(1.06);
}
.app-main .button.is-light,
.app-main .button.is-info.is-light,
.app-main .button.is-success.is-light {
    border-radius: 10px;
}
.app-main .notification {
    border-radius: 12px;
}
.app-main .app-page-stack {
    display: flex;
    flex-direction: column;
    gap: var(--app-stack-space-lg);
}
.app-main .app-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--app-stack-space-sm);
}
.app-main .app-page-header .title,
.app-main .app-page-header .subtitle {
    margin: 0;
}
.app-main .app-page-filters {
    margin: 0;
}
.app-main .app-page-block {
    margin: 0;
}
.app-main .app-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--app-stack-space-md);
    margin: 0;
}
.app-main .app-dashboard-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--app-stack-space-md);
}
.app-main .app-dashboard-card {
    border-radius: 14px;
    border: 1px solid rgba(17, 38, 92, 0.09);
    box-shadow: 0 6px 18px rgba(9, 28, 82, 0.08);
    padding: 1rem 1.05rem;
    min-height: var(--app-card-min-height);
    display: flex;
    flex-direction: column;
}
.app-main .app-dashboard-card .card-label {
    color: #6a7898;
    letter-spacing: 0.08em;
    font-weight: 600;
    min-height: 2.1em;
}
.app-main .app-dashboard-card .card-value {
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}
.app-main .app-dashboard-card .card-subtitle {
    margin-top: auto;
    padding-top: 0.35rem;
    min-height: 1.3rem;
    color: #64739a;
}
.app-main .app-dashboard-card .card-subtitle.is-empty {
    visibility: hidden;
}
.app-main .app-dashboard-chart-wrap {
    border-radius: 16px;
    border: 1px solid rgba(17, 38, 92, 0.08);
    box-shadow: 0 8px 22px rgba(9, 28, 82, 0.07);
    padding: 1.25rem;
}
.app-main .consolidacao-filters {
    border-radius: 14px;
}
.app-main .app-previsao-historico-filters {
    padding: 0.95rem 1rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(17, 38, 92, 0.08);
    box-shadow: 0 6px 18px rgba(9, 28, 82, 0.06);
}
/* Programação de Gás — layout e componentes da página */
.app-main .app-programacao-filters.app-page-filters {
    padding: 1rem 1.1rem;
}
.app-main .app-programacao-filters .label {
    color: #5f6b88;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}
.app-main .app-programacao-label-spacer {
    visibility: hidden;
    display: block;
    margin-bottom: 0.35rem;
    min-height: 1.25em;
}
.app-main .app-programacao-filters-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.app-main .app-programacao-field--action .control {
    padding-top: 0.1rem;
}
@media screen and (min-width: 769px) {
    .app-main .app-programacao-filters-grid {
        display: grid;
        grid-template-columns: minmax(10rem, 1fr) minmax(11rem, 1fr) auto;
        align-items: end;
        gap: 1rem 1.25rem;
    }
    .app-main .app-programacao-field--action .control .button {
        white-space: nowrap;
    }
}
.app-main .app-programacao-inline-notice {
    border-radius: 12px;
}
.app-main .app-programacao-volumes-box .subtitle.is-5 {
    margin-bottom: 0.85rem;
}
.app-main .app-programacao-table-wrap {
    overflow-x: auto;
    margin-top: 0.25rem;
    border-radius: 12px;
    border: 1px solid rgba(17, 38, 92, 0.08);
    background: #fff;
}
.app-main .app-programacao-table {
    width: 100%;
    margin: 0;
    vertical-align: middle;
}
.app-main .app-programacao-table th,
.app-main .app-programacao-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    vertical-align: middle;
}
.app-main .app-programacao-table th.has-text-right {
    text-align: right;
}
.app-main .app-programacao-table td.has-text-right {
    text-align: right;
}
.app-main .app-programacao-table tbody td {
    min-height: 3rem;
}
.app-main .app-programacao-table input[type="number"].input {
    width: 100%;
    max-width: 11rem;
    min-height: 2.5rem;
    border-radius: 10px;
}
.app-main .app-programacao-table .programacao-sug-cell {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.9rem;
    color: #4a5778;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.app-main .app-programacao-volumes-footer {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(17, 38, 92, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media screen and (min-width: 769px) {
    .app-main .app-programacao-volumes-footer {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    .app-main .app-programacao-feedback {
        flex: 1;
        min-width: 12rem;
        max-width: 28rem;
    }
}
.app-main .app-programacao-msg {
    border-radius: 12px;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}
.app-main .app-programacao-email-help {
    color: #5f6b88;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-top: 0.35rem;
    margin-bottom: 0;
}
.app-main .app-programacao-email-box {
    background: #e8ecf5;
    border: 1px dashed rgba(17, 38, 92, 0.28);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 1rem 0 0;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #1f2b4d;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    cursor: default;
    outline: none;
}
.app-main .app-programacao-email-box:focus-visible {
    outline: 2px solid #2e5cf4;
    outline-offset: 2px;
}
.app-main .app-programacao-email-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}
.app-main .app-programacao-historico .subtitle.is-5 {
    margin-bottom: 0.35rem;
}
.app-main .app-programacao-historico-period {
    font-size: 0.8125rem;
    color: #64739a;
    margin: 0 0 0.75rem;
}
.app-main .app-programacao-historico-loading {
    border-radius: 12px;
}
.app-main .app-programacao-historico-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(17, 38, 92, 0.08);
    background: #fff;
    margin-top: 0.25rem;
}
.app-main .app-programacao-historico-table {
    font-size: 0.9rem;
    margin-bottom: 0 !important;
}
.app-main .app-programacao-historico-table th,
.app-main .app-programacao-historico-table td {
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
}
.app-main .app-programacao-page-loading {
    border-radius: 12px;
    margin: 0;
}
.app-main .app-programacao-section .button.is-light:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.app-main .app-programacao-section .button:focus-visible {
    outline: 2px solid #2e5cf4;
    outline-offset: 2px;
}
.app-main .app-programacao-section .input:focus-visible,
.app-main .app-programacao-section .select select:focus-visible {
    outline: 2px solid #2e5cf4;
    outline-offset: 1px;
}
.app-main .app-previsao-historico-filters {
    display: flex;
    align-items: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.app-main .app-previsao-historico-filters label {
    font-size: 0.875rem;
    color: #5f6b88;
}
.app-main .app-previsao-historico-filters input[type="date"] {
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(17, 38, 92, 0.18);
    font-family: inherit;
}
.app-main .app-previsao-historico-table-wrap {
    overflow-x: auto;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(17, 38, 92, 0.08);
    box-shadow: 0 8px 20px rgba(9, 28, 82, 0.07);
}
.app-main .app-previsao-historico-table {
    width: 100%;
    border-collapse: collapse;
}
.app-main .app-previsao-historico-table th,
.app-main .app-previsao-historico-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(17, 38, 92, 0.1);
}
.app-main .app-previsao-historico-table th {
    background: rgba(17, 38, 92, 0.04);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cronogas-dark, #011141);
}
.app-main .app-previsao-historico-table tr:last-child td {
    border-bottom: none;
}
.app-main .app-previsao-historico-table .text-muted {
    color: #8c97b4;
}
.app-dashboard-period,
.period-nav-filters {
    margin-top: 0;
}
.app-dashboard-period {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(17, 38, 92, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(9, 28, 82, 0.06);
}
.app-dashboard-period label {
    font-size: 0.875rem;
    color: #5f6b88;
}
.app-dashboard-period select {
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(17, 38, 92, 0.18);
    font-family: inherit;
}
.app-dashboard-section .title {
    font-family: 'Poppins', sans-serif;
    color: var(--cronogas-dark);
}
.app-dashboard-section .subtitle {
    font-family: 'Poppins', sans-serif;
    color: var(--text-body);
}

/* Filtro com setas (Programação/Penalidades, Consumo/Previsão).
   Bulma `.field` põe margem e um flex aninhado extra; `display: contents` no field
   faz `.control` filho direto de `.period-nav-fields`, alinhando um único eixo.
   datetime-local no Chrome/Edge precisa de max-height + ajuste webkit para não
   “crescer” fora da rail; sombra forte do `.button.is-link` fica só no app — aqui reduzida. */
.period-nav-filters {
    --period-nav-control-height: 2.5rem;
    --period-nav-border: rgba(17, 38, 92, 0.18);
    --period-nav-border-hover: rgba(8, 31, 117, 0.32);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(17, 38, 92, 0.08);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(9, 28, 82, 0.06);
}
.period-nav-filters .period-nav-arrow,
.period-nav-filters .button,
.period-nav-filters .input {
    box-sizing: border-box;
}
.period-nav-status {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
.period-nav-loading-text {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1b40ca;
    line-height: 1.25;
    min-height: 1.25rem;
    vertical-align: middle;
}
.period-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--period-nav-control-height);
    min-width: var(--period-nav-control-height);
    height: var(--period-nav-control-height);
    min-height: var(--period-nav-control-height);
    max-height: var(--period-nav-control-height);
    padding: 0;
    border: 1px solid var(--period-nav-border);
    border-radius: 10px;
    background: #fff;
    color: #1b40ca;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.period-nav-arrow:hover {
    background: rgba(46, 92, 244, 0.12);
    color: #153c9e;
    border-color: var(--period-nav-border-hover);
}
.period-nav-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    flex: 0 1 auto;
    max-width: 100%;
    justify-content: flex-end;
}
/* Remove o “degrau” entre wrap Bulma e a rail real */
.period-nav-filters .field.period-nav-field {
    display: contents;
    margin: 0;
}
.period-nav-control {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.period-nav-field .control {
    margin: 0;
}
.period-nav-field .input {
    width: auto;
    min-width: 12rem;
    height: var(--period-nav-control-height) !important;
    min-height: var(--period-nav-control-height) !important;
    max-height: var(--period-nav-control-height) !important;
    border-radius: 10px;
    border: 1px solid var(--period-nav-border);
    padding: 0 0.5rem 0 0.6rem;
    font-size: 0.875rem;
    line-height: calc(var(--period-nav-control-height) - 2px);
}
/* Chrome / Edge: miolo do datetime-local costuma empurrar a caixa */
.period-nav-filters input[type="datetime-local"]::-webkit-datetime-edit,
.period-nav-filters input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
    margin: 0;
}
.period-nav-filters input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
    opacity: 0.72;
    cursor: pointer;
}
.period-nav-filters input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
    opacity: 0.72;
    cursor: pointer;
}
.period-nav-input-shortcut {
    flex-shrink: 0;
}
.app-main .period-nav-filters .button.is-link {
    white-space: nowrap;
    min-width: 7.5rem;
    height: var(--period-nav-control-height) !important;
    min-height: var(--period-nav-control-height) !important;
    max-height: var(--period-nav-control-height) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 1.15em !important;
    box-shadow: 0 1px 3px rgba(27, 64, 202, 0.22);
}
.app-main .period-nav-filters .button.is-link:hover {
    box-shadow: 0 2px 5px rgba(27, 64, 202, 0.28);
}

.app-body a:focus-visible,
.app-body button:focus-visible,
.app-body input:focus-visible,
.app-body select:focus-visible,
.app-body textarea:focus-visible {
    outline: 2px solid #8cb4ff;
    outline-offset: 2px;
}

@media (max-width: 1023px) {
    .app-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .app-sidebar {
        width: 100%;
        min-height: auto;
        height: auto;
        position: static;
        top: auto;
        overflow-y: visible;
        padding: 0.9rem;
        gap: 0.8rem;
        box-shadow: 0 8px 20px rgba(2, 8, 26, 0.25);
    }

    .app-logo {
        min-height: 58px;
    }

    .app-logo-img {
        width: clamp(124px, 45vw, 176px);
        max-height: 40px;
    }

    .app-user-dropdown {
        position: static;
        margin-top: 0.5rem;
        box-shadow: none;
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
        display: none;
        border-color: rgba(255, 255, 255, 0.22);
    }

    .app-user-menu.is-open .app-user-dropdown {
        display: block;
    }

    .app-main {
        padding: 1rem 0.65rem 1.1rem;
    }

    .app-main .title {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }

    .app-main .app-cards-grid,
    .app-main .app-dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .period-nav-fields {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .app-nav-link,
    .app-nav-group-toggle {
        padding: 0.5rem 0.58rem;
    }

    .app-sidebar-section + .app-sidebar-section {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .app-main .box {
        border-radius: 14px;
    }

    .app-main .table th,
    .app-main .table td {
        padding: 0.5rem 0.55rem;
    }

    .app-main .app-page-stack {
        gap: var(--app-stack-space-md);
    }

    .app-main .app-cards-grid,
    .app-main .app-dashboard-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-main .app-dashboard-card {
        min-height: 0;
    }
}