/* ============================================================================
   Library page — local component styles (master/detail catalog view).
   ----------------------------------------------------------------------------
   Mirrors the canonical reference at
       claude-design/design system 1/dc-design-skill/screens/Library.html
   for the operator-console design overhaul. All colours/spacings come from
   the design-token vars in colors_and_type.css — no hex/oklch hard-coded.
   Loaded after dc-theme.css from app.py.
   ============================================================================ */

/* ── Filter row: grid of inputs on the left + actions cluster on the right ─
   The two are siblings of `.lib-filters` flex row so heights line up at 34px
   across search field, selectizes, and dc-btn-line buttons. */
.lib-filters {
  flex: none; margin-bottom: 8px;
  display: flex; align-items: flex-start; gap: 8px;
}
.lib-actions .btn,
.lib-actions .dropdown > .btn {
  height: 34px; display: inline-flex; align-items: center;
  font-size: 12.5px;
}
/* Shiny wraps each input in .shiny-input-container — target THAT, not the
   raw .form-control, so selectize widgets align with the grid columns. */
.lib-grid > .shiny-input-container,
.lib-grid > .form-control,
.lib-grid > .form-select { grid-column: span 2; min-width: 0; }
.lib-grid.show-extra .f-extra { display: block; }
.lib-grid .shiny-input-container { margin-bottom: 0; }
.lib-grid .form-control,
.lib-grid .form-select { font-size: 12.5px; height: 34px; width: 100%; }
/* Selectize widgets render as .selectize-control > .selectize-input. Force
   both to 34px so multi-selects line up with text inputs and dc-btn-line. */
.lib-grid .selectize-control { min-height: 34px; }
.lib-grid .selectize-input {
  min-height: 34px;
  padding: 5px 8px;
  font-size: 12.5px;
  display: flex; align-items: center; flex-wrap: wrap;
}
/* Year-range pair: two compact text inputs side by side, single grid cell */
.lib-grid .f-year-range { display: flex; gap: 6px; grid-column: span 2; }
.lib-grid .f-year-range .shiny-input-container { flex: 1 1 0; }
.lib-grid.show-extra .f-year-range { display: flex; }
.lib-grid:not(.show-extra) .f-year-range { display: none; }

@media (max-width: 980px) {
  .lib-grid > .shiny-input-container,
  .lib-grid > .form-control,
  .lib-grid > .form-select { grid-column: span 2; }
}

/* ── Detail tabs (custom underline nav inside the drawer) ─────────────────── */
.dc-drawer__body .nav-tabs {
  display: flex; gap: 2px;
  border: none;
  border-bottom: 1px solid var(--dc-line);
  margin: 16px 0 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.dc-drawer__body .nav-tabs .nav-item { margin-bottom: 0; }
.dc-drawer__body .nav-tabs .nav-link {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--dc-font-sans);
  font-size: 13.5px;
  font-weight: var(--dc-fw-semi);
  color: var(--dc-muted);
  padding: 9px 12px;
  white-space: nowrap;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dc-dur-fast), border-color var(--dc-dur-fast);
}
.dc-drawer__body .nav-tabs .nav-link:hover { color: var(--dc-ink); }
.dc-drawer__body .nav-tabs .nav-link.active,
.dc-drawer__body .nav-tabs .nav-link.is-active {
  color: var(--dc-primary);
  border-bottom-color: var(--dc-primary);
  background: transparent;
}

/* ── Drawer-tab chrome — values copied verbatim from dc-library-v2.html ──── */
.det-panel    { padding-top: 14px; }
.det-toolbar  {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
}
.det-toolbar .dc-spacer { flex: 1 1 auto; }
/* Section-eyebrow inside a toolbar (e.g. "Editing metadata · …"). */
.det-sech {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dc-faint);
  margin: 4px 0 9px;
}
/* Tab counter ("Festivals 3") — small mono number next to the label. */
.det-tab .n {
  font-family: var(--dc-font-mono); font-size: 11px;
  color: var(--dc-faint); margin-left: 5px;
}
.det-tab.is-active .n { color: var(--dc-primary); }

/* ── Metadata kv-grid (2-col) — copied verbatim from dc-library-v2.html ─── */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 22px;
}
.meta-cell        { min-width: 0; }
.meta-cell--full  { grid-column: 1 / -1; }
.meta-k {
  font-size: 11px; font-weight: var(--dc-fw-bold);
  letter-spacing: var(--dc-track-label); text-transform: uppercase;
  color: var(--dc-faint);
  margin-bottom: 3px;
}
.meta-v       { font-size: 13.5px; color: var(--dc-ink); word-break: break-word; }
.meta-v.mono  { font-family: var(--dc-font-mono); font-size: 12.5px; }
.meta-v a     { color: var(--dc-primary); text-decoration: none; }
.meta-v a:hover { text-decoration: underline; }
.meta-v .btn-link {
  color: var(--dc-primary); padding: 0; font-size: 13.5px;
  vertical-align: baseline; text-decoration: none;
}
.meta-v .btn-link:hover { text-decoration: underline; }
/* Inputs inside the meta-grid stay compact (13px / 6px 9px). */
.meta-grid .form-control { font-size: 13px; padding: 6px 9px; width: 100%; }
.meta-grid textarea.form-control { resize: vertical; min-height: 56px; }

/* ── "Set by system" affordances ──────────────────────────────────────────── */
.sys-note { color: var(--dc-faint); font-size: 11px; }
.sys-lock { color: var(--dc-muted); }
.sys-lock i { color: var(--dc-faint); font-size: 11px; margin-left: 3px; }

/* ── Traffic-light dot (used in the Flag row, view mode) ──────────────────── */
.tl-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: middle; margin-right: 6px;
}
.tl--green  { background: var(--dc-ok); }
.tl--red    { background: var(--dc-danger); }

/* ── Shiny selectize wrappers inside the meta-grid ────────────────────────
   The chip-style multi-selects (Director / Writer / Cast / Genres) keep
   their existing widget but inherit the meta-cell's micro-label rhythm:
   widget-supplied <label> is restyled to look like `.meta-k`. */
.meta-grid .shiny-input-container { margin-bottom: 0; width: 100%; }
.meta-grid .shiny-input-container > label.control-label {
  font-size: 11px; font-weight: var(--dc-fw-bold);
  letter-spacing: var(--dc-track-label); text-transform: uppercase;
  color: var(--dc-faint);
  margin-bottom: 3px;
}
/* Shiny's selectize widget ships with `width: auto` on the .selectize-control
   wrapper, so even inside a 100%-wide cell the chip box defaults to ~300px.
   Force it to fill the cell so Cast (full-width) actually spans the row. */
.meta-grid .selectize-control,
.meta-grid .selectize-input { width: 100%; }

/* ── Timeline (History tab) — verbatim from dc-library-v2.html § tabHistory.
   Each event = `.tline-item` with a 24px dot + connecting line + body. */
.tline-item { display: flex; gap: 12px; }
.tline-rail {
  display: flex; flex-direction: column;
  align-items: center; flex: none;
}
.tline-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  border: 1px solid var(--dc-line-2);
  background: var(--dc-panel);
  color: var(--dc-muted);
  flex: none;
}
.tline-line {
  width: 2px; flex: 1;
  background: var(--dc-line);
  min-height: 12px;
}
.tline-item:last-child .tline-line { display: none; }
.tline-body { padding-bottom: 16px; min-width: 0; }
.tline-ev   { font-size: 13.5px; font-weight: 600; }
/* Context subline ABOVE the who/when meta — same mono/faint styling. */
.tline-sub  {
  font-family: var(--dc-font-mono); font-size: 11px;
  color: var(--dc-faint); margin-top: 2px;
}
.tline-meta {
  font-family: var(--dc-font-mono); font-size: 11px;
  color: var(--dc-faint); margin-top: 2px;
}
/* Substep variant — smaller dot, indented under the parent event's body. */
.tline-item--sub               { padding-left: 28px; }
.tline-item--sub .tline-dot    { width: 16px; height: 16px; font-size: 9px; }
.tline-item--sub .tline-line   { background: var(--dc-line-2); }
.tline-item--sub .tline-ev     { font-size: 12.5px; font-weight: 600; }

/* ── File row (Files tab) — verbatim from dc-library-v2.html § tabFiles.
   One `.tfile` per asset: icon + name/spec column + asset-type/language
   selects on the right. */
.tfile {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--dc-line);
}
/* Compact selectizes inside .tfile__tags — fixed narrow width so the name
   column gets the rest of the row. */
.tfile__tags .shiny-input-container { margin-bottom: 0; width: 130px; }
.tfile__tags .selectize-input {
  padding: 4px 8px; font-size: 12.5px;
  min-height: 0;            /* override Bootstrap input default */
}
.tfile__tags .selectize-input input { font-size: 12.5px; }
/* Locked (view-mode) selectize: dim the chrome, hide the dropdown caret,
   and block pointer events so the widget reads + behaves as read-only. */
.tfile__sel--locked { pointer-events: none; }
.tfile__sel--locked .selectize-input {
  background: var(--dc-panel-2);
  color: var(--dc-muted);
  cursor: default;
  opacity: 0.75;
}
.tfile__sel--locked .selectize-control .caret { opacity: 0; }

/* ── Collapsible entry card (festivals / platform) — verbatim from
   dc-library-v2.html § ecard. JS toggles `.is-collapsed` on the parent
   `.dc-collapse` when the head is clicked. */
.ecard {
  border: 1px solid var(--dc-line-2);
  border-radius: var(--dc-radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.ecard.is-collapsed .ecard__head { background: var(--dc-panel-2); }
.ecard.is-collapsed .ecard__chev { transform: rotate(-90deg); }
.ecard.is-collapsed .ecard__body { display: none; }

/* `<dl class="kv">` — 116px label column + 1fr value column, used inside
   the ecard body. */
.kv {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}
.kv dt { color: var(--dc-faint); font-size: 12px; }
.kv dd { margin: 0; color: var(--dc-ink); }
.kv .mono { font-family: var(--dc-font-mono); font-size: 12px; }
.kv .mono a { color: var(--dc-primary); text-decoration: none; }
.kv .mono a:hover { text-decoration: underline; }

/* ── Drawer-wide empty state — MOVED to dc-components.css (tab-pages lock,
   2026-09-02): .det-empty is now the drawer's single empty idiom and the
   gallery must render it from the same file the app does. ─────────────────── */

/* ============================================================================
   Library page — dc_table conversion (2026-07-13)
   The `.lib-filterbar` row of search/vendor/genre/year/festival/clear
   controls is retired — column-level filtering now lives in the dc_table
   column headers (see pages/library.py `_catalogue_columns` +
   www/dc/dc-table.css). Only the View dropdown remains page-local; it now
   sits in a slim `.lib-topbar` instead of the old full filter row.
   ============================================================================ */

/* The bar itself is `.ig-bar` in the markup now; only the bits that would
   otherwise be missing stay here. `padding: 0` is deliberately GONE — it was
   there so the old flush full-height button could reach the bar's left edge,
   and keeping it would have left the new inset control sitting flush against
   it, exactly the thing the operator flagged on 2026-08-10 ("button which are
   left aligned to the edge of a panel need margin to the left"). */
.lib-topbar {
  display: flex;
  align-items: stretch;
  height: var(--dc-strip-h);
  border-bottom: 1px solid var(--dc-line);
  background: var(--dc-panel-2);
}

/* View dropdown — an inset strip control as of 2026-08-10 ("on library lets
   chage the dropdown to the new design please"). It used to be a flush,
   full-height, square button with a right-hand seam border — the language
   every strip used before the top-strip rework, and by this point the last
   control in the app still wearing it.

   `.lib-topbar` now carries `.ig-bar` and the trigger carries `.ig-sb`, so
   the shape (24px tall, --dc-radius-lg, 1px border, hover) comes from
   dc-components.css §TOP-STRIP CONTROLS rather than being restated here.
   What stays page-local is only what is genuinely specific: the popup menu's
   anchoring, and dropping the `.ig-bar` left padding so nothing else shifts. */
/* Flex, not block: the wrapper stretches to the bar's full height (the bar
   is `align-items: stretch` so tabs can reach the edges), and the 24px
   trigger inside it carries `align-self: center` from the shared strip-
   control rule — which does nothing unless its parent is a flex container.
   It sat flush against the top of the bar with all 10px of slack below
   (operator 2026-08-10: "library view dropdown is not vertically centered in
   top strip"). `position: relative` stays — the popup menu anchors to it. */
.lib-viewsel { position: relative; flex-shrink: 0; display: flex; align-items: center; }
/* The chevron is part of the label here (an <i> in the markup), not the
   background-image chevron `.ig-sb-select` draws — this is a button that
   opens a custom menu, not a native <select>. */
.lib-viewbtn { gap: 6px; }
/* Menu restyle (operator feedback, round 11): must look like ONE system
   with the dc_table header-filter popovers (`.dc-hf-pop`/`.dc-hf-check` in
   dc-table.css) — square corners, flush directly under the button (no
   gap), left edge aligned with the button's own left edge (already true:
   `.lib-viewsel` wraps both the button and this menu, and the button sits
   at the wrapper's left:0). Stays single-select — this is purely a visual
   match, selection behavior (`Shiny.setInputValue('lib_view_select', ...)`
   in `_view_dropdown_html`) is untouched. */
.lib-viewmenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: var(--dc-panel);
  border: 1px solid var(--dc-line);
  border-radius: 0;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.35);
  padding: 6px;
  min-width: 200px;
  display: none;
}
.lib-viewmenu.open { display: block; }
.lib-viewmenu__grp {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-faint);
  font-weight: 600;
  padding: 6px 6px 3px;
}
/* Item-row styling matches `.dc-hf-check` (dc-table.css) 1:1 — same
   padding/font-size/radius/hover — only the leading icon (a bootstrap-icon
   glyph, single-select affordance) differs from the picker's checkbox. */
.lib-vopt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: var(--dc-radius-sm, 5px);
  font-size: 12px;
  cursor: pointer;
  color: var(--dc-ink);
}
.lib-vopt i { width: 16px; color: var(--dc-muted); }
.lib-vopt:hover { background: var(--dc-panel-2); }
.lib-vopt.sel { background: var(--dc-primary-soft); color: var(--dc-primary); font-weight: 600; }
.lib-vopt.sel i { color: var(--dc-primary); }

/* The festival curation filter (button + popover + Clear) and the "Clear
   all" button both moved into dc_table itself — see the generic .dc-hf-*
   rules in www/dc/dc-table.css (dcFestivalPicker header filter). Nothing
   Library-specific remains for either. */

/* ── dc_table (Tabulator) conversion, 2026-07-13 ────────────────────────────
   The hand-rolled `.ltable` custom HTML table (built 2026-07-08) is retired
   — the Library film table now renders through the shared `dc_table`
   component (components/dc_table.py + www/dc/dc-table.js). All table
   theming (header, rows, cell content classes .film-cell/.tags/.festcnt/
   .st, empty state) lives in www/dc/dc-table.css so every dc_table
   consumer (Library today; Scheduling/Vendors/Festivals/Platforms next)
   shares one theme layer instead of each page re-deriving it. Nothing
   library-specific remains to style here — the filter bar rules above
   are the only Library-specific CSS left in this file. */