/* ═══════════════════════════════════════════════════════════════
   CLIENT PORTAL — High-End Dark Commerce Dashboard
   Design: data-console aesthetic, amber accent, tabular numerics
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens (client portal overrides) ─────────────── */
:root {
  --cl-bg:          #F6F8FB;
  --cl-surface:     #FFFFFF;
  --cl-surface-2:   #F8FAFC;
  --cl-surface-3:   #F1F5F9;
  --cl-border:      rgba(15,23,42,0.07);
  --cl-border-2:    rgba(15,23,42,0.12);
  --cl-text-1:      #0F172A;
  --cl-text-2:      #475569;
  --cl-text-3:      #64748B;
  --cl-amber:       #B45309;
  --cl-amber-dim:   rgba(217,119,6,0.12);
  --cl-green:       #10B981;
  --cl-green-dim:   rgba(16,185,129,0.1);
  --cl-red:         #DC2626;
  --cl-red-dim:     rgba(220,38,38,0.1);
  --cl-blue:        #2563EB;
  --cl-blue-dim:    rgba(37,99,235,0.1);
  --cl-purple:      #7C3AED;
  --cl-purple-dim:  rgba(124,58,237,0.1);
  --cl-amz:         #FF9900;
  --cl-fk:          #2874F0;
  --cl-ms:          #9333EA;
  --cl-radius:      12px;
  --cl-radius-sm:   8px;
  --cl-radius-lg:   16px;
  --cl-shadow:      0 1px 3px rgba(15,23,42,0.07), 0 4px 20px rgba(15,23,42,0.04);
  --cl-shadow-lg:   0 2px 6px rgba(15,23,42,0.09), 0 12px 40px rgba(15,23,42,0.06);
  --cl-trans:       all 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ── Role scoping ────────────────────────────────────────── */
.client-only        { display: none !important; }
.role-client .client-only     { display: flex !important; }
.role-client .admin-only      { display: none !important; }
.role-client .member-only     { display: none !important; }
.role-client .non-client-only { display: none !important; }
.role-client #btnNewTask      { display: none !important; }
.role-client .search-wrap     { display: none !important; }
.role-client .sb-section-label.client-only { display: block !important; }

/* ── Client: full dark shell ─────────────────────────────── */
.role-client body                 { background: var(--cl-bg); }
.role-client .app-main            { background: var(--cl-bg); }
.role-client .page-content        { padding: 28px 32px; }
.role-client .topbar {
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-border);
}
.role-client .topbar-left h1      { color: var(--cl-text-1); font-size: 15px; letter-spacing: -0.01em; }
.role-client .topbar-left p       { color: var(--cl-text-3); }

/* Sidebar — dark navy with amber accent */
.role-client .sidebar {
  background: #F6F8FB;
  border-right: 1px solid var(--cl-border);
}
.role-client .sidebar-header      { padding: 22px 20px 10px; }
.role-client .brand-wordmark      { color: #fff; letter-spacing: -0.04em; }
.role-client .sb-section-label {
  color: rgba(15,23,42,0.12);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  padding: 0 10px;
  margin: 18px 0 6px;
}
.role-client .sb-item {
  color: rgba(15,23,42,0.12);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 9px 12px;
  gap: 9px;
  margin-bottom: 1px;
}
.role-client .sb-item:hover {
  background: rgba(15,23,42,0.05);
  color: rgba(15,23,42,0.12);
}
.role-client .sb-item.active {
  background: var(--cl-amber-dim);
  color: var(--cl-amber);
  font-weight: 600;
}
.role-client .sb-item.active svg  { stroke: var(--cl-amber); }
.role-client .sb-role-chip {
  background: var(--cl-amber-dim);
  color: var(--cl-amber);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}
.role-client .sb-user             { border-top: 1px solid var(--cl-border); }
.role-client .sb-user-info strong { color: rgba(15,23,42,0.12); }

/* Auth: client note */
.auth-client-note {
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.2);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #D97706;
  font-weight: 500;
  margin-top: -8px;
  display: none;
  line-height: 1.5;
}
.auth-client-note.visible { display: block; }

/* ══════════════════════════════════════════════════════════
   HERO STRIP
   ══════════════════════════════════════════════════════════ */
.cl-hero {
  position: relative;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
}
/* Signature: amber line at left edge */
.cl-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cl-amber) 0%, transparent 100%);
  border-radius: 3px 0 0 3px;
}
/* Subtle grid texture */
.cl-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.cl-hero-text { position: relative; z-index: 1; }
.cl-hero-text h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--cl-text-1);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  line-height: 1.2;
}
.cl-hero-text p {
  font-size: 13px;
  color: var(--cl-text-3);
  line-height: 1.6;
  max-width: 480px;
}
.cl-hero-badge {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.cl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cl-status-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.cl-status-active  { background: var(--cl-green-dim);  color: var(--cl-green); border: 1px solid rgba(16,185,129,0.2); }
.cl-status-paused  { background: var(--cl-amber-dim);  color: var(--cl-amber); border: 1px solid rgba(217,119,6,0.2); }
.cl-status-inactive{ background: var(--cl-red-dim);    color: var(--cl-red);   border: 1px solid rgba(220,38,38,0.2); }
.cl-hero-date {
  font-size: 11px;
  color: var(--cl-text-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════
   KPI CARDS — signature: left border accent, tabular nums
   ══════════════════════════════════════════════════════════ */
.cl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--cl-border);
  border-radius: var(--cl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--cl-border);
  margin-bottom: 20px;
}
.cl-kpi {
  background: var(--cl-surface);
  padding: 20px 22px;
  position: relative;
  transition: var(--cl-trans);
  cursor: default;
}
.cl-kpi:hover { background: var(--cl-surface-2); }

/* Signature left-border accent */
.cl-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.18s;
}
.cl-kpi:hover::before { opacity: 1; }
/* Each KPI gets its own accent color via inline style on .cl-kpi-accent — repurpose as data- */
.cl-kpi-accent {
  display: none; /* color stored, used by JS to set ::before via CSS var */
}

/* Fallback: static accent colors by position */
.cl-kpi:nth-child(1)::before { background: var(--cl-amber); }
.cl-kpi:nth-child(2)::before { background: var(--cl-green); }
.cl-kpi:nth-child(3)::before { background: var(--cl-blue); }
.cl-kpi:nth-child(4)::before { background: var(--cl-purple); }
.cl-kpi:nth-child(5)::before { background: #F472B6; }
.cl-kpi:nth-child(6)::before { background: #059669; }
.cl-kpi:nth-child(7)::before { background: #0284C7; }
.cl-kpi:nth-child(8)::before { background: var(--cl-green); }

.cl-kpi-icon { display: none; } /* remove emoji icons — data consoles don't need them */

.cl-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--cl-text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.cl-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--cl-text-1);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.cl-kpi-sub {
  font-size: 11px;
  color: var(--cl-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cl-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.trend-up   { background: var(--cl-green-dim);  color: var(--cl-green); }
.trend-down { background: var(--cl-red-dim);    color: var(--cl-red); }
.trend-flat { background: rgba(15,23,42,0.05); color: var(--cl-text-3); }

/* ══════════════════════════════════════════════════════════
   MARKETPLACE PLATFORM CARDS
   ══════════════════════════════════════════════════════════ */
.cl-platform-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.cl-platform-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: 20px;
  transition: var(--cl-trans);
  position: relative;
  overflow: hidden;
}
.cl-platform-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  opacity: 0;
  transition: opacity 0.18s;
}
.cl-platform-card:hover { border-color: var(--cl-border-2); }
.cl-platform-card:hover::after { opacity: 1; }

/* Amazon glow */
#clPlatform_amazon::after { background: linear-gradient(90deg, transparent, var(--cl-amz), transparent); }
#clPlatform_amazon:hover  { box-shadow: 0 0 0 1px rgba(255,153,0,0.15), 0 4px 24px rgba(255,153,0,0.06); }

/* Flipkart glow */
#clPlatform_flipkart::after { background: linear-gradient(90deg, transparent, var(--cl-fk), transparent); }
#clPlatform_flipkart:hover  { box-shadow: 0 0 0 1px rgba(40,116,240,0.15), 0 4px 24px rgba(40,116,240,0.06); }

/* Meesho glow */
#clPlatform_meesho::after { background: linear-gradient(90deg, transparent, var(--cl-ms), transparent); }
#clPlatform_meesho:hover  { box-shadow: 0 0 0 1px rgba(147,51,234,0.15), 0 4px 24px rgba(147,51,234,0.06); }

.cl-platform-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cl-border);
}
.cl-platform-logo {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}
.cl-platform-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cl-text-1);
  letter-spacing: -0.01em;
}
.cl-platform-status {
  font-size: 10.5px;
  color: var(--cl-text-3);
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.cl-platform-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--cl-border);
  border-radius: var(--cl-radius-sm);
  overflow: hidden;
}
.cl-pstat {
  background: var(--cl-surface-2);
  padding: 11px 13px;
}
.cl-pstat-label {
  font-size: 9.5px;
  color: var(--cl-text-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
.cl-pstat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD 2-COL LAYOUT
   ══════════════════════════════════════════════════════════ */
.cl-dash-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.cl-chart-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: 22px;
}
.cl-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.cl-chart-head h3 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cl-text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cl-chart-tabs {
  display: flex;
  background: var(--cl-surface-2);
  border-radius: 6px;
  padding: 2px;
  gap: 1px;
}
.cl-tab {
  border: none;
  background: transparent;
  border-radius: 5px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cl-text-3);
  cursor: pointer;
  transition: var(--cl-trans);
  letter-spacing: 0.01em;
}
.cl-tab.active {
  background: var(--cl-surface-3);
  color: var(--cl-text-1);
}
.cl-chart-wrap { position: relative; height: 200px; }

/* Activity feed */
.cl-activity-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cl-activity-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.cl-act-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cl-border);
}
.cl-act-item:last-child { border-bottom: none; }
.cl-act-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.cl-act-body { flex: 1; min-width: 0; }
.cl-act-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cl-text-1);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-act-sub   { font-size: 11.5px; color: var(--cl-text-3); }
.cl-act-time  { font-size: 10.5px; color: var(--cl-text-3); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════
   SECTION HEADERS (used across all views)
   ══════════════════════════════════════════════════════════ */
.cl-analytics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.cl-analytics-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--cl-text-1);
  letter-spacing: -0.025em;
}
.cl-analytics-header p {
  font-size: 12.5px;
  color: var(--cl-text-3);
  margin-top: 3px;
  line-height: 1.5;
}

/* Generic section card override for client views */
.role-client .section-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: none;
  padding: 22px;
}
.role-client .section-card .sc-head h3 {
  color: var(--cl-text-2);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.role-client .badge-count {
  background: var(--cl-surface-3);
  color: var(--cl-text-3);
  border-color: var(--cl-border);
}

/* ══════════════════════════════════════════════════════════
   ANALYTICS — FUNNEL
   ══════════════════════════════════════════════════════════ */
.cl-funnel-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--cl-border);
  border-radius: var(--cl-radius-sm);
  overflow: hidden;
}
.cl-funnel-step {
  background: var(--cl-surface-2);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  position: relative;
  transition: var(--cl-trans);
}
.cl-funnel-step:hover { background: var(--cl-surface-3); }
.cl-funnel-step::after {
  content: '›';
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cl-text-3);
  font-size: 18px;
  font-weight: 300;
  z-index: 1;
}
.cl-funnel-step:last-child::after { display: none; }
.cl-funnel-icon { font-size: 16px; margin-bottom: 1px; }
.cl-funnel-val {
  font-size: 19px;
  font-weight: 700;
  color: var(--cl-text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.cl-funnel-lbl {
  font-size: 10px;
  color: var(--cl-text-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cl-funnel-rate {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--cl-green-dim);
  color: var(--cl-green);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   ANALYTICS — CHARTS GRID
   ══════════════════════════════════════════════════════════ */
.cl-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.cl-chart-inner { position: relative; height: 220px; }

/* ══════════════════════════════════════════════════════════
   TABLES — Campaign / Keyword
   ══════════════════════════════════════════════════════════ */
.cl-table-wrap {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.cl-table-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cl-table-head h3 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cl-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cl-table {
  width: 100%;
  border-collapse: collapse;
}
.cl-table thead tr {
  background: var(--cl-surface-2);
  border-bottom: 1px solid var(--cl-border);
}
.cl-table th {
  padding: 9px 16px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--cl-text-3);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.cl-table th.r  { text-align: right; }
.cl-table td {
  padding: 11px 16px;
  font-size: 12.5px;
  color: var(--cl-text-2);
  border-bottom: 1px solid var(--cl-border);
  font-variant-numeric: tabular-nums;
}
.cl-table td.r  { text-align: right; color: var(--cl-text-1); font-weight: 600; }
.cl-table tbody tr:last-child td { border-bottom: none; }
.cl-table tbody tr:hover { background: var(--cl-surface-2); }
.cl-progress-bar {
  height: 4px;
  background: rgba(15,23,42,0.06);
  border-radius: 99px;
  overflow: hidden;
  width: 60px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.cl-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--cl-amber);
}

/* ══════════════════════════════════════════════════════════
   REPORTS GRID
   ══════════════════════════════════════════════════════════ */
.cl-reports-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.cl-report-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--cl-trans);
}
.cl-report-card:hover {
  border-color: var(--cl-border-2);
  background: var(--cl-surface-2);
  transform: translateY(-1px);
}
.cl-report-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 18px;
}
.cl-report-meta h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cl-text-1);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cl-report-meta p {
  font-size: 11.5px;
  color: var(--cl-text-3);
  line-height: 1.5;
}
.cl-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--cl-border);
}
.cl-report-date {
  font-size: 11px;
  color: var(--cl-text-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cl-report-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.report-new    { background: var(--cl-green-dim); color: var(--cl-green); }
.report-read   { background: rgba(15,23,42,0.05); color: var(--cl-text-3); }
.report-urgent { background: var(--cl-red-dim); color: var(--cl-red); }

/* ══════════════════════════════════════════════════════════
   MESSAGES
   ══════════════════════════════════════════════════════════ */
.cl-messages-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  height: calc(100vh - 170px);
  min-height: 480px;
}
.cl-thread-list {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cl-thread-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cl-thread-header h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--cl-text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cl-thread-items { flex: 1; overflow-y: auto; }
.cl-thread-item {
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--cl-border);
  transition: var(--cl-trans);
  position: relative;
}
.cl-thread-item:hover { background: var(--cl-surface-2); }
.cl-thread-item.active {
  background: var(--cl-amber-dim);
  border-left: 2px solid var(--cl-amber);
}
.cl-thread-item.unread .cl-ti-title { color: var(--cl-text-1); font-weight: 700; }
.cl-thread-item.unread::after {
  content: '';
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cl-amber);
}
.cl-ti-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cl-text-2);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-ti-preview {
  font-size: 11px;
  color: var(--cl-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-ti-time { font-size: 10px; color: var(--cl-text-3); margin-top: 4px; }

.cl-chat-panel {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cl-chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--cl-border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cl-surface-2);
}
.cl-chat-header-info h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cl-text-1);
  letter-spacing: -0.01em;
}
.cl-chat-header-info p  { font-size: 11.5px; color: var(--cl-text-3); }
.cl-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cl-bg);
}
.cl-msg {
  display: flex;
  gap: 10px;
  max-width: 78%;
}
.cl-msg.outgoing { align-self: flex-end; flex-direction: row-reverse; }
.cl-msg-avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: var(--cl-surface-3);
  border: 1px solid var(--cl-border);
}
.cl-msg.outgoing .cl-msg-avatar {
  background: rgba(217,119,6,0.15);
  border-color: rgba(217,119,6,0.2);
  color: var(--cl-amber);
}
.cl-msg-bubble {
  background: var(--cl-surface-2);
  border: 1px solid var(--cl-border);
  border-radius: 0 12px 12px 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--cl-text-2);
  line-height: 1.6;
}
.cl-msg.outgoing .cl-msg-bubble {
  background: rgba(217,119,6,0.1);
  border-color: rgba(217,119,6,0.18);
  color: var(--cl-text-1);
  border-radius: 12px 0 12px 12px;
}
.cl-msg-time {
  font-size: 10px;
  color: var(--cl-text-3);
  margin-top: 5px;
  text-align: left;
}
.cl-msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cl-surface-2);
  border: 1px solid var(--cl-border);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cl-text-1);
  cursor: pointer;
  transition: var(--cl-trans);
}
.cl-msg-file:hover { border-color: var(--cl-amber); }
.cl-chat-input-wrap {
  padding: 14px 16px;
  border-top: 1px solid var(--cl-border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--cl-surface);
}
.cl-chat-input {
  flex: 1;
  background: var(--cl-surface-2);
  border: 1px solid var(--cl-border);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--cl-text-1);
  resize: none;
  min-height: 40px;
  max-height: 110px;
  outline: none;
  transition: var(--cl-trans);
  font-family: inherit;
}
.cl-chat-input::placeholder { color: var(--cl-text-3); }
.cl-chat-input:focus {
  border-color: rgba(217,119,6,0.4);
  background: var(--cl-surface-3);
}
.cl-chat-input:focus ~ .cl-send-btn { border-color: var(--cl-amber); }

/* ══════════════════════════════════════════════════════════
   BILLING
   ══════════════════════════════════════════════════════════ */
.cl-billing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cl-border);
  border-radius: var(--cl-radius);
  overflow: hidden;
  border: 1px solid var(--cl-border);
  margin-bottom: 16px;
}
.cl-billing-card {
  background: var(--cl-surface);
  padding: 22px;
}
.cl-kpi-label { /* reused */
  font-size: 10px;
  font-weight: 700;
  color: var(--cl-text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.cl-billing-amount {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--cl-text-1);
  font-variant-numeric: tabular-nums;
}
.cl-billing-sub { font-size: 11.5px; color: var(--cl-text-3); margin-top: 4px; }

.cl-invoice-list {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  overflow: hidden;
}
.cl-invoice-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cl-border);
  gap: 14px;
  transition: var(--cl-trans);
}
.cl-invoice-row:last-child { border-bottom: none; }
.cl-invoice-row:hover { background: var(--cl-surface-2); }
.cl-inv-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--cl-surface-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--cl-border);
  font-size: 16px;
}
.cl-inv-info { flex: 1; min-width: 0; }
.cl-inv-info h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-text-1);
  letter-spacing: -0.01em;
}
.cl-inv-info p  { font-size: 11.5px; color: var(--cl-text-3); margin-top: 1px; }
.cl-inv-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--cl-text-1);
  font-variant-numeric: tabular-nums;
}
.cl-inv-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cl-inv-date  { font-size: 10.5px; color: var(--cl-text-3); font-variant-numeric: tabular-nums; }
.inv-paid     { background: var(--cl-green-dim); color: var(--cl-green); }
.inv-pending  { background: var(--cl-amber-dim); color: var(--cl-amber); }
.inv-overdue  { background: var(--cl-red-dim);   color: var(--cl-red); }

/* ══════════════════════════════════════════════════════════
   GOALS
   ══════════════════════════════════════════════════════════ */
.cl-goals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.cl-goal-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: 22px;
}
.cl-goal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 10px;
}
.cl-goal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cl-text-1);
  letter-spacing: -0.01em;
}
.cl-goal-period {
  font-size: 10px;
  color: var(--cl-text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.cl-goal-main {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.cl-goal-current {
  font-size: 34px;
  font-weight: 700;
  color: var(--cl-text-1);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.cl-goal-target {
  font-size: 13px;
  color: var(--cl-text-3);
  margin-bottom: 5px;
}
.cl-goal-bar-track {
  height: 4px;
  background: rgba(15,23,42,0.07);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cl-goal-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.cl-goal-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--cl-text-3);
}
.cl-goal-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-radial-wrap {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}
.cl-radial-wrap svg { transform: rotate(-90deg); }
.cl-radial-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--cl-text-1);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   BUDGET TRACKER
   ══════════════════════════════════════════════════════════ */
.cl-quick-row {
  display: flex;
  gap: 0;
  background: var(--cl-border);
  border-radius: var(--cl-radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.cl-quick-item {
  flex: 1;
  background: var(--cl-surface-2);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid var(--cl-border);
}
.cl-quick-item:last-child { border-right: none; }
.cl-quick-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--cl-text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.cl-quick-lbl {
  font-size: 9.5px;
  color: var(--cl-text-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ══════════════════════════════════════════════════════════
   NOTICES + SKELETON
   ══════════════════════════════════════════════════════════ */
.cl-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.cl-notice-info    { background: var(--cl-blue-dim);  border: 1px solid rgba(37,99,235,0.15); color: var(--cl-blue); }
.cl-notice-success { background: var(--cl-green-dim); border: 1px solid rgba(16,185,129,0.15); color: var(--cl-green); }
.cl-notice-warning { background: var(--cl-amber-dim); border: 1px solid rgba(217,119,6,0.15); color: var(--cl-amber); }

.cl-skeleton {
  background: linear-gradient(90deg, var(--cl-surface) 25%, var(--cl-surface-2) 50%, var(--cl-surface) 75%);
  background-size: 200% 100%;
  animation: clShimmer 1.6s infinite;
  border-radius: 8px;
}
@keyframes clShimmer { to { background-position: -200% 0; } }

/* ══════════════════════════════════════════════════════════
   ADMIN CLIENT MANAGER VIEW (dark override)
   ══════════════════════════════════════════════════════════ */
.cl-admin-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 16px;
}
.cl-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 9px;
  transition: var(--cl-trans);
  border: 1px solid transparent;
  cursor: pointer;
}
.cl-client-row:hover { background: var(--cl-surface-2); border-color: var(--cl-border); }
.cl-client-row.selected { background: var(--cl-amber-dim); border-color: rgba(217,119,6,0.2); }
.cl-client-avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #F1F5F9, #0D9488);
  border: 1px solid rgba(15,23,42,0.08);
}
.cl-client-info h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-client-info p  { font-size: 11px; color: var(--cl-text-3); margin-top: 2px; }
.cl-stats-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cl-stats-form .field-full { grid-column: 1/-1; }

/* Upload form */
.cl-upload-form {
  background: var(--cl-surface-2);
  border: 1px dashed rgba(15,23,42,0.1);
  border-radius: var(--cl-radius);
  padding: 28px;
  text-align: center;
  transition: var(--cl-trans);
  cursor: pointer;
  margin-bottom: 16px;
}
.cl-upload-form:hover { border-color: rgba(217,119,6,0.3); background: rgba(217,119,6,0.03); }
.cl-upload-form p { font-size: 13px; color: var(--cl-text-3); }
.cl-upload-form span { font-size: 11.5px; color: var(--cl-text-3); opacity: 0.6; display: block; margin-top: 4px; }

/* Platform badge overrides (dark) */
.plat-google   { background: rgba(255,153,0,0.15);  color: #B45309; }
.plat-meta     { background: rgba(40,116,240,0.15);  color: #2563EB; }
.plat-linkedin { background: rgba(10,102,194,0.15);  color: #5FA0D8; }

/* ══════════════════════════════════════════════════════════
   FORM OVERRIDES (dark inputs)
   ══════════════════════════════════════════════════════════ */
.role-client .field input,
.role-client .field select,
.role-client .field textarea {
  background: var(--cl-surface-2);
  border-color: var(--cl-border);
  color: var(--cl-text-1);
}
.role-client .field input:focus,
.role-client .field select:focus,
.role-client .field textarea:focus {
  border-color: rgba(217,119,6,0.4);
  box-shadow: 0 0 0 3px rgba(217,119,6,0.08);
  background: var(--cl-surface-3);
}
.role-client .field label { color: var(--cl-text-3); }
.role-client .field input::placeholder { color: var(--cl-text-3); opacity: 0.6; }
.role-client .btn-primary {
  background: var(--cl-amber);
  color: #FFFFFF;
  font-weight: 700;
}
.role-client .btn-primary:hover {
  background: #B45309;
  box-shadow: 0 4px 16px rgba(217,119,6,0.25);
}
.role-client .btn-ghost {
  background: var(--cl-surface-2);
  border-color: var(--cl-border);
  color: var(--cl-text-2);
}
.role-client .btn-ghost:hover {
  background: var(--cl-surface-3);
  border-color: var(--cl-border-2);
  color: var(--cl-text-1);
}
.role-client .btn-text { color: var(--cl-amber); }
.role-client .btn-text:hover { background: var(--cl-amber-dim); }

/* Toast dark */
.role-client #toast {
  background: var(--cl-surface-3);
  border-color: var(--cl-border-2);
  color: var(--cl-text-1);
  box-shadow: var(--cl-shadow-lg);
}

/* Scrollbar (webkit) */
.role-client ::-webkit-scrollbar       { width: 5px; height: 5px; }
.role-client ::-webkit-scrollbar-track { background: transparent; }
.role-client ::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.1); border-radius: 99px; }
.role-client ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.12); }

/* ══════════════════════════════════════════════════════════
   MARKETPLACE STATS VIEW
   ══════════════════════════════════════════════════════════ */
.role-client .att-box {
  background: var(--cl-surface-2);
  border: 1px solid var(--cl-border);
  border-radius: 9px;
  padding: 13px 15px;
}
.role-client .att-box span {
  color: var(--cl-text-3);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
.role-client .att-box strong {
  color: var(--cl-text-1);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════
   CAMPAIGN FILTER TABS
   ══════════════════════════════════════════════════════════ */
.cl-tab {
  border: 1px solid var(--cl-border);
  background: var(--cl-surface);
  border-radius: 6px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cl-text-3);
  cursor: pointer;
  transition: var(--cl-trans);
  letter-spacing: 0.01em;
}
.cl-tab:hover  { background: var(--cl-surface-2); color: var(--cl-text-2); }
.cl-tab.active {
  background: var(--cl-amber-dim);
  border-color: rgba(217,119,6,0.25);
  color: var(--cl-amber);
}

/* ══════════════════════════════════════════════════════════
   BADGE OVERRIDES (dark-mode)
   ══════════════════════════════════════════════════════════ */
.role-client .badge         { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.04em; }
.role-client .badge-done    { background: var(--cl-green-dim); color: var(--cl-green); }
.role-client .badge-low     { background: rgba(15,23,42,0.06); color: var(--cl-text-3); border: 1px solid var(--cl-border); }
.role-client .badge-in-progress { background: var(--cl-blue-dim); color: var(--cl-blue); }
.role-client .badge-high    { background: var(--cl-red-dim); color: var(--cl-red); }
.role-client .badge-medium  { background: var(--cl-amber-dim); color: var(--cl-amber); }

/* Empty state */
.role-client .empty-state svg { opacity: 0.2; }
.role-client .empty-state p   { color: var(--cl-text-3); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .cl-kpi-grid         { grid-template-columns: repeat(4, 1fr); }
  .cl-platform-row     { grid-template-columns: 1fr 1fr; }
  .cl-dash-row         { grid-template-columns: 1fr; }
  .cl-charts-grid      { grid-template-columns: 1fr; }
  .cl-billing-grid     { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .cl-kpi-grid         { grid-template-columns: repeat(4, 1fr); }
  .cl-messages-layout  { grid-template-columns: 1fr; height: auto; }
  .cl-thread-list      { max-height: 200px; }
  .cl-admin-layout     { grid-template-columns: 1fr; }
  .cl-reports-grid     { grid-template-columns: 1fr 1fr; }
  .cl-goals-grid       { grid-template-columns: 1fr; }
  .cl-funnel-grid      { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cl-kpi-grid         { grid-template-columns: repeat(2, 1fr); }
  .cl-platform-row     { grid-template-columns: 1fr; }
  .cl-hero             { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
  .cl-hero-badge       { align-items: flex-start; }
  .cl-billing-grid     { grid-template-columns: 1fr; }
  .cl-reports-grid     { grid-template-columns: 1fr; }
  .cl-stats-form       { grid-template-columns: 1fr; }
  .cl-quick-row        { flex-wrap: wrap; }
  .cl-quick-item       { min-width: 50%; border-bottom: 1px solid var(--cl-border); }
  .role-client .page-content { padding: 16px; }
}

/* ── Spin animation for AI loader ─────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Client Tasks ──────────────────────────────────────── */
#view-client-tasks .cl-tab,
#view-client-approvals .cl-tab,
#view-client-campaigns .cl-tab { margin-bottom: 0; }

/* ── Timeline ──────────────────────────────────────────── */
#clTimelineList > div:last-child { border-bottom: none; }

/* ── AI Insights grid ──────────────────────────────────── */
#view-client-ai > div:first-of-type {
  gap: 16px;
}
@media (max-width: 860px) {
  #view-client-ai > div:nth-child(2) { grid-template-columns: 1fr; }
  #view-client-ai > div:last-child   { grid-template-columns: 1fr; }
}

/* ── Health score arc hover ────────────────────────────── */
#clHealthScoreCard:hover { border-color: var(--cl-border-2); }

/* ── Admin activity view ──────────────────────────────── */
#view-admin-activity .section-card { background: var(--surface); }

/* ── Approval modal dark ──────────────────────────────── */
#approvalActionModal .modal { color: var(--cl-text-1); }

/* ── Sidebar badge dot ────────────────────────────────── */
.sb-badge-dot { display: none; }
.role-client .sb-badge-dot { display: block; }

/* ── Responsive: AI grid on mobile ───────────────────── */
@media (max-width: 700px) {
  #view-client-ai > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  #view-client-ai > div:last-child {
    grid-template-columns: 1fr !important;
  }
  #clHealthScoreCard { min-height: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME POLISH — matches the main Team Sync teal theme
   (appended overrides; later rules win the cascade)
   ═══════════════════════════════════════════════════════════════ */
.role-client body, .role-client .app-main { background:#F6F8FB; }
.role-client .sidebar { background:#fff; border-right:1px solid #E8EEF4; }
.role-client .brand-wordmark { color:#0F172A; }
.role-client .sb-section-label { color:#94A3B8; }
.role-client .sb-item { color:#64748B; }
.role-client .sb-item:hover { background:#F1F5F9; color:#0F172A; }
.role-client .sb-item.active { background:rgba(13,148,136,.09); color:#0D9488; font-weight:700; }
.role-client .topbar { background:#fff; border-bottom:1px solid #E8EEF4; }
.role-client .topbar-left h1 { color:#0F172A; }

:root {
  --cl-bg:#F6F8FB; --cl-surface:#FFFFFF; --cl-surface-2:#F8FAFC; --cl-surface-3:#F1F5F9;
  --cl-border:#E8EEF4; --cl-border-2:#CBD5E1;
  --cl-text-1:#0F172A; --cl-text-2:#475569; --cl-text-3:#64748B;
  --cl-shadow:0 1px 2px rgba(15,23,42,.04);
  --cl-shadow-lg:0 4px 18px rgba(15,23,42,.08);
}

.cl-kpi, .cl-chart-card, .cl-report-card, .cl-goal-card, .cl-platform-card,
.cl-billing-card, .cl-activity-card, .cl-hero { box-shadow:0 1px 2px rgba(15,23,42,.04); }
.cl-kpi:hover, .cl-report-card:hover { border-color:#CBD5E1; box-shadow:0 4px 14px rgba(15,23,42,.08); }

.cl-tab { border:1px solid #E8EEF4; background:#fff; color:#64748B; }
.cl-tab:hover { border-color:#CBD5E1; color:#0F172A; background:#fff; }
.cl-tab.active { background:#0D9488; border-color:#0D9488; color:#fff; }

.cl-thread-item.active { background:rgba(13,148,136,.08); border-left:3px solid #0D9488; }
.cl-msg.outgoing .cl-msg-bubble { background:#0D9488; color:#fff; }

.cl-skeleton { background:linear-gradient(90deg,#EEF2F6 25%,#F8FAFC 50%,#EEF2F6 75%); background-size:200% 100%; }

.role-client input:focus, .role-client select:focus, .role-client textarea:focus,
#view-psr input:focus, #view-psr select:focus,
#psrEntryModal input:focus, #psrEntryModal select:focus, #psrEntryModal textarea:focus {
  border-color:#0D9488 !important; box-shadow:0 0 0 3px rgba(13,148,136,.12) !important; outline:none;
}

/* PSR + client scrollbars, light */
#psrTableWrap::-webkit-scrollbar, .cl-messages-area::-webkit-scrollbar { height:8px; width:8px; }
#psrTableWrap::-webkit-scrollbar-thumb, .cl-messages-area::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:99px; }