:root { --brand-blue: #0F4C81; --brand-green: #2EAF4A; --brand-orange: #F7991D; --brand-ink: #333333; --brand-bg: #F5F7FA; --esh-bg: #F5F7FA; --esh-surface: #ffffff; --esh-ink: #333333; --esh-muted: #667788; --esh-primary: #0F4C81; --esh-accent: #2EAF4A; --esh-warm: #F7991D; --esh-border: #dde3ea; } html, body { min-height: 100%; height: 100%; margin: 0; font-family: "Poppins", system-ui, sans-serif; color: var(--esh-ink); background: var(--esh-bg); } /* Preferência persistida no (JS) + shell Blazor (.app-shell--dark) */ html.mud-theme-dark, html[data-theme="dark"], html.mud-theme-dark body, body.mud-theme-dark { --esh-bg: #0c1a28; --esh-surface: #132536; --esh-ink: #e8eef5; --esh-muted: #9ab0c3; --esh-primary: #5b9fd4; --esh-border: #24384c; --brand-bg: #0c1a28; color: var(--esh-ink); background: var(--esh-bg) !important; } /* Shell: usa a palette do MudBlazor (fonte da verdade do tema) */ .app-shell { background-color: var(--mud-palette-background, var(--esh-bg)); min-height: 100vh; } .app-shell .mud-main-content, .app-main { background-color: var(--mud-palette-background, var(--esh-bg)) !important; color: var(--mud-palette-text-primary, var(--esh-ink)); min-height: calc(100vh - 64px); display: flex !important; flex-direction: column; } .app-main-body { flex: 1 0 auto; width: 100%; } /* Fallback explícito quando o toggle Blazor está em dark (não depende só do JS) */ .app-shell--dark { --esh-bg: #0c1a28; --esh-surface: #132536; --esh-ink: #e8eef5; --esh-muted: #9ab0c3; --esh-primary: #5b9fd4; --esh-border: #24384c; background-color: #0c1a28 !important; } .app-shell--dark .mud-main-content, .app-shell--dark .app-main { background-color: #0c1a28 !important; color: #e8eef5 !important; } .app-shell--dark .mud-typography, .app-shell--dark .mud-typography-body1, .app-shell--dark .mud-typography-body2, .app-shell--dark .mud-typography-h4, .app-shell--dark .mud-typography-h5, .app-shell--dark .mud-typography-h6, .app-shell--dark .mud-typography-subtitle1, .app-shell--dark .mud-typography-subtitle2, .app-shell--dark .mud-typography-caption { color: inherit; } .app-shell--dark .mud-text-secondary, .app-shell--dark .mud-typography-body2.mud-text-secondary { color: #9ab0c3 !important; } .app-shell--dark .app-site-footer { background: #132536 !important; border-top-color: #24384c !important; } .app-shell--dark .app-site-footer-brand { color: #5b9fd4 !important; } .app-shell--dark .app-site-footer-copy { color: #9ab0c3 !important; } .app-shell--dark .mud-paper { background-color: var(--mud-palette-surface, #132536) !important; color: var(--mud-palette-text-primary, #e8eef5) !important; border-color: var(--mud-palette-lines-default, #24384c) !important; } .app-shell--dark .mud-button-outlined { color: var(--mud-palette-primary, #5b9fd4) !important; border-color: var(--mud-palette-primary, #5b9fd4) !important; } .brand-mark { font-family: "Poppins", system-ui, sans-serif !important; font-weight: 700; letter-spacing: -0.02em; color: var(--esh-primary); } .brand-tagline { font-family: "Poppins", system-ui, sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--esh-muted); } .brand-logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; } .brand-logo img, .brand-logo svg { display: block; height: 40px; width: auto; } .brand-logo-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-logo-text strong { font-weight: 700; font-size: 1.05rem; color: var(--esh-primary); } .hero-brand { background: radial-gradient(circle at 12% 20%, rgba(46, 175, 74, 0.14), transparent 40%), radial-gradient(circle at 88% 10%, rgba(247, 153, 29, 0.16), transparent 36%), linear-gradient(160deg, var(--esh-surface) 0%, var(--esh-bg) 55%, color-mix(in srgb, var(--esh-primary) 12%, var(--esh-bg)) 100%); border: 1px solid var(--esh-border); } .app-shell--dark .brand-mark, .app-shell--dark .brand-logo-text strong, html.mud-theme-dark .brand-mark, html.mud-theme-dark .brand-logo-text strong { color: #ffffff; } .app-site-footer { margin-top: auto; flex-shrink: 0; width: 100%; padding: 1rem 1.25rem; border-top: 1px solid var(--esh-border); background: var(--mud-palette-surface, var(--esh-surface)); text-align: center; } .app-site-footer p { margin: 0; line-height: 1.45; } .app-site-footer-brand { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--esh-primary); } .app-site-footer-copy { margin-top: 0.25rem; font-size: 0.75rem; color: var(--esh-muted); } .form-control { display: block; width: 100%; padding: 0.65rem 0.75rem; font-size: 1rem; font-family: "Poppins", system-ui, sans-serif; border: 1px solid var(--esh-border); border-radius: 0.5rem; background: var(--esh-surface); color: var(--esh-ink); box-sizing: border-box; } .form-control:focus { outline: 2px solid color-mix(in srgb, var(--esh-primary) 35%, transparent); border-color: var(--esh-primary); } .text-danger { color: #c62828; font-size: 0.85rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .mt-4 { margin-top: 1rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .d-inline-block { display: inline-block; } .account-layout { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--brand-green) 18%, transparent), transparent), radial-gradient(ellipse 70% 40% at 100% 0%, color-mix(in srgb, var(--brand-blue) 22%, transparent), transparent), var(--esh-bg); } .account-layout-header { padding: 1.25rem 1.5rem; } .account-layout-main { flex: 1 0 auto; padding: 0 1rem 2rem; } .account-layout .app-site-footer { margin-top: auto; } /* ===== Page shell ===== */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .page-header-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .page-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .list-surface { border: 1px solid var(--esh-border); border-radius: 14px; background: var(--mud-palette-surface, var(--esh-surface)); overflow: hidden; } .list-logo-avatar { background: color-mix(in srgb, var(--esh-bg) 80%, transparent) !important; } .app-bar-brand { color: inherit !important; text-decoration: none !important; } .app-bar-title { color: #fff !important; font-size: 1rem !important; } .app-drawer { border-right: 1px solid var(--esh-border); } .app-drawer-header { padding: 1rem 1.25rem !important; border-bottom: 1px solid var(--esh-border); } .app-drawer-logo { max-width: 100%; height: auto; display: block; } .app-nav-menu { padding: 0.5rem 0.35rem 1rem; } /* ===== Auth ===== */ .auth-wrap { max-width: 440px; margin: 1.5rem auto 2rem; padding: 0 1rem; } .auth-card { border: 1px solid var(--esh-border); border-radius: 16px !important; background: var(--esh-surface); } .auth-logo { text-align: center; } .auth-logo img { max-width: min(320px, 100%); height: auto; } .auth-remember label { font-size: 0.9rem; color: var(--esh-muted); display: inline-flex; align-items: center; gap: 0.4rem; } .auth-submit { width: 100%; padding: 0.8rem 1rem; border: 0; border-radius: 0.65rem; background: var(--brand-blue); color: #fff; cursor: pointer; font-family: Poppins, sans-serif; font-weight: 600; font-size: 0.95rem; } .auth-submit:hover { filter: brightness(1.05); } /* ===== Dashboard cards ===== */ .dash-header { display: flex; flex-direction: column; gap: 0.15rem; } .dash-kpi { height: 100%; border: 1px solid var(--esh-border); border-radius: 14px !important; background: var(--mud-palette-surface, var(--esh-surface)) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dash-card-clickable { cursor: pointer; user-select: none; } .dash-card-clickable:focus-visible { outline: 2px solid var(--esh-primary); outline-offset: 2px; } .dash-card-link { display: block; height: 100%; text-decoration: none !important; color: inherit !important; cursor: pointer; } .dash-card-link:focus-visible .dash-kpi, .dash-card-link:focus-visible .dash-shortcut { outline: 2px solid var(--esh-primary); outline-offset: 2px; } .dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--esh-ink) 8%, transparent); } .dash-kpi-top { display: flex; justify-content: flex-start; margin-bottom: 0.75rem; } .dash-kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; } .dash-kpi--blue .dash-kpi-icon { background: var(--brand-blue); } .dash-kpi--green .dash-kpi-icon { background: var(--brand-green); } .dash-kpi--orange .dash-kpi-icon { background: var(--brand-orange); } .dash-kpi-value { font-weight: 700 !important; line-height: 1.1 !important; margin-bottom: 0.15rem !important; } .dash-kpi-label { color: var(--esh-muted) !important; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500 !important; } .dash-shortcut { height: 100%; border: 1px solid var(--esh-border) !important; border-radius: 14px !important; background: var(--mud-palette-surface, var(--esh-surface)) !important; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; text-decoration: none !important; color: inherit !important; } .dash-shortcut:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--esh-primary) 45%, var(--esh-border)) !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--esh-ink) 10%, transparent); } .dash-shortcut-inner { display: flex; align-items: flex-start; gap: 0.85rem; } .dash-shortcut-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; background: var(--accent, var(--brand-blue)); } .dash-shortcut-title { font-weight: 600 !important; margin-bottom: 0.1rem !important; } .app-shell--dark .dash-kpi, .app-shell--dark .dash-shortcut { background: var(--mud-palette-surface, #132536) !important; border-color: var(--esh-border) !important; }