/* ════════════════════════════════════════════════════════════════════════
 * fretly-organizer.css — file-explorer style organiser
 *
 * Module: assets/js/fretly-organizer.js (window.FretlyOrganizer).
 * Class prefix: `.fly-org-`.
 *
 * Layout: header (toolbar) → breadcrumb → grid (folders + items mixed).
 * Right-click any card opens a context menu (`.fly-org-ctx`).
 * ════════════════════════════════════════════════════════════════════════ */

.fly-org {
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  color: var(--text, #2a2a2a);
  font-size: var(--font-base);
  min-height: 0;
}

/* ── Header / toolbar ──────────────────────────────────────────────── */
.fly-org-header {
  display: flex; align-items: center; gap: var(--space-sm);
  /* Wrap controls onto a second row at narrow widths instead of clipping
     them off the page edge (e.g. half-window). */
  flex-wrap: wrap;
  row-gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-w, 1px) solid var(--border, #e1ddd2);
  background: var(--surface-2, #f8f5ef);
  flex: 0 0 auto;
}
.fly-org-search {
  flex: 1 1 16rem;
  min-width: 9rem;          /* allow it to shrink before anything overflows */
  height: var(--ctl-h-md);
  padding: 0 var(--space-sm);
  font-size: var(--font-sm);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-md, 6px);
  background: var(--surface, #fff);
  color: var(--text, #2a2a2a);
}
.fly-org-search:focus {
  outline: none;
  border-color: var(--accent, #c85a1a);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232,133,74,.2);
}
.fly-org-toolbar-spacer { flex: 1 1 auto; }
.fly-org-tb-btn { white-space: nowrap; }
/* Cols stepper (cards-grid column count). */
.fly-org-cols {
  display: inline-flex; align-items: center; gap: var(--space-xs, 4px);
}
.fly-org-cols-label {
  font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3, #b8b3a3);
}
.fly-org-cols-num {
  min-width: 2.6em; text-align: center;
  font-size: var(--font-sm); font-weight: 600; color: var(--text, #2a2a2a);
}
/* Sort widget — uses the app-standard .uid-select for the dropdown
   (admin-ui-defaults.css).  The wrapper just constrains width and
   provides the label column matching the toolbar's other labelled
   controls (chord-size, bars/line, etc.). */
.fly-org-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.fly-org-sort-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-xs);
  color: var(--text-3, #888);
  font-weight: var(--weight-semibold);
}
.fly-org-sort .fly-org-sort-select {
  width: auto;
  min-width: 14.2857rem;     /* ~200 px */
}

/* ── Body: sidebar | main ─────────────────────────────────────────── */
.fly-org-body {
  display: grid;
  grid-template-columns: 17.1429rem 1fr;     /* ~240 px sidebar */
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  flex: 1 1 auto;
  min-height: 0;
}
/* Sidebar collapsed — main becomes full-width.  Toggle pill in
   the toolbar opens/closes the panel.  Task #25, user 2026-05-18. */
.fly-org--sidebar-closed .fly-org-body {
  grid-template-columns: 1fr;
}
.fly-org--sidebar-closed .fly-org-sidebar {
  display: none;
}
.fly-org-sidebar-toggle { margin-right: var(--space-sm); }
.fly-org-sidebar {
  min-width: 0;
  overflow-y: auto;
  background: var(--surface-2, #f8f5ef);
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-sm);
  align-self: start;
  max-height: calc(100vh - 14.2857rem);    /* ~200 px chrome */
}
.fly-org-side-empty {
  font-size: var(--font-sm);
  font-style: italic;
  color: var(--text-3, #999);
  padding: var(--space-sm) var(--space-sm);
}
.fly-org-side-tree { display: flex; flex-direction: column; gap: 1px; }
.fly-org-side-entry {
  display: flex; align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 0; background: transparent;
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  text-align: left;
  font-size: var(--font-sm);
  color: var(--text, #2a2a2a);
  width: 100%;
}
.fly-org-side-entry:hover { background: var(--surface, #fff); }
.fly-org-side-entry.is-on {
  background: rgba(232,133,74,0.12);
  color: var(--accent, #c85a1a);
  font-weight: var(--weight-semibold);
}
.fly-org-side-caret {
  width: 1rem;
  font-size: var(--font-xs);
  color: var(--text-3, #b8b3a3);
  flex: 0 0 1rem;
  text-align: center;
  user-select: none;
}
.fly-org-side-caret.is-toggle:hover {
  color: var(--accent, #c85a1a);
}
.fly-org-side-icon { font-size: var(--font-base); color: var(--text-3, #b8b3a3); flex: 0 0 auto; }
.fly-org-side-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fly-org-side-count {
  font-size: var(--font-xs);
  color: var(--text-3, #b8b3a3);
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-full, 999px);
  padding: 1px var(--space-sm);
  flex: 0 0 auto;
}
.fly-org-side-entry.is-on .fly-org-side-count {
  border-color: var(--accent, #c85a1a);
  color: var(--accent, #c85a1a);
}

.fly-org-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}

/* ── Breadcrumb ────────────────────────────────────────────────────── */
.fly-org-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-xs);
  padding: var(--space-xs) var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
  color: var(--text-2, #666);
  flex: 0 0 auto;
}
.fly-org-crumb {
  background: transparent;
  border: 0;
  padding: var(--space-xs) var(--space-xs);
  border-radius: var(--radius-sm, 4px);
  color: var(--accent, #c85a1a);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.fly-org-crumb:hover { background: var(--surface-2, #f8f5ef); }
.fly-org-crumb.is-current {
  color: var(--text, #2a2a2a);
  font-weight: 700;
  cursor: default;
}
.fly-org-crumb.is-current:hover { background: transparent; }
.fly-org-crumb--root { font-weight: 600; }
.fly-org-crumb-sep {
  color: var(--text-3, #b8b3a3);
  font-weight: 400;
  user-select: none;
}

/* ── Grid: folders + items mixed ──────────────────────────────────── */
.fly-org-grid {
  align-content: start;
  /* Top padding leaves room for the hover tooltip's slight overhang
     above first-row cards (it pokes ~0.7em above the card edge). */
  padding: var(--space-md, 12px) var(--space-xs) var(--space-2xl);
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
/* Cards layout (default).  Folder cards + item cards in an auto-fill
   grid. */
/* Explicit column count (Cols stepper) — _applyCols (JS) writes an
   inline `grid-template-columns: repeat(N, minmax(0,1fr))`.  The picked
   count is honored unconditionally (same contract as the Scales/Chords
   Collection view); narrow cards degrade via ellipsis + hover tooltip
   + wrapping chips.  Inline JS rather than CSS math because Safari
   rejects max()/calc() inside grid minmax().  data-cols = styling hook. */
/* Cards degrade tidily at any width: one-line title + subtitle with
   ellipsis instead of char-truncation / word-per-line wrapping. */
.fly-org-card-title,
.fly-org-card-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.fly-org-grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.1429rem, 1fr));    /* ~240 px */
  gap: var(--space-md);
}
/* List layout — a genuine compact list: folders AND items render as
   single-column `.fly-org-row` rows (icon + name + count/pills on one
   line, no card chrome / large preview).  Row builders:
   _buildFolderRow / _buildItemRow in fretly-organizer.js. */
.fly-org-grid--list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.fly-org-card {
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-md) var(--space-lg);
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  cursor: pointer;
  transition: border-color var(--t-fast, .12s), box-shadow var(--t-fast, .12s), background var(--t-fast, .12s);
  user-select: none;
}
.fly-org-card:hover {
  border-color: var(--accent, #c85a1a);
  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.06));
  /* Hovered card (and its title tooltip) paints above neighbours. */
  z-index: 41;
}
/* Full-title / full-label hover tip — a SINGLE position:fixed element
   on document.body (portal pattern), positioned by JS (_tipShow).
   Lives outside the scrolling grid by construction, so it can never
   contribute to scrollable overflow (every in-grid ::after tooltip
   variant made scrollbars flash on hover transits).  Shown only for
   truncated titles (data-title flag from _refreshTitleTooltips) and
   clipped chip labels. */
.fly-org-card { position: relative; }
.fly-org-tip {
  position: fixed;
  z-index: 4000;
  max-width: 22rem;
  padding: var(--space-xs) var(--space-sm);
  background: var(--text, #2a2a2a);
  color: var(--surface, #fff);
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  white-space: normal;
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.22));
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.fly-org-tip.is-on { opacity: 1; }
.fly-org-card--folder {
  background: var(--surface-2, #f8f5ef);
}
.fly-org-card--folder .fly-org-card-icon {
  font-size: var(--font-xl);
  margin-bottom: var(--space-2xs);
  line-height: 1;
  color: var(--accent, #e8853c);
}
.fly-org-card--folder .fly-org-card-icon svg {
  width: 1.1em;
  height: 1.1em;
  display: block;
}
.fly-org-card-title {
  font-weight: var(--weight-bold); font-size: var(--font-md, 15px);
  color: var(--text, #2a2a2a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fly-org-card-subtitle {
  font-size: var(--font-sm); color: var(--text-2, #777);
}

/* ── List rows ────────────────────────────────────────────────────── */
/* Compact single-line rows (folders + items).  Quieter chrome than the
   cards: hairline border, small paddings, everything on one baseline. */
.fly-org-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: border-color var(--t-fast, .12s), box-shadow var(--t-fast, .12s);
  user-select: none;
}
.fly-org-row:hover {
  border-color: var(--accent, #c85a1a);
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,0.04));
}
.fly-org-row-icon {
  flex: 0 0 auto;
  font-size: var(--font-sm);
  line-height: 1;
  user-select: none;
  display: inline-flex;
}
.fly-org-row--folder .fly-org-row-icon {
  color: var(--accent, #e8853c);
}
.fly-org-row-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}
/* Folder rows sit on the folder-card tint so they read as containers. */
.fly-org-row--folder {
  background: var(--surface-2, #f8f5ef);
}
.fly-org-row--folder .fly-org-row-title {
  font-weight: var(--weight-medium, 500);
}
/* Drag-drop target highlight — applied (via JS `fly-org-drop-over`) to the
   folder being hovered while dragging an item, on BOTH the sidebar folder
   rows and the grid folder cards.  Deliberately stronger than :hover (accent
   ring + tinted fill) so the drop target is unmistakable. */
.fly-org-drop-over {
  border-color: var(--accent, #c85a1a) !important;
  background: var(--accent-weak, rgba(200, 90, 26, 0.12)) !important;
  box-shadow: 0 0 0 2px var(--accent, #c85a1a) inset,
              var(--shadow-sm, 0 1px 4px rgba(0,0,0,0.06)) !important;
}
/* Title + (inline) subtitle share one line; the title yields via
   ellipsis before the chips or count badge ever wrap. */
.fly-org-row-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: row; align-items: baseline;
  gap: var(--space-sm);
}
.fly-org-row-title {
  font-weight: var(--weight-medium, 500);
  font-size: var(--font-sm, 13px);
  color: var(--text, #2a2a2a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.fly-org-row-subtitle {
  font-size: var(--font-xs);
  color: var(--text-3, #999);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}

/* ── Slot chips (cardCfg.chips()) ─────────────────────────────────── */
.fly-org-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  min-width: 0;
}
/* A single chip must never poke outside its card — the TEXT clips via
   the inner label span (the chip itself keeps overflow visible so the
   compact-mode hover overlay below isn't clipped). */
.fly-org-chip { max-width: 100%; }
.fly-org-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Narrow-card degradation (container query on the card itself): below
   ~12rem chips collapse to FIXED-SIZE initial-letter pills — they
   never change size on hover, so neighbouring pills never reflow or
   wrap.  The full label shows in the floating .fly-org-tip portal
   (JS), which lives outside the grid and can't disturb its layout or
   scrollbars.  Chips stay clickable at every width; subtitle yields
   its space. */
.fly-org-card { container-type: inline-size; }
@container (max-width: 12rem) {
  .fly-org-chip { padding: 2px 6px; }
  .fly-org-chip .fly-org-chip-label {
    max-width: 1.1em;            /* ≈ the initial letter */
  }
  .fly-org-card-subtitle { display: none; }
}
.fly-org-row .fly-org-chips {
  margin-top: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;   /* rows stay ONE line — chips never stack */
}
.fly-org-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium, 500);
  line-height: 1.4;
  border-radius: 999px;
  background: var(--accent-bg, rgba(232,135,74,.12));
  color: var(--accent-strong, #c85a1a);
  border: 1px solid var(--accent-border, rgba(232,135,74,.3));
}
.fly-org-chip.is-off {
  background: transparent;
  color: var(--text-3, #b8b3a3);
  border-color: var(--border, #e1ddd2);
}
/* Clickable chips (jump-to-tab, visibility pill) — affordance + hover. */
.fly-org-chip.is-clickable { cursor: pointer; transition: filter .12s, background .12s; }
.fly-org-chip.is-clickable:hover { filter: brightness(.96); }
.fly-org-chip.is-clickable:focus-visible {
  outline: var(--border-w-thick, 2px) solid var(--accent, #c85a1a);
  outline-offset: 1px;
}
/* Visibility pill carries a distinct look so it reads as a control. */
.fly-org-chip--published {
  background: var(--surface-2, #f1ede3);
  color: var(--text-2, #6b6657);
  border-color: var(--border, #d8d4c8);
}

/* ── Suites page host (?route=suites) ─────────────────────────────── */
/* Give the organizer a real height to size against — without it
   the inner `.fly-org-grid` flex:1 has nothing to fill. */
#suites-container,
.suites-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);  /* approx. navbar height */
}
#suites-container > .fly-org,
.suites-page > .fly-org {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── View-mode toggle (Cards | List) ──────────────────────────────── */
.fly-org-view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border, #e1ddd2);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.fly-org-view-toggle .fly-org-view-btn {
  border: 0;
  border-radius: 0;
  padding: var(--ctl-pad-y, 4px) var(--space-md);
  font-size: var(--font-sm);
  background: transparent;
  color: var(--text-2, #777);
  cursor: pointer;
  transition: background var(--t-fast, .12s), color var(--t-fast, .12s);
}
.fly-org-view-toggle .fly-org-view-btn + .fly-org-view-btn {
  border-left: 1px solid var(--border, #e1ddd2);
}
.fly-org-view-toggle .fly-org-view-btn:hover {
  background: var(--surface-2, #f8f5ef);
}
.fly-org-view-toggle .fly-org-view-btn.is-on {
  background: var(--accent, #c85a1a);
  color: #fff;
}

/* ── Inline create / rename form ────────────────────────────────── */
.fly-org-new-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--accent, #e8874a);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 0 0 0.2143rem var(--accent-bg, rgba(232,135,74,.1));
}
.fly-org-new-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--font-md, 15px);
  color: var(--text, #2a2a2a);
}
.fly-org-new-confirm,
.fly-org-new-cancel {
  flex-shrink: 0;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.fly-org-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-style: italic;
  color: var(--text-3, #999);
  padding: var(--space-3xl) var(--space-xl);
}

/* ── Context menu (right-click) ──────────────────────────────────── */
.fly-org-ctx {
  position: fixed;
  z-index: 6000;
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow-lg, 0 6px 24px rgba(0,0,0,0.18));
  padding: var(--space-xs);
  min-width: 11.4286rem;     /* ~160 px */
}
.fly-org-ctx-btn {
  text-align: left;
  padding: var(--space-xs) var(--space-md);
  border: 0; background: transparent;
  font-size: var(--font-sm);
  color: var(--text, #2a2a2a);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.fly-org-ctx-btn:hover {
  background: var(--surface-2, #f8f5ef);
  color: var(--accent, #c85a1a);
}
.fly-org-ctx-btn.is-danger {
  color: #b8362b;
}
.fly-org-ctx-btn.is-danger:hover {
  background: rgba(184, 54, 43, 0.08);
  color: #b8362b;
}
.fly-org-ctx-btn.is-disabled,
.fly-org-ctx-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.fly-org-ctx-sep {
  height: 1px;
  background: var(--border, #e1ddd2);
  margin: var(--space-xs) var(--space-xs);
}

/* ── Overlay variant ─────────────────────────────────────────────── */
/* (Used by chart-v2 quick-switch from the chart toolbar.  Chart v2's
   primary route renders the organiser inline, NOT in this overlay.) */
.fly-org-overlay {
  position: fixed; inset: 0;
  background: rgba(20,18,14,0.55);
  z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-xl);
}
.fly-org-overlay-dialog {
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.28));
  width: min(78.5714rem, 96vw);    /* ~1100 px */
  height: min(51.4286rem, 92vh);   /* ~720 px */
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fly-org-overlay-dialog > .fly-org { flex: 1 1 auto; min-height: 0; }
.fly-org-overlay-close {
  position: absolute; top: var(--space-2xl); right: var(--space-2xl);
  width: var(--ctl-h-md); height: var(--ctl-h-md);
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #d8d4c8);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-xl); line-height: 1;
  color: var(--text-2, #666);
  cursor: pointer; z-index: 5001;
}
.fly-org-overlay-close:hover { color: var(--text); border-color: var(--accent, #c85a1a); }

/* ── Inline (full-route) variant — chart-v2 home page ────────────── */
.fly-org-inline {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.fly-org-inline > .fly-org {
  width: 100%;
  height: 100%;
  border: var(--border-w, 1px) solid var(--border, #e1ddd2);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

/* When an organiser is mounted on a route, let it use the full viewport
   width — bypass the page-wrap's 1600 px cap and shrink its outer
   gutter so the file-explorer feels like a real workspace, not a card
   inside a column.  Editor modes (chart-v2 editor, sheet-builder editor)
   destroy `.fly-org-inline`, so this rule auto-disables for them. */
.page-wrap:has(.fly-org-inline) {
  max-width: none;
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}