/* Phones (2026-10-12, owner: "the mobile version of the web pages and views is not very usable"; tested at 412 x 915 css px = a Moto G Stylus 2025, 2712 x 1220 px).
   Loaded by every layout AFTER the other stylesheets; everything is inside max-width media queries, so desktop is untouched. Goals: a header that does not eat a third of the screen, one
   scrollable row of tabs instead of three wrapped ones, thumb-sized targets, nothing wider than the screen, and the Alice button out of the way of the content. */

@media (max-width: 640px) {
  /* ---- portal pages (_VerticalLayout): a compact header that scrolls away with the page ---- */
  .vtTop { position: relative; }
  .vtTopRow { padding: 6px 12px; gap: 6px 10px; min-height: 0; }
  .vtLogo img { height: 34px; }
  .vtBrand { padding-left: 0; border-left: 0; gap: 8px; }
  .vtBrand i { width: 30px; height: 30px; line-height: 30px; font-size: .95rem; }
  .vtBrand b { font-size: 1rem; }
  .vtSwitcher > summary { padding: 5px 10px; font-size: .85rem; }
  .vtSwitcherPanel { grid-template-columns: 1fr; width: min(340px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; }
  .vtShell { gap: 4px; padding: 6px 10px 0; }
  .vtLogin { margin-left: auto; }

  /* the clock is a desktop nicety; the zoom controls stay (they are how the text size is changed) */
  #qzClock, .qzClockFloat { display: none !important; }

  /* the welcome pill: the name, the theme switch and sign-out; no "Hello," / "!" / Mail label (the Mail link is in the menu) */
  #userWelcome, .dossierUserWelcome { font-size: 0 !important; white-space: nowrap; max-width: 56vw; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; }
  #userWelcome a.email, .dossierUserWelcome a.email { font-size: .92rem; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  #userWelcome a.email[target="_blank"], .dossierUserWelcome a.email[target="_blank"] { display: none; }
  #userWelcome img, .dossierUserWelcome img, #userWelcome button, .dossierUserWelcome button, #userWelcome .qzThemeToggle { font-size: 1rem; }

  /* ---- the menu button and the page ---- */
  .qzNavToggle { margin: .25rem 0; padding: .5rem .8rem; font-size: 1rem; }
  .vt-home, .tw2, .am, .al { padding-left: 2px; padding-right: 2px; }
  h1 { font-size: 1.6rem; line-height: 1.15; }

  /* ---- tabs: ONE row you can swipe, the current one scrolled into view (js/qizmit.mobile.js) ---- */
  .tw2-nav, .am-tabs, .vmon-tabs, .rd-tabs, [role="tablist"] { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tw2-nav::-webkit-scrollbar, .am-tabs::-webkit-scrollbar, .vmon-tabs::-webkit-scrollbar, [role="tablist"]::-webkit-scrollbar { display: none; }
  .tw2-nav > a, .tw2-nav > span, .am-tabs > button, .vmon-tabs > button, [role="tablist"] > * { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; padding: 11px 13px; }
  .tw2-nav { -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%); }

  /* ---- content ---- */
  .tw2-cols { grid-template-columns: 1fr !important; }
  .tw2-card, .vm-card, .am-card, .qzoa { padding-left: 14px; padding-right: 14px; }
  table { max-width: 100%; }
  .qizmitHeaderTable, .research-table, .vm-table, .am-table, .al table, .al-ind { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 1rem; min-height: 44px; box-sizing: border-box; max-width: 100%; }
  button, .tw-btn, .vm-btn, .vtBtn { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 1.3rem; height: 1.3rem; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  img, video, canvas, iframe { max-width: 100%; }

  /* ---- the Alice button: smaller, tucked in the corner, and the page keeps room under its last line ---- */
  .qza-widget { right: .6rem; bottom: .6rem; }
  .qza-fab { width: 2.9rem; height: 2.9rem; }
  .qza-panel { width: calc(100vw - 1.2rem); right: 0; height: min(34rem, calc(100vh - 6rem)); }
  body { padding-bottom: 4rem; }

  /* ---- the platform pages (_PageTop, an absolutely positioned 64 px bar): logo, zoom and the pill fit one row; the clock goes ---- */
  #dTopDiv img[src*="qizmit_redo_1"] { width: 104px !important; top: 8px !important; }
  #dTopDiv > .qzMagFloat { left: 122px !important; right: auto !important; margin: 0 !important; top: 17px !important; }
  #dTopDiv #qzMag, #dTopDiv .qzMagFloat { position: static !important; right: auto !important; left: auto !important; margin: 0 !important; transform: none !important; }
  #dTopDiv #dLoginDiv { max-width: calc(100% - 120px); overflow: hidden; }
  #dTopDiv .dossierUserWelcome, #dTopDiv #userWelcome { max-width: 100%; box-sizing: border-box; padding-right: 6px; }
  #dTopDiv #dAlertDiv { top: 66px !important; }
  html, body { overflow-x: hidden; max-width: 100vw; }
}

/* very narrow phones */
@media (max-width: 360px) {
  .vtBrand small { display: none; }
  .vtSwitcher > summary { padding: 4px 8px; }
  #userWelcome a.email, .dossierUserWelcome a.email { max-width: 26vw; }
}

@media (max-width: 640px) {
  /* ---- the phone header (2026-10-13, owner: "we almost need a different header bar for the mobile that probably drops the login fields") ----
     Signed out: logo, portal name + switcher, then ONE row: Sign in / Register (the sign-in button opens the full sign-in page). Signed in: logo, name pill. Zoom and clock are gone;
     the browser's own zoom does that job on a phone. */
  #qzMag, .qzMagFloat { display: none !important; }
  .vtLoginFields label { display: none; }
  .vtLoginFields { display: flex; flex-wrap: nowrap; gap: 8px; }
  .vtLogin { margin-left: 0; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
  .vtLogin .dossierLoginWelcome, .vtLogin #_qLoginWelcome, .vtLogin .dossierLoginWelcomeContentDiv, .vtLogin .dossierLoginSection, .vtLogin form { flex: 1 1 auto; min-width: 0; }
  .vtLoginFields .vtBtn { flex: 1 1 0; text-align: center; padding: 9px 10px; min-height: 40px; box-sizing: border-box; }
  .vtLogin #_qLoginWelcome { display: flex; align-items: center; gap: 8px; width: 100%; }
  .vtLogin .dossierLoginWelcomeContentDiv { float: none !important; flex: 1 1 auto; }
  .vtLogin .dossierLoginSection { display: block; width: 100%; }
  .vtLogin .qzThemeToggle { float: none !important; flex: 0 0 auto; height: 40px; order: 2; }
  /* the theme switch lives on the top line, at the right edge of the page, signed in or out */
  .vtTop .qzThemeToggle { position: absolute !important; top: 10px; right: 10px; margin: 0 !important; padding: 0 !important; height: 36px; width: 36px; line-height: 36px; text-align: center; z-index: 5; }
  .vtTopRow { padding-right: 52px; }
  .vtSwitcher > summary { font-size: 0; padding: 7px 10px; }
  .vtSwitcher > summary i { font-size: 1rem; }
  .vtLogin #userWelcome { max-width: 100%; }
  .vtTopRow { align-items: center; }
  .vtTopRow .vtLogin:has(#loginForm) { order: 5; }
}

@media (max-width: 640px) {
  /* ---- 2026-10-13 (owner, from a screenshot): the portal header as a two-row grid. The logo (same size) is centred against both rows; row 1 = portal name + switcher, with the theme switch and the
     sign-out icon in the top-right corner; row 2 = the user-name pill (or Sign in / Register) on its own line; the accent bar sits below. ---- */
  .vtTopRow { display: grid !important; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; align-items: center; padding: 8px 12px; }
  .vtLogo { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .vtBrand { grid-column: 2; grid-row: 1; min-width: 0; }
  .vtSwitcher { grid-column: 3; grid-row: 1; }
  .vtLogin { grid-column: 2 / -1; grid-row: 2; min-width: 0; width: auto; margin: 0; }
  .vtLogin #userWelcome { max-width: 100%; box-sizing: border-box; }
  /* theme switch and sign-out: top right, first line (sign-out outermost) */
  .vtTop .qzThemeToggle { top: 10px; right: 10px; }
  .vtTop #userWelcome .qzThemeToggle { right: 54px; }
  .vtTop #userWelcome .qzLogout { position: absolute !important; top: 10px; right: 10px; width: 36px; height: 36px; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; z-index: 5; }
  .vtTopRow { padding-right: 104px; }   /* room for the two icons on the first line; the pill row is not affected (it is on the second line, inside the grid) */
  .vtTopRow .vtLogin { margin-right: -92px; }   /* ...but let the second row use that space again */

  /* ---- the home pages for administrators put the heading and the admin tile in two columns: one column on a phone, so the text flows across the full width ---- */
  .vt-home:has(> .vt-admintop) { display: block; }
  .vt-home:has(> .vt-admintop) > * { grid-column: auto; grid-row: auto; }
}

@media (max-width: 640px) {
  /* the 44 px touch-height rule must not stretch the header's own small controls (it made the name pill 54 px tall and pushed it over the accent bar) */
  .vtTop button, .vtTop summary { min-height: 0; }
  .vtLogin #userWelcome { padding-top: 2px; padding-bottom: 2px; min-height: 0; line-height: 1.2; }
  .vtLogin #userWelcome .qzImpCaret { padding: 4px 6px; }
  .vtTop .qzThemeToggle, .vtTop #userWelcome .qzLogout { height: 36px; }
}

@media (max-width: 640px) {
  /* the sign-in wrappers carry fixed heights from the desktop bar; on a phone they size to the pill so the accent bar sits below it */
  .vtLogin, .vtLogin #_qLoginWelcome, .vtLogin .dossierLoginWelcomeContentDiv { height: auto !important; min-height: 0 !important; }
  .vtLogin #login { padding: 0 !important; margin: 0 !important; display: block; }
}