@layer crm-responsive {
@media screen and (max-width: 1180px) {
  body.crm-app-page dialog.crm-date-dialog.crm-dialog--solid { background: var(--crm-color-surface-strong); }
}
@media screen and (max-width: 900px) {
  body.crm-app-page .crm-topbar.crm-topbar--actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .crm-topbar--actions > .crm-topbar__actions { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .crm-topbar--actions > .crm-topbar__user { grid-column: 2; grid-row: 1; }
}
@media screen and (max-width: 560px) {
  body.crm-app-page dialog.crm-date-dialog--scrollable {
    inset: auto 0 0;
    width: 100%;
    margin: 0 auto;
    max-height: 90dvh;
    border-radius: var(--crm-dialog-radius) var(--crm-dialog-radius) 0 0;
  }
  .crm-date-dialog--scrollable > :last-child { padding-bottom: max(var(--crm-inset), env(safe-area-inset-bottom)); }
}
/*
 * ClearFlow responsive contour
 *
 * The accepted desktop composition lives in the existing domain modules.
 * This file is loaded last and only adapts that shared language below 1181px.
 * Keep page-specific mobile one-offs out of HTML: extend the primitives here.
 */

.crm-mobile-dock {
  display: none;
    border-color: var(--crm-color-border-strong);
    background: radial-gradient(circle at 50% -45%, var(--crm-color-glass-highlight), transparent 58%),
      linear-gradient(155deg, var(--crm-color-glass-elevated), var(--crm-color-glass-base));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight),
      inset 0 -1px 0 color-mix(in srgb, var(--crm-color-accent) 8%, transparent),
      var(--crm-shadow-elevated);
}

/* Mobile-only projections stay out of the accepted desktop composition. */
.crm-order-mobile-cell,
.crm-planner-summary-compact {
  display: none;
}

.crm-planner-context-source {
  display: none;
}

.crm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem var(--crm-component-inset);
  border-top: 1px solid var(--crm-component-rule);
}

.crm-pagination[hidden] {
  display: none;
}

.crm-pagination > span {
  min-width: 8rem;
  color: var(--crm-color-ink-muted);
  font-size: var(--crm-type-caption);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media screen and (max-width: 560px) {
  body:is(.crm-app-page, .crm-auth-page) .crm-choice-group {
    grid-template-columns: minmax(0, 1fr);
}
}

@media screen and (max-width: 1180px) {
  body.crm-app-page .crm-personal-appearance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--crm-component-rule);
}

  body.crm-app-page .crm-personal-appearance h3,
body.crm-app-page .crm-personal-appearance p { margin: 0; }
  body.crm-app-page .crm-personal-appearance > div:first-child > p:last-child {
    margin-block-start: 0.35rem;
    color: var(--crm-color-ink-muted);
}
  body.crm-app-page .crm-personal-appearance__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
    gap: 0.65rem;
}
  body.crm-app-page .crm-personal-appearance__controls label { display: grid; gap: 0.3rem; }
  body.crm-app-page .crm-personal-appearance__controls button { grid-column: 1 / -1; }
  body.crm-app-page .crm-personal-appearance > :is(small, p) { grid-column: 1 / -1; }


  html {
    min-width: 320px;
    scroll-padding-block: 5.5rem var(--crm-mobile-content-clearance);
}

  html.crm-mobile-menu-open,
html.crm-mobile-menu-open body {
    overflow: hidden;
}

  body,
.crm-app-page,
.crm-operations-page,
.crm-planner-page,
.crm-platform-page {
    min-width: 320px;
    max-width: 100%;
}

  body.crm-app-page {
    overflow-x: clip;
    color: var(--crm-color-ink);
    background: radial-gradient(circle at 92% 1%, var(--crm-ambient-2), transparent 34rem),
      radial-gradient(circle at 2% 10%, var(--crm-ambient-1), transparent 28rem),
      radial-gradient(circle at 77% 94%, var(--crm-ambient-3), transparent 32rem),
      linear-gradient(145deg, var(--crm-color-canvas), var(--crm-color-canvas-deep));
}

  body.crm-app-page .crm-combobox__listbox {
    max-height: min(12.5rem, 34dvh);
}

  body.crm-app-page .crm-combobox__option-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

  :where(.crm-app-page *):not(table) {
    min-inline-size: 0;
}

  :where(img, svg, video, canvas) {
    max-inline-size: 100%;
}

  :where(p, dd, td, small, label, legend) {
    overflow-wrap: anywhere;
}

  :where(h1, h2, h3, strong) {
    overflow-wrap: break-word;
    word-break: normal;
}

  .crm-desktop-gate {
    display: none;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-elevated);
}

  /* The control plane remains a deliberate desktop-only operations surface. */
  body.crm-platform-page .crm-app-shell {
    display: none;
}

  body.crm-platform-page .crm-desktop-gate {
    display: grid;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-elevated);
}

  .crm-app-shell {
    display: block;
    min-height: 100dvh;
    padding: var(--crm-mobile-edge);
}

  .crm-sidebar {
    display: none;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

  .crm-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 var(--crm-mobile-content-clearance);
}


  /* Единая область прокрутки заканчивается над dock, включая safe-area. */
  body.crm-app-page:not(.crm-planner-page):has(.crm-mobile-dock) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.crm-app-page:not(.crm-planner-page):has(.crm-mobile-dock) .crm-app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.crm-app-page:not(.crm-planner-page):has(.crm-mobile-dock) .crm-main {
    height: calc(100dvh - var(--crm-mobile-edge) - var(--crm-mobile-dock-height) - var(--crm-mobile-dock-offset) - var(--crm-space-3));
    min-height: 0;
    grid-auto-rows: max-content;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-block-end: var(--crm-space-3);
    scroll-padding-block: var(--crm-space-3);
  }

  .crm-liquid-scene {
    opacity: 0.58;
}

  .crm-topbar {
    top: var(--crm-mobile-edge);
    min-height: 3.75rem;
    gap: 0.65rem;
    padding: 0.55rem 0.6rem 0.55rem 0.8rem;
    border-radius: 1.05rem;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-topbar > :first-child {
    min-width: 0;
}

  .crm-topbar .crm-eyebrow,
.crm-topbar__date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  .crm-topbar__date {
    font-size: var(--crm-type-label);
}

  .crm-topbar__user,
.crm-account-trigger {
    max-width: min(15rem, 42vw);
}

  .crm-account-menu {
    position: fixed;
    top: calc(var(--crm-mobile-edge) + 3.95rem);
    right: var(--crm-mobile-edge);
    width: min(20rem, calc(100vw - (var(--crm-mobile-edge) * 2)));
}

  .crm-operations-head,
.crm-catalog-editor__head,
.crm-inventory-ledger__toolbar,
.crm-settings-history__head,
.crm-report-directory__header,
.crm-employee-directory__header,
.crm-access-directory__header {
    align-items: flex-start;
    gap: 1rem;
}

.crm-finance__head {
    align-items: flex-start;
    gap: 1rem;
    border-color: var(--crm-color-border);
    background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--crm-color-accent) 13%, transparent), transparent 20rem),
      linear-gradient(135deg, color-mix(in srgb, var(--crm-color-accent) 5%, var(--crm-panel-bg)), var(--crm-panel-bg));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-base);
}

.crm-directory-pane__header {
    align-items: flex-start;
    gap: 1rem;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-operations-head h1,
.crm-dashboard__intro h1,
.crm-finance__head h1,
.crm-product-hero h1,
.crm-platform-page h1 {
    font-size: var(--crm-type-page-adaptive, clamp(1.8rem, 5vw, 2.5rem));
    line-height: 1.04;
}

  .crm-operations-surface,
.crm-dashboard-panel,
.crm-finance-panel,
.crm-directory-pane,
.crm-catalog-workspace {
    border-radius: var(--crm-panel-radius);
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

.crm-settings-card,
.crm-product-hero,
.crm-platform-panel,
.crm-platform-privacy {
    border-radius: var(--crm-panel-radius);
}

  .crm-operations-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

.crm-dashboard__kpis,
.crm-finance__kpis,
.crm-metric-strip,
.crm-platform-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-product-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--crm-surface-divider-bg);
}

  .crm-operations-toolbar,
.crm-catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

.crm-finance-toolbar,
.crm-inventory-ledger__toolbar {
    align-items: stretch;
    flex-direction: column;
}

  .crm-catalog-toolbar {
    grid-template-columns: minmax(0, 1fr);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

.crm-directory-toolbar {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-catalog-toolbar__controls,
.crm-directory-toolbar__controls,
.crm-inventory-ledger__filters,
.crm-operations-toolbar__filters {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

  .crm-client-card__header {
    align-items: stretch;
    flex-direction: column;
}

  .crm-client-card__actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

  /*
   * Printed-document actions are a responsive component in their own right.
   * The desktop module intentionally stops at 1181px, so tablets need the
   * complete layout here instead of inheriting the generic inline button.
   */
  .crm-work-order-summary__documents {
    display: grid;
    gap: 0.6rem;
    padding: clamp(1rem, 2vw, 1.3rem);
    border-block-start: 1px solid var(--crm-component-rule);
}

  .crm-work-order-summary__documents > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 0.55rem;
}

  .crm-work-order-summary__documents .crm-document-action {
    display: grid;
    width: auto;
    min-width: 0;
    min-height: 3.8rem;
    align-content: center;
    justify-items: start;
    gap: 0.18rem;
    padding: 0.72rem 0.82rem;
    text-align: start;
    white-space: normal;
}

  .crm-work-order-summary__documents .crm-document-action :is(strong, small) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

  .crm-work-order-summary__documents .crm-document-action strong {
    font-size: var(--crm-type-label);
    line-height: 1.2;
}

  .crm-work-order-summary__documents .crm-document-action small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.35;
}

  .crm-client-card__actions .crm-button {
    width: 100%;
    min-width: 0;
    white-space: normal;
}

  .crm-operations-toolbar__filters,
.crm-catalog-toolbar__controls,
.crm-directory-toolbar__controls,
.crm-inventory-ledger__filters,
.crm-settings-history__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-report-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-theme-picker__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

  .crm-form-grid--three,
.crm-dialog-field-grid,
.crm-directory-form-grid,
.crm-employee-fields,
.crm-catalog-form__grid,
.crm-planner-form-grid,
.crm-waitlist-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-form-grid__wide,
.crm-planner-form-grid__wide,
.crm-waitlist-form-grid__wide,
.crm-catalog-form__grid--identity {
    grid-column: 1 / -1;
}

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

  .crm-waitlist-list-panel,
.crm-waitlist-form {
    padding: 0.85rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-waitlist-empty {
    min-height: 6rem;
}

  input,
select,
textarea {
    max-inline-size: 100%;
}

  button,
.crm-button {
    max-inline-size: 100%;
    min-block-size: var(--crm-touch-target);
}

  /*
   * Text actions keep their restrained visual treatment while exposing a
   * dependable finger-sized hit area. Keep this as one shared adaptive
   * primitive instead of growing page-specific link buttons.
   */
  :is(
    .crm-touch-action,
    .crm-auth-links a,
    .crm-work-order-head .crm-back-link,
    .crm-dashboard__format a,
    .crm-dashboard-panel > header a,
    .crm-finance-panel > header a
  ) {
    display: inline-flex;
    min-block-size: max(44px, var(--crm-touch-target));
    align-items: center;
    justify-content: center;
    padding-inline: 0.38rem;
}

  input:not([type="checkbox"]):not([type="radio"]) {
    font-size: max(1rem, var(--crm-type-control));
}

  /* Adapt geometry without resetting component surfaces or select indicators. */
  select,
textarea {
    font-size: max(1rem, var(--crm-type-control));
}

  /* Native current-value text must fit the adaptive control's intrinsic
     geometry. WebKit's default pre can overflow its parent even when the
     select border box fits. Preserve full text through wrapping, not clipping. */
  body.crm-app-page :is(.crm-main, dialog) select:not([multiple]):not([size]) {
    white-space: normal;
}

  .crm-section-tabs,
.crm-settings-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.35rem;
}

  .crm-section-tabs > *,
.crm-settings-tabs > * {
    min-height: var(--crm-touch-target);
    justify-content: center;
    text-align: center;
}

  /* Dashboard */
  .crm-dashboard__topbar,
.crm-dashboard__intro,
.crm-dashboard-period {
    gap: 1rem;
}

  .crm-dashboard__actions {
    flex: 0 0 auto;
}

  .crm-dashboard__intro {
    grid-template-columns: minmax(0, 1fr) auto;
}

  .crm-dashboard-period {
    align-items: stretch;
    flex-direction: column;
}

  .crm-dashboard-period__presets {
    display: grid;
    grid-template-columns: repeat(var(--crm-mobile-dock-count, 5), minmax(0, 1fr));
}

  .crm-dashboard-period__custom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

  .crm-dashboard__insights,
.crm-dashboard__primary,
.crm-dashboard__secondary,
.crm-deadlines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-dashboard__insights > :last-child,
.crm-dashboard__secondary > :last-child {
    grid-column: 1 / -1;
}

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

  /* Orders, clients and work order */
  .crm-orders-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

.crm-orders-period {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

.crm-orders-custom-period {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-client-workspace,
.crm-settings-layout,
.crm-catalog-layout,
.crm-work-order-layout {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-client-index {
    position: static;
    max-height: none;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

.crm-settings-side {
    position: static;
    max-height: none;
}

.crm-category-rail {
    position: static;
    max-height: none;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-client-list,
.crm-category-manager__list {
    max-height: min(26rem, 50dvh);
    overflow-y: auto;
}

  .crm-client-loyalty {
    grid-template-columns: minmax(0, 1fr);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

.crm-client-common-grid,
.crm-client-personal-grid,
.crm-client-legal-grid,
.crm-vehicle-picker__controls,
.crm-order-checklists__grid,
.crm-payment-summary,
.crm-payment-entry,
.crm-order-discount,
.crm-line-discount-grid,
.crm-control-inspection__fields,
.crm-item-payroll-editor__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-work-order-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-work-order-head {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr);
}

  .crm-work-order-title-row {
    flex-wrap: wrap;
}

  .crm-work-order-stage {
    width: 100%;
}

  .crm-order-item,
.crm-item-allocation,
.crm-payment-batch-row {
    min-width: 0;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

.crm-service-line,
.crm-contractor-allocation-row {
    min-width: 0;
}

  .crm-order-item__custom {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

  /* Catalog, warehouse and directories */
  .crm-catalog-dialog,
.crm-category-dialog,
.crm-inventory-dialog,
.crm-inventory-document-dialog,
.crm-inventory-movement-dialog,
.crm-make-manager-dialog,
.crm-employee-dialog,
.crm-structure-dialog,
.crm-obligation-dialog,
.crm-payout-dialog,
.crm-expense-dialog,
.crm-context-dialog,
.crm-waitlist-dialog {
    width: min(48rem, calc(100vw - (var(--crm-mobile-edge) * 2)));
    max-width: calc(100vw - (var(--crm-mobile-edge) * 2));
    max-height: calc(100dvh - (var(--crm-mobile-edge) * 2));
    margin: auto;
}

.crm-date-dialog,
.crm-demo-dialog {
    width: min(48rem, calc(100vw - (var(--crm-mobile-edge) * 2)));
    max-width: calc(100vw - (var(--crm-mobile-edge) * 2));
    max-height: calc(100dvh - (var(--crm-mobile-edge) * 2));
    margin: auto;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

  body.crm-planner-page dialog.crm-demo-dialog.crm-planner-detail-dialog {
    width: min(38rem, calc(100vw - (var(--crm-mobile-edge) * 2)));
}

  :where(.crm-catalog-dialog, .crm-category-dialog, .crm-inventory-dialog, .crm-inventory-document-dialog, .crm-inventory-movement-dialog, .crm-make-manager-dialog, .crm-employee-dialog, .crm-structure-dialog, .crm-obligation-dialog, .crm-payout-dialog, .crm-expense-dialog, .crm-date-dialog, .crm-context-dialog, .crm-demo-dialog, .crm-waitlist-dialog) > :where(form, section, .crm-demo-dialog__content) {
    max-height: calc(100dvh - (var(--crm-mobile-edge) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;
}

  .crm-service-material-row {
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.45fr) auto;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

.crm-inventory-movement-line {
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.45fr) auto;
}

  .crm-checklist-directory__grid,
.crm-settings-structure__grid,
.crm-settings-history__grid,
.crm-obligation-overview-grid,
.crm-finance__grid,
.crm-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-access-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

  .crm-access-matrix-scroll {
    max-width: 100%;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

.crm-table-scroll,
.crm-catalog-table-region {
    max-width: 100%;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

.crm-inventory-ledger__table {
    max-width: 100%;
}

  /* Finances */
  .crm-finance-toolbar {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-finance-period,
.crm-finance-toolbar__summary,
.crm-finance-services,
.crm-finance-obligations-overview,
.crm-finance-settlements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  /* Planner: its grid composition is reduced by planner.js on narrow screens. */
  .crm-planner-workspace {
    min-height: calc(100dvh - (var(--crm-mobile-edge) * 2) - var(--crm-mobile-content-clearance));
    border-radius: var(--crm-panel-radius);
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-planner-page {
    height: 100dvh;
    overflow: hidden;
}

  .crm-planner-page .crm-app-shell {
    height: 100dvh;
}

  .crm-planner-page .crm-main {
    height: calc(100dvh - (var(--crm-mobile-edge) * 2));
    min-height: 0;
    padding-bottom: var(--crm-mobile-content-clearance);
}

  .crm-planner-scroll {
    min-height: 0;
    overflow-x: auto;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-planner-grid {
    min-width: 100%;
    grid-template-columns: 4.25rem repeat(var(--crm-planner-bay-count), minmax(0, 1fr));
}

  .crm-planner-dock {
    align-items: stretch;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

.crm-planner-dock__primary,
.crm-planner-dock__secondary {
    align-items: stretch;
}

  .crm-planner-dock__primary,
.crm-planner-dock__secondary {
    flex-direction: column;
}

  .crm-planner-dock__secondary {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-planner-gridbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.35rem 0.75rem;
}

  .crm-planner-gridbar p {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

  .crm-planner-feedback {
    grid-column: 1 / -1;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-align: start;
}

  .crm-planner-commandbar__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

  .crm-day-navigation {
    grid-column: 1 / -1;
}

  .crm-planner-period-controls {
    flex: none;
    width: 100%;
    min-inline-size: 0;
}

  .crm-planner-date-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
}

  .crm-planner-mobile-bays {

    position: sticky;
    z-index: 6;
    top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--crm-component-rule);

    border-color: var(--crm-component-rule);
    background: var(--crm-panel-bg);
}

  .crm-planner-mobile-bay {
    display: flex;
    min-height: var(--crm-touch-target);
    min-inline-size: 0;
    max-inline-size: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 8px 12px;
    border: 1px solid var(--crm-action-secondary-border);
    border-radius: 999px;
    color: var(--crm-color-ink-soft);
    background: var(--crm-action-secondary-bg);
    font: 650 var(--crm-type-label) / 1 var(--crm-font-sans);
    white-space: normal;
}

  .crm-planner-mobile-bay strong {
    font: inherit;
}

  .crm-planner-mobile-bay span {
    display: none;
    min-width: 1.25rem;
    min-height: 1.25rem;
    place-items: center;
    border-radius: 999px;


    font-size: var(--crm-type-caption);
    font-variant-numeric: tabular-nums;
    color: var(--crm-color-ink-muted);
    background: var(--crm-color-surface);
}

  .crm-planner-mobile-bay[aria-pressed="true"] {
    border-color: var(--crm-color-border-cool);
    color: var(--crm-color-accent-deep);
    background: var(--crm-color-accent-soft);
}

  /* Print preview keeps an A4 canvas and scales it inside the viewport. */
  .crm-print-builder {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-print-controls {
    position: static;
}

  .crm-print-stage,
.crm-print-canvas {
    max-width: 100%;
    overflow: hidden;
}

  .crm-print-head {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
}

  .crm-print-head__actions {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-print-head__actions .crm-button {
    width: 100%;
}

  /* Fixed, role-aware mobile navigation island. */
  .crm-mobile-dock {
    position: fixed;
    z-index: var(--crm-z-sticky);
    right: max(var(--crm-mobile-edge), env(safe-area-inset-right));
    bottom: var(--crm-mobile-dock-offset);
    left: max(var(--crm-mobile-edge), env(safe-area-inset-left));
    display: grid;
    width: min(40rem, calc(100vw - (var(--crm-mobile-edge) * 2)));
    height: var(--crm-mobile-dock-height);
    grid-template-columns: repeat(var(--crm-mobile-dock-count, 5), minmax(0, 1fr));
    gap: 0.2rem;
    margin-inline: auto;
    padding: 0.42rem;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: 1.45rem;


    backdrop-filter: blur(28px) saturate(165%);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
    animation: crm-mobile-dock-enter 280ms cubic-bezier(0.22, 0.82, 0.24, 1) both;
    border-color: var(--crm-color-border-strong);
    background: radial-gradient(circle at 50% -45%, var(--crm-color-glass-highlight), transparent 58%),
      linear-gradient(155deg, var(--crm-color-glass-elevated), var(--crm-color-glass-base));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight),
      inset 0 -1px 0 color-mix(in srgb, var(--crm-color-accent) 8%, transparent),
      var(--crm-shadow-elevated);
}

  .crm-mobile-dock::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;

    content: "";
    pointer-events: none;
    background: linear-gradient(110deg, var(--crm-color-glass-highlight), transparent 35% 68%, var(--crm-color-accent-soft));
}

  @keyframes crm-mobile-dock-enter {
    from {
      opacity: 0;
      transform: translateY(0.7rem) scale(0.985);
}

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
}
  }

  .crm-mobile-dock__item {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.3rem 0.2rem;
    border: 0;
    border-radius: 1rem;
    color: var(--crm-color-ink-muted);
    background: transparent;
    font: 590 var(--crm-type-label) / 1 var(--crm-font-sans);
    text-decoration: none;
    transition: color 180ms var(--crm-ease), transform var(--crm-motion-press) var(--crm-ease);
    -webkit-tap-highlight-color: transparent;
}

  .crm-mobile-dock__item::before {
    position: absolute;
    z-index: -1;
    inset: 0.08rem;
    border: 1px solid color-mix(in srgb, var(--crm-color-accent) 12%, transparent);
    border-radius: 0.94rem;
    opacity: 0;


    content: "";
    transform: scale(0.84);
    transition: opacity 180ms var(--crm-ease), transform 240ms cubic-bezier(0.2, 0.82, 0.24, 1);
    background: radial-gradient(circle at 24% 8%, var(--crm-color-glass-highlight-strong), transparent 48%),
      linear-gradient(145deg, var(--crm-color-glass-elevated), color-mix(in srgb, var(--crm-color-accent) 11%, var(--crm-color-surface-strong)));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-interactive);
}

  .crm-mobile-dock__item svg {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    box-sizing: content-box;
    padding: 0.14rem;
    border-radius: 0.55rem;
    fill: none;
    color: currentColor;
    transition: color 180ms var(--crm-ease), background 180ms var(--crm-ease), box-shadow 180ms var(--crm-ease), transform 220ms cubic-bezier(0.2, 0.82, 0.24, 1);
}

  .crm-mobile-dock__item.is-current {
    color: var(--crm-color-accent-deep);
}

  .crm-mobile-dock__item.is-current::before {
    opacity: 1;
    transform: scale(1);
}

  .crm-mobile-dock__item.is-current svg {
    color: var(--crm-color-on-accent);
    background: linear-gradient(145deg, var(--crm-color-accent), var(--crm-color-accent-deep));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), 0 0.25rem 0.62rem color-mix(in srgb, var(--crm-color-accent) 24%, transparent);
    transform: translateY(-0.04rem) scale(1.04);
}

  .crm-mobile-dock__item:active {
    transform: scale(0.96);
}

  .crm-mobile-dock__item:focus-visible {
    outline: 3px solid var(--crm-color-focus);
    outline-offset: -2px;
}

  @media (hover: hover) and (pointer: fine) {
    .crm-mobile-dock__item:not(.is-current):hover {
      color: var(--crm-color-ink-soft);
      transform: translateY(-0.06rem);
}
  }

  .crm-mobile-menu-dialog {
    position: fixed;
    z-index: var(--crm-z-dialog);
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 0;
    background: transparent;
}

  .crm-mobile-menu-dialog::backdrop {
    background: var(--crm-color-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

  .crm-mobile-menu-sheet {
    position: fixed;
    right: max(var(--crm-mobile-edge), env(safe-area-inset-right));
    bottom: calc(var(--crm-mobile-dock-height) + var(--crm-mobile-dock-offset) + 0.55rem);
    left: max(var(--crm-mobile-edge), env(safe-area-inset-left));
    width: min(40rem, calc(100vw - (var(--crm-mobile-edge) * 2)));
    max-height: min(70dvh, 39rem);
    margin-inline: auto;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: 1.55rem;
    opacity: 0;


    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transform: translateY(1rem) scale(0.985);
    transform-origin: 15% 100%;
    transition: opacity 180ms var(--crm-ease), transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

  .crm-mobile-menu-sheet:focus {
    outline: none;
}

  .crm-mobile-menu-dialog.is-visible .crm-mobile-menu-sheet {
    opacity: 1;
    transform: translateY(0) scale(1);
}

  .crm-mobile-menu-dialog.is-closing .crm-mobile-menu-sheet {
    opacity: 0;
    transform: translateY(0.55rem) scale(0.99);
}

  .crm-mobile-menu-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto var(--crm-touch-target);
    grid-template-areas: "workspace switch close" "account account account" "actions actions actions";
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    padding: 0.72rem;
    border: 1px solid var(--crm-color-border-cool);
    border-radius: 1.15rem;
    border-color: var(--crm-color-border-cool);
    background: linear-gradient(135deg, var(--crm-color-glass-elevated), var(--crm-color-accent-soft));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight);
}

  .crm-mobile-menu-context__workspace { grid-area: workspace; }
  .crm-mobile-menu-context__switch { grid-area: switch; justify-self: start; }
  .crm-mobile-menu-context__account { grid-area: account; }
  .crm-mobile-menu-account-actions { grid-area: actions; }

  .crm-mobile-menu-sheet__close {
    width: var(--crm-touch-target);
    height: var(--crm-touch-target);
    flex: 0 0 auto;
    border: 1px solid var(--crm-action-secondary-border);
    border-radius: 50%;
    color: var(--crm-color-ink-soft);
    background: var(--crm-action-secondary-bg);
    box-shadow: var(--crm-action-secondary-shadow);
    font: 400 1.45rem / 1 var(--crm-font-sans);
    pointer-events: auto;
    grid-area: close;
    justify-self: end;
    align-self: start;
}

  .crm-mobile-menu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding-top: 0;
}

  .crm-mobile-menu-list__item {
    display: grid;
    min-height: 3.25rem;
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.58rem 0.68rem;
    border: 1px solid var(--crm-action-secondary-border);
    border-radius: 1rem;


    text-decoration: none;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-mobile-menu-list__item > span {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    font-variant-numeric: tabular-nums;
}

  .crm-mobile-menu-list__item strong {
    font-size: var(--crm-type-label);
    font-weight: 620;
}

  .crm-mobile-menu-list__item svg {
    width: 1rem;
    height: 1rem;
}

  .crm-mobile-menu-list__item.is-current {
    border-color: var(--crm-color-border-cool);
    color: var(--crm-color-accent-deep);
    background: var(--crm-color-accent-soft);
}

  .crm-mobile-menu-sheet__version {
    margin: 0.8rem 0 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    text-align: center;
}

  .crm-mobile-menu-context[hidden] {
    display: none;
}

  .crm-mobile-menu-context__workspace {
    min-width: 0;
    align-self: center;
}

  .crm-mobile-menu-context__location,
.crm-mobile-menu-context__date {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  .crm-mobile-menu-context__location {
    color: var(--crm-color-accent-deep);
    font-size: var(--crm-type-label);
    font-weight: 690;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

  .crm-mobile-menu-context__date {
    margin-top: 0.2rem;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
}

  .crm-mobile-menu-context__switch {
    min-height: var(--crm-touch-target);
    padding: 0.55rem 0.72rem;
    border: 1px solid var(--crm-action-secondary-border);
    border-radius: 0.85rem;
    color: var(--crm-color-accent-deep);
    background: var(--crm-action-secondary-bg);
    box-shadow: var(--crm-action-secondary-shadow);
    font: 650 var(--crm-type-label) / 1 var(--crm-font-sans);
}

  .crm-mobile-menu-context__account {
    display: grid;
    min-height: 3.35rem;
    grid-column: 1 / -1;
    grid-template-columns: 2.35rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.46rem 0.58rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: 0.95rem;


    font: inherit;
    text-align: start;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-mobile-menu-context__account:disabled {
    opacity: 1;
}

  .crm-mobile-menu-context__account svg {
    width: 1rem;
    height: 1rem;
    color: var(--crm-color-ink-muted);
    transition: transform var(--crm-motion-fast) var(--crm-ease);
}

  .crm-mobile-menu-context__account[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

  .crm-mobile-menu-context__avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.78rem;
    color: var(--crm-color-on-accent);
    background: var(--crm-brand-mark-bg);
    box-shadow: var(--crm-brand-mark-shadow);
    font-size: var(--crm-type-label);
    font-weight: 720;
}

  .crm-mobile-menu-context__identity {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

  .crm-mobile-menu-context__identity :is(strong, small) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  .crm-mobile-menu-context__identity strong {
    font-size: var(--crm-type-label);
    font-weight: 650;
}

  .crm-mobile-menu-context__identity small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
}

  .crm-mobile-menu-account-actions {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.32rem;
}

  .crm-mobile-menu-account-actions[hidden] {
    display: none;
}

  .crm-mobile-menu-account-actions__item {
    display: grid;
    min-height: var(--crm-touch-target);
    align-content: center;
    gap: 0.08rem;
    padding: 0.52rem 0.68rem;
    border: 0;
    border-radius: 0.78rem;


    font: inherit;
    text-align: start;
    text-decoration: none;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-mobile-menu-account-actions__item strong {
    font-size: var(--crm-type-caption);
    font-weight: 630;
}

  .crm-mobile-menu-account-actions__item small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.35;
}

}

@media screen and (max-width: 900px) {
  .crm-app-shell {
    padding-inline: var(--crm-mobile-edge);
}

  .crm-topbar__user,
.crm-account-trigger {
    max-width: 3.15rem;
    padding-inline: 0.3rem;
}

  .crm-topbar__user > span:last-child,
.crm-account-trigger__copy,
.crm-account-trigger__chevron {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

  .crm-dashboard__topbar .crm-dashboard__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
}

  .crm-dashboard__topbar {
    align-items: stretch;
    flex-direction: column;
    padding-inline-end: 0.6rem;
}

  .crm-dashboard__topbar > :first-child {
    padding-inline-end: 3.65rem;
}

  .crm-dashboard__topbar .crm-account-trigger {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 3rem;
    height: 3rem;
    min-height: 3rem;
}

  .crm-dashboard__intro {
    align-items: stretch;
    flex-direction: column;
}

  .crm-dashboard__intro > div:first-child,
.crm-dashboard__format {
    flex: 0 1 auto;
}

  /*
   * Tablet period grammar.
   * The desktop component is a grid, so changing flex-direction never stacked
   * it. Keep presets and exact dates in two calm rows before the phone layout
   * takes over below 560px.
   */
  .crm-dashboard-period {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-dashboard-period__presets,
.crm-dashboard-period__custom {
    width: 100%;
}

  :is(.crm-dashboard-period__custom, .crm-finance-period) input[type="date"] {
    min-width: 0;
    padding-inline: 0.58rem var(--crm-input-padding-end, 0.32rem);
    font-size: var(--crm-type-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.012em;
}

  :is(.crm-dashboard-period__custom, .crm-finance-period) input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
}

  :is(.crm-dashboard-period__custom, .crm-finance-period) input[type="date"]::-webkit-calendar-picker-indicator {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin: 0;
    padding: 0;
}

  .crm-dashboard__intro > div:first-child,
.crm-dashboard__intro h1 {
    width: 100%;
}

  .crm-dashboard__format {
    min-width: 0;
    padding-block-start: 0.85rem;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--crm-component-rule);
    border-inline-start: 0;
    text-align: start;
}

  .crm-operations-head,
.crm-catalog-editor__head,
.crm-inventory-ledger__toolbar,
.crm-settings-history__head,
.crm-report-directory__header,
.crm-employee-directory__header,
.crm-access-directory__header {
    align-items: stretch;
    flex-direction: column;
}

.crm-finance__head {
    align-items: stretch;
    flex-direction: column;
    border-color: var(--crm-color-border);
    background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--crm-color-accent) 13%, transparent), transparent 20rem),
      linear-gradient(135deg, color-mix(in srgb, var(--crm-color-accent) 5%, var(--crm-panel-bg)), var(--crm-panel-bg));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-base);
}

.crm-directory-pane__header {
    align-items: stretch;
    flex-direction: column;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-operations-head > :is(a, button, .crm-button),
.crm-finance__head > :is(a, button, .crm-button) {
    width: 100%;
}

  .crm-form-section__header,
.crm-panel__header {
    flex-wrap: wrap;
}

  /* Секции самостоятельной формы сохраняют границы и ритм на узком экране. */
  .crm-section-stack {
    display: grid;
    gap: var(--crm-space-3);
  }

  .crm-section-stack > :is(section, fieldset) {
    padding: var(--crm-inset);
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-panel-radius);
    background: var(--crm-subpanel-bg);
  }

  .crm-client-order-list,
  .crm-money-history {
    gap: var(--crm-space-3);
  }

  .crm-client-order-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .crm-client-order-row > .crm-table-document {
    grid-column: 1 / -1;
  }


  .crm-category-rail {
    flex-wrap: wrap;
    overflow-x: visible;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-dashboard__intro,
.crm-dashboard__insights,
.crm-dashboard__primary,
.crm-dashboard__secondary,
.crm-deadlines,
.crm-finance__grid,
.crm-checklist-directory__grid,
.crm-settings-structure__grid,
.crm-settings-history__grid,
.crm-obligation-overview-grid,
.crm-platform-grid,
.crm-work-order-head {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-theme-picker__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

  .crm-dashboard__insights > :last-child,
.crm-dashboard__secondary > :last-child {
    grid-column: auto;
}

  .crm-dashboard__format {
    justify-self: stretch;
    text-align: left;
}

  .crm-reconciliation__grid,
.crm-dashboard__kpis,
.crm-finance__kpis,
.crm-metric-strip,
.crm-platform-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-operations-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

.crm-product-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--crm-surface-divider-bg);
}

  .crm-orders-filterbar,
.crm-client-loyalty {
    grid-template-columns: minmax(0, 1fr);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

.crm-orders-custom-period,
.crm-finance-period,
.crm-finance-toolbar__summary,
.crm-finance-services,
.crm-finance-obligations-overview,
.crm-finance-settlements,
.crm-client-common-grid,
.crm-client-personal-grid,
.crm-client-legal-grid,
.crm-order-checklists__grid,
.crm-payment-summary,
.crm-payment-entry,
.crm-order-discount,
.crm-line-discount-grid,
.crm-control-inspection__fields,
.crm-item-payroll-editor__grid {
    grid-template-columns: minmax(0, 1fr);
}

.crm-work-order-summary {
    grid-template-columns: minmax(0, 1fr);
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-orders-filterbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.65rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-orders-period {
    display: grid;
    width: 100%;
    max-width: none;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.18rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-orders-period button {
    width: 100%;
    min-width: 0;
    min-height: var(--crm-touch-target);
    padding-inline: 0.35rem;
    line-height: 1.2;
}

  .crm-orders-page-size {
    display: grid;
    width: min(100%, 12rem);
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: auto 4.75rem;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
}

  .crm-orders-page-size select {
    width: 100%;
    min-width: 0;
}

  .crm-orders-custom-period {
    display: grid;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.55rem;
}



  .crm-orders-custom-period :is(label, input) {
    width: 100%;
    min-width: 0;
}

  .crm-table-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

  .crm-section-tabs,
.crm-settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-access-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-service-payroll__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-service-branch .crm-catalog-form__check {
    grid-column: 1 / -1;
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-catalog-form__check > span {
    overflow-wrap: normal;
    word-break: normal;
}

  .crm-logo-controls > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--crm-space-2);
}

  .crm-logo-controls > div > :is(.crm-button, .crm-text-button) {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: var(--crm-touch-target);
    align-items: center;
    justify-content: center;
    padding-inline: var(--crm-space-3);
    text-align: center;
    white-space: normal;
}

  /* A service line becomes a readable form card instead of a clipped desktop row. */
  .crm-order-items-head {
    display: none;
}

  .crm-order-item {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: 0.65rem;
    padding: 0.75rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-order-item__service,
.crm-order-item__assignment {
    grid-column: 1 / -1;
    width: 100%;
}

  .crm-order-item__service {
    padding-inline-end: 3.2rem;
}

  .crm-order-item__quantity,
.crm-order-item__unit-price,
.crm-order-item__unit-cost {
    grid-column: span 2;
}

  .crm-order-item__total,
.crm-order-item__profit {
    grid-column: span 3;
}

  .crm-order-item > label:not(.crm-order-item__service) {
    display: grid;
    align-content: start;
    gap: 0.3rem;
}

  .crm-order-item > label:not(.crm-order-item__service) > .crm-visually-hidden {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    font-weight: 600;
    white-space: normal;
}

  .crm-order-item > output {
    display: grid;
    min-height: var(--crm-control-height);
    align-content: center;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    overflow: visible;
    border-radius: 0.8rem;

    text-align: start;
    text-overflow: clip;
    white-space: normal;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink-soft);
    background: var(--crm-operations-dense-bg);
}

  .crm-order-item > output::before {
    content: attr(data-mobile-label);
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    font-weight: 560;
}

  .crm-order-item > [data-remove-item] {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
}

  .crm-employee-choice-grid,
.crm-item-allocation__fields,
.crm-line-discount-grid,
.crm-item-payroll-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-contractor-allocation-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-payment-batch-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-contractor-allocation-row > :first-child,
.crm-payment-batch-row > :first-child,
.crm-payment-batch-row__payer {
    grid-column: 1 / -1;
}

  .crm-payment-batch-row__payer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  /* Wide data tables become labelled cards; source order and semantics stay intact. */
  .crm-data-table,
.crm-table,
.crm-catalog-table,
.crm-services-table,
.crm-employee-table,
.crm-report-table,
.crm-inventory-ledger__table {
    display: block;
    width: 100%;
    min-width: 0;
}

  .crm-data-table thead,
.crm-table thead,
.crm-catalog-table thead,
.crm-services-table thead,
.crm-employee-table thead,
.crm-report-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    color: var(--crm-color-ink-muted);
    background: var(--crm-operations-dense-bg);
}

.crm-inventory-ledger__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

  .crm-data-table tbody,
.crm-data-table tr,
.crm-table tbody,
.crm-table tr,
.crm-catalog-table tbody,
.crm-catalog-table tr,
.crm-services-table tbody,
.crm-services-table tr,
.crm-employee-table tbody,
.crm-employee-table tr,
.crm-report-table tbody,
.crm-report-table tr,
.crm-inventory-ledger__table tbody,
.crm-inventory-ledger__table tr,
.crm-inventory-ledger__table td {
    display: block;
    width: 100%;
}

.crm-data-table td,
.crm-table td,
.crm-catalog-table td,
.crm-services-table td,
.crm-employee-table td,
.crm-report-table td {
    display: block;
    width: 100%;
    border-color: var(--crm-component-rule);
}

  :where(.crm-data-table, .crm-table, .crm-catalog-table, .crm-services-table, .crm-employee-table, .crm-report-table, .crm-inventory-ledger__table) tbody {
    display: grid;
    gap: 0.65rem;
}

  .crm-data-table tbody tr,
.crm-table tbody tr,
.crm-catalog-table tbody tr,
.crm-services-table tbody tr,
.crm-employee-table tbody tr,
.crm-report-table tbody tr {
    overflow: hidden;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface-strong);
}

.crm-inventory-ledger__table tbody tr {
    overflow: hidden;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);
    background: var(--crm-subpanel-bg);
}

  .crm-data-table tbody td,
.crm-table tbody td,
.crm-catalog-table tbody td,
.crm-services-table tbody td,
.crm-employee-table tbody td,
.crm-report-table tbody td {
    display: grid;
    min-height: 2.75rem;
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.68rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--crm-component-rule);
    text-align: right;
    color: var(--crm-color-ink-soft);
    background: transparent;
}

.crm-inventory-ledger__table tbody td {
    display: grid;
    min-height: 2.75rem;
    grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.68rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--crm-component-rule);
    text-align: right;
}

  :where(.crm-data-table, .crm-table, .crm-catalog-table, .crm-services-table, .crm-employee-table, .crm-report-table, .crm-inventory-ledger__table) tbody td:last-child {
    border-bottom: 0;
}

  :where(.crm-data-table, .crm-table, .crm-catalog-table, .crm-services-table, .crm-employee-table, .crm-report-table, .crm-inventory-ledger__table) tbody td::before {
    content: attr(data-label);
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    font-weight: 640;
    text-align: left;
}

  :where(.crm-data-table, .crm-table, .crm-catalog-table, .crm-services-table, .crm-employee-table, .crm-report-table, .crm-inventory-ledger__table) tbody td:empty {
    display: none;
}

  /* Orders use a purpose-built touch card, never the generic table-to-rows fallback. */
  .crm-orders-page .crm-order-row {
    overflow: visible;
    border: 0;
    background: transparent;
}

  .crm-orders-page .crm-order-row > .crm-order-desktop-cell {
    display: none;
}

  .crm-orders-page .crm-order-row > .crm-order-mobile-cell {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    text-align: start;
}

  .crm-orders-page .crm-order-row > .crm-order-mobile-cell::before {
    content: none;
}

  .crm-order-mobile-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
    box-shadow: var(--crm-action-secondary-shadow);
    text-align: start;
    text-decoration: none;
    transition: border-color var(--crm-motion-fast) var(--crm-ease), box-shadow var(--crm-motion-fast) var(--crm-ease), transform var(--crm-motion-fast) var(--crm-ease);
}

  .crm-order-mobile-card:active {
    transform: scale(0.992);
}

  .crm-order-mobile-card:focus-visible {
    outline: 3px solid var(--crm-color-focus);
    outline-offset: 2px;
}

  .crm-order-mobile-card__header,
.crm-order-mobile-card__document,
.crm-order-mobile-card__identity,
.crm-order-mobile-card__service {
    display: grid;
    min-width: 0;
}

.crm-order-mobile-card__facts > span {
    display: grid;
    min-width: 0;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-order-mobile-card__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.65rem;
}

  .crm-order-mobile-card__document,
.crm-order-mobile-card__identity {
    gap: 0.16rem;
}

  .crm-order-mobile-card__document strong {
    font-size: var(--crm-type-section);
    font-weight: 680;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

  .crm-order-mobile-card__document small,
.crm-order-mobile-card__identity small,
.crm-order-mobile-card__service > span,
.crm-order-mobile-card__facts :is(small, span) {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    line-height: 1.4;
}

  .crm-order-mobile-card__identity strong,
.crm-order-mobile-card__service strong {
    font-size: var(--crm-type-body);
    font-weight: 640;
    line-height: 1.32;
}

  .crm-order-mobile-card__service {
    gap: 0.18rem;
    padding-block-start: 0.72rem;
    border-block-start: 1px solid var(--crm-component-rule);
}

  .crm-order-mobile-card__service > small,
.crm-order-mobile-card__facts small {
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    font-weight: 590;
}

  .crm-order-mobile-card__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

  .crm-order-mobile-card__facts > span {
    align-content: start;
    gap: 0.16rem;
    min-height: 4.15rem;
    padding: 0.62rem;
    border-radius: 0.86rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-order-mobile-card__facts strong {
    font-size: var(--crm-type-label);
    font-weight: 680;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

  .crm-order-mobile-card__open {
    display: flex;
    min-height: var(--crm-touch-target);
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.82rem;
    color: var(--crm-color-accent-deep);
    background: var(--crm-color-accent-soft);
    font-size: var(--crm-type-label);
    font-weight: 650;
}

  .crm-order-item__service,
.crm-order-item__custom,
.crm-inventory-movement-line {
    grid-template-columns: minmax(0, 1fr);
}

.crm-service-material-row {
    grid-template-columns: minmax(0, 1fr);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-service-material-row > :last-child,
.crm-inventory-movement-line > :last-child {
    justify-self: end;
}

  .crm-item-allocation > label {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

  .crm-planner-disclosure {
    position: static;
}

  .crm-planner-commandbar__actions {
    position: relative;
}

  .crm-planner-disclosure__panel {
    position: absolute;
    z-index: 170;
    right: 0;
    bottom: calc(100% + 0.55rem);
    left: 0;
    width: auto;
    max-height: min(66dvh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink-soft);
    background: var(--crm-operations-dense-bg);
}

  .crm-planner-commandbar__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media screen and (max-width: 900px) {
  body.crm-auth-page {
    min-width: 320px;
    min-height: 100dvh;
    padding: var(--crm-mobile-edge);
    place-items: start center;
    color: var(--crm-color-ink);
    background: radial-gradient(circle at 92% 1%, var(--crm-ambient-2), transparent 34rem),
      radial-gradient(circle at 2% 10%, var(--crm-ambient-1), transparent 28rem),
      radial-gradient(circle at 77% 94%, var(--crm-ambient-3), transparent 32rem),
      linear-gradient(145deg, var(--crm-color-canvas), var(--crm-color-canvas-deep));
}

  .crm-auth-shell,
body.crm-auth-page[data-auth-mode="register"] .crm-auth-shell {
    width: 100%;
    min-height: calc(100dvh - (var(--crm-mobile-edge) * 2));
    grid-template-columns: minmax(0, 1fr);
    border-radius: 1.5rem;
}

  .crm-auth-intro {
    min-height: 13rem;
    justify-content: flex-start;
    padding: 1.5rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--crm-component-rule);
    border-color: var(--crm-color-border);
    color: var(--crm-color-ink);
    background: var(--crm-panel-bg);
}

body.crm-auth-page[data-auth-mode="register"] .crm-auth-intro {
    min-height: 13rem;
    justify-content: flex-start;
    padding: 1.5rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--crm-component-rule);
}

  .crm-auth-intro__copy,
body.crm-auth-page[data-auth-mode="register"] .crm-auth-intro__copy {
    margin-top: 1.5rem;
}

  .crm-auth-intro h1,
body.crm-auth-page[data-auth-mode="register"] .crm-auth-intro h1 {
    max-width: 18ch;
    margin: 0.45rem 0 0.6rem;
    font-size: clamp(1.75rem, 6vw, 2.35rem);
}

  .crm-auth-intro__facts,
body.crm-auth-page[data-auth-mode="register"] .crm-auth-intro__facts {
    margin-top: 1rem;
    padding-top: 0;
}

  .crm-auth-card {
    padding: 1.5rem;
    border-color: var(--crm-color-border);
    color: var(--crm-color-ink);
    background: var(--crm-panel-bg);
}

body.crm-auth-page[data-auth-mode="register"] .crm-auth-card {
    padding: 1.5rem;
}
}

@media screen and (max-width: 560px) {
  body.crm-app-page .crm-topbar,
body.crm-platform-page .crm-topbar {
    display: none;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

body.crm-operations-page .crm-topbar,
body.crm-planner-page .crm-topbar {
    display: none;
}

  .crm-mobile-menu-context {
    grid-template-columns: minmax(0, 1fr) var(--crm-touch-target);
    grid-template-areas: "workspace close" "switch switch" "account account" "actions actions";
  }

  .crm-mobile-menu-sheet {
    height: calc(100dvh - var(--crm-mobile-dock-height) - var(--crm-mobile-dock-offset) - var(--crm-mobile-edge) - 0.55rem);
    max-height: none;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

  body.crm-auth-page {
    padding: 0;
    color: var(--crm-color-ink);
    background: radial-gradient(circle at 92% 1%, var(--crm-ambient-2), transparent 34rem),
      radial-gradient(circle at 2% 10%, var(--crm-ambient-1), transparent 28rem),
      radial-gradient(circle at 77% 94%, var(--crm-ambient-3), transparent 32rem),
      linear-gradient(145deg, var(--crm-color-canvas), var(--crm-color-canvas-deep));
}

  .crm-auth-shell,
body.crm-auth-page[data-auth-mode="register"] .crm-auth-shell {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
}

  .crm-auth-intro,
.crm-auth-card {
    padding: 1.15rem;
    border-color: var(--crm-color-border);
    color: var(--crm-color-ink);
    background: var(--crm-panel-bg);
}

body.crm-auth-page[data-auth-mode="register"] .crm-auth-intro,
body.crm-auth-page[data-auth-mode="register"] .crm-auth-card {
    padding: 1.15rem;
}

  .crm-auth-intro {
    min-height: 10.5rem;
    justify-content: flex-start;
    gap: 1.25rem;
    border-color: var(--crm-color-border);
    color: var(--crm-color-ink);
    background: var(--crm-panel-bg);
}

body.crm-auth-page[data-auth-mode="register"] .crm-auth-intro {
    min-height: 10.5rem;
    justify-content: flex-start;
    gap: 1.25rem;
}

  .crm-auth-intro__copy,
body.crm-auth-page[data-auth-mode="register"] .crm-auth-intro__copy {
    margin-top: 0;
}

  .crm-auth-intro__facts {
    display: none;
}

  .crm-auth-form__grid {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-auth-links {
    align-items: flex-start;
    flex-direction: column;
}

  .crm-topbar .crm-eyebrow {
    max-width: calc(100vw - 6rem);
}

  .crm-topbar__date {
    max-width: calc(100vw - 6rem);
}

  .crm-dashboard-period__custom,
.crm-operations-toolbar__filters,
.crm-catalog-toolbar__controls,
.crm-directory-toolbar__controls,
.crm-inventory-ledger__filters,
.crm-settings-history__filters,
.crm-form-grid--two,
.crm-form-grid--three,
.crm-dialog-field-grid,
.crm-directory-form-grid,
.crm-employee-fields,
.crm-catalog-form__grid,
.crm-planner-form-grid,
.crm-waitlist-form-grid,
.crm-vehicle-picker__controls {
    grid-template-columns: minmax(0, 1fr);
}

.crm-report-filters {
    grid-template-columns: minmax(0, 1fr);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-dashboard-period__custom .crm-button,
.crm-form-grid__wide,
.crm-planner-form-grid__wide,
.crm-waitlist-form-grid__wide {
    grid-column: auto;
}

  /* The phone period picker is a compact control, not a reduced desktop form. */
  .crm-dashboard-period {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.62rem;
}

  .crm-dashboard-period__presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr));
    gap: 0.16rem;
    padding: 0.16rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: 0.84rem;
    background: var(--crm-surface-accent-bg);
}

  .crm-period-button {
    min-height: var(--crm-touch-target);
    min-width: 0;
    padding: 0.35rem 0.15rem;
    border-radius: 0.66rem;
    font-size: var(--crm-type-caption);
    white-space: nowrap;
}

  .crm-dashboard-period__custom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 5.75rem;
    align-items: end;
    gap: 0.42rem;
}

  .crm-dashboard-period__custom label {
    min-width: 0;
    gap: 0.28rem;
}

  .crm-dashboard-period__custom label > span {
    font-size: var(--crm-type-caption);
    font-weight: 570;
    line-height: 1.2;
}

  .crm-dashboard-period__custom input {
    width: 100%;
    min-width: 0;
    min-height: var(--crm-touch-target);
    padding-inline: 0.42rem var(--crm-input-padding-end, 0.18rem);
    font-size: var(--crm-type-label);
}

  .crm-dashboard-period__custom .crm-button {
    width: 5.75rem;
    min-height: var(--crm-touch-target);
    padding-inline: 0.42rem;
    font-size: var(--crm-type-label);
}

  .crm-dashboard-period > p {
    font-size: var(--crm-type-caption);
    line-height: 1.4;
}

  /* Finance uses the same compact phone grammar as the dashboard period picker. */
  .crm-finance-toolbar {
    gap: 0.62rem;
    padding: 0.72rem;
}

  .crm-finance-toolbar__summary {
    display: grid;
    gap: 0.12rem;
}

  .crm-finance-toolbar__summary small {
    font-size: var(--crm-type-caption);
    line-height: 1.4;
}

  .crm-finance-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.42rem;
}

  .crm-finance-period__presets {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr));
    gap: 0.16rem;
    padding: 0.16rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: 0.84rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-finance-period__presets button {
    min-width: 0;
    min-height: var(--crm-touch-target);
    padding: 0.35rem 0.15rem;
    border-radius: 0.66rem;
    font-size: var(--crm-type-caption);
    white-space: nowrap;
}

  .crm-finance-period label {
    min-width: 0;
    gap: 0.28rem;
    font-size: var(--crm-type-caption);
    font-weight: 570;
    line-height: 1.2;
}

  .crm-finance-period input {
    width: 100%;
    min-width: 0;
    min-height: var(--crm-touch-target);
    padding-inline: 0.42rem 0.18rem;
    font-size: var(--crm-type-label);
}

  .crm-finance-period > .crm-button {
    width: 100%;
    grid-column: 1 / -1;
    min-height: var(--crm-touch-target);
    padding-inline: 0.42rem;
    font-size: var(--crm-type-label);
}

  .crm-dashboard__format {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    padding-block-start: 0.62rem;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--crm-component-rule);
    border-inline-start: 0;
    text-align: start;
}

  .crm-dashboard__intro > div > p:last-child {
    font-size: var(--crm-type-caption);
    line-height: 1.4;
}

  .crm-dashboard__format span,
.crm-dashboard__format a {
    font-size: var(--crm-type-caption);
}

  .crm-dashboard__format strong {
    font-size: var(--crm-type-label);
}

  .crm-dashboard__format > :not(:last-child)::after {
    content: "·";
    margin-inline-start: 0.5rem;
    color: var(--crm-color-ink-muted);
}

  .crm-dashboard__format > [hidden] {
    display: none;
}

  .crm-operations-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

.crm-dashboard__kpis,
.crm-finance__kpis,
.crm-metric-strip,
.crm-platform-metrics,
.crm-reconciliation__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-finance__kpis {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.crm-product-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--crm-surface-divider-bg);
}

  .crm-operations-summary > :last-child:nth-child(odd),
.crm-dashboard__kpis > :last-child:nth-child(odd),
.crm-finance__kpis > :last-child:nth-child(odd),
.crm-metric-strip > :last-child:nth-child(odd),
.crm-product-meta > :last-child:nth-child(odd),
.crm-platform-metrics > :last-child:nth-child(odd),
.crm-reconciliation__grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

  .crm-access-matrix {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-dashboard__actions,
.crm-form-section__actions,
.crm-directory-head-actions,
.crm-finance__head-actions,
.crm-inventory-head-actions,
.crm-checklist-directory__actions,
.crm-context-form__footer,
.crm-catalog-form__actions,
.crm-date-dialog__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
}

  .crm-dashboard__actions .crm-button,
.crm-form-section__actions > :is(a, button, .crm-button),
.crm-directory-head-actions .crm-button,
.crm-finance__head-actions .crm-button,
.crm-inventory-head-actions .crm-button,
.crm-checklist-directory__actions .crm-button,
.crm-context-form__footer .crm-button,
.crm-catalog-form__actions .crm-button,
.crm-date-dialog__actions .crm-button {
    width: 100%;
}

  .crm-section-tabs,
.crm-settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-section-tabs--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

  .crm-section-tabs--adaptive-stack {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-section-tabs > *,
.crm-settings-tabs > * {
    justify-content: flex-start;
    text-align: left;
}

  .crm-section-tabs--three > * {
    justify-content: center;
    min-width: 0;
    padding-inline: 0.4rem;
    text-align: center;
}

  #crm-finance-tabs .crm-finance-tab-label--full {
    display: none;
}

  #crm-finance-tabs .crm-finance-tab-label--compact {
    display: inline;
}

  .crm-client-list,
.crm-category-manager__list {
    max-height: 22rem;
}

  .crm-catalog-editor__head {
    align-items: flex-start;
    flex-direction: row;
}

  .crm-catalog-dialog__head-actions {
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    flex-direction: row;
    margin-inline-start: auto;
}

  .crm-order-service-picker,
.crm-employee-choice-grid,
.crm-item-allocation__fields,
.crm-line-discount-grid,
.crm-item-payroll-facts,
.crm-contractor-allocation-row,
.crm-payment-batch-row__payer {
    grid-template-columns: minmax(0, 1fr);
}

.crm-payment-batch-row {
    grid-template-columns: minmax(0, 1fr);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-contractor-allocation-row > *,
.crm-payment-batch-row > *,
.crm-payment-batch-row__payer > * {
    grid-column: auto;
}

  .crm-payment-entry__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

  .crm-payment-entry__actions .crm-button {
    width: 100%;
    min-width: 0;
    grid-column: auto;
}

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

  .crm-pagination > span {
    grid-column: 1 / -1;
    grid-row: 1;
}

  .crm-planner-scroll {
    min-height: 0;
    height: auto;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-planner-workspace {
    height: calc(100dvh - (var(--crm-mobile-edge) * 2) - var(--crm-mobile-content-clearance));
    min-height: 0;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-planner-dock {
    gap: 0.35rem;
    margin-top: 0.32rem;
    padding: 0.42rem;
    border-color: var(--crm-color-border);
    background: var(--crm-panel-bg);
    box-shadow: var(--crm-shadow-base);
}

  .crm-planner-dock__primary {
    gap: 0.35rem;
}

  .crm-day-navigation {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
}

  .crm-day-navigation__date {
    min-width: 0;
    flex: 1 1 auto;
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
}
  .crm-day-navigation > button { grid-row: 2; }
  .crm-day-navigation > button:last-child { grid-column: 3; }
  .crm-planner-date-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .crm-day-picker { padding: 8px; }
  .crm-day-picker input { --crm-input-padding-start: 8px; font-size: var(--crm-type-caption); }

  .crm-planner-commandbar__actions {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

  .crm-planner-commandbar__actions > * {
    width: 100%;
    min-width: 0;
}

  .crm-planner-commandbar__actions > .crm-planner-disclosure {
    grid-column: auto;
}

  .crm-work-order-stage {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    justify-items: stretch;
}

  .crm-work-order-stage > label {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 0.28rem;
}

  .crm-work-order-stage > label > :is(input, select),
.crm-work-order-stage__save {
    width: 100%;
    min-width: 0;
}

  .crm-work-order-stage > :is(#crm-work-order-stage-reason-field, .crm-work-order-stage__save, small) {
    max-width: none;
    grid-column: 1 / -1;
    text-align: start;
}

  .crm-work-order-title-row {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}

  .crm-work-order-direction { max-width: none; }

  .crm-work-order-number {
    width: 100%;
    max-width: none;
    flex-basis: auto;
}

  .crm-waitlist-trigger {
    padding-inline: 0.35rem;
    font-size: var(--crm-type-caption);
    white-space: nowrap;
}

  .crm-waitlist-trigger > span[hidden] {
    display: none;
}

  .crm-planner-dock__secondary {
    display: none;
}

  .crm-planner-grid {
    grid-template-columns: 3.75rem repeat(var(--crm-planner-bay-count), minmax(0, 1fr));
}

  .crm-planner-event {
    padding-inline: 0.55rem;
    --crm-event-accent: var(--crm-color-ink-soft);
    --crm-event-bg: var(--crm-color-surface-strong);
    border-color: var(--crm-color-border-strong);
    background: radial-gradient(circle at 95% -5%, var(--crm-color-glass-highlight), transparent 5rem),
      var(--crm-event-bg);
    box-shadow: inset 3px 0 0 var(--crm-event-accent),
      inset 0 1px 0 var(--crm-color-glass-highlight),
      0 8px 18px color-mix(in srgb, var(--crm-event-accent) 16%, transparent);
}

  .crm-mobile-dock {
    display: grid;
    align-items: stretch;
    gap: 0.16rem;
    padding: 0.38rem;
    border-radius: 1.48rem;
    border-color: var(--crm-color-border-strong);
    background: radial-gradient(circle at 50% -45%, var(--crm-color-glass-highlight), transparent 58%),
      linear-gradient(155deg, var(--crm-color-glass-elevated), var(--crm-color-glass-base));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight),
      inset 0 -1px 0 color-mix(in srgb, var(--crm-color-accent) 8%, transparent),
      var(--crm-shadow-elevated);
}

  .crm-mobile-dock__item {
    flex: 1 1 0;
    min-width: 44px;
    flex-direction: row;
    gap: 0;
    padding: 0.32rem;
    border-radius: 999px;
    font-size: var(--crm-type-caption);
    transition:
      flex-grow 320ms cubic-bezier(0.16, 1, 0.3, 1),
      color 180ms var(--crm-ease),
      transform var(--crm-motion-press) var(--crm-ease);
}

  .crm-mobile-dock__item::before {
    inset: 0.06rem;
    border-radius: inherit;
    background: radial-gradient(circle at 24% 8%, var(--crm-color-glass-highlight-strong), transparent 48%),
      linear-gradient(145deg, var(--crm-color-glass-elevated), color-mix(in srgb, var(--crm-color-accent) 11%, var(--crm-color-surface-strong)));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-interactive);
}

  .crm-mobile-dock__item span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    white-space: nowrap;
    transform: translateX(-0.28rem);
    transition:
      opacity 160ms var(--crm-ease),
      transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

  .crm-mobile-dock__item.is-current {
    flex: 0 0 auto;
    min-width: 44px;
    gap: 0;
    padding-inline: 6px;
}

  .crm-mobile-dock__item.is-current::before {
    border-color: color-mix(in srgb, var(--crm-color-accent) 22%, transparent);
    box-shadow:
      inset 0 1px 0 var(--crm-color-glass-highlight),
      0 0.34rem 0.9rem color-mix(in srgb, var(--crm-color-accent) 14%, transparent);
    animation: crm-mobile-active-lens 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

  .crm-mobile-dock__item.is-current span {
    color: var(--crm-color-accent-deep);
    font-weight: 680;
    letter-spacing: -0.018em;
}

  .crm-mobile-dock__item svg {
    width: clamp(20px, 1.28rem, 28px);
    height: clamp(20px, 1.28rem, 28px);
    flex: 0 0 auto;
}

  @keyframes crm-mobile-active-lens {
    from {
      opacity: 0.3;
      transform: scale(0.82);
}

    to {
      opacity: 1;
      transform: scale(1);
}
  }

  .crm-mobile-menu-list {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
}

  .crm-mobile-menu-sheet {
    padding: 0.85rem;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

  .crm-catalog-dialog,
.crm-category-dialog,
.crm-inventory-dialog,
.crm-inventory-document-dialog,
.crm-inventory-movement-dialog,
.crm-make-manager-dialog,
.crm-employee-dialog,
.crm-structure-dialog,
.crm-obligation-dialog,
.crm-payout-dialog,
.crm-expense-dialog,
.crm-context-dialog,
.crm-waitlist-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: calc(100dvh - 0.35rem);
    margin: auto 0 0;
    border-radius: 1.55rem 1.55rem 0 0;
}

.crm-date-dialog,
.crm-demo-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: calc(100dvh - 0.35rem);
    margin: auto 0 0;
    border-radius: 1.55rem 1.55rem 0 0;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

  :where(.crm-catalog-dialog, .crm-category-dialog, .crm-inventory-dialog, .crm-inventory-document-dialog, .crm-inventory-movement-dialog, .crm-make-manager-dialog, .crm-employee-dialog, .crm-structure-dialog, .crm-obligation-dialog, .crm-payout-dialog, .crm-expense-dialog, .crm-date-dialog, .crm-context-dialog, .crm-demo-dialog, .crm-waitlist-dialog) > :where(form, section, .crm-demo-dialog__content) {
    max-height: calc(100dvh - 0.35rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

  .crm-data-table tbody td,
.crm-table tbody td,
.crm-catalog-table tbody td,
.crm-services-table tbody td,
.crm-employee-table tbody td,
.crm-report-table tbody td {
    grid-template-columns: minmax(5.7rem, 0.42fr) minmax(0, 1fr);
    color: var(--crm-color-ink-soft);
    background: transparent;
}

.crm-inventory-ledger__table tbody td {
    grid-template-columns: minmax(5.7rem, 0.42fr) minmax(0, 1fr);
}
}

/*
 * Phone-native workspace primitives.
 *
 * These rules deliberately replace desktop rows with touch compositions rather
 * than shrinking them. They are shared by every domain page and use the same
 * Version 7 tokens, so new phone screens inherit one visual grammar.
 */
@media screen and (max-width: 560px) {
  .crm-dashboard__intro {
    gap: 0.28rem;
    padding: 0.72rem 0.85rem;
}

  .crm-dashboard__intro h1 {
    margin-block-start: var(--crm-space-2);
    font-size: clamp(1.55rem, 6.8vw, 1.78rem);
    line-height: 1.03;
}

  .crm-dashboard__intro > div > p:last-child {
    margin-block-start: 0.32rem;
}

  .crm-dashboard__format {
    gap: 0.28rem;
    padding-block-start: 0.08rem;
}

  .crm-dashboard__format > :not(:last-child)::after {
    margin-inline-start: 0.28rem;
}

  .crm-resources__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-space-2);
}

  .crm-resource {
    min-height: 4.5rem;
    padding: var(--crm-space-3);
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-control-radius);
    background: var(--crm-subpanel-bg);
    box-shadow: var(--crm-subpanel-shadow);
}

  .crm-resource--busy {
    border-color: color-mix(in srgb, var(--crm-color-success) 22%, var(--crm-component-rule));
    background: color-mix(in srgb, var(--crm-color-success) 7%, var(--crm-subpanel-bg));
}

  .crm-resource :is(span, strong) {
    overflow-wrap: normal;
    white-space: normal;
    word-break: normal;
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-service-payroll__grid {
    grid-template-columns: minmax(0, 1fr);
}

  body.crm-services-page dialog.crm-catalog-dialog .crm-service-branch .crm-catalog-form__check {
    grid-column: 1;
}

  .crm-logo-workspace {
    grid-template-columns: minmax(6.75rem, 0.78fr) minmax(0, 1.22fr);
    gap: var(--crm-space-3);
    padding: var(--crm-space-3);
}

  .crm-settings-organization > .crm-form-section__header {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--crm-space-2);
}

  .crm-settings-organization > .crm-form-section__header > div {
    min-width: 0;
    flex: 1 1 auto;
}

  .crm-settings-organization > .crm-form-section__header > .crm-button {
    min-width: 0;
    flex: 0 0 auto;
    padding-inline: var(--crm-space-3);
}

  .crm-logo-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}

  .crm-logo-controls > div {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-order-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  .crm-order-item__service,
.crm-order-item__quantity,
.crm-order-item__assignment {
    grid-column: 1 / -1;
}

  .crm-order-item__quantity {
    width: min(100%, 10rem);
    justify-self: start;
}

  .crm-order-item__unit-price,
.crm-order-item__unit-cost,
.crm-order-item__total,
.crm-order-item__profit {
    grid-column: auto;
}

  .crm-inventory-ledger__delta-list {
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
}

  .crm-order-mobile-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-order-mobile-card__facts > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

  .crm-orders-period {
    padding: 0.2rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: 0.9rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
}

  .crm-orders-period button {
    min-height: var(--crm-touch-target);
    padding: 0.45rem 0.22rem;
    border-radius: 0.7rem;
    font-size: var(--crm-type-label);
    line-height: 1.2;
    white-space: normal;
}

  .crm-process__lane {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: 0.5rem;
    overflow: visible;
    border: 0;
    background: transparent;
}

  .crm-process-stage {
    position: relative;
    display: grid;
    min-height: 5.5rem;
    align-content: start;
    gap: 0.22rem;
    padding: 0.72rem;
    overflow: hidden;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);
    background: var(--crm-subpanel-bg);
    box-shadow: var(--crm-subpanel-shadow);
}

  .crm-process-stage > span {
    position: static;
    color: var(--crm-color-accent-deep);
    font-size: var(--crm-type-caption);
    font-weight: 690;
    letter-spacing: 0.06em;
}

  .crm-process-stage > strong {
    font-size: 1.55rem;
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.035em;
}

  .crm-process-stage > small {
    color: var(--crm-color-ink-soft);
    font-size: var(--crm-type-label);
    line-height: 1.3;
    overflow-wrap: normal;
}

  .crm-process-stage:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

  .crm-planner-summary-full {
    display: none;
}

  .crm-planner-summary-compact {
    display: inline;
}

  .crm-planner-commandbar__actions {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr));
    gap: 0.4rem;
}

  .crm-planner-disclosure > summary,
.crm-waitlist-trigger,
#crm-planner-new {
    min-height: var(--crm-touch-target);
    padding: 0.45rem 0.44rem;
    font-size: var(--crm-type-label);
    line-height: 1.15;
}

  .crm-planner-disclosure > summary {
    justify-content: center;
    gap: 0.2rem;
    font-size: var(--crm-type-label);
    white-space: nowrap;
}

  .crm-waitlist-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 0.3rem;
    white-space: normal;
}

  .crm-waitlist-trigger__label {
    min-width: 0;
    font-size: var(--crm-type-caption);
    white-space: normal;
    line-height: 1.2;
}

  .crm-waitlist-trigger__count:not([hidden]) {
    display: grid;
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--crm-color-accent) 14%, transparent);
    border-radius: 0.65rem;


    box-shadow: 0 0.18rem 0.5rem var(--crm-color-glass-shadow);
    font-size: var(--crm-type-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--crm-color-ink-muted);
    background: var(--crm-color-surface);
}

  .crm-work-order-summary__documents {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    border-block-start: 1px solid var(--crm-component-rule);
}

  .crm-work-order-summary__documents h2 {
    margin: 0;
    font-size: var(--crm-type-section);
}

  .crm-work-order-summary__documents > p:not(.crm-eyebrow) {
    margin: 0;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-label);
    line-height: 1.45;
}

  .crm-work-order-summary__documents > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
}

  .crm-work-order-summary__documents .crm-document-action {
    display: grid;
    width: auto;
    min-width: 0;
    min-height: 4.4rem;
    align-content: center;
    justify-items: start;
    gap: 0.12rem;
    padding: 0.68rem 0.74rem;
    grid-column: auto;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}

  .crm-work-order-summary__documents .crm-document-action:first-child {
    grid-column: 1 / -1;
}

  .crm-document-action strong {
    max-width: 100%;
    font-size: var(--crm-type-label);
    font-weight: 660;
    line-height: 1.25;
    white-space: normal;
}

  .crm-document-action small {
    max-width: 100%;
    color: var(--crm-color-ink-muted);
    font-size: var(--crm-type-caption);
    font-weight: 470;
    line-height: 1.35;
    white-space: normal;
}

  .crm-work-order-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-work-order-actions > .crm-button {
    min-height: var(--crm-touch-target);
    height: auto;
    white-space: normal;
    overflow-wrap: normal;
  }

  .crm-work-order-actions > #crm-work-order-create {
    grid-column: 1 / -1;
}

  .crm-mobile-dock__item {
    font-size: var(--crm-type-caption);
}
}

/*
 * Settings and finance adaptive compositions.
 *
 * These are not compressed desktop grids. On phone and compact tablet the
 * selected role becomes the only policy column, release notes become readable
 * tiles, and payroll rows use a two-line touch-card hierarchy.
 */
@media screen and (max-width: 900px) {
  body.crm-app-page .crm-access-role-card {
    min-height: 4.8rem;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.72rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--crm-subpanel-radius);
    background: var(--crm-subpanel-bg);
    box-shadow: var(--crm-subpanel-shadow);
}

  body.crm-app-page .crm-access-role-card.is-selected {
    border-color: color-mix(in srgb, var(--crm-color-accent) 32%, transparent);

    box-shadow:
      inset 0 1px 0 var(--crm-color-glass-highlight),
      0 0.45rem 1rem color-mix(in srgb, var(--crm-color-accent) 10%, transparent);
    background: color-mix(in srgb, var(--crm-color-accent) 10%, var(--crm-color-surface-strong));
}

  body.crm-app-page .crm-access-role-card strong,
body.crm-app-page .crm-access-role-card small {
    overflow-wrap: anywhere;
    word-break: normal;
}

  body.crm-app-page .crm-access-matrix-scroll {
    overflow: visible;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-panel-radius);

    box-shadow: var(--crm-shadow-base);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-access-matrix,
body.crm-app-page .crm-access-matrix :is(thead, tbody) {
    display: block;
    width: 100%;
}

  body.crm-app-page .crm-access-matrix tr:not(.crm-access-matrix__group) {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(6.8rem, 0.32fr);
    align-items: stretch;
}

  body.crm-app-page .crm-access-matrix [data-access-role-column]:not([data-mobile-selected="true"]) {
    display: none;
}

  body.crm-app-page .crm-access-matrix thead th {
    display: grid;
    min-width: 0;
    align-content: center;
    border-inline-end: 0;
    color: var(--crm-color-ink-soft);
    background: var(--crm-surface-quiet-bg);
}

body.crm-app-page .crm-access-matrix tbody > tr:not(.crm-access-matrix__group) > :is(th, td) {
    display: grid;
    min-width: 0;
    align-content: center;
    border-inline-end: 0;
}

  body.crm-app-page .crm-access-matrix thead th {
    overflow-wrap: normal;
    word-break: normal;
    color: var(--crm-color-ink-soft);
    background: var(--crm-surface-quiet-bg);
}

  body.crm-app-page .crm-access-matrix thead th[data-mobile-selected="true"] {
    justify-items: center;
    padding-inline: 0.55rem;
    text-align: center;
}

  body.crm-app-page .crm-access-matrix thead th :is(strong, small),
body.crm-app-page .crm-access-matrix tbody th :is(strong, small) {
    overflow-wrap: normal;
    word-break: normal;
}

  body.crm-app-page .crm-access-matrix__group {
    display: block;
    width: 100%;
}

  body.crm-app-page .crm-access-matrix__group th {
    display: block;
    width: 100%;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-product-release > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
}

  body.crm-app-page .crm-product-release-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}

  body.crm-app-page .crm-product-release-list article {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 0.35rem;
    padding: 0.9rem;
    border: 1px solid var(--crm-component-rule);
    border-radius: var(--crm-subpanel-radius);

    box-shadow: var(--crm-subpanel-shadow);
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-product-release-list article :is(strong, p) {
    margin: 0;
    overflow-wrap: normal;
    word-break: normal;
}

  body.crm-app-page .crm-product-release-list article strong {
    font-size: var(--crm-type-control);
    line-height: 1.3;
}

  body.crm-app-page .crm-product-release-list article p {
    font-size: var(--crm-type-label);
    line-height: 1.48;
}

  body.crm-app-page .crm-finance-obligations,
body.crm-app-page .crm-finance-obligations__head,
body.crm-app-page .crm-finance-obligations__head > div,
body.crm-app-page .crm-finance-obligations__actions,
body.crm-app-page .crm-finance-obligations__actions label {
    width: 100%;
    min-width: 0;
}

  body.crm-app-page .crm-finance-obligations__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 0.8rem;
}

  body.crm-app-page .crm-finance-obligations__head :is(.crm-eyebrow, h2, p) {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
}

  body.crm-app-page .crm-finance-obligations__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

  body.crm-app-page .crm-finance-obligations__actions label {
    gap: 0.35rem;
}

  body.crm-app-page .crm-finance-obligations__actions select {
    width: 100%;
    min-width: 0;
}

  body.crm-app-page .crm-obligation-row {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
    padding: 0.8rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-obligation-row > span {
    min-width: 0;
    font-weight: 650;
}

  body.crm-app-page .crm-obligation-row > small {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-wrap: normal;
    word-break: normal;
}

  body.crm-app-page .crm-obligation-row > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
}

@media screen and (max-width: 560px) {
  body.crm-app-page .crm-access-directory {
    padding-inline: min(1rem, 2.5vw);
}

  body.crm-app-page .crm-access-role-summary {
    gap: 0.5rem;
}

  body.crm-app-page .crm-access-role-card {
    min-height: 4.65rem;
    padding: 0.65rem;
    padding-inline: min(0.65rem, 2.5vw);
}

  body.crm-app-page .crm-access-role-card > span {
    gap: 0.18rem;
}

  body.crm-app-page .crm-access-role-card strong {
    font-size: var(--crm-type-label);
    line-height: 1.25;
}

  body.crm-app-page .crm-access-role-card small {
    font-size: var(--crm-type-caption);
}

  body.crm-app-page .crm-access-matrix tr:not(.crm-access-matrix__group) {
    grid-template-columns: minmax(0, 1fr) 5.65rem;
}

  body.crm-app-page .crm-access-matrix thead th {
    padding: 0.72rem;
    color: var(--crm-color-ink-soft);
    background: var(--crm-surface-quiet-bg);
}

body.crm-app-page .crm-access-matrix tbody > tr:not(.crm-access-matrix__group) > th {
    padding: 0.72rem;
}

  body.crm-app-page .crm-access-matrix tbody td {
    padding: 0.45rem;
}

  body.crm-app-page .crm-product-release-list {
    grid-template-columns: minmax(0, 1fr);
}

  body.crm-app-page .crm-product-release-list article {
    min-height: 0;
    padding: 0.85rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-surface-inset-bg);
}

  body.crm-app-page .crm-finance-obligations__actions {
    grid-template-columns: minmax(0, 1fr);
}

  body.crm-app-page .crm-finance-obligations__actions .crm-button {
    width: 100%;
}

  body.crm-app-page .crm-finance-obligations__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

  body.crm-app-page .crm-finance-obligations__summary > span {
    min-width: 0;
    padding: 0.75rem;
}

  body.crm-app-page .crm-finance-obligations__summary > span:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

  body.crm-app-page .crm-finance-obligations__summary :is(small, strong) {
    overflow-wrap: normal;
    word-break: normal;
}

  body.crm-app-page .crm-obligation-row {
    min-height: 4.6rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-obligation-dialog__balance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .crm-client-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  body.crm-app-page .crm-obligation-dialog__balance > span:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

  body.crm-app-page .crm-obligation-detail-list > * {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
}

  body.crm-app-page .crm-obligation-detail-list small {
    text-align: start;
}

  body.crm-app-page .crm-money-history__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    border-color: var(--crm-component-rule);
    color: var(--crm-color-ink);
    background: var(--crm-subpanel-bg);
}

  body.crm-app-page .crm-money-history__details {
    justify-items: start;
    text-align: start;
}

  .crm-mobile-menu-context__switch {
    display: inline-flex;
    min-height: var(--crm-touch-target);
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    align-self: start;
    padding: 0.38rem 0.58rem;
    border-radius: 0.75rem;
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight);
    font-size: var(--crm-type-caption);
    line-height: 1;
    white-space: nowrap;
}

  .crm-mobile-menu-context__switch svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
}
}

@media screen and (max-width: 380px) {
  .crm-settings-organization > .crm-form-section__header {
    flex-wrap: wrap;
}

  .crm-settings-organization > .crm-form-section__header > .crm-button {
    width: 100%;
    flex-basis: 100%;
}

  .crm-work-order-summary__documents > div {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-work-order-summary__documents .crm-document-action,
.crm-work-order-summary__documents .crm-document-action:first-child {
    grid-column: 1;
}

  .crm-dashboard-period {
    gap: 0.48rem;
    padding: 0.52rem;
}

  .crm-period-button {
    padding-inline: 0.08rem;
    font-size: var(--crm-type-label);
}

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

  .crm-dashboard-period__custom .crm-button {
    width: 100%;
    grid-column: 1 / -1;
}

  .crm-finance-period {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-finance-period > .crm-button {
    width: 100%;
    grid-column: 1 / -1;
}

  .crm-section-tabs,
.crm-settings-tabs {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-section-tabs--three > * {
    font-size: var(--crm-type-label);
}

  .crm-mobile-dock__item span {
    font-size: var(--crm-type-caption);
}

  .crm-mobile-dock__item.is-current {
    gap: 0.28rem;
    padding-inline: 0.28rem;
}

  .crm-print-head__actions {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-planner-commandbar__actions {
    grid-template-columns: minmax(0, 1fr);
}

  #crm-day-today {
    grid-column: 1;
}

  .crm-planner-date-actions {
    grid-template-columns: minmax(0, 1fr);
}

  .crm-planner-date-actions > .crm-day-picker {
    grid-column: 1;
}

  .crm-planner-date-actions > #crm-day-today {
    justify-self: start;
}
  .crm-planner-commandbar__actions > .crm-planner-disclosure {
    grid-column: 1;
}

  .crm-waitlist-trigger {
    grid-column: 1;
}

  #crm-planner-new {
    grid-column: 1 / -1;
}
  .crm-operations-summary { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Responsive readability contract.
 *
 * Domain modules may keep denser desktop captions, but user-facing tablet and
 * phone text never falls below the shared caption scale. This single contract
 * prevents each new mobile screen from inventing another compressed type
 * system while leaving the accepted desktop composition untouched. Paper keeps
 * its A4 typography; the preview scales the complete page as one surface.
 */
@media screen and (max-width: 1180px) {
  body:is(.crm-app-page, .crm-operations-page, .crm-planner-page, .crm-platform-page)
    small:not(.crm-planner-visually-hidden):not(:where(.crm-print-sheet *)) {
    font-size: var(--crm-type-caption);
    line-height: 1.4;
}

  body:is(.crm-app-page, .crm-operations-page, .crm-planner-page, .crm-platform-page)
    :is(.crm-form-section__hint, .crm-dashboard-empty, .crm-table-state, .crm-catalog-table-state) {
    font-size: var(--crm-type-label);
    line-height: 1.45;
}

  body:is(.crm-app-page, .crm-operations-page)
    :is(.crm-dashboard-kpi, .crm-operations-summary > *, .crm-finance-kpi, .crm-metric-strip > *)
    > span {
    font-size: var(--crm-type-caption);
    line-height: 1.35;
}

  body:is(.crm-app-page, .crm-operations-page)
    :is(.crm-period-button, .crm-orders-period button, .crm-finance-period__presets button) {
    font-size: var(--crm-type-label);
}

  body:is(.crm-app-page, .crm-operations-page)
    :is(.crm-dashboard-panel header a, .crm-operations-count) {
    font-size: var(--crm-type-caption);
}

  body.crm-app-page
    .crm-data-table
    tbody td,
body.crm-app-page
    .crm-table
    tbody td,
body.crm-app-page
    .crm-catalog-table
    tbody td,
body.crm-app-page
    .crm-services-table
    tbody td,
body.crm-app-page
    .crm-employee-table
    tbody td,
body.crm-app-page
    .crm-report-table
    tbody td {
    font-size: var(--crm-type-label);
    line-height: 1.4;
    color: var(--crm-color-ink-soft);
    background: transparent;
}

body.crm-app-page
    .crm-inventory-ledger__table
    tbody td,
body.crm-operations-page
    .crm-data-table
    tbody td,
body.crm-operations-page
    .crm-table
    tbody td,
body.crm-operations-page
    .crm-catalog-table
    tbody td,
body.crm-operations-page
    .crm-services-table
    tbody td,
body.crm-operations-page
    .crm-employee-table
    tbody td,
body.crm-operations-page
    .crm-report-table
    tbody td,
body.crm-operations-page
    .crm-inventory-ledger__table
    tbody td {
    font-size: var(--crm-type-label);
    line-height: 1.4;
}

  body.crm-planner-page :is(.crm-planner-legend__item, .crm-day-navigation__date span) {
    font-size: var(--crm-type-caption);
    line-height: 1.35;
}
}

@media screen and (max-width: 900px) {
  body.crm-app-page .crm-identifier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  body.crm-app-page .crm-personal-appearance,
body.crm-app-page .crm-personal-appearance__controls {
    grid-template-columns: minmax(0, 1fr);
}


}

@media screen and (max-width: 560px) {
  body.crm-app-page .crm-identifier-grid {
    grid-template-columns: minmax(0, 1fr);
}
}

@media (prefers-reduced-motion: reduce) {
  .crm-mobile-dock {
    animation-duration: 1ms;
    transition-duration: 1ms;
    border-color: var(--crm-color-border-strong);
    background: radial-gradient(circle at 50% -45%, var(--crm-color-glass-highlight), transparent 58%),
      linear-gradient(155deg, var(--crm-color-glass-elevated), var(--crm-color-glass-base));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight),
      inset 0 -1px 0 color-mix(in srgb, var(--crm-color-accent) 8%, transparent),
      var(--crm-shadow-elevated);
}

.crm-mobile-menu-sheet {
    animation-duration: 1ms;
    transition-duration: 1ms;
    border-color: var(--crm-color-border-strong);
    color: var(--crm-color-ink);
    background: var(--crm-color-glass-dense);
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-elevated);
}

.crm-mobile-dock__item,
.crm-mobile-dock__item svg,
.crm-mobile-dock__item span {
    animation-duration: 1ms;
    transition-duration: 1ms;
}

.crm-mobile-dock__item::before {
    animation-duration: 1ms;
    transition-duration: 1ms;
    background: radial-gradient(circle at 24% 8%, var(--crm-color-glass-highlight-strong), transparent 48%),
      linear-gradient(145deg, var(--crm-color-glass-elevated), color-mix(in srgb, var(--crm-color-accent) 11%, var(--crm-color-surface-strong)));
    box-shadow: inset 0 1px 0 var(--crm-color-glass-highlight), var(--crm-shadow-interactive);
}
}

@media print {
  .crm-mobile-dock {
    display: none !important;
}

.crm-mobile-menu-dialog {
    display: none !important;
}
}

}