/* WCC LinkedIn Cmd Center — Phase 2 */

.cmd-page { padding: 0; }

/* Summary tiles row */
.cmd-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.cmd-tile {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(14, 42, 71, 0.04);
  transition: transform .14s ease, box-shadow .14s ease;
}
.cmd-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(14, 42, 71, 0.08); }
.cmd-tile-num {
  font-size: 2.0rem;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text, #0E2A47);
}
.cmd-tile-lbl {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #56657a);
  letter-spacing: 0.02em;
}
.cmd-tile-blue  .cmd-tile-num { color: #1B82C1; }
.cmd-tile-coral .cmd-tile-num { color: #E8775A; }
.cmd-tile-green .cmd-tile-num { color: #2C9F65; }
.cmd-tile-mute  .cmd-tile-num { color: #56657a; }

/* Tab strip */
.cmd-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border, #e6eaf0);
  padding-bottom: 6px;
}
.cmd-tab {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted, #56657a);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.cmd-tab:hover { background: var(--bg-card-hover, #f5f7fa); color: var(--text, #0E2A47); }
.cmd-tab.active {
  color: var(--text, #0E2A47);
  background: var(--bg-card, #fff);
  box-shadow: inset 0 -2px 0 0 var(--brand, #0E2A47);
}

.cmd-helper-text { color: var(--text-muted, #56657a); }
.cmd-loading, .cmd-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-muted, #56657a);
}

/* Section */
.cmd-section { margin-bottom: 26px; }
.cmd-section h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #0E2A47);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmd-section-count {
  background: var(--bg-card-deep, #eef1f5);
  color: var(--text-muted, #56657a);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 100px;
}
.cmd-section-helper {
  font-size: 0.86rem;
  color: var(--text-muted, #56657a);
  margin: 0 0 12px;
}

/* Grid of queue cards */
.cmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}
.cmd-week-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text-muted, #56657a);
  margin: 12px 0 8px;
}

.cmd-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmd-card-post   { background: linear-gradient(180deg, #fff, #fafbfd); }
.cmd-card-spam   { background: linear-gradient(180deg, #fffaf7, #fff5ef); border-color: #f4d4c2; }

.cmd-tag {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 100px;
  width: max-content;
}
.cmd-tag-dm    { background: rgba(27,130,193,0.12); color: #1B82C1; }
.cmd-tag-reply { background: rgba(232,119,90,0.14); color: #E8775A; }
.cmd-tag-post  { background: rgba(44,159,101,0.14); color: #2C9F65; }
.cmd-tag-spam  { background: rgba(192,57,43,0.10);  color: #C0392B; }

.cmd-who   { font-weight: 700; color: var(--text, #0E2A47); font-size: 0.96rem; }
.cmd-ctx   { font-size: 0.80rem; color: var(--text-muted, #56657a); }
.cmd-event { font-size: 0.82rem; color: var(--text-muted, #56657a); font-style: italic; }
.cmd-draft {
  background: #fafbfd;
  border: 1px dashed var(--border, #d3dae3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.86rem;
  color: var(--text, #2D3A4A);
  line-height: 1.5;
  white-space: pre-wrap;
}
.cmd-draft-editing { background: #fff; outline: 2px solid #1B82C1; }

.cmd-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.btn-cmd {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #cfd8e3);
  background: var(--bg-card, #fff);
  color: var(--text, #0E2A47);
  cursor: pointer;
  transition: transform .1s ease, background .12s ease;
}
.btn-cmd:hover { background: var(--bg-card-hover, #f5f7fa); }
.btn-cmd-primary {
  background: var(--brand, #0E2A47);
  border-color: var(--brand, #0E2A47);
  color: #fff;
}
.btn-cmd-primary:hover { background: #143759; }
.btn-cmd-ghost {
  background: transparent;
  color: var(--text-muted, #56657a);
}
.btn-cmd-sm { font-size: 0.72rem; padding: 4px 10px; }

.cmd-empty-card {
  padding: 22px;
  text-align: center;
  color: var(--text-muted, #56657a);
  background: var(--bg-card-hover, #f5f7fa);
  border-radius: 10px;
  border: 1px dashed var(--border, #d3dae3);
  font-size: 0.88rem;
}

/* Jobs table */
.cmd-jobs-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card, #fff);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #e6eaf0);
}
.cmd-jobs-table thead th {
  background: var(--brand, #0E2A47);
  color: #fff;
  text-align: left;
  padding: 9px 12px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
}
.cmd-jobs-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #eef1f5);
  font-size: 0.86rem;
  color: var(--text, #2D3A4A);
}
.cmd-jobs-table tbody tr:nth-child(even) td { background: #f7f9fb; }
.cmd-jobs-table tbody tr:last-child td { border-bottom: none; }
.cmd-muted       { color: var(--text-muted, #56657a); }
.cmd-muted-small { color: var(--text-muted, #56657a); font-size: 0.74rem; }

/* Dark mode hooks (rad-cmd already provides --bg-page etc via root) */
@media (max-width: 720px) {
  .cmd-grid { grid-template-columns: 1fr; }
  .cmd-summary-row { grid-template-columns: repeat(2, 1fr); }
}

/* WCC: toggle switch used on the contact detail playbook (linkedin_tracked) */
.pb-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.pb-toggle input { opacity: 0; width: 0; height: 0; }
.pb-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--border, #cfd8e3);
  border-radius: 100px;
  transition: background-color 0.18s ease;
}
.pb-toggle-slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(14, 42, 71, 0.18);
  transition: transform 0.18s ease;
}
.pb-toggle input:checked + .pb-toggle-slider {
  background-color: var(--brand, #0E2A47);
}
.pb-toggle input:checked + .pb-toggle-slider:before {
  transform: translateX(16px);
}
.pb-toggle input:focus-visible + .pb-toggle-slider {
  box-shadow: 0 0 0 3px rgba(27, 130, 193, 0.25);
}