/* =========================================================================
   App shell + shared page components (redesign 11/2026, Design canvas
   "Web-Dashboard Redesign"). Built on the fokusnatur design system:
   white paper, ink #1A1A1A, hairlines #E5E2DC, earth #7A5C3A as the only
   accent, Playfair Display headings, Montserrat UI, square corners
   (4px only on inputs, chips), no shadows.

   Loaded after theme.css and trap_profile.css on every page. The trap
   profile pages keep their tp-* classes; everything else uses pg-* / dt /
   st from here. Page-specific CSS goes in its own file via $page_css.
   ========================================================================= */

:root {
  --ok-text:#2F7A3E; --warn-text:#8A5F14; --crit-text:#B03A2E; --muted-text:#6B6B6B;
  --wash:#F7F5F1;          /* hover rows, notice bars */
  --line-soft:#F0EDE7;     /* row dividers inside a card */
  --placeholder:#EDEAE4;   /* image / map placeholder */
}

/* ---- Base: white page, sticky header (no fixed offset) ----------------- */
body.app { background:var(--paper) !important; padding-top:0 !important; color:var(--ink); }
.app-wrap { max-width:1280px; margin:0 auto; padding-left:32px; padding-right:32px; box-sizing:border-box; width:100%; }
.app-main { padding-top:40px; padding-bottom:80px; display:block; }
.app-bare .app-main { padding:0; }
.app-main > .alert { margin-bottom:24px; }
@media (max-width:720px) {
  .app-wrap { padding-left:16px; padding-right:16px; }
  .app-main { padding-top:24px; padding-bottom:56px; }
}

/* ---- Header ------------------------------------------------------------- */
.app-header { position:sticky; top:0; z-index:1030; background:var(--paper); border-bottom:1px solid var(--hairline); }
.app-header-in { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; min-height:72px; }
.app-brand { display:flex; flex-direction:column; text-decoration:none; color:var(--ink); margin-right:12px; }
.app-brand:hover { color:var(--ink); }
.app-brand-t { font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.1; }
.app-brand-s { font-size:11px; color:var(--muted); letter-spacing:.04em; }
.app-nav { display:flex; flex-wrap:wrap; align-items:center; flex:1 1 auto; }
.app-navlink { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; font-size:14px; font-weight:500;
               color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; }
.app-navlink:hover { color:var(--earth); }
.app-navlink.on { border-bottom-color:var(--ink); font-weight:600; }
.app-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.app-search { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border:1px solid var(--hairline);
              border-radius:4px; width:250px; box-sizing:border-box; color:var(--muted); margin:0; }
.app-search input { border:0; outline:0; font:400 14px var(--sans); width:100%; background:transparent; color:var(--ink); min-width:0; }
.app-search:focus-within { border-color:var(--ink); }
.app-iconbtn, .app-userbtn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px;
              min-height:40px; min-width:40px; padding:0 10px; border:1px solid var(--hairline); background:var(--paper);
              color:var(--ink); font:600 13px var(--sans); cursor:pointer; }
.app-iconbtn:hover, .app-userbtn:hover { border-color:var(--ink); }
.app-header .activity-badge { position:absolute; top:-6px; right:-6px; }
.activity-panel { top:84px; }
@media (max-width:900px) {
  .app-header { position:static; }
  .app-nav { order:3; flex-basis:100%; overflow-x:auto; flex-wrap:nowrap; margin:0 -8px; scrollbar-width:none; }
  .app-tools { margin-left:auto; }
  .app-search { width:180px; }
}
@media (max-width:520px) { .app-search { display:none; } }

/* ---- Page head ---------------------------------------------------------- */
.pg-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; }
.pg-head-l { display:flex; flex-direction:column; gap:8px; min-width:0; }
.pg-head-r { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pg-eyebrow { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--earth); }
.pg-eyebrow a { color:inherit; }
h1.pg-h1, .pg-h1 { margin:0; font-family:var(--serif); font-weight:500; font-size:44px; line-height:1.15; color:var(--ink); }
.pg-lead { margin:0; font-size:14px; color:var(--muted); max-width:680px; line-height:1.6; }
.pg-crumb { font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pg-crumb a { color:var(--muted); }
@media (max-width:720px) { h1.pg-h1, .pg-h1 { font-size:34px; } }

/* ---- Section headings ------------------------------------------------------ */
.pg-sec { margin-top:40px; display:flex; flex-direction:column; gap:14px; }
.pg-sec:first-child { margin-top:0; }
.pg-sec-h { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; }
h2.pg-h2, .pg-h2 { margin:0; font-family:var(--serif); font-weight:500; font-size:28px; line-height:1.2; }
.pg-h2 small { font-family:var(--sans); font-size:14px; color:var(--muted); font-weight:400; }
.pg-meta { font-size:13px; color:var(--muted); }
.pg-more { font-size:14px; font-weight:600; color:var(--ink); }

/* ---- Tabs (section navigation) -------------------------------------------- */
.pg-tabs { display:flex; flex-wrap:nowrap; gap:4px; border-bottom:1px solid var(--hairline); margin:-4px 0 24px; overflow-x:auto; scrollbar-width:none; }
.pg-tab { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; margin-bottom:-1px;
          border-bottom:2px solid transparent; font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap; }
.pg-tab:hover { color:var(--ink); }
.pg-tab.on { color:var(--ink); font-weight:600; border-bottom-color:var(--ink); }
.pg-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
            border-radius:9px; background:var(--earth); color:#fff; font-size:11px; font-weight:700; }

/* ---- Buttons (ink, square) -------------------------------------------------- */
.ui-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
          font:600 14px/1 var(--sans); letter-spacing:.02em; text-decoration:none; border:1px solid var(--ink);
          background:var(--paper); color:var(--ink); cursor:pointer; box-sizing:border-box; white-space:nowrap; }
.ui-btn:hover { background:var(--ink); color:#fff; }
.ui-btn.primary { background:var(--ink); color:#fff; }
.ui-btn.primary:hover { opacity:.85; color:#fff; }
.ui-btn.quiet { border-color:var(--hairline); }
.ui-btn.quiet:hover { background:var(--paper); color:var(--ink); border-color:var(--ink); }
.ui-btn.danger { border-color:var(--crit); color:var(--crit); }
.ui-btn.danger:hover { background:var(--crit); color:#fff; }
.ui-btn.sm { min-height:34px; padding:0 10px; font-size:12px; }
.ui-btn:disabled { opacity:.35; cursor:default; }
.ui-btn:active { transform:scale(.97); }
.ui-link { background:none; border:0; padding:0; font:600 13px var(--sans); color:var(--ink); text-decoration:underline; cursor:pointer; }
.ui-link.danger { color:var(--crit); }

/* ---- Status: dot + label --------------------------------------------------- */
.st { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; white-space:nowrap; }
.st-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--off); }
.st-ok { color:var(--ok-text); }      .st-ok .st-dot, .st-dot.st-ok { background:var(--ok); }
.st-warn { color:var(--warn-text); }  .st-warn .st-dot, .st-dot.st-warn { background:var(--warn); }
.st-alert { color:var(--crit-text); } .st-alert .st-dot, .st-dot.st-alert { background:var(--crit); }
.st-muted, .st-prep { color:var(--muted-text); } .st-muted .st-dot, .st-prep .st-dot, .st-dot.st-muted, .st-dot.st-prep { background:var(--off); }
.v-warn { color:var(--warn-text); font-weight:700; }
.v-alert { color:var(--crit-text); font-weight:700; }
.v-muted { color:var(--muted); }

/* ---- Stats strip ------------------------------------------------------------ */
.pg-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(160px,100%), 1fr)); gap:1px; background:var(--hairline);
            border:1px solid var(--hairline); }
.pg-stat { display:flex; flex-direction:column; gap:6px; padding:20px 22px; background:var(--paper); color:var(--ink); text-decoration:none; }
a.pg-stat:hover { background:var(--wash); color:var(--ink); }
.pg-stat-k { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pg-stat-v { font-size:36px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.pg-stat-s { font-size:12px; color:var(--muted); }
.pg-stat.on { box-shadow:inset 0 -3px 0 var(--ink); }

/* ---- Data table ------------------------------------------------------------- */
.dt-wrap { overflow-x:auto; border:1px solid var(--hairline); background:var(--paper); }
table.dt { width:100%; border-collapse:collapse; font-size:14px; margin:0; }
table.dt th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
              padding:12px 14px; border-bottom:1px solid var(--ink); white-space:nowrap; background:var(--paper); }
table.dt th button, table.dt th a { all:unset; cursor:pointer; display:inline-flex; gap:4px; align-items:center; }
table.dt td { padding:13px 14px; border-bottom:1px solid var(--hairline); vertical-align:middle; font-variant-numeric:tabular-nums; }
table.dt tbody tr:last-child td { border-bottom:0; }
table.dt tbody tr:hover td { background:var(--wash); }
table.dt .r { text-align:right; }
table.dt .nw { white-space:nowrap; }
table.dt .sub { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
table.dt tr.clickable { cursor:pointer; }
table.dt a { color:var(--ink); }

/* ---- Cards and key/value rows ----------------------------------------------- */
.ui-card { border:1px solid var(--hairline); background:var(--paper); }
.ui-card-h { margin:0; padding:16px 20px; border-bottom:1px solid var(--hairline); font:600 15px var(--sans);
             display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ui-card-h a { font-size:13px; font-weight:600; }
.ui-card-b { padding:16px 20px; }
.ui-kv { display:flex; justify-content:space-between; gap:16px; padding:11px 20px; border-bottom:1px solid var(--line-soft); font-size:14px; }
.ui-kv:last-child { border-bottom:0; }
.ui-kv > :first-child { color:var(--muted); flex:0 0 auto; }
.ui-kv > :last-child { text-align:right; font-weight:500; min-width:0; overflow-wrap:anywhere; }
.ui-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(360px,100%), 1fr)); gap:16px; }
.ui-cols { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.ui-cols > .ui-main { flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.ui-cols > .ui-side { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:24px; }

/* ---- Notice bars ---------------------------------------------------------- */
.ui-note { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px;
           border:1px solid var(--hairline); background:var(--wash); font-size:14px; margin-bottom:24px; }
.ui-note.alert { border-color:var(--crit); background:#FBF1EF; color:#4A2A24; }
.ui-note.alert strong { color:#8E2E24; }
.ui-note.warn { border-color:rgba(198,138,30,.5); background:#FBF6EC; }

/* ---- Filters / chips -------------------------------------------------------- */
.ui-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:16px; }
.ui-chip { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border:1px solid var(--hairline);
           border-radius:4px; background:var(--paper); font:500 13px var(--sans); color:var(--ink); cursor:pointer; text-decoration:none; }
.ui-chip:hover { border-color:var(--ink); color:var(--ink); }
.ui-chip.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.ui-chip .n { font-weight:700; font-variant-numeric:tabular-nums; }
.ui-spacer { flex:1 1 24px; }

/* ---- Form controls ---------------------------------------------------------- */
.ui-field { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; min-width:0; }
.ui-field > small, .ui-hint { font-size:12px; font-weight:400; color:var(--muted); }
.ui-input { min-height:44px; padding:0 12px; border:1px solid var(--hairline); border-radius:4px; font:400 14px var(--sans);
            background:var(--paper); color:var(--ink); box-sizing:border-box; max-width:100%; }
.ui-input.sm { min-height:40px; }
textarea.ui-input { padding:10px 12px; line-height:1.5; min-height:100px; }
.ui-input:focus { outline:0; border-color:var(--ink); }
.ui-inline { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ui-form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr)); gap:20px; }

/* ---- Placeholder (image / map) ------------------------------------------- */
.ui-ph { background:var(--placeholder); display:flex; align-items:flex-end; padding:8px; box-sizing:border-box; font-size:11px; color:#4A4A4A; }

/* ---- Visually hidden (Bootstrap has it, keep for pages without) ------------- */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
                   overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* ---- Trap profile pages: align widths with the shell ------------------------ */
.tp-page { max-width:none; padding-top:0; }