/* Shared mobile-responsive layer — loaded last on every page (admin, index, db, login).
   Fills the gaps left by the per-page @media blocks, including inline-styled layouts. */

html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }

/* ── Tablet & below ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { overflow-x: hidden; }
  /* inline multi-column grids: collapse 3+ columns to 2 */
  [style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Phones ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar drawer: keep it scrollable and above content */
  .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; max-width: 85vw; }
  .sidebar-toggle { min-width: 40px; min-height: 40px; }

  /* Topbar: let the title shrink, hide secondary text, wrap actions */
  .topbar { gap: 8px; flex-wrap: nowrap; }
  .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar > div:last-child, .topbar-right, .topbar-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

  /* Prevent iOS focus-zoom and give comfortable tap targets */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; max-width: 100%; }
  button, .btn, .btn-sm, .btn-primary, .btn-cancel, .hdr-btn, .sidebar-item, .sidebar-link { min-height: 36px; }

  /* Inline-styled 2-col grids / rows collapse to a single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: auto 1fr auto"],
  [style*="grid-template-columns:1fr auto"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="repeat(auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important; }

  /* Inline fixed widths must not overflow the screen */
  [style*="min-width:180px"], [style*="min-width:170px"], [style*="min-width:140px"],
  [style*="min-width:130px"], [style*="min-width:120px"] { min-width: 0 !important; }
  [style*="width:180px"], [style*="width:210px"], [style*="width:220px"] { max-width: 100%; }
  [style*="display:flex"][style*="gap"] { flex-wrap: wrap; }

  /* Two-pane layouts (e.g. cron log list + viewer) stack vertically */
  [style*="display:flex;flex:1;min-height:0;overflow:hidden"] { flex-direction: column !important; overflow: auto !important; }
  #cron-log-list { width: 100% !important; min-width: 0 !important; max-height: 180px; border-right: 0 !important; border-bottom: 1px solid var(--border); }

  /* Tables: horizontal scroll inside their container rather than the page */
  .card, .table-wrap, .tbl-wrap, [class*="table-wrap"], [class*="tbl-wrap"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table[style*="table-layout:fixed"] { table-layout: auto !important; }

  /* Modals / overlays / popups */
  .modal, .modal-box, .access-modal, [class*="modal-card"], [class$="-modal"] {
    width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: 92vh; overflow-y: auto;
  }
  .modal-overlay, .overlay, [class*="modal-bg"], [class*="backdrop"] { padding: 8px !important; align-items: flex-end; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer button { flex: 1 1 auto; }

  /* Toasts stay on screen */
  #toast-container, .toast-container, .toast { max-width: calc(100vw - 24px); }
  #toast-container, .toast-container { left: 12px !important; right: 12px !important; }

  /* Button groups and filter rows wrap */
  .card-header > *, .filters > *, .toolbar > *, .actions { max-width: 100%; }
  .actions, .toolbar, .btn-group { flex-wrap: wrap; }
}

/* ── Small phones ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  [style*="repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; }
  main { padding-left: 8px; padding-right: 8px; }
  .card { padding: 12px !important; }
  h1 { font-size: 20px; }
  h2 { font-size: 16px; }
  /* keep action buttons from forcing the row wider than the screen */
  td .btn-edit, td .btn-del, td button { padding: 4px 8px; font-size: 11px; }
  td, th { word-break: break-word; }
}

/* ── Landscape phones: reclaim vertical space ───────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { height: 44px; }
  .modal, .access-modal { max-height: 96vh; }
}

/* Respect notches / home indicator */
@supports (padding: max(0px)) {
  .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Off-canvas sidebar (authoritative) ─────────────────────────────
   index.html defines the base .sidebar rule AFTER its media queries, so the
   page's own mobile rules lose. Re-assert the drawer here (loaded last). */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important; top: 0; left: 0; height: 100vh; height: 100dvh;
    width: 260px !important; min-width: 260px !important;
    transform: translateX(-100%); z-index: 300;
    box-shadow: none;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.35); }
  .sidebar-toggle { display: flex !important; }
  .sidebar-content { width: 100% !important; flex: 1 1 auto; min-width: 0; }
  /* undo the 58px icon-rail rules from index.html: the drawer shows full labels */
  .sidebar-logo-text, .sidebar-section, .sidebar-user-info { display: block !important; }
  .sidebar-item > span:not(.si-icon), .sidebar-link > span:not(.si-icon),
  .sidebar-action > span:not(.si-icon), .sidebar-env-badge span { display: inline !important; }
  .sidebar-badge { display: inline-block; }
  .sidebar-logo { padding: 18px 20px; justify-content: flex-start; }
  .sidebar-item, .sidebar-link, .sidebar-action { padding: 11px 20px; justify-content: flex-start; }
  .sidebar-user { padding: 10px 16px; justify-content: flex-start; }
  .sidebar-env-badge { justify-content: flex-start; }
  main { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* ── Floating buttons must never cover the last bit of content ──────── */
@media (max-width: 768px) {
  body:has(.fab-refresh) main { padding-bottom: 76px; }
  .tbl-wrap { max-width: 100%; }
}

/* ── Deploy page: card height + action buttons ───────────────────── */
@media (max-width: 768px) {
  /* index.html sets .card { flex: 1 } inside a column, stretching cards to fill the screen */
  main > .card, .view > .card, .step-wrap > .card { flex: 0 0 auto !important; }

  /* Deploy full-width on top; Patch Upload + Clear share the row below */
  .deploy-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; align-items: stretch !important; }
  .deploy-actions .deploy-btn { grid-column: 1 / -1; flex: none; width: 100%; white-space: nowrap; }
  .deploy-actions #patch-btn-wrap { display: block; min-width: 0; }
  .deploy-actions #patch-btn-wrap[style*="display:none"] { display: none !important; }
  .deploy-actions #patch-btn-wrap .patch-btn { width: 100%; justify-content: center; white-space: nowrap; }
  .deploy-actions .clear-btn { width: 100%; justify-content: center; white-space: nowrap; }
  /* when Patch Upload is hidden, Clear takes the whole row */
  .deploy-actions #patch-btn-wrap[style*="display:none"] ~ .clear-btn { grid-column: 1 / -1; }
}

/* ── Notification dropdown: pin to the viewport instead of the bell ── */
@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed !important;
    top: 60px !important; left: 8px !important; right: 8px !important; bottom: auto !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: calc(100dvh - 76px); transform: none;
  }
  .notif-dropdown::before { display: none; }
  .notif-list { max-height: calc(100dvh - 150px); }
}

/* ── Dark mode: inline `background:#fff` (buttons, modals, selects) ──
   Many controls hard-code a white background inline, which the theme can't
   reach. Remap exact #fff (not #fffbeb etc.) to the dark surface. The white
   "Start Backup" pill on the purple bar is intentional and kept. */
html[data-theme="dark"] [style*="background:#fff;"]:not(#s3b-submit-btn),
html[data-theme="dark"] [style$="background:#fff"]:not(#s3b-submit-btn) {
  background-color: #10263A !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] [style*="background:#fff;"]:not(#s3b-submit-btn):not([style*="color:#"]),
html[data-theme="dark"] [style$="background:#fff"]:not(#s3b-submit-btn):not([style*="color:#"]) { color: #e2e8f0; }
/* dark text colours that would vanish on the dark surface */
html[data-theme="dark"] [style*="background:#fff;"][style*="color:#1e293b"],
html[data-theme="dark"] [style*="background:#fff;"][style*="color:#475569"] { color: #cbd5e1 !important; }
html[data-theme="dark"] [style*="background:#fff;"][style*="color:#92400e"] { color: #fbbf24 !important; }
html[data-theme="dark"] [style*="background:#fff;"][style*="color:#15803d"] { color: #4ade80 !important; }
html[data-theme="dark"] [style*="background:#fff;"][style*="color:#6d28d9"]:not(#s3b-submit-btn) { color: #c4b5fd !important; }
html[data-theme="dark"] textarea:not([class]) { background: #10263A; color: #e2e8f0; border-color: rgba(255,255,255,0.12); }

/* ── Select dropdowns: readable options in dark mode, tighter filter rows ── */
select option, select optgroup { background-color: #fff; color: #1f2937; }
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup { background-color: #1a1a2e; color: #e2e8f0; }
html[data-theme="dark"] select { color-scheme: dark; }

@media (max-width: 768px) {
  select { font-size: 14px !important; padding-top: 8px; padding-bottom: 8px; text-overflow: ellipsis; }
  /* filter bars: two selects per row, equal width */
  .filters, .filter-row, .hist-filters, [class*="filter-bar"] {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; flex-direction: row !important;
  }
  .filters select, .filter-row select, .hist-filters select, [class*="filter-bar"] select { width: 100% !important; min-width: 0 !important; }
}