/*
  CodideX Mobile Foundation
  Day 7 responsive, touch, mobile ERP, and future app-template utilities.
*/

:root {
  --cdx-mobile-nav-height: 68px;
  --cdx-touch-target: 44px;
  --cdx-phone-width: 360px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

.cdx-touch-device .btn,
.cdx-touch-device .form-control,
.cdx-touch-device .form-select,
.cdx-touch-device .cdx-nav-link,
.cdx-touch-device .cdx-action-btn,
.cdx-touch-device .dropdown-item {
  min-height: var(--cdx-touch-target);
}

.cdx-touch-device a,
.cdx-touch-device button,
.cdx-touch-device [role="button"] {
  -webkit-tap-highlight-color: rgba(47, 128, 237, 0.16);
  touch-action: manipulation;
}

.cdx-table-card,
.table-responsive,
.cdx-print-preview,
.cdx-finance-print-preview {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cdx-table-card .table,
.table-responsive .table {
  min-width: 720px;
}

.cdx-row-actions .btn-icon,
.cdx-table-card .btn-icon {
  flex: 0 0 auto;
}

.cdx-mobile-scroll,
.cdx-mobile-card-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(245px, 82%);
  gap: var(--cdx-space-3);
  overflow-x: auto;
  padding-bottom: var(--cdx-space-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.cdx-mobile-card-rail > *,
.cdx-mobile-scroll > * {
  scroll-snap-align: start;
}

.cdx-mobile-shell {
  display: grid;
  gap: var(--cdx-space-5);
}

.cdx-mobile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: var(--cdx-space-5);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-xl);
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.14), rgba(32, 169, 139, 0.08) 58%, transparent),
    var(--cdx-surface);
  box-shadow: var(--cdx-shadow-sm);
}

.cdx-mobile-hero-actions,
.cdx-mobile-quick-grid,
.cdx-mobile-kpi-grid,
.cdx-mobile-widget-grid,
.cdx-mobile-comparison-grid,
.cdx-mobile-template-grid {
  display: grid;
  gap: var(--cdx-space-4);
}

.cdx-mobile-hero-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cdx-mobile-quick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cdx-mobile-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cdx-mobile-widget-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.cdx-mobile-span-8 {
  grid-column: span 8;
}

.cdx-mobile-span-6 {
  grid-column: span 6;
}

.cdx-mobile-span-4 {
  grid-column: span 4;
}

.cdx-mobile-span-12 {
  grid-column: span 12;
}

.cdx-mobile-template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cdx-mobile-quick-action,
.cdx-mobile-widget,
.cdx-mobile-template-card,
.cdx-responsive-example {
  display: grid;
  gap: var(--cdx-space-3);
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-xs);
  transition: border-color var(--cdx-transition-fast), box-shadow var(--cdx-transition-fast), transform var(--cdx-transition-fast);
}

.cdx-mobile-quick-action {
  min-height: 118px;
  color: var(--cdx-text);
}

.cdx-mobile-quick-action:hover,
.cdx-mobile-widget:hover,
.cdx-mobile-template-card:hover,
.cdx-responsive-example:hover {
  border-color: rgba(47, 128, 237, 0.3);
  box-shadow: var(--cdx-shadow-sm);
  color: var(--cdx-primary-700);
  transform: translateY(-2px);
}

.cdx-mobile-quick-action i,
.cdx-mobile-widget-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--cdx-radius-md);
  background: rgba(47, 128, 237, 0.1);
  color: var(--cdx-primary-700);
}

.cdx-mobile-phone {
  width: min(100%, var(--cdx-phone-width));
  margin-inline: auto;
  padding: 0.65rem;
  border: 1px solid var(--cdx-border);
  border-radius: 2rem;
  background: linear-gradient(180deg, #111827, #253247);
  box-shadow: var(--cdx-shadow-lg);
}

.cdx-mobile-phone-screen {
  min-height: 620px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 1.45rem;
  background: var(--cdx-surface-soft);
  color: var(--cdx-text);
}

.cdx-mobile-statusbar,
.cdx-mobile-appbar,
.cdx-mobile-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdx-space-2);
}

.cdx-mobile-statusbar {
  min-height: 28px;
  padding: 0 var(--cdx-space-4);
  color: var(--cdx-heading);
  font-size: 0.68rem;
  font-weight: 900;
}

.cdx-mobile-appbar {
  min-height: 58px;
  padding: var(--cdx-space-3) var(--cdx-space-4);
  border-bottom: 1px solid var(--cdx-border);
  background: color-mix(in srgb, var(--cdx-surface) 86%, transparent);
  backdrop-filter: blur(14px);
}

.cdx-mobile-appbar-title {
  min-width: 0;
}

.cdx-mobile-appbar-title strong,
.cdx-mobile-section-title {
  display: block;
  color: var(--cdx-heading);
  font-family: var(--cdx-font-display);
  font-weight: 900;
}

.cdx-mobile-appbar-title span {
  display: block;
  overflow: hidden;
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-xs);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdx-mobile-screen-body {
  flex: 1;
  display: grid;
  gap: var(--cdx-space-3);
  overflow-y: auto;
  padding: var(--cdx-space-4);
}

.cdx-mobile-tabbar {
  min-height: var(--cdx-mobile-nav-height);
  padding: 0.55rem var(--cdx-space-3);
  border-top: 1px solid var(--cdx-border);
  background: var(--cdx-surface);
}

.cdx-mobile-tabbar a,
.cdx-mobile-tabbar button {
  min-width: 0;
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--cdx-text-muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.cdx-mobile-tabbar .active {
  color: var(--cdx-primary-700);
}

.cdx-mobile-fab-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1015;
  display: grid;
  gap: var(--cdx-space-2);
}

.cdx-mobile-fab {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cdx-primary-600), var(--cdx-secondary-500));
  color: var(--cdx-white);
  box-shadow: var(--cdx-shadow-md);
}

.cdx-mobile-bottom-nav {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 1010;
  display: none;
  align-items: center;
  justify-content: space-around;
  min-height: var(--cdx-mobile-nav-height);
  padding: 0.5rem;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-xl);
  background: color-mix(in srgb, var(--cdx-surface) 92%, transparent);
  box-shadow: var(--cdx-shadow-lg);
  backdrop-filter: blur(16px);
}

.cdx-mobile-bottom-nav a {
  min-width: 0;
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: var(--cdx-text-muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.cdx-mobile-bottom-nav a.active {
  color: var(--cdx-primary-700);
}

.cdx-app-card,
.cdx-mobile-feed-card,
.cdx-mobile-fee-card,
.cdx-mobile-student-card,
.cdx-mobile-notification-card {
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-xs);
}

.cdx-mobile-feed-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: var(--cdx-space-3);
  align-items: start;
}

.cdx-mobile-chat-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
  gap: var(--cdx-space-4);
  align-items: start;
}

.cdx-mobile-chat-phone .cdx-mobile-phone-screen {
  min-height: 680px;
}

.cdx-mobile-chat-list {
  display: grid;
  gap: var(--cdx-space-3);
}

.cdx-mobile-chat-bubble {
  max-width: 86%;
  display: grid;
  gap: var(--cdx-space-2);
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: 1rem;
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-xs);
}

.cdx-mobile-chat-bubble.is-me {
  justify-self: end;
  border-bottom-right-radius: var(--cdx-radius-xs);
  background: rgba(32, 169, 139, 0.14);
}

.cdx-mobile-chat-bubble.is-other {
  justify-self: start;
  border-bottom-left-radius: var(--cdx-radius-xs);
}

.cdx-mobile-voice-note {
  display: flex;
  align-items: center;
  gap: var(--cdx-space-2);
  min-height: 38px;
}

.cdx-mobile-voice-wave {
  flex: 1;
  height: 18px;
  border-radius: var(--cdx-radius-pill);
  background:
    repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px);
  color: color-mix(in srgb, var(--cdx-primary-500) 62%, transparent);
  opacity: 0.78;
}

.cdx-mobile-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--cdx-space-2);
  align-items: center;
  padding: var(--cdx-space-3);
  border-top: 1px solid var(--cdx-border);
  background: var(--cdx-surface);
}

.cdx-mobile-composer .form-control {
  min-height: 42px;
  border-radius: var(--cdx-radius-pill);
}

.cdx-mobile-notification-stack {
  display: grid;
  gap: var(--cdx-space-3);
}

.cdx-mobile-notification-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: var(--cdx-space-3);
  background: color-mix(in srgb, var(--cdx-surface) 82%, transparent);
  backdrop-filter: blur(12px);
}

.cdx-mobile-lockscreen {
  display: grid;
  gap: var(--cdx-space-3);
  min-height: 520px;
  align-content: start;
  padding: var(--cdx-space-5) var(--cdx-space-4);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(15, 39, 69, 0.78), rgba(15, 23, 42, 0.42)),
    linear-gradient(135deg, var(--cdx-primary-700), var(--cdx-secondary-700));
  color: var(--cdx-white);
}

.cdx-mobile-lockscreen .cdx-mobile-notification-card {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.76);
  color: #111827;
}

.cdx-mobile-invoice {
  display: grid;
  gap: var(--cdx-space-3);
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
}

.cdx-mobile-invoice-line {
  display: flex;
  justify-content: space-between;
  gap: var(--cdx-space-3);
  padding-bottom: var(--cdx-space-2);
  border-bottom: 1px solid var(--cdx-border);
}

.cdx-mobile-invoice-line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cdx-responsive-device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.75fr) minmax(210px, 0.55fr);
  gap: var(--cdx-space-4);
  align-items: end;
}

.cdx-responsive-frame {
  overflow: hidden;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface-soft);
  box-shadow: var(--cdx-shadow-xs);
}

.cdx-responsive-frame-header {
  display: flex;
  justify-content: space-between;
  padding: var(--cdx-space-3);
  border-bottom: 1px solid var(--cdx-border);
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.cdx-responsive-frame-body {
  display: grid;
  gap: var(--cdx-space-3);
  padding: var(--cdx-space-4);
}

.cdx-responsive-table-card {
  display: grid;
  gap: var(--cdx-space-2);
}

.cdx-responsive-table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr auto;
  gap: var(--cdx-space-2);
  align-items: center;
  padding: var(--cdx-space-2);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface);
}

[data-theme="dark"] .cdx-mobile-phone {
  background: linear-gradient(180deg, #020617, #111827);
}

[data-theme="dark"] .cdx-mobile-hero,
[data-theme="dark"] .cdx-mobile-appbar {
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.16), rgba(32, 169, 139, 0.1) 58%, transparent),
    var(--cdx-surface);
}

[data-theme="dark"] .cdx-mobile-quick-action i,
[data-theme="dark"] .cdx-mobile-widget-icon {
  background: rgba(47, 128, 237, 0.16);
  color: var(--cdx-primary-300);
}

[data-theme="dark"] .cdx-mobile-tabbar .active,
[data-theme="dark"] .cdx-mobile-bottom-nav a.active {
  color: var(--cdx-primary-300);
}

[data-theme="dark"] .cdx-mobile-chat-bubble.is-me {
  background: rgba(32, 169, 139, 0.16);
}

@media (max-width: 1199.98px) {
  .cdx-mobile-hero,
  .cdx-mobile-chat-layout,
  .cdx-responsive-device-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdx-mobile-quick-grid,
  .cdx-mobile-kpi-grid,
  .cdx-mobile-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cdx-mobile-span-8,
  .cdx-mobile-span-6,
  .cdx-mobile-span-4 {
    grid-column: span 12;
  }
}

@media (max-width: 991.98px) {
  body.cdx-sidebar-open {
    overflow: hidden;
  }

  .cdx-sidebar {
    max-width: min(86vw, var(--cdx-sidebar-width));
    box-shadow: var(--cdx-shadow-lg);
  }

  .cdx-sidebar-nav {
    padding-bottom: calc(var(--cdx-space-5) + env(safe-area-inset-bottom, 0px));
  }

  .cdx-main {
    min-height: 100vh;
  }

  .cdx-topbar {
    min-height: var(--cdx-header-height);
  }
}

@media (max-width: 767.98px) {
  body.cdx-dashboard-page {
    padding-bottom: calc(var(--cdx-mobile-nav-height) + 0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .cdx-mobile-bottom-nav {
    display: flex;
  }

  .cdx-mobile-fab-stack {
    bottom: calc(var(--cdx-mobile-nav-height) + 1.35rem);
  }

  .cdx-title {
    overflow-wrap: anywhere;
  }

  .cdx-topbar {
    padding-inline: var(--cdx-space-3);
  }

  .cdx-topbar-actions {
    min-width: 0;
  }

  .cdx-topbar-actions > .btn:not(.btn-icon):not(.cdx-keep-mobile),
  .cdx-topbar-actions > a.btn:not(.btn-icon):not(.cdx-keep-mobile) {
    display: none;
  }

  .cdx-avatar {
    width: 38px;
    height: 38px;
  }

  .cdx-page-header > div,
  .cdx-page-header .cdx-title,
  .cdx-card-header > div {
    min-width: 0;
  }

  .cdx-card-header,
  .cdx-card-body,
  .cdx-form-section,
  .cdx-kpi-card {
    padding: var(--cdx-space-4);
  }

  .cdx-card-header {
    padding-bottom: 0;
  }

  .cdx-card-header + .cdx-card-body {
    padding-top: var(--cdx-space-4);
  }

  .cdx-hover-card:hover,
  .cdx-action-btn:hover,
  .cdx-mobile-quick-action:hover,
  .cdx-mobile-widget:hover {
    transform: none;
  }

  .cdx-form-grid,
  .row.g-4,
  .row.g-3 {
    row-gap: var(--cdx-space-3) !important;
  }

  .cdx-table-card .table,
  .table-responsive .table {
    min-width: 0;
  }

  .cdx-table-card .table.cdx-mobile-table thead,
  .table-responsive .table.cdx-mobile-table thead {
    display: none;
  }

  .cdx-table-card .table.cdx-mobile-table,
  .table-responsive .table.cdx-mobile-table,
  .cdx-table-card .table.cdx-mobile-table tbody,
  .table-responsive .table.cdx-mobile-table tbody,
  .cdx-table-card .table.cdx-mobile-table tr,
  .table-responsive .table.cdx-mobile-table tr,
  .cdx-table-card .table.cdx-mobile-table td,
  .table-responsive .table.cdx-mobile-table td {
    display: block;
    width: 100%;
  }

  .cdx-table-card .table.cdx-mobile-table tr,
  .table-responsive .table.cdx-mobile-table tr {
    margin-bottom: var(--cdx-space-3);
    border: 1px solid var(--cdx-border);
    border-radius: var(--cdx-radius-lg);
    background: var(--cdx-surface);
    box-shadow: var(--cdx-shadow-xs);
  }

  .cdx-table-card .table.cdx-mobile-table td,
  .table-responsive .table.cdx-mobile-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cdx-space-3);
    min-height: 42px;
    padding: var(--cdx-space-3);
    border-bottom: 1px solid var(--cdx-border);
    text-align: right;
  }

  .cdx-table-card .table.cdx-mobile-table td:last-child,
  .table-responsive .table.cdx-mobile-table td:last-child {
    border-bottom: 0;
  }

  .cdx-table-card .table.cdx-mobile-table td::before,
  .table-responsive .table.cdx-mobile-table td::before {
    flex: 0 0 42%;
    color: var(--cdx-text-muted);
    content: attr(data-label);
    font-size: var(--cdx-font-size-xs);
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
  }

  .cdx-table-card .table.cdx-mobile-table td .cdx-row-actions,
  .table-responsive .table.cdx-mobile-table td .cdx-row-actions {
    justify-content: flex-end;
  }

  .cdx-pagination .pagination {
    justify-content: center;
  }

  .cdx-chat-header,
  .cdx-chat-composer {
    position: sticky;
    z-index: 1;
    background: var(--cdx-surface);
  }

  .cdx-chat-header {
    top: var(--cdx-header-height);
  }

  .cdx-chat-composer {
    bottom: 0;
  }

  .cdx-thread-sidebar,
  .cdx-thread-participants {
    max-height: 290px;
    overflow-y: auto;
  }

  .cdx-mobile-hero-actions,
  .cdx-mobile-quick-grid,
  .cdx-mobile-kpi-grid,
  .cdx-mobile-template-grid,
  .cdx-mobile-widget-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdx-mobile-span-8,
  .cdx-mobile-span-6,
  .cdx-mobile-span-4,
  .cdx-mobile-span-12 {
    grid-column: auto;
  }

  .cdx-mobile-phone-screen {
    min-height: 560px;
  }
}

@media (max-width: 575.98px) {
  .cdx-content {
    padding-inline: var(--cdx-space-3);
  }

  .cdx-card {
    border-radius: var(--cdx-radius-md);
  }

  .cdx-mobile-feed-card,
  .cdx-mobile-notification-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .cdx-mobile-feed-card > .cdx-status,
  .cdx-mobile-notification-card > time,
  .cdx-mobile-notification-card > .cdx-text-xs {
    grid-column: 2;
    justify-self: start;
  }

  .cdx-mobile-chat-bubble {
    max-width: 94%;
  }

  .cdx-mobile-phone {
    border-radius: 1.5rem;
    padding: 0.45rem;
  }

  .cdx-mobile-phone-screen {
    min-height: 520px;
    border-radius: 1.1rem;
  }
}

/*
  Day 8A Premium Polish Layer
  Final shared refinements loaded after all module styles.
*/

.cdx-card,
.cdx-form-section,
.cdx-thread-sidebar,
.cdx-thread-participants,
.cdx-chat-window,
.cdx-email-preview,
.cdx-editor-shell,
.cdx-counsellor-timeline,
.cdx-routine-shell {
  border-color: color-mix(in srgb, var(--cdx-border) 82%, var(--cdx-surface) 18%);
}

.cdx-card:not(.cdx-gradient-card),
.cdx-form-section,
.cdx-thread-sidebar,
.cdx-thread-participants,
.cdx-chat-window,
.cdx-email-preview,
.cdx-editor-shell,
.cdx-counsellor-timeline {
  box-shadow: var(--cdx-shadow-card);
}

.cdx-card-header > div,
.cdx-card-body > div,
.cdx-user-chip,
.cdx-notification-item > div,
.cdx-chat-message,
.cdx-thread-item,
.cdx-crm-row > div {
  min-width: 0;
}

.cdx-card-title + .cdx-text-muted,
.cdx-title + .cdx-text-muted {
  margin-top: 0.35rem;
}

.cdx-page-eyebrow i,
.cdx-status i,
.cdx-label i,
.dropdown-item i,
.btn i {
  width: 1.05em;
  text-align: center;
}

.cdx-table-card .table td:first-child,
.cdx-table-card .table th:first-child {
  padding-left: 1.15rem;
}

.cdx-table-card .table td:last-child,
.cdx-table-card .table th:last-child {
  padding-right: 1.15rem;
}

.cdx-table-card tbody tr:last-child td {
  border-bottom-width: 0;
}

.cdx-row-actions .btn-icon,
.cdx-table-card .dropdown .btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
}

.cdx-filter-set .form-select,
.cdx-communication-filter-set .form-select,
.cdx-finance-filter-set .form-select,
.cdx-recipient-row .form-select {
  min-width: 12rem;
}

.cdx-upload-zone strong {
  display: block;
  color: var(--cdx-heading);
  font-weight: 900;
}

.cdx-upload-zone i {
  color: var(--cdx-primary-600);
}

.cdx-empty-state,
.cdx-media-placeholder {
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.06), transparent 42%),
    var(--cdx-surface-soft);
}

.cdx-mobile-bottom-nav {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

[data-theme="dark"] .cdx-chart-placeholder::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 44%);
}

[data-theme="dark"] .cdx-card,
[data-theme="dark"] .cdx-form-section,
[data-theme="dark"] .cdx-thread-sidebar,
[data-theme="dark"] .cdx-thread-participants,
[data-theme="dark"] .cdx-chat-window,
[data-theme="dark"] .cdx-email-preview,
[data-theme="dark"] .cdx-editor-shell,
[data-theme="dark"] .cdx-counsellor-timeline {
  background: linear-gradient(180deg, var(--cdx-surface-raised), var(--cdx-surface));
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
  background-color: var(--cdx-surface-soft);
  color: var(--cdx-text);
}

[data-theme="dark"] .cdx-table-card .table-responsive,
[data-theme="dark"] .cdx-table-card thead th,
[data-theme="dark"] .cdx-recipient-chipset,
[data-theme="dark"] .cdx-editor-toolbar-group,
[data-theme="dark"] .cdx-email-preview-card {
  background: var(--cdx-surface-soft);
}

[data-theme="dark"] .cdx-notification-item:hover,
[data-theme="dark"] .cdx-thread-item:hover {
  background: var(--cdx-surface-raised);
}

@media (max-width: 991.98px) {
  .cdx-sidebar-collapsed .cdx-nav-link[data-cdx-nav-title]::after {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .cdx-page-header {
    gap: var(--cdx-space-3);
  }

  .cdx-page-header .d-flex {
    width: 100%;
  }

  .cdx-page-header .btn {
    flex: 1 1 150px;
  }

  .cdx-table-card .table.cdx-mobile-table tr,
  .table-responsive .table.cdx-mobile-table tr {
    overflow: hidden;
  }

  .cdx-table-card .table.cdx-mobile-table td,
  .table-responsive .table.cdx-mobile-table td {
    text-wrap: balance;
  }

  .cdx-card-title {
    font-size: 1rem;
  }

  .cdx-kpi-value {
    font-size: 1.65rem;
  }
}

@media (max-width: 575.98px) {
  .cdx-status,
  .cdx-label,
  .badge {
    white-space: normal;
  }

  .cdx-filter-set .form-select,
  .cdx-communication-filter-set .form-select,
  .cdx-finance-filter-set .form-select,
  .cdx-recipient-row .form-select {
    min-width: 0;
  }
}