/* =============================================
   CompsaOnline Filament Panel Theme
   White surfaces + corporate blue #4470b4
   ============================================= */

.fi-panel-admin {
    --compsa-blue: #4470b4;
    --compsa-blue-dark: #355c9a;
    --compsa-blue-soft: #eef4ff;
    --compsa-border: #d8e4f8;
    --compsa-text: #23416e;
    --compsa-muted: #6c84a8;

    --primary-50: 239 245 255;
    --primary-100: 221 234 251;
    --primary-200: 195 216 246;
    --primary-300: 158 191 238;
    --primary-400: 108 153 222;
    --primary-500: 68 112 180;
    --primary-600: 53 92 154;
    --primary-700: 40 72 124;
    --primary-800: 34 60 102;
    --primary-900: 29 51 86;
    --primary-950: 19 33 56;
}

.fi-body,
.fi-main {
    background: linear-gradient(180deg, #f8fbff 0%, #eff5ff 100%);
    color: var(--compsa-text);
}

.fi-topbar,
.fi-topbar-ctn {
    background: #ffffff;
    border-bottom: 1px solid var(--compsa-border);
    box-shadow: 0 4px 12px rgba(68, 112, 180, 0.08);
}

.fi-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    border-right: 1px solid var(--compsa-border);
}

.fi-sidebar-header,
.fi-sidebar-header-ctn {
    background: transparent;
}

.fi-sidebar-group-label {
    color: var(--compsa-muted);
    font-weight: 600;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-btn,
.fi-sidebar-group-collapse-btn {
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-group-btn:hover,
.fi-sidebar-group-collapse-btn:hover {
    background: var(--compsa-blue-soft);
    border-color: #c8d9f4;
    color: var(--compsa-text);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active,
.fi-active.fi-sidebar-item-btn {
    background: #e7f0ff;
    border-color: #b7cdf2;
    color: var(--compsa-text);
    box-shadow: inset 3px 0 0 var(--compsa-blue);
}

.fi-header-heading,
.fi-page h1,
.fi-page h2,
.fi-page h3,
.fi-page h4 {
    color: var(--compsa-text);
}

.fi-page,
.fi-page-content,
.fi-main-ctn {
    color: var(--compsa-text);
}

.fi-dropdown-panel,
.fi-dropdown-list,
.fi-dropdown-header,
.fi-theme-switcher,
.fi-user-menu {
    border: 1px solid var(--compsa-border);
    box-shadow: 0 8px 20px rgba(68, 112, 180, 0.12);
}

.fi-theme-switcher-btn,
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn,
.fi-icon-btn {
    border-color: #c9daf5;
    background: #f3f8ff;
    color: var(--compsa-blue-dark);
}

.fi-theme-switcher-btn:hover,
.fi-topbar-open-sidebar-btn:hover,
.fi-topbar-close-sidebar-btn:hover,
.fi-icon-btn:hover {
    background: #e2ecff;
    border-color: #9ebae7;
}

.fi-btn,
.fi-ac-btn-action,
button[type='submit'] {
    border-radius: 10px;
}

.fi-btn-color-primary,
.fi-ac-btn-action.fi-color-primary,
.fi-ac-btn-action[style*='primary'] {
    background: linear-gradient(180deg, #4c79bf 0%, #4470b4 100%);
    border-color: #355c9a;
    color: #ffffff;
}

.fi-btn-color-primary:hover,
.fi-ac-btn-action.fi-color-primary:hover,
.fi-ac-btn-action[style*='primary']:hover {
    background: linear-gradient(180deg, #406ab0 0%, #355c9a 100%);
}

.fi-input,
.fi-select-input,
.fi-ta-input,
.fi-fo-field-wrp input,
.fi-fo-field-wrp select,
.fi-fo-field-wrp textarea {
    border-color: #ccd9ef;
}

.fi-input:focus,
.fi-select-input:focus,
.fi-ta-input:focus,
.fi-fo-field-wrp input:focus,
.fi-fo-field-wrp select:focus,
.fi-fo-field-wrp textarea:focus {
    border-color: #4470b4;
    box-shadow: 0 0 0 3px rgba(68, 112, 180, 0.14);
}

.fi-fo-field-wrp-label,
.fi-ta-label,
.fi-input-wrp-label {
    color: var(--compsa-text);
}

.fi-section,
.fi-card,
.fi-widget,
.fi-tabs,
.fi-in-entry,
.fi-ta,
.fi-fo-field-wrp,
.fi-page-header-main-ctn {
    border-color: var(--compsa-border);
}

/* =============================================
   Newsletter Plugin Pages (all custom pages)
   ============================================= */

.campaign-create-container,
.campaign-manage-container,
.mail-config-container,
.newsletter-diagnostics-container,
.newsletter-detail-container,
.newsletter-logs-container,
.run-detail-container,
.subscribers-container,
.mail-templates-container {
    --brand-blue: #4470b4;
    --brand-blue-dark: #355c9a;
    --brand-blue-soft: #eef4ff;
    --brand-border: #d8e4f8;
    --brand-text: #23416e;
    --brand-muted: #667fa4;
}

.campaign-create-container .stat-card,
.campaign-manage-container .stat-card,
.newsletter-diagnostics-container .diag-stat-card,
.newsletter-diagnostics-container .diag-panel,
.newsletter-diagnostics-container .diag-snapshot-box,
.newsletter-detail-container .campaign-header,
.newsletter-detail-container .campaign-actions,
.newsletter-detail-container .logs-section,
.newsletter-logs-container .stat-card,
.newsletter-logs-container .campaign-filter-banner,
.run-detail-container .run-header,
.subscribers-container .subs-stat,
.subscribers-container .subs-toolbar,
.mail-config-container .config-sidebar,
.mail-config-container .config-content,
.mail-config-container .config-section {
    border-color: var(--brand-border);
    box-shadow: 0 8px 20px rgba(68, 112, 180, 0.08);
}

.campaign-create-container .back-link a,
.campaign-manage-container .stat-label,
.newsletter-diagnostics-container .diag-stat-label,
.newsletter-logs-container .banner-content,
.newsletter-detail-container .campaign-subject,
.newsletter-detail-container .campaign-meta span,
.run-detail-container .run-meta,
.subscribers-container .subs-stat-label,
.subscribers-container .subs-search-box input,
.mail-config-container .section-description,
.mail-config-container .form-hint {
    color: var(--brand-muted);
}

.campaign-create-container .back-link a:hover,
.newsletter-logs-container .btn-clear-campaign,
.newsletter-detail-container .campaign-title-row h2,
.run-detail-container .run-number,
.mail-config-container .sidebar-header svg,
.mail-config-container .section-title svg,
.mail-config-container .section-title,
.mail-config-container .config-nav-item.active,
.campaign-manage-container .campaign-stats-row .stat-card.active,
.subscribers-container .subs-stat.active,
.subscribers-container .subs-stat-value,
.newsletter-diagnostics-container .diag-stat-value.is-blue {
    color: var(--brand-blue);
}

.campaign-manage-container .campaign-stats-row .stat-card.active,
.subscribers-container .subs-stat.active,
.mail-config-container .config-nav-item.active,
.newsletter-logs-container .campaign-filter-banner,
.newsletter-logs-container .btn-clear-campaign:hover {
    background: var(--brand-blue-soft);
    border-color: #b7cdf2;
}

.newsletter-logs-container .btn-clear-campaign,
.subscribers-container .subs-search-box input,
.campaign-manage-container .search-box input,
.mail-config-container .form-input,
.mail-config-container select,
.mail-config-container textarea {
    border-color: var(--brand-border);
}

.subscribers-container .subs-search-box input:focus,
.campaign-manage-container .search-box input:focus,
.mail-config-container .form-input:focus,
.mail-config-container select:focus,
.mail-config-container textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(68, 112, 180, 0.14);
}

.campaign-create-container .dark .stat-card,
.run-detail-container .dark .run-header,
.campaign-create-container .dark .campaign-preview,
.campaign-create-container .dark .campaign-preview-card {
    background: #ffffff;
    border-color: var(--brand-border);
    color: var(--brand-text);
}

.campaign-create-container .btn-primary,
.campaign-create-container .btn-preview-send,
.campaign-manage-container .btn-create,
.campaign-manage-container .btn-create-empty,
.mail-config-container .btn-save,
.mail-templates-container .btn-new,
.mail-templates-container .btn-save,
.newsletter-detail-container .btn-save,
.subscribers-container .btn-primary {
    background: linear-gradient(180deg, #4c79bf 0%, #4470b4 100%);
    border-color: #355c9a;
    color: #ffffff;
}

.campaign-create-container .btn-primary:hover,
.campaign-create-container .btn-preview-send:hover,
.campaign-manage-container .btn-create:hover,
.campaign-manage-container .btn-create-empty:hover,
.mail-config-container .btn-save:hover,
.mail-templates-container .btn-new:hover,
.mail-templates-container .btn-save:hover,
.newsletter-detail-container .btn-save:hover,
.subscribers-container .btn-primary:hover {
    background: linear-gradient(180deg, #406ab0 0%, #355c9a 100%);
}

.campaign-create-container .btn-secondary,
.campaign-manage-container .btn-clear-filters,
.mail-config-container .btn-secondary,
.newsletter-detail-container .btn-clear,
.newsletter-detail-container .btn-secondary,
.newsletter-logs-container .btn-clear,
.newsletter-logs-container .btn-view,
.newsletter-logs-container .btn-clear-campaign,
.run-detail-container .btn-clear-filters,
.subscribers-container .btn-secondary {
    background: #ffffff;
    border-color: #b7cdf2;
    color: #355c9a;
}

.campaign-create-container .btn-secondary:hover,
.campaign-manage-container .btn-clear-filters:hover,
.mail-config-container .btn-secondary:hover,
.newsletter-detail-container .btn-clear:hover,
.newsletter-detail-container .btn-secondary:hover,
.newsletter-logs-container .btn-clear:hover,
.newsletter-logs-container .btn-view:hover,
.newsletter-logs-container .btn-clear-campaign:hover,
.run-detail-container .btn-clear-filters:hover,
.subscribers-container .btn-secondary:hover {
    background: #eef4ff;
    border-color: #9fbce8;
    color: #23416e;
}
