/* =========================================================
   VARIÁVEIS DE TEMA E ESTILOS GLOBAIS - IT PSICOLOGIA
   ========================================================= */
:root {
    /* Cores Principais */
    --primary-color: #2563eb; /* Azul primário */
    --primary-hover: #1d4ed8;
    /* Barra Superior (Top Header) */
    --topbar-bg: #1e293b; /* Slate escuro */
    --topbar-text: #ffffff;
    /* Barra Lateral (Sidebar) */
    --sidebar-bg: #0f172a; /* Slate muito escuro */
    --sidebar-text: #94a3b8; /* Texto cinza claro */
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: #1e293b;
    --sidebar-hover-bg: rgba(30, 41, 59, 0.5);
    /* Corpo e Fundo */
    --body-bg: #f8fafc; /* Fundo suave para os olhos */
    --card-bg: #ffffff; /* Fundo para painéis e tabelas */
    --text-color: #334155; /* Cor de texto principal */
    /* Rodapé */
    --footer-bg: #ffffff;
    --footer-text: #64748b;
    /* Fonte Padrão */
    --main-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html, body {
    font-family: var(--main-font);
    background-color: var(--body-bg);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    height: 100%;
}

a, .btn-link {
    color: var(--primary-color);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-hover);
}

    .btn-primary:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
    }

.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 var(--primary-color);
}

/* =========================================================
   ESTRUTURA E LAYOUT
   ========================================================= */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* Barra Superior (Topbar) - Ocupa toda a largura da tela */
.topbar-custom {
    background-color: var(--topbar-bg);
    color: var(--topbar-text);
    height: 60px;
    width: 100%;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;
}

.user-badge {
    background-color: var(--primary-color);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Contentor principal sob a barra superior */
.main-container {
    display: flex;
    flex: 1;
    width: 100%;
}

/* Barra Lateral (Sidebar) */
.sidebar-custom {
    width: 260px;
    min-width: 260px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.sidebar-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

    .sidebar-item a:hover {
        background-color: var(--sidebar-hover-bg);
        color: var(--sidebar-text-active);
    }

    .sidebar-item a.active {
        background-color: var(--sidebar-active-bg);
        color: var(--sidebar-text-active);
        border-left: 4px solid var(--primary-color);
    }

/* Corpo do Conteúdo */
.content-body {
    flex: 1;
    padding: 2rem;
    background-color: var(--body-bg);
}

/* Rodapé */
.footer-custom {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* =========================================================
   VALIDAÇÕES E COMPONENTES BLAZOR
   ========================================================= */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4w0DE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAugzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuThroNzM2LjMzOCA5My4wMTYyIDIzNi44NTogOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OENDMjYxLjIgNTEuNDgzNyAyNj2LjIjk2IDUxIDI2My41MDYgNTFaTTI2My41ODYgNjYuMDE4M0MyNjAuNzM3IDY2LjAxODMgMjU5LjMxMyA2Ny4xMjQ1IDI1OS4zMTMgNjkuMzM3IDI1OS4zMTMgNjkuNjEwMiAyNTkuMzMyIDY5Ljg2MDggMjU5LjM3MSA3MC4wODg3TDI2MS43OTUgODQuMDE2MSAyNjUuMzggODQuMDE2MSAyNjcuODIxIDY5Ljc0NzVDMjY3Ljg2IDY5Ljc0MDkgMjY3Ljg3OSA2OS41ODc3IDI2Ny44NzkgNjkuMzE3OSAyNjcuODc5IDY3LjExODIgMjY2LjQ0OCA2Ni4w1gzIDI2My41ODYgNjYuMDE4M3pNMjYzLjU3NiA4Ni4wNTQ3QzI2MS4wNDkgODYuMDU0NyAyNTkuNzg2IDg3LjMwMDUgMjU5Ljc4NiA4OS43OTIxIDI1OS43ODYgOTIuMjgzNyAyNxEuMDQ5IDkzLjUyOTUgMjYzLjU3NiA5My41Mjk1IDI2Ni4xMTYgOTMuNTI5NSAyNjcuMzg3IDkyLjI4MzcgMjY3L|0NyA4OS43OTIxIDI2Ny4zODcgODcuMzAwNSAyNjYuMTE2IDg2LjA1NDcgMjYzLjU3NiA8Ni4wNTQ3WiIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}