/* =====================================================================
   mobile.css — shared responsive layer for Ensemble Tools
   Load AFTER each page's inline <style>. Desktop is untouched;
   everything here activates at phone/tablet widths or improves touch.
   ===================================================================== */

/* ---------- global touch quality (all widths) ---------- */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

:focus-visible {
  outline: 2px solid var(--ink, #14161a);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Smooth momentum scrolling for any table wrapper injected by ui.js */
.tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius, 11px);
  scrollbar-width: thin;
}
.tscroll > table { margin: 0; }
/* subtle right-edge fade hint that there's more to scroll */
.tscroll.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

/* ---------- searchable dropdown (combo) — base, all widths ---------- */
.combo-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 38px; padding: 8px 10px;
  font: inherit; font-size: 13.5px; text-align: left;
  color: var(--ink, #14161a); background: #fff;
  border: 1px solid var(--line, #e8e9eb); border-radius: 7px;
  cursor: pointer;
}
.combo-trigger:focus-visible { border-color: var(--ink, #14161a); }
.combo-trigger[aria-disabled="true"] { opacity: .55; cursor: default; }
.combo-trigger .combo-val {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-trigger .combo-val.placeholder { color: var(--muted, #7f838b); }
.combo-trigger .combo-caret {
  flex: none; width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted, #7f838b);
  border-bottom: 1.5px solid var(--muted, #7f838b);
  transform: rotate(45deg) translateY(-2px);
}

.combo-backdrop {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(20, 22, 26, .35);
  opacity: 0; transition: opacity .18s ease;
}
.combo-backdrop.open { opacity: 1; }

.combo-panel {
  position: fixed; z-index: 999;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line, #e8e9eb);
  box-shadow: 0 12px 40px rgba(20, 22, 26, .16);
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Arial, sans-serif;
}
.combo-search {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line, #e8e9eb);
}
.combo-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 16px; /* 16px stops iOS auto-zoom */
  color: var(--ink, #14161a); padding: 4px 0; min-width: 0;
}
.combo-search .combo-count {
  flex: none; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--muted, #7f838b);
}
.combo-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.combo-opt {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ink, #14161a);
  padding: 11px 12px; border-radius: 8px; cursor: pointer;
}
.combo-opt.active, .combo-opt:hover { background: var(--accent-dim, #eef0f2); }
.combo-opt[aria-selected="true"] { font-weight: 700; }
.combo-opt[aria-selected="true"]::after { content: " ✓"; color: var(--muted, #7f838b); font-weight: 400; }
.combo-empty { padding: 18px 12px; font-size: 13px; color: var(--muted, #7f838b); text-align: center; }

/* Desktop: anchored popover (positioned by ui.js) */
@media (min-width: 761px) {
  .combo-panel { border-radius: 11px; max-height: 340px; width: var(--combo-w, 280px); }
}

/* Mobile: bottom sheet */
@media (max-width: 760px) {
  .combo-panel {
    left: 0; right: 0; bottom: 0; top: auto !important;
    border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    max-height: 72vh;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(8%); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
  }
  .combo-panel.open { transform: translateY(0); opacity: 1; }
  .combo-panel::before {          /* grab handle */
    content: ""; align-self: center; flex: none;
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--line-strong, #d7d9dc); margin: 8px 0 2px;
  }
  .combo-sheet-title {
    flex: none; padding: 6px 14px 0; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #7f838b);
  }
}

/* ---------- phone layout (≤760px) ---------- */
@media (max-width: 760px) {

  /* The shell owns page padding now; targeting body would also pad the
     sidebar drawer and the sticky top bar. */
  .app-main { padding-left: 12px !important; padding-right: 12px !important;
              padding-bottom: 96px !important; }

  h1 { font-size: 24px !important; }
  .sub { font-size: 13.5px; line-height: 1.5; }

  /* Filter/form rows: every field takes the full width, in source order.
     !important beats the inline style="width:180px" attributes. */
  .row { gap: 12px; }
  .row .field { width: 100% !important; }
  .row .field input,
  .row .field select,
  .row .field .combo-trigger { width: 100% !important; }
  .row > button, .row > .field > button { width: 100%; }

  /* Inputs: comfortable to tap, no iOS zoom */
  input, select, textarea, .combo-trigger {
    font-size: 16px !important;
    min-height: 44px;
  }
  button { min-height: 44px; font-size: 14px !important; padding: 10px 16px; }
  select { background-position: right 10px center; }

  /* Cards & stat grids: two-up instead of squeezing four */
  .cards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .card { padding: 13px 14px; }
  .stat { font-size: 24px; }

  /* Tables: never squash — scroll inside the rounded wrapper */
  .tscroll table { min-width: 560px; }
  th, td { padding: 10px 12px !important; }

  /* Alert rows stack their action link */
  .alert { flex-wrap: wrap; }
  .alert .go { margin-left: 0; width: 100%; }

  /* Sticky batch bar (upload pages): actions wrap to a clean second line */
  .batch-bar { left: 0; right: 0; }
  .batch-bar-inner { flex-wrap: wrap; gap: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)); }
  .batch-bar-actions { width: 100%; display: flex; gap: 8px; }
  .batch-bar-actions button { flex: 1; min-height: 44px; }

  /* Pager taps */
  .pager { justify-content: center; gap: 12px; }
  .pager button { min-width: 44px; }
}

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .cards { grid-template-columns: 1fr !important; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .combo-panel, .combo-backdrop, .app-nav, .nav-scrim { transition: none !important; }
}

/* =====================================================================
   Desktop polish layer — refinements at all widths, tuned for ≥761px.
   Same monochrome editorial system, executed with more precision.
   ===================================================================== */

/* Motion + interaction feel */
button, .combo-trigger, .card, input, select, textarea {
  transition: background-color .14s ease, border-color .14s ease,
              color .14s ease, box-shadow .14s ease, transform .06s ease;
}
button:not(:disabled):active { transform: translateY(1px); }

/* Buttons: clear primary/secondary hierarchy */
button.primary:not(:disabled):hover { background: #2a2d33; border-color: #2a2d33; }
button:not(.primary):not(:disabled):hover { border-color: var(--line-strong, #d7d9dc); background: #fafafa; }

/* Inputs: one consistent focus treatment everywhere */
input:focus, select:focus, textarea:focus, .combo-trigger:focus-visible {
  border-color: var(--ink, #14161a) !important;
  box-shadow: 0 0 0 3px rgba(20, 22, 26, .08);
}

/* Cards: quiet lift so panels separate from the page */
.card { box-shadow: 0 1px 2px rgba(20, 22, 26, .04); }

/* Tables: sticky headers while a long table scrolls */
@media (min-width: 761px) {
  .tscroll { max-height: 72vh; overflow-y: auto; }
  .tscroll th { position: sticky; top: 0; z-index: 2; }

  /* Slim, unobtrusive scrollbars on scroll containers */
  .tscroll::-webkit-scrollbar, .combo-list::-webkit-scrollbar { height: 8px; width: 8px; }
  .tscroll::-webkit-scrollbar-thumb, .combo-list::-webkit-scrollbar-thumb {
    background: #d7d9dc; border-radius: 4px; }
  .tscroll::-webkit-scrollbar-thumb:hover, .combo-list::-webkit-scrollbar-thumb:hover { background: #a7abb2; }
}

/* Section rules: lighter, with breathing room */
hr { border: 0; border-top: 1px solid var(--line, #e8e9eb); margin: 18px 0; }

/* Sticky batch bar: lift it off the content when pinned */
.batch-bar { box-shadow: 0 4px 16px rgba(20, 22, 26, .07); }

/* Pills: consistent mono numerals where counts appear */
.pill { font-variant-numeric: tabular-nums; }