html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* ── Shell Nocturne (nav, sidebar) — Views/Shared/_Layout.cshtml ── */
.nocturne-topnav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
}

.nocturne-sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-divider);
}

.nocturne-mobile-nav {
    border-top: 1px solid var(--color-divider);
}

.nocturne-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.nocturne-nav-link i {
    font-size: 17px;
    flex: none;
}

.nocturne-nav-link:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

.nocturne-nav-link.active {
    background: var(--color-accent-900);
    color: var(--color-accent-300);
}

/* ── Grids responsivos Nocturne (mesma convenção do mockup do app) ── */
.ip-g {
    display: grid;
    gap: 14px;
}

@media (min-width: 700px) {
    .ip-g4 { grid-template-columns: repeat(4, 1fr); }
    .ip-g3 { grid-template-columns: repeat(3, 1fr); }
    .ip-g2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Hero da landing page (pré-login) — duas colunas em telas largas ── */
.ip-land {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .ip-land { grid-template-columns: 1.1fr 0.9fr; }
}

/* ── Ícone girando (spinner) — Phosphor não traz essa animação pronta ── */
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-spin { display: inline-block; animation: ph-spin 0.8s linear infinite; }

/* ── Popups do SweetAlert2 (wwwroot/js/alert.js) acompanhando o Nocturne ──
   background/color/confirmButtonColor já são setados via CSS var() no mixin;
   aqui só ajustamos a "casca" que a lib não deixa themear por opção direta. */
.nocturne-swal-popup {
    font-family: var(--font-body) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
.nocturne-swal-popup .swal2-title {
    font-family: var(--font-heading) !important;
    color: var(--color-text) !important;
}
.nocturne-swal-popup .swal2-html-container {
    color: var(--color-text) !important;
}
.nocturne-swal-popup .swal2-actions .swal2-styled:focus-visible {
    box-shadow: 0 0 0 2px var(--color-accent) !important;
}