/* BL Desk - System Audit Fix
   Camada global de padronização visual.
   Não substitui módulos. Só harmoniza UX, responsividade e leitura.
*/

:root {
    --bl-bg: #0d0b12;
    --bl-surface: rgba(255,255,255,.045);
    --bl-surface-2: rgba(255,255,255,.075);
    --bl-border: rgba(255,255,255,.105);
    --bl-border-strong: rgba(167,255,0,.28);
    --bl-text: #ffffff;
    --bl-muted: rgba(255,255,255,.64);
    --bl-muted-2: rgba(255,255,255,.48);
    --bl-purple: #3b00b9;
    --bl-pink: #fe03b0;
    --bl-citric: #a7ff00;
    --bl-danger: #ff5a5a;
    --bl-radius-xl: 24px;
    --bl-radius-lg: 18px;
    --bl-radius-md: 14px;
    --bl-shadow: 0 22px 70px rgba(0,0,0,.22);
}

/* Base de leitura */
body {
    background: radial-gradient(circle at 85% 0%, rgba(59,0,185,.22), transparent 34%), var(--bl-bg) !important;
    color: var(--bl-text) !important;
}

.main,
.app-main,
.content,
.page-content {
    color: var(--bl-text);
}

.main h1,
.main h2,
.main h3,
.app-main h1,
.app-main h2,
.app-main h3 {
    letter-spacing: -.045em;
    line-height: 1.05;
}

.main > h1,
.app-main > h1 {
    margin-bottom: 6px;
}

.text-muted,
.text-muted-soft,
small {
    color: var(--bl-muted) !important;
}

/* Painéis globais */
.card-panel,
.job-card,
.bl-rel-panel,
.bl-quality-panel,
.bl-price-panel,
.bl-budget-panel {
    border: 1px solid var(--bl-border) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(254,3,176,.075), transparent 32%),
        linear-gradient(135deg, rgba(48,22,73,.88), rgba(22,16,34,.94)) !important;
    border-radius: var(--bl-radius-xl) !important;
    box-shadow: var(--bl-shadow);
}

.card-panel {
    padding: 18px !important;
}

/* Botões */
.btn {
    border-radius: var(--bl-radius-md) !important;
    font-weight: 900 !important;
    min-height: 38px;
}

.btn-brand {
    background: linear-gradient(135deg, var(--bl-purple), var(--bl-pink)) !important;
    border: 0 !important;
    color: #fff !important;
}

.btn-citric {
    background: var(--bl-citric) !important;
    border: 0 !important;
    color: #161616 !important;
}

.btn-outline-light {
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
    background: rgba(255,255,255,.045) !important;
}

.btn-outline-light:hover {
    border-color: var(--bl-border-strong) !important;
    background: rgba(167,255,0,.09) !important;
    color: #eaffbf !important;
}

/* Inputs e selects */
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"] {
    min-height: 44px;
    border-radius: 15px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
    border-color: var(--bl-citric) !important;
    box-shadow: 0 0 0 .18rem rgba(167,255,0,.15) !important;
    outline: none !important;
}

select option,
.custom-select option {
    background: #21162f !important;
    color: #fff !important;
}

/* Labels */
label {
    color: rgba(255,255,255,.86) !important;
    font-weight: 850 !important;
    font-size: 13px !important;
}

/* Empty states: parar de criar blocos gigantes */
.empty-state,
.bl-empty-state,
[class*="empty"] {
    border-color: rgba(255,255,255,.10) !important;
}

.card-panel .empty-state,
.bl-rel-panel .empty-state,
.bl-quality-panel .empty-state,
.bl-prod-empty,
.bl-price-panel .empty-state {
    min-height: unset !important;
    padding: 16px 18px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.025) !important;
}

.empty-state h3,
.empty-state strong,
.bl-prod-empty strong {
    font-size: 15px !important;
    margin-bottom: 5px !important;
}

.empty-state p,
.bl-prod-empty p {
    font-size: 13px !important;
    color: var(--bl-muted) !important;
}

/* Tabelas */
.table-responsive {
    border: 1px solid var(--bl-border);
    border-radius: 20px;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}

.table {
    color: #fff !important;
    margin-bottom: 0 !important;
}

.table thead th {
    border: 0 !important;
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.70);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 14px 16px !important;
}

.table tbody td {
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
}

/* Badges */
.badge {
    border-radius: 999px !important;
    padding: 7px 10px !important;
    font-weight: 950 !important;
    border: 1px solid rgba(255,255,255,.14);
}

/* Sidebar: leitura e consistência */
.sidebar,
.app-sidebar,
aside {
    background: rgba(9,8,14,.94) !important;
}

.sidebar a,
.app-sidebar a,
.nav-link {
    font-weight: 850;
}

.sidebar .active,
.app-sidebar .active,
.nav-link.active {
    background: linear-gradient(135deg, rgba(59,0,185,.70), rgba(254,3,176,.28)) !important;
    border-color: rgba(167,255,0,.22) !important;
}

/* Relacionamento: corrigir o radar */
.bl-rel-page {
    display: grid !important;
    gap: 16px !important;
}

.bl-rel-hero {
    margin-bottom: 0 !important;
}

.bl-rel-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
}

.bl-rel-radar-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

.bl-rel-panel {
    padding: 16px !important;
    min-height: unset !important;
}

.bl-rel-panel h2 {
    font-size: 19px !important;
    margin-bottom: 4px !important;
}

.bl-rel-panel-sub {
    margin-bottom: 12px !important;
    color: var(--bl-muted) !important;
    font-size: 13px !important;
}

.bl-rel-list {
    display: grid !important;
    gap: 9px !important;
}

.bl-rel-card {
    border: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.045) !important;
    border-radius: 17px !important;
    padding: 12px !important;
}

.bl-rel-card strong {
    font-size: 14.5px !important;
    line-height: 1.2 !important;
}

.bl-rel-card small {
    font-size: 12.3px !important;
    line-height: 1.3 !important;
}

.bl-rel-card p {
    font-size: 13px !important;
    line-height: 1.38 !important;
    margin: 8px 0 0 !important;
}

.bl-rel-actions {
    gap: 7px !important;
    margin-top: 9px !important;
}

/* Métricas globais */
.bl-rel-metric,
.bl-quality-metric,
.bl-os-metric,
.bl-prod-metric,
.bl-budget-metric {
    border: 1px solid var(--bl-border) !important;
    background: rgba(255,255,255,.045) !important;
    border-radius: 18px !important;
    padding: 14px !important;
}

.bl-rel-metric span,
.bl-quality-metric span,
.bl-os-metric span,
.bl-prod-metric span,
.bl-budget-metric span {
    color: var(--bl-muted) !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bl-rel-metric strong,
.bl-quality-metric strong,
.bl-os-metric strong,
.bl-prod-metric strong,
.bl-budget-metric strong {
    font-size: 28px !important;
    letter-spacing: -.055em;
}

/* Produção e cards */
.bl-prod-board {
    gap: 14px !important;
}

.bl-prod-card,
.bl-os-card,
.bl-quality-item,
.bl-price-card {
    border-radius: 18px !important;
}

/* Evita páginas com largura descontrolada */
.bl-rel-page,
.bl-quality-page,
.bl-price-page,
.bl-budget-page {
    max-width: 100%;
}

/* Responsivo */
@media (max-width: 1200px) {
    .bl-rel-radar-grid {
        grid-template-columns: 1fr !important;
    }

    .bl-rel-metrics,
    .bl-quality-metrics,
    .bl-os-summary,
    .bl-prod-summary {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 720px) {
    .card-panel,
    .bl-rel-panel,
    .bl-quality-panel,
    .bl-price-panel {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .bl-rel-metrics,
    .bl-quality-metrics,
    .bl-os-summary,
    .bl-prod-summary {
        grid-template-columns: 1fr !important;
    }

    .btn {
        width: 100%;
    }

    .table-responsive {
        overflow-x: auto;
    }
}