/* =====================================================================
   Screen fit (docs/requirements/screen-fit.md, rules F1-F6).
   Loaded last, so it wins over styles.css and prism-theme.css. Every rule
   here answers a measured fault; the tests in tests/e2e/test_screen_fit.py
   say which.
   ===================================================================== */

/* F3 above phone widths: nothing under 13px (was 8.5-12px). */
.badge, small, .small, .form-label, .metric-label,
#summarySection .metric-label, #resourcesSheet th, #projectStatus {
  font-size: 13px;
}
.metric-label, #summarySection .metric-label { letter-spacing: 0.2px; }
.balance-scale, .form-check-label { font-size: 13px; }

/* F4 above phone widths: at least 24x24 (WCAG 2.2). */
a.small { display: inline-flex; align-items: center; min-height: 24px; }
#validationBanner summary { min-height: 24px; display: list-item; padding: 2px 0; }
.form-check-label { min-height: 24px; display: inline-flex; align-items: center; }
/* Inside the grids and the Gantt, too (their own sheets say 12px). */
.ag-theme-balham .ag-cell, .ag-theme-balham .ag-cell-value,
.ag-theme-balham .ag-header-cell-text, .ag-theme-balham .ag-header-group-text,
#ganttChart .gantt_tree_content, #ganttChart .gantt_scale_cell,
#ganttChart .gantt_scale_cell span, #resourcesSheet thead th {
  font-size: 13px;
}

/* F4: the grid's filter boxes and filter buttons (16-18px in balham). */
.ag-theme-balham .ag-floating-filter-input .ag-input-field-input { min-height: 24px; }
.ag-theme-balham .ag-floating-filter-button-button { min-width: 24px; min-height: 24px; }

/* F1/F2: the grid toolbar wraps instead of pushing the page sideways, and
   the formula bar takes whatever room is left (a whole row on a phone). */
.excel-toolbar { flex-wrap: wrap; row-gap: 6px; }
.excel-toolbar .formula-bar { flex: 1 1 240px; min-width: 0; }
.excel-toolbar .formula-bar input { min-width: 0; width: 100%; }

/* F1: summary metrics wrap their words rather than run off the card. */
#summarySection .metric { white-space: normal; overflow-wrap: anywhere; }

/* ---- Phones: 360-430px ------------------------------------------------ */
@media (max-width: 430px) {
  /* F3: nothing under 14px. */
  body, .card-body .card-title, .badge, small, .small, .form-label, .nav-link,
  .btn, .metric-label, #summarySection .metric-label, #resourcesSheet th,
  #resourcesSheet td, .text-muted, #validationBanner, #projectStatus,
  .excel-toolbar button, .excel-toolbar #cellAddress, .form-control, .form-select,
  .balance-scale, .form-check-label, estate-header [slot="nav"] {
    font-size: 14px;
  }
  .ag-theme-balham .ag-cell, .ag-theme-balham .ag-cell-value,
  .ag-theme-balham .ag-header-cell-text, .ag-theme-balham .ag-header-group-text,
  #ganttChart .gantt_tree_content, #ganttChart .gantt_scale_cell,
  #ganttChart .gantt_scale_cell span, #resourcesSheet thead th {
    font-size: 14px;
  }

  /* F4: every control at least 44x44. */
  .btn, .nav-link, .form-control, .form-select, .excel-toolbar button,
  .excel-toolbar .formula-bar input, input[type=range] {
    min-height: 44px;
  }
  .btn, .excel-toolbar button { min-width: 44px; }
  .nav-link { display: flex; align-items: center; }
  /* The app's own action in the hub's bar (light DOM, so ours to size). */
  estate-header [slot="nav"] { display: inline-flex; align-items: center; min-height: 44px; }
  a.small, a.btn-link { display: inline-flex; align-items: center; min-height: 44px; }
  .form-check-input { width: 22px; height: 22px; }
  .form-check-label { min-height: 44px; padding-left: 4px; }
  #validationBanner summary { min-height: 44px; padding: 11px 0; }
  .custom-context-menu-item { min-height: 44px; display: flex; align-items: center; }

  /* The grid's filter row folds away on a phone (too narrow to use; the
     column menus still filter): see js/table.js. */
  .ag-theme-balham .ag-header-row-column-filter { display: none; }

  /* F1: the summary's six figures in two columns. */
  #summarySection .row-cols-auto > * { flex: 0 0 50%; max-width: 50%; }
}

/* ---- F6: dark, when the device is (js/theme.js sets data-bs-theme) ------
   Surfaces match the hub header's dark palette, so bar and page read as one. */
[data-bs-theme="dark"] {
  --prism-primary-text: #c9b6ff;   /* #30016a text was 1.1:1 on dark (#165) */
  --prism-background: #14111b;
  --prism-body-text: #e6e3ee;
  --prism-muted: #a8a2b8;
  --prism-border: #3a3150;
  --prism-card-border: rgba(185, 161, 255, 0.14);
  --prism-secondary-bg: #2a2340;
  --prism-secondary-hover: #463a66;
  --prism-primary-a08: rgba(185, 161, 255, 0.12);
  --prism-primary-a15: rgba(185, 161, 255, 0.20);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] body { color: var(--prism-body-text); }
[data-bs-theme="dark"] .card { background: #1d1926; }
[data-bs-theme="dark"] .card-title { color: #c9b6ff !important; }
[data-bs-theme="dark"] .metric,
[data-bs-theme="dark"] #runsList button { background: #262135; color: var(--prism-body-text); }
[data-bs-theme="dark"] #uploadArea { background: rgba(255, 255, 255, 0.03); }
[data-bs-theme="dark"] .excel-toolbar { background: #221d2e !important; }
[data-bs-theme="dark"] .ag-theme-balham {
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.03);
  --ag-row-hover-color: rgba(185, 161, 255, 0.12);
}
/* The grid's change highlights, as tints that keep light text readable. */
[data-bs-theme="dark"] .cell-editable { background-color: rgba(96, 165, 250, 0.12) !important; }
[data-bs-theme="dark"] .cell-changed { background-color: rgba(250, 204, 21, 0.18) !important; }
[data-bs-theme="dark"] .cell-improved { background-color: rgba(52, 211, 153, 0.18) !important; }
[data-bs-theme="dark"] .cell-delayed { background-color: rgba(248, 113, 113, 0.18) !important; }

/* ---- Contrast, both themes (#165 item 2; tests/e2e/test_theme_contrast.py) ---- */
[data-bs-theme="dark"] .card-header { background-color: #1d1926; }
[data-bs-theme="dark"] .excel-toolbar button { background: #2a2340; }
[data-bs-theme="dark"] .btn-outline-success { color: #75b798; border-color: #75b798; }
[data-bs-theme="dark"] .btn-outline-danger { color: #ea868f; border-color: #ea868f; }
[data-bs-theme="dark"] .gantt_row.odd,
[data-bs-theme="dark"] .gantt_task_row.odd { background-color: rgba(255, 255, 255, 0.04); }
[data-bs-theme="light"] .metric-value.text-warning { color: #b45309 !important; }
[data-bs-theme="light"] .metric-value.text-info { color: #0e7490 !important; }
.badge.bg-warning { color: #212529; }
.optimized-task .gantt_task_content { color: #fff; }  /* not 90% white */

/* F1: a long Gantt heading ("Optimized Resource") wraps to two lines, not cut. */
#ganttChart .gantt_grid_head_cell {
  white-space: normal; line-height: 1.2 !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* "Task N" in a validation message is a link to the task's row (#165): a
   target a finger can hit (F4: 44 x 44 on phones, 24 x 24 above). */
#validationBanner a[data-task-id] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; min-width: 24px; vertical-align: middle;
}
@media (max-width: 430px) {
  #validationBanner a[data-task-id] { min-height: 44px; min-width: 44px; }
}