/* ──────────────────────────────────────────────────────────────────────────
   Eden on phones and tablets — shared by every signed-in layout
   (portal_base, accounts/base, admin_base) and the public module pages.

   Three things, measured rather than guessed (see mobile_audit in the
   handover notes): controls large enough to hit with a thumb, text large
   enough to read, and the "Go to" finder with the phone tab bar.

   Every rule that changes size is inside a max-width query, so the desktop
   layout is untouched.
   ────────────────────────────────────────────────────────────────────────── */

/* ── "Go to" finder — every width ──────────────────────────────────────── */
.goto { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; }
.goto[hidden] { display: none; }
.goto-scrim { position: absolute; inset: 0; background: rgba(10, 20, 14, .45); }
.goto-panel { position: relative; width: min(640px, 100% - 2rem); margin-top: 10vh; max-height: 76vh;
              display: flex; flex-direction: column; background: var(--paper, #fff); color: var(--ink, #1a1208);
              border: 1px solid var(--border, #e2d9cc); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; }
.goto-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem .55rem 1rem;
             border-bottom: 1px solid var(--border, #e2d9cc); }
.goto-head > i { color: var(--muted, #6b5d4f); font-size: 1.05rem; }
.goto-head input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: inherit;
                   font-size: 16px; padding: .6rem 0; min-height: 44px; box-shadow: none; }
.goto-x { width: 44px; height: 44px; border: none; background: transparent; color: var(--muted, #6b5d4f);
          border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.goto-x:hover { background: var(--parch, #f6f3ee); }
.goto-body { overflow-y: auto; padding: .35rem; overscroll-behavior: contain; }
.goto-sec { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
            color: var(--muted, #6b5d4f); padding: .7rem .7rem .3rem; }
.goto-item { display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: .4rem .7rem;
             border-radius: 9px; color: inherit; text-decoration: none; }
.goto-item i { width: 1.2rem; text-align: center; color: var(--forest, #0d3320); opacity: .8; flex: 0 0 auto; }
.goto-item .t { flex: 1; min-width: 0; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goto-item .s { flex: 0 1 auto; max-width: 45%; font-size: .75rem; color: var(--muted, #6b5d4f);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goto-item.on, .goto-item:hover { background: var(--parch, #f6f3ee); color: var(--ink, #1a1208); }
.goto-none { padding: 1.25rem; text-align: center; color: var(--muted, #6b5d4f); font-size: .9rem; }
.goto-foot { gap: 1.1rem; padding: .55rem 1rem; border-top: 1px solid var(--border, #e2d9cc);
             font-size: .74rem; color: var(--muted, #6b5d4f); }
.goto-foot kbd { font-size: .68rem; padding: .05rem .35rem; margin-right: .2rem; background: var(--parch, #f6f3ee);
                 color: var(--ink, #1a1208); border: 1px solid var(--border, #e2d9cc); border-radius: 4px; }
html.goto-open { overflow: hidden; }

/* The topbar's "Go to" button, on wide screens; phones have the tab bar. */
.goto-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .25rem .5rem .25rem .7rem;
            border-radius: 7px; border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit;
            font-size: .82rem; white-space: nowrap; }
.goto-btn kbd { font-size: .68rem; padding: .02rem .35rem; border-radius: 4px; background: rgba(127,127,127,.18); color: inherit; }
.goto-btn.on-dark { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); }
.goto-btn.on-dark:hover { background: rgba(255,255,255,.1); }
.goto-btn.on-light { color: var(--muted, #6b5d4f); }
.goto-btn.on-light:hover { background: rgba(0,0,0,.04); }

/* ── Phone tab bar ─────────────────────────────────────────────────────── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: flex;
          background: var(--paper, #fff); border-top: 1px solid var(--border, #e2d9cc);
          box-shadow: 0 -4px 18px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom, 0); }
.tabbar a, .tabbar button { flex: 1 1 0; min-height: 58px; display: flex; flex-direction: column; align-items: center;
                            justify-content: center; gap: .15rem; border: none; background: transparent;
                            color: var(--muted, #6b5d4f); font-size: 12px; text-decoration: none; padding: .3rem 0; }
.tabbar i { font-size: 1.25rem; line-height: 1; }
.tabbar .on { color: var(--forest, #0d3320); font-weight: 600; }
.tabbar a:active, .tabbar button:active { background: var(--parch, #f6f3ee); }
@media (max-width: 991.98px) {
  body:has(.tabbar) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .goto-panel { width: 100%; max-height: none; height: 100%; margin: 0; border-radius: 0; border: none; }
  .goto-scrim { display: none; }
}
@media print { .tabbar, .goto, .goto-btn { display: none !important; } }

/* ── Thumb-sized controls ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .btn, .btn-p, .btn-o, .btn-eden, .btn-outline, .btn-amber, .btn-mini, .btn-outline-eden,
  .cfg-btn-eden, .cfg-btn-outline, .btn-submit, .btn-plan {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  }
  .btn.w-100, .w-100.btn-eden, .w-100.btn-outline { display: flex; }
  /* Every other button-like control the older screens style their own way
     (btn-a, btn-admin, btn-danger-sm…): at least thumb height. */
  a[class*="btn"]:not(.btn-close) { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
  main button:not(.btn-close):not(.goto-x), .main-content button:not(.btn-close),
  .admin-main button:not(.btn-close) { min-height: 40px; }
  .rev-tabs { overflow-x: auto; scrollbar-width: none; }
  .rev-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  .btn-sm { min-height: 40px; min-width: 40px; }
  .form-control, .form-select, input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="url"], input[type="tel"], input[type="search"],
  input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea {
    min-height: 44px; font-size: 16px;            /* 16px: iPhone does not zoom into the field */
  }
  textarea { min-height: 88px; }
  input[type="checkbox"], input[type="radio"], .form-check-input { min-height: 0; width: 1.25rem; height: 1.25rem; }
  .form-check { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding-left: 0; }
  .form-check .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
  .form-switch .form-check-input { width: 2.4rem; }
  .chip-link, .core-nav a, .page-link, .lib-tag[href] { min-height: 40px; display: inline-flex; align-items: center; }
  .dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .sidebar .nav-link, #mobileNav .nav-link, .offcanvas .nav-link, #adminMobileNav a { min-height: 46px; }
  .sid-group-hdr { min-height: 44px; }
  .btn-close { width: 44px; height: 44px; padding: 0; background-size: .9rem; }
  .row-del, .icon-btn { min-width: 40px; min-height: 40px; }
  /* Topbar controls: menu, appearance, language, account. */
  .topbar-menu, .btn-mob-toggle, .topbar .btn.d-lg-none, button.eden-theme-btn, button.eden-lang-btn {
    min-width: 44px !important; min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center;
  }
  .topbar-user { min-height: 44px; }
  .topbar { padding-left: .6rem !important; padding-right: .6rem !important; gap: .4rem !important; }
  .topbar-brand, .admin-brand { min-height: 44px; display: inline-flex; align-items: center; }
  /* Footer links were 16px-tall lines of text. */
  footer a, .portal-footer a { display: inline-block; padding: .75rem .2rem; min-height: 44px; }
  .year-pill, .btn-view, .add-param-btn, .btn-mini, .cfg-nav a, .tab, .rev-tab-btn {
    min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  main a.small-note:not(p a), .main-content a.small-note { min-width: 40px; }
  .month-select button, [onclick^="selectMonths"] { min-height: 40px; padding: .35rem .75rem; }
  /* Map zoom buttons. */
  .leaflet-container .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
  /* Links that stand alone in a card header ("All →", "+ Add …"). */
  .card-hdr a.small-note, .card-hdr .ms-auto, .list-row a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ── Readable text ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sb, .badge-eden, .badge-amber, .badge-role, [class^="badge-"], .lib-tag, .owner-tag,
  .tbl th, .chip-link, .small-note, .form-hint, .form-label, .sid-section, .sid-count, small, .small {
    font-size: max(.75rem, 12px);
  }
  .tbl td { font-size: .875rem; }
  .kpi-tile .l, .stat-lbl, .hero-stat .l { font-size: max(.78rem, 12px); }
  footer, .portal-footer { font-size: 12px; }
  .topbar-avatar { font-size: 12px; }
}

@media (max-width: 419.98px) {
  /* The avatar is enough to recognise the account menu by. */
  .topbar-user .uname { display: none; }
}

/* ── Layouts that were wider than a phone ──────────────────────────────── */
@media (max-width: 575.98px) {
  .main, .main-content, .admin-main { padding-left: .85rem !important; padding-right: .85rem !important; }
  /* Grids whose minimum column was wider than the screen were clipped. */
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > *, .grid-3 > *, .kpis > * { min-width: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .kpi-tile { padding: .8rem .85rem; }
  .kpi-tile .n { font-size: 1.3rem; }
  /* Figure tiles two to a row: the icon above the figure, so a long number
     such as 1,124.9 has the tile's whole width. */
  .kpis .stat-wrap { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .kpis .stat-wrap > div { min-width: 0; max-width: 100%; }
  .stat-val { overflow-wrap: anywhere; }
  /* A badge holding a long name (an agency, a framework) wraps rather than
     running off the screen. */
  .badge { white-space: normal; text-align: left; max-width: 100%; }
  /* A label above its value, rather than squeezed beside it. */
  .dl { grid-template-columns: 1fr; gap: .1rem; }
  .dl dt { margin-top: .55rem; font-size: .8rem; }
  .dl dd { overflow-wrap: anywhere; }
  .page-hdr { align-items: stretch; }
  .page-hdr h2 { font-size: 1.35rem; }
  .hdr-actions { width: 100%; }
  .hdr-actions > a, .hdr-actions > button, .hdr-actions > form { flex: 1 1 auto; }
  .hdr-actions > form .form-select, .company-switch { min-width: 0; width: 100%; }
  .filters > * { flex: 1 1 140px; }
  .filters .form-select, .filters .form-control { width: 100%; }
  .core-map { height: 300px; }
  .core-map.tall { height: 62vh; min-height: 320px; }
  .list-row { flex-wrap: wrap; }
  .modal-dialog { margin: .5rem; }
}

/* ── Section tabs on one line that scrolls, instead of four rows of chips ─ */
@media (max-width: 991.98px) {
  .core-nav, .cfg-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
              margin-left: -.85rem; margin-right: -.85rem; padding: 0 .85rem .25rem; scroll-padding: 0 .85rem;
              mask-image: linear-gradient(90deg, transparent 0, #000 .85rem, #000 calc(100% - 1.5rem), transparent 100%); }
  .core-nav::-webkit-scrollbar, .cfg-nav::-webkit-scrollbar { display: none; }
  .core-nav a, .cfg-nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; margin: 0 0 .35rem;
          font-size: .8rem; color: var(--muted, #6b5d4f); list-style: none; padding: 0; }
.crumbs a { color: var(--muted, #6b5d4f); text-decoration: none; }
.crumbs a:hover { color: var(--forest, #0d3320); text-decoration: underline; }
.crumbs li + li::before { content: '›'; margin-right: .35rem; opacity: .55; }
@media (max-width: 991.98px) {
  .crumbs { font-size: .82rem; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
  /* On a phone the trail shows only where "up" is: the last link. */
  .crumbs li:not(:nth-last-child(2)) { display: none; }
  .crumbs li:nth-last-child(2)::before { content: '‹'; opacity: .8; margin-right: .3rem; }
  .crumbs li:last-child { display: none; }
}