/* ════════════════════════════════════════════════════════════════
   mobile.css — the responsive layer (CP6).
   Extracted verbatim from styles.css. This sheet is loaded AFTER
   styles.css, and several rules here override the desktop base purely
   by source order, so it MUST stay last in the <link> order.
   styles.css = base / desktop; mobile.css = all @media blocks + the
   mobile-only nav components (tab bar, gear menu).
   ════════════════════════════════════════════════════════════════ */

/* Older-fee rows indent under their member on desktop only (the mobile cards
   reset all cell padding, so the indent would just waste width there). */
@media (min-width: 641px) { #feesLogTable .fee-older-indent { padding-left: 40px; } }
@media (max-width: 900px) {
  .dash-kpi-grid       { grid-template-columns: repeat(2, 1fr); }
  .dash-chart-grid     { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════
   MOBILE — responsive foundation (Checkpoint 1)
   Goal: make the app comfortable on a phone instead of a shrunk
   desktop view. Built page-by-page; this block is the base layer.
   Scope: responsive web only (no native app / PWA).
   ════════════════════════════════════════════════════════════════ */

/* Tablet & down — pull the generous desktop gutters in a bit. */
@media (max-width: 768px) {
  .page         { padding: 24px 20px; }
  .nav-inner    { padding: 10px 20px; }
  .footer-inner { padding: 16px 20px; }
}

/* Phone — tight gutters, no accidental sideways scroll, fluid media. */
@media (max-width: 640px) {
  .page         { padding: 16px 14px; }
  .nav-inner    { padding: 10px 14px; gap: 12px; }
  .footer-inner { padding: 14px 14px; }

  /* Images & embeds never force the viewport wider than the screen. */
  img, svg, canvas { max-width: 100%; height: auto; }

  /* Interim: until a table is reshaped into cards (Members/Finance,
     later checkpoints), let it scroll sideways *within* the page so a
     wide table can't blow out the whole viewport width. */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE navigation — bottom tab bar + top-right gear menu.
   Desktop (>900px): hidden; the top nav handles everything.
   Mobile (≤900px): the top-bar page links collapse to a fixed bottom
   tab bar (main pages); the top bar keeps the logo + utility icons
   (tickets, help, gear); the gear opens a dropdown for the overflow
   (admin/account/logout + version). The footer is hidden.
   ════════════════════════════════════════════════════════════════ */

/* Bottom bar hidden on desktop (it's a <nav>, so it's also auto-hidden
   pre-login by the `body.logged-out nav` rule). */
.tabbar { display: none; }

/* Gear menu (top-right overflow) — hidden on desktop. */
.nav-gear-wrap { display: none; position: relative; }
.nav-gear-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nav-gear-btn svg { width: 17px; height: 17px; }
.nav-gear-btn:hover { color: #fff; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }

.nav-gear-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 210px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  padding: 8px;
  z-index: 300;
}
.nav-gear-menu.open { display: block; }
.gear-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: #1A1A2E; text-align: left;
  padding: 12px; border-radius: 9px; min-height: 46px;
}
.gear-row svg { width: 20px; height: 20px; color: #555; flex-shrink: 0; }
/* Hover/active: fill with the navy brand + flip text & icon to white, so the
   row clearly reads as selected (the old light-on-light tint was unreadable). */
.gear-row:active,
.gear-row:hover { background: #1A1A2E; color: #fff; }
.gear-row:hover svg, .gear-row:active svg { color: #fff; }
.gear-row--danger { color: #c0392b; }
.gear-row--danger svg { color: #c0392b; }
/* Danger row (Logout) → red fill on hover, also white text/icon. */
.gear-row--danger:active,
.gear-row--danger:hover { background: #c0392b; color: #fff; }
.gear-row--danger:hover svg, .gear-row--danger:active svg { color: #fff; }
.gear-meta {
  padding: 10px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid #eee;
  color: #9a9aa2; font-size: 12px;
}

@media (max-width: 900px) {
  /* Top bar: keep logo + utility cluster; page links go to the bottom bar. */
  .nav-menu    { display: none; }
  .nav-divider { display: none; }
  footer       { display: none; }   /* its info now lives in the gear menu */

  /* Account name + Logout + Admin move into the gear menu; the gear appears. */
  .nav-user .nav-account-btn,
  .nav-user .nav-logout-btn,
  .nav-user .nav-admin-btn.nav-admin-on { display: none; }
  .nav-gear-wrap { display: block; }

  /* Slightly larger tap targets for the three top-bar icons. */
  .nav-user .nav-help-btn,
  .nav-gear-btn { width: 34px; height: 34px; }
  .nav-gear-btn svg { width: 19px; height: 19px; }

  /* Leave room so the fixed bottom bar never covers page content. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* ── Bottom tab bar ── */
  .tabbar {
    display: flex;
    position: fixed;
    top: auto;                       /* cancel the global `nav { top: 0 }` — with */
    bottom: 0; left: 0; right: 0;    /* both set, the bar would fill the viewport */
    z-index: 200;
    background: #1A1A2E;
    border-top: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar-btn {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 7px;
    min-height: 56px;
    position: relative;
    transition: color 0.15s;
  }
  .tabbar-btn svg  { width: 23px; height: 23px; display: block; }
  .tabbar-btn span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px; }
  .tabbar-btn:active { background: rgba(255,255,255,0.06); }
  .tabbar-btn.active { color: #fff; }
  /* Orange indicator bar above the active tab. */
  .tabbar-btn.active::before {
    content: "";
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #D95F02;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE in-page section nav (Finance / Admin / Help).
   Desktop: a fixed 220px left sidebar. On a phone that, plus the
   244px content indent, leaves almost no room — so on mobile it
   becomes a sticky, horizontally-scrollable strip of pills above
   the content.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .admin-layout { padding-left: 0; }

  .admin-sidebar {
    position: sticky;
    top: var(--nav-height);
    left: auto; right: auto; bottom: auto;
    width: auto;
    overflow: visible;
    padding: 0;
    margin: 0 0 16px;
    border-radius: 8px;
    z-index: 30;
  }
  .admin-sidebar-title { display: none; }   /* page name already shown in the bar */

  /* The list of section links → a swipeable horizontal row. */
  .admin-sidebar nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px;
    scrollbar-width: none;                  /* hide scrollbar (Firefox) */
  }
  .admin-sidebar nav::-webkit-scrollbar { display: none; }  /* hide (WebKit) */

  .admin-nav-item {
    flex: 0 0 auto;                         /* keep size; scroll instead of wrap */
    white-space: nowrap;
    border-left: none;                      /* drop the desktop left accent */
    border-radius: 6px;
    padding: 8px 14px;
  }
  .admin-nav-item.active {
    border-left-color: transparent;
    background: rgba(255,255,255,0.12);
    box-shadow: inset 0 -2px 0 #D95F02;     /* orange underline accent */
  }
}
@media (max-width: 640px) {
  /* Unified control bar → compact: search grows, Filter/Sort/Export become
     icon-only, the primary action shrinks to a square +. */
  .ctrl-bar { gap: 6px; margin: 14px 0; }
  .ctrl-search { flex: 1 1 auto; }
  .ctrl-spacer { display: none; }
  .ctrl-btn-label { display: none; }
  .ctrl-btn { padding: 0 10px; }
  .ctrl-add { padding: 0; width: 38px; justify-content: center; }
  .ctrl-add .ctrl-add-icon  { display: block; width: 20px; height: 20px; }
  .ctrl-add .ctrl-add-label { display: none; }
  .ctrl-export { padding: 0; width: 38px; justify-content: center; }
  .ctrl-export .ctrl-export-icon  { display: block; width: 20px; height: 20px; }
  .ctrl-export .ctrl-export-label { display: none; }
  .ctrl-pop { left: auto; right: 0; }

  /* Table → cards (override the foundation table-scroll). Also drop the desktop
     table's white "sheet" (bg/shadow/radius) so the page background shows
     through between the individual cards. */
  #membersTable       { display: block; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
  #membersTable tbody { display: block; }            /* implicit tbody */
  #membersTable tr:first-child { display: none; }    /* hide the <th> header row */

  /* Cells that don't belong on the compact card face. Hidden via the explicit
     .mcard-hide class (not data-label text) so translating the labels can never
     break the match. */
  #membersTable tr:not(:first-child):not(.notes-row) td.mcard-hide { display: none; }

  /* Each member row → a single-line card. */
  #membersTable tr:not(:first-child):not(.notes-row) {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 12px;
    padding: 11px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  #membersTable tr:not(:first-child):not(.notes-row) td { border: none; padding: 0; }
  /* No touch "hover" highlight on the cards (the desktop peach tr:hover). */
  #membersTable tr:not(:first-child):hover td { background-color: transparent; }

  /* #id pill (left). */
  #membersTable td.mcard-id {
    flex: 0 0 auto;
    padding: 2px 8px;
    background: #f2f2f4; color: #888;
    font-size: 12px; font-weight: 700;
    border-radius: 20px;
  }
  #membersTable td.mcard-id::before { content: "#"; color: #aaa; }

  /* Name + membership badge (flexible middle, one line). */
  #membersTable td.mcard-name {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 8px;
  }
  .mcard-name-text {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 15px; font-weight: 700; color: #1A1A2E;
  }
  .mcard-mship {
    display: inline-block; flex: 0 0 auto;
    padding: 2px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
  }
  .mship-active-member { background: #eaf5ec; color: #2e7d32; }
  .mship-supporter     { background: #eef1f8; color: #3949ab; }
  .mship-former-member { background: #f2f2f4; color: #777; }

  /* Actions = ⋮ kebab → dropdown menu. */
  #membersTable td.mcard-actions { flex: 0 0 auto; position: relative; }
  .mcard-kebab {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: none; border: none; cursor: pointer;
    color: #888; border-radius: 8px;
  }
  .mcard-kebab svg { width: 20px; height: 20px; }
  .mcard-kebab:active { background: #f2f2f4; }

  /* The dropdown (replaces the desktop inline icon row). Generic across every
     table that opts in via a td.mcard-actions cell (Members, Transactions,
     Fees) — one shared component, no per-table duplication. */
  td.mcard-actions .mcard-menu {
    display: none;
    position: absolute;
    top: 100%; right: 0;
    min-width: 168px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    padding: 6px;
    z-index: 60;
  }
  td.mcard-actions .mcard-menu.open { display: block; }
  /* Menu rows: icon + label, full width (resets the bordered-icon look). */
  td.mcard-actions .mcard-menu button,
  td.mcard-actions .mcard-menu a {
    display: flex; align-items: center; gap: 12px;
    width: 100%; box-sizing: border-box;
    border: none; background: none; cursor: pointer;
    padding: 11px 12px; border-radius: 8px;
    font-family: inherit; font-size: 15px; font-weight: 600;
    color: #1A1A2E; text-align: left; text-decoration: none;
    min-height: 44px;
  }
  td.mcard-actions .mcard-menu button svg,
  td.mcard-actions .mcard-menu a svg { width: 18px; height: 18px; }
  td.mcard-actions .mcard-menu button:active,
  td.mcard-actions .mcard-menu a:active { background: #f4f4f6; }
  td.mcard-actions .mcard-menu .btn-delete { color: #c0392b; }
  td.mcard-actions .mcard-mlabel { display: inline; }   /* show labels in the menu */

  /* Notes panel sits directly under its card. */
  #membersTable tr.notes-row { display: block; margin: -6px 0 10px; }
  #membersTable tr.notes-row td { display: block; padding: 0; border: none; }   /* no leftover global td border-bottom → no line under cards */
}

/* ════════════════════════════════════════════════════════════════
   Finance tables → mobile cards (Checkpoint 4). Transactions (#txTable)
   and the fee log (#feesLogTable) become stacked cards ≤640px; the
   desktop tables are untouched. Row actions collapse into the shared
   .mcard-actions kebab menu defined in the Members block above.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Transactions (#txTable) ── */
  #txTable       { display: block; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }   /* override foundation table-scroll + drop white sheet */
  #txTable tbody { display: block; }
  #txTable tr:first-child { display: none; }               /* hide the <th> header row */

  /* Cells folded into the gray meta line, or dropped from the mobile face:
     date + method appear via .tx-mmeta; the auto badge (inside col-method)
     and the status dot are intentionally hidden on phones. */
  #txTable tr.tx-row td.col-date,
  #txTable tr.tx-row td.col-method,
  #txTable tr.tx-row td.col-status { display: none; }
  /* Read-only note is off the face — revealed when the card is tapped. */
  #txTable tr.tx-row td.col-note { display: none; }

  /* Each transaction → a card:
       row 1  gray meta line (method · date · tag)
       row 2  From/To name | amount | ⋮
       row 3  read-only note (only when tapped open) */
  #txTable tr.tx-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "meta meta   meta"
      "name amount kebab";
    column-gap: 10px; row-gap: 3px;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
  }
  #txTable tr.tx-row.note-open {
    grid-template-areas:
      "meta meta   meta"
      "name amount kebab"
      "note note   note";
  }
  /* width:auto resets the desktop column percentages (e.g. .col-fromto 18%),
     which would otherwise pin the grid cells and re-crop the name. */
  #txTable tr.tx-row td { border: none; padding: 0; width: auto; }

  /* No touch "hover" highlight on the cards (the desktop peach tr:hover). */
  #txTable tr.tx-row:hover td,
  #txTable tr.tx-row td:hover { background-color: transparent; }

  #txTable td.tx-mmeta {
    display: block; grid-area: meta;
    min-width: 0;   /* spans all 3 columns — without this its nowrap text forces
                       the auto columns wide and starves the 1fr name column */
    font-size: 11px; color: #9a9aa5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #txTable td.tx-mmeta .tx-mtag { color: #C2185B; }

  #txTable td.col-fromto { grid-area: name; align-self: center; min-width: 0; }
  #txTable td.col-fromto .fromto-cell {
    font-size: 13px; font-weight: 400; color: #1A1A2E;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #txTable td.col-amount {
    grid-area: amount; align-self: center;
    font-size: 13px; font-weight: 400; white-space: nowrap;
  }
  #txTable td.col-action { grid-area: kebab; align-self: center; position: relative; }

  /* Read-only note (Verwendungszweck), shown only when the card is tapped. */
  #txTable tr.tx-row.note-open td.col-note {
    display: block; grid-area: note;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid #f0f0f0;
    font-size: 13px; color: #555;
  }
  #txTable tr.tx-row.note-open td.col-note .note-cell {
    white-space: normal; overflow: visible; max-width: none;
  }

  /* Comment + donation panels sit directly under their card. */
  #txTable tr.notes-row, #txTable tr.donation-row { display: block; margin: -4px 0 10px; }
  #txTable tr.notes-row td, #txTable tr.donation-row td { display: block; padding: 0; border: none; }

  /* ── Fees log (#feesLogTable) → cards ── */
  #feesLogTable       { display: block; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }   /* override foundation table-scroll + drop white sheet */
  #feesLogTable tbody { display: block; }
  #feesLogTable tr:first-child { display: none; }              /* hide the <th> header row */

  /* Each fee → a card:
       row 1  gray meta line (period · date · method)
       row 2  member name | amount | ⋮
       row 3  Mandatsreferenz (only when the card is tapped open) */
  #feesLogTable tr.fee-card-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "meta   meta   meta"
      "member amount kebab";
    column-gap: 10px; row-gap: 3px;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
  }
  #feesLogTable tr.fee-card-row.mandat-open {
    grid-template-areas:
      "meta   meta   meta"
      "member amount kebab"
      "mandat mandat mandat";
  }
  /* width:auto resets the shared .tbl-cell paddings/borders for the grid. */
  #feesLogTable tr.fee-card-row td { border: none; padding: 0; width: auto; }
  #feesLogTable tr.fee-card-row:hover td { background-color: transparent; }

  #feesLogTable td.fee-mmeta {
    display: block; grid-area: meta; min-width: 0;
    font-size: 11px; color: #9a9aa5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #feesLogTable td.fee-mmeta .fee-mmeta-sub { margin-left: 6px; }

  /* col 1 = member (+ expand-older arrow), col 4 = amount, col 7 = ⋮.
     Period/date/method (2/3/5) are folded into the meta line. */
  #feesLogTable tr.fee-card-row td:nth-child(1) {
    grid-area: member; align-self: center; min-width: 0;
    font-size: 13px; color: #1A1A2E;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #feesLogTable tr.fee-card-row td:nth-child(2),
  #feesLogTable tr.fee-card-row td:nth-child(3),
  #feesLogTable tr.fee-card-row td:nth-child(5) { display: none; }
  #feesLogTable tr.fee-card-row td:nth-child(4) {
    grid-area: amount; align-self: center;
    font-size: 13px; font-weight: 400; color: #2E7D32; white-space: nowrap;
  }
  #feesLogTable tr.fee-card-row td:nth-child(7) {
    grid-area: kebab; align-self: center; position: relative; white-space: nowrap;
  }

  /* Mandatsreferenz — revealed (labeled) only when the card is tapped. */
  #feesLogTable tr.fee-card-row td:nth-child(6) { display: none; }
  #feesLogTable tr.fee-card-row.mandat-open td:nth-child(6) {
    display: block; grid-area: mandat;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid #f0f0f0;
  }
  #feesLogTable tr.fee-card-row.mandat-open td:nth-child(6)::before {
    content: "Mandatsreferenz";
    display: block; font-size: 11px; color: #9a9aa5; margin-bottom: 4px;
  }
  #feesLogTable tr.fee-card-row.mandat-open td:nth-child(6) .fee-mandats-input {
    width: 100%; box-sizing: border-box;
  }

  /* Comment panel sits directly under its card. */
  #feesLogTable tr.notes-row { display: block; margin: -4px 0 10px; }
  #feesLogTable tr.notes-row td { display: block; padding: 0; border: none; }

  /* ── Overdue members (#overdueTable) → cards (rows only) ──
     The record-fee form keeps its desktop layout for now — CP5 will
     mobile-tune all the forms together. */
  #overdueTable       { display: block; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }   /* drop white sheet so the cream warning card shows through */
  #overdueTable tbody { display: block; }
  #overdueTable tr:first-child { display: none; }              /* hide the <th> header row */

  /* Each overdue member → a card: meta line (·#id · type · phone) on top,
     name + a direct "+ Record Fee" action below. Extra rows (>10) stay hidden
     until "Show more" adds .overdue-show-all. */
  #overdueTable tr.overdue-row:not(.overdue-extra),
  #overdueTable.overdue-show-all tr.overdue-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "meta meta"
      "name action";
    column-gap: 10px; row-gap: 4px;
    background: #fff; border: 1px solid #f0d4ad; border-radius: 10px;
    padding: 11px 13px; margin-bottom: 10px;
  }
  #overdueTable tr.overdue-row td { border: none; padding: 0; width: auto; }
  #overdueTable tr.overdue-row:hover td { background-color: transparent; }

  #overdueTable td.overdue-mmeta {
    display: block; grid-area: meta; min-width: 0;
    font-size: 11px; color: #9a9aa5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* id (1), membership (3), phone (4) fold into the meta line. */
  #overdueTable tr.overdue-row td:nth-child(1),
  #overdueTable tr.overdue-row td:nth-child(3),
  #overdueTable tr.overdue-row td:nth-child(4) { display: none; }
  #overdueTable tr.overdue-row td:nth-child(2) {            /* member name */
    grid-area: name; align-self: center; min-width: 0;
    font-size: 13px; color: #1A1A2E;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #overdueTable tr.overdue-row td:nth-child(2) strong { font-weight: 400; }
  #overdueTable tr.overdue-row td:nth-child(5) {           /* + Record Fee button */
    grid-area: action; align-self: center; justify-self: end; white-space: nowrap;
  }

  /* Opened overdue quick-form expands INSIDE the card: the member row drops
     its bottom rounding/border and the form continues the same card box
     directly below (one continuous card). Stacked fields + full-width buttons
     come from the CP5 form rules below. */
  #overdueTable tr.overdue-row.form-open {
    border-bottom: none; border-radius: 10px 10px 0 0; margin-bottom: 0;
  }
  #overdueTable tr.overdue-form-row.open {
    display: block; margin: 0 0 10px;
    background: #fff; border: 1px solid #f0d4ad; border-top: none;
    border-radius: 0 0 10px 10px; padding: 2px 13px 13px;
  }
  #overdueTable tr.overdue-form-row > td { display: block; padding: 0; border: none; }
}

/* ════════════════════════════════════════════════════════════════
   CP5 — Mobile forms, modals & touch targets (≤640px).
   Everything below is phone-only; desktop (>640px) is untouched.
   Kept as one grouped block so the planned CP6 mobile-CSS-file
   extraction can lift it out cleanly. Four parts:
     A. iOS-zoom fix — every form control ≥16px (Safari zooms on focus
        for anything smaller; this is the single biggest "feels native"
        win). Inline-styled inputs need !important to beat their attr.
     B. Stack rows + full-width fields.
     C. Touch targets — ≥44px tall controls, full-width form buttons.
     D. Modals — tighter padding, stacked full-width actions.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── A. iOS-zoom fix: 16px on EVERY entry field ────────────────────
     Mobile Safari zooms in on focus for any field below 16px. One global
     rule (with !important to beat inline style="font-size:…" attributes)
     covers the lot — form fields, search bars, filter dates, admin
     settings, modals — so nothing zooms. On a phone you never want input
     text under 16px anyway. */
  input, select, textarea { font-size: 16px !important; }

  /* ── B. Stack form rows; fields go full-width ──────────────────── */
  .form-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .form-row > input, .form-row > select, .form-row > textarea {
    flex: none; width: 100%;
  }
  .form-field { flex: none; width: 100%; min-width: 0; }
  .admin-add-form { grid-template-columns: 1fr; }

  /* Profile rows: label above the value/input instead of beside it —
     a roomier, more readable layout on a narrow screen (read + edit). */
  .pf-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .pf-label { min-width: 0; }

  /* Record-fee forms (profile + the deferred overdue quick-form) stack
     too, so each control gets the full card width. */
  .pp-fee-form, .fq-form { flex-direction: column; align-items: stretch; }
  .pp-fee-form .form-field, .fq-field { min-width: 0; width: 100%; }

  /* ── C. Touch targets: ≥44px tall controls ─────────────────────── */
  .form-row input, .form-row select,
  .form-field input, .form-field select,
  .pf-input, .pf-always-input,
  .pp-fee-form input, .pp-fee-form select,
  .fq-field input, .fq-field select,
  .admin-add-form input, .admin-add-form select,
  .login-card input,
  .tk-type-select {
    min-height: 44px; padding: 10px 12px;
  }
  /* Inline-padded controls need !important on padding too. */
  #emailComposePanel input, #emailComposePanel select,
  #ppComposePanel input, #ppComposePanel select,
  #resetPasswordInput {
    min-height: 44px; padding: 10px 12px !important;
  }

  /* Full-width, comfortably tall buttons in the main forms + fee forms.
     Stacked, each on its own line; clear the desktop inline left-margin
     on the Add-Member Cancel button. */
  .form-section .btn-add, .form-section .btn-cancel,
  .pp-fee-form .btn-record-fee, .pp-fee-form .btn-cancel,
  .fq-actions .btn-record-fee, .fq-actions .btn-cancel,
  .admin-add-form .btn-add, .admin-add-form .btn-cancel {
    display: block; width: 100%; margin: 10px 0 0;
    min-height: 46px; padding: 12px; font-size: 15px;
  }
  #cancelAddMemberBtn { margin-left: 0; }
  /* Fee-form action buttons sit in their own full-width row. The overdue
     Cancel button has an inline padding attr → !important to make it tall. */
  .fq-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .fq-actions .btn-cancel { padding: 12px !important; }

  /* Bump the email compose action buttons to a touch-friendly height
     (they keep their inline side-by-side layout). */
  #emailSendBtn, #emailPreviewBtn { min-height: 44px; }

  /* The small 30×30 icon buttons (edit/notes/delete/fee) — wherever they
     still render on mobile — get a roomier tap area. */
  .btn-edit, .btn-notes, .btn-delete, .btn-fee { width: 40px; height: 40px; }

  /* ── D. Modals: tighter padding, stacked full-width actions ────── */
  .modal-box { padding: 24px 20px; }
  .modal-actions { flex-direction: column; gap: 10px; }
  .modal-actions button { width: 100%; min-height: 46px; }
}

/* ════════════════════════════════════════════════════════════════
   CP5b — Remaining tables → mobile cards (≤640px).
   A generic "stacked labeled-card" pattern applied to the tables that
   weren't part of CP3/CP4: Admin Users (#usersTable), the profile fee
   history (#feesTable), Tickets (#ticketsTable), and the two email
   logs (.data-table inside #emailSentTableWrap / #ppEmailLog). Each row
   becomes a bordered card; each cell becomes a labeled line (label from
   the cell's data-label attr). Layout only — no behaviour/handler change.
   Desktop (>640px) is untouched. (The richer meta-line grid cards for
   Members/Transactions/Fees-log live in the CP3/CP4 blocks above.)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Let these tables flow as blocks (override the foundation table-scroll). */
  #usersTable, #ticketsTable,
  #emailSentTableWrap .data-table, #ppEmailLog .data-table {
    display: block; overflow: visible; width: 100%;
    background: transparent; box-shadow: none; border-radius: 0;   /* drop white sheet behind cards */
  }
  #usersTable tbody, #ticketsTable tbody,
  #emailSentTableWrap .data-table tbody, #ppEmailLog .data-table tbody {
    display: block;
  }
  /* Hide headers: thead for the email logs/tickets, the first <tr> for the
     header-row tables that have no <thead> (users). */
  #ticketsTable thead,
  #emailSentTableWrap .data-table thead,
  #ppEmailLog .data-table thead { display: none; }
  #usersTable tr:first-child { display: none; }

  /* Card rows. */
  #usersTable tr:not(:first-child),
  #ticketsTable tr.tk-row,
  #emailSentTableWrap .data-table tbody tr,
  #ppEmailLog .data-table tbody tr {
    display: block;
    background: #fff; border: 1px solid #ececf0; border-radius: 12px;
    padding: 10px 13px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  /* No touch "hover" highlight on the card rows. */
  #usersTable tr:not(:first-child):hover td,
  #ticketsTable tr.tk-row:hover td { background-color: transparent; }

  /* Cells → stacked labeled lines. */
  #usersTable tr:not(:first-child) > td,
  #ticketsTable tr.tk-row > td,
  #emailSentTableWrap .data-table tbody td,
  #ppEmailLog .data-table tbody td {
    display: block; width: auto; border: none;
    padding: 4px 0; white-space: normal;
  }
  /* The little uppercase label above each value (from data-label). */
  #usersTable td[data-label]::before,
  #ticketsTable td[data-label]::before,
  #emailSentTableWrap .data-table td[data-label]::before,
  #ppEmailLog .data-table td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: #9a9aa5;
  }

  /* Full-width inputs/selects inside the cards. */
  #usersTable td input.editable-cell, #usersTable td .user-role-select,
  #ticketsTable td .tk-inline-select {
    width: 100%; box-sizing: border-box; min-height: 40px; font-size: 16px;
  }

  /* Action cells → a button row with a divider above (no label). */
  #usersTable td.user-row-actions,
  #ticketsTable td.tk-action-cell {
    display: flex; gap: 10px; align-items: center;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid #f1f1f4;
  }
  /* An empty action cell (e.g. the "you" user row) shouldn't draw a divider. */
  #usersTable td.user-row-actions:empty { display: none; }

  /* Description panels sit directly under their card. */
  #ticketsTable tr.tk-desc-row { display: block; margin: -6px 0 10px; }
  #ticketsTable tr.tk-desc-row td { display: block; padding: 0; border: none; }

  /* ── Profile fee history (#feesTable) → mirror the Finance fees-log card ──
     period · date · method meta line on top; amount + ⋮ below; tap the card
     to reveal the Mandatsreferenz; comment panel beneath. */
  #feesTable       { display: block; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }   /* drop white sheet behind cards */
  #feesTable tbody { display: block; }
  #feesTable tr:first-child { display: none; }            /* header row */
  #feesTable tr.fee-card-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "meta meta" "amount kebab";
    column-gap: 10px; row-gap: 3px;
    background: #fff; border: 1px solid #ececf0; border-radius: 12px;
    padding: 11px 13px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); cursor: pointer;
  }
  #feesTable tr.fee-card-row.mandat-open {
    grid-template-areas: "meta meta" "amount kebab" "mandat mandat";
  }
  #feesTable tr.fee-card-row td { border: none; padding: 0; width: auto; }
  #feesTable tr.fee-card-row:hover td { background-color: transparent; }
  #feesTable td.fee-mmeta {
    display: block; grid-area: meta; min-width: 0;
    font-size: 11px; color: #9a9aa5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #feesTable td.fee-mmeta .fee-mmeta-sub { margin-left: 6px; }
  /* period(1), date(2), method(4) fold into the meta line. */
  #feesTable tr.fee-card-row td:nth-child(1),
  #feesTable tr.fee-card-row td:nth-child(2),
  #feesTable tr.fee-card-row td:nth-child(4) { display: none; }
  #feesTable tr.fee-card-row td:nth-child(3) {            /* amount */
    grid-area: amount; align-self: center;
    font-size: 13px; font-weight: 400;
  }
  #feesTable tr.fee-card-row td.mcard-actions {           /* ⋮ kebab */
    grid-area: kebab; align-self: center; position: relative;
  }
  /* Mandatsreferenz (col 5) hidden until the card is tapped. */
  #feesTable tr.fee-card-row td:nth-child(5) { display: none; }
  #feesTable tr.fee-card-row.mandat-open td:nth-child(5) {
    display: block; grid-area: mandat;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid #f0f0f0;
  }
  #feesTable tr.fee-card-row.mandat-open td:nth-child(5) .fee-mandats-input {
    width: 100%; box-sizing: border-box; min-height: 40px; font-size: 16px;
  }
  /* Comment panel beneath the card. */
  #feesTable tr.notes-row { display: block; margin: -4px 0 10px; }
  #feesTable tr.notes-row td { display: block; padding: 0; border: none; }

  /* ── Member profile page ── */
  /* Stack the header: Back · name+badges · the single Actions button — and
     drop the big info grid to one column. */
  .pp-grid { grid-template-columns: 1fr; gap: 14px; }
  .pp-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; }
  .pp-identity h1, .pp-name-row h1 { font-size: 1.55rem; line-height: 1.2; }
  .btn-back { align-self: flex-start; }

  .pp-actions { width: 100%; }
  #ppReadActions, .pp-actions-dd { width: 100%; }
  .pp-actions-toggle { width: 100%; justify-content: center; }
  /* Full-width dropdown menu directly under the full-width button. */
  .pp-actions-menu { left: 0; right: 0; min-width: 0; }
  #ppEditActions { width: 100%; flex-wrap: wrap; gap: 8px; }
  #ppEditActions > * { flex: 1 1 auto; }

  .pp-card { padding: 18px 16px; }
}

/* ════════════════════════════════════════════════════════════════
   CP5c — Admin Console (+ Finance/Help sidebar pages) mobile polish.
   Fixes: (1) the content was flush to the left edge because the desktop
   `#page-admin{padding-left:0}` (paired with the 244px sidebar indent)
   also killed the phone gutter; restore a gutter per breakpoint.
   (2) the org "Details" field grid is a fixed 3 columns → collapse so
   long German labels/inputs stop spilling outside the card.
   (3) tighten card padding on small screens.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Restore a left gutter (mirrors the page's right padding at this width). */
  #page-admin { padding-left: 20px; }
  /* Field grid: 3 cols is too tight here → 2. */
  .admin-field-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  #page-admin { padding-left: 14px; }

  /* Field grid → single column; the side-by-side logos stack. */
  .admin-field-grid, .admin-field-grid.two-col { grid-template-columns: 1fr; }
  .admin-field-grid .full { flex-direction: column; gap: 16px; }

  /* Roomier-but-not-bloated card padding; titles/sub-text never overflow. */
  .admin-card { padding: 16px 16px; }
  .admin-card-title, .admin-section-subtitle { overflow-wrap: anywhere; }
  .admin-section-header { gap: 10px; }

  /* Logo previews never wider than the card. */
  #orgLogoPreview, #orgLogoNavPreview { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   CP5d — Email page mobile polish (≤640px).
   Compose-panel inputs (16px) + the Sent log cards are already handled
   in CP5/CP5b. This block covers what was left: the Templates list table
   → labeled cards, the Template editor inputs (kill iOS zoom + bigger
   targets), and the action button rows (compose Send/Preview, template
   Save/Cancel) → full-width & comfortable. Desktop untouched.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Templates list → labeled cards (same pattern as the email logs). */
  #emailTemplatesWrap .data-table,
  #emailTemplatesWrap .data-table tbody { display: block; width: 100%; }
  #emailTemplatesWrap .data-table thead { display: none; }
  #emailTemplatesWrap .data-table tbody tr {
    display: block; background: #fff; border: 1px solid #ececf0;
    border-radius: 12px; padding: 10px 13px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  #emailTemplatesWrap .data-table td {
    display: block; width: auto; border: none;
    padding: 4px 0; white-space: normal; text-align: left;
  }
  #emailTemplatesWrap .data-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: #9a9aa5;
  }
  #emailTemplatesWrap td.tmpl-row-actions {
    display: flex; gap: 10px; text-align: left;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid #f1f1f4;
  }
  #emailTemplatesWrap td.tmpl-row-actions button { flex: 1 1 auto; min-height: 40px; margin: 0 !important; }

  /* Template editor controls: 16px (no iOS focus-zoom) + comfortable size. */
  #emailTemplateEditor input, #emailTemplateEditor select, #emailTemplateEditor textarea {
    font-size: 16px !important; width: 100%; box-sizing: border-box;
  }
  #emailTemplateEditor input, #emailTemplateEditor select {
    min-height: 44px; padding: 10px 12px !important; min-width: 0 !important;
  }

  /* Compose-panel selects/inputs span full width (some had only inline width). */
  #emailComposePanel select, #emailComposePanel input, #emailComposePanel textarea {
    width: 100%; box-sizing: border-box; min-width: 0;
  }

  /* Action button rows → wrap, full-width buttons; status text on its own line. */
  #emailComposePanel > div:last-child,
  #emailTemplateEditor > div:last-child { flex-wrap: wrap; gap: 10px; }
  #emailSendBtn, #emailPreviewBtn,
  #emailTemplateSaveBtn, #emailTemplateCancelBtn {
    flex: 1 1 auto; justify-content: center; min-height: 44px;
  }
  #emailSendStatus, #emailTemplateFormStatus { flex: 1 0 100%; }
}

/* ════════════════════════════════════════════════════════════════
   Profile header actions — inline buttons on desktop.
   The actions live in one #ppActionsMenu (a ⋮ kebab dropdown on phones,
   handled by the ≤640 rules above). On desktop (≥641) show them as an
   inline button bar instead and hide the kebab toggle.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  .pp-actions-dd .pp-actions-toggle { display: none; }

  /* The dropdown menu becomes a static inline row (overrides the absolute
     popover base + the JS .open toggle). */
  .pp-actions-menu {
    display: flex !important; position: static;
    background: none; border: none; box-shadow: none;
    overflow: visible;   /* base .gdpr-dropdown-menu sets overflow:hidden, which
                            would clip the DSGVO sub-dropdown below the row */
    padding: 0; min-width: 0; gap: 8px; flex-wrap: wrap; align-items: center;
  }
  /* Top-level items (Edit / Send / Mitgliedsbestätigung) + the DSGVO toggle
     render as inline buttons. The three DSGVO items stay rows inside the
     sub-dropdown below. */
  .pp-actions-menu > .gdpr-dropdown-item,
  .pp-actions-menu #ppGdprToggle {
    width: auto; gap: 7px;
    border: 1px solid #d8d8e0; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    background: #fff; color: #1A1A2E;
  }
  .pp-actions-menu > .gdpr-dropdown-item:hover,
  .pp-actions-menu #ppGdprToggle:hover {
    background: #fff; border-color: #D95F02; color: #D95F02;
  }
  .pp-actions-menu .gdpr-dropdown-item svg { width: 14px; height: 14px; }
  /* Edit Profile = filled primary (the main action). */
  .pp-actions-menu #ppEditProfileBtn { background: #1A1A2E; border-color: #1A1A2E; color: #fff; }
  .pp-actions-menu #ppEditProfileBtn:hover { background: #2d2d4e; border-color: #2d2d4e; color: #fff; }

  /* DSGVO actions → a sub-dropdown under the "DSGVO ▾" button. */
  #ppGdprGroup { position: relative; }
  #ppGdprToggle { display: inline-flex; align-items: center; }
  #ppGdprToggle .pp-gdpr-caret { width: 12px; height: 12px; }
  .pp-actions-menu .gdpr-dropdown-divider { display: none; }   /* no flat divider on desktop */
  #ppGdprItems {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 232px; background: #fff; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13); padding: 4px 0; z-index: 300;
  }
  #ppGdprItems.open { display: block; }
}