/* Final tablet invariants.
   Loaded after every feature stylesheet so module-specific additions cannot
   accidentally break the shared iPad shell. */

@media (min-width:700px) and (max-width:1200px),
       (min-width:1201px) and (max-width:1400px) and (pointer:coarse) {
  /* Keep exact amounts readable; scroll the chart, not the whole page. */
  #page-finance .payment-analytics-grid > .payment-panel {
    min-width:0;
    max-width:100%;
  }
  #page-finance .payment-month-chart {
    grid-template-columns:repeat(12,minmax(96px,1fr));
    contain:inline-size;
    overflow-x:auto;
    overflow-y:hidden;
    height:220px;
    padding-bottom:12px;
    touch-action:pan-x pan-y;
  }
  #page-finance .payment-month b {
    font-size:11px;
  }
  /* Safari date controls have intrinsic sizing unlike our time buttons. */
  #modal-order #order-date {
    min-inline-size:0;
    max-inline-size:100%;
    max-block-size:40px;
    -webkit-appearance:none;
    appearance:none;
  }
  #modal-order #order-date::-webkit-date-and-time-value {
    min-inline-size:0;
    text-align:start;
  }
}

/* Tablet compositing fallback: retain overlay shading without backdrop blur.
   Real-device report: persistent blur after a fresh portrait load in iPad
   Yandex Browser. Chromium does not reproduce the full-screen artifact.
   Do not change overlay visibility, hit testing, or modal lifecycle here. */
@media (min-width:700px) and (max-width:1400px) and (pointer:coarse) {
  :root body :is(.topbar,
  .sidebar-overlay,
  .modal-bg,
  #modal-order,
  #modal-generic,
  #modal-quicksearch,
  .materials-dialog-backdrop) {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

@media (min-width:700px) and (max-width:1200px) {
  /* styles-modules puts the drawer at 100, below the audit backdrop at 205.
     The menu must stay above its backdrop to remain sharp and tappable. */
  #sidebar {
    z-index:210 !important;
  }

  html,
  body,
  #app {
    width:100%;
    max-width:100vw;
    height:100%;
    overflow:hidden;
  }

  #main {
    width:100%;
    max-width:100vw;
    min-width:0;
    height:100dvh;
    margin-left:0;
    overflow:hidden;
  }

  .page,
  .page.active {
    width:100%;
    max-width:100vw;
    min-width:0;
  }

  .page.active.workspace-page {
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  html,
  body {
    height:100dvh;
  }

  body {
    position:fixed;
    inset:0;
  }

  /* iPad Safari needs the page itself to participate in the flex height chain.
     A fixed-height child inside a block page can render correctly while refusing
     touch scrolling after the browser chrome changes the dynamic viewport. */
  #page-dashboard.active,
  #page-finance.active {
    display:flex !important;
    flex-direction:column;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  #main .workspace-page > .workspace-topbar {
    width:100%;
    max-width:100vw;
    flex:0 0 var(--workspace-topbar-h);
    box-sizing:border-box;
  }

  .workspace-heading,
  .workspace-topbar .workspace-actions {
    min-width:0;
  }

  .workspace-page > .content,
  .dashboard-workspace,
  .clients-workspace,
  .orders-workspace,
  .services-workspace,
  .directory-workspace,
  #page-client-card > .content {
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    box-sizing:border-box;
  }

  .dashboard-workspace,
  .clients-workspace,
  .services-workspace,
  .directory-workspace,
  #page-client-card > .content {
    height:calc(100dvh - var(--workspace-topbar-h));
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  #page-dashboard > .dashboard-workspace {
    flex:1 1 0 !important;
    height:0 !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    touch-action:pan-y;
  }

  #page-dashboard #orders-analytics-view,
  #page-dashboard canvas {
    touch-action:pan-y !important;
  }

  #page-dashboard #orders-analytics-view button {
    min-height:44px;
  }

  .orders-workspace {
    height:calc(100dvh - var(--workspace-topbar-h));
    overflow:hidden;
  }

  #page-orders #orders-filter-bar,
  #page-orders #orders-table-view,
  #page-orders #orders-table-view .table-wrap,
  #page-kanban > .content,
  #page-kanban #kanban-board,
  #page-calendar .calendar-commandbar,
  #page-calendar #cal-main-area,
  #page-finance > .finance-shell,
  #page-settings > .settings-shell {
    max-width:100%;
    min-width:0;
  }

  #page-finance > .finance-shell,
  #page-settings > .settings-shell {
    height:calc(100dvh - var(--workspace-topbar-h));
    min-height:0;
    overflow:hidden;
  }

  #page-finance > .finance-shell {
    flex:1 1 0 !important;
    height:0 !important;
    max-height:none !important;
  }

  #page-finance .finance-subnav,
  #page-finance .finance-content {
    min-height:0 !important;
  }

  #page-finance .finance-content {
    flex:1 1 0 !important;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }

  #page-finance .debt-calendar-block,
  #page-finance .debt-contracts-wrap,
  #page-finance .subscription-table-wrap,
  #page-finance #debt-payment-history {
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
  }

  #page-materials .materials-shell {
    width:100%;
    max-width:100%;
    height:calc(100dvh - var(--workspace-topbar-h));
    min-height:0;
    overflow:hidden;
  }

  #page-materials .materials-sidebar,
  #page-materials .materials-main {
    min-width:0;
    min-height:0;
  }

  #page-materials .materials-main {
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media (min-width:700px) and (max-width:1024px) {
  .workspace-heading .workspace-subtitle {
    display:none;
  }

  #main .workspace-page > .workspace-topbar {
    gap:10px;
  }

  .workspace-topbar .workspace-actions > .btn:not(.btn-primary):not(.btn-logout),
  .workspace-topbar .workspace-actions > div:not(:has(.btn-primary)):not(:has(.btn-logout)) {
    display:none !important;
  }

  #page-orders > .workspace-topbar .orders-export-action,
  #page-orders > .workspace-topbar #col-picker-btn,
  #page-orders > .workspace-topbar .topbar-right > div:has(#col-picker-btn) {
    display:none !important;
  }
}

/* The stacked catalog must allocate remaining height to its scrollable list. */
@media (min-width:769px) and (max-width:820px) {
  #svc-page-catalog .svc-layout { display:flex;flex-direction:column; }
  #svc-page-catalog .svc-sidebar { flex:0 0 220px; }
  #svc-page-catalog .svc-content { flex:1 1 0; }
}

@media (min-width:700px) and (max-width:900px) {
  #page-client-card .client-hero {
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    align-items:start;
    gap:16px;
    padding:20px;
  }

  #page-client-card .client-hero-info {
    min-width:0;
  }

  #page-client-card .client-hero-actions {
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    margin-left:0;
    flex-wrap:wrap;
  }

  #page-client-card .client-hero-actions > div:first-child {
    width:100%;
    margin-right:0 !important;
    align-items:flex-start !important;
  }

  #page-client-card .client-hero-actions > div:first-child > div:last-child {
    justify-content:flex-start !important;
  }

  #page-client-card .client-hero-actions button {
    min-height:44px;
  }

  #page-materials .materials-shell {
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
  }

  #page-materials .materials-sidebar {
    max-height:64px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  #page-materials .materials-categories {
    display:flex;
    min-width:max-content;
  }

  #page-finance > .finance-shell {
    flex-direction:column !important;
  }

  #page-finance .finance-subnav {
    flex:0 0 58px !important;
  }

  #page-finance .finance-content {
    padding:14px !important;
  }

  #page-finance .finance-content > .settings-section {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  #page-finance .microcredit-page-head,
  #page-finance .subscription-page-head,
  #page-finance .payment-analytics-title {
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  #page-finance .microcredit-page-actions {
    width:100%;
    min-width:0;
    overflow-x:auto;
    padding-bottom:4px;
    touch-action:pan-x;
  }

  #page-finance .payment-dashboard {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #page-finance .payment-analytics-grid {
    grid-template-columns:1fr !important;
  }

  #page-finance #debt-payment-history {
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }

  #page-finance #debt-payment-history table {
    width:700px !important;
    min-width:700px !important;
  }

  #page-finance #debt-payment-history th:nth-child(1),
  #page-finance #debt-payment-history td:nth-child(1) {
    width:90px !important;
  }

  #page-finance #debt-payment-history th:nth-child(2),
  #page-finance #debt-payment-history td:nth-child(2) {
    width:190px !important;
  }

  #page-finance #debt-payment-history th:nth-child(3),
  #page-finance #debt-payment-history td:nth-child(3) {
    width:250px !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #page-finance #debt-payment-history th:nth-child(4),
  #page-finance #debt-payment-history td:nth-child(4) {
    width:120px !important;
  }

  #page-finance #debt-payment-history th:nth-child(5),
  #page-finance #debt-payment-history td:nth-child(5) {
    width:50px !important;
  }

  #finance-section-debts .payment-page-head {
    align-items:flex-start !important;
  }

  #finance-section-debts .payment-page-actions {
    width:100%;
    min-width:0;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:2px 0 4px;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }

  #finance-section-debts .payment-page-actions > * {
    flex:0 0 auto;
  }

  #finance-section-debts .debt-calendar-block {
    overflow-x:auto !important;
    overflow-y:visible !important;
  }

  #finance-section-debts #debt-calendar,
  #finance-section-debts .debt-calendar-filters,
  #finance-section-debts .debt-calendar-grid {
    width:840px !important;
    min-width:840px !important;
  }

  #page-finance .finance-subnav .settings-nav-btn,
  #page-settings .settings-subnav .settings-nav-btn {
    height:44px !important;
    min-height:44px !important;
  }
}

/* iPad Pro 13-inch landscape is 1210 CSS px wide (2420 physical px at 2x).
   It intentionally keeps the 212px primary sidebar, so it needs a distinct
   layout contract from the <=1200px drawer-based tablet shell. */
@media (pointer:coarse) and (min-width:1201px) and (max-width:1366px) {
  html,
  body,
  #app {
    width:100%;
    height:100dvh;
    overflow:hidden;
  }

  #main {
    width:calc(100vw - 212px) !important;
    max-width:calc(100vw - 212px) !important;
    height:100dvh;
    min-width:0 !important;
    margin-left:212px !important;
    overflow:hidden !important;
  }

  .page.active.workspace-page {
    width:100%;
    height:100dvh;
    min-width:0;
    min-height:0;
    overflow:hidden;
  }

  #main .workspace-page > .workspace-topbar {
    width:100%;
    max-width:100%;
    flex:0 0 var(--workspace-topbar-h);
    box-sizing:border-box;
  }

  #page-dashboard.active,
  #page-finance.active {
    display:flex !important;
    flex-direction:column;
  }

  #page-dashboard > .dashboard-workspace {
    flex:1 1 0 !important;
    width:100%;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }

  #page-dashboard #orders-analytics-view,
  #page-dashboard canvas {
    touch-action:pan-y !important;
  }

  #page-dashboard #orders-analytics-view button {
    min-height:44px;
  }

  #page-dashboard .dashboard-kpi-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  #page-finance > .finance-shell {
    display:flex !important;
    flex:1 1 0 !important;
    width:100% !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #page-finance > .finance-shell > .finance-subnav {
    width:180px !important;
    height:100% !important;
    min-width:180px !important;
    min-height:0 !important;
    flex:0 0 180px !important;
    padding:12px 8px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  #page-finance > .finance-shell > .finance-subnav .settings-nav-btn {
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
  }

  #page-finance > .finance-shell > .finance-content {
    width:auto !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    flex:1 1 0 !important;
    padding:18px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }

  /* Neutralize the legacy selector that treated the first finance section as
     another sidebar and collapsed it to 162px. */
  #page-finance > .finance-shell > .finance-content > .settings-section,
  #page-finance > .content > .finance-content > div:first-child,
  #page-finance > .content > .finance-content > div:last-child {
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    flex:none !important;
    padding:0 !important;
    overflow:visible !important;
    box-sizing:border-box;
  }

  #page-finance .payment-page-head {
    align-items:flex-start !important;
  }

  #page-finance .payment-page-actions {
    width:100%;
    min-width:0;
    justify-content:flex-start;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding:2px 0 4px;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }

  #page-finance .payment-page-actions > * {
    flex:0 0 auto;
  }

  #finance-section-debts .debt-calendar-block,
  #page-finance .debt-contracts-wrap,
  #page-finance .subscription-table-wrap,
  #page-finance #debt-payment-history {
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
  }

  #finance-section-debts #debt-calendar,
  #finance-section-debts .debt-calendar-filters,
  #finance-section-debts .debt-calendar-grid {
    width:860px !important;
    min-width:860px !important;
  }

  #page-finance .microcredit-summary,
  #page-finance .subscription-summary,
  #page-finance .payment-dashboard {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #page-finance .payment-analytics-grid {
    grid-template-columns:1fr !important;
  }
}

/* iPad interaction and grid polish. These rules stay isolated from desktop
   and the dedicated mobile entrypoint. */
@media (pointer:coarse) and (min-width:700px) and (max-width:1366px) {
  #modal-export-slots.open {
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
    overflow:hidden !important;
  }

  #modal-export-slots > .modal {
    margin:auto !important;
  }

  /* A stale positional finance selector used to turn this label into a
     162px flex spacer and pushed the navigation towards the page centre. */
  #page-finance > .finance-shell > .finance-subnav > .admin-only:first-child {
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    flex:0 0 auto !important;
    padding:4px 10px !important;
    overflow:visible !important;
  }

  /* The payment calendar owns both axes. Wide, readable cells pan inside
     this panel instead of stretching or scrolling the whole finance page. */
  #finance-section-debts .debt-calendar-block {
    width:100% !important;
    height:clamp(420px,calc(100dvh - 214px),620px) !important;
    max-height:620px !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    touch-action:pan-x pan-y;
    scrollbar-gutter:stable both-edges;
    -webkit-overflow-scrolling:touch;
  }

  #finance-section-debts #debt-calendar,
  #finance-section-debts .debt-calendar-filters,
  #finance-section-debts .debt-calendar-grid {
    width:1120px !important;
    min-width:1120px !important;
  }
}

@media (pointer:coarse) and (min-width:1201px) and (max-width:1366px) {
  /* Dashboard controls use one segmented-control grammar on wide iPad. */
  #page-dashboard #orders-analytics-view div:has(> button[onclick^="_anSetPeriod"]),
  #page-dashboard #orders-analytics-view div:has(> button[onclick^="_anSetMetric"]),
  #page-dashboard #orders-analytics-view div:has(> button[onclick^="_anSetChartGroup"]),
  #page-dashboard #orders-analytics-view div:has(> button[onclick^="_anSetChartType"]),
  #page-dashboard #orders-analytics-view div:has(> button[onclick^="_anSetServiceView"]) {
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    min-width:0;
    padding:4px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--bg-surface-2) !important;
    box-shadow:none !important;
    overflow-x:auto;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }

  #page-dashboard #orders-analytics-view button[onclick^="_anSetPeriod"],
  #page-dashboard #orders-analytics-view button[onclick^="_anSetMetric"],
  #page-dashboard #orders-analytics-view button[onclick^="_anSetChartGroup"],
  #page-dashboard #orders-analytics-view button[onclick^="_anSetChartType"],
  #page-dashboard #orders-analytics-view button[onclick^="_anSetServiceView"] {
    flex:0 0 auto;
    height:44px !important;
    min-height:44px !important;
    padding:0 13px !important;
    border:1px solid transparent !important;
    border-radius:9px !important;
    background:transparent !important;
    color:var(--text-secondary) !important;
    box-shadow:none !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
    white-space:nowrap;
  }

  #page-dashboard #orders-analytics-view .crm-segment[aria-pressed="true"] {
    border-color:var(--text-primary) !important;
    background:var(--text-primary) !important;
    color:var(--bg-surface) !important;
  }

  #page-dashboard #orders-analytics-view button[onclick^="_anNav"] {
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border:1px solid transparent !important;
    border-radius:9px !important;
    background:var(--bg-surface-2) !important;
  }

  #page-dashboard #orders-analytics-view button[onclick="exportOrdersCsv()"],
  #page-dashboard #orders-analytics-view select[onchange^="_anSetAssignee"] {
    height:44px !important;
    min-height:44px !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:var(--bg-surface) !important;
  }

  #page-dashboard #orders-analytics-view > div > div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:stretch;
  }

  #page-dashboard .dashboard-kpi-grid > :first-child {
    grid-column:auto !important;
  }

  #page-finance .payment-analytics-section {
    width:100% !important;
    padding:18px !important;
    box-sizing:border-box;
  }

  #page-finance .payment-analytics-title {
    align-items:center !important;
    flex-direction:row !important;
    margin-bottom:16px !important;
  }

  #page-finance .payment-dashboard {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:minmax(104px,1fr);
    gap:12px !important;
    align-items:stretch !important;
  }

  #page-finance .payment-dashboard > .payment-stat {
    width:100%;
    min-width:0;
    min-height:92px !important;
    height:100%;
    padding:14px 16px !important;
    justify-content:center !important;
    box-sizing:border-box;
  }

  #page-finance .payment-dashboard > .payment-stat strong {
    font-size:18px !important;
    white-space:nowrap;
  }

  #page-finance .payment-analytics-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch;
  }

  #page-finance .payment-analytics-grid > .payment-panel {
    width:100%;
    min-width:0;
    min-height:240px !important;
    height:100%;
    box-sizing:border-box;
  }
}
/* Finance drag handle owns the gesture; the rest of the calendar still scrolls. */
@media (pointer:coarse) {
 #debt-calendar .finance-move-handle { flex-basis:44px; width:44px; height:44px; }
}