/* Load after styles.css and screen.css. Desktop styles remain unchanged. */
@media (max-width: 560px) {
  body { -webkit-text-size-adjust: 100%; }
  .shell { margin-left: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  main { padding: 20px 14px 24px; }
  .panel, .dark-panel, .two-col, .cockpit-grid, .cockpit-bottom { min-width: 0; }

  /* Keep the three existing destinations reachable on phones. */
  .sidebar {
    display: block;
    inset: auto 0 0;
    width: auto;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -5px 18px #14244009;
    z-index: 30;
  }
  .sidebar .brand, .sidebar .nav-label, .sidebar .sidebar-note,
  .sidebar .sidebar-bottom { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .sidebar nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 54px;
    padding: 5px 3px;
    border-radius: 8px;
    font-size: 0;
    color: #7b879b;
    box-shadow: none;
  }
  .sidebar .nav-icon { width: 24px; font-size: 21px; line-height: 1.25; }
  .sidebar nav a::after { font-size: 11px; line-height: 1.5; }
  .sidebar [data-nav="monitor"]::after { content: "填报监测"; }
  .sidebar [data-nav="cockpit"]::after { content: "调度大屏"; }
  .sidebar [data-nav="summary"]::after { content: "项目汇总"; }
  .sidebar nav a.active, .sidebar nav a.active:hover { background: #edf3ff; color: var(--blue); }
  .sidebar nav a:hover { background: #f4f7fc; color: #526e9a; }
  .cockpit-mode .sidebar { background: #14243d; border-color: #2b3d59; }
  .cockpit-mode .sidebar nav a { color: #91a9ca; }
  .cockpit-mode .sidebar nav a.active,
  .cockpit-mode .sidebar nav a.active:hover { background: #213d65; color: #deebff; }

  .topbar { height: auto; min-height: 56px; padding: 10px 14px; gap: 10px; }
  .topbar > div:first-child { min-width: 0; }
  .topbar .muted, .topbar .slash { display: none; }
  #breadcrumb { font-size: 12px; }
  .top-actions { gap: 8px; flex-shrink: 0; }
  .demo-label { padding: 4px 6px; }
  .top-actions .text-button { min-height: 34px; }
  .page-title { gap: 14px; margin-bottom: 18px; }
  .title-actions { width: 100%; gap: 8px; }
  .title-actions .btn { flex: 1; min-height: 42px; }
  .import-banner { padding: 18px 16px; }
  .import-banner .left { align-items: flex-start; gap: 12px; }
  .file-icon { flex-shrink: 0; width: 39px; height: 45px; }
  .import-banner h2 { font-size: 16px; }
  .import-banner p { line-height: 1.8; }
  .banner-actions { width: 100%; justify-content: space-between; gap: 10px; }
  .banner-actions .btn, .banner-actions .text-button { min-height: 42px; }
  .stat { padding: 14px 12px; }
  .stat-label { gap: 5px; font-size: 11px; }
  .stat-label .tile-symbol { width: 23px; height: 23px; flex-shrink: 0; }
  .stat-value, .cockpit-mode .stat-value { font-size: 24px; overflow-wrap: anywhere; }
  .stat-value small { font-size: 10px; margin-left: 4px; }
  .stat-sub { line-height: 1.7; }
  .panel-title { padding: 15px 16px; flex-wrap: wrap; gap: 6px; }
  .panel-title small { line-height: 1.7; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 9px; }
  .filters .search { grid-column: 1 / -1; min-width: 0; max-width: none; width: 100%; font-size: 16px; }
  .filters select { width: 100%; min-width: 0; min-height: 42px; }
  .filters .text-button { min-height: 36px; text-align: left; }
  .filter-count { margin-left: 0; text-align: right; font-size: 11px; }
  .filters.panel .filter-count { grid-column: 1 / -1; text-align: left; }

  /* Only the reporting ledger becomes cards; summary tables still scroll. */
  #project-table .table-wrap { overflow: visible; }
  #project-table table { display: block; white-space: normal; }
  #project-table thead { display: none; }
  #project-table tbody { display: grid; gap: 12px; padding: 12px; }
  #project-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 15px;
    border: 1px solid #e4eaf3;
    border-radius: 10px;
    background: #fff;
  }
  #project-table td { display: grid; align-content: start; justify-items: start; gap: 5px; padding: 0; border: 0; min-width: 0; font-size: 12px; }
  #project-table td:first-child { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid #edf0f6; }
  #project-table .project-name { max-width: none; min-height: 36px; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
  #project-table .project-code { margin-top: 0; overflow-wrap: anywhere; }
  #project-table td:nth-child(n+2):nth-child(-n+7)::before { color: #8995a8; font: 10px/1.5 "Microsoft YaHei", "PingFang SC", sans-serif; }
  #project-table td:nth-child(2)::before { content: "所属地区"; }
  #project-table td:nth-child(3)::before { content: "年度计划投资 / 万元"; }
  #project-table td:nth-child(4)::before { content: "形象进度"; }
  #project-table td:nth-child(5)::before { content: "建设状态"; }
  #project-table td:nth-child(6)::before { content: "填报状态"; }
  #project-table td:nth-child(7)::before { content: "填报日期"; }
  #project-table td:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 11px; border-top: 1px solid #edf0f6; }
  #project-table .row-action { min-height: 40px; padding: 8px 14px; border: 1px solid #dfe8fc; border-radius: 6px; background: #f4f7ff; }
  #project-table .amount { font-size: 14px; }
  #project-table .progress-line { min-height: 23px; }
  .table-wrap, .preview-list { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .panel > .table-wrap table { min-width: 650px; }
  .table-bottom { flex-direction: column; gap: 5px; padding: 12px 16px; }
  .chart-body { padding: 22px 16px; }
  .donut-layout { flex-wrap: wrap; gap: 22px; }
  .donut-legend { width: 100%; min-width: 0; }
  .donut-legend div { font-size: 12px; }
  .page-footer { padding: 0 14px 16px; gap: 4px; }
  #toast { left: 50%; bottom: calc(83px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 28px); width: max-content; padding: 10px 16px; }

  .cockpit-title h1 { font-size: 21px; letter-spacing: 1px; line-height: 1.6; }
  .cockpit-title p { font-size: 10px; letter-spacing: .5px; }
  .cockpit-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cockpit-controls select, .cockpit-controls .btn { min-width: 0; width: 100%; min-height: 41px; }
  .cockpit-controls .demo-label { grid-column: 1 / -1; justify-self: center; }
  .completion-block { gap: 14px; padding: 16px 12px; }
  .completion-ring { width: 90px; height: 90px; }
  .completion-ring span { font-size: 22px; }
  .completion-copy { min-width: 0; overflow-wrap: anywhere; }
  .dark-panel h2 { flex-wrap: wrap; gap: 5px; }
  .fullscreen .sidebar { display: none; }
  .fullscreen .shell { padding-bottom: 0; }
  .fullscreen main { padding: 18px 14px 30px; }
  .fullscreen .cockpit-title h1 { font-size: 23px; }
  .fullscreen .cockpit-controls { position: sticky; top: 0; z-index: 15; background: #0e1d34; padding: 8px 0 10px; }
  .fullscreen [data-action="fullscreen"] { order: -1; grid-column: 1 / -1; }

  /* A bounded dialog keeps its close and primary action visible. */
  dialog {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto;
    overflow: hidden;
    border-radius: 12px;
  }
  dialog[open] { display: flex; flex-direction: column; }
  .modal-header { position: static; flex-shrink: 0; align-items: flex-start; padding: 15px 16px; gap: 12px; }
  .modal-header > div { min-width: 0; }
  .modal-header h2 { font-size: 16px; overflow-wrap: anywhere; }
  .modal-header p { overflow-wrap: anywhere; line-height: 1.7; }
  .close { width: 36px; height: 36px; flex-shrink: 0; }
  .modal-body { padding: 18px 16px; min-height: 0; max-height: none; flex: 1 1 auto; overflow: auto; overscroll-behavior-y: contain; }
  .modal-footer { position: static; flex-shrink: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 14px; }
  .modal-footer > span { max-width: none; font-size: 10px; line-height: 1.7; }
  .modal-footer .actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .modal-footer .actions .btn { flex: 1; min-width: 0; min-height: 42px; padding: 9px 10px; white-space: normal; line-height: 1.5; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field.full { grid-column: auto; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 43px; }
  .description-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .description-grid dd { overflow-wrap: anywhere; }
  .steps { gap: 6px; padding-bottom: 16px; margin-bottom: 18px; }
  .step { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 10px; }
  .dropzone { padding: 25px 14px; }
  .dropzone h3 { font-size: 15px; }
  .dropzone p { font-size: 11px; line-height: 1.9; }
  .dropzone .btn { min-height: 42px; }
  .import-alternative { flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; }
  .import-alternative button { min-height: 38px; }
  .sheet-controls { gap: 12px; }
  .sheet-controls .field { min-width: 0; width: 100%; }
  .sheet-controls .field select { width: 100%; }
  .info-strip, .validation-note { overflow-wrap: anywhere; }
  .mapping-table { display: block; white-space: normal; }
  .mapping-table thead { display: none; }
  .mapping-table tbody { display: grid; gap: 10px; }
  .mapping-table tr { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
  .mapping-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .mapping-table td:first-child { font-weight: 500; }
  .mapping-table select { min-width: 0; width: 100%; min-height: 43px; font-size: 16px; }
  .mapping-table .sample { max-width: none; white-space: normal; overflow-wrap: anywhere; font-size: 11px; }
  .mapping-table .sample::before { content: "首条数据："; color: #a1aab9; }
  .preview-list { max-height: 240px; }
  .preview-list table { min-width: 600px; }
  .preview-list th:last-child, .preview-list td:last-child { position: sticky; right: 0; background: #fff; box-shadow: -5px 0 9px #14244008; }
  .preview-list th:last-child { background: #f9fafc; }
  .preview-list tr.selected td:last-child { background: #edf3ff; }
  .preview-list .row-action { min-height: 36px; }
  .review-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}