/*
  CodideX Responsive System
  Breakpoint-specific refinements for desktop, tablet, and mobile.
*/

@media (max-width: 1199.98px) {
  .cdx-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cdx-topbar-search {
    max-width: 380px;
  }

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

  .cdx-theme-preview-grid,
  .cdx-ui-grid,
  .cdx-control-grid,
  .cdx-icon-grid,
  .cdx-loader-grid,
  .cdx-empty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .cdx-auth-layout {
    grid-template-columns: 1fr;
  }

  .cdx-auth-visual {
    min-height: 360px;
  }

  .cdx-auth-panel {
    min-height: auto;
  }

  .cdx-shell {
    grid-template-columns: 1fr;
  }

  .cdx-sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-100%);
    width: min(var(--cdx-sidebar-width), 86vw);
  }

  .cdx-sidebar.show {
    transform: translateX(0);
  }

  .cdx-sidebar-collapsed .cdx-shell {
    grid-template-columns: 1fr;
  }

  .cdx-sidebar-collapsed .cdx-brand-copy,
  .cdx-sidebar-collapsed .cdx-nav-label,
  .cdx-sidebar-collapsed .cdx-nav-link span,
  .cdx-sidebar-collapsed .cdx-nav-group-toggle span,
  .cdx-sidebar-collapsed .cdx-nav-chevron,
  .cdx-sidebar-collapsed .cdx-nav-subheading,
  .cdx-sidebar-collapsed .cdx-sidebar-footer {
    display: block;
  }

  .cdx-sidebar-collapsed .cdx-brand,
  .cdx-sidebar-collapsed .cdx-nav-link,
  .cdx-sidebar-collapsed .cdx-nav-group-toggle {
    justify-content: flex-start;
  }

  .cdx-sidebar-collapsed .cdx-nav-group-toggle {
    min-height: 40px;
    padding: 0.56rem 0.82rem;
    pointer-events: auto;
  }

  .cdx-sidebar-collapsed .cdx-nav-group-panel {
    padding-left: 0.2rem;
  }

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

  .cdx-topbar-search {
    display: none;
  }

  .cdx-utility-grid,
  .cdx-settings-layout {
    grid-template-columns: 1fr;
  }

  .cdx-settings-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .cdx-container,
  .cdx-content {
    padding-inline: var(--cdx-space-4);
  }

  .cdx-content {
    padding-block: var(--cdx-space-5);
  }

  .cdx-page-header {
    flex-direction: column;
  }

  .cdx-action-grid,
  .cdx-feature-strip {
    grid-template-columns: 1fr;
  }

  .cdx-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cdx-form-grid,
  .cdx-showcase-grid,
  .cdx-mini-metric-grid {
    grid-template-columns: 1fr;
  }

  .cdx-theme-preview-grid,
  .cdx-ui-grid,
  .cdx-control-grid,
  .cdx-icon-grid,
  .cdx-loader-grid,
  .cdx-empty-grid,
  .cdx-countdown,
  .cdx-settings-nav {
    grid-template-columns: 1fr;
  }

  .cdx-auth-step,
  .cdx-preference-item,
  .cdx-device-card,
  .cdx-timeline-item,
  .cdx-component-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cdx-auth-step > :last-child,
  .cdx-preference-item > :last-child,
  .cdx-device-card > :last-child,
  .cdx-timeline-item > :last-child,
  .cdx-component-row > :last-child {
    grid-column: 2;
    justify-self: start;
  }

  .cdx-table-toolbar,
  .cdx-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .cdx-kpi-card {
    min-height: 138px;
  }

  .cdx-chart-placeholder {
    min-height: 230px;
  }

  .cdx-topbar-actions .cdx-user-chip span {
    display: none;
  }

  .cdx-topbar-actions > .btn:not(.btn-icon) {
    width: 2.35rem;
    padding-inline: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .cdx-topbar-actions > .btn:not(.btn-icon) i {
    margin-right: 0 !important;
  }
}

@media (max-width: 575.98px) {
  :root {
    --cdx-header-height: 64px;
  }

  .cdx-topbar {
    gap: var(--cdx-space-2);
  }

  .cdx-topbar-actions {
    gap: var(--cdx-space-1);
  }

  .btn-icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .cdx-auth-visual {
    min-height: 300px;
    padding: var(--cdx-space-6);
  }

  .cdx-auth-panel {
    padding: var(--cdx-space-4);
  }

  .cdx-utility-shell {
    padding: var(--cdx-space-3);
  }

  .cdx-utility-form,
  .cdx-utility-visual {
    padding: var(--cdx-space-4);
  }

  .cdx-otp-grid {
    grid-template-columns: repeat(3, minmax(42px, 1fr));
  }

  .cdx-skeleton-table-row {
    grid-template-columns: 1fr;
  }

  .cdx-attendance-ring {
    width: 140px;
    height: 140px;
  }
}