/* CRM brand themes — dashboard, workspace, and left panel */

:root {
    --crm-primary: #ff7a59;
    --crm-primary-rgb: 255, 122, 89;
    --crm-light: #ff8a3d;
    --crm-accent: #ff6600;
    --crm-sub: rgba(255, 122, 89, 0.55);
    --crm-overlay-bg: rgba(8, 6, 4, 0.94);
    --crm-panel-tint: rgba(255, 122, 89, 0.04);
}

body[data-crm-theme="hubspot"] {
    --crm-primary: #ff7a59;
    --crm-primary-rgb: 255, 122, 89;
    --crm-light: #ff8a3d;
    --crm-accent: #ff6600;
    --crm-sub: rgba(255, 122, 89, 0.55);
    --crm-overlay-bg: rgba(10, 6, 4, 0.94);
    --crm-panel-tint: rgba(255, 122, 89, 0.05);
}

body[data-crm-theme="pipedrive"] {
    --crm-primary: #017737;
    --crm-primary-rgb: 1, 119, 55;
    --crm-light: #24a866;
    --crm-accent: #00bf5f;
    --crm-sub: rgba(1, 119, 55, 0.55);
    --crm-overlay-bg: rgba(4, 12, 7, 0.94);
    --crm-panel-tint: rgba(1, 119, 55, 0.06);
}

body[data-crm-theme="zoho"] {
    --crm-primary: #e42527;
    --crm-primary-rgb: 228, 37, 39;
    --crm-light: #f0483e;
    --crm-accent: #c41e20;
    --crm-sub: rgba(228, 37, 39, 0.55);
    --crm-overlay-bg: rgba(14, 4, 4, 0.94);
    --crm-panel-tint: rgba(228, 37, 39, 0.05);
}

body[data-crm-theme="close"] {
    --crm-primary: #2d7ff9;
    --crm-primary-rgb: 45, 127, 249;
    --crm-light: #5b9bf5;
    --crm-accent: #1a6fe8;
    --crm-sub: rgba(45, 127, 249, 0.55);
    --crm-overlay-bg: rgba(18, 22, 28, 0.96);
    --crm-panel-tint: rgba(45, 127, 249, 0.06);
}

body[data-crm-theme="freshworks"] {
    --crm-primary: #1CB4A0;
    --crm-primary-rgb: 28, 180, 160;
    --crm-light: #2dd4b8;
    --crm-accent: #12344D;
    --crm-sub: rgba(28, 180, 160, 0.55);
    --crm-overlay-bg: rgba(6, 14, 16, 0.96);
    --crm-panel-tint: rgba(28, 180, 160, 0.06);
}

body[data-crm-theme="monday"] {
    --crm-primary: #007F9B;
    --crm-primary-rgb: 0, 127, 155;
    --crm-light: #0096b8;
    --crm-accent: #006680;
    --crm-sub: rgba(0, 127, 155, 0.55);
    --crm-overlay-bg: rgba(4, 14, 18, 0.96);
    --crm-panel-tint: rgba(0, 127, 155, 0.06);
}

body[data-crm-theme="salesforce"] {
    --crm-primary: #00A1E0;
    --crm-primary-rgb: 0, 161, 224;
    --crm-light: #33b5e8;
    --crm-accent: #032D60;
    --crm-sub: rgba(0, 161, 224, 0.55);
    --crm-overlay-bg: rgba(4, 12, 20, 0.96);
    --crm-panel-tint: rgba(0, 161, 224, 0.06);
}

/* ── Navbar & workspace ── */
body[data-crm-theme] .nav-crm-btn.is-connected {
    border-color: rgba(var(--crm-primary-rgb), 0.38) !important;
    background: rgba(var(--crm-primary-rgb), 0.08) !important;
    color: var(--crm-primary) !important;
}

body[data-crm-theme] .workspace-quick-actions .hubspot-header-btn {
    color: var(--crm-light) !important;
    border-color: rgba(var(--crm-primary-rgb), 0.32) !important;
    background: rgba(var(--crm-primary-rgb), 0.07) !important;
}

body[data-crm-theme] .workspace-quick-actions .hubspot-header-btn:hover {
    border-color: rgba(var(--crm-primary-rgb), 0.48) !important;
    background: rgba(var(--crm-primary-rgb), 0.12) !important;
}

body[data-crm-theme] #leftTabHubspot.tab-btn.active {
    background: linear-gradient(135deg, rgba(var(--crm-primary-rgb), 0.18), rgba(var(--crm-primary-rgb), 0.08)) !important;
    color: var(--crm-light) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--crm-primary-rgb), 0.22) !important;
}

body[data-crm-theme] .crm-account-card.is-visible {
    background: rgba(var(--crm-primary-rgb), 0.07);
    border-color: rgba(var(--crm-primary-rgb), 0.22);
}

body[data-crm-theme] #leftPanelHubspot #hsContactListContainer {
    border-color: rgba(var(--crm-primary-rgb), 0.18) !important;
    background: rgba(var(--crm-primary-rgb), 0.03) !important;
}

body[data-crm-theme] .hs-contact-card:hover {
    border-color: rgba(var(--crm-primary-rgb), 0.28) !important;
    background: rgba(var(--crm-primary-rgb), 0.06) !important;
}

/* ── CRM dashboard overlay (shared by all CRMs) ── */
body[data-crm-theme] #hubspotDashboardOverlay {
    background: var(--crm-overlay-bg);
}

body[data-crm-theme] #hubspotDashboardOverlay .overlay-header {
    border-bottom-color: rgba(var(--crm-primary-rgb), 0.18) !important;
    background: linear-gradient(180deg, rgba(var(--crm-primary-rgb), 0.08), rgba(11, 12, 24, 0.96)) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .logo-main {
    background: linear-gradient(to right, #fff 55%, var(--crm-primary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .logo-sub {
    color: var(--crm-sub) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .header-metrics {
    background: rgba(var(--crm-primary-rgb), 0.05) !important;
    border-color: rgba(var(--crm-primary-rgb), 0.14) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .crm-primary-metric {
    color: var(--crm-primary) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .overlay-list-side {
    border-right-color: rgba(var(--crm-primary-rgb), 0.12) !important;
    background: rgba(var(--crm-primary-rgb), 0.03) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .overlay-detail-side > div:first-child {
    border-color: rgba(var(--crm-primary-rgb), 0.16) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .dot-gold,
body[data-crm-theme] #hubspotDashboardOverlay .dot-crm {
    background: var(--crm-primary);
    box-shadow: 0 0 8px rgba(var(--crm-primary-rgb), 0.35);
}

body[data-crm-theme] #hubspotDashboardOverlay #hsdGridContainer > div:hover,
body[data-crm-theme] #hubspotDashboardOverlay .hsd-card:hover {
    border-color: rgba(var(--crm-primary-rgb), 0.28) !important;
    background: rgba(var(--crm-primary-rgb), 0.05) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay input:focus,
body[data-crm-theme] #hubspotDashboardOverlay select:focus {
    border-color: rgba(var(--crm-primary-rgb), 0.38) !important;
    box-shadow: 0 0 0 2px rgba(var(--crm-primary-rgb), 0.08) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .crm-refresh-btn {
    border-color: rgba(var(--crm-primary-rgb), 0.42) !important;
    background: rgba(var(--crm-primary-rgb), 0.07) !important;
    color: var(--crm-primary) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .crm-refresh-btn:hover {
    border-color: rgba(var(--crm-primary-rgb), 0.55) !important;
    background: rgba(var(--crm-primary-rgb), 0.12) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .crm-enqueue-primary {
    border-color: rgba(var(--crm-primary-rgb), 0.35) !important;
    background: rgba(var(--crm-primary-rgb), 0.07) !important;
    color: var(--crm-light) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .hs-enqueue-btn:not(:disabled) {
    border-color: rgba(var(--crm-primary-rgb), 0.32) !important;
    background: rgba(var(--crm-primary-rgb), 0.06) !important;
    color: var(--crm-light) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay .hsd-summary-block > div:first-child {
    color: var(--crm-primary) !important;
}

body[data-crm-theme] #hubspotDashboardOverlay a[href^="http"] {
    color: var(--crm-light);
}

/* Provider picker — brand accent on selected card */
.crm-provider-card[data-crm="hubspot"].is-selected {
    border-color: rgba(255, 122, 89, 0.55);
    background: rgba(255, 122, 89, 0.08);
}

.crm-provider-card[data-crm="pipedrive"].is-selected {
    border-color: rgba(1, 119, 55, 0.55);
    background: rgba(1, 119, 55, 0.08);
}

.crm-provider-card[data-crm="zoho"].is-selected {
    border-color: rgba(228, 37, 39, 0.55);
    background: rgba(228, 37, 39, 0.08);
}

.crm-provider-card[data-crm="close"].is-selected {
    border-color: rgba(45, 127, 249, 0.55);
    background: rgba(45, 127, 249, 0.08);
}

.crm-provider-card[data-crm="monday"].is-selected {
    border-color: rgba(0, 127, 155, 0.55);
    background: rgba(0, 127, 155, 0.08);
}

.crm-provider-card[data-crm="salesforce"].is-selected {
    border-color: rgba(0, 161, 224, 0.55);
    background: rgba(0, 161, 224, 0.08);
}

.crm-provider-card[data-voip].is-selected {
    border-color: color-mix(in srgb, var(--crm-accent, var(--p)) 55%, transparent);
    background: color-mix(in srgb, var(--crm-accent, var(--p)) 8%, transparent);
}

body[data-crm-theme] .crm-connected-banner {
    background: rgba(var(--crm-primary-rgb), 0.08);
    border-color: rgba(var(--crm-primary-rgb), 0.24);
}

body[data-crm-theme] .crm-connected-banner h3 {
    color: var(--crm-primary);
}

/* Workspace buttons — always stacked, never overlap */
.workspace-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
}

.workspace-quick-actions .hbadge,
.workspace-quick-actions .workspace-btn,
.workspace-quick-actions .campaign-header-btn,
.workspace-quick-actions .hubspot-header-btn,
.workspace-quick-actions .agent-profile-header-btn {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: relative !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 32px;
    padding: 8px 10px !important;
}

.workspace-quick-actions .campaign-header-btn {
    justify-content: space-between !important;
}

.workspace-quick-actions .campaign-header-btn #activeCampaignLabel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    margin-left: 8px;
}

.workspace-quick-actions .hubspot-header-btn,
.workspace-quick-actions .agent-profile-header-btn {
    justify-content: center !important;
}

/* CRM dashboard — original layout, slightly tighter type + more breathing room */
#hubspotDashboardOverlay .overlay-header {
    height: 56px;
    padding: 0 26px;
}

#hubspotDashboardOverlay .overlay-header .logo-main {
    font-size: 0.78rem !important;
}

#hubspotDashboardOverlay .overlay-header .logo-sub {
    font-size: 0.45rem !important;
}

#hubspotDashboardOverlay .overlay-header .header-metrics {
    padding: 5px 14px;
    gap: 14px !important;
}

#hubspotDashboardOverlay .overlay-header .hm-l {
    font-size: 0.48rem;
}

#hubspotDashboardOverlay .overlay-header .hm-v {
    font-size: 0.68rem;
}

#hubspotDashboardOverlay .overlay-list-side {
    padding: 20px !important;
    gap: 16px !important;
}

#hubspotDashboardOverlay .overlay-detail-side {
    padding: 16px 20px !important;
    gap: 14px !important;
}

#hubspotDashboardOverlay .overlay-detail-side > .hsd-filter-toolbar {
    padding: 11px 14px !important;
    gap: 10px !important;
}

#hubspotDashboardOverlay .section-block {
    padding: 18px 16px !important;
}

#hubspotDashboardOverlay .hsd-card-grid {
    gap: 12px !important;
    padding: 6px 4px 14px !important;
}

#hubspotDashboardOverlay .hsd-card {
    padding: 12px 14px !important;
    gap: 9px !important;
}

#hubspotDashboardOverlay .hsd-card-meta {
    padding: 9px 10px !important;
    font-size: 0.6rem !important;
    gap: 5px 10px !important;
}

#hubspotDashboardOverlay .hsd-card-badges span {
    font-size: 0.56rem !important;
    padding: 2px 7px !important;
}

#hubspotDashboardOverlay .hsd-status-row {
    padding: 7px 10px !important;
}

#hubspotDashboardOverlay .hsd-status-row select {
    font-size: 0.64rem !important;
    padding: 5px 8px !important;
}

#hubspotDashboardOverlay .hsd-summary-block > div:first-child {
    font-size: 0.62rem !important;
}

#hubspotDashboardOverlay .hsd-summary-block > div:last-child {
    font-size: 0.62rem !important;
    padding: 9px 10px !important;
    max-height: 92px !important;
}

#hubspotDashboardOverlay .btn-apply-config {
    padding: 8px 14px !important;
    font-size: 0.6rem !important;
}

#hubspotDashboardOverlay #hsdGridContainer {
    padding: 2px 4px 6px;
}