/* Shared responsive layer. Keep last: module themes otherwise override breakpoints.
   900px includes narrow tablets and landscape phones; desktop styles stay intact. */
.mobile-nav-trigger,
.mobile-actions-trigger,
.mobile-nav-backdrop { display: none; }

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
  body { min-width: 0; }
  body[data-theme] .app-shell { display: block; min-height: 100dvh; }
  body[data-theme] .main {
    min-width: 0;
    padding: 16px max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  body[data-theme] .sidebar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: auto;
    min-height: 64px;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(32, 33, 36, .06);
    backdrop-filter: none;
  }
  body[data-theme] .sidebar .brand-block { min-width: 0; padding: 0; border: 0; gap: 10px; }
  body[data-theme] .sidebar .brand-block > div:last-child { min-width: 0; }
  body[data-theme] .sidebar .brand-mark { width: 36px; height: 36px; flex: 0 0 36px; }
  body[data-theme] .sidebar .brand-mark img { width: 28px; height: 28px; }
  body[data-theme] .sidebar .brand-title { font-size: 13px; white-space: nowrap; }
  body[data-theme] .sidebar .brand-subtitle { font-size: 11px; }
  body[data-theme] .sidebar :is(.anniversary-countdown, .sidebar-footer) { display: none; }
  body[data-theme] :is(.mobile-nav-trigger, .mobile-actions-trigger) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: 600 14px/1.3 var(--font);
  }
  .mobile-nav-trigger > span:first-child { font-size: 19px; }
  body[data-theme] .sidebar .nav-list {
    display: none;
    position: fixed;
    top: var(--mobile-header-height, 64px);
    bottom: 0;
    left: 0;
    width: min(360px, calc(100vw - 40px));
    max-height: calc(100dvh - var(--mobile-header-height, 64px));
    padding: 14px 12px max(24px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    background: inherit;
    border-right: 1px solid var(--line);
    box-shadow: 8px 12px 30px rgba(0, 0, 0, .12);
  }
  body.mobile-nav-open { overflow: hidden; }
  body.mobile-nav-open .sidebar .nav-list { display: block; }
  body[data-theme] .nav-desktop-groups { display: grid; gap: 8px; }
  body[data-theme] .nav-mobile-navigation { display: none; }
  body[data-theme] .sidebar :is(.nav-group-toggle, .nav-child-button) {
    width: 100%; min-height: 46px; padding: 10px 12px; font-size: 14px;
  }
  body[data-theme] .nav-group-heading strong { font-size: 14px; }
  body[data-theme] .nav-child-button .nav-item-main { flex: 1; }
  body[data-theme] .sidebar .nav-child-button { justify-content: space-between; }
  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--mobile-header-height, 64px) 0 0;
    z-index: 99;
    padding: 0;
    border: 0;
    background: rgba(20, 28, 40, .4);
  }

  /* The title and frequent actions remain visible; account tools expand on demand. */
  body[data-theme] .topbar { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  body[data-theme] .topbar h1 { font-size: 24px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  body[data-theme] .topbar .eyebrow { font-size: 11px; }
  body[data-theme] .topbar-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0;
    width: 100%; max-width: none; overflow: visible;
  }
  body[data-theme] .topbar-actions > * { flex: 0 1 auto; min-width: 0; }
  body[data-theme] .topbar-actions > :not(.mobile-actions-trigger):not(.project-state-pill):not(.user-notification-center) { display: none; }
  body[data-theme] .topbar-actions.is-expanded > :not([hidden]) { display: flex !important; }
  body[data-theme] .topbar-actions.is-expanded :is(.account-pill, .presence-pill) { flex: 1 1 100%; justify-content: flex-start; }
  body[data-theme] .topbar-actions.is-expanded > .button { flex: 1 1 140px; }
  body[data-theme] .mobile-actions-trigger { order: 3; margin-left: auto; }
  body[data-theme] .topbar-actions.is-expanded .mobile-actions-trigger { order: 0; }
  body[data-theme] .project-state-pill { min-height: 36px; max-width: 48%; padding: 6px 8px; font-size: 12px; }
  body[data-theme] .notification-trigger { min-height: 44px; width: auto; font-size: 13px; }
  body[data-theme] .account-pill { max-width: 100%; }
  body[data-theme] .managed-project-menu { position: fixed; top: 132px; left: 12px; right: 12px; width: auto; max-width: none; max-height: 60dvh; overflow: auto; }
  body[data-theme] .notification-panel {
    position: fixed; inset: calc(var(--mobile-header-height, 64px) + 8px) 8px auto;
    width: auto; max-width: none; max-height: calc(100dvh - var(--mobile-header-height, 64px) - 16px);
  }
  body[data-theme] .notification-list { max-height: calc(100dvh - var(--mobile-header-height, 64px) - 160px); overscroll-behavior: contain; }
  body[data-theme] .notification-item-content :is(strong, span) { white-space: normal; overflow-wrap: anywhere; }

  /* Touch controls and readable form text, including the iOS focus zoom threshold. */
  body[data-theme] :is(button, summary, .button, .tiny-button, .icon-button) {
    min-height: 44px !important; touch-action: manipulation;
  }
  /* Legacy plan-table rules also use !important; these hit targets must win. */
  body[data-theme] :is(#viewRoot, #modalBackdrop) :is(button, summary) { min-height: 44px !important; }
  body[data-theme] :is(.tiny-button, .button, .table-actions button) { font-size: 13px; line-height: 1.4; }
  body[data-theme] button { min-width: 44px; }
  body[data-theme] .icon-button { min-width: 44px; flex: 0 0 44px; }
  body[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body[data-theme] select,
  body[data-theme] textarea { min-height: 44px; font-size: 16px !important; max-width: 100%; }
  body[data-theme] input:is([type="checkbox"], [type="radio"]) { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; }
  body[data-theme] :is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid var(--primary-top); outline-offset: 2px; }
  body[data-theme] :is(.view-root, .view-root > *, .section, .section-header > *, .section-actions, .filters, .record-form, .record-form > *, .person-combobox) { min-width: 0; }
  body[data-theme] :is(.section-header, .section-actions, .filters) { flex-wrap: wrap; gap: 10px; }
  body[data-theme] .section-header { align-items: stretch; flex-direction: column; padding: 16px; }
  body[data-theme] :is(.section-title, .section-header h2) { font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
  body[data-theme] .section-desc { font-size: 13px; line-height: 1.65; }
  body[data-theme] :is(.filters .input, .filters .select) { width: 100%; min-width: 0; flex: 1 1 180px; }
  body[data-theme] .section-actions > .button { flex: 1 1 120px; white-space: normal; }
  body[data-theme] :is(.section .summary-strip, .plan-efficiency-kpis, .kpi-grid, .my-plan-summary, .execution-metric-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-theme] :is(.summary-label, .my-plan-summary small) { font-size: 12px; }
  body[data-theme] :is(.split-grid, .dashboard-grid, .quick-grid, .org-grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] :is(.section p, .detail-view p) { overflow-wrap: anywhere; }

  /* Comparative data stays in its own scroll region instead of clipping columns. */
  body[data-theme] :is(.table-wrap, .guide-table-wrap, .md-table-wrap, .ab-table-wrap, .ba-table-wrap, .pe-table-wrap, .sf-table-wrap, .sr-table-wrap, .sr-daily-plan-wrap, .lc-product-table-wrap, .jc-table-wrap, .jca-table-wrap, .hr-quality-table, .mobile-table-scroll) {
    min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  body[data-theme] .mobile-table-scroll.has-horizontal-overflow::before {
    content: "左右滑动查看完整表格 →";
    display: block; position: sticky; left: 0; width: fit-content; max-width: 100%;
    padding: 9px 12px; color: var(--muted-strong); font-size: 12px; line-height: 1.5;
  }
  body[data-theme] :is(.table-wrap, .mobile-table-scroll) :is(th, td) { font-size: 13px; }
  body[data-theme] .return-table :is(th, td) { position: static !important; }
  body[data-theme] .return-ledger-panel { min-width: 0; max-width: 100%; }
  body[data-theme] .return-table-wrap { touch-action: pan-x pan-y; overflow-x: auto !important; cursor: auto; }
  body[data-theme] :is(.return-table, .return-action-cell) { transform: none !important; will-change: auto; }
  body[data-theme] .task-table-wrap { overflow: visible; }
  body[data-theme] .task-table .table-actions { grid-template-columns: repeat(2, minmax(44px, 1fr)) !important; }
  body[data-theme] .task-table .table-actions .tiny-button { width: auto; min-width: 44px; min-height: 44px; font-size: 13px; }
  body[data-theme] .task-command-bar { flex-wrap: wrap; }
  body[data-theme] .task-command-search { min-width: 0; width: 100%; flex-basis: 100%; }
  body[data-theme] :is(.task-command-popover, .my-plan-source-popover) { max-width: calc(100vw - 40px); }
  body[data-theme] :is(.task-command-filter-grid, .task-import-toolbar, .my-plan-toolbar) { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] :is(.department-plan-layout, .department-plan-layout.is-sidebar-collapsed, .member-split-layout, .role-management-shell) { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  body[data-theme] :is(.department-plan-nav, .guide-sidebar, .member-department-sidebar) { position: static; width: 100%; max-height: 260px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  body[data-theme] .department-plan-layout.is-sidebar-collapsed .department-plan-nav { max-height: 52px; }
  body[data-theme] :is(.department-plan-content, .role-detail-pane, .role-list-pane, .member-list-panel) { min-width: 0; }
  body[data-theme] .managed-project-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] .managed-project-card { min-width: 0; }
  body[data-theme] .managed-project-card :is(header, footer) { flex-wrap: wrap; }
  body[data-theme] .managed-project-card header > div { min-width: 0; }
  body[data-theme] .managed-project-card h3 { white-space: normal; overflow-wrap: anywhere; }
  body[data-theme] :is(.role-detail-header, .role-auth-toolbar) { min-width: 0; flex-direction: column; align-items: stretch; gap: 10px; }
  body[data-theme] :is(.role-detail-header, .role-auth-toolbar) .table-actions { flex-wrap: wrap; }
  body[data-theme] .role-auth-panel { min-width: 0; grid-template-columns: minmax(0, 1fr); padding: 16px 12px; }
  body[data-theme] .role-permission-search { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] .role-permission-search span { white-space: normal; }
  body[data-theme] :is(.department-plan-detail-head, .department-plan-detail-actions) { flex-wrap: wrap; gap: 8px; }
  body[data-theme] :is(.knowledge-layout, .guide-layout) { grid-template-columns: minmax(0, 1fr); height: auto; }
  body[data-theme] :is(.knowledge-reader, .guide-reader) { min-width: 0; max-height: none; }
  body[data-theme] :is(.knowledge-reader-header, .guide-reader-header) { position: static; flex-direction: column; align-items: stretch; }
  body[data-theme] :is(.knowledge-sidebar, .knowledge-toc-drawer) {
    position: fixed; top: calc(var(--mobile-header-height, 64px) + 8px); right: 8px; bottom: 8px;
    z-index: 121; width: min(390px, calc(100vw - 16px)); height: auto;
    max-height: calc(100dvh - var(--mobile-header-height, 64px) - 16px); overflow: auto;
  }
  body[data-theme] .knowledge-drawer-backdrop { z-index: 120; }
  body[data-theme] .markdown-rendered { padding: 18px 16px 28px; }
  body[data-theme] :is(.markdown-body, .markdown-rendered, .knowledge-content, .guide-content) { font-size: 16px; overflow-wrap: anywhere; }
  body[data-theme] :is(.markdown-body, .markdown-rendered, .knowledge-content, .guide-content) :is(img, video, iframe) { max-width: 100%; }
  body[data-theme] pre { max-width: 100%; overflow: auto; }

  /* Module workspaces: let filters wrap, keep tabs scrollable, stack detail forms. */
  body[data-theme] :is(.ba-shell, .ab-shell, .pe-shell, .sf-shell, .lc-shell) { min-width: 0; padding: 10px; }
  body[data-theme] :is(.ba-tabs, .ab-tabs, .pe-tabs, .sf-workspace-tabs, .lc-tabs, .jc-tabs, .jca-tabs, .role-detail-tabs, .permission-console-tabs) { display: flex; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  body[data-theme] :is(.ba-tabs, .ab-tabs, .pe-tabs, .sf-workspace-tabs, .lc-tabs, .jc-tabs, .jca-tabs, .role-detail-tabs, .permission-console-tabs) > button { flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
  body[data-theme] :is(.ab-header-actions, .ab-card-actions, .ab-section-edit-actions, .ba-filters, .pe-filters, .sf-filters, .lc-filters, .sr-filters, .jca-toolbar) { min-width: 0; flex-wrap: wrap; max-width: 100%; }
  body[data-theme] :is(.ba-hero, .pe-hero, .sf-hero, .lc-hero, .sr-hero, .hr-hero) { padding: 18px; }
  body[data-theme] :is(.ab-header h2, .ba-hero h2, .pe-hero h2, .sf-hero h2, .lc-hero h2, .sr-hero h2, .hr-hero h1) { font-size: 24px; line-height: 1.35; }
  body[data-theme] :is(.ab-profile-grid, .ab-settings-grid, .ba-form-grid, .pe-form-grid, .sf-form-grid, .sf-form-grid.is-five, .sr-form-grid, .lc-form-grid, .jc-form-grid, .jca-form-grid, .permission-query-fields) { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] :is(.ab-profile-grid, .ab-settings-grid, .ba-form-grid, .pe-form-grid, .sf-form-grid, .sr-form-grid, .lc-form-grid, .jc-form-grid, .jca-form-grid) > * { min-width: 0; grid-column: auto; }
  body[data-theme] :is(.ab-kpi-grid, .ba-kpi-grid, .ba-kpi-grid-4, .ba-kpi-grid-3, .pe-kpis, .sf-kpis, .sr-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-theme] :is(.ab-kpi, .ba-kpi) { padding: 14px 12px; }
  body[data-theme] .ab-header-actions > * { min-width: 0; max-width: 100%; }
  body[data-theme] .ab-plan-picker { flex-wrap: wrap; }
  body[data-theme] .ab-plan-picker select { min-width: 0; width: 100%; }
  body[data-theme] .hr-job-list { max-height: 260px; overflow: auto; }
  body[data-theme] .return-hero { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  body[data-theme] .return-hero-copy { min-width: 0; }
  body[data-theme] .return-hero-copy h3 { overflow-wrap: anywhere; }
  body[data-theme] .pe-budget-list > div { grid-template-columns: 28px minmax(0, 1fr) 40px; }
  body[data-theme] .pe-budget-list small { grid-column: 2 / -1; white-space: normal; }
  body[data-theme] :is(.role-list-table, .role-permission-tree) { max-height: 360px; }
  body[data-theme] :is(.role-field-head, .role-field-row) { grid-template-columns: minmax(70px, .7fr) minmax(0, 1fr); }
  body[data-theme] .role-field-row > :last-child { grid-column: 1 / -1; }
  body[data-theme] .capability-center :is(input, select, textarea) { font-size: 16px !important; }

  /* Forms use the available viewport; browser chrome and safe areas remain clear. */
  body[data-theme] :is(.modal-backdrop, .pe-modal, .sf-modal, .sr-modal-backdrop, .lc-modal-backdrop, .ba-modal-backdrop) { padding: 8px; }
  body[data-theme] :is(.modal, .pe-dialog, .sf-dialog, .sr-modal, .lc-modal, .ba-modal-backdrop > .ba-modal) {
    width: 100%; min-width: 0; min-height: 0; max-width: none;
    max-height: calc(100dvh - 16px); border-radius: 12px;
  }
  body[data-theme] .modal { height: auto; }
  body[data-theme] .modal-header { flex: 0 0 auto; padding: 14px; }
  body[data-theme] .modal-header h2 { font-size: 20px; overflow-wrap: anywhere; }
  body[data-theme] .record-form { min-height: 0; padding: 14px 14px max(18px, env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr); overscroll-behavior: contain; }
  body[data-theme] :is(.form-actions, .record-form > footer) { flex-wrap: wrap; gap: 8px; }
  body[data-theme] :is(.form-actions, .record-form > footer) > .button { flex: 1 1 120px; }
  body[data-theme] :is(.detail-meta-grid, .task-import-toolbar, .permission-fields, .managed-project-delete-impact, .return-form-grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] .person-options-panel {
    position: static; width: 100%; min-width: 0; max-width: 100%; max-height: 300px;
    grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); overflow: auto;
  }
  body[data-theme] :is(.person-options-departments, .person-options-members) { min-width: 0; max-height: 280px; overflow: auto; }
  body[data-theme] .person-options-panel button { white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
  body[data-theme] .pe-dialog { overflow: auto; }
  body[data-theme] .sf-preorder-dialog { height: calc(100dvh - 16px); }
  body[data-theme] .sr-detail-body { min-height: 0; overflow: auto; }
  body[data-theme] .sr-history-workspace { max-height: none; }
  body[data-theme] .ba-modal:has(> .ba-dialog) { inset: 0; width: 100%; height: 100dvh; max-height: none; padding: 8px; display: grid; place-items: center; background: rgba(32, 33, 36, .48); }
  body[data-theme] .ba-dialog { width: 100%; min-width: 0; max-height: calc(100dvh - 16px); padding: 16px; }
  body[data-theme] .ba-modal:has(> .ba-dialog) { border: 0; border-radius: 0; box-shadow: none; }
  body[data-theme] :is(.record-form, .ba-dialog, .pe-dialog, .sf-dialog, .sr-modal, .lc-modal, .ba-form-modal) label,
  body[data-theme] :is(.record-form, .ba-dialog, .pe-dialog, .sf-dialog, .sr-modal, .lc-modal, .ba-form-modal) label > span { font-size: 13px; line-height: 1.5; }
  body:has(#modalBackdrop:not([hidden]), .pe-modal, .sf-modal, .sr-modal-backdrop, .lc-modal-backdrop, .ba-modal-backdrop) { overflow: hidden; }
  body[data-theme] .login-screen { min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
  body[data-theme] .login-card { padding: 28px 22px; }
}

@media (max-width: 600px) {
  /* Record lists become labeled cards; financial comparison tables keep columns. */
  body[data-theme] table.mobile-record-table,
  body[data-theme] table.mobile-record-table tbody { display: block; width: 100%; min-width: 0; table-layout: auto; }
  body[data-theme] table.mobile-record-table :is(thead, colgroup) { display: none; }
  body[data-theme] table.mobile-record-table tbody > tr { display: block; margin: 0 0 12px; padding: 4px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  body[data-theme] table.mobile-record-table tbody > tr > td {
    display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 10px;
    position: static; width: auto; min-width: 0 !important; max-width: none;
    padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; border: 0; text-align: left;
  }
  body[data-theme] table.mobile-record-table td[data-label]::before { content: attr(data-label); grid-column: 1; grid-row: 1; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 600; }
  body[data-theme] table.mobile-record-table td[colspan] { display: block; }
  body[data-theme] table.mobile-record-table td > * { grid-column: 2; min-width: 0; max-width: 100%; }
  body[data-theme] table.mobile-record-table .table-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
  body[data-theme] :is(.task-command-filter-grid, .execution-filter-bar, .sf-workspace-tools) { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] .outcome-document-table td { grid-template-columns: 70px minmax(0, 1fr); padding: 12px 10px; }
  body[data-theme] .outcome-document-table td::before { font-size: 12px; }
  body[data-theme] .outcome-document-work-title h3 { white-space: normal; font-size: 14px; }
}

@media (max-width: 360px) {
  body[data-theme] .sidebar .brand-title { font-size: 11px; }
  body[data-theme] .sidebar .brand-subtitle { font-size: 10px; }
  body[data-theme] :is(.ab-kpi-grid, .ba-kpi-grid, .ba-kpi-grid-4, .ba-kpi-grid-3, .pe-kpis, .sf-kpis, .sr-kpis) { grid-template-columns: minmax(0, 1fr); }
  body[data-theme] .topbar h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-backdrop, .sidebar .nav-group-panel { transition: none; }
}