/* ============================================
   Portal Theme - Cores Padrão
   ============================================ */

:root {
    /* Background Colors */
    --portal-bg-primary: #1a1b3a;
    --portal-bg-secondary: #25264a;
    --portal-bg-card: #2f3653;
    
    /* Text Colors */
    --portal-text-primary: #a2a6bb;
    --portal-text-secondary: #6f7389;
    --portal-text-muted: #6f7389;
    --portal-text-white: #ffffff;
    
    /* Accent Colors */
    --portal-accent-indigo: #6366f1;
    --portal-accent-indigo-dark: #4f46e5;
    --portal-accent-cyan: #06b6d4;
    --portal-accent-cyan-dark: #0891b2;
    
    /* Border Colors */
    --portal-border: rgba(99, 102, 241, 0.2);
    --portal-border-hover: rgba(99, 102, 241, 0.4);
    
    /* Status Colors */
    --portal-success: #22c55e;
    --portal-danger: #ef4444;
    --portal-warning: #fbbf24;
    --portal-info: #06b6d4;
    
    /* Shadow */
    --portal-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

/* ============================================
   Body & Base Styles
   ============================================ */

body {
    background-color: var(--portal-bg-primary);
    color: var(--portal-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================
   Typography - Padrão do Portal
   ============================================ */

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--portal-text-primary) !important;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

p, span, div, label {
    color: var(--portal-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.text-muted,
.text-muted *,
small.text-muted,
.text-muted small,
p.text-muted,
.text-muted p,
span.text-muted,
.text-muted span,
div.text-muted,
.text-muted div,
label.text-muted,
.text-muted label {
    color: var(--portal-text-muted) !important;
}

.text-white {
    color: var(--portal-text-white) !important;
}

.text-primary {
    color: var(--portal-text-primary) !important;
}

.fw-semibold,
.fw-bold {
    color: var(--portal-text-primary) !important;
    font-weight: 600;
}

/* ============================================
   Master Card - Padrão para cards do portal
   ============================================ */

.master-card {
    background-color: var(--portal-bg-secondary);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    padding: 24px;
    color: var(--portal-text-primary);
    transition: all 0.3s ease;
}

.master-card:hover {
    border-color: var(--portal-accent-indigo);
    transform: translateY(-4px);
    box-shadow: var(--portal-shadow);
}

.master-card h1, .master-card h2, .master-card h3, 
.master-card h4, .master-card h5, .master-card h6,
.master-card .display-6, .master-card .display-4 {
    color: var(--portal-text-primary) !important;
}

.master-card .fw-bold, .master-card .fw-semibold {
    color: var(--portal-text-primary) !important;
}

.master-card h5, .master-card h6 {
    color: var(--portal-text-primary) !important;
    font-weight: 600;
}

.master-card strong {
    color: var(--portal-text-primary) !important;
    font-weight: 600;
}

.master-card code {
    color: var(--portal-text-primary) !important;
    background-color: rgba(99, 102, 241, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.master-card code.text-muted {
    color: var(--portal-text-muted) !important;
}

/* ============================================
   Form Controls - Sem cor de fundo, apenas bordas
   ============================================ */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--portal-border);
    color: var(--portal-text-primary);
    font-size: 14px;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--portal-accent-indigo);
    color: var(--portal-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
    outline: none;
}

/* Selects específicos - remover background do Bootstrap */
select.form-select,
select.form-control,
select,
.form-select {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a2a6bb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
    color: var(--portal-text-primary) !important;
}

select.form-select:focus,
select.form-control:focus,
select:focus,
.form-select:focus {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    color: var(--portal-text-primary) !important;
}

/* Opções dentro dos selects */
select option,
.form-select option {
    background-color: var(--portal-bg-secondary) !important;
    color: var(--portal-text-primary) !important;
}

select option:checked,
.form-select option:checked {
    background-color: var(--portal-accent-indigo) !important;
    color: var(--portal-text-white) !important;
}

.form-control::placeholder,
input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    color: var(--portal-text-muted) !important;
    opacity: 1;
}

/* Selects não têm placeholder, mas se houver texto padrão */
select.form-select:invalid,
select:invalid {
    color: var(--portal-text-muted) !important;
}

select.form-select:valid,
select:valid {
    color: var(--portal-text-primary) !important;
}

.form-label {
    color: var(--portal-text-white);
    font-weight: 500;
    margin-bottom: 8px;
}

/* ============================================
   Buttons
   ============================================ */

.btn-primary {
    background-color: var(--portal-accent-indigo);
    border-color: var(--portal-accent-indigo);
    color: var(--portal-text-white);
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--portal-accent-indigo-dark);
    border-color: var(--portal-accent-indigo-dark);
    color: var(--portal-text-white);
    transform: translateY(-2px);
    box-shadow: var(--portal-shadow);
}

.btn-secondary {
    background-color: var(--portal-bg-secondary);
    border-color: var(--portal-border);
    color: var(--portal-text-white);
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--portal-bg-card);
    border-color: var(--portal-accent-indigo);
    color: var(--portal-text-white);
}

.btn-navbar {
    background: transparent;
    border: 1px solid var(--portal-border);
    color: var(--portal-text-white);
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-navbar:hover {
    border-color: var(--portal-accent-indigo);
    color: var(--portal-text-white);
    transform: translateY(-5px);
    box-shadow: var(--portal-shadow);
}

/* ============================================
   Tables - Sem cor de fundo (transparentes)
   ============================================ */

table.table,
.table-dark,
.companies-table,
.staff-table,
.table-dark-custom,
.table-striped {
    color: var(--portal-text-primary);
    border-color: var(--portal-border);
    background-color: transparent !important;
}

table.table thead,
.table-dark thead,
.companies-table thead,
.staff-table thead,
.table-dark-custom thead {
    background-color: transparent !important;
}

table.table thead th,
.table-dark thead th,
.companies-table thead th,
.staff-table thead th,
.table-dark-custom thead th {
    color: var(--portal-text-primary) !important;
    font-weight: 600;
    border-color: var(--portal-border);
    background-color: transparent !important;
    padding: 12px;
    border-bottom: 1px solid var(--portal-border);
}

table.table tbody,
.table-dark tbody,
.companies-table tbody,
.staff-table tbody,
.table-dark-custom tbody {
    background-color: transparent !important;
}

table.table tbody td,
.table-dark tbody td,
.companies-table tbody td,
.staff-table tbody td,
.table-dark-custom tbody td {
    border-color: rgba(99, 102, 241, 0.1);
    vertical-align: middle;
    padding: 12px;
    color: var(--portal-text-primary);
    background-color: transparent !important;
}

table.table tbody tr,
.table-dark tbody tr,
.companies-table tbody tr,
.staff-table tbody tr,
.table-dark-custom tbody tr,
.table-striped tbody tr {
    background-color: transparent !important;
}

table.table tbody tr:nth-child(even),
.table-striped tbody tr:nth-child(even) {
    background-color: transparent !important;
}

table.table tbody tr:hover,
.table-dark tbody tr:hover,
.companies-table tbody tr:hover,
.staff-table tbody tr:hover,
.table-dark-custom tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.05) !important;
}

/* Text-muted dentro de tabelas */
table.table .text-muted,
.table-dark .text-muted,
.companies-table .text-muted,
.staff-table .text-muted,
.table-dark-custom .text-muted,
table.table tbody .text-muted,
.table-dark tbody .text-muted,
.companies-table tbody .text-muted,
.staff-table tbody .text-muted,
.table-dark-custom tbody .text-muted,
table.table tbody td .text-muted,
.table-dark tbody td .text-muted,
.companies-table tbody td .text-muted,
.staff-table tbody td .text-muted,
.table-dark-custom tbody td .text-muted,
table.table tbody small.text-muted,
.table-dark tbody small.text-muted,
.companies-table tbody small.text-muted,
.staff-table tbody small.text-muted,
.table-dark-custom tbody small.text-muted {
    color: var(--portal-text-muted) !important;
}

/* Texto dentro de tabelas sempre usa cor primária (não branco) */
.table-dark tbody .fw-semibold,
.companies-table tbody .fw-semibold,
.staff-table tbody .fw-semibold,
.table-dark-custom tbody .fw-semibold {
    color: var(--portal-text-primary) !important;
}

.table-dark tbody .fw-bold,
.companies-table tbody .fw-bold,
.staff-table tbody .fw-bold,
.table-dark-custom tbody .fw-bold {
    color: var(--portal-text-primary) !important;
}

.table-dark tbody strong,
.companies-table tbody strong,
.staff-table tbody strong,
.table-dark-custom tbody strong,
.table-striped tbody strong {
    color: var(--portal-text-primary) !important;
    font-weight: 600;
}

.table-dark tbody .text-white,
.companies-table tbody .text-white,
.staff-table tbody .text-white,
.table-dark-custom tbody .text-white {
    color: var(--portal-text-primary) !important;
}

.table-dark tbody div,
.companies-table tbody div,
.staff-table tbody div,
.table-dark-custom tbody div {
    color: var(--portal-text-primary);
}

/* ============================================
   Badges
   ============================================ */

.badge {
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge-light {
    background: rgba(99, 102, 241, 0.15);
    color: var(--portal-text-white);
}

.badge-readonly {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--portal-text-white);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.badge-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--portal-success);
}

.badge-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--portal-danger);
}

.badge-warning {
    background-color: rgba(251, 191, 36, 0.15);
    color: var(--portal-warning);
}

.badge-info {
    background-color: rgba(6, 182, 212, 0.15);
    color: var(--portal-info);
}

/* ============================================
   Alerts
   ============================================ */

.alert {
    background-color: var(--portal-bg-secondary);
    border-color: var(--portal-border);
    color: var(--portal-text-primary);
    border-radius: 8px;
    padding: 16px;
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: var(--portal-success);
    color: var(--portal-success);
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--portal-danger);
    color: #ff6b6b;
}

.alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: var(--portal-warning);
    color: var(--portal-warning);
}

.alert-info {
    background-color: rgba(6, 182, 212, 0.1);
    border-color: var(--portal-info);
    color: var(--portal-info);
}

/* ============================================
   Links
   ============================================ */

a {
    color: var(--portal-accent-cyan);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--portal-accent-cyan-dark);
}

/* ============================================
   Master Panel Specific Styles
   ============================================ */

.filter-card {
    background-color: var(--portal-bg-secondary);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.chart-card {
    background-color: var(--portal-bg-secondary);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
}

/* ============================================
   Status Dots
   ============================================ */

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-active,
.status-ok {
    background: var(--portal-success);
}

.status-trial {
    background: var(--portal-warning);
}

.status-inactive,
.status-fail {
    background: var(--portal-danger);
}

/* ============================================
   Nav Tabs (Settings Page)
   ============================================ */

.nav-tabs {
    border-bottom: 1px solid var(--portal-border);
}

.nav-tabs .nav-link {
    color: var(--portal-text-primary);
    border: 1px solid var(--portal-border);
    background-color: transparent;
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    border-color: var(--portal-accent-indigo);
    color: var(--portal-text-white);
    background-color: rgba(99, 102, 241, 0.1);
}

.nav-tabs .nav-link.active {
    background-color: var(--portal-accent-indigo);
    border-color: var(--portal-accent-indigo);
    color: var(--portal-text-white);
    font-weight: 600;
}

/* ============================================
   Code & Pre
   ============================================ */

code {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--portal-text-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

code.text-muted {
    color: var(--portal-text-muted) !important;
    background-color: rgba(99, 102, 241, 0.05);
}

/* ============================================
   Small Text
   ============================================ */

small {
    color: var(--portal-text-muted);
}

/* ============================================
   Container & Spacing
   ============================================ */

.container {
    color: var(--portal-text-primary);
}

.container h1, .container h2, .container h3,
.container h4, .container h5, .container h6,
.container .display-6, .container .display-4 {
    color: var(--portal-text-primary) !important;
    font-weight: 600;
}