/* ============================================
   CRM ELosool — Global theme bridge
   Maps landing page identity across all CRM pages
   Load AFTER main.css + sidebar.css (+ crm-pages.css)
   ============================================ */

:root {
    --brand: var(--osool-green-dark, #004931);
    --brand-dark: var(--osool-green-dark, #004931);
    --brand-light: var(--osool-tab-bg, rgba(0, 73, 49, 0.22));
    --card-bg: var(--bg-card);
    --bg-tertiary: var(--surface-2, #1a1a1a);
}

/* Cards, panels, stat boxes — dark landing surfaces */
.card,
.stat-card,
.summary-card,
.team-member-card,
.my-status-card,
.acct-stat,
.dist-step,
.dist-result-card,
.report-brand-header,
.modal-card,
.settings-card,
.filter-bar,
.kanban-column,
.invoice-card,
.company-card,
.dashboard-widget,
.page-content .card {
    background: var(--osool-bg-1, #212121) !important;
    border-color: var(--osool-border, #333) !important;
    color: var(--osool-text, #fff) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

/* Tables — landing green header */
.page-content .data-table thead,
.page-content .data-table th,
.voucher-table th,
.dist-preview-table th {
    background: linear-gradient(135deg, #B0944D 0%, #8a7340 100%) !important;
    background-color: #B0944D !important;
    color: #fff !important;
    vertical-align: middle !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

.page-content .data-table td,
.voucher-table td,
.dist-preview-table td {
    background: var(--osool-bg-1, #212121) !important;
    color: var(--osool-text-1, #E9ECF3) !important;
    border-bottom-color: var(--osool-border, #333) !important;
}

.page-content .data-table tbody tr:nth-child(even) {
    background: var(--osool-surface, #2A2A2A) !important;
}

.page-content .data-table tbody tr:hover {
    background: var(--osool-tab-bg, rgba(0, 73, 49, 0.22)) !important;
}

/* Toolbars & tabs */
.page-content .table-toolbar,
.status-tabs,
.dist-result-header {
    background: var(--osool-bg-1, #212121) !important;
    border-color: var(--osool-border, #333) !important;
}

.page-content .table-toolbar input,
.page-content .table-toolbar select,
.filter-bar input,
.filter-bar select {
    background: var(--osool-surface, #2A2A2A) !important;
    border-color: var(--osool-border, #333) !important;
    color: var(--osool-text, #fff) !important;
}

.page-content .table-toolbar input:focus,
.page-content .table-toolbar select:focus {
    border-color: var(--osool-gold, #CCB478) !important;
    box-shadow: 0 0 0 3px rgba(204, 180, 120, 0.12) !important;
}

.status-tab,
.voucher-tab,
.hero-tab-like,
.tab-btn {
    background: var(--osool-surface, #2A2A2A) !important;
    border-color: var(--osool-border, #333) !important;
    color: var(--osool-text-muted, #939599) !important;
}

.status-tab.active,
.voucher-tab.active {
    background: linear-gradient(135deg, rgba(204, 180, 120, 0.22), rgba(176, 148, 77, 0.14)) !important;
    border-color: rgba(204, 180, 120, 0.45) !important;
    color: #CCB478 !important;
    box-shadow: 0 4px 16px rgba(204, 180, 120, 0.12) !important;
}

/* Summary / stat numbers */
.leads-summary .summary-card,
.page-content .summary-card,
.page-content .stat-card {
    border-top-color: var(--card-accent, var(--osool-gold, #CCB478)) !important;
}

.summary-card.primary,
.stat-card.primary { --card-accent: var(--osool-gold, #CCB478); --card-glow: rgba(204, 180, 120, 0.14); }
.summary-card.success,
.stat-card.success { --card-accent: var(--osool-green, #00CA75); --card-glow: rgba(0, 202, 117, 0.12); }
.summary-card.danger,
.stat-card.danger { --card-accent: var(--osool-red, #FF4340); --card-glow: rgba(255, 67, 64, 0.12); }
.summary-card.warning,
.stat-card.warning { --card-accent: #f59e0b; --card-glow: rgba(245, 158, 11, 0.12); }
.summary-card.info,
.stat-card.info { --card-accent: #60a5fa; --card-glow: rgba(96, 165, 250, 0.12); }

.leads-summary .summary-card .summary-num,
.page-content .stat-card .stat-value,
.acct-stat-value {
    color: var(--card-accent, var(--osool-gold, #CCB478)) !important;
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.search-input {
    background: var(--osool-surface, #2A2A2A) !important;
    border-color: var(--osool-border, #333) !important;
    color: var(--osool-text, #fff) !important;
}

.page-content .table-toolbar input:focus,
.page-content .table-toolbar select:focus,
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--osool-gold, #CCB478) !important;
    box-shadow: 0 0 0 3px rgba(204, 180, 120, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--osool-text-muted, #939599) !important;
}

/* Badges & chips */
.badge,
.status-badge,
.tag,
.chip {
    border-color: var(--osool-border, #333) !important;
}

/* Modals */
.modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

.modal-card,
.modal-content,
.modal-body {
    background: var(--osool-bg-1, #212121) !important;
    border-color: var(--osool-border, #333) !important;
    color: var(--osool-text, #fff) !important;
}

/* Settings nav */
.settings-nav-item:hover {
    background: var(--osool-tab-bg) !important;
    color: var(--osool-cyan) !important;
}

.settings-nav-item.active {
    background: var(--osool-tab-bg) !important;
    border: 1px solid var(--osool-tab-border) !important;
    border-bottom: 2px solid var(--osool-green) !important;
    color: #fff !important;
}

/* Gold accents for premium elements */
.gold-text,
.text-gold,
.highlight-gold {
    color: var(--osool-gold, #CCB478) !important;
}

/* Header brand — natural inline text on one row */
.brand-title-inner {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.header-brand-title .brand-osool-word,
.header-brand-title .brand-rest-word,
.sidebar-logo-name .brand-osool-word,
.sidebar-logo-name .brand-rest-word {
    display: inline !important;
    line-height: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: var(--font) !important;
    vertical-align: unset !important;
    transform: none !important;
    height: auto !important;
}

.header-brand-title .brand-rest-word,
.sidebar-logo-name .brand-rest-word {
    letter-spacing: 0.02em !important;
}

.header-brand-title .brand-osool-word {
    color: var(--osool-gold, #CCB478) !important;
    text-shadow: 0 0 12px rgba(204, 180, 120, 0.35) !important;
}

/* Welcome hero banner — landing gold */
.welcome-section,
.dashboard-refresh .welcome-section {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.94) 0%, rgba(18, 14, 8, 0.9) 48%, rgba(10, 8, 4, 0.95) 100%) !important;
    border-color: rgba(204, 180, 120, 0.28) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(204, 180, 120, 0.08) !important;
}

.welcome-section::before {
    background: radial-gradient(circle, rgba(204, 180, 120, 0.22), transparent 70%) !important;
}

.welcome-section::after {
    background: radial-gradient(circle, rgba(176, 148, 77, 0.16), transparent 70%) !important;
}

.welcome-subtitle {
    color: rgba(204, 180, 120, 0.75) !important;
}

.welcome-typing,
#heroTypedText {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(204, 180, 120, 0.28) !important;
}

.welcome-cursor {
    color: var(--osool-gold, #CCB478) !important;
}

.hero-audio-wave span {
    background: linear-gradient(180deg, rgba(204, 180, 120, 0.95), rgba(176, 148, 77, 0.65)) !important;
}

.hero-flow-lines span {
    background: linear-gradient(90deg, transparent, rgba(204, 180, 120, 0.55), transparent) !important;
}

.hero-logo-shell img,
.welcome-section .welcome-logo img {
    filter: drop-shadow(0 0 18px rgba(204, 180, 120, 0.45)) !important;
}

.logo-orbit.orbit-one {
    border-color: rgba(204, 180, 120, 0.45) !important;
}

.logo-orbit.orbit-two {
    border-color: rgba(176, 148, 77, 0.42) !important;
}

.logo-core-glow {
    background: radial-gradient(circle, rgba(204, 180, 120, 0.24), rgba(176, 148, 77, 0.08) 55%, transparent 72%) !important;
}

.header,
.sidebar {
    background: var(--osool-chrome-bg) !important;
    border-color: var(--osool-chrome-border) !important;
}

/* Link call & special pages inline overrides */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#FFF"],
[style*="background: #FFF"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"] {
    background: var(--osool-bg-1, #212121) !important;
}

[style*="#A50E15"],
[style*="rgb(165, 14, 21)"],
[style*="rgb(215, 25, 32)"] {
    background-color: var(--osool-green-dark, #004931) !important;
}

/* PWA / offline banner */
.osool-offline-banner,
#pwaInstallBanner {
    background: var(--osool-bg-1) !important;
    border-color: var(--osool-border) !important;
    color: var(--osool-text) !important;
}
