/* ============================================================
   admin-mobile.css — the admin surfaces on a phone (RAV-88)
   ------------------------------------------------------------
   WHY (Ravi, 2026-09-28): "make every admin page mobile compatible.
   when invited user accepting and setting password, all it seems messy."

   WHAT WAS ACTUALLY WRONG (measured, not guessed — the audit gate
   scripts/e2e_admin_mobile.mjs renders every admin surface in a headless
   390x844 phone against a stubbed backend and reports the numbers):

   1. THE INVITE-ACCEPT / SET-PASSWORD CARD WAS UNRESPONSIVE BY OWNERSHIP,
      NOT BY DESIGN. admin-polish.css carried
          form.invite-card{grid-template-columns:minmax(0,1.2fr) ... auto}
      with NO media query. Specificity (0,1,1) beats every one of the
      bundle's own breakpoints (.invite-card is 0,1,0), so the bundle's
      "<=1250px -> 1fr 1fr" and "<=620px -> 1fr" rules could never win:
      at 390px the card stayed multi-column, the two password fields sat
      in two ~90px boxes and "Finish account setup" /
      "Send invitation" hung 48px past the right edge of the card
      (element right edge 438px on a 390px viewport). That fix now lives
      in admin-polish.css scoped to >=1251px, and this file owns the
      phone layout explicitly.
   2. The blog manager's post row (.blog-row is flex + .blog-row-actions
      flex-shrink:0) squeezed the TITLE to ~2 words of width — a post
      title wrapped one word per line while its buttons kept full size.
   3. Tap targets: .danger-link (Remove / Cancel) was 17px tall,
      the Blog action buttons 28px, the support filters 23px, and the AI
      "Enable AI assistance" checkbox 17x17 — all below the 44px
      comfortable / 32px floor a phone needs.
   4. Form controls under 16px font-size make iOS Safari zoom the whole
      page on focus — every admin input on a phone is now 16px.
   5. The super-admin panel's own tables are handled by their owner
      (local/super-admin-report.js: data-label pass + its mobile block) —
      not here. One DOM, one owner.

   Loaded AFTER the bundle + every other overlay stylesheet (index.html),
   so it wins ties without !important arms races.
   Companion gate: node scripts/e2e_admin_mobile.mjs  (numbers + screenshots)
   ============================================================ */

/* ------------------------------------------------------------
   1. Shared admin chrome on a phone
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Admin pages render inside the app's .dashboard; the compiled shell
     keeps a wide min-width in places, so nothing may push the page
     sideways. */
  .dashboard,
  .dashboard > main,
  .page-card {
    min-width: 0;
    max-width: 100%;
  }

  /* The page shells that exist on the admin routes (class names verified in the
     browser, not guessed: the blog and AI pages are overlay roots, not
     ".blog-page"/".ai-settings" — those selectors matched nothing). */
  .page-card.team-page,
  .page-card.ref-page,
  .page-card.ttp-blog-root,
  .page-card.ttp-ai-root {
    padding: 18px 16px;
  }

  /* Section headings stack instead of squeezing their title into a
     column next to a count/badge pill. */
  .section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .section-heading h2 {
    font-size: 22px;
    line-height: 1.2;
  }

  .section-heading p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ------------------------------------------------------------
   2. Team page — the invitation-accept / set-password card (the one
      Ravi called messy) and the member list
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  section.page-card.team-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* ONE column. The card holds: heading, New password, Confirm password,
     submit — in that order, nothing side by side, nothing clipped. */
  form.invite-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px 16px;
    border-radius: 14px;
  }

  form.invite-card > div {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  form.invite-card > div b {
    font-size: 15.5px;
    line-height: 1.3;
  }

  form.invite-card > div small {
    display: block;
    max-width: none;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
  }

  form.invite-card label {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    font-size: 12.5px;
    font-weight: 700;
    color: #2f3d38;
  }

  /* 16px keeps iOS Safari from zooming the page when a password field
     takes focus; 50px is a comfortable thumb target. */
  form.invite-card input,
  form.invite-card select {
    width: 100%;
    max-width: 100%;
    height: 50px;
    margin-top: 7px;
    font-size: 16px;
    border-radius: 11px;
  }

  form.invite-card > .primary {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: 52px;
    margin-top: 2px;
    font-size: 15px;
  }

  /* Feedback ("Account setup complete…", "The passwords do not match.")
     must not be missable on a phone. */
  .team-page .form-message {
    font-size: 13px;
    line-height: 1.45;
  }

  /* Member + pending-invitation rows read as cards, not as a squeezed
     table: person, role, joined, action — each on its own line. */
  .member-list {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .member-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid #dce6e1;
    border-radius: 14px;
    background: #fff;
  }

  .member-row > time {
    grid-column: 1;
    grid-row: auto;
    font-size: 12.5px;
    color: #5b6b60;
  }

  .member-row > div:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .member-row .member-person > span {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .member-row .member-person b {
    font-size: 15px;
  }

  .member-row .member-person small {
    font-size: 12px;
  }

  .role-badge {
    font-size: 12px;
    padding: 3px 10px;
  }

  /* A tap target, not a 17px text sliver. */
  .member-row .danger-link {
    min-height: 40px;
    padding: 9px 12px;
    margin-left: 0;
    border: 1px solid #efd1cd;
    border-radius: 9px;
    background: #fff7f6;
    font-size: 13px;
  }

  .member-row select {
    height: 44px;
    margin-top: 0;
    font-size: 16px;
  }
}

/* ------------------------------------------------------------
   3. Super-admin panel — NOT styled from here.
   The panel (local/super-admin-report.js) appends its own <style> to <head>
   at runtime, so it always wins ties against any rule in this file: a copy of
   its rules here would silently lose and look like it was doing something.
   Its mobile block (nav chips, header tools, support filters, stacked tables)
   lives with the DOM it owns, in that file. One DOM, one owner.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   4. Blog manager — the post row that wrapped one word per line
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .blog-toolbar {
    gap: 10px;
  }

  .blog-chips {
    gap: 6px;
  }

  .blog-chip-btn {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 13px;
  }

  .blog-toolbar-right {
    width: 100%;
    gap: 8px;
  }

  .blog-toolbar-right select,
  .blog-search {
    min-width: 0;
    height: 42px;
    flex: 1 1 100%;
    font-size: 16px;
  }

  .blog-new {
    flex: 1 1 100%;
    min-height: 42px;
    justify-content: center;
  }

  /* The actual defect: flex row + flex-shrink:0 actions starved the title.
     Stack the row and let the buttons share the full width. */
  .blog-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }

  .blog-row-main {
    min-width: 0;
  }

  .blog-row-title {
    display: flex;
    align-items: center;
    min-height: 32px;   /* a 21px single-line title is a miss-the-target link */
    font-size: 15.5px;
    line-height: 1.35;
  }

  .blog-row-meta {
    gap: 8px;
    font-size: 12px;
  }

  .blog-row-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .blog-row-actions .blog-act {
    flex: 1 1 auto;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Editor form: single column, thumb-sized controls. */
  .blog-form-grid,
  .blog-form-row2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-field input,
  .blog-field select,
  .blog-field textarea {
    font-size: 16px;
  }

  .blog-field > span {
    font-size: 12.5px;
  }
}

/* ------------------------------------------------------------
   5. AI settings — knowledge-base rows, provider fields, toggles
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .admin-ai-grid,
  .ai-ws-current {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-ai input,
  .admin-ai select,
  .admin-ai textarea {
    font-size: 16px;
  }

  .ai-toggle-row {
    gap: 12px;
    align-items: center;
    min-height: 44px;
  }

  /* 17x17 on a phone is a miss-the-target checkbox. */
  input.ai-enabled-toggle {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .ai-key-row,
  .ai-kb-import-row,
  .ai-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  .ai-kb-import-row button,
  .ai-kb-addbtn,
  .ai-file-btn,
  .ai-settings-save,
  .ai-card-actions .primary {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .ai-kb-add summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 13.5px;
  }

  .ai-kb-warnbox {
    font-size: 12.5px;
    line-height: 1.45;
  }
}

/* ------------------------------------------------------------
   6. Referrals (admin view) — KPI grid + link row
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .ref-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .ref-link-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .ref-link-input {
    width: 100%;
    font-size: 15px;
  }

  .ref-share-btn,
  .ref-link-row .primary {
    width: 100%;
    min-height: 44px;
  }

  .ref-table-head {
    display: none;
  }
}