/**
 * Dashboard mobile responsiveness — Settings Workspace, Mailroom, Team Chat.
 * Loaded after the large inline <style> block in index.html so these rules win
 * on equal/higher specificity (with !important where grids must stack).
 */

/* ── Shared width safety ─────────────────────────────────────────────────── */
.settings-container,
.workspace-grid,
.mailroom-container,
#settings-workspace-panel,
#mailroom-panel,
#channels-panel,
.channels-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Long keys / URLs / emails — wrap instead of clipping */
.pp-seat-bank-key,
.crm-system-token-value,
.crm-webhook-input,
#sw-profile-website-input,
#sw-widget-website-input,
#sst-subject-profile,
#sst-description-profile,
#sw-voice-usage-label,
#sw-voice-usage-pct,
#sw-voice-usage-cycle,
#sw-voice-usage-status,
.mailroom-id-address,
.mailroom-fwd-addr,
.mailroom-fwd-mini,
.sw-prof-email,
.sw-prof-row .v,
.channel-msg .body,
.channel-msg .who {
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  /* ═══════════════════════════════════════════════════════════════════════
     1) Settings & Workspace
     ═══════════════════════════════════════════════════════════════════════ */
  .settings-container,
  .workspace-grid,
  #settings-workspace-panel,
  #settings-workspace-panel .sw-content,
  #settings-workspace-panel .sw-tab-panel,
  #settings-workspace-panel .sw-card,
  #settings-workspace-panel .pp-seat-bank,
  #settings-workspace-panel .voice-usage-meter,
  #sw-voice-usage-card,
  #sw-support-ticket-card-profile,
  #sw-profile-website-card,
  #sw-widget-website-card,
  .master-deck-divider,
  #master-deck-divider,
  #platform-tickets-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force multi-column interiors to a single stack */
  .settings-container,
  .workspace-grid,
  #settings-workspace-panel .sw-layout,
  #settings-workspace-panel .sw-lead-capture-row,
  #settings-workspace-panel .crm-system-token-row,
  #settings-workspace-panel .crm-webhook-row,
  #settings-workspace-panel .crm-scopes-row,
  #settings-workspace-panel .mfa-status-row,
  #settings-workspace-panel .audit-toolbar,
  #settings-workspace-panel .voice-usage-meta,
  #settings-workspace-panel .voice-usage-foot,
  #crm-connect-panel .crm-system-token-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #settings-workspace-panel .sw-layout {
    gap: 12px !important;
  }

  #settings-workspace-panel .sw-sidebar {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    border-right: none !important;
    border-bottom: 2px solid #1f2a44 !important;
    padding: 0 0 12px 0 !important;
    gap: 8px !important;
  }

  #settings-workspace-panel .sw-tab {
    width: auto !important;
    max-width: 100% !important;
  }

  #settings-workspace-panel .sw-content {
    min-width: 0 !important;
    padding: 12px !important;
  }

  /* Master Owner divider, support ticket, voice minutes — scaled padding */
  .master-deck-divider,
  #master-deck-divider,
  #sw-support-ticket-card-profile,
  #sw-voice-usage-card,
  #settings-workspace-panel .sw-card,
  #settings-workspace-panel .pp-seat-bank,
  #settings-workspace-panel .crm-system-token-row,
  #settings-workspace-panel .crm-webhook-row,
  #settings-workspace-panel .crm-scopes-row,
  #platform-tickets-panel {
    padding: 12px !important;
  }

  .master-deck-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding: 10px 12px !important;
  }

  /* Teammate Key Bank — wrap keys fully; actions stack */
  #settings-workspace-panel .pp-seat-bank-key,
  .profile-panel .pp-seat-bank-key {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  #settings-workspace-panel .pp-seat-bank-row-top,
  #settings-workspace-panel .pp-seat-bank-name-row,
  #settings-workspace-panel .pp-seat-bank-header,
  #settings-workspace-panel .pp-seat-bank-actions {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  #settings-workspace-panel .crm-system-token-value,
  #crm-connect-panel .crm-system-token-value {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  #settings-workspace-panel .crm-system-token-label {
    min-width: 0 !important;
  }

  #sw-profile-website-input,
  #sw-widget-website-input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #sw-voice-usage-card .voice-usage-meta,
  #sw-voice-usage-card .voice-usage-foot {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #sw-voice-usage-label,
  #sw-voice-usage-pct,
  #sw-voice-usage-cycle,
  #sw-voice-usage-status {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     2) Mailroom
     ═══════════════════════════════════════════════════════════════════════ */
  .mailroom-container,
  #mailroom-panel,
  #mailroom-panel .mailroom-grid,
  #mailroom-panel .mailroom-list-wrap,
  #mailroom-panel .mailroom-list,
  #mailroom-panel .mailroom-detail,
  #mailroom-panel .mailroom-id-banner,
  #mailroom-panel .mailroom-settings,
  #mailroom-panel .mailroom-metric-strip,
  #mailroom-panel .mailroom-channels,
  #mailroom-panel .mailroom-tabs,
  #mailroom-panel .mailroom-head,
  #mailroom-panel .mailroom-bulkbar {
    width: 100% !important;
    max-width: min(100%, 100vw) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .mailroom-container,
  #mailroom-panel {
    overflow-x: clip !important;
  }

  .mailroom-grid,
  #mailroom-panel .mailroom-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stack list above reading pane; allow vertical scroll, no horizontal clip */
  #mailroom-panel .mailroom-list-wrap,
  #mailroom-panel .mailroom-detail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* When the legacy detail pane is visible (non-inline mode), show it under the list */
  #mailroom-panel .mailroom-detail:not([hidden]) {
    display: block !important;
  }

  .mailroom-id-banner,
  .mailroom-id-row,
  .mailroom-id-address,
  .mailroom-id-copy,
  .mailroom-id-pdf,
  .mailroom-id-claim-row,
  .mailroom-fwd-addr,
  .mailroom-fwd-mini {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mailroom-id-row,
  .mailroom-id-claim-row,
  .mailroom-fwd-cols,
  .mailroom-controls,
  .mailroom-bulkbar,
  .mailroom-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mailroom-id-copy,
  .mailroom-id-pdf,
  .mailroom-id-claim-btn,
  .mailroom-compose-btn,
  .mailroom-delete-btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .mailroom-metric-strip {
    grid-template-columns: 1fr !important;
  }

  .mailroom-tabs,
  .mailroom-channels {
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  .mailroom-item,
  .mailroom-item-expand,
  .mailroom-bubble {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     3) Team Chat — single-pane mobile (list OR thread)
     ═══════════════════════════════════════════════════════════════════════ */
  #channels-panel,
  .channels-panel,
  .channels-layout,
  .channels-sidebar,
  .channels-stream,
  .channel-messages,
  .channel-send-form,
  .channel-header,
  .channel-msg,
  .channel-msg .body {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .channels-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: min(72vh, 640px) !important;
    position: relative;
  }

  .channels-sidebar {
    border-right: none !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .channels-stream {
    display: none !important;
    min-height: 0 !important;
    flex-direction: column !important;
    height: min(72vh, 640px) !important;
    max-height: min(72vh, 640px) !important;
  }

  .channels-layout.channels-mobile-chat .channels-sidebar {
    display: none !important;
  }

  .channels-layout.channels-mobile-chat .channels-stream {
    display: flex !important;
  }

  .channel-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  #channels-list,
  #team-roster-list {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .channel-msg .body {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .channel-send-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    margin-top: auto !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(15, 23, 42, 0.96) !important;
  }

  .channel-send-form input,
  #channel-input {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .channel-send-form button,
  #channel-send-form .primary-btn,
  #channel-create-btn,
  #channels-mobile-back {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #channel-send-form .primary-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
  }

  #channels-mobile-back {
    display: none;
    margin: 0 0 8px 0;
    padding: 10px 14px;
    width: auto;
    border-radius: 8px;
    border: 1px solid rgba(52, 211, 153, 0.55);
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    touch-action: manipulation;
  }

  .channels-layout.channels-mobile-chat #channels-mobile-back {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  .team-status-badge {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.95;
  }

  #channels-list li,
  #team-roster-list li {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 480px) {
  #settings-workspace-panel .sw-card,
  #settings-workspace-panel .pp-seat-bank,
  #sw-voice-usage-card,
  #sw-support-ticket-card-profile,
  .master-deck-divider,
  #master-deck-divider {
    padding: 10px !important;
  }

  .mailroom-metric-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop: hide mobile-only back control */
@media (min-width: 769px) {
  #channels-mobile-back {
    display: none !important;
  }

  .channels-layout.channels-mobile-chat .channels-sidebar {
    display: block !important;
  }
}

/* ── Multi-tier onboarding wizard + module first-view banner ───────────── */
.calendar-booking-caption.is-on {
  color: #34d399 !important;
  font-weight: 600;
}
.calendar-booking-caption.is-off {
  color: #94a3b8 !important;
}
.calendar-booking-caption.is-err {
  color: #f87171 !important;
}
.calendar-booking-switch input[type="checkbox"]:checked + .flat-toggle-track {
  /* rely on existing flat-toggle checked styles; keep selector for clarity */
}
.mt-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mt-setup-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.mt-setup-card,
.mt-provision-card {
  width: 100%;
  max-width: 560px;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}
.mt-setup-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}
.mt-setup-pips {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.mt-setup-pip {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
}
.mt-setup-pip.is-active {
  background: #38bdf8;
}
.mt-setup-card h2,
.mt-provision-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
.mt-setup-sub,
.mt-provision-card p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: #cbd5e1;
}
.mt-setup-card label {
  display: block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 6px;
}
.mt-setup-card input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #020617;
  color: #f8fafc;
  font-size: 14px;
}
.mt-setup-card input[type="text"]:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}
.mt-setup-status {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.8);
  color: #cbd5e1;
  font-size: 13px;
}
.mt-setup-status.is-ok {
  border-color: rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
}
.mt-setup-list {
  margin: 0 0 22px;
  padding-left: 18px;
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.6;
}
.mt-setup-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.mt-setup-cta,
.mt-setup-secondary,
.mt-module-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
}
.mt-setup-cta {
  width: 100%;
  background: #38bdf8;
  color: #0f172a;
}
.mt-setup-row .mt-setup-cta {
  width: auto;
  flex: 1;
}
.mt-setup-secondary {
  flex: 1;
  background: transparent;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.45);
  text-align: center;
}
.mt-setup-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  color: #fecaca;
  font-size: 12px;
}

.mt-module-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 2147482500;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(720px, calc(100vw - 24px));
  padding: 12px 14px 12px 18px;
  border-radius: 12px;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mt-module-banner.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mt-module-banner strong {
  color: #f8fafc;
}
.mt-module-banner-cta {
  background: #38bdf8;
  color: #0f172a;
  white-space: nowrap;
  padding: 8px 12px;
}
.mt-module-banner-dismiss {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.mt-provision-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.72);
}
.mt-provision-modal.is-visible {
  display: flex;
}
.mt-provision-card ul {
  margin: 0 0 20px;
  padding-left: 18px;
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.6;
}

.mt-sms-setup-steps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mt-sms-setup-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
}
.mt-sms-setup-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.4);
}
.mt-sms-setup-step strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.mt-sms-setup-value {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}
.mt-sched-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
}
.mt-sched-badge.is-ok { color: #86efac; }
.mt-sched-badge.is-err { color: #fca5a5; }
.mt-sched-hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.mt-sched-hours-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
}
.mt-sched-hours-grid input,
.mt-sched-hours-grid select {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  padding: 8px 10px;
  font-size: 13px;
}
@media (max-width: 640px) {
  .mt-sched-hours-grid { grid-template-columns: 1fr; }
}
.mt-sms-test-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mt-sms-test-row input {
  flex: 1 1 180px;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #0b1220;
  color: #f8fafc;
  padding: 8px 12px;
  font-size: 14px;
}
.mt-sms-test-row .mt-setup-cta {
  flex: 0 0 auto;
}
.mt-setup-status.is-err {
  color: #fda4af;
}

.sms-thread-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sms-thread-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(2, 6, 23, 0.65);
  color: #ffffff;
  font-size: 14px;
}
.sms-thread-search::placeholder {
  color: rgba(226, 232, 240, 0.65);
}
.sms-thread-search:focus {
  outline: none;
  border-color: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2);
}

@media (max-width: 640px) {
  .mt-setup-card,
  .mt-provision-card {
    padding: 24px 20px;
  }
  .mt-module-banner {
    flex-wrap: wrap;
  }
}

/* ── Account Health & QA Scorecard ───────────────────────────────────────── */
.account-health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.account-health-account-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(2, 6, 23, 0.35);
}
.account-health-account-card.optimal {
  border-color: rgba(74, 222, 128, 0.55);
}
.account-health-account-card.warning {
  border-color: rgba(250, 204, 21, 0.55);
}
.account-health-account-card.needs-attention {
  border-color: rgba(248, 113, 113, 0.65);
}
.account-health-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.account-health-account-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 8px;
}
.account-health-flag.optimal,
#sw-account-health-flag.optimal {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(74, 222, 128, 0.55) !important;
  color: #bbf7d0 !important;
}
.account-health-flag.warning,
#sw-account-health-flag.warning {
  background: rgba(234, 179, 8, 0.18) !important;
  border-color: rgba(250, 204, 21, 0.65) !important;
  color: #fde68a !important;
}
.account-health-flag.needs-attention,
#sw-account-health-flag.needs-attention {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(248, 113, 113, 0.65) !important;
  color: #fecaca !important;
}
.account-health-failure-list {
  margin: 0;
  padding-left: 18px;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.55;
}
.account-health-failure-list code {
  font-size: 11px;
  color: #93c5fd;
}

/* ── Carrier Intelligence & Route Analytics ─────────────────────────────── */
#view-carrier-analytics.role-master-unlocked,
.carrier-intel-card.role-master-unlocked {
  display: block !important;
}
.carrier-intel-card .carrier-intel-header,
#carrier-intel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.carrier-intel-card .ci-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  background: #6366f1;
  color: #fff;
  font: 800 10px/1 "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.carrier-intel-card h2.ci-title {
  margin: 0;
  font: 700 1rem/1.2 "Inter", "Segoe UI", sans-serif;
  color: #fff;
  flex: 1;
}
/* Carrier Intelligence chevron — SVG caret (not giant ▶/▲ text).
   Closed = 0deg (points down); open = 180deg. Overrides the global
   accordion collapsed rotate(-90deg) so this panel matches the
   Client Directory-style caret footprint without the unicode triangle. */
.carrier-intel-chevron,
#view-carrier-analytics .carrier-intel-chevron,
.accordion-section.carrier-intel-card .carrier-intel-chevron,
.accordion-section.carrier-intel-card.collapsed .carrier-intel-chevron {
  color: #a5b4fc;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out, background-color 160ms ease, color 160ms ease;
}
.carrier-intel-chevron svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}
.carrier-intel-card.expanded .carrier-intel-chevron,
.carrier-intel-card:not(.collapsed) .carrier-intel-chevron,
#view-carrier-analytics.expanded .carrier-intel-chevron,
#view-carrier-analytics:not(.collapsed) .carrier-intel-chevron,
.accordion-section.carrier-intel-card.expanded .carrier-intel-chevron,
.accordion-section.carrier-intel-card:not(.collapsed) .carrier-intel-chevron {
  color: #c7d2fe;
  transform: rotate(180deg);
}
.ci-glass-panel {
  margin: 0 12px 16px;
  padding: 14px 8px 8px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(99, 102, 241, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#ci-accordion-body.hidden,
#ci-accordion-body[hidden],
.carrier-intel-body.hidden,
.carrier-intel-body[hidden] {
  display: none !important;
}
/* Expanded carrier panel must win over the global
   .accordion-section.collapsed .accordion-body { display:none !important } rule. */
.carrier-intel-card.expanded > .carrier-intel-body,
.carrier-intel-card.expanded > #ci-accordion-body,
.carrier-intel-card:not(.collapsed) > .carrier-intel-body:not(.hidden):not([hidden]),
.carrier-intel-card:not(.collapsed) > #ci-accordion-body:not(.hidden):not([hidden]),
#view-carrier-analytics.expanded > #ci-accordion-body,
#view-carrier-analytics.expanded > .carrier-intel-body,
#view-carrier-analytics:not(.collapsed) > #ci-accordion-body:not(.hidden):not([hidden]),
#view-carrier-analytics:not(.collapsed) > .carrier-intel-body:not(.hidden):not([hidden]) {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.ci-refresh-row {
  padding: 0 20px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ci-refresh-btn {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid #6366f1;
  background: transparent;
  color: #818cf8;
  cursor: pointer;
  font: 600 12px/1 "Inter", "Segoe UI", sans-serif;
  transition: all 0.15s;
}
.ci-refresh-btn:hover {
  background: #6366f1;
  color: #fff;
}
#ci-last-fetched {
  font: 400 11px/1 "Inter", "Segoe UI", sans-serif;
  color: #64748b;
}
.ci-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 20px 18px;
}
.ci-ops-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 112px;
}
.ci-ops-card-label {
  font: 600 11px/1.2 "Inter", "Segoe UI", sans-serif;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ci-ops-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font: 700 12px/1.2 "Inter", "Segoe UI", sans-serif;
  background: rgba(52, 211, 153, 0.14);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
}
.ci-ops-badge.warn {
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
}
.ci-ops-sub {
  margin-top: 8px;
  font: 400 11px/1.45 "Inter", "Segoe UI", sans-serif;
  color: #64748b;
}
.ci-gauge-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ci-gauge {
  flex: 1 1 90px;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px 10px;
}
.ci-gauge .k {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ci-gauge .v {
  margin-top: 4px;
  font: 700 13px/1 "Inter", "Segoe UI", sans-serif;
  color: #e2e8f0;
}
.ci-telemetry-wrap {
  margin: 0 20px 20px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  overflow: hidden;
}
.ci-telemetry-title {
  margin: 0;
  padding: 12px 14px;
  font: 700 12px/1.2 "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c7d2fe;
  border-bottom: 1px solid #1e293b;
}
.ci-telemetry-scroll {
  overflow-x: auto;
}
.ci-telemetry-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.ci-telemetry-table th,
.ci-telemetry-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #1e293b;
  color: #e2e8f0;
  font-size: 12.5px;
}
.ci-telemetry-table th {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #020617;
}
.ci-telemetry-table tr:last-child td {
  border-bottom: none;
}
.ci-telemetry-empty {
  text-align: center;
  color: #64748b !important;
  font-style: italic;
}
.ci-route-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font: 700 10.5px/1.3 "Inter", "Segoe UI", sans-serif;
  background: rgba(52, 211, 153, 0.14);
  color: #34d399;
}
.ci-route-status.standby {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
}
.ci-route-status.degraded {
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
}

.mt-setup-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: #e2e8f0;
  font-size: 14px;
}