/* styles for frontend/pods/agent-transfer-reports/styles.css */

._widget-agent-big-graph_ndgq85 {
  width: 100%;
  max-width: 1200px; 
  margin: 20px auto; 
}

._graph-agent-big-container_ndgq85 {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  width: 100%; 
  max-width: 1200px; 
  box-sizing: border-box; 
}

._graph-agent-big-widget-body_ndgq85 {
  display: block; 
  width: 100%; 
  height: 600px; 
  margin: 0; 
}

._graph-agent-title_ndgq85 {
  text-align: center; 
  margin-bottom: 15px;
}

._graph-agent-big-container_ndgq85 {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  width: 100%; 
  max-width: 1200px; 
  box-sizing: border-box; 
}

._graph-agent-big-widget-body_ndgq85 {
  display: block; 
  width: 100%; 
  height: 400px; 
  margin: 0; 
}

._widget-agent-small-graph_ndgq85 {
  flex: 1 1 calc(33.33% - 20px); 
  max-width: 70000px; 
  min-width: 250px; 
  height: 100%; 
  box-sizing: border-box; 
}

._graph-agent-small-container_ndgq85 {
  display: flex;
  flex-direction: column; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  height: 100%; 
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 20px;
}

._graph-agent-title_ndgq85 {
  margin: 20px 0 10px 0;
  font-size: 1.2em;
  color: #333;
  text-align: left;
  width: 100%;
}

._graph-agent-small-widget-body_ndgq85 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 10px;
}

._graph-agent-grid_ndgq85 {
  display: flex;
  justify-content: space-between; 
  align-items: flex-start; 
  flex-wrap: wrap; 
  gap: 20px; 
  max-width: 1200px; 
  margin: 0 auto; 
}


._tableContainer-agent_ndgq85 {
  font-size: 10px;
  line-height: 1;
  padding: 0;
}

._tableHeader-agent_ndgq85 th {
  font-size: 10px;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

._tableCell-agent_ndgq85 {
  text-align: center;
  padding: 2px;
}

._tableBody-agent_ndgq85 {
  font-size: 10px;
  padding: 0;
  line-height: 1;
}

._tableRow-agent_ndgq85 {
  padding: 0;
  margin: 0;
}

._table-agent-container_ndgq85 {
  position: relative;
  max-height: 300px; 
  overflow-y: auto; 
  margin-top: 10px; 
}

._c3-chart-texts_ndgq85 ._c3-text_ndgq85 {
  fill: black !important;
  font-weight: bold;
}

._tabs_ndgq85 {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 5px;
}

._tabs_ndgq85 button {
  flex: 1;
  padding: 6px 10px;
  cursor: pointer;
  background-color: #f5f3ebd5;
  border: 1px solid #a5a2a2;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  font-size: 14px;
  color: #555;
  transition: background-color 0.3s, color 0.3s;
  outline: none;
}

._tabs_ndgq85 button:not(:last-child) {
  border-right: none;
}

._tabs_ndgq85 button:hover {
  background-color: #e6e6e6;
  color: #333;
}

._tabs_ndgq85 ._active-tab_ndgq85 {
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #f0f0f0;
}

._tab-content_ndgq85 {
  padding: 15px;
  font-size: 14px;
  color: #333;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}


._info-box-overlay_ndgq85 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

._info-box-content_ndgq85 {
  background-color: white;
  padding: 20px; 
  border-radius: 5px;
  width: 600px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

._close-button-info-box_ndgq85 {
  cursor: pointer;
  float: right;
}

._user-list_ndgq85 {
  max-height: 400px; 
  overflow-y: auto; 
  border: 1px solid #ccc; 
  margin-top: 10px; 
}

._tableContainer-user_ndgq85 {
  width: 100%; 
  table-layout: fixed; 
}

._tableHeader-user_ndgq85 {
  position: sticky; 
  top: 0; 
  z-index: 1; 
  background-color: #f8f9fa; 
}

._tableBody-user_ndgq85 {
  overflow-y: auto; 
}


@media (min-width: 1200px) {
  ._graph-agent-grid_ndgq85 {
    display: flex;
    justify-content: space-between; 
    gap: 20px; 
    width: 100%; 
  }

  ._widget-agent-small-graph_ndgq85 {
    flex: 1; 
    max-width: 500px; 
    min-width: 300px; 
    width: 30%; 
    height: 500px; 
  }

  ._graph-agent-small-container_ndgq85 {
    padding: 20px; 
    border: 2px solid #ccc; 
    border-radius: 10px; 
  }

  ._graph-agent-small-widget-body_ndgq85 {
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center; 
  }
}

@media (max-width: 768px) {
  ._graph-agent-grid_ndgq85 {
    flex-direction: column;
    gap: 20px; 
  }

  ._widget-agent-small-graph_ndgq85 {
    flex: 1 1 100%; 
  }
}









/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/ended/styles.css */
._ended_1srvf1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
}

._container_1srvf1 {
  width: 400px;
  max-width: 100%;
}

._box_1srvf1 {
  flex: 1 1 auto;
  margin: 1em;
  background-color: #444;
  border-radius: 4px;
  padding: 1em;
}


._agent-flagged_1srvf1 {
  margin: 1em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/gatekeeper/lead/styles.css */
._gatekeeper-lead_1og0ao {
  padding: 1em;
  text-align: center;
}

._actions_1og0ao {
  padding-top: 2em;
}

._actions_1og0ao button:first-child {
  margin-right: 1em;
  padding-left: 3em;
  padding-right: 3em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/gatekeeper/styles.css */
._boxes_sufrw8 {
  display: flex;
}

._box_sufrw8 {
  flex: 1 1 auto;
  margin: 1em;
  background-color: #444;
  border-radius: 4px;
  padding: 1em;
}

._box_sufrw8 ._title_sufrw8 {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 1em;
}

._box_sufrw8 ._title_sufrw8 i {
  margin-right: 0.5em;
}

._box_sufrw8 ._body_sufrw8 button {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

._box_sufrw8 ._body_sufrw8 button i {
  flex: 0 0 2em;
}

._box_sufrw8 ._body_sufrw8 button span {
  flex: 1 1 auto;
  text-align: center;
}

._footer_sufrw8 {
  padding: 1em;
  text-align: center;
}

._back_sufrw8 {
  width: 12em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/gatekeeper/transferring-to-lead/styles.css */
._gatekeeper-lead_1w28s9 {
  padding: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

._instructions_1w28s9 {
  font-size: 1.3em;
  font-weight: bold;
}

._actions_1w28s9 {
  padding: 2em;
  width: 400px;
}

._actions_1w28s9 button {
  margin-bottom: 1em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/initial/styles.css */
._initial_4xa0ot {
  display: flex;
}

._box_4xa0ot {
  flex: 1 1 auto;
  margin: 1em;
  background-color: #444;
  border-radius: 4px;
  padding: 1em;
}

._box_4xa0ot ._title_4xa0ot {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 1em;
}

._box_4xa0ot ._title_4xa0ot i {
  margin-right: 0.5em;
}

._box_4xa0ot ._body_4xa0ot button {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

._box_4xa0ot ._body_4xa0ot button i {
  flex: 0 0 2em;
}

._box_4xa0ot ._body_4xa0ot button span {
  flex: 1 1 auto;
  text-align: center;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/ivr/styles.css */
._ivr_11ryls {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
}

._container_11ryls {
  display: flex;
}

._dial-pad_11ryls {
  flex: 0 0 auto;
  font-size: 1.2em;
}

._actions_11ryls {
  margin-left: 2em;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

._actions_11ryls button {
  margin-bottom: 1em;
}

._actions_11ryls button:last-child {
  margin-bottom: 0;
}


._actions_11ryls ._unmute_11ryls {
  opacity: 0.7;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/lead/client-unavailable/styles.css */
._client-unavailable_qokvo6 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._container_qokvo6 {
  max-width: 600px;
  padding: 1em;
  text-align: center;
  font-size: 1.2em;
}

._actions_qokvo6 {
  padding: 2em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/lead/styles.css */
._lead_bgw29b {
  width: 100%;
  text-align: center;
}

._title_bgw29b {
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  padding: 1em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/lead/transfer-failed/styles.css */
._transfer-failed_13b8jw {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._container_13b8jw {
  max-width: 600px;
  padding: 1em;
  text-align: center;
  font-size: 1.2em;
}

._actions_13b8jw {
  padding: 2em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/lead/transferred/styles.css */
._transferred_nyuw2g {
  width: 100%;
}

._title_nyuw2g {
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/other/styles.css */
._ivr_iiackn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
}

._container_iiackn {
  display: flex;
}

._dial-pad_iiackn {
  flex: 0 0 auto;
  font-size: 1.2em;
}

._actions_iiackn {
  margin-left: 2em;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

._actions_iiackn button {
  margin-bottom: 1em;
}

._actions_iiackn button:last-child {
  margin-bottom: 0;
}


._actions_iiackn ._unmute_iiackn {
  opacity: 0.7;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/states/voicemail/styles.css */
._reached-voicemail_emdti4 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._container_emdti4 {
  max-width: 600px;
  padding: 1em;
  text-align: center;
  font-size: 1.2em;
  margin: 1em;
  background-color: #444;
  border-radius: 4px;
}

._title_emdti4 {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 1em;
}

._actions_emdti4 {
  padding-top: 1em;
  max-width: 300px;
}

._actions_emdti4 button {
  margin-bottom: 1em;
}

._body_emdti4 p {
  margin-bottom: 1.5em;
}

/* styles for frontend/pods/components/agent/agent-console/current-call/actions/styles.css */
._mute-banner_r0x9on {
  margin: 0 2em;
}

._notes_r0x9on {
  margin-top: 1em;
  margin-bottom: 3em;
}

/* styles for frontend/pods/components/agent/agent-console/mute-state-banner/styles.css */
._alert_dn5qfd {
  font-size: 1.1em;
  pointer-events: none;
  transition: all 200ms ease-in-out;
}

._unmuted_dn5qfd {
  font-size: 1.4em;
  font-weight: bold;
}

/* styles for frontend/pods/components/agent/agent-console/notes/styles.css */
._box_1n4esc {
  flex: 1 1 auto;
  margin: 1em;
  background-color: #444;
  border-radius: 4px;
  padding: 1em;
}

/* styles for frontend/pods/components/agent/agent-console/states/connected/styles.css */
._connected_1vhj3j {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

._connected_1vhj3j > ._top_1vhj3j {
  flex: 0 0 auto;
  padding: 1em;
  display: flex;
}

._agent-info_1vhj3j {
  flex: 1 1 auto;
  margin-right: 1em;
}

._client-info_1vhj3j {
  flex: 1 1 auto;
  margin-left: 1em;
}

._actions_1vhj3j {
  flex: 0 0 auto;
}

/* styles for frontend/pods/components/agent/agent-console/states/dialing/styles.css */
._dialing_tamdxk {
  padding: 1em;
  text-align: center;
  flex: 0 0 auto;
}

._title_tamdxk {
  font-size: 1.2em;
  padding: 1em 0;
}

/* styles for frontend/pods/components/agent/agent-console/states/idle/styles.css */
._idle_5ndmh8 {
  text-align: center;
}

._description_5ndmh8 {
  font-size: 1.3em;
}

._duration_5ndmh8 {
  font-size: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

._duration_5ndmh8 ._time_5ndmh8 {
  font-weight: bold;
  font-size: 1.5em;
  padding-left: 0.75em;
  padding-bottom: 0.1em;
}


._actions_5ndmh8 {
  padding-top: 2em;
}

/* styles for frontend/pods/components/agent/agent-console/states/offline/styles.css */
._offline_1pk8jd {
  padding: 1em;
  text-align: center;
  flex: 0 0 auto;
}

._title_1pk8jd {
  font-size: 1.2em;
  padding: 1em 0;
}

/* styles for frontend/pods/components/agent/agent-console/states/paused/styles.css */
._paused_45vd6m {
  text-align: center;
  width: 100%;
}

._description_45vd6m {
  font-size: 1.3em;
}

._counter_45vd6m {
  font-size: 100px;
  font-weight: bold;
  height: 120px;
}

._not-ready_45vd6m {
  padding-top: 2em;
}

._duration_45vd6m {
  font-size: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

._duration_45vd6m ._time_45vd6m {
  font-weight: bold;
  font-size: 1.5em;
  padding-left: 0.75em;
  padding-bottom: 0.1em;
}

._actions_45vd6m {
  padding-top: 2em;
}

._actions_45vd6m button {
  margin-left: 1em;
}

._actions_45vd6m button:first-child {
  margin-left: 0;
}

/* styles for frontend/pods/components/agent/agent-console/styles.css */
._agent-console_odtbe4 {
  background-color: #333;
  color: #e6e6e6;
  min-height: 600px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._agent-console_odtbe4 h1,
._agent-console_odtbe4 h2,
._agent-console_odtbe4 h3,
._agent-console_odtbe4 h4,
._agent-console_odtbe4 h5,
._agent-console_odtbe4 h6 {
  color: #ddd;
}


._container_odtbe4 {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* styles for frontend/pods/components/agent/agent-console/widget/body/styles.css */
._body_lyr574 {
  flex: 1 1 auto;
  padding: 1em;
  background-color: #414349;
}

/* styles for frontend/pods/components/agent/agent-console/widget/heading/styles.css */
._heading_5wy52g {
  flex: 0 0 auto;
  background-color: #444;
  border-bottom: 1px solid #666;
  padding: 0.5em;
}

._title_5wy52g {
  font-size: 1.2em;
  font-weight: bold;
  color: #ccc;
}

/* styles for frontend/pods/components/agent/agent-console/widget/styles.css */
._widget_10si6m {
  border: 1px solid #666;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* styles for frontend/pods/components/agent/current-call/client-info/styles.css */
._widget-body_tcptek {
  padding: 0;
}

._client-info_tcptek {
  padding: 1em;
}

._name-container_tcptek {
  display: flex;
  align-items: center;
  padding-bottom: 0.5em;
}

._name_tcptek {
  flex: 1 1 auto;
  font-size: 1.8em;
  font-weight: bold;
}

._status_tcptek {
  flex: 0 0 auto;
  font-size: 1.1em;
}

._company_tcptek {
  font-size: 1.2em;
}

._notes_tcptek {
  margin-top: 1em;
  border-top: 1px dashed #666;
  background-color: #525181;
  border-radius: 4px;
  padding: 1em;
  font-size: 1.1em;
}

._notes_tcptek ._title_tcptek {
  font-weight: bold;
  padding-bottom: 0.5em;
  font-size: 1.2em;
  text-align: center;
}

._notes_tcptek ._body_tcptek {
  max-height: 200px;
  overflow-y: auto;
}

/* styles for frontend/pods/components/agent/current-call/lead-info/styles.css */
._lead_1amg4m {
}

._name_1amg4m {
  font-weight: bold;
  font-size: 3em;
  margin-bottom: 0.25em;
}

._title_1amg4m {
  font-size: 1.4em;
  font-weight: normal;
  margin-bottom: 0.25em;
}

._company_1amg4m {
  font-size: 1.4em;
  font-weight: normal;
  margin-bottom: 0.25em;
}

._phone_1amg4m {
  font-size: 1.2em;
  font-weight: normal;
  margin-bottom: 0.25em;
}

/* styles for frontend/pods/components/agent/current-call/say-something/styles.css */
._say-something_1fx1jt {
  padding: 1em;
  text-align: center;
}

._text_1fx1jt {
  font-size: 2em;
}

/* styles for frontend/pods/components/agent/status-bar/styles.css */
._status-bar_yd098n {
  color: #fff;
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
  padding: 0.5em 1em;
  transition: none !important;
  display: flex;
  align-items: center;
}

._status_yd098n {
  flex: 1 1 auto;
  text-align: center;
}

._time_yd098n {
  flex: 0 0 auto;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  font-size: 0.7em;
  background-color: #0003;
}

/* styles for frontend/pods/components/app-header/styles.css */

/* =============================================================
   HEADER WRAPPER
   ============================================================= */

._header-wrapper_17mu9i {
  height: var(--header-height);
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

._left-branding_17mu9i {
  display: flex;
  align-items: center;
  gap: 8px;
}

._page-title_17mu9i {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}

/* =============================================================
   MAIN NAVIGATION (desktop)
   ============================================================= */

._right-actions_17mu9i {
  display: flex;
  align-items: center;
  gap: 30px;
}

._nav-links_17mu9i {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Base style for all nav links and dropdown toggles */
._nav-links_17mu9i li a,
._nav-links_17mu9i li ._dropdown-toggle_17mu9i {
  text-decoration: none;
  color: #4a5568;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  transition: color 0.2s ease;
  cursor: pointer;
}

/* =============================================================
   ACTIVE / OPEN STATE — blue highlight
   ============================================================= */

/* Open dropdown (Bootstrap adds .open to the <li>) */
.nav-links li.dropdown.open > .dropdown-toggle,
.nav-links li.dropdown.show > .dropdown-toggle {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* Active route detected via :has() — modern browsers */
.nav-links li.dropdown:has(.dropdown-menu a.active) > .dropdown-toggle,
.nav-links li.dropdown:has(.dropdown-menu .active) > .dropdown-toggle {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* JS fallback: active-parent class added from component */
.nav-links li.dropdown.active-parent > .dropdown-toggle {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* =============================================================
   DROPDOWN MENU
   ============================================================= */

._modern-dropdown_17mu9i {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-md) !important;
  min-width: 220px !important;
  padding: 5px 0 !important;
  margin-top: 12px !important;
  background-color: #ffffff !important;
}

/* Links inside dropdown */
.nav-links .dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 18px !important;
  color: var(--text-main) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  float: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Active link inside dropdown */
.nav-links .dropdown-menu a.active,
.nav-links .dropdown-menu .active > a {
  color: #2563eb !important;
  background-color: #eff6ff !important;
  font-weight: 600 !important;
}

/* Hover state */
.nav-links .dropdown-menu li a:hover {
  background-color: #f7fafc !important;
  color: #2563eb !important;
}

/* Dividers */
.nav-links .dropdown-menu .divider {
  margin: 5px 0 !important;
  background-color: var(--border-color) !important;
}

/* =============================================================
   SPECIAL SECTION (Schedule link)
   ============================================================= */

._special-link_17mu9i {
  margin-left: 10px;
  padding-left: 15px;
  border-left: 1px solid var(--border-color);
}

._special-link_17mu9i a {
  color: var(--text-main) !important;
  font-weight: 600 !important;
}

._special-link_17mu9i a:hover {
  color: #2563eb !important;
}

/* =============================================================
   MOBILE BREADCRUMB
   Hidden on desktop, shown on mobile instead of page title
   ============================================================= */

._mobile-breadcrumb_17mu9i {
  display: none;
  align-items: center;
  gap: 6px;
}

._breadcrumb-section_17mu9i {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

._breadcrumb-sep_17mu9i {
  font-size: 14px;
  color: #a0aec0;
}

._breadcrumb-page_17mu9i {
  font-size: 14px;
  color: #718096;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* =============================================================
   HAMBURGER BUTTON
   Hidden on desktop, shown on tablet/mobile
   ============================================================= */

._hamburger-btn_17mu9i {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-main);
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

._hamburger-btn_17mu9i:hover {
  background-color: #f7fafc;
}

/* =============================================================
   MOBILE OVERLAY (backdrop behind drawer)
   ============================================================= */

._mobile-overlay_17mu9i {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1040;
}

/* =============================================================
   MOBILE DRAWER
   Slides in from behind the left sidebar
   ============================================================= */

._mobile-drawer_17mu9i {
  position: fixed;
  top: 0;
  left: 56px; /* starts right after the left sidebar (56px wide) */
  bottom: 0;
  width: 260px;
  background-color: #ffffff;
  z-index: 1050;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  animation: _drawerSlideIn_17mu9i 0.25s ease;
}

@keyframes _drawerSlideIn_17mu9i {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

._mobile-drawer-header_17mu9i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

._mobile-drawer-title_17mu9i {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

._mobile-drawer-close_17mu9i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #718096;
  border-radius: 6px;
  transition: background 0.15s ease;
}

._mobile-drawer-close_17mu9i:hover {
  background-color: #f7fafc;
  color: var(--text-main);
}

/* =============================================================
   MOBILE NAV LIST (inside drawer)
   ============================================================= */

._mobile-nav-list_17mu9i {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}

/* Section group title */
._mobile-nav-group-title_17mu9i {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #a0aec0;
  padding: 12px 16px 4px;
}

/* Nav item link */
._mobile-nav-item_17mu9i a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  color: var(--text-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  margin: 0 8px !important;
  transition: background 0.15s ease, color 0.15s ease;
}

._mobile-nav-item_17mu9i a i {
  font-size: 17px !important;
  color: #718096 !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease;
}

._mobile-nav-item_17mu9i a:hover {
  background-color: #eff6ff !important;
  color: #2563eb !important;
}

._mobile-nav-item_17mu9i a:hover i {
  color: #2563eb !important;
}

._mobile-nav-item_17mu9i a._active_17mu9i {
  background-color: #dbeafe !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}

._mobile-nav-item_17mu9i a._active_17mu9i i {
  color: #2563eb !important;
}

/* =============================================================
   RESPONSIVE — activate hamburger layout at ≤1180px
   Covers: Nest Hub (1024px), iPad Air (820px), tablets, phones
   ============================================================= */

@media (max-width: 1180px) {

  /* Compact header */
  ._header-wrapper_17mu9i {
    padding: 0 12px !important;
    height: 50px !important;
    gap: 10px !important;
  }

  /* Left branding becomes a flex row */
  ._left-branding_17mu9i {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Hide desktop page title */
  ._page-title_17mu9i {
    display: none !important;
  }

  /* Show breadcrumb */
  ._mobile-breadcrumb_17mu9i {
    display: flex !important;
    flex: 1;
    min-width: 0;
  }

  /* Hide desktop nav */
  ._right-actions_17mu9i {
    display: none !important;
  }

  /* Show hamburger button */
  ._hamburger-btn_17mu9i {
    display: flex !important;
  }
}

.nav-links .dropdown.open > ul.dropdown-menu {
  margin-left: -40px !important;
  transform: none !important;
  z-index: 1000001 !important;
}
/* styles for frontend/pods/components/app-sidebar/styles.css */

/* =============================================================
   SIDEBAR WRAPPER
   ============================================================= */

._slim-sidebar-nav_1410j2 {
  display: flex;
  flex-direction: column;
  width: 56px;
  height: 100vh;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  flex-shrink: 0;
}

/* =============================================================
   LOGO
   ============================================================= */

._brand-icon_1410j2 {
  width: 100%;
  height: var(--header-height); /* 64px */
  display: flex;
  align-items: flex-end;

  /* CHANGE 1: Absolute centering to prevent right-alignment */
  justify-content: center; 

  margin-top: 15px !important;

  /* CHANGE 2: We remove the 16px that is shifting it */
  padding: 0 !important; 

  background-color: 
#ffffff;

  /* CHANGE 3: Prevent the logo from encroaching on the main content */
  overflow: hidden; 
}
._mini-logo_1410j2 {

  width: 65px !important;  
  height: 58px !important; 
/* Reset of any legacy style */
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;

  /* Ensures the image stays centered within its own frame */
  object-position: center !important; 

  display: block;
  flex-shrink: 0;
  margin: 0 !important;
  /* CHANGE: We push the logo down */
  margin-top: 60px !important;
}

/* =============================================================
   CENTRAL NAVIGATION
   ============================================================= */

._main-nav_1410j2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* Base item — each icon */
._nav-item_1410j2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #4a5568;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

/* Icon within the nav-item */
._nav-item_1410j2 i {
  font-size: 22px;
  line-height: 1;
}

/* Hover */
._nav-item_1410j2:hover {
  background-color: #eef2ff;
  color: #2563eb;
}

/* Active — Ember adds .active to the LinkTo */
.app-sidebar .nav-item.active,
.app-sidebar a.nav-item.active {
  background-color: #dbeafe;
  color: #2563eb;
}

/* =============================================================
   GEAR / SETTINGS
   ============================================================= */

._gear-icon_1410j2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #4a5568;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

._gear-icon_1410j2:hover,
._gear-icon_1410j2:focus {
  background-color: #eef2ff;
  color: #2563eb;
}

/* Active — soft blue background */
.nav-links .nav-item.active,
a.nav-item.active {
  background-color: #dbeafe;
  color: #2563eb;
}

/* Gear active when dropdown is open */
.dropright.open > a.gear-icon,
.dropright.show > a.gear-icon {
  background-color: #dbeafe;
  color: #2563eb;
}

/* =============================================================
   SETTINGS DROPDOWN MENU
   ============================================================= */

._settings-dropdown_1410j2 {
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--radius-md) !important;
  min-width: 200px !important;
  padding: 5px 0 !important;
  background-color: #ffffff !important;
}

.dropright .dropdown-menu {
  top: 0 !important;
  left: 100% !important;
  margin-top: 0 !important;
  margin-left: 8px !important;
}

.app-sidebar .dropdown-header {
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #a0aec0 !important;
  padding: 8px 15px !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

.app-sidebar .dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  color: var(--text-main) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-sidebar .dropdown-menu li a i {
  font-size: 16px !important;
  color: #a0aec0 !important;
  width: 18px !important;
  text-align: center !important;
  transition: color 0.15s ease;
}

.app-sidebar .dropdown-menu li a:hover {
  background-color: #f0f7ff !important;
  color: #2563eb !important;
}

.app-sidebar .dropdown-menu li a:hover i {
  color: #2563eb !important;
}

.app-sidebar .dropdown-menu .divider {
  margin: 5px 0 !important;
  background-color: var(--border-color) !important;
}

/* =============================================================
   USER AVATAR (BOTTOM)
   ============================================================= */

._user-footer_1410j2 {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  position: relative;
}

._user-avatar_1410j2 {
  width: 36px;
  height: 36px;
  background-color: #2d3748;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: default;
  transition: transform 0.2s ease;
  user-select: none;
}

._user-avatar_1410j2:hover {
  transform: scale(1.1);
}

._nav-item_1410j2,
._nav-item_1410j2:hover,
._nav-item_1410j2:focus,
._nav-item_1410j2:active {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

._logout-dropdown_1410j2 {
  display: none;                    
  position: absolute;
  left: 54px !important;            
  top: 50% !important;              
  transform: translateY(-50%);      
  margin: 0 !important;
  
  min-width: 140px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 8px;
  padding: 6px 0;
  z-index: 1050;                    
}

._logout-dropdown_1410j2._show_1410j2 {
  display: block !important;        /* Force visibility when Bootstrap adds .show */
}

/* Button style */
._logout-button_1410j2 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  color: #ef4444;
  background: transparent;
  border: none;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

._logout-button_1410j2:hover {
  background-color: #fff1f2;
  color: #dc2626;
}


/* Ensure the sidebar container allows the dropdown to be seen */
._slim-sidebar-nav_1410j2,
._sidebar_1410j2,
._aside_1410j2 {
  overflow: visible !important;
}

/* =============================================================
   APP LAUNCHER PANEL
   ============================================================= */

._app-launcher-wrapper_1410j2 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

._app-panel_1410j2 {
  position: fixed;
  left: 56px; /* --left-sidebar-width */
  top: auto;
  width: 260px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._panel-title_1410j2 {
  font-size: 13px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 10px;
}

._section-label_1410j2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a0aec0;
  margin: 0 0 8px;
  font-weight: 600;
}

._apps-grid_1410j2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

._app-item_1410j2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  background: #ffffff;
}

._app-item_1410j2:hover {
  background: #f0f7ff;
  border-color: #bfdbfe;
}

._app-icon_1410j2 {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

._app-icon-pink_1410j2 {
  background: #fbeaf0;
  color: #993556;
}

._app-icon-amber_1410j2 {
  background: #faeeda;
  color: #854f0b;
}

._app-icon-orange_1410j2 {
  background: #fff7ed;
  color: #c2410c;
}

._app-icon-blue_1410j2 {
  background: #eff6ff;
  color: #1d4ed8;
}

._app-label_1410j2 {
  font-size: 11px;
  color: #4a5568;
  text-align: center;
}

._divider_1410j2 {
  height: 1px;
  background: #e2e8f0;
  margin: 10px 0;
}
/* styles for frontend/pods/components/call-lead-card/connect-card/styles.css */
._text_1wimxq {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}

._button_1wimxq {
  text-align: left;
  margin-bottom: 1em;
}

._button_1wimxq i {
  width: 3em;
}

._btn-modern-mobile_1wimxq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._btn-modern-mobile_1wimxq i {
  font-size: 18px; 
  vertical-align: middle;
}
/* styles for frontend/pods/components/call-lead-card/eavesdropping-card/styles.css */
._description_vfrrrc {
  font-size: 0.9em;
  margin-bottom: 1.5em;
}

._description_vfrrrc ._user_vfrrrc {
  font-size: 1.3em;
  font-weight: bold;
  padding: 0.25em 0;
}

/* styles for frontend/pods/components/call-lead-list-item/styles.css */
._status_1nhfc4 {
  font-size: 0.8em;
}

/* styles for frontend/pods/components/call-lead-list-select/styles.css */
._menu_1vp4a5 {
  border: 0px;
}

a._menu-item_1vp4a5 {
  font-size: 0.9em;
  padding-top: 0.25em !important;
  padding-bottom: 0.25em !important;
  padding-left: 1em !important;
  padding-right: 1em !important;
}

/* styles for frontend/pods/components/call-session/manager-live-view/list-item/styles.css */
._list-item_1qbv96 {
  width: 100%;
  display: flex;
  padding: 1em;
  border-bottom: 1px dashed #ddd;
}

._list-item_1qbv96 ._name_1qbv96 {
  flex: 0 0 25%;
}

._list-item_1qbv96 ._duration_1qbv96 {
  flex: 0 0 15%;
  text-align: right;
}

._list-item_1qbv96 ._status_1qbv96 {
  flex: 0 0 25%;
  text-align: center;
}

._list-item_1qbv96 ._lead_1qbv96 {
  flex: 0 0 20%;
  text-align: center;
}

._list-item_1qbv96 ._lead_1qbv96 ._name_1qbv96 {
  font-weight: bold;
}

._list-item_1qbv96 ._actions_1qbv96 {
  flex: 0 0 15%;
  text-align: right;
}

/* styles for frontend/pods/components/call-session/manager-live-view/styles.css */
._header_ktn767 {
  width: 100%;
  display: flex;
  padding: 1em;
  border-bottom: 1px dashed #ddd;
  font-size: 1.1em;
  font-weight: bold;
}

._header_ktn767 ._name_ktn767 {
  flex: 0 0 25%;
}

._header_ktn767 ._duration_ktn767 {
  flex: 0 0 15%;
  text-align: right;
}

._header_ktn767 ._status_ktn767 {
  flex: 0 0 25%;
  text-align: center;
}

._header_ktn767 ._lead_ktn767 {
  flex: 0 0 20%;
  text-align: center;
}

._header_ktn767 ._actions_ktn767 {
  flex: 0 0 15%;
  text-align: right;
}

._loading_ktn767 {
  text-align: center;
  padding: 1em;
}

._empty_ktn767 {
  text-align: center;
  padding: 2em 1em;
  font-style: italic;
}

/* styles for frontend/pods/components/call-voicemail-select/styles.css */
._menu_x3h0a4 {
  border: 0px;
}

a._menu-item_x3h0a4 {
  font-size: 0.9em;
  padding-top: 0.25em !important;
  padding-bottom: 0.25em !important;
  padding-left: 1em !important;
  padding-right: 1em !important;
}

/* styles for frontend/pods/components/organization-phone-number/cnam/list/styles.css */
._statistics_1j9uxs {
  padding: 1em 0em;
  font-size: 1.2em;
  font-weight: bold;
}

._cnams-table_1j9uxs > tbody > tr > td {
  vertical-align: middle;
}

._loading_1j9uxs {
  font-size: 1.5em;
  text-align: center;
  padding: 2em;
}

._new-record_1j9uxs {
  padding: 1em;
  display: inline-flex;
}

._new-record_1j9uxs input {
  flex: 1 1 auto;
  width: 300px;
}

/* styles for frontend/pods/components/organization-phone-number/create-form/available-phone-number/styles.css */
._search_4r59ms {
  display: flex;
  align-items: center;
  padding: 0.5em 0;
}

._search_4r59ms input {
  flex: 0 0 250px;
}

._search_4r59ms button {
  flex: 0 0 auto;
}

._results_4r59ms {
  padding: 1em;
}

._item_4r59ms {
  padding: 0.5em;
  border-bottom: 1px dotted #ddd;
  display: flex;
}

._item_4r59ms ._phone-number_4r59ms {
  flex: 0 0 auto;
  min-width: 200px;
}

._item_4r59ms ._actions_4r59ms {
  flex: 0 0 auto;
}

/* styles for frontend/pods/components/organization-phone-number/create-form/styles.css */
._search_jwcwd {
  display: flex;
  align-items: center;
  padding: 0.5em 0;
}

._search_jwcwd input {
  flex: 0 0 250px;
}

._search_jwcwd button {
  flex: 0 0 auto;
}

._results_jwcwd {
  padding: 1em;
}

/* styles for frontend/pods/components/organization-phone-number/list/styles.css */
._statistics_1i6112 {
  padding: 1em 0em;
  font-size: 1.2em;
  font-weight: bold;
}

._phone-numbers-table_1i6112 > tbody > tr > td {
  vertical-align: middle;
}

._loading_1i6112 {
  font-size: 1.5em;
  text-align: center;
  padding: 2em;
}

/* styles for frontend/pods/components/paginated-lead-list/styles.css */
._lead_ncwymq {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}

._lead_ncwymq * {
  flex: 0 0 auto;
}

._lead_ncwymq ._name_ncwymq {
  margin-bottom: 0 !important;
}

/* styles for frontend/pods/components/partial/lead/call-notes/styles.css */
._lead-call-note-history_4ppbu2 {
  height: 275px;
  word-wrap: break-word;
  overflow-y: auto
}

/* styles for frontend/pods/components/partial/organization/disposition-form/styles.css */
._logo_1gyr09 {
  height: 42px;
  margin-bottom: 1em;
}

/* styles for frontend/pods/components/partial/organization/dynamics-form/styles.css */
._logo_16jirj {
  height: 42px;
  margin-bottom: 1em;
}

/* styles for frontend/pods/components/partial/organization/form/styles.css */
._logo_19k0ru {
  height: 42px;
  margin-bottom: 1em;
}

/* styles for frontend/pods/components/phone-number/lookup-icon/styles.css */
._icon_h5z7c0 {
}

/* styles for frontend/pods/components/recording-player/styles.css */
._recording-player_r76nfu {
  display: inline-flex;
  align-items: center;
}

._recording-player_r76nfu input {
  width: 120px;
  overflow: hidden;
  background-color: transparent;
  border: 0;
  padding: 0 10px;
}

._recording-player_r76nfu ._pause_r76nfu,
._recording-player_r76nfu ._play_r76nfu {
  font-size: 0.8em;
  height: 2.5em;
  width: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* styles for frontend/pods/components/service-provider-fields-edit/styles.css */
._header_ne5qyt {
  padding: 0.5em;
}

/* styles for frontend/pods/components/service-provider/advanced-settings/styles.css */
._header_1ah77o {
  display: flex;
  align-items: center;
  padding: 0.5em;
  border-bottom: 1px solid #f7f7f7;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #eee;
}

._header_1ah77o ._icon_1ah77o {
  flex: 0 0 5%;
}

._header_1ah77o ._field_1ah77o {
  flex: 0 0 50%;
}

._header_1ah77o ._type_1ah77o {
  flex: 0 0 25%;
  padding-left: 1em;
}

._header_1ah77o ._use_1ah77o {
  padding-left: 1em;
  flex: 0 0 10%;
  text-align: center;
}

._header_1ah77o ._actions_1ah77o {
  padding-left: 1em;
  flex: 0 0 10%;
  text-align: right;
}

._add_1ah77o {
  display: block;
  padding: 1em;
  text-align: center;
}

/* styles for frontend/pods/components/service-provider/map-phone-numbers/list-item/styles.css */
._item_na5mzm {
  display: flex;
  align-items: center;
  padding: 1em 0.5em;
  border-bottom: 1px solid #f7f7f7;
}

._item_na5mzm ._icon_na5mzm {
  flex: 5%;
}

._item_na5mzm ._field_na5mzm {
  flex: 0 0 50%;
}

._item_na5mzm ._type_na5mzm {
  flex: 0 0 25%;
  padding-left: 1em;
}

._item_na5mzm ._use_na5mzm {
  padding-left: 1em;
  flex: 0 0 10%;
  text-align: center;
}

._item_na5mzm ._actions_na5mzm {
  padding-left: 1em;
  flex: 0 0 10%;
  text-align: right;
}

/* styles for frontend/pods/components/service-provider/map-phone-numbers/styles.css */
._header_1kc9x3 {
  display: flex;
  align-items: center;
  padding: 0.5em;
  border-bottom: 1px solid #f7f7f7;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #eee;
}

._header_1kc9x3 ._icon_1kc9x3 {
  flex: 0 0 5%;
}

._header_1kc9x3 ._field_1kc9x3 {
  flex: 0 0 50%;
}

._header_1kc9x3 ._type_1kc9x3 {
  flex: 0 0 25%;
  padding-left: 1em;
}

._header_1kc9x3 ._use_1kc9x3 {
  padding-left: 1em;
  flex: 0 0 10%;
  text-align: center;
}

._header_1kc9x3 ._actions_1kc9x3 {
  padding-left: 1em;
  flex: 0 0 10%;
  text-align: right;
}

._add_1kc9x3 {
  display: block;
  padding: 1em;
  text-align: center;
}

/* styles for frontend/pods/components/soft-phone/button-bar/styles.css */
._button-bar_1gdomw {
  text-align: center;
  padding: 1em;
}

/* styles for frontend/pods/components/soft-phone/control-panel/styles.css */
._bar_1i15va {
  text-align: center;
  padding: 0.5em;
}

._dialpad-button_1i15va {
  width: 10em;
  padding-left: 1em !important;
  padding-right: 1em !important;
  color: #fff !important;
}

._dialpad-icon_1i15va {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  margin-right: 0.25em;
}

._dialpad-icon_1i15va i {
  flex: 1 1 auto;
}

._dialpad_1i15va {
  font-size: 0.8em;
  text-align: center;
}

._digits_1i15va {
  font-size: 1.2em !important;
  padding: 0 !important;
}

/* styles for frontend/pods/components/soft-phone/dial-pad/dial-button/styles.css */
._dialpad-button_18x9ih {
  border: 1px solid #ccc;
  border-radius: 10%;
  width: 5em;
  display: inline-block;
  font-size: inherit !important;
  margin: 1px;
  padding: 0.5em;
  color: #fff;
  background-color: #424242;
  display: inline-flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

._dialpad-button_18x9ih[disabled],
._dialpad-button_18x9ih:hover,
._dialpad-button_18x9ih:active,
._dialpad-button_18x9ih:focus {
  color: #fff;
  background-color: #424242;
}

._letters_18x9ih {
  flex: 0 0 auto;
  font-size: 0.6em;
  padding-bottom: 0.25em;
}

._number_18x9ih {
  flex: 1 1 auto;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.2em;
}

button._flash_18x9ih {
  animation: _flash_18x9ih 0.5s ease-in;
}

@keyframes _flash_18x9ih {
  0% {
    background-color: #424242;
  }
  50% {
    background-color: #8bbf61;
  }
  100% {
    background-color: #424242;
  }
}

/* styles for frontend/pods/components/soft-phone/dial-pad/styles.css */
._dialpad_14kvzs {
  padding: 1em;
  display: inline-block;
  border-radius: 8px;
}

/* styles for frontend/pods/components/soft-phone/digits-bar/styles.css */
._digits_7cf8a9 {
  padding: 0.5em;
  font-size: 1.6em;
  letter-spacing: 0.3em;
  color: #ccc;
}

/* styles for frontend/pods/components/soft-phone/mute-button/styles.css */
._mute_18wyue {
  min-width: 8em;
}

/* styles for frontend/pods/components/soft-phone/styles.css */
._softphone_6li8qu {
  text-align: center;
}

._status_6li8qu {
  padding: 8px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

._status_6li8qu._connecting_6li8qu, ._status_6li8qu._disconnecting_6li8qu {
  font-size: 60px;
}

._dialpad_6li8qu {
  font-size: 1.2em;
}

/* styles for frontend/pods/components/ui-select/styles.css */
._item_1pt187 {
  display: inline-block;
}

.ember-power-select-dropdown ._item_1pt187 {
  display: block;
  margin: 0 -8px;
  padding: 0.25em 1em;
  border-bottom: 1px solid #f7f7f7;
}

/* styles for frontend/pods/components/ui/dropdown-button/menu-component/styles.css */
._panel_6s7e5w {
  max-height: 200px;
  overflow-y: auto;
}

/* styles for frontend/pods/components/ui/dropdown-button/menu-item/styles.css */
._a_14eajf {
  display: block;
  padding: 0.2rem 0.75rem !important;
}

._a_14eajf > i {
  padding-right: 0.8em;
}

/* styles for frontend/pods/components/ui/dropdown-button/styles.css */
._ui-dropdown-button_1wbt4s {
  display: inline-block;
  position: relative;
}

/* styles for frontend/pods/components/ui/tabs-component/styles.css */
._headers_movvt8 {
  display: flex;
  border-bottom: 1px solid #ddd;
}

._content_movvt8 {
  padding: 24px 16px;
  background-color: #fff;
}

@media(max-width: 768px) {
  ._content_movvt8 {
    padding: 12px 8px;
  }
}

/* styles for frontend/pods/components/ui/tabs-component/tab-header/styles.css */
._tab-header_zs3sue {
  flex: 1 1 auto;
  padding: 16px 16px;
  font-weight: 500;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-bottom: 0px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
}

._tab-header_zs3sue._active_zs3sue, ._tab-header_zs3sue:hover {
  background-color: #fff;
  border: 1px solid #dde;
  border-bottom: 2px solid #188ae2;
  color: #188ae2;
}

/* styles for frontend/pods/components/ui/toggle-switch/styles.css */
._ui-toggle-switch_1gno2h {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background-color: #999;
  display: inline-block;
  transition: background-color 0.2 ease-in-out;
}

._ui-toggle-switch_1gno2h._checked_1gno2h {
  background-color: #496cad;
}

._ball_1gno2h {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #999;
  background-color: #fff;
  transition: margin 0.2s ease-in-out;
}

._ui-toggle-switch_1gno2h._checked_1gno2h ._ball_1gno2h {
  margin-left: 16px;
  border: 1px solid #496cad;
}

/* styles for frontend/pods/current-activity/styles.css */
._statistics_1ojyw9 {

}

._statistics_1ojyw9 thead tr {
  background-color: #fcfcfc;
}

._statistics_1ojyw9 tbody td {
  font-weight: bold;
}

._statistics_1ojyw9 ._value_1ojyw9 {
  color: #428bca;
  text-align: right;
}

/* styles for frontend/pods/live/manager/styles.css */
._manager-live-view_pwonnk {
  background-color: #fff;
}

/* styles for frontend/pods/organizations/organization/external-webhooks/index/styles.css */
._webhooks-header-container_snz3dk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}

/* styles for frontend/pods/organizations/organization/phone-numbers/styles.css */

/* styles for frontend/pods/service-providers/service-provider/edit/styles.css */

/* styles for frontend/styles/app.css */
/* =============================================================
   APP.CSS — MIGRATION VERSION-R1 (Overview)
   New 3-column flex layout replaces the old fixed/margin system.
   Original legacy rules are preserved/commented where they were intentionally disabled.
   ============================================================= */

/* =============================================================
   APP-WIDE FONT — Manrope
   Overrides vendor-834fb959f392fcb86e9dbb9479404691.css's body (Open Sans) and h1-h6 (Helvetica Neue).
   input/button/select/textarea already inherit from body in vendor.css,
   so this one rule covers virtually all text in the app.
   ============================================================= */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Manrope', sans-serif !important;
}

html.csstransitions.csstransforms3d .non-viewport {
  opacity: 0
}

html.csstransitions.csstransforms3d .layout-app,
html.csstransitions.csstransforms3d #menu,
html.csstransitions.csstransforms3d #menu-top,
html.csstransitions.csstransforms3d #menu_kis,
html.csstransitions.csstransforms3d .navbar.main,
html.csstransitions.csstransforms3d #footer {
  visibility: visible;
}

/* OLD: content used margin-right to leave space for the fixed right sidebar.
   Replaced by flex layout — #right-sidebar is now a flex column sibling. */


.phone_rep_info_content_box {
    max-height: 200px;
    overflow-y: auto;
    word-wrap: break-word;
}


.container-fluid #content {
  margin: 0
}

/* DISABLED: old system pushed content away from right sidebar using margin.
   New flex layout handles spacing automatically. */
/* :global(.container-fluid #menu ~ #content) {
  margin: 0 260px 0 0
} */

/* DISABLED: old sidebar was positioned fixed to the right edge of the screen.
   Now #right-sidebar is a flex column in the app layout. */
/* :global(.container-fluid #menu) {
  right: 0
} */

.container-fluid.no-sidebar #menu ~ #content {
  margin-right: 0;
}

.container-fluid.no-sidebar #menu {
  display: none;
}

#menu>div>ul {
  top: auto
}

ol {
  padding-left: 20px
}

#logo {
  margin-top: 14px;
  font-size: 18pt;
  font-weight: bold;
}

#logo > img {
  height: 42px;
}

.label.lead-count {
  width: 100%
}

.label.call-status {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  font-size: 100%;
  margin-bottom: 12px
}

.call-session-leads li {
  cursor: pointer
}

.call-session-leads li>.label {
  display: none;
  margin-top: 0px;
  padding: 2px
}

.call-session-leads li>.media {
  margin-top: 0px
}

.call-session-leads li.is-dialing>.label {
  display: block
}

.call-session-leads.is-filtered-by-active-calls li {
  display: none
}

.call-session-leads.is-filtered-by-active-calls li.is-dialing {
  display: block
}

.overflow-list {
  max-height: 400px;
  overflow-y: auto
}

.lead-list-select {
  width: 100%
}

.voice-mail-recording-select {
  width: 100%
}

.fa-default {
  color: #496cad
}

.error-list ul {
  margin-left: 20px
}

.campaign-field-mapping-select {
  width: 100%
}

.clickable {
  cursor: pointer
}

.full-size {
  width: 100%
}

.lead-info .about .properties {
  max-height: 280px;
  overflow-y: auto
}

.dashboard .widget-timeline ul.list-timeline li span.date {
  width: 90px
}

.dashboard .widget-timeline ul.list-timeline li span.ellipses {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 65%
}

.ember-list-view {
  overflow: auto;
  position: relative
}

.ember-list-item-view {
  position: absolute
}

.infinite-scroll-view {
  overflow-y: auto;
  max-height: 400px
}

.inline-editor .editor {
  display: inline
}

.inline-editor .editor input.form-control {
  display: inline
}

.inline-editor .actions {
  display: inline;
  max-width: 100px
}

.inline-editor .badge {
  padding: 2px 4px
}

.inline-editor a.edit {
  color: #666
}

.inline-editor .editor-content {
  display: none
}

.inline-editor table.inline-editor-display td {
  vertical-align: top
}

.inline-editor.is-editing .editor-content {
  display: block
}

.inline-editor.is-editing .display-content {
  display: none
}

.topnav .appbrand {
  color: #fff;
  height: 49px;
  line-height: 49px;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  padding: 0 10px 0 10px
}

.topnav .appbrand:hover {
  text-decoration: none
}

form.campaign-file-upload .is-saving {
  display: none
}

.error-page {
  margin-top: 100px
}

.navbar ul.nav>li>a {
  font-size: 14px;
  color: #424242;
  font-weight: 400
}

.navbar ul.nav>li>a.active {
  font-weight: bold
}

#system-alerts {
  width: 100%;
  padding: 0px 10px;
}

#system-alerts .system-alert {
  display: none;
  padding: 8px;
  margin-bottom: 0px
}

#system-alerts .system-alert.has-route {
  cursor: pointer
}

#platform-notifications {
  width: 100%;
  padding: 0
}

#platform-notifications .alert {
  margin: 0
}

.btn-small {
  font-size: 12px;
  padding: 4px
}

.alert {
  padding: 8px 15px;
  margin-bottom: 4px
}

/* DISABLED: fixed height replaced by height: auto in new design to allow
   the status bar to grow with its content. */
/* :global(.call-sidebar .call-status) {
  margin-bottom: 1px;
  height: 29px
} */

/* DISABLED: fixed height replaced by height: auto in new design.
   Control buttons area now sizes to its content. */
/* :global(.call-sidebar .control-buttons) {
  height: 30px
} */

/* DISABLED: padding overridden by new design button styles. */
/* :global(.call-sidebar .control-buttons .btn-group .btn) {
  padding: 4px 8px
} */

/* DISABLED: focus color overridden by new transparent button design. */
/* :global(.call-sidebar .control-buttons .btn-group .btn:focus) {
  color: #fff;
  background-color: #424242;
  border-color: #424242
} */

.call-sidebar .control-buttons .hint {
  text-align: right;
  color: #fff;
  padding-right: 8px;
  padding-top: 8px
}

.call-sidebar .lead-card {
  background-color: #555;
  border-radius: 5px;
  margin: 8px
}

.call-sidebar .lead-card .outbound-call-edit {
  color: #ddd
}

.call-sidebar .lead-card .outbound-call-edit .form-group {
  margin-bottom: 4px
}

.call-sidebar .lead-card .outbound-call-edit .form-group>label {
  font-size: 12px
}

.call-sidebar .lead-card .outbound-call-edit .form-group .form-control {
  height: auto;
  font-size: 12px;
  padding: 4px
}

.call-sidebar .lead-card .btn:hover {
  background-color: #424242 !important;
  color: #fff !important
}

/* DISABLED: btn-refresh color overridden by new transparent dark design. */
/* :global(.call-sidebar .leads-list-tabs .btn-refresh) {
  background-color: #27292a;
  border: none
} */

.call-sidebar ul.leads-list {
  overflow-y: auto !important
}

.call-sidebar ul.leads-list li a {
  line-height: inherit !important
}

/* DISABLED: status icon color overridden by new dark theme (#4a5568). */
/* :global(.call-sidebar ul.leads-list li i.status) {
  color: #424242 !important;
  padding-top: 2px;
  width: 24px
} */

/* DISABLED: same as above — overridden by new dark theme. */
/* :global(.call-sidebar ul.leads-list li i.status:before) {
  color: #424242 !important;
  font-size: 12px !important
} */

.call-sidebar ul.leads-list li .name {
  width: 185px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle
}

.call-sidebar ul.leads-list li .company {
  width: 185px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle
}

.call-sidebar ul.leads-list li .title {
  width: 185px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-style: italic;
  display: inline-block;
  vertical-align: middle
}

.call-sidebar ul.leads-list li.do-not-call i.status,
.call-sidebar ul.leads-list li.agent-flagged i.status {
  color: #bd362f !important
}

.call-sidebar ul.leads-list li.do-not-call i.status:before,
.call-sidebar ul.leads-list li.agent-flagged i.status:before {
  color: #bd362f !important
}

.call-sidebar ul.leads-list li.on-hold-until i.status {
  color: #FFFF66 !important
}

.call-sidebar ul.leads-list li.on-hold-until i.status:before {
  color: #FFFF66 !important
}

/* DISABLED: active lead background overridden by new rgba blue design. */
/* :global(.call-sidebar ul.leads-list li.active) {
  background-color: #496cad;
  color: #fff !important
} */

/* DISABLED: active lead text colors overridden by new #93c5fd design. */
/* :global(.call-sidebar ul.leads-list li.active a),
:global(.call-sidebar ul.leads-list li.active i),
:global(.call-sidebar ul.leads-list li.active i:before),
:global(.call-sidebar ul.leads-list li.active i.status),
:global(.call-sidebar ul.leads-list li.active i.status:before) {
  color: #fff !important
} */

/* DISABLED: online status color overridden by new #48bb78 green. */
/* :global(.call-sidebar ul.leads-list li.is-online i.status) {
  color: #8bbf61 !important
} */

/* DISABLED: same as above. */
/* :global(.call-sidebar ul.leads-list li.is-online i.status:before) {
  color: #8bbf61 !important
} */

/* DISABLED: sidebar scrolling region used position:fixed relative to the screen.
   Replaced by flex: 1 inside the new #right-sidebar flex column. */
/* :global(.call-sidebar .sidebar-scrolling-region) {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 54px;
  overflow-x: hidden;
  overflow-y: auto
} */

/* DISABLED: bottom bar used position:fixed pinned to the full screen left edge.
   Now uses position:fixed pinned to right:0 with width:var(--right-sidebar-width). */
/* :global(.call-sidebar .bottom-bar) {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 54px;
  z-index: 10;
  text-align: center;
  font-size: 24px;
  background-color: #000000
} */

/* DISABLED: bottom bar icon color overridden by new #718096 design. */
/* :global(.call-sidebar .bottom-bar i) {
  color: #aaa
} */

/* DISABLED: badge position overridden by new top:-10px / left:-10px values. */
/* :global(.call-sidebar .bottom-bar .badge) {
  position: relative;
  top: -16px;
  left: -16px;
  font-size: 10px;
  padding: 2px 4px
} */

.badge.badge-xs {
  font-size: 0.7em;
  padding: 2px 4px
}

.btn-tab {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 2px 4px
}

.btn-inverse.btn-selected {
  background-color: #8f8f8f
}

.dropdown-button-component {
  display: block;
  float: left;
  position: relative
}

.dropdown-button-component .dropdown-button-menu {
  position: absolute;
  top: 30px;
  left: 0px;
  z-index: 4000;
  max-height: 200px;
  max-width: 200px;
  overflow-y: auto;
  overflow-x: auto
}

.dropdown-button-component .dropdown-button-menu .btn {
  text-align: left
}

.dropdown-button-component .dropdown-button-menu .btn:hover,
.dropdown-button-component .dropdown-button-menu .btn:focus {
  background-color: #496cad !important;
  color: #fff !important
}

.dropdown-button-component.menu-align-right .dropdown-button-menu {
  left: inherit;
  right: 0px
}

.tooltip {
  position: fixed !important
}

.text-default {
  color: #333
}

.fa.fa-star,
.fa.fa-star-o {
  color: #ebdc36
}

.fa.fa-star.text-medium,
.fa.fa-star-o.text-medium {
  font-size: 18px
}

.label.label-activate {
  width: 55px
}

#menu-top ul.main>li {
  padding: 0 12px 0 0
}

#menu-top ul.main>li.dropdown.open>a {
  color: #fff
}

#menu-top ul.main>li.dropdown.open>a i {
  color: #fff
}

.leads-index .leads-index-lead .tag-list {
  padding: 4px 0
}

.tag-editor {
  width: 100%
}

.form-group .select2-container {
  display: block;
  width: 100% !important
}

.label-lead-status {
  margin-left: 12px
}

select,
textarea,
input {
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important
}

.make-switch .switch-mini {
  line-height: 12px !important
}

.lead-lists-list i.fa-list {
  line-height: 18px !important
}

.tag-editor {
  height: auto !important;
  cursor: text
}

.tag-editor span.label {
  cursor: default
}

.tag-editor span.label a.tag-remove {
  color: #fff
}

.tag-editor span.label a.tag-remove:hover {
  color: #fff
}

.tag-editor input[type=text] {
  border: 0;
  width: 50%;
  background-color: #fff
}

.bg-warning {
  background-color: #ab7a4b !important
}

.bg-danger {
  background-color: #bd362f !important
}

.btn-icon-stacked {
  padding-left: 55px
}

.paginated-view .paginated-view-loading {
  text-align: center;
  font-size: 1.1em;
  padding: 10px 0px
}

.call-session-results .widget .outbound-call-list {
  max-height: 600px;
  overflow-y: scroll
}

.widget .widget-body.list .text-success {
  color: #8bbf61 !important
}

.widget .widget-body.list .text-warning {
  color: #ab7a4b !important
}

.c3 .c3-region.conversation {
  fill: #8bbf61
}

.table.table-padded>tr>td {
  padding: 4px
}

.infinite-scroll-indicator {
  text-align: center;
  padding: 8px
}

.ui-switch {
  min-width: 60px
}

.ui-switch.ui-switch-small {
  min-width: 50px
}

.ui-switch.ui-switch-mini {
  min-width: 40px
}

.service-provider-fields-edit .field-list {
  max-height: 500px;
  overflow-y: auto
}

.service-provider-fields-edit .field-list td {
  border-bottom: 1px solid #eee;
  padding: 4px
}

.service-provider-fields-edit .field-list .fa-bars {
  margin-right: 4px
}

.service-provider-fields-edit .field-list .field-hidden {
  background-color: #eee;
  font-style: italic;
  color: #444
}

.pointer {
  cursor: pointer
}

.leads-list-lead.animate-lead {
  display: none
}

/* DISABLED: chat conversations used position:fixed with right:300px relative
   to the old sidebar. Now flows inside #right-sidebar as a relative element. */
/* :global(.chat-conversations) {
  position: fixed;
  bottom: 0px;
  list-style: none;
  right: 300px;
  z-index: 1001
} */

.chat-conversations .chat-conversation {
  background: #496cad;
  padding: 5px 2px;
  width: 200px;
  color: white;
  display: inline-block
}

.chat-conversations .chat-conversation input[type=text] {
  width: 100%;
  border: solid 1px transparent;
  border-radius: 0 !important;
  margin-top: 2px
}

.chat-conversations .chat-conversation .chat-conversation-header {
  overflow: hidden;
  padding: 0px 5px 5px
}

.chat-conversations .chat-conversation .chat-conversation-header .chat-conversation-name {
  float: left;
  width: 175px;
  cursor: pointer
}

.chat-conversations .chat-conversation .chat-conversation-header .chat-conversation-close {
  float: right;
  width: 10px;
  text-align: center;
  cursor: pointer
}

.chat-conversations .chat-conversation .chat-conversation-header .chat-conversation-unread {
  color: #FAA43A;
  cursor: pointer
}

.chat-conversation-messages {
  list-style: none;
  background: white;
  font-size: 11px;
  color: black;
  height: 200px;
  word-wrap: break-word;
  overflow-y: auto
}

.detect-voice-mail-modal-background {
  background-color: #00000099;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10000
}

.detect-voice-mail-modal-background .detect-voice-mail-modal {
  width: 600px;
  margin: 15% auto;
  background-color: #27292a;
  border-radius: 6px;
  color: #fff
}

.detect-voice-mail-modal-background .detect-voice-mail-modal .detect-voice-mail-modal-header {
  font-size: 16pt;
  padding: 8px
}

.detect-voice-mail-modal-background .detect-voice-mail-modal .detect-voice-mail-modal-body {
  padding: 8px
}

.detect-voice-mail-modal-background .detect-voice-mail-modal .detect-voice-mail-modal-buttons {
  padding: 8px;
  text-align: center
}

.hidden {
  display: none;
}

.ember-power-select-selected-item {
  margin: 0;
}

.ember-power-select-clear-btn {
  font-size: 16px;
  display: inline-block;
  width: 0;
  height: 0;
  margin: auto;
  top: -8px;
  line-height: 0;
  bottom: 0;
  border-style: solid;
  border-width: 7px 4px 0px 4px;
  border-color: transparent;
}

.ember-power-select-multiple-option {
  background-color: #496cad;
  color: #fff;
  font-size: 80%;
  font-weight: 600;
  border: 0px;
  padding: 2px 4px;
  margin-right: 1px;
}

.ember-power-select-search-input {
  padding: 6px 12px;
  color: #555555;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: none;
}

.ember-power-select-search-input:focus {
  outline: 0;
  border: 1px solid #eee;
}

.form-control .ember-power-select-trigger-multiple-input {
  padding-top: 2px;
}

.ember-power-select-multiple-trigger {
  height: auto;
}

.ember-basic-dropdown-content {
  z-index: 10000;
}

.auto-width {
  width: auto !important;
}


/* =============================================================
   NEW DESIGN — 3-COLUMN FLEX LAYOUT
   ============================================================= */


/* =============================================================
   1. DESIGN TOKENS
   Single source of truth for all spacing, color, and size values.
   ============================================================= */

:root {
  --left-sidebar-width: 56px;
  --right-sidebar-width: 320px;
  --header-height: 64px;
  --bottom-bar-height: 54px;
  --bg-app: #f4f7fa;
  --bg-sidebar: #1a202c;
  --bg-header: #ffffff;
  --primary-color: #496cad;
  --accent-color: #8bbf61;
  --text-main: #2d3748;
  --text-muted: #718096;
  --border-color: #e2e8f0;
  --avatar-size: 40px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
}


/* =============================================================
   2. CORE 3-COLUMN FLEX LAYOUT
   body > #left-sidebar | #content | #right-sidebar
   ============================================================= */

/* Prevent horizontal scrollbar on body */
body {
  overflow-x: hidden;
}

/* Root flex row — full viewport height, no overflow */
.app-layout {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

/* --- Left sidebar column --- */
#left-sidebar {
  width: var(--left-sidebar-width);
  min-width: var(--left-sidebar-width);
  height: 100vh;
  background-color: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  flex-shrink: 0;
}

/* --- Center content column ---
   FIX #5: content is now a flex column; legacy margins are neutralized below. */
#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-app);
  margin: 0 !important;
}

/* Main scrollable area inside #content */
#content .layout-app {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 30px !important;
  margin: 0 !important;
  background-color: #f4f7fa;
}

/* FIX #6: single base definition for layout-app.innerAll. Do not duplicate later. */
#content .layout-app.innerAll {
  padding-top: 0 !important;
  margin: 0 !important;
}

/* --- Right sidebar column --- */
#right-sidebar {
  width: var(--right-sidebar-width);
  min-width: var(--right-sidebar-width);
  height: 100vh;
  background-color: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 100;
}

/* Hide both sidebars when the layout has no-sidebar modifier */
.app-layout.no-sidebar #left-sidebar,
.app-layout.no-sidebar #right-sidebar { display: none; }


/* =============================================================
   3. NEUTRALIZE LEGACY LAYOUT STYLES
   Override the old container-fluid / #menu-based layout so the
   new flex columns take full control.
   ============================================================= */

.container-fluid #content { margin: 0; }
.container-fluid #menu ~ #content { margin: 0; }
.container-fluid #menu { right: auto; position: relative; }
.container-fluid.no-sidebar #menu ~ #content { margin-right: 0; }
.container-fluid.no-sidebar #menu { display: none; }


/* =============================================================
   4. LEFT SIDEBAR — NAV LINKS
   Remove all default link decoration so slim icon nav is clean.
   ============================================================= */

.slim-sidebar-nav a,
.slim-sidebar-nav a:hover,
.slim-sidebar-nav a:focus,
.slim-sidebar-nav a.active {
  text-decoration: none !important;
  border-bottom: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* =============================================================
   5. HEADER NAV — ACTIVE DROPDOWN STATE
   Active/open dropdowns in the top nav highlight blue.
   ============================================================= */

.nav-links li.dropdown.open > .dropdown-toggle,
.nav-links li.dropdown.show > .dropdown-toggle,
.nav-links li.dropdown.active-parent > .dropdown-toggle,
.nav-links li.dropdown:has(.dropdown-menu a.active) > .dropdown-toggle,
.nav-links li.dropdown:has(.dropdown-menu .active) > .dropdown-toggle {
  color: #2563eb !important;
  font-weight: 600 !important;
}


/* =============================================================
   6. CHAT CONVERSATIONS — POSITION (bottom-left, over content)
   Fixed to the bottom of the screen, to the LEFT of the right
   sidebar, so chat windows never cover the dialer / CRC selection.
   (chat tray floats over the content).
   ============================================================= */

.chat-conversations {
  position: fixed !important;
  bottom: 0 !important;
  right: var(--right-sidebar-width, 320px) !important;
  left: auto !important;
  list-style: none !important;
  z-index: 1001 !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  text-align: right !important;
}

/* Reset text alignment inside each chat box (the container is right-aligned
   to position chats, but content should read left-to-right) */
.chat-conversations .chat-conversation {
  text-align: left !important;
}


/* =============================================================
   7. RIGHT SIDEBAR — CALL SIDEBAR: DARK DESIGN
   All dark-theme overrides for the call panel (#right-sidebar).
   ============================================================= */

/* --- 7a. Sidebar background --- */
#right-sidebar,
#right-sidebar .call-sidebar { background-color: #0d1526 !important; }

/* Make .call-sidebar a flex column so inner regions can flex-grow */
#right-sidebar .call-sidebar {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Scrolling region layout: consolidated in section 11 to avoid duplication */

/* Unify all inner panels to the same dark background */
#right-sidebar .innerAll,
#right-sidebar .innerTB,
#right-sidebar .innerLR,
#right-sidebar .sidebar-scrolling-region,
#right-sidebar #menu > div { background-color: #0d1526 !important; }

/* --- 7b. Bottom action bar --- */
#right-sidebar .bottom-bar {
  position: fixed !important;
  bottom: 0 !important; right: 0 !important; left: auto !important;
  width: var(--right-sidebar-width) !important;
  height: var(--bottom-bar-height) !important;
  z-index: 10 !important;
  background-color: #111d35 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  padding: 0 20px !important;
  line-height: normal !important;
  text-align: center !important;
}

/* Bottom bar links and icons */
.call-sidebar .bottom-bar a { color: #718096 !important; font-size: 20px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; position: relative !important; }
.call-sidebar .bottom-bar a:hover { color: #e2e8f0 !important; }
.call-sidebar .bottom-bar i { color: inherit !important; font-size: 20px !important; }

/* --- 7c. Status bar (online dot + label) --- */
.call-sidebar .call-status {
  background-color: #0d1526 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 16px !important;
  height: auto !important;
  margin-bottom: 0 !important;
  text-align: center !important;
}
.call-sidebar .call-status span { color: #e2e8f0 !important; font-size: 14px !important; font-weight: 600 !important; }
.call-sidebar .call-status .call-status-dot {
  display: inline-block !important; width: 10px !important; height: 10px !important;
  border-radius: 50% !important; background-color: #e53e3e !important;
  margin-right: 8px !important; vertical-align: middle !important; flex-shrink: 0 !important;
}
.call-sidebar .call-status .call-status-dot.is-online { background-color: #48bb78 !important; }

/* --- 7d. Control buttons toolbar ---
   FIX #3 & #4: consolidated .control-buttons .btn and :hover — merged both blocks,
   kept final transition values (0.08s) and final hover background (rgba 0.1).
   Removed the first block that had transition:all 0.2s and background rgba(0.08). */
.call-sidebar .control-buttons {
  background-color: #111d35 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 8px !important; height: auto !important;
}
.call-sidebar .control-buttons .btn-group { width: 100% !important; display: flex !important; justify-content: space-around !important; }

/* Base button */
.call-sidebar .control-buttons .btn-group .btn {
  background-color: transparent !important;
  border: none !important;
  color: #718096 !important;
  font-size: 16px !important;
  padding: 4px 8px !important;
  /* Merged: press feedback transition replaces the old transition:all 0.2s */
  transition: transform 0.08s ease, background-color 0.08s ease !important;
  transform: scale(1) !important;
  will-change: transform !important;
}

/* Hover — scale up slightly */
.call-sidebar .control-buttons .btn-group .btn:hover {
  /* Merged: kept rgba(0.1) from press-feedback block, added transform from same block */
  transform: scale(1.08) !important;
  background-color: rgba(255,255,255,0.1) !important;
  color: #e2e8f0 !important;
}

/* Active — press down feedback */
.call-sidebar .control-buttons .btn-group .btn:active {
  transform: scale(0.90) !important;
  background-color: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  transition: transform 0.05s ease !important;
}

/* Focus — clear browser outline */
.call-sidebar .control-buttons .btn-group .btn:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #718096 !important;
}

/* Override the global 200ms transition that slows down the press effect */
html.csstransitions.csstransforms3d .call-sidebar .btn {
  -webkit-transition: transform 0.08s ease, background-color 0.08s ease !important;
  -moz-transition: transform 0.08s ease, background-color 0.08s ease !important;
  transition: transform 0.08s ease, background-color 0.08s ease !important;
}

/* --- 7e. Soft phone area (innerTB / innerLR) --- */
.call-sidebar .innerLR { padding-left: 0 !important; padding-right: 0 !important; }
.call-sidebar .innerTB { background-color: #0d1526 !important; border-radius: 0 !important; margin: 0 !important; padding: 12px !important; }
.call-sidebar .innerTB p { color: #a0aec0 !important; font-size: 13px !important; text-align: center !important; margin-bottom: 12px !important; }

/* --- 7f. Connection buttons (Connect / WebRTC / SIP) --- */
.call-sidebar .innerTB .btn {
  width: 100% !important; border-radius: 6px !important;
  padding: 10px 16px !important; font-size: 14px !important; font-weight: 600 !important;
  margin-bottom: 8px !important; border: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  transition: transform 0.08s ease, filter 0.08s ease !important;
  transform: scale(1) !important;
  will-change: transform !important;
}
.call-sidebar .innerTB .btn i,
.call-sidebar .innerTB .btn svg { font-size: 16px !important; width: 16px !important; height: 16px !important; }

/* Hover / active feedback for connection buttons */
#right-sidebar .call-sidebar .innerTB .btn:hover {
  transform: scale(1.02) !important;
  filter: brightness(1.1) !important;
}

#right-sidebar .call-sidebar .innerTB .btn:active {
  transform: scale(0.96) !important;
  filter: brightness(0.9) !important;
  transition: transform 0.05s ease !important;
}

/* Button color variants */
#right-sidebar .call-sidebar .innerTB .btn-success,
#right-sidebar .call-sidebar .innerTB a.btn-success { background-color: #3db557 !important; border-color: #3db557 !important; color: #ffffff !important; }
#right-sidebar .call-sidebar .innerTB .btn-info,
#right-sidebar .call-sidebar .innerTB a.btn-info { background-color: #1a3a6b !important; border-color: #1a3a6b !important; color: #ffffff !important; }
#right-sidebar .call-sidebar .innerTB .btn-primary,
#right-sidebar .call-sidebar .innerTB a.btn-primary { background-color: #2a8fd4 !important; border-color: #2a8fd4 !important; color: #ffffff !important; }

/* Lead card — defined in the legacy-preserved section above (~line 305). */

/* =============================================================
   7j. LEAD-CARD ACTION BUTTONS — avatar left | buttons stacked right
   Transfer / Voicemail / Hang Up / Redial, matching the legacy layout.
   Overrides section 12's .btn-group-vertical flex-row rule.

   Hidden buttons (isShowing=false) render as [disabled]; we force
   them to display:none so their wrapper collapses to 0 (like the
   original), keeping the first visible button aligned with the avatar.
   ============================================================= */

/* Avatar row: avatar left | buttons right, aligned to TOP (like original) */
#right-sidebar .lead-card .profile-avatar .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

/* Columns: no float, no padding */
#right-sidebar .lead-card .profile-avatar .row > .col-md-6 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

/* Avatar column: fixed width, centered */
#right-sidebar .lead-card .profile-avatar .row > .col-md-6:first-child {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}

/* Avatar image: larger, closer to legacy (~96px) */
#right-sidebar .lead-card .profile-avatar .row > .col-md-6:first-child img,
#right-sidebar .lead-card .profile-avatar .row > .col-md-6:first-child [class*="picture"] {
  width: 96px !important;
  height: 96px !important;
}

/* Buttons column: takes remaining space */
#right-sidebar .lead-card .profile-avatar .row > .col-md-6:last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Restore VERTICAL stack (override section 12's flex-row) */
#right-sidebar .lead-card .btn-group-vertical {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
}

/* Button wrappers (div[style="margin-bottom:15px"]) — legacy-like spacing */
#right-sidebar .lead-card .btn-group-vertical > div {
  width: 100% !important;
  float: none !important;
  margin-bottom: 10px !important;
}
#right-sidebar .lead-card .btn-group-vertical > div:last-child {
  margin-bottom: 0 !important;
}

/* Collapse wrappers whose button is hidden ([disabled]) so no phantom gap */
#right-sidebar .lead-card .btn-group-vertical > div:has(.btn[disabled]) {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Action buttons — larger, like legacy. Only VISIBLE buttons get styled;
   hidden ones ([disabled]) are forced to display:none below. */
#right-sidebar .lead-card .btn-group-vertical .btn:not([disabled]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Hidden buttons: force back to display:none so their wrapper collapses */
#right-sidebar .lead-card .btn-group-vertical .btn[disabled] {
  display: none !important;
}

/* Icons inside buttons */
#right-sidebar .lead-card .btn-group-vertical .btn:not([disabled]) i {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

/* Color variants (legacy semantics: success=green, warning=orange) */
#right-sidebar .lead-card .btn-group-vertical .btn-success:not([disabled]) {
  background-color: #3db557 !important;
  border-color: #3db557 !important;
  color: #ffffff !important;
}
#right-sidebar .lead-card .btn-group-vertical .btn-warning:not([disabled]) {
  background-color: #d98a3d !important;
  border-color: #d98a3d !important;
  color: #ffffff !important;
}

/* Transfer must always be green — it's coded style="success" (btn-success,
   same rule as above) but was intermittently rendering orange for reasons
   never pinned down after extensive live debugging; force it directly by
   its own class instead of relying on btn-success resolving correctly. */
#right-sidebar .lead-card .btn-group-vertical .lead-card-transfer-btn:not([disabled]) {
  background-color: #3db557 !important;
  border-color: #3db557 !important;
  color: #ffffff !important;
}

/* --- 7g. Leads list tabs (All / Active / Refresh) --- */
.call-sidebar .leads-list-tabs {
  background-color: #111d35 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  margin: 0 !important; padding: 0 8px !important;
  width: 100% !important; box-sizing: border-box !important;
}
.call-sidebar .leads-list-tabs .btn-tab {
  background-color: #0d1526 !important; border: none !important;
  border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  color: #718096 !important; font-size: 13px !important; font-weight: 500 !important;
  padding: 10px 8px !important; transition: all 0.2s ease !important; letter-spacing: -0.1px !important;
}

/* Selected tab state */
.call-sidebar .leads-list-tabs .btn-tab.btn-selected {
  background-color: #111d35 !important; color: #60a5fa !important;
  font-weight: 600 !important; border-bottom: 2px solid #2563eb !important;
}
.call-sidebar .leads-list-tabs .btn-refresh { background-color: transparent !important; border: none !important; color: #718096 !important; }

/* Tab badges (lead counts) */
.call-sidebar .leads-list-tabs .badge {
  font-size: 12px !important; padding: 4px 8px !important; border-radius: 12px !important;
  font-weight: 700 !important; vertical-align: middle !important; margin-left: 5px !important; line-height: 1 !important;
}
.call-sidebar .leads-list-tabs .badge-info { background-color: #3b82f6 !important; color: #ffffff !important; }
.call-sidebar .leads-list-tabs .badge-success { background-color: #22c55e !important; color: #ffffff !important; }

/* --- 7h. Alert boxes inside the sidebar --- */
.call-sidebar .alert-info { background-color: #e0f1fc !important; border: 1px solid rgba(37, 99, 235, 0.25) !important; color: #1a2f5a !important; border-radius: 8px !important; margin: 12px !important; font-size: 13px !important; }
.call-sidebar .alert-warning { background-color: #e2cfb7 !important; border: 1px solid rgba(180, 100, 20, 0.3) !important; color: #1a2f5a !important; border-radius: 8px !important; margin: 12px !important; font-size: 13px !important; }


/* =============================================================
   8. CALL PANEL — LEADS LIST
   DOM: #right-sidebar #menu > div > ul > li > a
        > (span.company + i.status + span.name + span.title)
   Layout uses position:absolute for the status dot (see section 9).
   ============================================================= */

/* List container */
/* :global(#right-sidebar #menu > div ul) { width: 100% !important; overflow: visible !important; background: #0d1526 !important; padding: 0 !important; list-style: none !important; } */
#right-sidebar #menu > div ul {
  width: 100% !important;
  background: #0d1526 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* List item base */
#right-sidebar #menu > div ul li { position: relative !important; display: block !important; height: auto !important; min-height: unset !important; padding: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; box-sizing: border-box !important; background-color: #0d1526 !important; }

/* Text fields — widths and display set by the position:absolute block in section 9 */
#right-sidebar #menu > div ul li .company { font-size: 11px !important; font-weight: 400 !important; color: #718096 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; float: none !important; }
#right-sidebar #menu > div ul li .name { font-size: 13px !important; font-weight: 600 !important; color: #e2e8f0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.4 !important; float: none !important; }
#right-sidebar #menu > div ul li .title { font-size: 11px !important; font-style: italic !important; color: #4a5568 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; float: none !important; }

/* Status dot — base color; state overrides below */
#right-sidebar #menu > div ul li i.status:before { color: #4a5568 !important; font-size: 10px !important; }
#right-sidebar #menu > div ul li.is-online i.status:before { color: #48bb78 !important; }
#right-sidebar #menu > div ul li.do-not-call i.status:before,
#right-sidebar #menu > div ul li.agent-flagged i.status:before { color: #bd362f !important; }
#right-sidebar #menu > div ul li.on-hold-until i.status:before { color: #FFFF66 !important; }

/* Active lead highlight */
#right-sidebar #menu > div ul li.active { background-color: rgba(37,99,235,0.15) !important; }
#right-sidebar #menu > div ul li.active > a { color: #93c5fd !important; }
#right-sidebar #menu > div ul li.active i.status:before { color: #93c5fd !important; }

/* Hide Bootstrap clearfix inside list items (breaks flex layout) */
#right-sidebar #menu > div ul li .clearfix { display: none !important; }

/* Wrappers: full width */
#right-sidebar #menu,
#right-sidebar #sidebar-fusion-wrapper { width: 100% !important; box-sizing: border-box !important; }


/* =============================================================
   9. CALL PANEL — STATUS DOT POSITIONING
   Dot is absolutely positioned right of the lead row.
   Row anchor: li > a (position:relative, padding-right:26px).
   ============================================================= */

/* Row anchor */
#right-sidebar #menu > div ul li > a {
  display: block !important;
  position: relative !important;
  padding: 7px 26px 7px 8px !important;
}

/* Text fields: full width minus dot column */
#right-sidebar #menu > div ul li .company,
#right-sidebar #menu > div ul li .name,
#right-sidebar #menu > div ul li .title {
  display: block !important;
  width: calc(100% - 28px) !important;
}

/* Dot: centered vertically, pinned to right edge */
#right-sidebar #menu > div ul li i.status {
  position: absolute !important;
  right: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 8px !important;
  height: 8px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

/* ::before renders the actual glyph */
#right-sidebar #menu > div ul li i.status:before {
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 8px !important;
  color: #4a5568 !important;
}

/* Preserve special status colors */
#right-sidebar #menu > div ul li.is-online i.status:before {
  color: #48bb78 !important;
}

#right-sidebar #menu > div ul li.do-not-call i.status:before,
#right-sidebar #menu > div ul li.agent-flagged i.status:before {
  color: #bd362f !important;
}

#right-sidebar #menu > div ul li.on-hold-until i.status:before {
  color: #FFFF66 !important;
}


/* =============================================================
   10. CALL PANEL — BOTTOM BAR BADGES
   DOM: <a><i></i></a><span.badge> — badge is sibling of <a>
   ============================================================= */

#right-sidebar .call-sidebar .bottom-bar > a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
#right-sidebar .call-sidebar .bottom-bar > .badge {
  position: relative !important; top: -10px !important; left: -14px !important;
  margin-right: 16px !important; font-size: 11px !important; padding: 3px 6px !important;
  min-width: 16px !important; border-radius: 10px !important; font-weight: 700 !important; line-height: 1 !important;
}
#right-sidebar .call-sidebar .bottom-bar > .badge-info { background-color: #2563eb !important; }
#right-sidebar .call-sidebar .bottom-bar > .badge-success { background-color: #22c55e !important; }


/* =============================================================
   11. RIGHT SIDEBAR — SCROLL FIX & VERTICAL LAYOUT
   Flex column chain: #right-sidebar > .call-sidebar >
   #sidebar-fusion-wrapper > #menu (scrolls) > #menu > div > ul
   ============================================================= */

/* =============================================================
   11. RIGHT SIDEBAR — SCROLL ONLY ON LEADS LIST
   ============================================================= */

#right-sidebar,
#right-sidebar .call-sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#right-sidebar #sidebar-fusion-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#right-sidebar #menu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#right-sidebar .sidebar-scrolling-region {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}

#right-sidebar .sidebar-scrolling-region > .ember-view,
#right-sidebar .sidebar-scrolling-region > .ember-view > .ember-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#right-sidebar .leads-list-tabs {
  flex: 0 0 auto !important;
}

#right-sidebar ul.leads-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 100px !important;
}

/* =============================================================
   11b. RIGHT SIDEBAR — LEAD-CARD / LEADS-LIST SCROLL BEHAVIOR
   Two states, distinguished by DOM content (.status = offline):

   ON A CALL (no .status):  card = priority, scrolls internally;
                            list = compact 200px strip at bottom,
                            tabs pinned on top, ul scrolls below.
   OFFLINE  (.status present): card = natural height, no scroll;
                            list = expands to fill remaining space.

   The ul.leads-list uses position:absolute to override Ember's
   inline height (paginated-view injects a JS-computed height that
   CSS height can't beat). It's anchored below the 45px tabs row.
   margin-bottom on the region clears the fixed bottom-bar.
   ============================================================= */

/* Region ends where the fixed bottom-bar begins (no content behind it) */
#right-sidebar #menu .sidebar-scrolling-region {
  margin-bottom: 54px !important;
}

/* --- BASE (ON A CALL) — card: priority, scrolls internally --- */
#right-sidebar #menu .sidebar-scrolling-region > .ember-view:has(> .lead-card) {
  flex: 1 1 auto !important;
  min-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
}

/* --- BASE (ON A CALL) — list wrapper: compact fixed strip, relative anchor --- */
#right-sidebar #menu .sidebar-scrolling-region > .ember-view:has(ul.leads-list) {
  flex: 0 0 auto !important;
  height: 200px !important;
  min-height: 200px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

/* --- OFFLINE — card: natural height, no scroll (higher specificity) --- */
#right-sidebar #menu .sidebar-scrolling-region > .ember-view:has(> .lead-card .status) {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* --- OFFLINE — list wrapper: expands to fill space --- */
#right-sidebar #menu .sidebar-scrolling-region > .ember-view:has(> .lead-card .status) ~ .ember-view:has(ul.leads-list) {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  position: relative !important;
}

/* --- Tabs (All / Current): pinned on top of the list, above the ul --- */
#right-sidebar #menu .sidebar-scrolling-region > .ember-view:has(ul.leads-list) .leads-list-tabs {
  position: relative !important;
  z-index: 2 !important;
}

/* --- ul.leads-list: absolute, anchored BELOW the 45px tabs row,
   overriding Ember's inline height so it fills its wrapper and
   scrolls without overflowing --- */
#right-sidebar #menu .sidebar-scrolling-region > .ember-view:has(ul.leads-list) ul.leads-list,
#right-sidebar #menu .sidebar-scrolling-region > .ember-view:has(ul.leads-list) ul.leads-list.paginated-view {
  position: absolute !important;
  top: 45px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 8px !important;
  box-sizing: border-box !important;
}

/* Lead-card itself: natural height, wrapper handles scroll */
#right-sidebar .lead-card {
  overflow: visible !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* =============================================================
   11c. Fix the intermediate .ember-view (CallControlPanel wrapper)
   between #sidebar-fusion-wrapper and .sidebar-scrolling-region.
   It had min-height:auto, which blocked the flex chain from
   propagating the fixed height, causing everything to overflow.
   ============================================================= */
#right-sidebar #sidebar-fusion-wrapper > .ember-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}


/* =============================================================
   12. RIGHT SIDEBAR — TOP ICON TOOLBAR (single line)
   Forces all buttons into one flex row regardless of count.
   ============================================================= */

#right-sidebar .control-buttons,
#right-sidebar .btn-group,
#right-sidebar .btn-group-vertical {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 2px !important;
}

#right-sidebar .control-buttons .btn,
#right-sidebar .btn-group .btn {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 6px 4px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* Shrink icons slightly to fit more buttons */
#right-sidebar .control-buttons .btn i,
#right-sidebar .btn-group .btn i,
#right-sidebar .control-buttons .btn .fa,
#right-sidebar .btn-group .btn .fa {
  font-size: 13px !important;
}


/* =============================================================
   13. RIGHT SIDEBAR — COMPACT INTERNAL SPACING (<=1400px)
   Tighten padding on all inner components when sidebar is narrower.
   ============================================================= */

@media (max-width: 1400px) {

  /* Status bar */
  #right-sidebar .call-status {
    padding: 10px 12px !important;
  }

  #right-sidebar .call-status span {
    font-size: 13px !important;
  }

  /* Top icon bar */
  #right-sidebar .control-buttons {
    padding: 6px 4px !important;
  }

  #right-sidebar .control-buttons .btn-group .btn {
    font-size: 14px !important;
    padding: 4px 5px !important;
  }

  /* Voice connect area */
  #right-sidebar .innerTB {
    padding: 10px 8px !important;
  }

  #right-sidebar .innerTB p {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  #right-sidebar .innerTB .btn {
    font-size: 13px !important;
    padding: 9px 8px !important;
    gap: 6px !important;
  }

  /* Tabs */
  #right-sidebar .leads-list-tabs {
    padding: 0 4px !important;
  }

  #right-sidebar .leads-list-tabs .btn-tab {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  #right-sidebar .leads-list-tabs .badge {
    font-size: 11px !important;
    padding: 3px 7px !important;
  }

  /* Lead row layout */
  #right-sidebar #menu > div ul li > a {
    grid-template-columns: minmax(0, 1fr) 8px !important;
    column-gap: 4px !important;
    padding: 7px 8px !important;
  }

  #right-sidebar #menu > div ul li .company {
    font-size: 10px !important;
  }

  #right-sidebar #menu > div ul li .name {
    font-size: 12px !important;
  }

  #right-sidebar #menu > div ul li .title {
    font-size: 10px !important;
  }

  /* Status dot */
  #right-sidebar #menu > div ul li i.status {
    width: 8px !important;
    font-size: 8px !important;
    justify-self: end !important;
  }

  #right-sidebar #menu > div ul li i.status:before {
    font-size: 8px !important;
  }
}


/* =============================================================
   14. RIGHT SIDEBAR — RESPONSIVE WIDTH BREAKPOINTS
   Intentional cascade: 1400→260px, 1100→240px, 1023→280px,
   900→240px, 820→220px, 767→300px (fixed overlay)
   ============================================================= */

/* 14" laptops and under */
@media (max-width: 1400px) {
  #right-sidebar {
    width: 260px !important;
    min-width: 260px !important;
  }

  #right-sidebar .bottom-bar {
    width: 260px !important;
  }
}

/* Small laptops */
@media (max-width: 1100px) {
  #right-sidebar {
    width: 240px !important;
    min-width: 240px !important;
  }

  #right-sidebar .bottom-bar {
    width: 240px !important;
  }
}

/* Tablet landscape */
@media (max-width: 1023px) and (min-width: 768px) {
  #right-sidebar { width: 280px !important; min-width: 280px !important; }
  #right-sidebar .bottom-bar { width: 280px !important; }
  #content .layout-app { padding: 16px !important; }
}

/* iPad Air / small tablets */
@media (max-width: 900px) and (min-width: 768px) {

  #right-sidebar {
    width: 240px !important;
    min-width: 240px !important;
  }

  #right-sidebar .bottom-bar {
    width: 240px !important;
  }

  /* Connection buttons */
  #right-sidebar .call-sidebar .innerTB .btn {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* Leads list: tighter text columns */
  .call-sidebar ul.leads-list li .name,
  .call-sidebar ul.leads-list li .company,
  .call-sidebar ul.leads-list li .title {
    width: 140px !important;
  }
}

/* iPad Mini */
@media (max-width: 820px) and (min-width: 768px) {

  #right-sidebar {
    width: 220px !important;
    min-width: 220px !important;
  }

  #right-sidebar .bottom-bar {
    width: 220px !important;
  }

  .call-sidebar ul.leads-list li .name,
  .call-sidebar ul.leads-list li .company,
  .call-sidebar ul.leads-list li .title {
    width: 120px !important;
  }
}

/* Mobile: sidebar becomes fixed overlay, slides in from right */
@media (max-width: 767px) {
  #left-sidebar,
  .slim-sidebar-nav { width: 56px !important; min-width: 56px !important; display: flex !important; }

  #right-sidebar {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 300px !important; min-width: 300px !important;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1050;
  }
  #right-sidebar.is-open { transform: translateX(0); }
  /* Overlay should be handled by a real DOM element, not #right-sidebar::before,
     because transforms create a containing block. */
  #right-sidebar .bottom-bar { width: 300px !important; position: fixed !important; bottom: 0 !important; right: 0 !important; }
  #content { flex: 1 !important; min-width: 0 !important; }
  #content .layout-app { padding: 12px !important; }

  /* Floating FAB to open the call panel on mobile */
  .mobile-call-panel-toggle {
    display: flex !important; position: fixed !important;
    bottom: 20px !important; right: 20px !important;
    width: 48px !important; height: 48px !important;
    background-color: #2563eb !important; color: #fff !important;
    border-radius: 50% !important; align-items: center !important; justify-content: center !important;
    font-size: 20px !important; z-index: 1040 !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.4) !important;
    border: none !important; cursor: pointer !important;
  }
}

/* FAB hidden on desktop */
.mobile-call-panel-toggle { display: none; }


/* =============================================================
   15. DASHBOARD — SUB-HEADER TABS BAR
   Sticky tabs bar directly below the app header.
   ============================================================= */

/* Pull container flush to the edges (negates parent's 30px padding) */
.col-separator-first {
  margin: 0 -30px 0 -30px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Background colors for col-table and col-separator-first */
.col-table {
  background-color: #f4f7fa !important;
}

.col-separator-first {
  background-color: #f4f7fa !important;
}

/* Allow dropdowns to overflow col-table and row-app */
.col-table { overflow: visible !important; }
.row-app { overflow: visible !important; }

/* Hide the org title heading — it's shown in the app-header instead */
.col-table-row.border-bottom h2.innerAll { display: none !important; }

/* Sub-header bar container (sticky, consolidated — see line ~2034/2042/2205 removed) */
.col-table-row.border-bottom {
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  min-height: 50px !important;
  background-color: #ffffff !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

/* Right side wrapper span */
.col-table-row.border-bottom > span.innerAll {
  float: none !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Tab button group: horizontal flex, hidden scrollbar */
.col-table-row.border-bottom .btn-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.col-table-row.border-bottom .btn-group::-webkit-scrollbar { display: none !important; }

/* Individual tab buttons */
.col-table-row.border-bottom .btn-group .btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #718096 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Hide FA icons inside desktop tab buttons */
.col-table-row.border-bottom .btn-group .btn i { display: none !important; }

/* Tab hover state */
.col-table-row.border-bottom .btn-group .btn:hover {
  color: #2563eb !important;
  background: transparent !important;
  border-bottom-color: #93c5fd !important;
}

/* Active tab — filled blue pill */
.col-table-row.border-bottom .btn-group .btn.active,
.col-table-row.border-bottom .btn-group a.btn.active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  border-radius: 6px !important;
}

/* Hide Bootstrap clearfix (breaks flex row) */
.col-table-row.border-bottom .clearfix {
  display: none !important;
}

/* Non-border-bottom rows: add top padding */
.col-table-row:not(.border-bottom) {
  padding-top: 8px !important;
}

/* Sticky sub-header: consolidated into the main block above */

/* overflow:visible already set in the main block above */

.col-table-row.border-bottom .dashboard-tabs-desktop .btn-group {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.col-table-row.border-bottom .dashboard-tabs-desktop .btn-group {
  overflow-y: visible !important;
}

.col-table-row.border-bottom .btn-group {
  overflow: visible !important;
}

/* Sub-header right: export button + tabs in one flex row */
.col-table-row.border-bottom > span.dashboard-subheader-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 !important;
  float: none !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  justify-content: flex-start !important;
}

@media (min-width: 1024px) {
  .col-table-row.border-bottom > span.dashboard-subheader-right {
    padding-left: 180px !important;
  }
}

@media (max-width: 1100px) {
  .col-table-row.border-bottom > span.dashboard-subheader-right {
    padding-left: 0 !important;
  }
}


/* =============================================================
   16. DASHBOARD — TABS RESPONSIVE CONTROL
   >1400px: show all tabs individually
   <=1400px: show "More" dropdown for extra tabs
   <=900px: move base tabs into dropdown too
   <=768px: replace entire bar with a mobile dropdown trigger
   ============================================================= */

/* Desktop tab group base styles */
.dashboard-tabs-desktop .btn-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  position: relative !important;
}

/* "More" wrapper: overflow visible so its dropdown can escape */
.dashboard-tabs-more-wrapper {
  position: relative !important;
  overflow: visible !important;
}

/* "More" dropdown menu */
.dashboard-tabs-more-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 99999 !important;
  display: block !important;
  min-width: 220px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

.dashboard-tabs-more-menu li {
  display: block !important;
}

.dashboard-tabs-more-menu li a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  color: #2d3748 !important;
  white-space: nowrap !important;
}

.dashboard-tabs-more-menu li a:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
}

/* Icon spacing inside the More dropdown */
.dashboard-tabs-more-menu li a i,
.dashboard-tabs-more-menu li a svg {
  margin-right: 8px !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Mobile dropdown: hidden until <=768px */
.dashboard-tabs-mobile {
  display: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* --- Default (>1400px): show all individual tabs, hide "More" --- */

/* Hide "More" button at large sizes */
.col-table-row.border-bottom .dashboard-tabs-more-wrapper {
  display: none !important;
  position: relative !important;
}

/* Hide duplicated items inside More menu (not needed at this size) */
.dashboard-tabs-more-menu .dashboard-menu-item-base {
  display: none !important;
}

/* Large-only tabs: visible by default */
.col-table-row.border-bottom .btn-group .dashboard-tab-large-only {
  display: inline-flex !important;
}

/* "More" dropdown: position + overflow only (show/hide managed by breakpoints below) */
.col-table-row.border-bottom .dashboard-tabs-more-wrapper {
  position: relative !important;
  overflow: visible !important;
}

/* "More" dropdown menu absolute positioning (consolidated 2026-08-26: merged base +
   final blocks; removed dead -80px iPad fix — width:max-content already prevents
   clipping at every breakpoint, verified visually) */
.col-table-row.border-bottom .dashboard-tabs-more-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  width: max-content !important;
  min-width: 200px !important;
  z-index: 999999 !important;
  margin-top: 4px !important;
}

/* "More" button active state (one of its child routes is active) */
.col-table-row.border-bottom .btn-group .dashboard-tabs-more-btn.is-active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  border-radius: 6px !important;
}

/* "More" button inactive state */
.col-table-row.border-bottom .btn-group .dashboard-tabs-more-btn:not(.is-active) {
  background: transparent !important;
  color: #718096 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}

/* --- <=1400px: show "More" button, hide large-only tabs --- */
@media (max-width: 1400px) {
  .col-table-row.border-bottom .dashboard-tabs-more-wrapper {
    display: inline-flex !important;
    overflow: visible !important;
  }

  .col-table-row.border-bottom .btn-group .dashboard-tab-large-only {
    display: none !important;
  }
}

/* --- <=900px (down to 769px): move base tabs into the dropdown too --- */
@media (max-width: 900px) and (min-width: 769px) {
  /* Hide the 4 horizontal base tabs */
  .col-table-row.border-bottom .btn-group .dashboard-tab-base {
    display: none !important;
  }

  /* Show the same 4 tabs inside the More dropdown */
  .dashboard-tabs-more-menu .dashboard-menu-item-base {
    display: block !important;
  }

  /* Highlight "More" button when a child is active */
  .dashboard-tabs-more-btn:has(~ .dashboard-tabs-more-menu .active),
  .dashboard-tabs-more-wrapper:has(.dashboard-tabs-more-menu .active) .dashboard-tabs-more-btn {
    border-bottom: 2px solid #2563eb !important;
    color: #2563eb !important;
    font-weight: 600 !important;
  }
}

/* --- <=768px: hide desktop tabs, show full mobile dropdown --- */
@media (max-width: 768px) {
  .dashboard-tabs-desktop {
    display: none !important;
  }

  .dashboard-tabs-mobile {
    display: block !important;
    flex: 1 !important;
    overflow: visible !important;
  }

  /* Mobile trigger button */
  .dashboard-tabs-trigger {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #2563eb !important;
    border-radius: 0 !important;
    color: #2563eb !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
  }

  .dashboard-tabs-trigger:hover {
    background: transparent !important;
    color: #1d4ed8 !important;
  }

  .dashboard-tabs-trigger .caret {
    margin-left: 6px !important;
    vertical-align: middle !important;
  }

  /* Mobile dropdown list */
  .dashboard-tabs-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    z-index: 2000 !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    min-width: 200px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
  }

  .dashboard-tabs-dropdown li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    color: var(--text-main) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .dashboard-tabs-dropdown li a i {
    font-size: 13px !important;
    width: 16px !important;
    text-align: center !important;
    color: #a0aec0 !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
  }

  .dashboard-tabs-dropdown li a:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
  }

  .dashboard-tabs-dropdown li a:hover i { color: #2563eb !important; }

  .dashboard-tabs-dropdown li a.active {
    background-color: #dbeafe !important;
    color: #2563eb !important;
    font-weight: 600 !important;
  }

  .dashboard-tabs-dropdown li a.active i { color: #2563eb !important; }
}


/* =============================================================
   17. DASHBOARD — EXPORT GROUP (date picker + export button)
   Desktop: inline in the tabs bar. Tablet/mobile: icon button
   that opens a modal (see section 18).
   ============================================================= */

/* Desktop export group wrapper */
.dashboard-export-group {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  position: relative !important;
  z-index: 100 !important;
}

.dashboard-export-group .row {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

.dashboard-export-group .col-md-4 {
  width: auto !important;
  padding: 0 !important;
  float: none !important;
}

/* Hide the third col (empty spacer) */
.dashboard-export-group .col-md-4:last-child {
  display: none !important;
}

/* First date input: pill style */
.dashboard-export-group .col-md-4:first-child .form-control {
  height: 32px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 24px 4px 8px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-color) !important;
  background-color: #f8fafc !important;
  min-width: 130px !important;
  max-width: 160px !important;
  color: var(--text-main) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Second date input: borderless */
.dashboard-export-group .col-md-4:nth-child(2) input.form-control {
  height: 32px !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-main) !important;
  min-width: 100px !important;
  max-width: 120px !important;
  box-shadow: none !important;
}

/* Export button */
.dashboard-export-group .dashboard-export-btn {
  height: 32px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #4a5568 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
}

.dashboard-export-group .dashboard-export-btn:hover {
  border-color: #2563eb !important;
  color: #2563eb !important;
}

.dashboard-export-group .dashboard-export-btn i { font-size: 16px !important; }

/* Pikaday calendar must render above the export modal overlay */
.dashboard-export-group .pika-single,
.export-modal .pika-single,
.pika-single {
  z-index: 100001 !important;
}

/* Desktop export group: visible by default */
.dashboard-export-desktop {
  display: flex !important;
}

/* Mobile export button: hidden by default, shown at <=1023px */
.dashboard-export-mobile {
  display: none !important;
}

/* Swap desktop ↔ mobile export at tablet/mobile width */
@media (max-width: 1023px) {
  .dashboard-export-desktop {
    display: none !important;
  }

  .dashboard-export-mobile {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
  }
}


/* =============================================================
   18. DASHBOARD — MOBILE EXPORT MODAL
   Full-screen overlay with centered card on tablet/mobile.
   ============================================================= */

/* Overlay stacking context */
.export-modal-overlay {
  z-index: 100000 !important;
}

/* Full-screen overlay */
.export-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: var(--left-sidebar-width) !important;
  box-sizing: border-box !important;
}

/* Modal card */
.export-modal {
  z-index: 100001 !important;
  overflow: visible !important;
}

.export-modal {
  position: relative !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  width: calc(100vw - var(--left-sidebar-width) - 40px) !important;
  max-width: 300px !important;
  z-index: 10000 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
  flex-shrink: 0 !important;
}

/* Modal open animation */
@keyframes _fadeInModal_15k2j9 {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Modal header */
.export-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.export-modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.export-modal-title i {
  color: #2563eb !important;
  font-size: 15px !important;
}

.export-modal-close {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  color: #718096 !important;
  padding: 4px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
}

.export-modal-close:hover {
  background: #f7fafc !important;
  color: var(--text-main) !important;
}

/* Modal body */
.export-modal-body {
  padding: 16px 20px !important;
}

.export-modal-body {
  overflow: visible !important;
}

.export-modal-label {
  font-size: 13px !important;
  color: #718096 !important;
  margin-bottom: 10px !important;
  font-weight: 500 !important;
}

.export-modal-body .row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

.export-modal-body .col-md-4 {
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

.export-modal-body .col-md-4:last-child {
  display: none !important;
}

.export-modal-body .form-control {
  width: 100% !important;
  height: 38px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

/* Modal footer */
.export-modal-footer {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 20px 24px !important;
  border-top: 1px solid var(--border-color) !important;
}

.export-modal-cancel {
  flex: 1 !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: #ffffff !important;
  color: var(--text-main) !important;
}

.export-modal-confirm {
  flex: 2 !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.export-modal-confirm:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}


/* =============================================================
   19. DASHBOARD — FILTERS BAR
   Compact horizontal flex bar below the tabs bar.
   Sticky below the tabs bar (top: 50px).
   ============================================================= */

/* Sticky filters bar */
.dashboard-filters-wrapper {
  position: sticky !important;
  top: 50px !important;   /* height of the tabs bar above */
  z-index: 49 !important;
  background-color: #ffffff !important;
}

/* Filters container */
.dashboard-filters-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--border-color) !important;
  margin-top: 16px !important;
}

/* Flatten Ember row wrappers */
.dashboard-filters-wrapper .row.innerAll {
  display: contents !important;
}

.dashboard-filters-wrapper .innerAll {
  padding: 0 !important;
  margin: 0 !important;
}

/* Generic filter columns */
.dashboard-filters-wrapper [class*="col-"] {
  flex: 1 1 130px !important;
  width: auto !important;
  min-width: 130px !important;
  max-width: 180px !important;
  padding: 0 !important;
  float: none !important;
  align-self: center !important;
}

/* Multi-select columns: taller, don't restrict width as much */
.dashboard-filters-wrapper [class*="col-"]:has(.ember-power-select-multiple-trigger) {
  align-self: flex-start !important;
  max-width: 200px !important;
}

/* Date range column (col-md-6) */
.dashboard-filters-wrapper .col-md-6 {
  flex: 0 0 auto !important;
  min-width: unset !important;
  max-width: none !important;
  margin-left: -4px !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
}

.dashboard-filters-wrapper .col-md-6 .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

.dashboard-filters-wrapper .col-md-6 [class*="col-"] {
  flex: 0 0 auto !important;
  min-width: unset !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  float: none !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
}

/* Icon-only action column */
.dashboard-filters-wrapper .col-md-1 {
  flex: 0 0 auto !important;
  min-width: unset !important;
  max-width: none !important;
  align-self: center !important;
}

/* Force a line break between filter rows when needed */
.dashboard-filters-wrapper .filter-line-break {
  flex-basis: 100% !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Standard form-control inside filters */
.dashboard-filters-wrapper .form-control {
  height: 32px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  background-color: #ffffff !important;
  color: var(--text-main) !important;
  width: 100% !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* First date input inside col-md-6 (pill style) */
.dashboard-filters-wrapper .col-md-6 .col-md-4:first-child .form-control {
  height: 32px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 24px 4px 8px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-color) !important;
  background-color: #f8fafc !important;
  min-width: 130px !important;
  max-width: 160px !important;
  color: var(--text-main) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  width: auto !important;
}

/* Second date input */
.dashboard-filters-wrapper .col-md-6 .col-md-4:nth-child(2) input.form-control {
  height: 32px !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--border-color) !important;
  background-color: #f8fafc !important;
  border-radius: 6px !important;
  color: var(--text-main) !important;
  min-width: 100px !important;
  max-width: 120px !important;
  box-shadow: none !important;
  width: auto !important;
}

/* Third date input (end date) */
.dashboard-filters-wrapper .col-md-6 .col-md-4:last-child input.form-control {
  height: 32px !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--border-color) !important;
  background-color: #f8fafc !important;
  border-radius: 6px !important;
  color: #a0aec0 !important;
  min-width: 150px !important;
  max-width: 170px !important;
  box-shadow: none !important;
  width: auto !important;
}

/* Select dropdown inside filters */
.dashboard-filters-wrapper select.form-control {
  width: 100% !important;
  min-width: unset !important;
  max-width: unset !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* Ember Power Select single trigger */
.dashboard-filters-wrapper .ember-power-select-trigger:not(.ember-power-select-multiple-trigger) {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  font-size: 12px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: normal !important;
}

/* Ember Power Select multiple trigger */
.dashboard-filters-wrapper .ember-power-select-multiple-trigger {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 2px 4px !important;
  line-height: normal !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
}

.dashboard-filters-wrapper .ember-power-select-placeholder {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin-left: 0 !important;
  line-height: normal !important;
}

.dashboard-filters-wrapper .ember-power-select-selected-item {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  line-height: normal !important;
}

/* Multi-select chips */
.dashboard-filters-wrapper .ember-power-select-multiple-option {
  font-size: 11px !important;
  padding: 1px 4px !important;
  margin: 1px 2px !important;
  border-radius: 4px !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 180px !important;
}

/* Dropdown options */
.dashboard-filters-wrapper .ember-power-select-option {
  white-space: nowrap !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  line-height: 1.5 !important;
}

/* Global dropdown: no overflow clipping */
.ember-power-select-dropdown {
  overflow: visible !important;
}

.ember-power-select-options {
  white-space: nowrap !important;
  overflow-x: auto !important;
}

.ember-power-select-dropdown [class*="_item_"] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  padding: 4px 8px !important;
  line-height: 1.5 !important;
}

/* Text inputs inside filters */
.dashboard-filters-wrapper input[type="text"].form-control {
  min-width: 160px !important;
  max-width: 200px !important;
  width: 100% !important;
}

/* Apply / search button */
.dashboard-filters-wrapper .btn-success {
  height: 32px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Pull-right: convert float to flex */
.dashboard-filters-wrapper .pull-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

/* Clear Bootstrap pseudo-elements that break flex */
.dashboard-filters-wrapper .row.innerAll::after,
.dashboard-filters-wrapper .row.innerAll::before {
  display: none !important;
  content: none !important;
}

/* Remove top margin when filters sit inside a non-border-bottom row */
.col-table .col-table-row:not(.border-bottom) .dashboard-filters-wrapper {
  margin-top: 0 !important;
}

/* --- Filters responsive --- */

/* Tablet landscape (<=1023px): 2-column grid */
@media (max-width: 1023px) and (min-width: 768px) {
  .dashboard-filters-wrapper {
    padding: 10px 16px !important;
    gap: 8px !important;
  }

  .dashboard-filters-wrapper [class*="col-"] {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }

  .dashboard-filters-wrapper .col-md-6 {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .dashboard-filters-wrapper .col-md-6 [class*="col-"] {
    flex: 0 0 auto !important;
    min-width: unset !important;
    max-width: none !important;
    width: auto !important;
  }

  .dashboard-filters-wrapper .col-md-1 {
    flex: 0 0 auto !important;
    min-width: unset !important;
    max-width: none !important;
  }

  .dashboard-filters-wrapper .filter-col-odd {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    max-width: 100% !important;
    flex-grow: 2 !important;
  }

  .dashboard-filters-wrapper .filter-line-break {
    display: none !important;
  }
}

/* Mobile (<=767px): full-width stacked */
@media (max-width: 767px) {
  .dashboard-filters-wrapper {
    padding: 12px 20px !important;
    gap: 8px !important;
  }

  .dashboard-filters-wrapper [class*="col-"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .dashboard-filters-wrapper .col-md-6 {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .dashboard-filters-wrapper .col-md-6 .row {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .dashboard-filters-wrapper .col-md-6 [class*="col-"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .dashboard-filters-wrapper .col-md-6 .col-md-4:first-child .form-control {
    max-width: 100% !important;
    width: 100% !important;
  }

  .dashboard-filters-wrapper .form-control,
  .dashboard-filters-wrapper .ember-power-select-trigger {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dashboard-filters-wrapper .col-md-1 {
    flex: 0 0 auto !important;
    min-width: unset !important;
    max-width: none !important;
  }

  .dashboard-filters-wrapper .filter-col-odd {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .dashboard-filters-wrapper .filter-line-break {
    display: none !important;
  }
}


/* =============================================================
   20. DASHBOARD — STAT CARDS (widget-stats)
   HTML: a.widget-stats > span.glyphicons > (i + span.txt)
                        > div.clearfix
                        > span.count
   ============================================================= */

/* --- 20a. Card container --- */
.widget-stats,
.widget-stats:hover,
.widget-stats:focus {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--border-color) !important;
  border-left: 4px solid #94a3b8 !important;
  box-shadow: var(--shadow-sm) !important;
  text-decoration: none !important;
  height: auto !important;
  min-height: 88px !important;
  text-align: left !important;
  margin-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Left accent border colors per variant */
.widget-stats.widget-stats-primary {
  border-left-color: #2563eb !important;
}

.widget-stats.widget-stats-info {
  border-left-color: #22c55e !important;
}

/* Prevent variant color from bleeding into txt/count (declared before those rules) */
.widget-stats.widget-stats-primary,
.widget-stats.widget-stats-primary *,
.widget-stats.widget-stats-primary i::before {
  color: var(--text-main) !important;
}

.widget-stats.widget-stats-info,
.widget-stats.widget-stats-info *,
.widget-stats.widget-stats-info i::before {
  color: var(--text-main) !important;
}

/* --- 20b. Icon box (.glyphicons) ---
   Neutralizes framework: display:block, height:35px, padding-left:48px */
.widget-stats .glyphicons,
.widget-stats.widget-stats-1 .glyphicons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 10px !important;
  background-color: #eff6ff !important;
  position: static !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}

.widget-stats.widget-stats-info .glyphicons {
  background-color: #f0fdf4 !important;
}

.widget-stats:not(.widget-stats-primary):not(.widget-stats-info) .glyphicons {
  background-color: #f8fafc !important;
}

/* --- 20c. <i> element — base for all icon types (Glyphicons, Phosphor, FA) --- */
.widget-stats .glyphicons i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  font-style: normal !important;
  /* Remove background properties that break font icons */
  background: none !important;
  background-image: none !important;
  background-size: unset !important;
  background-repeat: unset !important;
  background-position: unset !important;
}

/* --- 20d. Glyphicons ::before ---
   Override framework's position:absolute left:0 top:0 so the icon centers in flex. */
.widget-stats .glyphicons i::before,
.widget-stats.widget-stats-1 .glyphicons i::before {
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #2563eb !important;
  background: none !important;
  /* Keep font as-is — let Glyphicons define it */
}

.widget-stats.widget-stats-info .glyphicons i::before {
  color: #22c55e !important;
}

.widget-stats:not(.widget-stats-primary):not(.widget-stats-info) .glyphicons i::before {
  color: #6b7280 !important;
}

/* --- 20e. Phosphor fill icons ---
   [class*="ph-"] matches ph-fill, ph-phone, ph-clock, etc.
   Do NOT set content — Phosphor's own CSS handles it per icon class. */
.widget-stats .glyphicons i[class*="ph-"] {
  font-size: 22px !important;
  color: #2563eb !important;
}

.widget-stats .glyphicons i[class*="ph-"]::before {
  font-family: "Phosphor" !important;
  font-style: normal !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: inherit !important;
  /* Do NOT set content — Phosphor's own CSS handles it per icon class */
}

.widget-stats.widget-stats-info .glyphicons i[class*="ph-"] {
  color: #22c55e !important;
}

.widget-stats:not(.widget-stats-primary):not(.widget-stats-info) .glyphicons i[class*="ph-"] {
  color: #6b7280 !important;
}

/* --- 20f. Label (.txt) ---
   Anchored top-right relative to .widget-stats (position:relative).
   left = 20px padding + 48px icon + 12px gap = 80px
   right:16px prevents overflow on narrow cards. */
.widget-stats .glyphicons .txt,
.widget-stats.widget-stats-1 .glyphicons .txt {
  position: absolute !important;
  left: 80px !important;
  right: 16px !important;
  top: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #35393d !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  line-height: normal !important;
  padding: 0 !important;
}

/* --- 20g. Number (.count) ---
   Vertically centered at the same left offset as .txt.
   clamp() shrinks gracefully on narrow cards. */
.widget-stats .count {
  position: absolute !important;
  left: 90px !important;
  right: 16px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 700 !important;
  color: #1e3a5f !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Hide clearfix inside cards */
.widget-stats .clearfix {
  display: none !important;
}

/* --- 20h. Dashboard context overrides (smaller cards to fit 6 on one row) --- */

/* Card row: flex wrap */
.dashboard > .col-separator > .row.innerAll:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Each card column: equal flex, 1/5 width */
.dashboard > .col-separator > .row.innerAll:first-child > [class*="col-md-"] {
  float: none !important;
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Dashboard cards: compact size */
.dashboard .widget-stats,
.dashboard .widget-stats:hover,
.dashboard .widget-stats:focus {
  width: 100% !important;
  padding: 14px 10px !important;
  min-height: 78px !important;
}

/* Smaller icon box */
.dashboard .widget-stats .glyphicons,
.dashboard .widget-stats.widget-stats-1 .glyphicons {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
}

.dashboard .widget-stats .glyphicons i,
.dashboard .widget-stats .glyphicons i::before {
  font-size: 19px !important;
}

/* Tighter label position */
.dashboard .widget-stats .glyphicons .txt,
.dashboard .widget-stats.widget-stats-1 .glyphicons .txt {
  left: 52px !important;
  right: 2px !important;
  font-size: 10px !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tighter number position */
.dashboard .widget-stats .count {
  left: 60px !important;
  right: 2px !important;
  font-size: 21px !important;
}

/* --- 20i. Conversations/hr card — label swap at <=1440px --- */

/* Default: show desktop label, hide mobile label */
.conversations-hr-card .desktop-label {
  display: block !important;
}

.conversations-hr-card .mobile-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* <=1100px (older approach — kept for compat) */
@media (max-width: 1100px) {
  .dashboard .conversations-per-hour-card .desktop-label {
    display: none !important;
  }

  .dashboard .conversations-per-hour-card .mobile-label {
    display: block !important;
    position: absolute !important;
    left: 25px !important;
    right: 2px !important;
    top: 10px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #35393d !important;
  }
}

/* <=1440px: tighten label font, swap conversations-hr label */
@media (max-width: 1440px) {
  .dashboard .widget-stats .glyphicons .txt {
    font-size: 8px !important;
    letter-spacing: -0.03em !important;
  }

  .conversations-hr-card .desktop-label {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
  }

  .conversations-hr-card .mobile-label {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: absolute !important;
    left: 25px !important;
    right: 2px !important;
    top: 10px !important;
  }
}

/* --- 20j. Dashboard cards — responsive stacking --- */

/* Tablet landscape (<=1023px): 3 per row */
@media (max-width: 1023px) {
  .dashboard > .col-separator > .row.innerAll:first-child > .col-md-2 {
    flex: 1 1 calc(33.333% - 12px) !important;
    width: calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
  }

  .dashboard .widget-stats {
    padding: 14px 12px !important;
    min-height: 82px !important;
  }

  .dashboard .widget-stats .glyphicons,
  .dashboard .widget-stats.widget-stats-1 .glyphicons {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .dashboard .widget-stats .glyphicons i,
  .dashboard .widget-stats .glyphicons i::before {
    font-size: 18px !important;
  }

  .dashboard .widget-stats .glyphicons .txt,
  .dashboard .widget-stats.widget-stats-1 .glyphicons .txt {
    left: 56px !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  .dashboard .widget-stats .count {
    left: 56px !important;
    font-size: 24px !important;
  }
}

/* Tablet portrait (<=767px): 2 per row */
@media (max-width: 767px) {
  .dashboard > .col-separator > .row.innerAll:first-child > .col-md-2 {
    flex: 1 1 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}

/* Mobile (<=480px): 1 per row, full width */
@media (max-width: 480px) {
  .dashboard > .col-separator > .row.innerAll:first-child {
    gap: 8px !important;
  }

  .dashboard > .col-separator > .row.innerAll:first-child > .col-md-2 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .dashboard .widget-stats {
    min-height: 72px !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
  }
}

/* Mobile: small horizontal margin on cards and status breakdown */
@media (max-width: 768px) {
  .widget-stats {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  #content .layout-app {
    padding: 20px !important;
  }

  .col-table .col-separator {
    padding: 0 4px !important;
  }
}


/* =============================================================
   21. DASHBOARD — STATUS BREAKDOWN + LEAD DISTRIBUTION PANEL
   Two-column card: left = status table, right = distribution bars.
   ============================================================= */

/* Card wrapper */
.status-breakdown-wrapper {
  display: flex !important;
  gap: 24px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

/* Override gap to 0 (final value) */
.status-breakdown-wrapper {
  gap: 0 !important;
}

/* --- Left: status table --- */
.status-breakdown-table {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Right border separating table from distribution panel */
.status-breakdown-table {
  border-right: 5px solid var(--border-color) !important;
  padding-right: 0 !important;
}

/* Table header */
.status-breakdown-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Lead count sub-label */
.lead-count-label {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}

/* Status table */
.sb-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.sb-table thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #9ca3af !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  background: #fafafa !important;
}

/* Column alignment fixes */
.sb-table thead th:nth-child(2),
.sb-table tbody td:nth-child(2) {
  text-align: right !important;
  padding-right: 20px !important;
  width: 80px !important;
}

.sb-table thead th:nth-child(3),
.sb-table tbody td:nth-child(3) {
  text-align: right !important;
  padding-left: 4px !important;
  width: 60px !important;
}

.sb-table tbody tr {
  transition: background 0.15s !important;
}

.sb-table tbody tr:hover {
  background: #f9fafb !important;
}

.sb-table tbody td {
  padding: 10px 20px !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid #f3f4f6 !important;
  vertical-align: middle !important;
}

.sb-table tbody td.text-right {
  text-align: right !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

/* Status color dot */
.sb-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  /* background-color: #94a3b8 !important; */
  margin-right: 8px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* --- Right: lead distribution bars --- */
.lead-distribution {
  width: 280px !important;
  min-width: 280px !important;
  flex-shrink: 0 !important;
  padding: 16px 20px !important;
  border-left: 1px solid var(--border-color) !important;
}

/* Final padding override */
.lead-distribution {
  padding: 20px 24px !important;
  gap: 16px !important;
}

.ld-header {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  margin-bottom: 16px !important;
}

.ld-row {
  padding: 10px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.ld-row:last-child {
  border-bottom: none !important;
}

.ld-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.ld-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
}

.ld-bar-track {
  height: 4px !important;
  background: #f3f4f6 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.ld-bar-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.4s ease !important;
}

.ld-pct {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
}

/* --- Status breakdown responsive --- */

/* Tablet (<=768px): stack vertically */
@media (max-width: 768px) {

  .status-breakdown-wrapper {
    flex-direction: column !important;
  }

  /* Side border becomes bottom border */
  .status-breakdown-table {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  /* Distribution: full width */
  .lead-distribution {
    width: 100% !important;
    min-width: unset !important;
    border-left: none !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 16px 20px !important;
  }

  .sb-table thead th,
  .sb-table tbody td {
    padding: 8px 12px !important;
  }

  .sb-table tbody td:first-child {
    white-space: normal !important;
    word-break: break-word !important;
    min-width: 120px !important;
  }

  .status-breakdown-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 12px 16px !important;
  }

  .status-breakdown-wrapper {
    margin-left: 4px !important;
    margin-right: 8px !important;
  }
}

/* Small mobile (<=430px) */
@media (max-width: 430px) {

  .sb-table thead th,
  .sb-table tbody td {
    padding: 8px !important;
    font-size: 12px !important;
  }

  .sb-table thead th:first-child,
  .sb-table tbody td:first-child {
    min-width: 100px !important;
  }

  .ld-label,
  .ld-pct {
    font-size: 12px !important;
  }
}


/* =============================================================
   22. DASHBOARD — DIAL RESULTS TABLES (Team / Andi / Power)
   DOM: .dashboard > .col-table > .col-separator > .row > .col-md-4 > table
   Default: 3 columns side-by-side
   <=1440px: stacked (1 per row)
   <=767px: compact cells, horizontal scroll
   ============================================================= */

/* Shared table polish */
.dashboard .col-separator .row:not(.innerAll) > .col-md-4 {
  margin-bottom: 20px;
}

.dashboard .col-separator .row:not(.innerAll) > .col-md-4 h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: #fafafa !important;
  border-radius: 8px 8px 0 0 !important;
}

.dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table {
  border: 1px solid var(--border-color) !important;
  border-radius: 0 0 8px 8px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
}

.dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #9ca3af !important;
  background: #fafafa !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--border-color) !important;
  white-space: nowrap !important;
}

.dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table tbody td {
  padding: 8px 10px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: var(--text-main) !important;
}

.dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table tbody tr:last-child td {
  border-bottom: none !important;
}

.dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table tbody tr:hover td {
  background-color: #f9fafb !important;
}

/* <=1440px: stack all tables */
@media (max-width: 1440px) {
  .dashboard .col-separator .row:not(.innerAll) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  .dashboard .col-separator .row:not(.innerAll) > .col-md-4:last-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* <=767px: fully stacked, compact cells */
@media (max-width: 767px) {
  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table thead th,
  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table tbody td {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  /* Organization name: allow wrap */
  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table tbody td:first-child {
    white-space: normal !important;
    word-break: break-word !important;
    min-width: 80px !important;
  }

  /* Number columns: no wrap */
  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table tbody td:not(:first-child),
  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table thead th:not(:first-child) {
    white-space: nowrap !important;
  }
}

/* <=1024px: horizontal scroll on tables that overflow */
@media (max-width: 1024px) {
  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .dashboard .col-separator .row:not(.innerAll) > .col-md-4 .table {
    min-width: 420px !important;
  }
}


/* =============================================================
   23. DASHBOARD — CALL ACTIVITY TIMELINE
   Base styles + responsive fixes for .widget-timeline rows.
   ============================================================= */

/* Base styles — all screen sizes */
.dashboard .widget-timeline ul.list-timeline li {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.dashboard .widget-timeline ul.list-timeline li a {
  font-size: 12px !important;
  font-weight: 500 !important;
}

.dashboard .widget-timeline ul.list-timeline li span.date {
  font-size: 11px !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
}

/* Desktop: fixed-width ellipsis truncation */
.dashboard .widget-timeline ul.list-timeline li span.ellipses {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  max-width: 100% !important;
  width: calc(100% - 200px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
}

/* <=1440px: stack the two layout columns */
@media (max-width: 1440px) {
  .dashboard .col-separator .row > .col-md-7,
  .dashboard .col-separator .row > .col-md-5 {
    width: 100% !important;
    float: none !important;
  }
}

/* <=1024px: free fixed heights, allow row wrapping */
@media (max-width: 1024px) {
  .dashboard .widget-timeline ul.list-timeline li {
    height: auto !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Free all child spans from fixed height and float */
  .dashboard .widget-timeline ul.list-timeline li > span,
  .dashboard .widget-timeline ul.list-timeline li span.date,
  .dashboard .widget-timeline ul.list-timeline li span.ellipses {
    height: auto !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    float: none !important;
    display: inline !important;
  }

  .dashboard .widget-timeline ul.list-timeline li span.ellipses {
    white-space: normal !important;
    text-overflow: unset !important;
    max-width: 100% !important;
    flex: 1 !important;
  }

  .dashboard .col-separator .row > .col-md-7,
  .dashboard .col-separator .row > .col-md-5 {
    width: 100% !important;
    float: none !important;
  }

  /* Repeated for specificity */
  .dashboard .widget-timeline ul.list-timeline li > span,
  .dashboard .widget-timeline ul.list-timeline li span.date {
    height: auto !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    float: none !important;
    display: inline !important;
  }

  .dashboard .widget-timeline ul.list-timeline li span.ellipses {
    white-space: normal !important;
    text-overflow: unset !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex: 1 !important;
    display: inline !important;
  }
}

/* FINAL FIX — scroll only on leads list */
#right-sidebar #menu .sidebar-scrolling-region ul.leads-list.paginated-view,
#right-sidebar #menu .sidebar-scrolling-region ul.leads-list {
  height: calc(100vh - 320px) !important;
  max-height: calc(100vh - 320px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  padding-bottom: 90px !important;
  box-sizing: border-box !important;
}


/* Compact lead row vertical spacing */
#right-sidebar #menu > div ul.leads-list li > a {
  height: auto !important;
  min-height: 58px !important;
  line-height: normal !important;
  padding: 6px 26px 5px 8px !important;
}

#right-sidebar #menu > div ul.leads-list li .company {
  line-height: 1.15 !important;
  margin-bottom: 2px !important;
}

#right-sidebar #menu > div ul.leads-list li .name {
  line-height: 1.15 !important;
  margin-bottom: 2px !important;
}

#right-sidebar #menu > div ul.leads-list li .title {
  line-height: 1.15 !important;
  margin-bottom: 0 !important;
}

/* iPad / tablet spacing for More dropdown */
@media (max-width: 1180px) and (min-width: 768px) {
  .dashboard-tabs-more-wrapper {
    position: relative !important;
  }

  .dashboard-tabs-more-menu {
    left: 60px !important;
    right: auto !important;
    min-width: 180px !important;
    transform: translateX(60px);
  }
}

/* =============================================================
   CHARTS
   ============================================================= */

/* Global all text inside charts: axes, legends, labels */
.widget .c3-axis text,
.widget .c3-legend-item text,
.widget .c3-axis-x-label,
.widget .c3-axis-y-label {
  fill: #9ca3af !important;
}

/* =============================================================
   WIDGET — Clean white header
   ============================================================= */

/* Widget head — centered content */
.widget .widget-head {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  height: auto !important;
  min-height: 50px !important;
  line-height: normal !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
}

.widget .widget-head h4.heading {
  margin: 0 !important;
  line-height: normal !important;
  height: auto !important;
  float: none !important;
  padding: 0 !important;
}

/* =============================================================
   DIALS TABLE — header buttons
   ============================================================= */
.dials-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #4a5568;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dials-btn-filters-active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #2563eb !important;
}

.dials-btn-hidden {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: #e2e8f0 !important;
}

.dials-btn-clear {
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* =============================================================
   DASHBOARD FILTERS — allow long option text to wrap in dropdowns
   ============================================================= */
.ember-power-select-option {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.ember-power-select-dropdown [class*="_item_"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.ember-power-select-options {
  white-space: normal !important;
  overflow-x: hidden !important;
}

.ember-power-select-dropdown [class*="_item_"] {
  border-bottom: none !important;
}

/* =============================================================
   PHOSPHOR ICONS — sizing fix for recording-player buttons
   Phosphor icons render smaller than Font Awesome by default;
   this normalizes them inside btn-xs / btn-default contexts.
   Applies across Dials, Conversations, and Appointments tables.
   ============================================================= */
.btn .ph {
  font-size: 14px !important;
  vertical-align: middle !important;
}

.btn-xs .ph {
  font-size: 13px !important;
}

/* Recording player buttons — borderless, icon-only style.
   Targets any btn-default that directly contains a Phosphor play/pause/headphones
   icon, since the component's own CSS-module classes are hashed and unreliable
   to select from app.css. */
.btn-default:has(> .fa-pause),
.btn-default:has(> .ph.ph-headphones) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-default:has(> .fa-pause):hover,
.btn-default:has(> .ph.ph-headphones):hover {
  background: #f1f5f9 !important;
}

/* Align all recording-row action buttons (play, download, gong, gavel, etc.)
   on the same vertical baseline */
.dials-btn-download,
.btn-default:has(> .ph.ph-play),
.btn-default:has(> .fa-pause),
.btn-default:has(> .ph.ph-headphones) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  height: 26px !important;
  width: 26px !important;
  padding: 0 !important;
}

/* Play icon — blue accent (targets icon directly, not via hashed CSS-module wrapper classes) */
.btn-default:has(> .ph.ph-play) {
  border: none !important;
  background: transparent !important;
}

.btn-default:has(> .ph.ph-play) .ph.ph-play {
  color: #2563eb !important;
}

.btn-default:has(> .ph.ph-play):hover {
  background: #f1f5f9 !important;
}

/* Download buttons next to recording-player — borderless, dark icon */
.dials-btn-download {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dials-btn-download:hover {
  background: #f1f5f9 !important;
}

.dials-btn-download .ph-download-simple {
  color: #4a5568 !important;
  font-size: 16px !important;
}

/* =============================================================
   REP PERFORMANCE — CHART CARDS
   ============================================================= */

.rep-perf-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 20px 20px 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.rep-perf-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px;
  line-height: normal;
  float: none;
  height: auto;
}

/* C3 chart text — axes labels, tick values */
.rep-perf-card .c3-axis text,
.rep-perf-card .c3-legend-item text {
  fill: #64748b !important;
  font-size: 12px !important;
}

/* Remove domain line on axes */
.rep-perf-card .c3-axis-y .domain,
.rep-perf-card .c3-axis-x .domain {
  stroke: none !important;
}

/* Remove tick lines */
.rep-perf-card .c3-axis .tick line {
  stroke: none !important;
}

/* =============================================================
   USERS — MANAGE PANEL
   ============================================================= */

.manage-item {
  color: #4a5568 !important;
}

.manage-item:hover {
  background: #f8fafc !important;
  color: #2563eb !important;
}

.manage-item-active {
  background: #eff6ff !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* bootstrap-datepicker: render above the right sidebar (z-index:100) and bottom bar */
.datepicker.datepicker-dropdown {
  z-index: 100002 !important;
}

/* =============================================================
   LEAD EDIT — restore white card background
   ============================================================= */
.col-separator-last .col-table .innerAll.border-bottom,
.col-separator-last .col-table .innerAll.inner-2x {
  background-color: #ffffff !important;
}

/* =============================================================
   LEADS INDEX — white background (overrides shared gray .col-table)
   ============================================================= */
.leads-index .col-table {
  background-color: #ffffff !important;
}

/* =============================================================
   LEAD DETAIL VIEW — TABBED REDESIGN
   New structure: header/tabs/cards on the right, clipped to a
   single rounded container. Call History lives inside the main
   column (see CALL HISTORY section) with its own height cap.
   ============================================================= */

/* LAYOUT WRAPPER — outer flex column and rounded card container */
.lead-detail-view {
  display: flex;
  flex-direction: column;
}

.lead-detail-top-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.lead-detail-main {
  flex: 1;
  min-width: 0;
}


/* HEADER — name, status badge, action buttons, subtitle */
.lead-detail-header {
  padding: 20px 20px 0;
  position: relative;
}

.lead-detail-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lead-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

/* Desktop: action buttons anchored top-right of the header block */
.lead-detail-header-actions {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-detail-header-actions .lead-header-btn,
.lead-detail-header-actions .lead-header-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  color: #4a5568;
  text-decoration: none;
}

.lead-detail-header-actions .lead-header-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
}

.lead-detail-salutation {
  margin: 8px 0 0;
  padding-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}


/* TABS NAVIGATION — Overview / Activity / Call Notes / Call History */
.lead-tabs-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px;
}

.lead-tabs-nav .lead-tab {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.lead-tabs-nav .lead-tab:hover {
  color: var(--text-main);
}

.lead-tabs-nav .lead-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 600;
}

/* "Preview" badge on mock-data tabs (Call Notes / Call History) */
.lead-tab-preview-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #92400e;
  background-color: #fffbeb;
  border-radius: 999px;
  vertical-align: middle;
}


/* CONTENT ROW — persistent Call Notes/Agent Script panel + tab area */
.lead-detail-content-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.lead-persistent-panel {
  width: 340px;
  min-width: 340px;
  flex-shrink: 0;
  padding: 16px;
  border-right: 1px solid var(--border-color);
  background-color: #fafbfc;
}

.lead-tab-area {
  flex: 1;
  min-width: 0;
}


/* ACTIVITY & MOCK SUMMARY TABS — shared base padding */
.lead-activity-summary,
.lead-mock-summary {
  padding: 16px 20px;
}

.lead-activity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.lead-activity-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.lead-activity-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.lead-mock-note {
  color: var(--text-muted);
  font-size: 12px;
}


/* =============================================================
   LEAD DETAIL — OVERVIEW CARDS (About / Contact / Status & Time /
   Actions / Follow Up Script). Flex-wrap instead of Bootstrap
   col-md-X because the card count varies (4 or 5) depending on
   role and whether a Follow Up Script exists.
   ============================================================= */

.lead-overview-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  padding: 20px;
}

.lead-overview-card {
  flex: 1 1 220px;
  min-width: 220px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lead-overview-card-title {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  background-color: #fafbfc;
}

.lead-overview-card-body {
  padding: 16px;
  font-size: 13px;
  color: var(--text-main);
}

/* About card: capped height + internal scroll (record can have many fields) */
.lead-about-properties {
  max-height: 260px;
  overflow-y: auto;
}

.lead-about-properties p {
  margin: 0 0 10px;
  line-height: 1.4;
}

.lead-about-properties p:last-child {
  margin-bottom: 0;
}

/* About card: wider than its siblings to fit longer CRM records */
.lead-overview-card-about {
  flex: 1.6 1 280px;
}

/* Contact card: header blue highlight matching the pre-redesign "Get in touch" panel */
.lead-overview-card-contact .lead-overview-card-title {
  background-color: #bcc9e3;
  border-bottom-color: #aabbdb;
}

/* Agent Script textarea is read-only; override Bootstrap's default gray readonly background */
.lead-persistent-panel .bg-primary-light textarea.form-control[readonly] {
  background-color: #ffffff;
}

/* On laptop-and-narrower widths, switch to a 3-column-like grid instead of
   flex-wrap: About wide on the left (spanning the full height), Follow Up
   Script / Contact / Status & Time stacked in a narrower column on the
   right, Actions full-width at the bottom. This is what actually fixes the
   scrolling problem — a full-width Follow Up Script row above About+Contact
   just pushes everything down; putting it beside About (matching the
   pre-redesign 3-column layout) keeps all of it in view at once. Narrow
   the persistent Call Notes/Agent Script panel too (fixed 340px is too
   wide relative to the shrunk main column).
   1700px (not 1400px) because a real "14-15 inch laptop" reports a CSS
   viewport width of 1500-1700px on HiDPI/Retina displays (MacBook 14" is
   1512px logical, 16" is 1728px) despite the physically small screen —
   1400px let those slip through to the wide desktop flex layout. */
@media (max-width: 1700px) {
  .lead-persistent-panel {
    width: 260px;
    min-width: 260px;
  }

  .lead-overview-cards {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "about    contact"
      "about    followup"
      "actions  status";
  }

  .lead-overview-card-about    { grid-area: about; }
  .lead-overview-card-followup { grid-area: followup; }
  .lead-overview-card-contact  { grid-area: contact; }
  .lead-overview-card-status   { grid-area: status; }
  .lead-overview-card-actions  { grid-area: actions; }
}

/* Contact card: spacing between list items (fa-ul has none by default).
   overflow-wrap breaks long unbroken strings (emails, long numbers) so
   they wrap inside the card instead of overflowing its right edge. */
.lead-overview-card-body ul.fa-ul li {
  margin-bottom: 10px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}

.lead-overview-card-body ul.fa-ul li:last-child {
  margin-bottom: 0;
}

/* Actions card: stacked full-width buttons */
.lead-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-actions-list .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Actions card: "Call" button — green, matching the pre-redesign Dial button */
.lead-actions-list .lead-action-call {
  background-color: #8bbf61;
  border-color: #8bbf61;
  color: #ffffff;
}

.lead-actions-list .lead-action-call:hover {
  background-color: #79a852;
  border-color: #79a852;
  color: #ffffff;
}

/* Status & Time card: stack Status / When to Call vertically —
   call-lead-info's Bootstrap col-md-6 columns collide on long
   status values (e.g. ATTEMPTED_TO_CONTACT) at this card width */
.lead-overview-card .call-lead-info .row,
.lead-overview-card .row.innerAll {
  display: flex;
  flex-direction: column;
}

.lead-overview-card .row .col-md-6 {
  width: 100%;
  float: none;
}


/* CALL NOTES PANEL — avatar + "Call Notes" title alignment
   (partial/lead/call-notes uses a float layout; re-aligned as
   flex here since it now lives in a narrower persistent column) */
.lead-persistent-panel .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-persistent-panel .row .pull-left {
  flex-shrink: 0;
}

.lead-persistent-panel .row h4 {
  margin: 0;
}

.lead-persistent-panel .row ul {
  flex: 1 0 100%;
  margin: 0;
}


/* CALL HISTORY — capped height + internal scroll so the block
   doesn't grow without limit as more calls accumulate */
.lead-detail-call-history {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid var(--border-color);
}


/* ACTIVITY SUMMARY — total/conversations/voicemails stat row + outcome breakdown */
.lead-activity-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.lead-activity-stat {
  display: flex;
  flex-direction: column;
}

.lead-activity-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
}

.lead-activity-stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.lead-activity-outcomes {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--text-main);
}

.lead-activity-outcomes li {
  padding: 4px 0;
}

/* ACTIVITY SUMMARY — time breakdown (Today/Yesterday/This Week/etc.,
   same vocabulary as the dashboard's date-picker-group filters) */
.lead-activity-timing {
  list-style: none;
  margin: 16px 0 0;
  padding: 12px 0 0;
  font-size: 13px;
  color: var(--text-main);
  border-top: 1px solid #f3f4f6;
}

.lead-activity-timing li {
  padding: 4px 0;
}


/* RESPONSIVE — tablet/mobile (<=1150px): stack persistent panel above
   tabs, stack overview cards vertically, reorder header so action
   buttons fall below the subtitle instead of overlapping the name.
   1150px (not 900px) because the fixed chrome around the content area
   (56px left sidebar + 320px right call-control panel + 260px persistent
   panel = 636px) leaves too little room for the 2-column grid well
   before the viewport itself hits 900px — e.g. a 960px-wide device
   (Surface Pro) only has ~280px left for the cards, so Contact/Status
   were rendering cut off past the right edge instead of wrapping. */
@media (max-width: 1150px) {
  .lead-detail-content-row {
    flex-direction: column;
  }

  .lead-persistent-panel {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  /* Override the wider grid (About | Follow Up/Contact/Status column) —
     too narrow for 2 columns here, so go back to one column, in the same
     top-to-bottom order the grid used on the left side. */
  .lead-overview-cards {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "contact"
      "about"
      "followup"
      "status"
      "actions";
  }

  .lead-overview-card,
  .lead-overview-card-about {
    width: 100%;
  }

  .lead-detail-header {
    display: flex;
    flex-direction: column;
    position: static;
  }

  .lead-detail-header-top {
    order: 1;
  }

  .lead-detail-salutation {
    order: 2;
  }

  .lead-detail-header-actions {
    order: 3;
    position: static;
    margin-top: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
}

/* =============================================================
   CHAT MESSAGES — restore text wrapping
   .chat-conversations has white-space:nowrap for side-by-side box
   positioning; this inherits into message text and breaks sentence
   wrapping. Override locally on the messages list only.
   ============================================================= */
.chat-conversation-messages {
  white-space: normal !important;
}

/* =============================================================
   CALL LEAD LIST — ANIMATED ROW COLLAPSE (JS toggles .is-leaving)
   jQuery cannot animate 'height' against `height: auto !important`
   in section 8—this left behind full-height ghost rows
   in the "Current" tab. We use `max-height` with a fixed numeric value
   (not 'auto') so the CSS transition animates correctly,
   and a higher selector specificity (`.leads-list + .is-leaving`)
   to override existing rules without modifying them.
   ============================================================= */
#right-sidebar #menu > div ul.leads-list li {
  max-height: 100px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transition: max-height 300ms ease, opacity 250ms ease, border-color 300ms ease !important;
}

#right-sidebar #menu > div ul.leads-list li.is-leaving {
  max-height: 0 !important;
  opacity: 0 !important;
  border-bottom-color: transparent !important;
}

/* --- "Stop dialing" / "Queue dialing": make the plain link read as a button --- */
#right-sidebar .lead-card .status a.btn {
  margin-top: 10px;
}

/* =============================================================
   LOOM DEMO MODAL (app-sidebar) — rendered via {{-in-element}} into
   <body>, so it must live here (global, unscoped) rather than in the
   component's own css-modules stylesheet, which only applies within
   the component's own DOM subtree.
   ============================================================= */

.loom-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.loom-modal {
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
  max-width: 900px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.loom-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.loom-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #2d3748;
}

.loom-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #718096;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.loom-modal-close:hover {
  color: #2d3748;
}

.loom-modal-embed-wrapper {
  position: relative;
  padding-bottom: 62.5%; /* Loom's recommended aspect ratio for embeds */
  height: 0;
}

.loom-modal-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}