/* Phone layout for the GFS app.

   Every rule sits inside the one media query below: a touch-first screen (no hover, coarse
   pointer) that is narrow (portrait phone) or short (landscape phone). A computer with a mouse or
   trackpad never matches it at any window size, so nothing in this file can apply on a desktop.
   base.html also links the file with the same query as its media attribute, and pfg-mobile.js
   checks the same query before doing anything: keep the three copies identical.

   The desktop templates are not edited for this, so the rules reach elements by their existing
   classes and structure, and use !important where the templates' own styles would otherwise win
   (inline styles, and Tailwind's, which load after this file). */
@media (hover: none) and (pointer: coarse) and (max-width: 767px),
       (hover: none) and (pointer: coarse) and (max-height: 500px) {

  /* ── Whole screen ────────────────────────────────────────────────────────────────── */
  /* pfg-mobile.js lets the page fill the screen (viewport-fit=cover), notch strips included, so the
     bottom bar runs edge to edge in landscape. The page keeps its content clear of the notch, the
     rounded corners and the home bar with the safe-area insets (all 0 where a screen has none). */
  body { padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px) !important; padding-right: env(safe-area-inset-right, 0px) !important; }
  /* The white header and footer run edge to edge too; their contents stay clear of the notch. */
  body > header, body > footer { margin-left: calc(0px - env(safe-area-inset-left, 0px));
    margin-right: calc(0px - env(safe-area-inset-right, 0px)); }
  body > header { margin-top: calc(0px - env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  /* Corner buttons (Ask AI, the verification chat) move in by the notch's width. */
  .fixed.right-5 { right: calc(1.25rem + env(safe-area-inset-right, 0px)) !important; }
  .fixed.right-6 { right: calc(1.5rem + env(safe-area-inset-right, 0px)) !important; }
  .bdc { right: env(safe-area-inset-right, 0px) !important; }

  /* ── Module rail becomes a bottom tab bar ─────────────────────────────────────────── */
  body.has-rail { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .app-rail { top: auto !important; bottom: 0; left: 0; right: 0; width: auto !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
    flex-direction: row !important; align-items: stretch !important; justify-content: center;
    border-right: 0 !important; border-top: 1px solid var(--border-subtle, #D9D1CC);
    box-shadow: 0 -2px 10px rgba(51, 51, 51, .05); }
  .app-rail .rail-icons { flex-direction: row !important; gap: 0 !important; width: 100%; max-width: 480px; }
  .app-rail .rail-icon { flex: 1 1 0; width: auto !important; height: 60px !important; flex-direction: column;
    gap: 4px; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
  .app-rail .rail-icon:hover { color: #7E7F7F; }
  .app-rail .rail-icon.is-active, .app-rail .rail-icon.is-open { color: #4D6E82; }
  .app-rail .rail-icon.is-open { background: #EFF3F5 !important; }
  .app-rail .rail-icon::after { content: attr(aria-label); font-size: 10.5px; font-weight: 500;
    line-height: 1.1; letter-spacing: .01em; white-space: nowrap; }
  .app-rail .rail-icon[aria-label="PFG Internal Dashboards"]::after { content: "PFG Internal"; }

  /* Its pop-out panels open as a sheet above the bar. */
  .app-rail .rail-panel { left: env(safe-area-inset-left, 0px) !important; right: env(safe-area-inset-right, 0px);
    width: auto !important; top: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)); max-height: min(72vh, 560px);
    border-right: 0 !important; border-top: 1px solid var(--border-subtle, #D9D1CC);
    border-radius: 12px 12px 0 0; box-shadow: 0 -10px 30px rgba(51, 51, 51, .14) !important; }
  .rail-panel-item, .rail-panel-action, .tree-deal, .tree-leaf { padding-top: 10px; padding-bottom: 10px; }
  .tree-subleaf { padding-top: 8px; padding-bottom: 8px; }

  /* ── Header: brand on one row, search and links on the next ──────────────────────── */
  body > header { position: relative; }
  body > header > div { height: auto !important; flex-wrap: wrap; row-gap: 10px; column-gap: 12px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)) !important; }
  body > header > div > a:first-child { flex: 1 0 100%; }
  body > header > div > div { flex: 1 1 100%; min-width: 0; gap: 14px !important; }
  body > header > div > div > a { white-space: nowrap; }
  /* A borrower's single-dashboard portal has no deal search: its links sit on the right. */
  body > header > div > div:not(:has([x-data="dealSearch()"])) { justify-content: flex-end; }
  body > header [x-data="dealSearch()"] { position: static !important; flex: 1 1 auto; min-width: 0; }
  body > header [x-data="dealSearch()"] > div:first-child { width: 100% !important; }
  body > header [x-data="notifBell()"] { position: static !important; }
  /* Their drop-downs span the header instead of hanging off the left edge of the screen. */
  body > header [x-data="dealSearch()"] > div[x-show],
  body > header [x-data="notifBell()"] > div[x-show] { left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important; }
  /* The name link (the account page) shows as a person icon; the name stays as its text for
     screen readers. */
  body > header a[href="/account/password"] { flex: none; width: 22px; height: 22px; font-size: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662'/%3E%3C/svg%3E") center / 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662'/%3E%3C/svg%3E") center / 22px no-repeat; }

  /* ── Page containers ─────────────────────────────────────────────────────────────── */
  main > div[class*="px-"] { padding-left: 16px !important; padding-right: 16px !important; }
  main > div[class*="py-8"], main > div[class*="py-10"], main > div[class*="py-12"],
  main > div[class*="py-16"] { padding-top: 24px !important; padding-bottom: 28px !important; }
  body > footer > div { padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; }
  /* Nothing in a grid cell or a wrapping row may be wider than the screen: long source names
     wrap, and a drop-down sized to its longest option shrinks to fit. */
  main .grid > * { min-width: 0; }
  main .flex-wrap > * { max-width: 100%; }
  main select { max-width: 100%; }
  main .font-mono, .bd-panel-err { overflow-wrap: anywhere; }
  /* iPhone Safari zooms the whole page into any field whose text is under 16px when it is
     tapped, and leaves it zoomed in. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
    font-size: 16px !important; }

  /* ── Borrower dashboards ─────────────────────────────────────────────────────────── */
  .bd-dash { padding: 18px 16px 24px !important; }
  .bd-dash > div:first-child { position: relative; margin-bottom: 16px !important; }
  .bd-dash > div:first-child > div.flex { flex-wrap: wrap; gap: 8px !important; }
  .bd-dash h1 { font-size: 1.6rem !important; }
  /* Header status chips: their breakdown opens full width under the chip row. */
  .bd-chip-pop { position: static !important; }
  .bd-chip-menu { left: 0 !important; right: 0 !important; top: auto !important; margin-top: 6px;
    min-width: 0 !important; width: auto !important; max-width: none !important; overflow-x: auto; }
  .bd-chip-menu td:last-child { min-width: 220px; }
  .bd-export-menu { width: min(330px, calc(100vw - 32px)) !important; }
  .bd-dash > div.mb-6 { margin-bottom: 16px !important; }

  /* Tiles and cards: less padding, filters two to a row. */
  .bd-tile { padding: 14px 14px 16px !important; }
  .bd-tile-head { gap: 10px !important; }
  .bd-tile-filters { width: 100%; gap: 10px !important; }
  .bd-tile-filters > label { flex: 1 1 140px; min-width: 0; }
  .bd-tile-filters select,
  .bd-tile-filters input:not([type="checkbox"]):not([type="radio"]) { min-width: 0 !important; width: 100%; }
  .bd-kpi { padding: 16px !important; }
  /* A row of cards wraps; small stat cards (a fixed minimum width) sit two to a row. Rows only:
     a wrapping column sizes its cards to their widest content instead of the screen. */
  .bd-tabpanel .flex:not(.flex-col):has(> .bd-card) { flex-wrap: wrap; }
  .bd-tabpanel .bd-card[class*="min-w-["] { flex: 1 1 calc(50% - 8px); }
  .bd-card { overflow-x: auto !important; }

  /* Wide pivots keep scrolling sideways, with a narrower pinned first column. */
  .bd-pivot { max-height: 75vh; }
  .bd-pivot thead th { min-width: 88px !important; }
  .bd-pivot thead th:first-child,
  .bd-pivot td.metric { min-width: 0 !important; width: 160px !important; white-space: normal !important; }

  /* ── Wide tables that sit straight in the page scroll sideways on their own ── */
  .sec-table { display: block; overflow-x: auto; }

  /* ── Forms: fixed 3- and 12-column grids stack (the mapping rows: label above its controls) ── */
  .grid.grid-cols-3 { grid-template-columns: minmax(0, 1fr) !important; }
  .grid.grid-cols-12 > [class*="col-span-"] { grid-column: 1 / -1 !important; }
  .grid.grid-cols-12 > .col-span-4.pt-2 { padding-top: 6px !important; font-weight: 500; }
  .grid.grid-cols-12 > .col-span-8 > .flex { flex-wrap: wrap; }
  .grid.grid-cols-12 > .col-span-8 > .flex > .flex-1 { min-width: 0; }

  /* ── Underwriting dashboard ──────────────────────────────────────────────────────── */
  #dash > div:first-of-type > div.flex { flex-wrap: wrap; gap: 8px !important; }
  #dash > div:first-of-type > div.flex > * { white-space: nowrap; }
  /* Its tabs stay on one line and scroll sideways, like the borrower dashboards'. */
  #dash > div.flex.gap-1.border-b { overflow-x: auto; scrollbar-width: none; }
  #dash > div.flex.gap-1.border-b button { white-space: nowrap; }

  /* A tap leaves :hover stuck on, so hover lifts would stay lifted. */
  .bd-card:hover, .bd-kpi:hover, .bd-card.p-3:hover, .bd-card.p-4:hover { transform: none !important; }
}