/* Phone layout (decision of 5 Nov 2026): same pages and buttons as on the computer, arranged for
   a small screen: smaller cards and headings, long rows of cards scroll sideways, lists wrap.
   Only screens up to 620px wide are affected; the computer layout does not change. The user can
   still ask the browser for the desktop site. */
@media (max-width: 620px) {
  /* Top bar: lighter, the buttons keep their size for the finger. */
  .topbar { gap: 6px; }
  .topbar .seg button, .topbar .lang button { padding: 6px 9px; font-size: 12px; }

  /* Page headings */
  #view .ph h1 { font-size: 19px; line-height: 1.35; }
  #view .ph p { font-size: 12.5px; }
  #view .crumbs { font-size: 11.5px; }
  #view .card { padding: 14px; border-radius: 14px; }

  /* Number cards: compact, two per row. */
  #view .kpi { gap: 3px; padding: 12px; }
  #view .kpi .kv, #view .kv { font-size: 21px; }
  #view .kpi .bub { width: 34px !important; height: 34px !important; }
  #view .kpi .kt, #view .kpi .sm { font-size: 11.5px; }
  #view .grid.c5, #view .grid.c4, #view .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #view .grid.c2, #view .grid.c21 { grid-template-columns: minmax(0, 1fr); }

  /* Quick actions on the home page */
  #view .qa { gap: 8px; }
  #view .qa > * { min-height: 0; padding: 12px 8px; }

  /* Lists (latest tasks, messages…): the title takes its own line instead of shrinking to a
     column one letter wide. */
  #view .list > div { flex-wrap: wrap; row-gap: 4px; }
  #view .list > div > .sp { flex: 1 1 100%; order: 3; min-width: 0; }
  #view .list > div > a.b { min-width: 0 !important; }

  /* Long rows of cards scroll sideways: request types and status counters. */
  #view .tg, #view .stg { display: flex !important; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  #view .tg > .tc { flex: 0 0 96px; min-height: 86px !important; scroll-snap-align: start; }
  #view .stg > .stt { flex: 0 0 132px; scroll-snap-align: start; }

  /* Tabs never cut the last tab: they scroll. */
  #view .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #view .tabs > button { flex: 0 0 auto; white-space: nowrap; }

  /* Charts and donuts: one per row, centred. */
  #view .grid:has(canvas) { grid-template-columns: minmax(0, 1fr) !important; }
  #view .row[style*="flex-wrap:nowrap"] { flex-wrap: wrap !important; justify-content: center; }

  /* Documents: the folders and files first, the folder tree after them. */
  #view .dm { display: flex; flex-direction: column; }
  #view .dm > div:first-child { order: 2; }

  /* Tables keep all their columns and scroll sideways inside their card. */
  #view .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #view table.t th, #view table.t td { padding: 8px 8px; font-size: 12.5px; }

  /* Workflow steps of a request: one row that scrolls. */
  #view .wfrow { flex-wrap: nowrap; overflow-x: auto; }
  #view .wfrow > div { flex: 0 0 auto; min-width: 150px !important; }

  /* Dialogs use the whole width. */
  .modal, .mdl { width: calc(100vw - 16px) !important; max-width: none !important; }
}