/* OneCloud 360 responsive shell and cross-module layout refinements. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { min-width: 320px; overflow-x: clip; }
img, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
.app-shell { min-height: 100vh; min-height: 100dvh; }
.main-area { flex: 1 1 auto; width: 100%; min-width: 0; }
.page-context, .page-content, .module-page, .dashboard-system { min-width: 0; }
.module-table-panel, .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.module-table-panel table, .table-scroll table { width: max(100%, 640px); }

@media (max-width: 1180px) {
  .page-content { max-width: none; }
  .dashboard-grid, .bottom-grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); }
  .settings-workspace .settings-content-grid,
  .settings-workspace .settings-overview-bottom:has(.settings-overview-platform) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .app-shell { display: block; }
  .main-area { min-height: 100vh; min-height: 100dvh; }
  .sidebar {
    width: min(320px, 88vw);
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 120;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-backdrop { z-index: 119; }
  .mobile-menu {
    display: inline-flex !important;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
  }
  .mobile-menu:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .topbar {
    height: auto;
    min-height: 58px;
    gap: 9px;
    padding-inline: clamp(10px, 2.2vw, 20px);
  }
  .topbar-module-nav { flex: 1 1 auto; min-width: 0; gap: 2px; overscroll-behavior-inline: contain; }
  .topbar-module-button { min-height: 40px; padding-inline: 8px; }
  .topbar-actions { min-width: 0; gap: 6px; }
  .page-context { padding-inline: clamp(12px, 2.5vw, 24px); }
  .page-content,
  .page-content:has(.settings-workspace),
  .page-content:has(.crm-workspace),
  .page-content:has(.support-workspace),
  .page-content:has(.team-dashboard-layout),
  .page-content:has(.team-chat-layout),
  .page-content:has(.team-record-layout),
  .page-content:has(.team-roles-layout),
  .page-content:has(.leave-workspace-marker) {
    width: 100%;
    max-width: none;
    padding-inline: clamp(12px, 2.5vw, 24px);
  }
  .dashboard-grid, .bottom-grid, .app-launch-layout, .work-workspace-layout,
  .projects-workspace .work-workspace-layout, .invoice-editor-layout,
  .settings-workspace .settings-content-grid { grid-template-columns: minmax(0, 1fr); }
  .business-inspector, .work-inspector { position: static; max-height: none; }
  .module-table-panel { padding-inline: 12px; }
  .settings-workspace .settings-module-tabs,
  .module-page [role="tablist"], .finance-workspace-tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 700px) {
  body:has(.sidebar.open) { overflow: hidden; }
  .topbar { min-height: 56px; padding-inline: 8px; }
  .topbar-module-nav { display: none; }
  .topbar-actions { flex: 0 0 auto; gap: 4px; }
  .topbar-actions .search-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }
  .topbar-actions .search-trigger > span:not(.search-icon),
  .topbar-actions .search-trigger kbd { display: none; }
  .topbar-actions .icon-button { width: 40px; height: 40px; }
  .topbar-actions .new-button { width: 40px; min-width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
  .topbar-actions .topbar-profile-button { min-height: 40px; padding: 3px; border: 0; }
  .topbar-actions .topbar-profile-button .profile-copy,
  .topbar-actions .topbar-profile-button > .chevron { display: none; }
  .page-context { min-height: 30px; padding-inline: 12px; }
  .page-content,
  .page-content:has(.settings-workspace),
  .page-content:has(.crm-workspace),
  .page-content:has(.support-workspace),
  .page-content:has(.team-dashboard-layout),
  .page-content:has(.team-chat-layout),
  .page-content:has(.team-record-layout),
  .page-content:has(.team-roles-layout),
  .page-content:has(.leave-workspace-marker) { padding: 16px 12px calc(20px + env(safe-area-inset-bottom)); }
  .module-heading, .dashboard-system .module-heading,
  .business-workspace-heading, .finance-unified-heading {
    align-items: flex-start;
    gap: 10px;
  }
  .module-heading > div:first-child, .business-workspace-heading > div:first-child { min-width: 0; }
  .business-heading-actions, .finance-heading-actions, .crm-heading-actions, .module-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .module-toolbar, .business-filterbar, .work-toolbar, .team-register-toolbar { min-width: 0; }
  .module-search { flex: 1 1 100%; max-width: none; }
  .record-count { flex: 0 0 auto; }
  .metric-grid, .report-grid, .report-metric-grid, .crm-metric-grid,
  .crm-overview-cards, .dashboard-system .business-metric-grid,
  .dashboard-system:has(.team-dashboard-layout) > .business-metric-grid,
  .dashboard-system:has(.team-record-layout) > .business-metric-grid,
  .dashboard-system:has(.team-roles-layout) > .business-metric-grid,
  .dashboard-system:has(.leave-workspace-marker) > .business-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .panel, .premium-workspace-panel, .module-table-panel, .settings-form { min-width: 0; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { max-width: 100%; overflow-x: auto; }
  .settings-tab { flex: 0 0 auto; }
  .settings-workspace .settings-overview-bottom:has(.settings-overview-platform) { grid-template-columns: minmax(0, 1fr); }
  .settings-workspace .settings-content-grid { grid-template-columns: minmax(0, 1fr); }
  .invoice-editor-layout, .invoice-summary-grid, .invoice-meta-grid,
  .invoice-preview-parties, .invoice-preview-dates { grid-template-columns: minmax(0, 1fr); }
  .invoice-preview-column { order: initial; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-field.full { grid-column: auto; }
  .settings-actions, .invoice-editor-footer, .invoice-footer-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-actions > button, .invoice-footer-actions > button { width: 100%; }
  .module-page [role="tablist"], .settings-module-tabs, .finance-workspace-tabs { scrollbar-width: thin; }
  .page-footer { flex-wrap: wrap; gap: 8px; }
  .popover { right: 8px; left: 8px; width: auto; max-width: none; }
  .popover.modal { inset: auto 8px 8px; top: auto; left: 8px; width: auto; max-width: none; max-height: calc(100dvh - 16px); transform: none; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
  .toast-region { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; }
  .toast { max-width: 100%; }
  .jobs-app { min-height: 100vh; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  .jobs-dialog, .jobs-workflow-dialog { max-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  .display-main { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .topbar { gap: 4px; }
  .mobile-menu { flex-basis: 38px; width: 38px; min-width: 38px; height: 40px; }
  .topbar-actions { gap: 2px; }
  .topbar-actions .icon-button, .topbar-actions .new-button { width: 36px; min-width: 36px; height: 38px; }
  .topbar-actions .topbar-profile-button .profile-avatar { width: 30px; height: 30px; }
  .metric-grid, .report-grid, .report-metric-grid, .crm-metric-grid,
  .crm-overview-cards, .dashboard-system .business-metric-grid { grid-template-columns: minmax(0, 1fr); }
  .module-heading .new-button, .business-heading-actions > button { max-width: 100%; }
  .dashboard-system:has(.team-dashboard-layout) > .business-metric-grid,
  .dashboard-system:has(.team-record-layout) > .business-metric-grid,
  .dashboard-system:has(.team-roles-layout) > .business-metric-grid,
  .dashboard-system:has(.leave-workspace-marker) > .business-metric-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .nav-item, .nav-group-button, .topbar-module-button, .settings-tab,
  .module-page [role="tab"], .primary-button, .secondary-button,
  .filter-button, .display-view-tabs button { min-height: 42px; }
  .module-page input[type="checkbox"], .module-page input[type="radio"] { width: 18px; height: 18px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .sidebar { height: 100vh; height: 100dvh; }
  .popover.modal { max-height: 94dvh; overflow-y: auto; }
  .jobs-dialog, .jobs-workflow-dialog { max-height: 100dvh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}