/* system/apps/manage-repo-files/styles.css
 *
 * Split out of index.html's shared <style> block (Sept 2026) -- see
 * start-here.md's "Each app owns its own styles.css" note for why.
 *
 * .repo-manage's own bare-wrapper rule was originally shared
 * (index.html), but turned out to be two vestigial lines with no real
 * relationship between its consumers -- see
 * system/lib/shared-app-styles/styles.css's header. Denormalized
 * here instead: this app just states it locally. (Its .status-line
 * IS a genuine shared convention with apps/recent-commits and still
 * lives centrally in that same shared file.)
 *
 * FONT SIZE (Sept 2026, Ron): this file used to sprinkle --fs-3xs /
 * --fs-2xs / --fs-xs / --fs-md across different elements individually,
 * built up incrementally over many small fixes across one long
 * session -- the result was genuinely inconsistent, not a deliberate
 * hierarchy: some text needed zooming in to read, while an unstyled
 * native <select>'s options list (nothing here gave it ANY font-size
 * at all) rendered at the browser's own default, dramatically larger
 * than everything else. Fixed at the root instead of patching each
 * symptom: ONE size for the whole app (var(--fs-md), the page's own
 * master anchor -- see index.html's :root comment), applied via plain
 * inheritance, plus `font: inherit` on every native form control
 * (select/input/textarea/button don't inherit font-size from their
 * container by default in any browser -- that omission, not any
 * deliberate choice, is what let the tag dropdown look so different
 * from its own label). Any remaining visual hierarchy in this file
 * (section headers, secondary labels) comes from font-weight and
 * color only, never a different size.
 */
.repo-manage {
  width: 100%;
  text-align: left;
  font-size: var(--fs-md);
}

/* Overrides the shared .repo-manage .status-line rule in
   shared-app-styles/styles.css (which sets font-size: var(--fs-2xs))
   -- scoped to only this app since this file loads after that one
   (see index.html's <link> order), so apps/recent-commits' own
   status-line text is untouched. Part of the single-size pass above:
   status/push/tag-preview messages are exactly the kind of text Ron
   was having to zoom in to read. */
.repo-manage .status-line {
  font-size: inherit;
}

.repo-manage select,
.repo-manage input,
.repo-manage textarea,
.repo-manage button {
  font: inherit;
}

.repo-manage .tree {
  font-family: var(--font-sans);
  line-height: 1.7;
  max-height: 340px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.repo-manage .tree .row {
  /* Was a two-column flex layout (path left, badges pinned right) --
     broke down badly once a path wrapped to multiple lines (e.g. a
     long filename with both a status AND a conflict badge): the
     badges stayed pinned beside just the first wrapped line, leaving
     a lot of dead space below. Block flow instead: badges follow
     right after the path text and wrap together with it as one unit. */
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-bottom: 2px;
}

.repo-manage .tree .row.conflict-flag {
  border-left: 3px solid #7c3aed;
}
.repo-manage .tree .badge.conflict-badge { color: #7c3aed; }

.repo-manage .branch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.75em;
  margin-bottom: 0.25em;
}

.repo-manage .branch-row-label {
  opacity: 0.8;
}

.repo-manage .branch-row-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.repo-manage .branch-note {
  margin-top: 0;
}

.repo-manage select {
  /* Sept 2026, Ron: a long buffer-branch name (e.g.
     "test-conflict-3-buffer-1789603181657") was stretching a <select>
     to its full intrinsic width, forcing the whole row -- and the
     page -- wider than the screen. Applies to every <select> in this
     app now, not just the branch picker -- the new tag dropdown had
     the identical exposure and, before this pass, no width limit
     either. A native <select> has no size limit by default; capped
     and truncated instead of letting its content dictate layout width. */
  max-width: 65vw;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repo-manage .tree .path { overflow-wrap: anywhere; white-space: pre-wrap; }
.repo-manage .tree .row.added .path { background: #e6f6ee; color: #1e8e5a; border-radius: 4px; padding: 0 3px; }
.repo-manage .tree .row.modified .path { background: #eaf0fd; color: #2f5fd0; border-radius: 4px; padding: 0 3px; }
.repo-manage .tree .row.dir .path { color: var(--slate-light); font-weight: 600; }
.repo-manage .tree .badge { display: inline-block; margin-left: 6px; color: var(--slate-light); }

/* Deletion-related statuses, from parsing commit-message.md's
   "# files-to-delete" section -- see start-here.md / this app's
   app.js. 'deleted' = will actually happen; the other three are all
   "requested but can't/won't happen," shown in the tree rather than
   silently dropped, so Ron can see exactly what a zip will and won't
   do before confirming. */
.repo-manage .tree .row.deleted .path { background: #fdeaea; color: #c23b3b; border-radius: 4px; padding: 0 3px; text-decoration: line-through; }
.repo-manage .tree .row.delete-missing .path,
.repo-manage .tree .row.delete-dir .path,
.repo-manage .tree .row.conflict .path { background: #fff7e6; color: #7a5a12; border-radius: 4px; padding: 0 3px; }

/* Collapsible sections (Sept 2026, Ron's request): file list and each
   editable field default to collapsed, so the primary flow -- choose a
   zip, hit Confirm -- isn't competing for screen space with detail
   most pushes don't need to inspect. Plain native <details>/<summary>
   on purpose: free keyboard/accessibility behavior, no JS state to
   maintain for open/closed. */
.repo-manage .repo-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 0 12px;
}
.repo-manage .repo-section summary {
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
}
.repo-manage .repo-section-body {
  padding-bottom: 12px;
}

.repo-manage .commit-message-label {
  display: block;
  font-weight: 600;
  color: var(--slate);
  margin-top: 14px;
  margin-bottom: 6px;
}
/* Text-entry fields floored at real 16px regardless of the app's
   single-size rule above -- same reasoning as apps/chat's
   .chat-textarea / apps/notes's .notes-textarea: iOS Safari auto-zooms
   the whole page on focus for any text input under 16px, which the
   single-size rule could otherwise drop below depending on
   --font-scale. width/max-width/box-sizing explicit on all three so
   none of them can stretch past their container the way the tag
   dropdown's plain text field did before this pass (it inherited no
   width at all from .text-input-base). */
.repo-manage .commit-message-input,
.repo-manage input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: max(16px, var(--fs-md));
  font-family: var(--font-sans);
}
.repo-manage .commit-message-input {
  resize: vertical;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
}

.repo-manage button {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
}
.repo-manage button.secondary { background: #fff; color: var(--brand); }
.repo-manage button.danger { background: #fff; color: #c23b3b; border-color: #c23b3b; }
.repo-manage button:disabled { opacity: 0.5; cursor: default; }
.repo-manage .row-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Sept 2026: whatever's currently blocking Confirm & push (missing/
   wrong # branch heading, stale diff basis, a name collision) --
   moved here from #repo-diff-status (above three collapsible
   sections, easy to miss) to sit right next to the buttons it's
   blocking, at Ron's request. Visually a lighter-weight cousin of
   .force-resolve-warning below -- same "you can't proceed" register,
   but this is routine/expected (forgot a heading, picked the wrong
   branch), not the one-time conflict-bypass path that warning is
   reserved for -- so no border, no bold, just enough color to read as
   a blocker rather than an ordinary status line. */
.repo-manage .repo-branch-error {
  color: #7a1f1f;
  background: #fdeaea;
  border-radius: 8px;
  padding: 8px 12px;
  overflow-wrap: anywhere;
}

.repo-manage .force-resolve-warning {
  /* Deliberately red -- this is the one path that bypasses git's own
     conflict detection (Sept 2026, branch-workflow-plan.md's
     buffer-branch splat), and it should look categorically different
     from an ordinary status line, not blend in with routine feedback.
     font-family set explicitly rather than relying on inheriting the
     page's own body { font-family: var(--font-sans) } default --
     Ron saw this rendering monospace despite nothing here or upstream
     that should have caused that; explicit beats implicit here. */
  font-family: var(--font-sans);
  background: #fdeaea;
  border: 2px solid #c23b3b;
  color: #7a1f1f;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

/* Used for this app's zip-upload file <input> -- kept in the layout
   (unlike a plain display:none) because iOS Safari can refuse to open
   the picker on a programmatic .click() of an input that's actually
   removed from rendering. Generic enough that another app could copy
   it verbatim if it ever needs the same trick -- deliberately NOT
   made shared/central for just one current consumer; fewer shared
   touchpoints between otherwise-unrelated apps beats saving 10 lines
   of duplication (see start-here.md's caution about .self-edit/
   .repo-manage for the same reasoning played out the other way). */
.visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}