@media (max-width: 991.98px) {
  .crm-content {
    padding: var(--space-6) var(--space-5);
  }

  .crm-topbar {
    height: 56px;
    min-height: 56px;
    padding: 0 12px !important;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--crm-surface);
    border-bottom: 1px solid var(--crm-border);
  }

  .crm-topbar .container-fluid {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    width: 100%;
    padding: 0;
    height: 100%;
  }

  .crm-topbar #sidebarToggle {
    display: inline-flex;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    background: transparent;
    color: var(--crm-text-muted);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .crm-topbar #sidebarToggle:hover {
    color: var(--crm-accent);
    border-color: var(--color-primary-100);
    background: var(--color-primary-50);
  }

  .crm-topbar .crm-search-group {
    flex: 1;
    min-width: 0;
  }

  .crm-sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    width: min(320px, 85vw);
    height: 100vh;
    z-index: 1050;
    flex: 0 0 auto;
    transition: left 0.2s ease;
    box-shadow: 4px 0 24px color-mix(in srgb, var(--crm-ink) 12%, transparent);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--crm-border);
  }

  body.sidebar-open .crm-sidebar {
    left: 0;
  }

  .crm-sidebar-collapsed .crm-sidebar {
    width: min(320px, 85vw);
    padding: var(--space-4);
  }

  .crm-sidebar-collapsed .crm-brand {
    flex-direction: row;
    gap: var(--space-2);
    justify-content: flex-start;
    font-size: 1rem;
    margin-bottom: var(--space-4);
  }

  .crm-sidebar-collapsed .crm-nav .nav-link {
    width: auto;
    height: auto;
    margin: 0 0 0.25rem;
    justify-content: flex-start;
    padding: 0.55rem 0.75rem;
  }

  .crm-sidebar-collapsed .crm-nav .crm-nav-label {
    display: block;
  }

  .crm-sidebar .crm-brand {
    padding: var(--space-4);
    margin-bottom: 0;
  }

  .crm-brand .crm-sidebar-toggle {
    display: none;
  }

  .crm-nav {
    padding: 0 var(--space-4) var(--space-4);
    margin-top: 0;
  }

  /* Backdrop */
  .crm-mobile-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: color-mix(in srgb, var(--crm-ink) 30%, transparent);
    z-index: 1049;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .crm-mobile-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .crm-dashboard-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .crm-col-8,
  .crm-col-6,
  .crm-col-4,
  .crm-col-12 {
    grid-column: span 6;
  }

  .crm-login-wrap {
    grid-template-columns: 1fr;
  }

  .crm-login-cover {
    display: none;
  }
}

@media (max-width: 767px) {
  /* ui.css is loaded after this file and otherwise leaves a 20px strip of
     the closed drawer over page content on narrow screens. */
  .crm-sidebar {
    left: calc(-1 * min(320px, 85vw)) !important;
    width: min(320px, 85vw) !important;
  }

  body.sidebar-open .crm-sidebar {
    left: 0 !important;
  }

  .crm-content {
    padding: var(--space-4) var(--space-4);
  }

  .crm-topbar .container-fluid {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0 var(--space-4);
  }

  .btn,
  .form-control,
  .form-select {
    min-height: 44px;
  }

  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }

  .crm-topbar [data-profile-dropdown] .dropdown-toggle {
    position: relative;
    width: 44px;
    max-width: 44px;
    padding-inline: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    color: transparent;
  }

  .crm-topbar [data-profile-dropdown] .dropdown-toggle::before {
    content: "П";
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crm-text);
    font-size: 0.9rem;
    font-weight: 800;
  }

  .crm-topbar [data-profile-dropdown] .dropdown-toggle::after {
    display: none;
  }

  .crm-topbar [data-profile-dropdown] {
    min-width: 0;
  }

  .crm-topbar .input-group {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }

  .crm-topbar-quick-create {
    padding-inline: 0.6rem;
  }

  .crm-search-group.is-open {
    max-width: 100%;
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .crm-page-head {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--space-4);
  }

  .crm-page-head > div:last-child {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  .crm-dashboard-kpi {
    min-height: auto;
  }

  .crm-dashboard-kpi-label {
    max-width: none;
  }

  .crm-kanban {
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
  }

  .crm-kanban-col {
    flex-basis: min(84vw, 280px);
    min-width: min(84vw, 280px);
    scroll-snap-align: start;
  }

  .crm-gantt {
    grid-template-columns: 1fr;
  }

  .crm-gantt-page .crm-gantt-scale {
    grid-template-columns: 1fr;
  }

  .crm-gantt-page .crm-gantt-scale-label {
    border-right: 0;
    border-bottom: 1px solid var(--crm-border);
  }

  .crm-gantt-rows {
    border-right: 0;
    border-bottom: 1px solid var(--crm-border);
  }

  .crm-filter-offcanvas {
    width: min(420px, 94vw);
  }

  .crm-filter-offcanvas .offcanvas-body {
    padding: 1rem;
  }

  .crm-filter-offcanvas .crm-kanban-filters,
  .crm-filter-offcanvas .crm-filters-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .crm-mobile-filter-toggle {
    width: 100%;
    justify-content: space-between;
    margin: 0 0 0.5rem;
  }

  .crm-mobile-filter-count {
    display: inline-flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--crm-success-soft);
    color: var(--crm-accent-strong);
    font-size: 0.75rem;
    font-weight: 800;
  }

  .crm-active-filter-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
  }

  .crm-filter-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.25rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--crm-accent) 28%, transparent);
    border-radius: 999px;
    background: var(--crm-success-soft);
    color: var(--crm-accent-strong);
    font-size: 0.75rem;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .crm-mobile-work-mode-hint {
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--radius-lg);
    background: var(--crm-surface-2);
    color: var(--crm-text);
    padding: 0.75rem 0.9rem;
    margin: 0 0 0.85rem;
    font-size: 0.875rem;
  }

  .crm-gantt-page .crm-gantt-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .crm-table {
    font-size: var(--text-xs);
  }

  .crm-counterparties-page .crm-counterparties-table-wrap {
    display: none;
  }

  .crm-counterparties-page .crm-counterparties-mobile-list {
    display: grid !important;
    gap: 0.75rem;
  }

  .crm-counterparty-mobile-card {
    border: 1px solid var(--crm-border);
    border-radius: var(--radius-lg);
    background: var(--crm-surface);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }

  .crm-counterparty-mobile-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
  }

  .crm-counterparty-mobile-check {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -0.35rem 0 0 -0.35rem;
  }

  .crm-counterparty-mobile-title {
    color: var(--crm-text);
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .crm-counterparty-mobile-meta {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
  }

  .crm-counterparty-mobile-details {
    display: grid;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
  }

  .crm-counterparty-mobile-details > div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.5rem;
    font-size: 0.85rem;
  }

  .crm-counterparty-mobile-details dt {
    color: var(--crm-text-muted);
    font-weight: 700;
  }

  .crm-counterparty-mobile-details dd {
    margin: 0;
    font-weight: 650;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .crm-counterparty-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.9rem;
  }

  .crm-counterparty-mobile-actions .btn {
    min-height: 44px;
  }

  .crm-tasks-page .crm-card.p-0.table-responsive[data-tasks-list-view] {
    overflow-x: auto;
  }

  .table-responsive {
    border-radius: var(--radius-md);
  }

  .crm-card {
    padding: var(--space-4);
  }

  #aiSuggestionDrawer .offcanvas-body {
    gap: 0.55rem;
  }

  #aiSuggestionDrawer .offcanvas-body > .d-flex.gap-2 {
    flex-direction: column;
    align-items: stretch;
  }

  #aiSuggestionDrawer .offcanvas-body > .d-flex.gap-2 .btn {
    width: 100%;
  }

  #taskAiPrimaryActions,
  #taskAiSecondaryActions {
    flex-direction: column;
    align-items: stretch;
  }

  #taskAiPrimaryActions .btn,
  #taskAiSecondaryActions .btn {
    width: 100%;
  }
}

/* Dashboard widgets use twelve-column desktop spans. Reset those spans on
   narrow screens so a crm-col-4/6 widget cannot create implicit columns and
   collapse into a 70px strip. */
@media (max-width: 767px) {
  /* Keep the API status toast below the sticky mobile topbar and constrain it
     to the viewport so it cannot cover the navigation controls. */
  #crmApiStatusBar {
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    text-align: center;
  }

  /* Task hierarchy: nested grid items must retain the card width. The old
     two-column tree layout let the title column shrink to 0px, so child task
     names were rendered one character per line on narrow screens. */
  .crm-tasks-page .crm-task-tree-content {
    display: block;
    width: 100%;
    min-width: 0;
    padding-left: calc(var(--task-level, 0) * 12px);
  }

  .crm-tasks-page .crm-task-tree-body,
  .crm-tasks-page .crm-task-tree-main,
  .crm-tasks-page .crm-task-tree-title-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .crm-tasks-page .crm-task-tree-title,
  .crm-tasks-page .crm-task-card-title {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .crm-tasks-page .crm-task-tree-item.is-child > .crm-task-tree-content {
    margin-left: 0.65rem;
    width: calc(100% - 0.65rem);
  }

  .crm-tasks-page .crm-task-tree-children {
    margin-left: 0.65rem;
    padding-left: 0.65rem;
  }

  .crm-dashboard-page .crm-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    width: 100%;
    max-width: 100%;
  }

  .crm-dashboard-page .crm-dashboard-grid > [data-dashboard-widget] {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .crm-dashboard-page .crm-dashboard-widget,
  .crm-dashboard-page .crm-dashboard-section {
    min-width: 0;
    max-width: 100%;
  }

  .crm-dashboard-page .crm-dashboard-widget h2,
  .crm-dashboard-page .crm-dashboard-widget h3,
  .crm-dashboard-page .crm-dashboard-section h2,
  .crm-dashboard-page .crm-dashboard-section h3 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .crm-dashboard-page .crm-dashboard-widget .table-responsive,
  .crm-dashboard-page .crm-dashboard-widget [class*="table-wrap"] {
    max-width: 100%;
  }

  .crm-dashboard-edit-mode .crm-widget-builder-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    gap: 0.35rem;
    opacity: 1;
  }

  .crm-dashboard-edit-mode .crm-widget-builder-drag,
  .crm-dashboard-edit-mode .crm-widget-builder-remove {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .crm-dashboard-builder-bar {
    position: sticky;
    top: 0.5rem;
    z-index: 20;
    align-items: stretch;
  }

  .crm-dashboard-builder-bar > .crm-dashboard-builder-hint {
    flex: 1 1 100%;
  }

  .crm-dashboard-builder-bar > div {
    width: 100%;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .crm-dashboard-builder-bar .btn {
    min-height: 44px;
    white-space: normal;
  }

  .crm-dashboard-catalog-tools {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    background: var(--crm-surface);
  }

  .crm-dashboard-catalog-list {
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .crm-dashboard-page .crm-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-dashboard-page .crm-dashboard-grid > .crm-col-12,
  .crm-dashboard-page .crm-dashboard-grid > .crm-col-8,
  .crm-dashboard-page .crm-dashboard-grid > .crm-col-6 {
    grid-column: 1 / -1 !important;
  }

  .crm-dashboard-page .crm-dashboard-grid > .crm-col-4 {
    grid-column: span 1 !important;
  }
}

@media (max-width: 575px) {
  .crm-dashboard-page .crm-dashboard-kpi strong {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  .crm-dashboard-page .crm-dashboard-task-card-meta {
    font-size: 0.8125rem;
  }

  .crm-content {
    padding: var(--space-3) var(--space-3);
  }

  .crm-page-title {
    font-size: 1.35rem;
  }

  .crm-card-list {
    display: grid;
    gap: var(--space-3);
  }

  .crm-card-list-item {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    background: var(--crm-surface);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
  }

  .crm-card-list-item .crm-card-list-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.35rem 0;
    font-size: 0.8125rem;
  }

  .crm-card-list-item .crm-card-list-label {
    color: var(--crm-text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  .crm-card-list-item .crm-card-list-value {
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crm-card-list-item .crm-card-list-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
  }

  .crm-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-topbar);
    display: flex;
    justify-content: space-around;
    background: var(--crm-surface);
    border-top: 1px solid var(--color-neutral-200);
    padding: 0.35rem var(--space-2);
    padding-bottom: env(safe-area-inset-bottom, 0.35rem);
  }

  .crm-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--crm-text-muted);
    font-size: 0.625rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    transition: color var(--motion-fast) ease, background var(--motion-fast) ease;
  }

  .crm-mobile-nav-item.active {
    color: var(--color-primary-700);
    background: var(--color-primary-50);
  }

  .crm-mobile-nav-item .crm-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .crm-content {
    padding-bottom: calc(var(--space-12) + 60px);
  }

  .crm-cycles-page .crm-cycles-search {
    display: flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    background: var(--crm-surface);
  }

  .crm-cycles-page .crm-cycles-search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: 14px;
  }

  .crm-cycles-page .crm-cycles-search-input {
    display: block;
    flex: 1 1 auto;
    width: auto !important;
    height: 44px;
    min-height: 0;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  .crm-cycles-page .crm-cycles-search-clear,
  .crm-cycles-page .crm-cycles-search-submit {
    display: inline-flex;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-right: 5px;
    border: 0;
  }

  .crm-cycles-page .crm-cycles-search-clear {
    background: transparent;
    color: var(--crm-text-soft);
  }

  .crm-cycles-page .crm-cycles-search-submit {
    background: var(--crm-primary);
    color: var(--crm-on-accent);
  }
}

/* Mobile component repairs for the remaining administrative and work-list
 * pages. Keep the desktop table markup intact, but turn each record into a
 * labelled card at the point where a desktop table becomes unreadable. */
@media (max-width: 767.98px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .crm-app, .crm-main-wrap, .crm-content { min-width: 0; max-width: 100%; }
  .crm-content { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .crm-page-head, .crm-page-head > div, .crm-section-head, .crm-section-head > div { min-width: 0; max-width: 100%; }
  .crm-page-title, .breadcrumb, .breadcrumb-item, .crm-subtitle { overflow-wrap: anywhere; }

  /* Organizations has a plain page shell (without a page-specific hero), so
   * reserve a real top inset for the sticky mobile bar and keep the heading's
   * ascenders/descenders inside the first line box. The selector is scoped to
   * this page and is deliberately more specific than the later global UI
   * shell rules, which otherwise overwrite the mobile padding. */
  body[data-page="organizations"] .crm-content {
    padding-top: max(44px, calc(env(safe-area-inset-top) + 28px));
  }
  body[data-page="organizations"] .crm-page-head {
    margin-top: 2px;
    padding-top: 4px;
  }
  body[data-page="organizations"] .crm-page-title {
    max-width: 100%;
    line-height: 1.18;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  /* A table is still available on larger screens. On phones its row is a
   * record with a stable label column so important fields and actions remain
   * visible without a hidden horizontal gesture. */
  body[data-page="mentions"] .table-responsive,
  body[data-page="admin-statuses"] .table-responsive,
  body[data-page="admin-jobs"] .table-responsive,
  body[data-page="admin-logs"] .table-responsive,
  body[data-page="admin-updates"] .table-responsive,
  body[data-page="admin-webhooks"] .table-responsive,
  body[data-page="admin-api-clients"] .table-responsive,
  body[data-page="time-analytics"] .table-responsive {
    overflow: visible;
    max-width: 100%;
  }

  body[data-page="mentions"] .crm-table,
  body[data-page="admin-statuses"] .crm-table,
  body[data-page="admin-jobs"] .crm-table,
  body[data-page="admin-logs"] .crm-table,
  body[data-page="admin-updates"] .crm-table,
  body[data-page="admin-webhooks"] .crm-table,
  body[data-page="admin-api-clients"] .crm-table,
  body[data-page="time-analytics"] .crm-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .table-responsive,
  body[data-page="admin-tags"] .table-responsive,
  body[data-page="admin"] .crm-has-hscroll { overflow: visible; max-width: 100%; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table,
  body[data-page="admin-tags"] .crm-table,
  body[data-page="admin"] .crm-has-hscroll .crm-table {
    display: block; width: 100% !important; min-width: 0 !important;
  }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table thead,
  body[data-page="admin-tags"] .crm-table thead,
  body[data-page="admin"] .crm-has-hscroll .crm-table thead { display: none; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody,
  body[data-page="admin-tags"] .crm-table tbody,
  body[data-page="admin"] .crm-has-hscroll .crm-table tbody { display: grid; gap: .75rem; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody tr,
  body[data-page="admin-tags"] .crm-table tbody tr,
  body[data-page="admin"] .crm-has-hscroll .crm-table tbody tr {
    display: grid; gap: .55rem; padding: .85rem; border: 1px solid var(--crm-border);
    border-radius: var(--radius-md); background: var(--crm-surface);
  }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td,
  body[data-page="admin-tags"] .crm-table tbody td,
  body[data-page="admin"] .crm-has-hscroll .crm-table tbody td {
    display: grid; grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); gap: .55rem;
    width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important;
    overflow-wrap: anywhere; white-space: normal; text-align: start !important;
  }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td::before,
  body[data-page="admin-tags"] .crm-table tbody td::before,
  body[data-page="admin"] .crm-has-hscroll .crm-table tbody td::before {
    content: attr(data-label); color: var(--crm-text-muted); font-size: var(--text-xs); font-weight: 700;
  }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td[colspan],
  body[data-page="admin-tags"] .crm-table tbody td[colspan],
  body[data-page="admin"] .crm-has-hscroll .crm-table tbody td[colspan] { display: block; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td[colspan]::before,
  body[data-page="admin-tags"] .crm-table tbody td[colspan]::before,
  body[data-page="admin"] .crm-has-hscroll .crm-table tbody td[colspan]::before { display: none; }
  body[data-page="mentions"] .crm-table thead,
  body[data-page="admin-statuses"] .crm-table thead,
  body[data-page="admin-jobs"] .crm-table thead,
  body[data-page="admin-logs"] .crm-table thead,
  body[data-page="admin-updates"] .crm-table thead,
  body[data-page="admin-webhooks"] .crm-table thead,
  body[data-page="admin-api-clients"] .crm-table thead,
  body[data-page="time-analytics"] .crm-table thead { display: none; }
  body[data-page="mentions"] .crm-table tbody,
  body[data-page="admin-statuses"] .crm-table tbody,
  body[data-page="admin-jobs"] .crm-table tbody,
  body[data-page="admin-logs"] .crm-table tbody,
  body[data-page="admin-updates"] .crm-table tbody,
  body[data-page="admin-webhooks"] .crm-table tbody,
  body[data-page="admin-api-clients"] .crm-table tbody,
  body[data-page="time-analytics"] .crm-table tbody { display: grid; gap: .75rem; }
  body[data-page="mentions"] .crm-table tbody tr,
  body[data-page="admin-statuses"] .crm-table tbody tr,
  body[data-page="admin-jobs"] .crm-table tbody tr,
  body[data-page="admin-logs"] .crm-table tbody tr,
  body[data-page="admin-updates"] .crm-table tbody tr,
  body[data-page="admin-webhooks"] .crm-table tbody tr,
  body[data-page="admin-api-clients"] .crm-table tbody tr,
  body[data-page="time-analytics"] .crm-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    padding: .85rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius-md);
    background: var(--crm-surface);
  }
  body[data-page="mentions"] .crm-table tbody td,
  body[data-page="admin-statuses"] .crm-table tbody td,
  body[data-page="admin-jobs"] .crm-table tbody td,
  body[data-page="admin-logs"] .crm-table tbody td,
  body[data-page="admin-updates"] .crm-table tbody td,
  body[data-page="admin-webhooks"] .crm-table tbody td,
  body[data-page="admin-api-clients"] .crm-table tbody td,
  body[data-page="time-analytics"] .crm-table tbody td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr);
    gap: .55rem;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    text-align: start !important;
  }
  body[data-page="mentions"] .crm-table tbody td::before,
  body[data-page="admin-statuses"] .crm-table tbody td::before,
  body[data-page="admin-jobs"] .crm-table tbody td::before,
  body[data-page="admin-logs"] .crm-table tbody td::before,
  body[data-page="admin-updates"] .crm-table tbody td::before,
  body[data-page="admin-webhooks"] .crm-table tbody td::before,
  body[data-page="admin-api-clients"] .crm-table tbody td::before,
  body[data-page="time-analytics"] .crm-table tbody td::before {
    content: attr(data-label);
    color: var(--crm-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
  }
  body[data-page="mentions"] .crm-table tbody td[colspan],
  body[data-page="admin-statuses"] .crm-table tbody td[colspan],
  body[data-page="admin-jobs"] .crm-table tbody td[colspan],
  body[data-page="admin-logs"] .crm-table tbody td[colspan],
  body[data-page="admin-updates"] .crm-table tbody td[colspan],
  body[data-page="admin-webhooks"] .crm-table tbody td[colspan],
  body[data-page="admin-api-clients"] .crm-table tbody td[colspan],
  body[data-page="time-analytics"] .crm-table tbody td[colspan] { display: block; }
  body[data-page="mentions"] .crm-table tbody td[colspan]::before,
  body[data-page="admin-statuses"] .crm-table tbody td[colspan]::before,
  body[data-page="admin-jobs"] .crm-table tbody td[colspan]::before,
  body[data-page="admin-logs"] .crm-table tbody td[colspan]::before,
  body[data-page="admin-updates"] .crm-table tbody td[colspan]::before,
  body[data-page="admin-webhooks"] .crm-table tbody td[colspan]::before,
  body[data-page="admin-api-clients"] .crm-table tbody td[colspan]::before,
  body[data-page="time-analytics"] .crm-table tbody td[colspan]::before { display: none; }

  /* Admin AI has long metadata labels and five tabs. Allow the content to
   * flow naturally while keeping the tab strip scrollable inside its card. */
  body[data-page="admin-ai"] .crm-admin-ai-hero,
  body[data-page="admin-ai"] .crm-admin-ai-hero-meta,
  body[data-page="admin-ai"] .crm-admin-ai-hero-actions { min-width: 0; }
  body[data-page="admin-ai"] .crm-admin-ai-hero-meta { grid-template-columns: 1fr !important; }
  body[data-page="admin-ai"] .crm-admin-ai-hero-meta > div,
  body[data-page="admin-ai"] .crm-admin-ai-hero-meta strong { min-width: 0; overflow-wrap: anywhere; }
  body[data-page="admin-ai"] .crm-admin-ai-tabs { overflow: hidden; }
  body[data-page="admin-ai"] .crm-admin-ai-tabs .nav-pills { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: .35rem; scrollbar-width: thin; }
  body[data-page="admin-ai"] .crm-admin-ai-tabs .nav-link { flex: 0 0 auto; min-height: 44px; }

  /* Modal forms reserve space for the action bar, including helper/error text
   * under the last input. */
  .modal-dialog-scrollable .modal-body,
  .modal-content > form .modal-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom) + 4rem); scroll-padding-bottom: 5rem; }
  .modal-dialog .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-dialog .modal-footer .btn { min-height: 44px; }

  /* The API live status belongs below the sticky navigation on phones. Keep
   * it readable without covering search, notifications or the menu button. */
  #crmApiStatusBar {
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    text-align: center;
    white-space: normal;
    border-radius: var(--radius-md, 10px) !important;
  }
}

@media (max-width: 360px) {
  .crm-content { padding-inline: 10px; }
  body[data-page="mentions"] .crm-table tbody td,
  body[data-page="admin-statuses"] .crm-table tbody td,
  body[data-page="admin-jobs"] .crm-table tbody td,
  body[data-page="admin-logs"] .crm-table tbody td,
  body[data-page="admin-updates"] .crm-table tbody td,
  body[data-page="admin-webhooks"] .crm-table tbody td,
  body[data-page="admin-api-clients"] .crm-table tbody td,
  body[data-page="time-analytics"] .crm-table tbody td { grid-template-columns: minmax(4.75rem, 42%) minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .crm-topbar-quick-create .crm-topbar-quick-create-label {
    display: none;
  }

  .crm-topbar-quick-create {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-content: center;
  }

  .crm-topbar-timer-title {
    display: none;
  }

  .crm-topbar-timer-link {
    max-width: 130px;
    padding: 0.25rem 0.5rem;
  }
}

/* Mobile work surfaces: preserve readable cards and keep dense desktop
 * layouts inside their own intentional scroll areas. These rules are kept
 * at the end of the bundle so they win over the page-specific desktop
 * polish rules in pages.css. */
@media (max-width: 767.98px) {
  /* Chat is a two-step mobile surface: list first, conversation second. */
  body[data-page="chat"] .crm-content.crm-chat-page {
    height: calc(100dvh - var(--topbar-height, 56px));
    min-height: 0;
  }

  body[data-page="chat"] .crm-chat-layout {
    min-height: 0;
    height: 100%;
  }

  body[data-page="chat"] .crm-chat-sidebar,
  body[data-page="chat"] .crm-chat-conversation {
    min-width: 0;
    width: 100%;
  }

  body[data-page="chat"] .crm-chat-sidebar-head {
    min-height: 64px;
    padding: .75rem 1rem;
  }

  body[data-page="chat"] .crm-chat-sidebar-head > div,
  body[data-page="chat"] .crm-chat-conversation-head > *,
  body[data-page="chat"] .crm-chat-head-main {
    min-width: 0;
  }

  body[data-page="chat"] .crm-chat-conversation-head {
    padding: .7rem .85rem;
    gap: .55rem;
    align-items: flex-start;
  }

  body[data-page="chat"] .crm-chat-conversation-head h2,
  body[data-page="chat"] .crm-chat-conversation-type,
  body[data-page="chat"] .crm-chat-participants-link {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body[data-page="chat"] .crm-chat-head-actions {
    flex: 0 0 auto;
    gap: .25rem;
  }

  body[data-page="chat"] .crm-chat-messages {
    padding: .75rem .65rem;
  }

  body[data-page="chat"] .crm-chat-compose {
    padding: .55rem .65rem calc(.55rem + env(safe-area-inset-bottom));
  }

  body[data-page="chat"] .crm-chat-compose-row {
    min-width: 0;
  }

  body[data-page="chat"] .crm-chat-message-input {
    min-width: 0;
    max-height: 7rem;
  }

  /* The feed scrolls inside its panel. This prevents a large notification
   * history from pushing every control thousands of pixels down the page. */
  body[data-page="notifications"] .crm-notifications-page,
  body[data-page="notifications"] .crm-notifications-layout {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="notifications"] .crm-notifications-feed {
    min-height: 0;
  }

  body[data-page="notifications"] .crm-notifications-list {
    height: min(62dvh, 600px);
    min-height: 240px;
    max-height: min(62dvh, 600px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="notifications"] .crm-notification-item {
    min-height: 0;
    padding: .8rem !important;
  }

  body[data-page="notifications"] .crm-notification-item > .d-flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem !important;
  }

  body[data-page="notifications"] .crm-notification-actions {
    display: flex;
    align-items: stretch;
  }

  body[data-page="notifications"] .crm-notification-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Seven month columns cannot carry a useful event title at phone width.
   * Keep the calendar surface readable with a deliberate inner scroller. */
  body[data-page="calendar"] [data-calendar-surface] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  body[data-page="calendar"] .crm-calendar-month-grid,
  body[data-page="calendar"] .crm-calendar-weekdays {
    min-width: 560px;
  }

  body[data-page="calendar"] .crm-calendar-day {
    min-height: 100px;
    padding: .45rem;
  }

  body[data-page="calendar"] .crm-calendar-event-title {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .7rem;
  }

  body[data-page="calendar"] .crm-calendar-panel-head {
    padding: .75rem;
  }

  body[data-page="calendar"] .crm-calendar-period-title,
  body[data-page="calendar"] .crm-calendar-current-period {
    min-width: 0;
  }

  body[data-page="calendar"] .crm-calendar-current-period {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Kanban filters become a compact stack; columns remain horizontally
   * scrollable by design and never widen the document itself. */
  body[data-page="kanban"] .crm-kanban-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: .75rem;
    gap: .65rem;
  }

  body[data-page="kanban"] .crm-kanban-filters > *,
  body[data-page="kanban"] .crm-kanban-search,
  body[data-page="kanban"] .crm-kanban-filter-summary {
    min-width: 0;
    width: 100%;
    margin-left: 0;
  }

  body[data-page="kanban"] .crm-kanban-filters select,
  body[data-page="kanban"] .crm-kanban-search input {
    width: 100%;
    min-width: 0;
  }

  body[data-page="kanban"] .crm-kanban-filter-summary #kanbanFiltersResetBtn {
    width: 100%;
  }

  body[data-page="kanban"] .crm-kanban-scroll-wrap {
    max-width: 100%;
    min-width: 0;
    position: relative;
  }

  body[data-page="kanban"] .crm-kanban {
    max-width: 100%;
    padding-inline: .1rem;
  }
}

/* Mobile UX pass: knowledge, planning and conversation surfaces.  These
 * overrides live after pages.css so desktop table dimensions cannot force a
 * 360–430px viewport to scroll horizontally or collapse the primary column. */
@media (max-width: 767.98px) {
  /* Knowledge list: keep the search and filters usable as a vertical form. */
  body[data-page="knowledge"] .crm-page-head,
  body[data-page="knowledge-page"] .kb-page-header {
    align-items: stretch;
    gap: .75rem;
  }
  body[data-page="knowledge"] .crm-page-actions,
  body[data-page="knowledge-page"] .kb-header-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
  }
  body[data-page="knowledge"] .crm-page-actions .btn,
  body[data-page="knowledge-page"] .kb-header-actions .btn {
    min-height: 44px;
    width: 100%;
    margin: 0 !important;
  }
  body[data-page="knowledge"] .kb-filter-bar,
  body[data-page="knowledge"] .kb-filter-bar > * {
    min-width: 0 !important;
    width: 100%;
  }
  body[data-page="knowledge"] .kb-filter-bar .input-group {
    width: 100%;
  }
  body[data-page="knowledge"] .crm-knowledge-layout,
  body[data-page="knowledge-page"] .crm-knowledge-detail-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }
  body[data-page="knowledge"] .crm-knowledge-spaces-panel,
  body[data-page="knowledge-page"] .crm-knowledge-tree-sidebar,
  body[data-page="knowledge-page"] .crm-knowledge-center,
  body[data-page="knowledge-page"] .crm-knowledge-side {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  body[data-page="knowledge"] .crm-knowledge-space-link,
  body[data-page="knowledge-page"] .crm-knowledge-tree-item-row,
  body[data-page="knowledge-page"] .crm-knowledge-tree-item-row > a {
    min-width: 0;
    max-width: 100%;
  }
  body[data-page="knowledge"] .crm-knowledge-space-info strong,
  body[data-page="knowledge-page"] .crm-knowledge-tree-item-row > a {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  body[data-page="knowledge-page"] .kb-page-title,
  body[data-page="knowledge-page"] .kb-description,
  body[data-page="knowledge-page"] .crm-knowledge-content,
  body[data-page="knowledge-page"] .crm-knowledge-article {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body[data-page="knowledge-page"] .crm-knowledge-content pre,
  body[data-page="knowledge-page"] .crm-knowledge-content table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }
  body[data-page="knowledge-page"] .crm-knowledge-tab-nav {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  body[data-page="knowledge-page"] .crm-knowledge-tab-btn {
    flex: 0 0 auto;
    min-height: 44px;
  }

  /* My day / week: cards stack, while each desktop table becomes a labelled
   * record. The task field gets the full row so a title never shrinks to a
   * few characters beside fixed desktop columns. */
  body[data-page="day"] .crm-planner-page,
  body[data-page="week"] .crm-planner-page,
  body[data-page="day"] .crm-planner-overview,
  body[data-page="week"] .crm-planner-overview,
  body[data-page="day"] .crm-planner-primary,
  body[data-page="week"] .crm-planner-primary,
  body[data-page="day"] .crm-planner-aside,
  body[data-page="week"] .crm-planner-aside {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  body[data-page="day"] .crm-planner-aside,
  body[data-page="week"] .crm-planner-aside {
    display: flex;
    flex-direction: column;
  }
  body[data-page="day"] .crm-planner-page .crm-table-wrap,
  body[data-page="week"] .crm-planner-page .crm-table-wrap {
    overflow: visible;
  }
  body[data-page="day"] .crm-planner-task-table,
  body[data-page="week"] .crm-planner-task-table {
    display: block;
    width: 100% !important;
    table-layout: auto !important;
  }
  body[data-page="day"] .crm-planner-task-table colgroup,
  body[data-page="week"] .crm-planner-task-table colgroup,
  body[data-page="day"] .crm-planner-task-table thead,
  body[data-page="week"] .crm-planner-task-table thead {
    display: none;
  }
  body[data-page="day"] .crm-planner-task-table tbody,
  body[data-page="week"] .crm-planner-task-table tbody {
    display: grid;
    gap: .65rem;
  }
  body[data-page="day"] .crm-planner-task-table tbody tr,
  body[data-page="week"] .crm-planner-task-table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--crm-border);
    border-radius: var(--radius-md, 10px);
    background: var(--crm-surface);
  }
  body[data-page="day"] .crm-planner-task-table tbody tr.crm-day-row,
  body[data-page="week"] .crm-planner-task-table tbody tr.crm-day-row {
    display: block;
    padding: .55rem .75rem;
    background: var(--crm-surface-soft, var(--crm-surface-2));
  }
  body[data-page="day"] .crm-planner-task-table tbody td,
  body[data-page="week"] .crm-planner-task-table tbody td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    gap: .5rem;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start !important;
  }
  body[data-page="day"] .crm-planner-task-table tbody td::before,
  body[data-page="week"] .crm-planner-task-table tbody td::before {
    content: attr(data-label);
    color: var(--crm-text-muted);
    font-size: var(--text-xs, .72rem);
    font-weight: 700;
  }
  body[data-page="day"] .crm-planner-task-table tbody td:first-child,
  body[data-page="week"] .crm-planner-task-table tbody td:first-child {
    display: block;
    padding-left: .5rem !important;
    border-left: 3px solid var(--crm-primary) !important;
  }
  body[data-page="day"] .crm-planner-task-table tbody td:first-child::before,
  body[data-page="week"] .crm-planner-task-table tbody td:first-child::before {
    display: none;
  }
  body[data-page="day"] .crm-task-name,
  body[data-page="week"] .crm-task-name,
  body[data-page="day"] .crm-planner-who-name,
  body[data-page="week"] .crm-planner-who-name {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
  body[data-page="day"] .crm-planner-actions-cell,
  body[data-page="week"] .crm-planner-actions-cell {
    justify-content: flex-start;
  }

  /* Chat: reserve the whole viewport for the active pane and keep composer
   * controls inside the safe width. The back button is always reachable. */
  body[data-page="chat"] .crm-content.crm-chat-page {
    height: calc(100dvh - var(--topbar-height, 56px));
    min-height: 0;
    overflow: hidden;
  }
  body[data-page="chat"] .crm-chat-layout {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-page="chat"] .crm-chat-sidebar,
  body[data-page="chat"] .crm-chat-conversation {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  body[data-page="chat"] .crm-chat-sidebar-head,
  body[data-page="chat"] .crm-chat-conversation-head {
    padding-inline: .75rem;
  }
  body[data-page="chat"] .crm-chat-conversation-head {
    align-items: flex-start;
    gap: .5rem;
  }
  body[data-page="chat"] .crm-chat-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body[data-page="chat"] .crm-chat-conversation-head h2 {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body[data-page="chat"] .crm-chat-messages {
    padding: .75rem;
  }
  body[data-page="chat"] .crm-chat-compose {
    padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom));
  }
  body[data-page="chat"] .crm-chat-compose-row {
    flex-wrap: wrap;
    gap: .35rem;
  }
  body[data-page="chat"] .crm-chat-message-input {
    flex: 1 1 100%;
    order: 2;
    min-width: 0;
  }
  body[data-page="chat"] .crm-chat-send-btn {
    order: 2;
    min-width: 44px;
  }
  body[data-page="chat"] .crm-chat-message {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body[data-page="chat"] .crm-chat-message p,
  body[data-page="chat"] .crm-chat-quote span {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  body[data-page="chat"] .crm-chat-file-attachment {
    max-width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }
  body[data-page="chat"] .crm-chat-file-attachment small { grid-column: 2; }

  /* Admin knowledge and AI tabs remain scrollable within their cards, never
   * widening the document. */
  body[data-page="admin-knowledge"] .nav-tabs,
  body[data-page="admin-ai"] .nav-pills {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  body[data-page="admin-knowledge"] .nav-tabs .nav-link,
  body[data-page="admin-ai"] .nav-pills .nav-link {
    flex: 0 0 auto;
    min-height: 44px;
  }
  body[data-page="admin-knowledge"] .crm-table-responsive,
  body[data-page="admin-knowledge"] .table-responsive {
    max-width: 100%;
  }
}

/* Mobile administrative records: preserve readable values instead of
   forcing every table cell into a narrow label/value column. */
@media (max-width: 767.98px) {
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody tr,
  body[data-page="admin-tags"] .crm-table tbody tr { min-width: 0; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(1) { display:flex; justify-content:flex-end; width:100% !important; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(2) { display:block; width:100% !important; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(2)::before { display:none; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(2) small { display:block; max-width:100%; line-height:1.45; overflow-wrap:anywhere; word-break:normal; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(2) small:last-of-type { margin-top:.45rem; color:var(--crm-text-muted); }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(3)::before { content:"Version"; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(4)::before { content:"Vendor"; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(5)::before { content:"Status"; }
  body[data-page="admin-modules"] .crm-admin-modules-table-card .crm-table tbody td:nth-child(6)::before { content:"Actions"; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(1)::before { content:"Name"; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(2)::before { content:"Color"; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(3) { display:block; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(3)::before { display:block; content:"Description"; margin-bottom:.25rem; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(4)::before { content:"Usage"; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(5)::before { content:"Actions"; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(3) { overflow-wrap:anywhere; word-break:normal; line-height:1.45; }

  /* Keep the API status message below the sticky topbar. */
  #crmApiStatusBar { max-width:calc(100vw - 24px); }

  /* Modal body owns scrolling and reserves space for the sticky action row. */
  .modal-dialog { max-height:calc(100dvh - var(--crm-topbar-height, 56px) - 24px); margin-top:calc(var(--crm-topbar-height, 56px) + 8px); margin-bottom:16px; }
  .modal-dialog .modal-content { max-height:calc(100dvh - var(--crm-topbar-height, 56px) - 24px); }
  .modal-dialog .modal-body { scroll-padding-block:16px calc(92px + env(safe-area-inset-bottom)); padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .modal-dialog .modal-footer { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) {
  .crm-main-wrap, .crm-content { position:relative; left:0; margin-left:0; transform:none; width:100%; max-width:100%; }
  .crm-filter-offcanvas { left:0; right:auto; width:min(420px, calc(100vw - 12px)); max-width:calc(100vw - 12px); }
  .crm-filter-offcanvas .offcanvas-body { padding-inline:16px; overflow-x:hidden; }
}
@media (max-width: 767.98px) {
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(1)::before { content:"Name" !important; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(2)::before { content:"Color" !important; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(3)::before { content:"Description" !important; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(4)::before { content:"Usage" !important; }
  body[data-page="admin-tags"] .crm-table tbody td:nth-child(5)::before { content:"Actions" !important; }
}
@media (max-width: 767.98px) {
  /* Leave a small visual buffer before the scrollable form starts so the
     first field near the fold never appears underneath the sticky footer. */
  .modal-dialog .modal-body { padding-top:40px; scroll-padding-top:40px; }
}