*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    color: #2D3558;
    background: #F4F5F9;
}

a, .btn-link {
    color: #2D3558;
}

h1, h2, h3, h4, h5, h6 {
    color: #2D3558;
    font-weight: 600;
}

/* ── BUTTONS (padrão Plannera) ───────────────────────── */
.btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    font-family: 'Epilogue', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.btn-outline {
    background: #fff;
    border-color: #D0D3E0;
    color: #2D3558;
}

.btn-outline:hover {
    background: #F4F5F9;
    border-color: #2D3558;
}

.btn-primary {
    background: #2D3558;
    border-color: #2D3558;
    color: #fff;
}

.btn-primary:hover {
    background: #495583;
    border-color: #495583;
    color: #fff;
}

.btn-alert-critical {
    background: #FDECEA;
    border-color: #EF9A9A;
    color: #C62828;
}

.btn-alert-critical:hover {
    background: #fbdcdc;
}

.btn-alert-warning {
    background: #FFF8E1;
    border-color: #F0C040;
    color: #B57A00;
}

.btn-alert-warning:hover {
    background: #fff0c0;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem #495583;
    outline: none;
}

/* ── CARDS ───────────────────────────────────────────── */
.card {
    background: #fff;
    border: 1px solid #E4E6EF;
    border-radius: 8px;
    box-shadow: none;
}

/* ── CHIPS DE STATUS ─────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    min-width: 60px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.chip-ok       { background: #E6F4EA; color: #1E7E34; }
.chip-warning  { background: #FFF8E1; color: #B57A00; }
.chip-critical { background: #FDECEA; color: #C62828; }
.chip-frozen   { background: #EEEEEE; color: #757575; }

/* ── BADGES ──────────────────────────────────────────── */
.badge-soe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.badge-critical { background: #FDECEA; color: #C62828; }
.badge-warning  { background: #FFF8E1; color: #B57A00; }
.badge-frozen   { background: #EEEEEE; color: #757575; }
.badge-ok       { background: #E6F4EA; color: #1E7E34; }

/* ── PAGE TITLE (interno aos conteúdos) ──────────────── */
.page-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #9CA2B8;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

/* ── VALIDAÇÃO ───────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #1E7E34;
}

.invalid {
    outline: 1px solid #C62828;
}

.validation-message {
    color: #C62828;
    font-size: 12px;
}

/* ── BLAZOR ERROR ────────────────────────────────────── */
.blazor-error-boundary {
    background: #FDECEA;
    padding: 1rem;
    color: #C62828;
    border-radius: 6px;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro."
}

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #D0D3E0;
    border-radius: 3px;
}