/* ═══════════════════════════════════════════════════════════════════════════
   DinaruCRM — Component Stylesheet v2.1.33
   All styles centralised here. Never use inline styles in templates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --dcrm-navy:        #012169;
  --dcrm-navy-dk:     #001040;
  --dcrm-gold:        #EFBF04;
  --dcrm-emerald:     #10B981;
  --dcrm-indigo:      #6366f1;
  --dcrm-rose:        #ef4444;
  --dcrm-orange:      #f97316;

  --dcrm-surface:     #ffffff;
  --dcrm-surface-2:   #f9fafb;
  --dcrm-surface-3:   #f0f4ff;
  --dcrm-border:      #f0f0f0;
  --dcrm-border-2:    #dee2e6;

  --dcrm-text:        #111827;
  --dcrm-text-2:      #374151;
  --dcrm-text-muted:  #6b7280;
  --dcrm-text-faint:  #9ca3af;

  --dcrm-radius:      10px;
  --dcrm-radius-sm:   6px;
  --dcrm-radius-lg:   14px;
  --dcrm-shadow-sm:   0 1px 4px rgba(0,0,0,.07);
  --dcrm-shadow:      0 2px 10px rgba(0,0,0,.09);
  --dcrm-shadow-lg:   0 4px 20px rgba(0,0,0,.12);
}

/* Dark mode tokens */
:root[data-color-scheme="dark"],
.joomla-theme-dark {
  --dcrm-surface:     #1c1f2b;
  --dcrm-surface-2:   #242838;
  --dcrm-surface-3:   #1e2438;
  --dcrm-border:      #2a2e42;
  --dcrm-border-2:    #353a54;
  --dcrm-text:        #e5e7eb;
  --dcrm-text-2:      #d1d5db;
  --dcrm-text-muted:  #9ca3af;
  --dcrm-text-faint:  #6b7280;
  --dcrm-shadow-sm:   0 1px 4px rgba(0,0,0,.3);
  --dcrm-shadow:      0 2px 10px rgba(0,0,0,.35);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.dcrm-page         { padding: 0; }
.dcrm-page-narrow  { max-width: 860px; margin: 0 auto; padding: 0; }
.dcrm-list         { }
.dcrm-list-hdr     { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.dcrm-list-hdr h2  { font-size:1.15rem; font-weight:700; color:var(--dcrm-navy); margin:0; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.dcrm-card {
  background:    var(--dcrm-surface);
  border-radius: var(--dcrm-radius);
  box-shadow:    var(--dcrm-shadow-sm);
  border:        1px solid var(--dcrm-border);
  padding:       16px;
  margin-bottom: 12px;
}
.dcrm-card-title {
  font-size:     11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight:   700;
  color:         var(--dcrm-text-muted);
  margin-bottom: 12px;
}

/* ── Profile header ─────────────────────────────────────────────────────── */
.dcrm-profile-hdr {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  flex-wrap:   wrap;
  margin-bottom: 16px;
}
.dcrm-profile-av {
  width:           56px;
  height:          56px;
  background:      var(--dcrm-navy);
  color:           #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  font-weight:     700;
  flex-shrink:     0;
}
.dcrm-profile-name {
  margin:      0;
  font-size:   1.3rem;
  font-weight: 700;
  color:       var(--dcrm-navy);
}
.dcrm-profile-sub {
  font-size: 13px;
  color:     var(--dcrm-text-muted);
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  margin-top: 3px;
}

/* ── Info rows (contact info card) ─────────────────────────────────────── */
.dcrm-info-row {
  display:       flex;
  gap:           8px;
  align-items:   center;
  margin-bottom: 8px;
  font-size:     13px;
}
.dcrm-info-icon { color: var(--dcrm-navy); width: 15px; flex-shrink: 0; }
.dcrm-info-label {
  color:           var(--dcrm-text-faint);
  font-size:       10px;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  margin-bottom:   2px;
}
.dcrm-info-val   { font-size: 13px; font-weight: 500; color: var(--dcrm-text); }
.dcrm-info-extra { border-top: 1px solid var(--dcrm-border); padding-top: 10px; margin-top: 4px; }
.dcrm-info-extra-row {
  display:       flex;
  gap:           10px;
  margin-bottom: 10px;
  align-items:   flex-start;
}
.dcrm-info-extra-icon { color: var(--dcrm-text-faint); width: 14px; flex-shrink: 0; margin-top: 3px; font-size: 11px; }
.dcrm-info-created    { font-size: 11px; color: var(--dcrm-text-faint); margin-top: 6px; border-top: 1px solid var(--dcrm-border); padding-top: 6px; }

/* ── Toggle button (info expand chevron) ────────────────────────────────── */
.dcrm-toggle-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--dcrm-text-muted);
  padding:     2px 6px;
  font-size:   13px;
  transition:  transform .2s;
  border-radius: 4px;
}
.dcrm-toggle-btn:hover { color: var(--dcrm-navy); }
.dcrm-toggle-btn.open  { transform: rotate(180deg); }

/* ── Communication Timeline ─────────────────────────────────────────────── */
.dcrm-tl-item     { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--dcrm-border); }
.dcrm-tl-item:last-child { border-bottom:none; }
.dcrm-tl-icon     {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       13px;
}
.dcrm-tl-body     { flex: 1; min-width: 0; }
.dcrm-tl-title    { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dcrm-tl-meta     { font-size: 11px; color: var(--dcrm-text-muted); margin-top: 2px; }
.dcrm-tl-date     { font-size: 10px; color: var(--dcrm-text-faint); white-space: nowrap; flex-shrink: 0; margin-top: 4px; }
.dcrm-tl-btn {
  background:    none;
  border:        1px solid transparent;
  cursor:        pointer;
  color:         var(--dcrm-text-muted);
  font-size:     11px;
  padding:       2px 6px;
  transition:    transform .25s, color .15s;
  border-radius: 3px;
  line-height:   1;
  flex-shrink:   0;
}
.dcrm-tl-btn:hover { color: var(--dcrm-navy); border-color: var(--dcrm-border-2); }
.dcrm-tl-btn.open  { transform: rotate(180deg); color: var(--dcrm-navy); }

/* THE KEY FIX — use ONLY class, no inline style.display */
.dcrm-tl-expand {
  display:       none;    /* hidden by default */
  background:    var(--dcrm-surface-2);
  border-radius: var(--dcrm-radius-sm);
  margin:        6px 0;
  padding:       10px 12px;
  font-size:     12px;
  color:         var(--dcrm-text-2);
  line-height:   1.65;
  border-left:   3px solid var(--dcrm-border-2);
}
.dcrm-tl-expand.open { display: block; }  /* toggled by JS classList only */

.dcrm-tl-expand-meta {
  display:        flex;
  gap:            16px;
  flex-wrap:      wrap;
  font-size:      11px;
  color:          var(--dcrm-text-muted);
  border-top:     1px solid var(--dcrm-border);
  padding-top:    6px;
  margin-top:     4px;
}

/* ── List items (persons, companies, calls lists) ───────────────────────── */
.dcrm-li          { background: var(--dcrm-surface); border-radius: var(--dcrm-radius); box-shadow: var(--dcrm-shadow-sm); margin-bottom: 6px; overflow: hidden; }
.dcrm-li-row      { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.dcrm-li-row:hover { background: var(--dcrm-surface-2); }
.dcrm-li-avatar   {
  width:           36px;
  height:          36px;
  background:      var(--dcrm-navy);
  color:           #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  flex-shrink:     0;
}
.dcrm-li-body     { flex: 1; min-width: 0; }
.dcrm-li-name     { font-weight: 600; color: var(--dcrm-navy); text-decoration: none; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcrm-li-name:hover { color: var(--dcrm-navy-dk); text-decoration: underline; }
.dcrm-li-sub      { font-size: 11px; color: var(--dcrm-text-muted); margin-top: 2px; }
.dcrm-li-meta     { font-size: 11px; color: var(--dcrm-text-faint); white-space: nowrap; }
.dcrm-li-btn      { background: none; border: none; cursor: pointer; color: var(--dcrm-text-faint); font-size: 11px; padding: 2px 5px; transition: transform .2s; border-radius: 3px; flex-shrink: 0; }
.dcrm-li-btn.open { transform: rotate(180deg); }
.dcrm-li-expand   {
  display: none;
  background: var(--dcrm-surface-2);
  border-top: 1px solid var(--dcrm-border);
  padding: 10px 14px 14px;
  font-size: 12px;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.dcrm-li-expand.open { display: grid; }
.dcrm-li-el       { font-size: 10px; text-transform: uppercase; color: var(--dcrm-text-faint); letter-spacing: .04em; margin-bottom: 2px; }

/* ── Feed (comms inbox/outbox rows) ─────────────────────────────────────── */
.dcrm-feed        { background: var(--dcrm-surface); border-radius: var(--dcrm-radius); box-shadow: var(--dcrm-shadow-sm); margin-bottom: 16px; overflow: hidden; }
.dcrm-feed-hdr    { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--dcrm-navy); color: #fff; font-size: 12px; font-weight: 600; }
.dcrm-feed-hdr a  { color: rgba(255,255,255,.75); font-size: 11px; text-decoration: none; }
.dcrm-feed-hdr a:hover { color: #fff; }
.dcrm-feed-item   { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--dcrm-border); }
.dcrm-feed-item:hover { background: var(--dcrm-surface-2); }
.dcrm-feed-item:last-child { border-bottom: none; }
.dcrm-feed-icon   { font-size: 13px; color: var(--dcrm-navy); flex-shrink: 0; margin-top: 2px; }
.dcrm-feed-main   { flex: 1; min-width: 0; }
.dcrm-feed-title  { font-weight: 600; font-size: 13px; color: var(--dcrm-navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dcrm-feed-title:hover { text-decoration: underline; }
.dcrm-feed-sub    { font-size: 11px; color: var(--dcrm-text-muted); margin-top: 2px; }
.dcrm-feed-meta   { font-size: 10px; color: var(--dcrm-text-faint); white-space: nowrap; flex-shrink: 0; }
.dcrm-feed-chev   { background: none; border: none; cursor: pointer; color: var(--dcrm-text-faint); font-size: 11px; padding: 2px 5px; transition: transform .2s; border-radius: 3px; }
.dcrm-feed-chev.open { transform: rotate(180deg); }
.dcrm-feed-expand  { display: none; padding: 10px 14px 14px; background: var(--dcrm-surface-2); border-top: 1px solid var(--dcrm-border); font-size: 12px; line-height: 1.65; }
.dcrm-feed-expand.open { display: block; }
.dcrm-feed-body    { white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow-y: auto; color: var(--dcrm-text-2); }
.dcrm-feed-empty   { padding: 40px 24px; text-align: center; color: var(--dcrm-text-faint); font-size: 13px; }

/* ── Tags / badges ──────────────────────────────────────────────────────── */
.dcrm-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  font-size:     10px;
  font-weight:   600;
  padding:       2px 7px;
  border-radius: 10px;
  border:        1px solid var(--dcrm-border-2);
  white-space:   nowrap;
  background:    var(--dcrm-surface-2);
  color:         var(--dcrm-text-muted);
}
.dcrm-tag.navy   { background: var(--dcrm-navy);    color: #fff;    border-color: var(--dcrm-navy); }
.dcrm-tag.green  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.dcrm-tag.yellow { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
.dcrm-tag.red    { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.dcrm-call-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      var(--dcrm-emerald) !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   8px;
  padding:         7px 14px;
  font-size:       12px;
  font-weight:     600;
  text-decoration: none !important;
  cursor:          pointer;
}
.dcrm-call-btn:hover,
.dcrm-call-btn:focus,
.dcrm-call-btn:visited {
  background:      #0d9f72 !important;
  color:           #fff !important;
  text-decoration: none !important;
}

.dcrm-login-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      var(--dcrm-navy) !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   8px;
  padding:         8px 18px;
  font-size:       13px;
  font-weight:     600;
  text-decoration: none !important;
  cursor:          pointer;
  box-shadow:      none !important;
}
.dcrm-login-btn:hover,
.dcrm-login-btn:focus,
.dcrm-login-btn:active,
.dcrm-login-btn:visited {
  background:      var(--dcrm-navy-dk) !important;
  color:           #fff !important;
  text-decoration: none !important;
}

/* ── Links ──────────────────────────────────────────────────────────────── */
.dcrm-link          { color: var(--dcrm-navy); text-decoration: none; }
.dcrm-link:hover    { text-decoration: underline; color: var(--dcrm-navy-dk); }
.dcrm-link.emerald  { color: var(--dcrm-emerald); }

/* ── Back link ──────────────────────────────────────────────────────────── */
.dcrm-back-link     { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dcrm-text-muted); text-decoration: none; }
.dcrm-back-link:hover { color: var(--dcrm-navy); }

/* ── Login gate ─────────────────────────────────────────────────────────── */
.dcrm-login-gate    { text-align: center; padding: 60px 24px; }

/* ── Progress bars ──────────────────────────────────────────────────────── */
.dcrm-progress-wrap { height: 8px; background: var(--dcrm-border); border-radius: 4px; overflow: hidden; }
.dcrm-progress-fill { height: 100%; border-radius: 4px; transition: width .5s; }
.dcrm-progress-lg   { height: 12px; }
.dcrm-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--dcrm-text-muted); margin-top: 4px; }

/* ── Map ────────────────────────────────────────────────────────────────── */
.dcrm-map-container { width: 100%; height: 200px; border-radius: var(--dcrm-radius-sm); overflow: hidden; border: 1px solid var(--dcrm-border); margin-top: 10px; }
.dcrm-map-footer    { padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--dcrm-text-muted); border-top: 1px solid var(--dcrm-border); }
.dcrm-map-coords    { font-size: 10px; color: var(--dcrm-text-faint); font-family: monospace; padding: 2px 14px 6px; }

/* ── KPI module ─────────────────────────────────────────────────────────── */
.dcrm-kpi-module    { display: flex; flex-wrap: wrap; gap: 10px; }
.dcrm-kpi-card      {
  flex:          1;
  min-width:     110px;
  background:    var(--dcrm-surface);
  border-radius: 8px;
  padding:       12px 14px;
  border-top:    3px solid var(--dcrm-navy);
  box-shadow:    var(--dcrm-shadow-sm);
  position:      relative;
  cursor:        help;
  transition:    box-shadow .15s;
}
.dcrm-kpi-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.13); }
.dcrm-kpi-card.alert-card { border-top-color: var(--dcrm-rose); }
.dcrm-kpi-val {
  font-size:   1.3rem;
  font-weight: 700;
  color:       var(--dcrm-navy);
  line-height: 1.1;
}
.dcrm-kpi-card.alert-card .dcrm-kpi-val { color: var(--dcrm-rose); }
.dcrm-kpi-lbl {
  font-size:      10px;
  color:          var(--dcrm-text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top:     4px;
  display:        flex;
  align-items:    center;
  gap:            3px;
}
.dcrm-kpi-icon { font-size: 18px; margin-bottom: 4px; }
.dcrm-kpi-info-dot {
  display:      inline-block;
  width:        13px;
  height:       13px;
  border-radius: 50%;
  background:   rgba(0,0,0,.10);
  font-size:    8px;
  text-align:   center;
  line-height:  13px;
  font-style:   normal;
  font-weight:  700;
  opacity:      .6;
  margin-left:  2px;
}
/* KPI tooltip */
.dcrm-kpi-card[title]:hover::after {
  content:       attr(title);
  position:      absolute;
  bottom:        calc(100% + 8px);
  left:          50%;
  transform:     translateX(-50%);
  background:    #1e2030;
  color:         #e5e7eb;
  font-size:     11px;
  line-height:   1.5;
  padding:       10px 13px;
  border-radius: 8px;
  width:         240px;
  white-space:   normal;
  z-index:       9999;
  box-shadow:    0 4px 16px rgba(0,0,0,.3);
  pointer-events: none;
  font-weight:   400;
  text-transform: none;
  letter-spacing: 0;
}
.dcrm-kpi-card[title]:hover::before {
  content:     '';
  position:    absolute;
  bottom:      calc(100% + 2px);
  left:        50%;
  transform:   translateX(-50%);
  border:      6px solid transparent;
  border-top-color: #1e2030;
  z-index:     9999;
}

/* ── Comms tab nav ───────────────────────────────────────────────────────── */
.dcrm-comms-tab {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 14px;
  border-radius: 20px;
  border:        1.5px solid var(--dcrm-border-2);
  font-size:     12px;
  font-weight:   500;
  text-decoration: none;
  cursor:        pointer;
  transition:    all .15s;
  color:         var(--dcrm-text);
  background:    var(--dcrm-surface);
}
.dcrm-comms-tab:hover    { border-color: var(--dcrm-navy); color: var(--dcrm-navy); background: var(--dcrm-surface-3); text-decoration: none; }
.dcrm-comms-tab.active   { background: var(--dcrm-navy) !important; border-color: var(--dcrm-navy) !important; color: #ffffff !important; font-weight: 700; }
.tab-count               { background: rgba(0,0,0,.08); border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 600; }
.dcrm-comms-tab.active .tab-count { background: rgba(255,255,255,.2); }

/* ── Goals module ───────────────────────────────────────────────────────── */
.dcrm-gm-item {
  margin-bottom: 12px;
  padding:       10px 12px;
  background:    var(--dcrm-surface);
  border-radius: 8px;
  border:        1px solid var(--dcrm-border);
  transition:    box-shadow .15s;
}
.dcrm-gm-item:hover     { box-shadow: 0 2px 8px rgba(0,0,0,.09); }
.dcrm-gm-header         { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dcrm-gm-name           { font-weight: 600; font-size: 12px; color: var(--dcrm-navy); display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcrm-gm-pct            { font-size: 12px; font-weight: 700; margin-left: 8px; flex-shrink: 0; }
.dcrm-gm-bar            { height: 7px; border-radius: 4px; background: var(--dcrm-border); overflow: hidden; cursor: help; }
.dcrm-gm-fill           { height: 100%; border-radius: 4px; transition: width .4s; }
.dcrm-gm-meta           { display: flex; justify-content: space-between; font-size: 10px; color: var(--dcrm-text-muted); margin-top: 3px; }
.dcrm-gm-type-badge     { font-size: 9px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.06); color: var(--dcrm-text-muted); white-space: nowrap; cursor: help; }

/* ── Admin panel styles ─────────────────────────────────────────────────── */
.dcrm-btn-primary   { background: var(--dcrm-navy) !important; color: #fff !important; border-color: var(--dcrm-navy) !important; }
.dcrm-btn-primary:hover { background: var(--dcrm-navy-dk) !important; }
.dcrm-panel-header  { background: var(--dcrm-navy); color: #fff; font-weight: 600; font-size: 13px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.dcrm-form-card     { border-radius: var(--dcrm-radius); box-shadow: var(--dcrm-shadow-sm); margin-bottom: 16px; }
.dcrm-form-label    { font-weight: 600; font-size: 13px; }
.dcrm-table         { font-size: 13px; }
.dcrm-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dcrm-text-muted); font-weight: 600; }
.dcrm-list-card     { border-radius: var(--dcrm-radius); box-shadow: var(--dcrm-shadow-sm); overflow: hidden; }
.dcrm-empty-state   { text-align: center; padding: 40px 24px; color: var(--dcrm-text-faint); font-size: 13px; }
.dcrm-empty-state i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: .15; }

/* ── Notes (admin) ──────────────────────────────────────────────────────── */
.dcrm-note-card     { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--dcrm-border); }
.dcrm-note-card:last-child { border-bottom: none; }
.dcrm-note-avatar   {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      var(--dcrm-navy);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     700;
  flex-shrink:     0;
}
.dcrm-note-body     { flex: 1; min-width: 0; }
.dcrm-note-meta     { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.dcrm-note-text     { font-size: 13px; line-height: 1.6; color: var(--dcrm-text-2); }
.dcrm-note-delete   { color: #ddd; margin-left: auto; font-size: 13px; text-decoration: none; transition: color .15s; }
.dcrm-note-delete:hover { color: var(--dcrm-rose); }

/* ── Radio buttons (report builder) ────────────────────────────────────── */
.dcrm-radio-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       6px 14px;
  font-size:     12px;
  font-weight:   500;
  border:        2px solid var(--dcrm-border-2);
  border-radius: 6px;
  background:    var(--dcrm-surface);
  color:         var(--dcrm-text-muted);
  cursor:        pointer;
  transition:    border-color .15s, background .15s, color .15s;
  line-height:   1.4;
  user-select:   none;
}
.dcrm-radio-btn:hover     { border-color: var(--dcrm-navy); color: var(--dcrm-navy); background: var(--dcrm-surface-3); }
.dcrm-radio-btn.rb-active { background: var(--dcrm-navy) !important; border-color: var(--dcrm-navy) !important; color: #fff !important; font-weight: 600; }

/* ── Activity feed (admin person comm history) ─────────────────────────── */
.dcrm-activity-feed   { }
.dcrm-activity-item   { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dcrm-border); align-items: flex-start; }
.dcrm-activity-item:last-child { border-bottom: none; }
.dcrm-activity-icon   { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.dcrm-activity-content { flex: 1; min-width: 0; }
.em-chev  { background: none; border: none; cursor: pointer; color: var(--dcrm-text-faint); font-size: 11px; padding: 2px 4px; border-radius: 3px; transition: transform .2s; }
.em-chev.open { transform: rotate(180deg); }
.em-expand { display: none; background: var(--dcrm-surface-2); border-radius: 6px; padding: 10px 12px; margin-top: 6px; font-size: 12px; color: var(--dcrm-text-2); white-space: pre-wrap; line-height: 1.6; }
.em-expand.open { display: block; }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.dcrm-mt-navy   { color: var(--dcrm-navy); }
.dcrm-mt-emerald{ color: var(--dcrm-emerald); }
.dcrm-mt-gold   { color: var(--dcrm-gold); }
.dcrm-mt-muted  { color: var(--dcrm-text-muted); }
.dcrm-mt-faint  { color: var(--dcrm-text-faint); }
.dcrm-pre       { white-space: pre-wrap; word-break: break-word; }

/* ── Dark mode adjustments ──────────────────────────────────────────────── */
:root[data-color-scheme="dark"] .dcrm-kpi-card[title]:hover::after { background: #2d3148; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
:root[data-color-scheme="dark"] .dcrm-kpi-card[title]:hover::before { border-top-color: #2d3148; }
:root[data-color-scheme="dark"] .dcrm-comms-tab { background: var(--dcrm-surface); color: var(--dcrm-text); border-color: var(--dcrm-border-2); }
:root[data-color-scheme="dark"] .dcrm-comms-tab:hover { background: var(--dcrm-surface-3); color: #93b4ff; border-color: #93b4ff; }
:root[data-color-scheme="dark"] .dcrm-comms-tab.active { background: #1e3a8a !important; border-color: #93b4ff !important; color: #fff !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .dcrm-profile-hdr   { flex-direction: column; }
  .dcrm-co-grid       { grid-template-columns: 1fr !important; }
  .dcrm-kpi-card      { min-width: 100%; }
  .dcrm-page-narrow   { padding: 0 8px; }
}

/* ── Frontend Dashboard KPI tiles ────────────────────────────────────────── */
.dcrm-kpi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:                   10px;
  margin-bottom:         18px;
}
.dcrm-kpi {
  background:    var(--dcrm-surface, #fff);
  border-radius: var(--dcrm-radius, 10px);
  border:        1px solid var(--dcrm-border, #f0f0f0);
  box-shadow:    var(--dcrm-shadow-sm);
  padding:       14px 16px;
  position:      relative;
  cursor:        help;
  transition:    box-shadow .15s, transform .15s;
  border-top:    3px solid var(--dcrm-navy, #012169);
}
.dcrm-kpi:hover { box-shadow: 0 3px 14px rgba(0,0,0,.10); transform: translateY(-1px); }
.dcrm-kpi.emerald { border-top-color: var(--dcrm-emerald, #10B981); }
.dcrm-kpi.gold    { border-top-color: var(--dcrm-gold,    #EFBF04); }
.dcrm-kpi.indigo  { border-top-color: var(--dcrm-indigo,  #6366f1); }
.dcrm-kpi.rose    { border-top-color: var(--dcrm-rose,    #ef4444); }
.dcrm-kpi-val {
  font-size:   1.6rem;
  font-weight: 800;
  color:       var(--dcrm-navy, #012169);
  line-height: 1.1;
  margin-bottom: 5px;
}
.dcrm-kpi-label {
  font-size:      11px;
  color:          var(--dcrm-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight:    600;
  display:        flex;
  align-items:    center;
  gap:            4px;
}
.dcrm-kpi-info {
  display:       inline-block;
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    rgba(0,0,0,.10);
  font-size:     9px;
  text-align:    center;
  line-height:   14px;
  margin-left:   3px;
  opacity:       .6;
  font-style:    normal;
  font-weight:   700;
}

/* Tooltip on KPI tile */
.dcrm-kpi[title]:hover::after {
  content:        attr(title);
  position:       absolute;
  bottom:         calc(100% + 8px);
  left:           50%;
  transform:      translateX(-50%);
  background:     #1e2030;
  color:          #e5e7eb;
  font-size:      12px;
  line-height:    1.5;
  padding:        10px 14px;
  border-radius:  8px;
  width:          260px;
  white-space:    normal;
  z-index:        9999;
  box-shadow:     0 4px 16px rgba(0,0,0,.3);
  pointer-events: none;
  font-weight:    400;
  text-align:     left;
  text-transform: none;
  letter-spacing: 0;
}
.dcrm-kpi[title]:hover::before {
  content:     '';
  position:    absolute;
  bottom:      calc(100% + 2px);
  left:        50%;
  transform:   translateX(-50%);
  border:      6px solid transparent;
  border-top-color: #1e2030;
  z-index:     9999;
}

/* ── Frontend dashboard layout ───────────────────────────────────────────── */
.dcrm-dash-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   16px;
}
.dcrm-dash-card {
  background:    var(--dcrm-surface, #fff);
  border-radius: var(--dcrm-radius, 10px);
  box-shadow:    var(--dcrm-shadow-sm);
  border:        1px solid var(--dcrm-border, #f0f0f0);
  overflow:      hidden;
  margin-bottom: 14px;
}
.dcrm-dash-card-hdr {
  background:    var(--dcrm-navy, #012169);
  color:         #fff;
  padding:       10px 16px;
  font-size:     12px;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.dcrm-dash-card-body { padding: 14px 16px; }

/* ── Pipeline bar chart ──────────────────────────────────────────────────── */
.dcrm-pipeline-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 8px;
  font-size:     12px;
}
.dcrm-pipeline-bar-wrap { flex: 1; background: var(--dcrm-border, #e5e7eb); border-radius: 4px; height: 8px; }
.dcrm-pipeline-bar-fill { height: 100%; border-radius: 4px; }

@media (max-width: 680px) {
  .dcrm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dcrm-dash-grid { grid-template-columns: 1fr; }
}