/* ========================================
   AI TRUST DASHBOARD — VARIÁVEIS DE TEMA
   Configurável via admin: AI TRUST → Tema
   ======================================== */
:root {
  --dash-bg:          #ffffff;   /* fundo geral da página */
  --dash-bg-card:     #ffffff;   /* fundo dos cards/boxes */
  --dash-bg-inner:    #f5f5f7;   /* fundo interno (inputs, abas) */
  --dash-bg-muted:    #e5e5e7;   /* fundo muted/desativado */
  --dash-text:        #1d1d1f;   /* texto principal */
  --dash-text-muted:  #86868b;   /* texto secundário */
  --dash-accent:      #0066cc;   /* cor de destaque */
  --dash-accent-dark: #0055b3;   /* destaque escuro (hover) */
  --dash-border:      #e5e5e7;   /* bordas */
  --dash-radius:      12px;      /* curvatura dos cards */
}

/* ========================================
   AI TRUST DASHBOARD - CLEAN THEME
   Minimalista estilo Apple - Branco/Azul
   ======================================== */

/* ========================================
   GLOBAL STYLES
   ======================================== */

.company-form-v19 {
    background: var(--dash-bg-card);
    color: var(--dash-text);
}

/* Header */
.company-form-v19 .company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dash-border);
}

.company-form-v19 .company-header h2 {
    color: var(--dash-text);
    font-weight: 600;
    font-size: 28px;
}

.company-form-v19 .btn-back {
    padding: 8px 16px;
    background: var(--dash-bg-card);
    color: var(--dash-accent);
    text-decoration: none;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 14px;
}

.company-form-v19 .btn-back:hover {
    background: var(--dash-bg-inner);
    border-color: var(--dash-accent);
}

/* ========================================
   PROGRESS WIDGET - CLEAN STYLE
   ======================================== */

.progress-widget-v19 {
    background: var(--dash-bg-inner);
    color: var(--dash-text);
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid var(--dash-border);
}

.progress-widget-v19 h3 {
    margin: 0 0 16px 0;
    color: var(--dash-text);
    font-weight: 600;
    font-size: 17px;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--dash-bg-muted);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--dash-accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-weight: 600;
    white-space: nowrap;
    color: var(--dash-accent);
    font-size: 15px;
}

/* Remover lista de legendas */
.tabs-status-list {
    display: none; /* REMOVIDO */
}

/* ========================================
   TABS NAVIGATION - CLEAN APPLE STYLE
   ======================================== */

.profile-tabs-nav-v19 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
}

.tab-link-v19 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--dash-bg-card);
    color: var(--dash-text);
    text-decoration: none;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    transition: all 0.2s;
    min-height: 100px;
    text-align: center;
}

.tab-link-v19:hover {
    background: var(--dash-bg-inner);
    border-color: var(--dash-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tab-link-v19.active {
    background: var(--dash-bg-card);
    border-color: var(--dash-accent);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.12);
}

.tab-link-v19 .tab-status {
    display: none; /* Remover bolinhas */
}

.tab-link-v19 .tab-icon {
    font-size: 28px;
}

.tab-link-v19 .tab-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dash-text);
}

.tab-link-v19.active .tab-label {
    color: var(--dash-accent);
    font-weight: 600;
}

/* ========================================
   TAB PANELS
   ======================================== */

.tab-panel-v19 {
    display: none;
    background: var(--dash-bg-card);
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--dash-border);
}

.tab-panel-v19.active {
    display: block;
}

.tab-panel-v19 h3 {
    margin: 0 0 24px 0;
    color: var(--dash-text);
    font-size: 22px;
    font-weight: 600;
    border-bottom: 1px solid var(--dash-border);
    padding-bottom: 16px;
}

/* ========================================
   FORM FIELDS
   ======================================== */

.tab-panel-v19 label {
    display: block;
    margin-bottom: 8px;
    color: var(--dash-text);
    font-weight: 500;
    font-size: 14px;
}

.tab-panel-v19 input[type="text"],
.tab-panel-v19 input[type="email"],
.tab-panel-v19 input[type="url"],
.tab-panel-v19 input[type="tel"],
.tab-panel-v19 input[type="date"],
.tab-panel-v19 input[type="number"],
.tab-panel-v19 textarea,
.tab-panel-v19 select {
    width: 100%;
    padding: 12px 16px;
    background: var(--dash-bg-card);
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    color: var(--dash-text);
    font-size: 15px;
    transition: all 0.2s;
    margin-bottom: 16px;
}

.tab-panel-v19 input:focus,
.tab-panel-v19 textarea:focus,
.tab-panel-v19 select:focus {
    outline: none;
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.tab-panel-v19 input::placeholder,
.tab-panel-v19 textarea::placeholder {
    color: var(--dash-text-muted);
}

/* Checkbox Groups */
.checkbox-group {
    margin-bottom: 16px;
    padding: 16px;
    background: var(--dash-bg-inner);
    border-left: 3px solid var(--dash-accent);
    border-radius: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    color: var(--dash-text);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--dash-accent);
}

.checkbox-hint {
    margin: 8px 0 0 32px;
    font-size: 13px;
    color: var(--dash-text-muted);
    font-style: normal;
}

/* Field Hints */
.field-hint {
    margin: 0 0 12px 0;
    padding: 12px 16px;
    background: var(--dash-bg-inner);
    border-left: 3px solid var(--dash-accent);
    border-radius: 8px;
    font-size: 13px;
    color: var(--dash-text-muted);
}

/* Form Row */
.form-row.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* ========================================
   FORM ACTIONS
   ======================================== */

.form-actions-v19 {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding: 24px;
    background: var(--dash-bg-inner);
    border-radius: 12px;
    border: 1px solid var(--dash-border);
}

.form-actions-v19 .button-primary {
    padding: 12px 24px;
    background: var(--dash-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.form-actions-v19 .button-primary:hover {
    background: var(--dash-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

.form-actions-v19 .button,
.form-actions-v19 .btn-download-files-v19 {
    padding: 12px 24px;
    background: var(--dash-bg-card);
    color: var(--dash-text);
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.form-actions-v19 .button:hover,
.form-actions-v19 .btn-download-files-v19:hover {
    background: var(--dash-bg-inner);
    border-color: var(--dash-accent);
    color: var(--dash-accent);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .profile-tabs-nav-v19 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .company-form-v19 .company-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .profile-tabs-nav-v19 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row.two-cols {
        grid-template-columns: 1fr;
    }
    
    .form-actions-v19 {
        flex-direction: column;
    }
}

/* ========================================
   SUBTLE ANIMATIONS
   ======================================== */

.tab-link-v19,
.tab-panel-v19 input,
.tab-panel-v19 textarea,
.tab-panel-v19 select,
.form-actions-v19 button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ========================================
   v1.9.3: MELHORIAS DE LAYOUT
   ======================================== */

/* Header do Dashboard - Espaçamento */
.aitrust-dashboard .dashboard-header {
    margin-bottom: 24px;
}

.aitrust-dashboard h1 {
    margin-bottom: 20px;
    color: var(--dash-text);
    font-size: 32px;
    font-weight: 600;
}

.aitrust-dashboard .welcome-text {
    margin-bottom: 20px;
    color: var(--dash-text-muted);
    font-size: 15px;
}

/* Tabs de Navegação Principal - Estilo Botão */
.dashboard-tabs {
    display: flex;
    gap: 12px;
    border-bottom: none;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dashboard-tabs a {
    padding: 10px 16px;
    background: var(--dash-bg-inner);
    color: var(--dash-text);
    text-decoration: none;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dashboard-tabs a:hover {
    background: var(--dash-bg-muted);
    border-color: #d2d2d7;
}

.dashboard-tabs a.active {
    background: var(--dash-accent);
    color: #fff;
    border-color: var(--dash-accent);
}

/* Título da Página - Espaçamento */
.company-form-wrap h2,
.companies-list h2 {
    margin-bottom: 20px;
}

/* Product/Service URL Fields */
.product-url-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--dash-bg-inner);
    border-radius: 8px;
    border: 1px solid var(--dash-border);
}

.product-url-group label {
    margin-bottom: 4px;
}

.product-url-group input {
    margin-bottom: 0;
}

.add-product-btn {
    padding: 10px 16px;
    background: var(--dash-bg-inner);
    color: var(--dash-accent);
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.add-product-btn:hover {
    background: var(--dash-bg-muted);
    border-color: var(--dash-accent);
}


/* ========================================
   v1.9.6: PLANS INTEGRATION
   ======================================== */

/* Plan Badge */
.plan-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--dash-bg-inner);
    border-radius: 12px;
    border: 1px solid #d2d2d7;
}

.plan-badge .badge {
    background: var(--dash-accent);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.plan-badge.no-plan .badge {
    background: #ff3b30;
}

.plan-badge.expired .badge {
    background: #ff9500;
}

.plan-badge .status {
    font-size: 13px;
    color: var(--dash-text-muted);
}

.plan-badge .btn-upgrade {
    background: var(--dash-accent);
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.plan-badge .btn-upgrade:hover {
    background: var(--dash-accent-dark);
    transform: translateY(-1px);
}

.plan-badge.no-plan .btn-upgrade {
    background: #34c759;
}

/* Limits Widget */
.limits-widget {
    background: var(--dash-bg-card);
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.limits-widget h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dash-text);
}

.limit-item {
    margin-bottom: 16px;
}

.limit-item:last-child {
    margin-bottom: 0;
}

.limit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--dash-text);
}

.limit-bar {
    background: var(--dash-bg-inner);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.limit-progress {
    background: var(--dash-accent);
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.limit-progress[style*="100%"] {
    background: #ff3b30;
}

/* Responsive */
@media (max-width: 768px) {
    .plan-badge {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .limits-widget {
        margin-top: 16px;
    }
}

/* ========================================
   v1.9.7: PLANS v2.5.0 COMPLETE INTEGRATION
   ======================================== */

/* Domain Slots Widget */
.domain-slots-widget {
    background: var(--dash-bg-card);
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.domain-slots-widget h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dash-text);
}

.slots-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.slots-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-accent);
}

.slots-bar {
    background: var(--dash-bg-inner);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.slots-progress {
    height: 100%;
    border-radius: 4px;
    transition: all 0.3s;
}

.slots-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.slots-info span {
    color: var(--dash-text-muted);
}

.btn-buy-slots {
    background: #8b5cf6;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-buy-slots:hover {
    background: #7c3aed;
    transform: translateY(-1px);
}

/* Domain Selector */
.domain-selector {
    background: var(--dash-bg-inner);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

.domain-select {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    background: var(--dash-bg-card);
    color: var(--dash-text);
}

.btn-add-domain {
    background: #34c759;
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-add-domain:hover {
    background: #2fb34b;
    transform: translateY(-1px);
}

/* Locked Elements */
.locked-element {
    background: var(--dash-bg-inner);
    border: 2px dashed #d2d2d7;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin: 20px 0;
}

.locked-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.locked-content h4 {
    margin: 0 0 8px 0;
    color: var(--dash-text);
    font-size: 20px;
    font-weight: 600;
}

.locked-content p {
    margin: 0 0 16px 0;
    color: var(--dash-text-muted);
    font-size: 14px;
}

.btn-unlock {
    background: var(--dash-accent);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.2s;
}

.btn-unlock:hover {
    background: var(--dash-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

/* Feature Gate Styling */
.aitrust-feature-locked {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.aitrust-feature-locked::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .domain-selector {
        flex-direction: column;
    }
    
    .btn-add-domain,
    .btn-buy-slots {
        width: 100%;
    }
}

/* Grid responsivo para widgets lado a lado */
@media (max-width: 768px) {
    .dashboard-header > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}