/* Responsive guardrail loaded after the active visual theme. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

#viewRoot,
.workspace,
.main-content,
.card,
.dashboard-section,
.clients-page,
.client-detail-page,
.follow-ups-page,
.tasks-page,
.pipeline-page,
.visits-page,
.negotiations-page,
.alerts-page,
.reports-page,
.analytics-page,
.settings-page,
.mdm-page,
.iam-page,
.audit-page {
  min-width: 0;
}

.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr) !important;
}

.sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 70;
  width: var(--sidebar-width) !important;
  height: 100dvh !important;
  transform: none !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width) !important;
}

.workspace {
  grid-column: 2;
}

.table-scroll,
.analytics-table-wrap,
.config-table-card,
.reports-table-wrap,
.tasks-table-wrap,
.visits-table-wrap,
.negotiations-table-wrap,
.pipeline-board,
.tasks-calendar,
.visits-calendar,
.negotiations-state-board,
.clients-list,
.clients-compact-list {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.table-scroll,
.tasks-table-wrap,
.visits-table-wrap,
.negotiations-table-wrap {
  padding-bottom: 10px;
}

.clients-table,
.follow-ups-table,
.tasks-table,
.visits-table,
.negotiations-table,
.report-table,
.analytics-table,
table {
  min-width: 920px;
}

.card-header,
.dashboard-hero,
.module-hero,
.clients-toolbar,
.follow-ups-toolbar,
.tasks-toolbar,
.visits-toolbar,
.pipeline-toolbar,
.negotiations-toolbar,
.report-toolbar,
.alerts-filters,
.dashboard-filters,
.advanced-filters,
.analytics-filters,
.config-toolbar,
.settings-grid,
.modal-grid,
.client-modal-form,
.visit-form,
.task-form,
.negotiation-form {
  min-width: 0;
}

.card-header,
.module-hero,
.dashboard-hero {
  flex-wrap: wrap;
}

.filter-control,
.filter-control input,
.filter-control select,
.global-search,
.global-search input,
.view-select,
.primary-action,
.secondary-action,
.ghost-action,
.link-button,
.dropdown-wrap,
.dropdown-menu button {
  min-width: 0;
}

.filter-control input,
.filter-control select,
.global-search input,
.view-select {
  width: 100%;
}

.badge,
.pill,
.status-pill,
.priority-pill {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.modal-backdrop {
  align-items: center;
  overflow: auto;
}

.modal {
  color: var(--color-text-primary);
}

.modal-content,
.modal-content * {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  }

  .sidebar {
    z-index: 50;
    width: var(--sidebar-width) !important;
    height: 100dvh !important;
    transform: none !important;
    transition: transform var(--transition);
  }

  .app-shell.mobile-menu-open .sidebar {
    transform: none !important;
  }

  .mobile-backdrop {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .brand-copy,
  .app-shell.sidebar-collapsed .sidebar-user-copy,
  .app-shell.sidebar-collapsed .nav-copy,
  .app-shell.sidebar-collapsed .nav-section-title,
  .app-shell.sidebar-collapsed .nav-badge,
  .app-shell.sidebar-collapsed .sidebar-logout span:last-child {
    width: auto;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px;
    min-height: auto;
    padding: 12px 16px !important;
  }

  .topbar-left {
    min-width: 0;
  }

  .section-title h1 {
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    flex-wrap: nowrap;
  }

  .global-search {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block !important;
    width: 100%;
    max-width: none;
  }

  .main-content {
    padding: 18px 18px 34px !important;
  }

  .dashboard-filters,
  .alerts-filters,
  .analytics-filters,
  .advanced-filters,
  .settings-grid,
  .config-toolbar {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  }

  .kpi-grid,
  .dashboard-grid,
  .forecast-grid,
  .performance-grid,
  .client-metrics-grid,
  .reports-cards,
  .analytics-kpi-grid,
  .summary-grid,
  .mdm-grid,
  .iam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .clients-cards,
  .client-cards,
  .tasks-kanban,
  .visits-property-grid,
  .negotiations-advisor-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr) !important;
  }

  .app-shell.mobile-menu-open,
  .app-shell.sidebar-collapsed.mobile-menu-open {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  }

  .sidebar {
    width: var(--sidebar-collapsed-width) !important;
  }

  .app-shell.mobile-menu-open .sidebar,
  .app-shell.sidebar-collapsed.mobile-menu-open .sidebar {
    width: var(--sidebar-width) !important;
  }

  .brand-copy,
  .sidebar-user-copy,
  .nav-copy,
  .nav-section-title,
  .nav-badge,
  .sidebar-logout span:last-child {
    width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .app-shell.mobile-menu-open .brand-copy,
  .app-shell.mobile-menu-open .sidebar-user-copy,
  .app-shell.mobile-menu-open .nav-copy,
  .app-shell.mobile-menu-open .nav-section-title,
  .app-shell.mobile-menu-open .nav-badge,
  .app-shell.mobile-menu-open .sidebar-logout span:last-child {
    width: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .nav-item,
  .brand,
  .sidebar-user,
  .sidebar-logout {
    justify-content: center !important;
  }

  .app-shell.mobile-menu-open .nav-item,
  .app-shell.mobile-menu-open .brand,
  .app-shell.mobile-menu-open .sidebar-user,
  .app-shell.mobile-menu-open .sidebar-logout {
    justify-content: flex-start !important;
  }

  .sidebar-nav {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
  }

  .topbar-left,
  .topbar-actions {
    width: 100%;
  }

  .topbar-actions {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .topbar-actions > * {
    flex: 0 0 auto;
  }

  .view-select {
    width: auto;
    min-width: 150px;
  }

  .primary-action {
    min-width: 128px;
  }

  .dashboard-filters,
  .alerts-filters,
  .analytics-filters,
  .advanced-filters,
  .settings-grid,
  .config-toolbar,
  .modal-grid,
  .client-modal-form,
  .visit-form,
  .task-form,
  .negotiation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .filter-chips,
  .view-tabs,
  .module-tabs,
  .client-tabs,
  .quick-filters,
  .toolbar-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .filter-chips > *,
  .view-tabs > *,
  .module-tabs > *,
  .client-tabs > *,
  .quick-filters > *,
  .toolbar-actions > * {
    flex: 0 0 auto;
  }

  .client-detail-header,
  .detail-header,
  .pipeline-header,
  .negotiation-detail-header {
    grid-template-columns: 1fr !important;
  }

  .client-quick-actions,
  .detail-actions {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
  }

  .client-quick-actions > *,
  .detail-actions > * {
    flex: 0 0 auto;
  }

  .modal-backdrop {
    padding: 12px !important;
    align-items: flex-start;
  }

  .modal {
    width: min(100%, 640px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 10px !important;
  }

  .modal-content {
    padding: 24px 16px !important;
  }
}

@media (max-width: 600px) {
  :root {
    --sidebar-collapsed-width: 58px;
  }

  .main-content {
    padding: 14px 10px 90px !important;
  }

  .topbar {
    padding: 10px !important;
  }

  .section-title p {
    display: none;
  }

  .icon-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .user-button-copy,
  .desktop-only {
    display: none !important;
  }

  .global-search input {
    height: 44px;
  }

  .dashboard-filters,
  .alerts-filters,
  .analytics-filters,
  .advanced-filters,
  .settings-grid,
  .config-toolbar,
  .modal-grid,
  .client-modal-form,
  .visit-form,
  .task-form,
  .negotiation-form,
  .kpi-grid,
  .dashboard-grid,
  .forecast-grid,
  .performance-grid,
  .client-metrics-grid,
  .reports-cards,
  .analytics-kpi-grid,
  .summary-grid,
  .mdm-grid,
  .iam-grid,
  .clients-cards,
  .client-cards,
  .tasks-kanban,
  .visits-property-grid,
  .negotiations-advisor-grid {
    grid-template-columns: 1fr !important;
  }

  .card-header,
  .card-body,
  .dashboard-hero,
  .module-hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .card-header {
    display: grid !important;
  }

  .clients-table,
  .follow-ups-table,
  .tasks-table,
  .visits-table,
  .negotiations-table,
  .report-table,
  .analytics-table,
  table {
    min-width: 760px;
  }

  .dropdown-panel,
  .dropdown-menu {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    max-height: min(72dvh, 520px);
    overflow: auto;
  }

  .toast-region {
    left: 10px;
    right: 10px;
    bottom: 12px;
  }

  .toast {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .sidebar {
    height: 100dvh !important;
  }

  .topbar {
    position: relative;
  }

  .modal {
    max-height: calc(100dvh - 16px) !important;
  }
}