/* Shared compact layout for phone and fold devices. */
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  body.menu-open { overflow: hidden; }
  body:has(.detail-dialog[open]) { overflow: hidden; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(284px, calc(100vw - 40px)); transform: translateX(-100%); box-shadow: var(--shadow-dialog); transition: transform 180ms ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: inline-grid; flex: 0 0 auto; }
  .workspace { padding: 0 var(--space-page-mobile) 24px; overflow-x: hidden; }
  .menu-button { display: inline-grid; }
  .topbar { height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr; column-gap: 9px; align-content: center; }
  .menu-button { grid-column: 1; grid-row: 1; align-self: center; }
  .mobile-page-heading { grid-column: 2; grid-row: 1; display: flex; align-self: center; }
  .top-actions { grid-column: 3; grid-row: 1; align-self: center; }
  .workspace-title { display: none; }
  .page-header { padding: 8px 0 10px; align-items: center; justify-content: flex-end; }
  .page-header:not(:has(.primary-button)) { display: none; }
  .page-header > div { display: none; }
  .primary-button { min-height: 34px; font-size: 13px; }

  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { min-height: 82px; padding: 10px 10px 10px 14px; gap: 3px; }
  .metric-card::before { inset-block: 11px; }
  .metric-card strong { font-size: 18px; }
  .metric-card small { line-height: 1.25; }
  .monitor-panel, .activity-panel, .content-panel, .overview-card { margin-top: 12px; }
  .panel-body, .activity-panel, .content-panel { padding: 14px; }
  .panel-heading h2 { font-size: 17px; }
  .nas-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 14px 0; }
  .nas-stats div { padding: 10px; }
  .nas-stats div:nth-child(2) { border-right: 0; }
  .nas-stats div:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }

  .table-wrap { overflow: visible; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap tr { margin: 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; padding: 9px 2px; }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap tr:hover { background: var(--color-surface-hover); }
  .table-wrap td { display: grid; grid-template-columns: minmax(98px, 40%) minmax(0, 1fr); gap: 8px; border: 0; padding: 6px 0; overflow-wrap: anywhere; }
  .table-wrap td::before { content: attr(data-label); color: var(--color-text-muted); font-size: 12px; font-weight: 700; }
  .network-monitor-panel .panel-body { padding: 9px 10px 10px; }
  .network-monitor-panel .nas-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 7px; }
  .network-monitor-panel .nas-stats div { padding: 7px 5px; border-right: 1px solid var(--color-monitor-value-border); border-bottom: 0; text-align: center; }
  .network-monitor-panel .nas-stats div:last-child { border-right: 0; }
  .network-monitor-panel .nas-stats span { font-size: 11px; line-height: 1.15; }
  .network-monitor-panel .nas-stats strong { font-size: 16px; }
  .network-monitor-panel .nas-stats small { display: none; }
  .network-monitor-panel .nas-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 38px; padding: 6px 2px; }
  .network-monitor-panel .nas-table td { display: block; width: auto; padding: 2px 0; }
  .network-monitor-panel .nas-table td::before { display: none; }
  .network-monitor-panel .nas-table td:nth-child(3),
  .network-monitor-panel .nas-table td:nth-child(4),
  .network-monitor-panel .nas-table td:nth-child(6) { display: none; }
  .network-monitor-panel .nas-table td:first-child { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .network-monitor-panel .nas-table td:nth-child(2),
  .network-monitor-panel .nas-table td:nth-child(5) { text-align: right; white-space: nowrap; }
  .network-monitor-panel .nas-table td:nth-child(5)::after { content: " user"; color: var(--color-text-muted); font-size: 11px; font-weight: 500; }
  .traffic-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 8px; }
  .traffic-controls select { width: 100%; min-width: 0; }
  .traffic-controls span { justify-self: end; align-self: center; margin: 0; }
  .traffic-chart { height: 96px; }

  .tool-grid, .config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tool-card, .config-card { min-height: 112px; padding: 12px 12px 12px 15px; }
  .tool-card::before, .config-card::before { inset-block: 13px; }
  .tool-card strong, .config-card strong { font-size: 14px; }
  .tool-card span, .config-card span { font-size: 12px; }
  .search-input { width: 150px; }

  .voucher-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: stretch; }
  .voucher-toolbar > span { margin: 0; text-align: right; }
  .voucher-toolbar > div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voucher-toolbar button { min-width: 0; padding: 0 8px; font-size: 12px; }
  .voucher-table .table-wrap tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 2px 9px; padding: 8px 2px; }
  .voucher-table .table-wrap td { display: block; width: auto; padding: 3px 0; }
  .voucher-table .table-wrap td:first-child { position: relative; grid-column: 1; grid-row: 1 / 4; align-self: stretch; display: block; padding: 0; }
  .voucher-table .table-wrap td:first-child .table-checkbox { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); }
  .voucher-table .table-wrap td:nth-child(2) { grid-column: 2; grid-row: 1; min-width: 0; }
  .voucher-table .table-wrap td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  .voucher-table .table-wrap td:nth-child(4) { grid-column: 2 / -1; grid-row: 3; }
  .voucher-table .table-wrap td:nth-child(5) { grid-column: 3; grid-row: 1; text-align: right; }
  .voucher-table .table-wrap td:first-child::before,
  .voucher-table .table-wrap td:nth-child(2)::before,
  .voucher-table .table-wrap td:nth-child(5)::before { display: none; }
  .voucher-table .table-wrap td:nth-child(3),
  .voucher-table .table-wrap td:nth-child(4) { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px; font-size: 12px; }
  .voucher-pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; justify-content: stretch; }
  .voucher-pagination > span { margin: 0; }
  .voucher-pagination > strong { justify-self: end; }
  .voucher-pagination label { grid-column: 1; }
  .voucher-pagination > div { grid-column: 2; justify-self: end; }
  .detail-dialog, .detail-dialog:has(.split-content), .detail-dialog:has(.identity-workspace), .detail-dialog:has(.voucher-print-dialog) { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; margin: 0; }
  .detail-dialog:has(.identity-workspace), .identity-workspace { overflow: hidden; }
  .detail-dialog article { height: 100%; display: flex; flex-direction: column; padding: 16px; }
  .detail-dialog form { min-height: 0; flex: 1; display: flex; flex-direction: column; }
  .detail-dialog .form-grid { flex: 1; align-content: start; grid-auto-rows: max-content; overflow: auto; padding: 18px 0; }
  .detail-dialog footer { position: sticky; bottom: 0; padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  .form-grid { grid-template-columns: 1fr; gap: 11px; }
  .split-content { display: block; max-height: none; overflow: auto; }
  .permission-grid { grid-template-columns: 1fr; }
  .identity-workspace { min-height: 100%; max-height: none; }
  .identity-workspace .identity-content { flex: 1; overflow-y: auto; padding-top: 12px; }
  .identity-tabs { margin-top: 12px; }
  .identity-tabs .tab-button { padding: 9px 7px; font-size: 12px; }
  .identity-section-heading { align-items: center; margin-bottom: 12px; }
  .identity-user-filters, .identity-user-list { grid-template-columns: 1fr; }
  .identity-user-record { min-height: 82px; padding: 10px; }
  .identity-user-create form > .form-grid { overflow: visible; padding: 2px 0 12px; }
  .custom-role-settings { padding: 10px; }
  .role-preset-actions { align-items: stretch; flex-direction: column; }
  .activity-panel .panel-heading { align-items: center; }
}

/* HP: one-column task surfaces with short, reachable controls. */
@media (max-width: 520px) {
  .page-header { align-items: center; }
  .page-header .primary-button { max-width: 164px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-grid, .config-grid { grid-template-columns: 1fr; }
  .panel-heading { align-items: flex-start; }
  .panel-heading .search-input { width: 126px; }
  .overview-card { align-items: flex-start; }
  .network-monitor-panel .panel-tabs { gap: 12px; padding-inline: 8px; }
  .network-monitor-panel .tab-button { padding: 7px 2px 5px; font-size: 14px; }
  .network-monitor-panel .panel-body { padding: 6px 8px 7px; }
  .network-monitor-panel .nas-stats { margin-bottom: 4px; }
  .network-monitor-panel .nas-stats div { padding: 5px 2px; }
  .network-monitor-panel .nas-stats span { font-size: 9px; }
  .network-monitor-panel .nas-stats strong { font-size: 15px; }
  .network-monitor-panel .nas-table .empty-state { padding: 5px 1px 2px; font-size: 11px; line-height: 1.3; }
  .network-monitor-panel .nas-table tr { min-height: 32px; padding-block: 3px; }
  .network-monitor-panel .traffic-controls { gap: 4px 6px; margin-bottom: 4px; }
  .network-monitor-panel .traffic-controls label { gap: 4px; font-size: 10px; }
  .network-monitor-panel .traffic-controls select { min-height: 32px; padding: 5px 7px; font-size: 11px; }
  .network-monitor-panel .traffic-controls span { grid-column: 1 / -1; font-size: 10px; }
  .traffic-legend { gap: 7px; margin-top: 4px; font-size: 10px; }
  .traffic-legend strong { font-size: 10px; }
  .voucher-mode-switch { width: 100%; }
  .voucher-filter-panel form { grid-template-columns: 1fr; }
  .voucher-filter-actions, .voucher-filter-scope { grid-column: 1; }
  .voucher-batch-list { grid-template-columns: 1fr; }
  .voucher-batch-actions button { flex: 1; padding-inline: 8px; }
  .voucher-pagination { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .voucher-pagination > span { margin: 0; }
  .voucher-pagination > strong { grid-column: 1; }
  .voucher-pagination > div { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 430px) {
  .top-actions { gap: 5px; }
  .mobile-page-heading h1 { font-size: 18px; }
  .overview-card { padding: 13px; }
  .overview-card strong { font-size: 19px; }
  .overview-card small { display: none; }
  .search-input { width: 128px; }
  .business-logo-picker { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .profile-business-mark { width: 56px; height: 56px; border-radius: var(--radius-control); font-size: 16px; }
}

@media (max-width: 620px) {
  .migration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .migration-summary div { padding: 8px; }
  .migration-summary strong { font-size: 16px; }
}

/* Fold: two-column summaries with full-screen task forms. */
@media (min-width: 521px) and (max-width: 860px) {
  .workspace { padding: 0 20px 28px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-grid, .config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-dialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .identity-user-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .identity-user-filters { grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(130px, 0.75fr)); }
}

/* Desktop: persistent navigation and wider operational density. */
@media (min-width: 861px) {
  .app-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tool-grid, .config-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-button, .sidebar-close { display: none; }
}