/* =====================================================================
   Design tokens — camada moderna sobre o Bootstrap 5.3
   Paleta fixa (índigo). Reestiliza toda a app via variáveis --bs-*.
   ===================================================================== */
:root {
    /* Marca — paleta da logo Pratiko */
    --saas-primary: #1f567a;        /* azul-aço (hexágono) */
    --saas-primary-rgb: 31, 86, 122;
    --saas-primary-hover: #184763;  /* azul mais escuro */
    --saas-primary-soft: rgba(31, 86, 122, 0.10);

    --saas-accent: #5fa748;         /* verde (check) */
    --saas-accent-rgb: 95, 167, 72;
    --saas-navy: #16263d;           /* navy (fundo/letras da logo) */
    --saas-navy-rgb: 22, 38, 61;

    /* Superfícies (claro) */
    --saas-bg: #f4f6f9;             /* fundo geral */
    --saas-surface: #ffffff;        /* cards */
    --saas-surface-2: #ffffff;
    --saas-border: #e3e8ef;

    /* Tipografia / forma */
    --saas-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --saas-radius: 0.75rem;
    --saas-radius-sm: 0.5rem;

    /* Sombras em camadas (suaves) */
    --saas-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --saas-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --saas-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.05);

    /* Override de variáveis nativas do Bootstrap */
    --bs-primary: var(--saas-primary);
    --bs-primary-rgb: var(--saas-primary-rgb);
    --bs-body-bg: var(--saas-bg);
    --bs-body-color: #1f2430;
    --bs-border-color: var(--saas-border);
    --bs-border-radius: var(--saas-radius-sm);
    --bs-border-radius-lg: var(--saas-radius);
    --bs-body-font-family: var(--saas-font);
    --bs-link-color: var(--saas-primary);
    --bs-link-hover-color: var(--saas-primary-hover);

    /* Sombras do Bootstrap → versões suaves (afeta .shadow-sm/.shadow/.shadow-lg em todas as páginas) */
    --bs-box-shadow-sm: var(--saas-shadow-sm);
    --bs-box-shadow: var(--saas-shadow);
    --bs-box-shadow-lg: var(--saas-shadow-lg);
}

/* Superfícies (escuro) — base navy da logo */
[data-bs-theme="dark"] {
    --saas-bg: #0e1a2b;
    --saas-surface: #16263d;
    --saas-surface-2: #16263d;
    --saas-border: #28384e;

    --bs-body-bg: var(--saas-bg);
    --bs-body-color: #e6eaf0;
    --bs-border-color: var(--saas-border);
    --bs-tertiary-bg: #1d2f48;
}

body {
    font-family: var(--saas-font);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* bg-body-tertiary é o fundo da área de conteúdo no MainLayout */
.bg-body-tertiary { background-color: var(--saas-bg) !important; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; }

/* =====================================================================
   Branding — paleta fixa aplicada às classes utilitárias
   ===================================================================== */
.bg-primary { background-color: var(--saas-primary) !important; }
.text-primary { color: var(--saas-primary) !important; }
.border-primary { border-color: var(--saas-primary) !important; }
.text-bg-primary { background-color: var(--saas-primary) !important; color: #fff !important; }

.btn-primary {
    --bs-btn-bg: var(--saas-primary);
    --bs-btn-border-color: var(--saas-primary);
    --bs-btn-hover-bg: var(--saas-primary-hover);
    --bs-btn-hover-border-color: var(--saas-primary-hover);
    --bs-btn-active-bg: var(--saas-primary-hover);
    --bs-btn-active-border-color: var(--saas-primary-hover);
    --bs-btn-disabled-bg: var(--saas-primary);
    --bs-btn-disabled-border-color: var(--saas-primary);
    box-shadow: var(--saas-shadow-sm);
}

.btn-outline-primary {
    --bs-btn-color: var(--saas-primary);
    --bs-btn-border-color: var(--saas-primary);
    --bs-btn-hover-bg: var(--saas-primary);
    --bs-btn-hover-border-color: var(--saas-primary);
    --bs-btn-active-bg: var(--saas-primary-hover);
    --bs-btn-active-border-color: var(--saas-primary-hover);
}

.btn { border-radius: var(--saas-radius-sm); font-weight: 500; }

/* Verde da marca alinhado às classes "success" */
.text-success { color: var(--saas-accent) !important; }
.bg-success { background-color: var(--saas-accent) !important; }
.text-accent { color: var(--saas-accent) !important; }
.btn-success {
    --bs-btn-bg: var(--saas-accent);
    --bs-btn-border-color: var(--saas-accent);
    --bs-btn-hover-bg: #4f9039;
    --bs-btn-hover-border-color: #4f9039;
    --bs-btn-active-bg: #4f9039;
    --bs-btn-active-border-color: #4f9039;
}

.form-control:focus, .form-select:focus {
    border-color: var(--saas-primary);
    box-shadow: 0 0 0 0.2rem var(--saas-primary-soft);
}

/* =====================================================================
   Cards
   ===================================================================== */
.card {
    --bs-card-bg: var(--saas-surface);
    --bs-card-border-color: var(--saas-border);
    --bs-card-border-radius: var(--saas-radius);
    box-shadow: var(--saas-shadow);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card-header {
    background-color: transparent;
    border-bottom-color: var(--saas-border);
    font-weight: 600;
}

/* =====================================================================
   Formulários
   ===================================================================== */
.form-label { font-weight: 500; margin-bottom: 0.35rem; }
.form-control, .form-select {
    border-color: var(--saas-border);
    border-radius: var(--saas-radius-sm);
    padding: 0.5rem 0.75rem;
}
.form-control::placeholder { color: var(--bs-tertiary-color); }
.input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--saas-border);
}
/* cabeçalho de seção em formulários (h6 text-uppercase) */
.form-section-title,
form h6.text-uppercase {
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color) !important;
    font-weight: 600;
}

/* =====================================================================
   Modais (padrão "modal show d-block" usado nas páginas)
   ===================================================================== */
.modal-content {
    background-color: var(--saas-surface);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius);
    box-shadow: var(--saas-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--saas-border); }
.modal-header { padding: 1rem 1.25rem; }
.modal-title { font-weight: 600; }
.modal-body { padding: 1.25rem; }
@media (min-width: 576px) {
    .modal-dialog:not(.modal-dialog-centered) { margin-top: 4.5rem; }
}

/* =====================================================================
   Badges — estilo "soft" (texto colorido sobre fundo translúcido)
   ===================================================================== */
.badge { font-weight: 600; padding: 0.4em 0.65em; border-radius: 999px; }
.badge.bg-success { background-color: rgba(var(--saas-accent-rgb), 0.15) !important; color: var(--saas-accent) !important; }
.badge.bg-primary { background-color: var(--saas-primary-soft) !important; color: var(--saas-primary) !important; }
.badge.bg-secondary { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-secondary-color) !important; }
.badge.bg-warning { background-color: rgba(255, 193, 7, 0.18) !important; color: #b8860b !important; }
.badge.bg-danger { background-color: rgba(var(--bs-danger-rgb), 0.15) !important; color: var(--bs-danger) !important; }
[data-bs-theme="dark"] .badge.bg-warning { color: #ffca2c !important; }

/* =====================================================================
   Alerts — bordas suaves, raio consistente
   ===================================================================== */
.alert { border-radius: var(--saas-radius); border: 1px solid transparent; }

/* =====================================================================
   Abas (nav-tabs)
   ===================================================================== */
.nav-tabs { border-bottom-color: var(--saas-border); }
.nav-tabs .nav-link {
    color: var(--bs-secondary-color);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--saas-border); color: var(--bs-body-color); }
.nav-tabs .nav-link.active {
    color: var(--saas-primary);
    background: transparent;
    border-bottom-color: var(--saas-primary);
}

/* =====================================================================
   Container centralizado (largura máxima)
   ===================================================================== */
.app-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* =====================================================================
   Top navigation (NavMenu horizontal)
   ===================================================================== */
.app-topnav {
    background-color: var(--saas-navy);
    box-shadow: var(--saas-shadow-sm);
    padding-block: 0.5rem;
    z-index: 1030;
}
/* itens centralizados verticalmente, sem wrap; barra ocupa toda a largura do viewport, alinhada à esquerda */
.app-topnav .app-container { min-height: 52px; flex-wrap: nowrap; max-width: none; margin-inline: 0; }
.app-topnav .navbar-collapse { align-items: center; }
@media (min-width: 992px) {
    .app-topnav .navbar-collapse { flex-grow: 1; }
}

.app-topnav .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    padding-block: 0;
}
.app-topnav .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--saas-primary), var(--saas-accent));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.app-topnav .navbar-toggler { color: rgba(255, 255, 255, 0.85); }

.app-topnav .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    border-radius: var(--saas-radius-sm);
    padding: 0.45rem 0.8rem;
    display: flex;
    align-items: center;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.app-topnav .navbar-nav .nav-link:hover,
.app-topnav .navbar-nav .show > .nav-link {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.app-topnav .navbar-nav .nav-link.active {
    color: #fff;
    background-color: rgba(var(--saas-accent-rgb), 0.22);
    font-weight: 600;
}
.app-topnav .dropdown-toggle::after { margin-left: 0.35rem; opacity: 0.55; }

/* botão de tema e avatar alinhados na barra navy */
.app-topnav .icon-btn { color: rgba(255, 255, 255, 0.85); }
.app-topnav .icon-btn:hover { background-color: rgba(255, 255, 255, 0.10); }

/* Dropdowns */
.dropdown-menu {
    --bs-dropdown-bg: var(--saas-surface);
    --bs-dropdown-border-color: var(--saas-border);
    --bs-dropdown-border-radius: var(--saas-radius);
    --bs-dropdown-link-active-bg: var(--saas-primary-soft);
    --bs-dropdown-link-active-color: var(--saas-primary);
    box-shadow: var(--saas-shadow-lg);
    padding: 0.375rem;
    margin-top: 0.4rem !important;
}
.dropdown-item {
    border-radius: var(--saas-radius-sm);
    padding: 0.45rem 0.65rem;
    font-weight: 500;
}
.dropdown-item.active, .dropdown-item:active { font-weight: 600; }

.navbar-toggler:focus { box-shadow: none; }

/* Menu colapsado (mobile): empilha com respiro */
@media (max-width: 991.98px) {
    .app-topnav .navbar-collapse {
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--saas-border);
    }
    .app-topnav .dropdown-menu {
        box-shadow: none;
        border: none;
        padding-left: 1rem;
    }
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--bs-body-color);
    transition: background-color 0.15s ease;
}
.icon-btn:hover { background-color: var(--bs-tertiary-bg); }

/* Avatar com iniciais */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--saas-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* =====================================================================
   Conteúdo principal
   ===================================================================== */
@media (max-width: 767.98px) {
    .main-content { padding-top: 1rem !important; }
}

/* =====================================================================
   Module card hover
   ===================================================================== */
.module-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--saas-shadow-lg) !important;
}

/* =====================================================================
   Tabelas
   ===================================================================== */
.table { --bs-table-bg: transparent; }
.table > thead {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}
.table > tbody tr { transition: background-color 0.1s ease; }

[data-bs-theme="dark"] thead.table-light,
[data-bs-theme="dark"] tr.table-light,
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
    --bs-table-bg: #1d2230;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    background-color: #1d2230 !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* =====================================================================
   Touch targets em mobile
   ===================================================================== */
@media (max-width: 767.98px) {
    .btn-sm { min-height: 38px; }
    .table-actions .btn { min-width: 38px; min-height: 38px; }
}

/* =====================================================================
   Blazor error UI
   ===================================================================== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

[data-bs-theme="dark"] #blazor-error-ui {
    background: #4a3f00;
    color: #fff;
}