/* ── Palette ──────────────────────────────────────────── */
:root {
  --bg-app:        #1a1a2e;
  --bg-sidebar:    #141428;
  --bg-content:    #1e1e36;
  --bg-table-hover:rgba(108,99,255,.10);
  --bg-row-selected:rgba(108,99,255,.18);
  --bg-header-bar: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 40%, #3a1d3a 70%, #2a1a2e 100%);
  --text-primary:  #e0e0ef;
  --text-muted:    #8888aa;
  --accent:        #6c63ff;
  --accent-hover:  #8078ff;
  --badge-partial: #d4763c;
  --badge-error:   #e8444a;
  --badge-inspection: #2a7de1;
  --badge-pending: #888;
  --border-color:  #2e2e4a;
  --sidebar-width: 260px;
  --sidebar-collapsed: 56px;
  --detail-width:  420px;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg-app); color:var(--text-primary); overflow:hidden; }

/* ── Layout ───────────────────────────────────────────── */
.app-wrapper        { display:flex; height:100vh; }
.sidebar            { width:var(--sidebar-width); min-width:var(--sidebar-width); background:var(--bg-sidebar); border-right:1px solid var(--border-color); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; transition:width .25s ease,min-width .25s ease; }
.sidebar.collapsed  { width:var(--sidebar-collapsed); min-width:var(--sidebar-collapsed); }
.main-area          { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.content-and-detail { flex:1; display:flex; overflow:hidden; }
.content-col        { flex:1; display:flex; flex-direction:column; overflow:auto; min-width:0; background:var(--bg-content); }

/* ── Sidebar branding ─────────────────────────────────── */
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:16px 14px 12px; border-bottom:1px solid var(--border-color); white-space:nowrap; overflow:hidden; }
.sidebar-brand img { width:30px; height:30px; border-radius:6px; flex-shrink:0; }
.sidebar-brand-text { overflow:hidden; }
.sidebar-brand-text .brand-name { font-size:15px; font-weight:700; color:var(--text-primary); line-height:1.2; }
.sidebar-brand-text .brand-sub  { font-size:10px; color:var(--text-muted); line-height:1.3; }
.sidebar.collapsed .sidebar-brand-text { display:none; }

/* ── Sidebar nav ──────────────────────────────────────── */
.sidebar-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding-top:8px; }
.section-label { font-size:10px; font-weight:700; letter-spacing:1.2px; color:var(--text-muted); padding:18px 16px 6px; text-transform:uppercase; white-space:nowrap; overflow:hidden; }
.sidebar.collapsed .section-label { font-size:0; padding:16px 0 4px; text-align:center; height:0; overflow:hidden; margin:0; border:none; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:13px; color:var(--text-muted); cursor:pointer; border-radius:6px; margin:1px 8px; transition:background .15s; text-decoration:none; white-space:nowrap; overflow:hidden; }
.nav-item:hover       { background:rgba(255,255,255,.04); color:var(--text-primary); }
.nav-item.active      { background:var(--accent); color:#fff; font-weight:600; }
.nav-item .nav-icon   { font-size:16px; flex-shrink:0; }
.nav-item .nav-label  { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item .count      { margin-left:auto; font-size:12px; opacity:.7; flex-shrink:0; }
.sidebar.collapsed .nav-item { justify-content:center; padding:10px 0; margin:2px 4px; }
.sidebar.collapsed .nav-item .nav-label,
.sidebar.collapsed .nav-item .count { display:none; }
.sidebar.collapsed .nav-item .nav-icon { margin:0; }
.sidebar-collapse-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-top:1px solid var(--border-color); color:var(--text-muted); font-size:13px; cursor:pointer; transition:background .15s; white-space:nowrap; overflow:hidden; flex-shrink:0; }
.sidebar-collapse-btn:hover { background:rgba(255,255,255,.04); color:var(--text-primary); }
.sidebar.collapsed .sidebar-collapse-btn span { display:none; }
.sidebar.collapsed .sidebar-collapse-btn { justify-content:center; }

/* ── Top header bar ───────────────────────────────────── */
.header-bar { background:var(--bg-header-bar); padding:10px 24px; }
.header-bar-inner { display:flex; align-items:flex-start; justify-content:space-between; }
.header-bar-left { flex:1; min-width:0; }
.header-bar-right { flex-shrink:0; padding-top:4px; }
.production-logo { max-height:48px; max-width:160px; object-fit:contain; opacity:.85; }
.breadcrumb-row { font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.breadcrumb-row a { color:var(--text-muted); text-decoration:none; }
.breadcrumb-row a:hover { color:var(--text-primary); }
.breadcrumb-row .sep { margin:0 8px; }
.header-bar h1 { font-size:26px; font-weight:700; margin:0; line-height:1.2; }

/* ── Toolbar ──────────────────────────────────────────── */
.toolbar { display:flex; align-items:center; gap:12px; padding:12px 24px; background:var(--bg-content); border-bottom:1px solid var(--border-color); flex-wrap:wrap; position:sticky; left:0; min-height:56px; flex-shrink:0; box-sizing:border-box; }
.filter-bar { flex:1; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:6px; padding:6px 14px; color:var(--text-muted); font-size:13px; min-width:200px; overflow:hidden; }
.filter-bar input { background:transparent; border:none; outline:none; color:var(--text-primary); flex:1; min-width:0; font-size:13px; text-overflow:ellipsis; }
.filter-bar input::placeholder { color:rgba(255,255,255,.2); }
/* Chevron expand animation */
.expand-arrow { transition: transform .2s ease; }
.expand-arrow.open { transform: rotate(90deg); }
/* Global input styling */
input::placeholder, textarea::placeholder, select::placeholder { color:rgba(255,255,255,.2) !important; opacity:1; }
input[type="text"], input[type="number"], input[type="url"], input[type="date"], input[type="email"], input[type="search"], textarea, select { color:rgba(255,255,255,.85) !important; }
input[type="date"]:invalid, input[type="date"]:not(:valid) { color:rgba(255,255,255,.2) !important; }
input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field { color: inherit; }
.btn-reset { background:none; border:none; color:var(--text-muted); font-size:13px; cursor:pointer; }
.btn-reset:hover { color:var(--text-primary); }

/* ── Actions row ──────────────────────────────────────── */
.actions-row { display:flex; align-items:center; gap:12px; padding:10px 24px; background:var(--bg-content); border-bottom:1px solid var(--border-color); flex-wrap:wrap; position:sticky; left:0; min-height:52px; flex-shrink:0; box-sizing:border-box; }
/* Keep the toolbar and actions row on a single line; if the content column is
   too narrow to fit everything, scroll horizontally instead of wrapping onto
   multiple lines (which would push the table down). */
#toolbar, #actionsRow { flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; scrollbar-width:thin; }
#toolbar::-webkit-scrollbar, #actionsRow::-webkit-scrollbar { height:6px; }
#toolbar::-webkit-scrollbar-thumb, #actionsRow::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:3px; }
#toolbar > *, #actionsRow > * { flex-shrink:0; }
#toolbar .filter-bar { flex-shrink:1; min-width:160px; }
.btn-upload { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.04); border:1px solid var(--border-color); color:var(--text-primary); padding:6px 16px; border-radius:6px; font-size:13px; cursor:pointer; transition:background .15s; }
.btn-upload:hover { background:rgba(255,255,255,.08); }
.view-toggle { display:flex; border:1px solid var(--border-color); border-radius:6px; overflow:hidden; }
.view-toggle button { background:rgba(255,255,255,.04); border:none; color:var(--text-muted); padding:6px 12px; cursor:pointer; font-size:15px; transition:background .15s; }
.view-toggle button.active { background:var(--accent); color:#fff; }
.view-toggle button:hover:not(.active) { background:rgba(255,255,255,.08); }

/* ── Column picker ────────────────────────────────────── */
.col-picker-wrap { position:relative; margin-left:auto; }
.col-picker-btn { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.04); border:1px solid var(--border-color); color:var(--text-muted); padding:6px 14px; border-radius:6px; font-size:13px; cursor:pointer; transition:background .15s; }
.col-picker-btn:hover { background:rgba(255,255,255,.08); color:var(--text-primary); }
.col-picker-menu { display:none; position:fixed; margin-top:0; background:var(--bg-sidebar); border:1px solid var(--border-color); border-radius:8px; padding:8px 0; min-width:200px; max-height:60vh; overflow-y:auto; z-index:9990; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.col-picker-menu.open { display:block; }
.col-picker-menu label { display:flex; align-items:center; gap:10px; padding:7px 16px; font-size:13px; color:var(--text-primary); cursor:pointer; transition:background .12s; }
.col-picker-menu label:hover { background:rgba(255,255,255,.04); }
.col-picker-menu label input { accent-color:var(--accent); }

/* ── DataTable overrides ──────────────────────────────── */
.table-wrapper { flex:0 0 auto; overflow:visible; padding:0; background:var(--bg-content); }
/* Hide the built-in search (the app has its own), but SHOW the length menu so
   users can pick how many rows per page. It's styled to match the dark theme
   and sits inline with the pagination/info row. */
div.dt-container .dt-search { display:none; }
div.dt-container .dt-length { display:inline-flex; align-items:center; gap:6px; margin:8px 12px 8px 0; padding-left:24px; font-size:12px; color:var(--text-muted); }
div.dt-container .dt-length label { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12px; color:var(--text-muted); white-space:nowrap; }
div.dt-container .dt-length select {
  background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:4px;
  color:var(--text-primary); font-size:12px; padding:3px 24px 3px 8px; height:28px; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:9px;
}
div.dt-container .dt-length select:focus { outline:none; border-color:var(--accent); }
div.dt-container .dt-length select option { background:var(--bg-content); color:var(--text-primary); }
table.dataTable { border-collapse:collapse !important; width:100% !important; --bs-table-bg:transparent; --bs-table-color:var(--text-primary); }
table.dataTable thead th { background:var(--bg-content) !important; color:var(--text-muted) !important; font-size:12px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--border-color) !important; padding:10px 12px !important; position:sticky; top:0; z-index:20; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.dataTable tbody tr, table.dataTable.table tbody tr, .table>:not(caption)>*>* { background:transparent !important; background-color:transparent !important; box-shadow:none !important; --bs-table-bg:transparent; --bs-table-striped-bg:transparent; --bs-table-hover-bg:transparent; --bs-table-accent-bg:transparent; border-bottom:1px solid rgba(255,255,255,.04) !important; transition:background .12s; cursor:pointer; }
table.dataTable tbody tr:hover, table.dataTable.table tbody tr:hover { background:var(--bg-table-hover) !important; background-color:var(--bg-table-hover) !important; }
table.dataTable tbody tr.selected-row, table.dataTable.table tbody tr.selected-row { background:var(--bg-row-selected) !important; background-color:var(--bg-row-selected) !important; }
table.dataTable tbody td { padding:8px 12px !important; vertical-align:middle !important; font-size:13px; border:none !important; }

.col-check { width:36px; text-align:center; }
.col-check input[type="checkbox"] { accent-color:var(--accent); }
.col-expand { width:30px; text-align:center; color:var(--text-muted); cursor:pointer; }
.col-expand .bi { transition:transform .2s; }
.col-expand .bi.open { transform:rotate(90deg); }
.col-type { width:40px; text-align:center; }
.col-category { width:130px; }
/* Inline category dropdown on the Uncategorized page — styled to match the
   Shot List status pill (small coloured badge). Colours come from inline
   --cat-color / background / border set per-row in JS. */
.inline-cat-select {
  font-size:10px; font-weight:500; line-height:1.4;
  border-radius:3px; padding:2px 20px 2px 8px;
  cursor:pointer; white-space:nowrap; max-width:100%;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-repeat:no-repeat; background-position:right 5px center; background-size:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
.inline-cat-select:hover { filter:brightness(1.15); }
.inline-cat-select:focus { outline:none; box-shadow:0 0 0 2px rgba(136,136,170,.25); }
.inline-cat-select option { background:var(--bg-sidebar); color:var(--text-primary); font-weight:400; }
.type-icon { color:var(--text-muted); font-size:16px; }
.col-thumb { width:100px; }
.thumb-img { width:90px; height:50px; object-fit:cover; border-radius:4px; background:#000; }

/* Name column — NO link styling */
.col-name { color:var(--text-primary); font-weight:500; }
.col-name .subtitle { color:var(--text-muted); font-size:11px; display:block; margin-top:1px; font-weight:400; }
.badge-partial { background:var(--badge-partial); color:#fff; font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; }
.badge-error   { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--badge-error); color:#fff; font-size:14px; font-weight:700; }
.col-version { text-align:center; }
.col-actions { width:210px; white-space:nowrap; }
.action-btn { background:none; border:none; color:var(--text-muted); font-size:16px; padding:4px 5px; cursor:pointer; transition:color .12s; position:relative; }
.action-btn:hover { color:var(--text-primary); }
.action-btn .tooltip-text { visibility:hidden; opacity:0; position:absolute; bottom:110%; left:50%; transform:translateX(-50%); background:#333; color:#fff; font-size:11px; padding:3px 8px; border-radius:4px; white-space:nowrap; transition:opacity .15s; pointer-events:none; z-index:10; }
.action-btn:hover .tooltip-text { visibility:visible; opacity:1; }
div.dt-container .dt-paging .page-item.active .page-link { background:var(--accent) !important; border-color:var(--accent) !important; }
div.dt-container .dt-paging .page-link { background:transparent; color:var(--text-muted); border-color:var(--border-color); }
div.dt-container .dt-info { color:var(--text-muted); font-size:12px; padding-left:24px; position:-webkit-sticky; position:sticky; left:0; }
/* Keep the DataTables footer controls in view when a wide table is scrolled
   horizontally: info pinned to the left edge, paging pinned to the right edge. */
div.dt-container .dt-paging {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  padding-right: 24px;
}

/* ── Child (expand) rows ──────────────────────────────── */
.child-row td { padding:0 12px 0 60px !important; background:rgba(255,255,255,.015) !important; }
.child-row td.child-cell-flush { padding:0 !important; }
.child-table-wrap { overflow-x:auto; max-width:100%; }
.child-table { width:100%; border-collapse:collapse; margin:6px 0; }
.child-table th { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:6px 10px; border-bottom:1px solid var(--border-color); text-align:left; white-space:nowrap; }
.child-table td { font-size:12px; padding:5px 10px; color:var(--text-primary); border-bottom:1px solid rgba(255,255,255,.03); white-space:nowrap; }
.child-table tr:last-child td { border-bottom:none; }
.child-table .child-thumb { width:60px; height:34px; object-fit:cover; border-radius:3px; background:#000; }

/* ── Detail panel ─────────────────────────────────────── */
.detail-panel { width:0; min-width:0; background:var(--bg-sidebar); border-left:1px solid var(--border-color); overflow:hidden; transition:width .3s ease,min-width .3s ease; display:flex; flex-direction:column; }
.detail-panel.open { width:var(--detail-width); min-width:var(--detail-width); }
.detail-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.detail-header h3 { margin:0; font-size:17px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:12px; }
.detail-close { background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; padding:2px 6px; border-radius:4px; transition:background .12s; }
.detail-close:hover { background:rgba(255,255,255,.08); color:var(--text-primary); }
.detail-body { flex:1; overflow-y:auto; }
.detail-preview { width:100%; aspect-ratio:16/9; background:#0a0a18; border:2px solid rgba(255,255,255,.25); border-radius:6px; margin:16px 0 0; position:relative; overflow:hidden; }
.detail-preview #detailThumbImg { width:100%; height:100%; }
.detail-preview img { width:100%; height:100%; object-fit:cover; }
.preview-watermark { position:absolute; bottom:12px; right:12px; font-size:11px; color:rgba(255,255,255,.3); pointer-events:none; }
.player-controls { display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.player-controls i { font-size:18px; color:var(--text-muted); cursor:pointer; transition:color .12s; }
.player-controls i:hover { color:var(--text-primary); }
.player-controls i.play-main { font-size:26px; color:var(--text-primary); }
.detail-tabs { display:flex; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.detail-tabs button { flex:1; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-muted); font-size:13px; padding:10px 8px; cursor:pointer; transition:all .15s; }
.detail-tabs button.active { color:var(--text-primary); border-bottom-color:var(--accent); font-weight:600; }
.detail-tabs button:hover:not(.active) { color:var(--text-primary); }
.meta-section { padding:16px 20px; }
.meta-section h4 { font-size:14px; font-weight:700; margin:0 0 14px; }
.meta-row { display:flex; gap:12px; margin-bottom:10px; font-size:12.5px; line-height:1.5; }
.meta-label { width:120px; flex-shrink:0; color:var(--text-muted); font-weight:500; }
.meta-value { flex:1; color:var(--text-primary); word-break:break-all; }
.meta-value .badge-inspection { background:var(--badge-inspection); color:#fff; font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; }
.meta-value .badge-val-error  { background:var(--badge-error);  color:#fff; font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; }
.meta-value .badge-val-partial { background:var(--badge-partial); color:#fff; font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; }
.meta-value .badge-val-pending { background:var(--badge-pending); color:#fff; font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; }
.meta-value .copy-id { cursor:pointer; color:var(--text-muted); margin-left:4px; font-size:13px; }
.meta-value .copy-id:hover { color:var(--text-primary); }
.tab-content { flex:1; overflow-y:auto; }

/* ── Grid view ────────────────────────────────────────── */
.grid-wrapper { flex:0 0 auto; overflow:visible; padding:20px 24px; background:var(--bg-content); display:none; }
.grid-wrapper.active { display:block; }
.table-wrapper.hidden { display:none; }
.grid-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.grid-container.provider-mode { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.grid-card { cursor:pointer; transition:transform .15s,box-shadow .15s; border-radius:8px; overflow:hidden; }
.grid-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.3); }
.grid-card.selected-card { box-shadow:0 0 0 2px var(--accent),0 6px 20px rgba(0,0,0,.3); }
.grid-card-thumb { width:100%; aspect-ratio:16/9; background:#2a2a40; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border:1px solid var(--border-color); border-radius:8px 8px 0 0; }
.grid-card-thumb img { width:100%; height:100%; object-fit:cover; }
.grid-card-thumb .grid-file-icon { font-size:48px; color:rgba(255,255,255,.25); }
.grid-card-thumb .grid-badge { position:absolute; bottom:8px; right:8px; }
.grid-card-info { padding:10px 14px; }
.grid-card-info .grid-title-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.grid-card-info .grid-title { color:var(--text-primary); font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.grid-card-info .grid-version { font-size:13px; color:var(--text-muted); font-weight:600; flex-shrink:0; }
.grid-card-info .grid-subtitle { font-size:11px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Empty state ──────────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; color:var(--text-muted); text-align:center; flex:1; }
.empty-state i { font-size:48px; margin-bottom:16px; opacity:.4; }
.empty-state p { font-size:14px; margin:0; }

/* ── Activity / Users / Usage in detail panel ─────────── */
.activity-list { list-style:none; margin:0; padding:0; }
.activity-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12.5px; line-height:1.5; }
.activity-item:last-child { border-bottom:none; }
.activity-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.activity-icon.upload   { background:rgba(108,99,255,.15); color:var(--accent); }
.activity-icon.validate { background:rgba(42,125,225,.15); color:var(--badge-inspection); }
.activity-icon.release  { background:rgba(58,170,80,.15);  color:#3aaa50; }
.activity-icon.update   { background:rgba(212,118,60,.15); color:var(--badge-partial); }
.activity-icon.error    { background:rgba(232,68,74,.15);  color:var(--badge-error); }
.activity-icon.review   { background:rgba(180,140,255,.15); color:#b48cff; }
.activity-body { flex:1; min-width:0; }
.activity-body strong { color:var(--text-primary); font-weight:600; }
.activity-body .activity-text { color:var(--text-muted); }
.activity-time { color:var(--text-muted); font-size:11px; opacity:.7; margin-top:2px; }
.file-details-card { background:rgba(255,255,255,.03); border:1px solid var(--border-color); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.file-details-card h5 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin:0 0 10px; }
.file-detail-row { display:flex; gap:10px; font-size:12px; line-height:1.6; margin-bottom:4px; }
.file-detail-row .fd-label { width:100px; flex-shrink:0; color:var(--text-muted); }
.file-detail-row .fd-value { flex:1; color:var(--text-primary); word-break:break-all; }
.file-detail-row .fd-value code { font-size:11px; background:rgba(255,255,255,.06); padding:1px 6px; border-radius:3px; font-family:'SF Mono','Consolas',monospace; }
.user-list { list-style:none; margin:0; padding:0; }
.user-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.user-item:last-child { border-bottom:none; }
.user-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.user-info { flex:1; min-width:0; }
.user-info .user-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.user-info .user-email { font-size:11px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-role { font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; flex-shrink:0; white-space:nowrap; }
.user-role.owner  { background:rgba(108,99,255,.18); color:var(--accent); }
.user-role.editor { background:rgba(58,170,80,.15); color:#3aaa50; }
.user-role.viewer { background:rgba(255,255,255,.06); color:var(--text-muted); }
.user-role.admin  { background:rgba(212,118,60,.15); color:var(--badge-partial); }
.usage-list { list-style:none; margin:0; padding:0; }
.usage-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.usage-item:last-child { border-bottom:none; }
.usage-icon { width:36px; height:36px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(108,99,255,.12); color:var(--accent); }
.usage-info { flex:1; min-width:0; }
.usage-info .usage-title { font-size:13px; font-weight:600; color:var(--text-primary); }
.usage-info .usage-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.usage-badge { font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; flex-shrink:0; }
.usage-badge.active  { background:rgba(58,170,80,.15); color:#3aaa50; }
.usage-badge.draft   { background:rgba(255,255,255,.06); color:var(--text-muted); }
.usage-badge.locked  { background:rgba(212,118,60,.15); color:var(--badge-partial); }
.usage-badge.pending { background:rgba(136,136,170,.15); color:var(--text-muted); }

/* ── Fullscreen overlay ───────────────────────────────── */
.fullscreen-overlay { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.fullscreen-overlay img { max-width:95vw; max-height:95vh; object-fit:contain; border-radius:4px; }
.fullscreen-overlay .fs-close { position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; opacity:.7; transition:opacity .15s; }
.fullscreen-overlay .fs-close:hover { opacity:1; }

/* ── Settings pages ───────────────────────────────────── */
.settings-page { flex:1; overflow-y:auto; padding:16px 20px; background:var(--bg-content); }
.settings-page h2 { font-size:22px; font-weight:700; margin:0 0 4px; }
.settings-page .settings-desc { font-size:13px; color:var(--text-muted); margin:0 0 28px; }
.settings-card { background:rgba(255,255,255,.025); border:1px solid var(--border-color); border-radius:10px; padding:24px; margin-bottom:24px; }
.settings-card h3 { font-size:15px; font-weight:700; margin:0 0 18px; display:flex; align-items:center; gap:8px; }
.settings-card h3 i { font-size:18px; color:var(--accent); }
.form-row { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.form-group { flex:1; min-width:200px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.form-group input, .form-group select, .form-group textarea { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:6px; padding:8px 12px; color:var(--text-primary); font-size:13px; outline:none; transition:border-color .15s; font-family:inherit; box-sizing:border-box; }
.form-group input, .form-group select { height:38px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent); }
.form-group select { cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238888aa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; }
.form-group textarea { resize:vertical; min-height:60px; }
.form-actions { display:flex; gap:10px; margin-top:8px; }
.btn-primary { background:var(--accent); color:#fff; border:none; padding:8px 20px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:rgba(255,255,255,.04); color:var(--text-primary); border:1px solid var(--border-color); padding:8px 20px; border-radius:6px; font-size:13px; cursor:pointer; transition:background .15s; }
.btn-secondary:hover { background:rgba(255,255,255,.08); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-size:13px; color:var(--text-primary); }
.toggle-label small { display:block; font-size:11px; color:var(--text-muted); margin-top:2px; font-weight:400; }
.toggle-switch { width:40px; height:22px; border-radius:11px; background:rgba(255,255,255,.12); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle-switch.on { background:var(--accent); }
.toggle-switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.toggle-switch.on::after { transform:translateX(18px); }

/* Settings user table */
.settings-user-table { width:100%; border-collapse:collapse; margin-top:12px; }
.settings-user-table th { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:8px 12px; border-bottom:1px solid var(--border-color); text-align:left; }
.settings-user-table td { padding:10px 12px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
.settings-user-table tr:last-child td { border-bottom:none; }
.settings-user-table .su-avatar { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; margin-right:10px; vertical-align:middle; }
.settings-user-table .su-name { font-weight:600; }
.settings-user-table .su-email { color:var(--text-muted); font-size:12px; }
.settings-user-table select { background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:4px; padding:4px 8px; color:var(--text-primary); font-size:12px; cursor:pointer; }
.btn-add-user { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; border:none; padding:8px 16px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; margin-top:12px; }
.btn-add-user:hover { background:var(--accent-hover); }

/* Add user modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9998; display:flex; align-items:center; justify-content:center; }
.modal-box { background:var(--bg-sidebar); border:1px solid var(--border-color); border-radius:12px; padding:28px; width:420px; max-width:90vw; box-shadow:0 16px 48px rgba(0,0,0,.5); }
.modal-box h3 { margin:0 0 20px; font-size:17px; font-weight:700; }

/* ── Status filter buttons ────────────────────────────── */
.status-filters { display:flex; gap:6px; }
.status-filter-btn {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.04); border:1px solid var(--border-color);
  color:var(--text-muted); padding:5px 12px; border-radius:6px;
  font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.status-filter-btn:hover { background:rgba(255,255,255,.08); color:var(--text-primary); }
.status-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.status-filter-btn .sf-dot { width:8px; height:8px; border-radius:50%; }
.sf-dot.open        { background:#f0ad4e; }
.sf-dot.in-progress { background:#5bc0de; }
.sf-dot.approved    { background:#3aaa50; }

/* ── Task page ────────────────────────────────────────── */
.task-page { padding:0; margin:0; }
.task-page h2 { margin:0 0 4px; font-size:22px; font-weight:700; }
.task-page .task-desc { color:var(--text-muted); font-size:13px; margin:0 0 20px; }
.task-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0; padding:0 0 16px; }
/* Same layout as .task-header-row, but these pages sit in their own wrapper and
   need the horizontal + top padding the Tasks page gets from #contentPage. */
.agreement-header-row,
.rules-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0; padding:16px 24px 0; }
/* Tables mounted in #tableWrapper (Agreements / Rules / Webhooks) should let the
   scrolling .content-col drive scroll — like the media table — so their sticky
   thead sticks to the top instead of being trapped inside an overflow container. */
#tableWrapper .page-in-wrapper .table-container { overflow:visible; }
.task-list { list-style:none; margin:0; padding:0; }
.task-item {
  background:rgba(255,255,255,.03); border:1px solid var(--border-color); border-radius:8px;
  padding:16px 20px; margin-bottom:12px;
}
.task-item-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.task-item-title { font-size:15px; font-weight:600; color:var(--text-primary); }
.task-item-meta { font-size:12px; color:var(--text-muted); }
.task-progress-bar { width:100%; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; margin-top:8px; }
.task-progress-fill { height:100%; border-radius:4px; transition:width .3s; }
.task-progress-fill.green  { background:#3aaa50; }
.task-progress-fill.blue   { background:#5bc0de; }
.task-progress-fill.orange { background:#f0ad4e; }
.task-progress-text { font-size:12px; color:var(--text-muted); margin-top:6px; display:flex; justify-content:space-between; }
.task-subtasks { list-style:none; margin:10px 0 0; padding:0; }
.task-subtask {
  display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.03); font-size:13px;
}
.task-subtask:last-child { border-bottom:none; }
.task-subtask input[type="checkbox"] { accent-color:var(--accent); }
.task-subtask.done { color:var(--text-muted); text-decoration:line-through; }

/* ── Status config in project settings ────────────────── */
.status-config-list { margin:10px 0 0; padding:0; list-style:none; }
.status-config-item {
  display:flex; align-items:center; gap:12px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.status-config-item:last-child { border-bottom:none; }
.status-color-input {
  width:30px; height:30px; border:none; border-radius:6px; cursor:pointer;
  background:transparent; padding:0;
}
.status-color-input::-webkit-color-swatch { border:none; border-radius:4px; }
.status-color-input::-webkit-color-swatch-wrapper { padding:0; }
.status-name-input {
  flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border-color);
  border-radius:4px; padding:6px 10px; color:var(--text-primary); font-size:13px;
}
.status-name-input:focus { outline:none; border-color:var(--accent); }
.vfxcat-code-input {
  flex:0 0 84px; width:84px; text-align:center; text-transform:uppercase;
  font-family:monospace; letter-spacing:.5px;
}
.status-config-item .status-delete {
  background:none; border:none; color:var(--badge-error); cursor:pointer; font-size:16px; opacity:.6;
}
.status-config-item .status-delete:hover { opacity:1; }

/* ── Cut filter select ────────────────────────────────── */
.cut-filter-select {
  background:rgba(255,255,255,.04); border:1px solid var(--border-color);
  border-radius:6px; padding:7px 32px 7px 12px; color:var(--text-primary); font-size:13px;
  cursor:pointer; min-width:180px; line-height:1.4;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238888aa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
}
.cut-filter-select:hover { border-color:rgba(108,99,255,.4); }
.cut-filter-select:focus { outline:none; border-color:var(--accent); }
.cut-filter-select option { background:var(--bg-sidebar); color:var(--text-primary); }
/* Episode / Cut filters: fixed 200px width on every page. Overrides the shared
   min-width:180px above, with a matching cap so long option labels truncate
   instead of stretching the control wider. */
#episodeFilterSelect.cut-filter-select,
#cutFilterSelect.cut-filter-select {
  min-width:200px; max-width:200px; width:200px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Edit tab actions ─────────────────────────────────── */
.edit-action-list { list-style:none; margin:0; padding:0; }
.edit-action-item {
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background .12s;
  border-radius:6px; margin:0 -8px; padding-left:8px; padding-right:8px;
}
.edit-action-item:hover { background:rgba(255,255,255,.04); }
.edit-action-item:last-child { border-bottom:none; }
.edit-action-icon {
  width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.edit-action-icon.merge { background:rgba(108,99,255,.15); color:var(--accent); }
.edit-action-icon.delete { background:rgba(232,68,74,.15); color:var(--badge-error); }
.edit-action-icon.ignore { background:rgba(136,136,170,.15); color:var(--text-muted); }
.edit-action-info .edit-action-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.edit-action-info .edit-action-desc { font-size:12px; color:var(--text-muted); margin-top:1px; }

/* ── Rules page ───────────────────────────────────────── */
.rules-page { padding:0; margin:0; }
.rules-page .rules-header-row { margin-bottom:16px; }
/* Custom list pages (Agreements/Rules/Webhooks) mounted into the shared
   #tableWrapper sit flush like the standard media table — no extra padding or
   margin around the block. */
#tableWrapper .page-in-wrapper { padding:0; margin:0; }
.agreements-page { padding:0; margin:0; }
.agreements-page .agreement-header-row { margin-bottom:16px; }
.agreements-table th.num, .agreements-table td.num { text-align:right; }
.ag-cell-ellipsis { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-link-row:hover { background:rgba(255,255,255,.04); }
.ag-linked-clip:last-child { border-bottom:none !important; }
.rule-card {
  background:rgba(255,255,255,.03); border:1px solid var(--border-color); border-radius:8px;
  padding:16px 20px; margin-bottom:12px;
}
.rule-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rule-card-title { font-size:15px; font-weight:600; color:var(--text-primary); }
.rule-card-badge { font-size:11px; padding:2px 10px; border-radius:4px; font-weight:600; }
.rule-card-badge.active { background:rgba(58,170,80,.15); color:#3aaa50; }
.rule-card-body { font-size:13px; color:var(--text-muted); line-height:1.6; }
.rule-condition { display:inline-flex; align-items:center; gap:6px; background:rgba(108,99,255,.1); border:1px solid rgba(108,99,255,.2); border-radius:4px; padding:2px 10px; font-size:12px; font-family:monospace; color:var(--accent); }
.rule-action-tag { display:inline-flex; align-items:center; gap:4px; background:rgba(58,170,80,.1); border:1px solid rgba(58,170,80,.2); border-radius:4px; padding:2px 10px; font-size:12px; color:#3aaa50; }

/* ── Filter icons ─────────────────────────────────────── */
.filter-icon { cursor:pointer; transition:color .15s; flex-shrink:0; }
.filter-icon:hover { color:var(--text-primary) !important; }

/* ── Filter tags row ──────────────────────────────────── */
.filter-tags-row {
  display:flex; flex-wrap:wrap; gap:6px; padding:6px 24px 10px;
  background:var(--bg-content); border-bottom:1px solid var(--border-color);
}
.filter-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(108,99,255,.12); border:1px solid rgba(108,99,255,.25);
  border-radius:4px; padding:3px 10px; font-size:12px; color:var(--accent);
}
.filter-tag .ft-field { font-weight:600; }
.filter-tag .ft-op { color:var(--text-muted); }
.filter-tag .ft-val { color:var(--text-primary); }
.filter-tag .ft-remove {
  cursor:pointer; font-size:14px; color:var(--text-muted); line-height:1;
  margin-left:2px; transition:color .12s;
}
.filter-tag .ft-remove:hover { color:var(--badge-error); }

/* ── Filter popup ─────────────────────────────────────── */
.filter-popup {
  position:fixed; margin-top:0; z-index:9990;
  background:var(--bg-sidebar); border:1px solid var(--border-color); border-radius:8px;
  padding:16px; min-width:360px; max-width:calc(100vw - 32px); box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.filter-popup h4 { margin:0 0 12px; font-size:14px; font-weight:700; }
.filter-popup-row { display:flex; gap:8px; margin-bottom:10px; align-items:center; }
.filter-popup-row select, .filter-popup-row input[type="text"] {
  background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:4px;
  padding:6px 10px; color:var(--text-primary); font-size:13px; flex:1;
}
.filter-popup-row select:focus, .filter-popup-row input:focus { outline:none; border-color:var(--accent); }
.filter-popup-actions { display:flex; gap:8px; margin-top:4px; }

/* ── Upload cut modal extras ──────────────────────────── */
.upload-file-drop {
  border:2px dashed var(--border-color); border-radius:8px; padding:20px;
  text-align:center; color:var(--text-muted); font-size:13px; cursor:pointer;
  transition:border-color .15s, background .15s; margin-top:4px;
}
.upload-file-drop:hover { border-color:var(--accent); background:rgba(108,99,255,.04); }
.upload-file-drop.has-file { border-color:var(--accent); border-style:solid; }
.upload-file-drop .drop-icon { font-size:28px; margin-bottom:6px; display:block; }
.upload-file-drop .file-name { color:var(--accent); font-weight:600; }

/* ── Archive / Stock provider cards ───────────────────── */
.provider-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; padding:0 24px 24px; }
.provider-card {
  background:rgba(255,255,255,.03); border:1px solid var(--border-color); border-radius:10px;
  padding:20px; transition:border-color .15s, background .15s; cursor:default;
}
.provider-card:hover { border-color:rgba(108,99,255,.3); background:rgba(255,255,255,.04); }
.provider-card-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.provider-card-logo {
  width:56px; height:56px; border-radius:8px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.provider-card-logo img { max-width:48px; max-height:40px; object-fit:contain; }
.provider-card-title { font-size:15px; font-weight:700; color:var(--text-primary); }
.provider-card-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.provider-card-desc { font-size:12px; color:var(--text-muted); line-height:1.5; margin-bottom:14px; }
.provider-stats { display:flex; gap:16px; margin-bottom:14px; }
.provider-stat {
  flex:1; background:rgba(255,255,255,.03); border-radius:6px; padding:10px 12px; text-align:center;
}
.provider-stat-num { font-size:20px; font-weight:700; color:var(--accent); }
.provider-stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }
.provider-tags { display:flex; flex-wrap:wrap; gap:5px; }
.provider-tag {
  font-size:11px; padding:2px 8px; border-radius:3px;
  background:rgba(108,99,255,.08); color:rgba(108,99,255,.8); border:1px solid rgba(108,99,255,.15);
}
.provider-meta-row { display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.04); }
.provider-meta-row a { color:var(--accent); text-decoration:none; }

/* ── Timeline ─────────────────────────────────────────── */
.tl-toolbar-filters { display:flex; gap:6px; margin-left:4px; }
/* Horizontal scrolling is owned by the inner .tl-scroll viewport (see app-core),
   which is also what the zoom/centre logic reads. An overflow-x here too would
   nest a second scroller around it and produce two horizontal scrollbars. */
.timeline-wrap { width:100%; position:relative; padding:0; }
.tl-filter-btn {
  padding:5px 14px; border-radius:4px; font-size:12px; font-weight:600; cursor:pointer;
  border:1px solid var(--border-color); background:rgba(255,255,255,.03); color:var(--text-muted);
  transition:all .15s; white-space:nowrap;
}
.tl-filter-btn:hover { border-color:rgba(108,99,255,.3); color:var(--text-primary); }
.tl-filter-btn.active { border-color:var(--accent); background:rgba(108,99,255,.12); color:var(--accent); }
.tl-filter-btn.vfx.active { border-color:#A365DC; background:rgba(163,101,220,.15); color:#A365DC; }
.tl-filter-btn.archive.active { border-color:#6E6E6E; background:rgba(110,110,110,.2); color:#ccc; }
/* Width/height come from the SVG's own width/height attributes, which JS sets per
   zoom level. A CSS width rule would OVERRIDE those attributes (CSS beats
   presentation attributes), pinning the SVG to its container — which is exactly
   what stopped it ever getting wider or scrolling. Don't reintroduce one. */
.timeline-svg { display:block; }
.timeline-svg .clip-rect { cursor:pointer; }
.tl-detail-below {
  display:none; background:var(--bg-sidebar); border-top:1px solid var(--border-color);
  overflow:hidden; transition:max-height .3s ease; max-height:0;
}
.tl-detail-below.open {
  display:flex; gap:20px; align-items:flex-start; padding:20px 24px;
  max-height:400px; overflow-y:auto;
}
.tl-detail-thumb { width:200px; height:112px; border-radius:6px; object-fit:cover; flex-shrink:0; background:rgba(255,255,255,.04); border:1px solid var(--border-color); }
.tl-detail-info { flex:1; min-width:0; }
.tl-detail-info h4 { margin:0 0 8px; font-size:16px; font-weight:700; }
.tl-detail-info .tl-meta-row { display:flex; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.tl-detail-info .tl-meta-row span { display:inline-flex; align-items:center; gap:4px; }
.tl-detail-info .tl-meta-row code { font-size:11px; color:var(--accent); }
.tl-detail-info .tl-type-badge { display:inline-block; padding:2px 10px; border-radius:3px; font-size:11px; font-weight:700; text-transform:uppercase; margin-top:8px; }
.tl-detail-info .tl-type-badge.vfx { background:rgba(163,101,220,.15); color:#A365DC; }
.tl-detail-info .tl-type-badge.archive { background:rgba(110,110,110,.15); color:#aaa; }
.tl-detail-close { position:absolute; right:16px; top:16px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; }
.tl-detail-close:hover { color:var(--text-primary); }
.tl-tooltip {
  position:fixed; z-index:500; background:var(--bg-sidebar); border:1px solid var(--border-color);
  border-radius:6px; padding:10px 14px; font-size:12px; color:var(--text-primary);
  pointer-events:none; box-shadow:0 6px 20px rgba(0,0,0,.5); max-width:300px;
  line-height:1.5;
}
.tl-tooltip .tt-name { font-weight:700; font-size:13px; margin-bottom:4px; }
.tl-tooltip .tt-file { color:var(--text-muted); font-family:monospace; font-size:11px; }
.tl-tooltip .tt-tc { color:var(--accent); margin-top:4px; }
.tl-tooltip .tt-type { display:inline-block; padding:1px 8px; border-radius:3px; font-size:10px; font-weight:700; margin-top:4px; text-transform:uppercase; }
.tl-tooltip .tt-type.vfx { background:rgba(163,101,220,.2); color:#A365DC; }
.tl-tooltip .tt-type.archive { background:rgba(110,110,110,.2); color:#aaa; }

/* ── Categorize task fullscreen ───────────────────────── */
.cat-task-overlay {
  position:fixed; inset:0; z-index:600; background:var(--bg-app);
  display:flex; flex-direction:column; overflow:hidden;
}
.cat-task-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; border-bottom:1px solid var(--border-color); flex-shrink:0;
}
.cat-task-header h3 { margin:0; font-size:16px; font-weight:700; }
.cat-task-progress { display:flex; align-items:center; gap:12px; }
.cat-task-progress-bar { width:200px; height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.cat-task-progress-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; }
.cat-task-progress-text { font-size:12px; color:var(--text-muted); }
.cat-task-body {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto; gap:20px;
}
.cat-shot-preview {
  max-width:720px; width:100%; border-radius:8px; overflow:hidden; border:2px solid var(--border-color);
  position:relative;
}
.cat-shot-preview img { width:100%; display:block; }
.cat-shot-info {
  text-align:center; max-width:720px; width:100%;
}
.cat-shot-name { font-size:16px; font-weight:700; margin-bottom:4px; }
.cat-shot-meta { font-size:13px; color:var(--text-muted); }
.cat-shot-meta code { font-size:12px; color:var(--accent); }
.cat-options {
  display:flex; gap:12px; max-width:720px; width:100%; justify-content:center; flex-wrap:wrap;
}
.cat-option {
  flex:1; min-width:140px; max-width:220px; padding:16px; border-radius:8px;
  border:2px solid var(--border-color); background:rgba(255,255,255,.02);
  cursor:pointer; text-align:center; transition:all .15s;
}
.cat-option:hover { border-color:rgba(108,99,255,.3); background:rgba(108,99,255,.04); }
.cat-option.selected { border-color:var(--accent); background:rgba(108,99,255,.1); }
.cat-option.selected.vfx { border-color:#A365DC; background:rgba(163,101,220,.1); }
.cat-option.selected.archive { border-color:#3aaa50; background:rgba(58,170,80,.1); }
.cat-option.selected.other { border-color:#d4763c; background:rgba(212,118,60,.1); }
.cat-option-icon { font-size:24px; margin-bottom:6px; display:block; }
.cat-option-label { font-size:14px; font-weight:600; }
.cat-sub-options {
  display:flex; gap:8px; max-width:720px; width:100%; justify-content:center; flex-wrap:wrap;
}
.cat-sub-option {
  padding:8px 16px; border-radius:6px; font-size:13px;
  border:1px solid var(--border-color); background:rgba(255,255,255,.02);
  cursor:pointer; transition:all .15s;
}
.cat-sub-option:hover { border-color:rgba(108,99,255,.3); }
.cat-sub-option.selected { border-color:var(--accent); background:rgba(108,99,255,.1); color:var(--accent); font-weight:600; }
.cat-actions {
  display:flex; gap:10px; max-width:720px; width:100%; justify-content:center; margin-top:8px;
}
.cat-actions .btn-primary, .cat-actions .btn-secondary { min-width:120px; }

/* ── Import/Export modals ─────────────────────────────── */
.import-source-options { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.import-source-opt {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:8px; border:2px solid var(--border-color);
  background:rgba(255,255,255,.02); cursor:pointer; text-align:left; transition:all .15s;
}
.import-source-opt:hover { border-color:rgba(108,99,255,.3); background:rgba(108,99,255,.04); }
.import-source-opt.selected { border-color:var(--accent); background:rgba(108,99,255,.1); }
.import-source-opt i { font-size:24px; display:block; margin:0; flex:0 0 auto; color:var(--accent); }
.import-source-opt .opt-body { display:flex; flex-direction:column; }
.import-source-opt .opt-label { font-size:14px; font-weight:600; }
.import-source-opt .opt-desc { font-size:11px; color:var(--text-muted); margin-top:2px; }
.import-body { margin-top:12px; }
.import-info { font-size:11px; color:var(--text-muted); margin-top:8px; display:flex; align-items:center; gap:6px; }
.import-info i { color:var(--accent); }
.export-format-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.export-format-opt {
  padding:14px; border-radius:8px; border:2px solid var(--border-color);
  background:rgba(255,255,255,.02); cursor:pointer; display:flex; align-items:center; gap:12px;
  transition:all .15s;
}
.export-format-opt:hover { border-color:rgba(108,99,255,.3); }
.export-format-opt.selected { border-color:var(--accent); background:rgba(108,99,255,.1); }
.export-format-icon { width:40px; height:40px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; background:rgba(255,255,255,.06); color:var(--text-muted); }
.export-format-name { font-size:14px; font-weight:600; }
.export-format-desc { font-size:11px; color:var(--text-muted); }
.export-loader { text-align:center; padding:24px 0; }
.export-loader .spinner {
  width:36px; height:36px; border:3px solid rgba(255,255,255,.1);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite;
  margin:0 auto 12px;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes setupBgPan { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.export-result { text-align:center; padding:16px 0; }
.export-result a { color:var(--accent); text-decoration:none; font-weight:600; }
.export-result a:hover { text-decoration:underline; }

/* ── Hidden entries toggle ────────────────────────────── */
.btn-hidden-toggle {
  background:none; border:none; color:var(--text-muted); font-size:13px; cursor:pointer;
  display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.btn-hidden-toggle:hover { color:var(--text-primary); }
.btn-hidden-toggle.active { color:var(--accent); }
tr.row-hidden td { opacity:.4; }
tr.row-hidden td:first-child::before { content:''; }

/* ── Module boxes ─────────────────────────────────────── */
.module-box {
  flex:1; min-width:160px; padding:16px; border-radius:8px;
  border:2px solid var(--border-color); background:rgba(255,255,255,.02);
  cursor:pointer; text-align:center; transition:all .15s; user-select:none;
}
.module-box:hover { border-color:rgba(108,99,255,.3); }
.module-box.on { border-color:var(--accent); background:rgba(108,99,255,.06); }
.module-box .module-icon { font-size:28px; margin-bottom:6px; color:var(--text-muted); }
.module-box.on .module-icon { color:var(--accent); }
.module-box .module-label { font-size:14px; font-weight:600; }
.module-box .module-status { font-size:11px; color:var(--text-muted); margin-top:4px; }
.module-box.on .module-status { color:var(--accent); }

/* ── Hidden entries warning ───────────────────────────── */
.hidden-warning {
  display:flex; align-items:center; gap:10px;
  padding:8px 24px; background:rgba(232,68,74,.06);
  border-bottom:1px solid rgba(232,68,74,.2); font-size:12px; color:#e8444a;
}
.hidden-warning i { font-size:14px; flex-shrink:0; }

/* ── Connection status bar ────────────────────────────── */
.connection-bar {
  position:fixed; top:0; left:0; right:0; z-index:99999;
  padding:8px 24px; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:8px; justify-content:center;
  transform:translateY(-100%); transition:transform .3s ease, background .3s ease, color .3s ease;
}
.connection-bar.visible { transform:translateY(0); }
.connection-bar.offline { background:#e8444a; color:#fff; }
.connection-bar.online { background:#3aaa50; color:#fff; }
.connection-bar i { font-size:16px; }

/* ── Clip activity timeline ───────────────────────────── */
.clip-timeline { padding:8px 0; }
.ct-node { display:flex; align-items:center; gap:12px; position:relative; padding:6px 0; min-height:28px; padding-left:20px; }
.ct-dot { flex-shrink:0; position:relative; z-index:1; }
.ct-line { position:absolute; left:23px; width:2px; background:rgba(255,255,255,.08); z-index:0; }
.ct-text { flex:1; min-width:0; }

/* ── Older cut warning (yellow) ───────────────────────── */
.older-cut-warning {
  display:flex; align-items:center; gap:10px;
  padding:8px 24px; background:rgba(224,160,48,.08);
  border-bottom:1px solid rgba(224,160,48,.25); font-size:12px; color:#e0a030;
}
.older-cut-warning i { font-size:14px; flex-shrink:0; }
.older-cut-warning strong { color:#e0a030; }

/* ── Table loading spinner ────────────────────────────── */
.table-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px; color:var(--text-muted); font-size:13px;
}
.table-loading .tl-spinner {
  width:28px; height:28px; border:3px solid rgba(255,255,255,.08);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite;
  margin-bottom:12px;
}

/* ── No. column ───────────────────────────────────────── */
.col-no { max-width:60px; width:60px; text-align:center; color:var(--text-muted); font-size:12px; }

/* ── Actions column always right-aligned ──────────────── */
.col-actions { text-align:right !important; }
th.col-actions { text-align:right !important; }

/* ── Actions column pinned while scrolling horizontally ──
   The thead already sticks to the top (see table.dataTable thead th). This does
   the same on the horizontal axis for the Actions column, which is the last
   column in every table, so the row buttons stay reachable on wide tables.

   Notes:
   - Pinned cells need their OWN opaque background, or the columns scrolling past
     would show through them.
   - Row states (--bg-table-hover / --bg-row-selected) are semi-transparent, so
     they go on background-IMAGE over the opaque background-COLOR. That renders
     exactly like the row does over --bg-content instead of a flat guess.
   - !important throughout: the reset on `.table>:not(caption)>*>*` sets
     background and box-shadow with !important and would otherwise win.
   - z-index: body cells above normal cells but below the sticky header; the
     header's own Actions cell above both, since it is where the two sticky
     axes cross. */
table.dataTable td.col-actions,
table.dataTable.table td.col-actions {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 10;
  background-color: var(--bg-content) !important;
  box-shadow: -6px 0 8px -6px rgba(0,0,0,.45) !important;
}
table.dataTable thead th.col-actions {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  top: 0;
  z-index: 30;
  background-color: var(--bg-content) !important;
  box-shadow: -6px 0 8px -6px rgba(0,0,0,.45) !important;
}
table.dataTable tbody tr:hover td.col-actions,
table.dataTable.table tbody tr:hover td.col-actions {
  background-color: var(--bg-content) !important;
  background-image: linear-gradient(var(--bg-table-hover), var(--bg-table-hover)) !important;
}
table.dataTable tbody tr.selected-row td.col-actions,
table.dataTable.table tbody tr.selected-row td.col-actions {
  background-color: var(--bg-content) !important;
  background-image: linear-gradient(var(--bg-row-selected), var(--bg-row-selected)) !important;
}
/* Child (expand) rows span the full width and have no Actions cell of their own,
   so there is nothing to pin — and pinning would misplace their content. */
table.dataTable tbody tr.child-row td.col-actions,
table.dataTable.table tbody tr.child-row td.col-actions {
  position: static;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Content page (Tasks, Rules, etc.) scrollable ──── */
#contentPage { flex:1; overflow-y:auto; padding:24px; background:var(--bg-content); }

/* ── Roles & Permissions drag-and-drop UI ──────────── */
.roles-dnd-container { display:flex; gap:0; border:1px solid var(--border-color); border-radius:6px; overflow:hidden; min-height:400px; }
.roles-tab-list { width:180px; min-width:180px; background:rgba(255,255,255,.02); border-right:1px solid var(--border-color); display:flex; flex-direction:column; padding:8px 0; }
.roles-tab { padding:10px 16px; font-size:12px; text-align:left; background:none; border:none; color:var(--text-muted); cursor:pointer; border-left:3px solid transparent; transition:all .15s; }
.roles-tab:hover { color:var(--text-primary); background:rgba(255,255,255,.03); }
.roles-tab.active { color:var(--accent); border-left-color:var(--accent); background:rgba(108,99,255,.06); font-weight:600; }
.roles-content { flex:1; overflow:hidden; }
.roles-panel { display:none; height:100%; }
.roles-panel.active { display:block; }
.roles-columns { display:flex; height:100%; gap:0; }
.dnd-col { flex:1; display:flex; flex-direction:column; border-right:1px solid var(--border-color); }
.dnd-col:last-child { border-right:none; }
.dnd-col-header { padding:10px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:6px; }
.dnd-zone { flex:1; padding:8px; overflow-y:auto; min-height:100px; transition:background .15s; }
.dnd-zone.dnd-over { background:rgba(108,99,255,.06); }
.dnd-item { padding:6px 10px; margin-bottom:4px; background:rgba(255,255,255,.03); border:1px solid var(--border-color); border-radius:4px; cursor:grab; font-size:12px; display:flex; justify-content:space-between; align-items:center; transition:opacity .15s, transform .1s; }
.dnd-item:hover { background:rgba(255,255,255,.06); }
.dnd-item.dragging { opacity:.4; }
.dnd-item-label { font-weight:500; }
.dnd-item-section { font-size:9px; color:var(--text-muted); text-transform:uppercase; }
.dnd-empty { padding:20px; text-align:center; color:var(--text-muted); font-size:11px; opacity:.5; }

/* ── Task Kanban Board ─────────────────────────────── */
.task-kanban { display:flex; gap:12px; min-height:350px; }
.task-kanban-col { flex:1; display:flex; flex-direction:column; background:rgba(255,255,255,.01); border:1px solid var(--border-color); border-radius:6px; overflow:hidden; }
.task-kanban-header { padding:10px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:6px; }
.task-kanban-count { font-size:10px; font-weight:400; opacity:.6; margin-left:2px; }
.task-kanban-zone { flex:1; padding:8px; overflow-y:auto; min-height:80px; transition:background .15s; }
.task-kanban-zone.dnd-over { background:rgba(108,99,255,.06); }
.task-kanban-empty { padding:24px 12px; text-align:center; color:var(--text-muted); font-size:11px; opacity:.4; }
.task-dnd-card { padding:10px 12px; margin-bottom:6px; background:rgba(255,255,255,.03); border:1px solid var(--border-color); border-radius:5px; cursor:grab; transition:opacity .15s, box-shadow .15s; }
.task-dnd-card:hover { background:rgba(255,255,255,.05); box-shadow:0 1px 4px rgba(0,0,0,.15); }
.task-dnd-card.dragging { opacity:.3; }

/* ── Shot Usage Timeline ───────────────────────────── */
.shot-timeline { padding:0; }
.stl-entry { display:flex; gap:12px; min-height:40px; }
/* The track is a full-height rail; the dot is pinned near the top so it lines up
   with the entry's label (episode + version), not the vertical centre. */
.stl-track { position:relative; width:12px; flex-shrink:0; }
.stl-dot { position:absolute; top:3px; left:1px; width:10px; height:10px; border-radius:50%; z-index:2; }
/* Continuous rail behind the dot: from the dot down to the next entry. */
.stl-line { position:absolute; left:5px; width:2px; z-index:1; }
.stl-line-above { top:0; height:8px; }        /* dot centre ≈ 8px from top */
.stl-line-below { top:8px; bottom:0; }          /* down to this entry's bottom */
.stl-entry:first-child .stl-line-above { display:none; }
.stl-entry:last-child .stl-line-below { display:none; }
.stl-content { flex:1; padding-bottom:12px; min-width:0; }
.stl-entry:last-child .stl-content { padding-bottom:0; }
/* Changelog description cell: keep to one line with ellipsis (no wrap). */
.cl-desc-trim { display:block; max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Vendor Usage List ─────────────────────────────── */
.vendor-usage-list { display:flex; flex-direction:column; gap:4px; }
.vendor-usage-item { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:4px; background:rgba(255,255,255,.02); border:1px solid var(--border-color); }
.vendor-usage-item:hover { background:rgba(255,255,255,.04); }

/* ── Provider Grid Selected State ──────────────────── */
.provider-card.selected-card { border-color:var(--accent) !important; box-shadow:0 0 0 1px var(--accent); }

/* ── Mini Badges (used in media table and elsewhere) ── */
.mini-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:3px;letter-spacing:.3px;}
.mini-badge-green{background:rgba(58,170,80,.12);color:#3aaa50;border:1px solid rgba(58,170,80,.2);}
.mini-badge-yellow{background:rgba(224,160,48,.12);color:#e0a030;border:1px solid rgba(224,160,48,.2);}
.mini-badge-red{background:rgba(232,68,74,.12);color:#e8444a;border:1px solid rgba(232,68,74,.2);}
.mini-badge-purple{background:rgba(108,99,255,.12);color:var(--accent);border:1px solid rgba(108,99,255,.2);}
.mini-badge-blue{background:rgba(42,125,225,.12);color:#2a7de1;border:1px solid rgba(42,125,225,.2);}

/* ── Chevron expand animation ─────────────────────────── */
.expand-arrow { transition: transform 0.2s ease; }
.expand-arrow.expanded { transform: rotate(90deg); }

/* ── Utility classes (extracted from inline styles) ───── */
/* Muted text helpers */
.u-muted        { color:var(--text-muted); }
.u-muted-13     { color:var(--text-muted); font-size:13px; }
.u-muted-12     { color:var(--text-muted); font-size:12px; }
.u-muted-11     { color:var(--text-muted); font-size:11px; }
.u-muted-10     { color:var(--text-muted); font-size:10px; }
/* Error text helpers */
.u-err          { color:var(--badge-error); }
.u-err-12       { color:var(--badge-error); font-size:12px; }
/* Inline spinner (icon spin) */
.u-spin         { animation:spin .8s linear infinite; display:inline-block; }
.u-spin-mr6     { animation:spin .8s linear infinite; display:inline-block; margin-right:6px; }
.u-spin-mr4     { animation:spin .8s linear infinite; display:inline-block; margin-right:4px; }
/* Centered loading / empty block */
.u-center-pad   { text-align:center; padding:30px 0; }
/* Big success check icon */
.u-check-icon   { font-size:48px; color:#3aaa50; }
/* Full-width form input used in modals */
.u-modal-input  { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:4px; padding:5px 8px; color:var(--text-primary); font-size:12px; }
/* Progress bar track */
.u-progress-track { width:100%; height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
/* Destructive button accent (delete/remove confirm) */
.u-btn-danger   { background:var(--badge-error); border-color:var(--badge-error); }

/* ── App loader (initial splash spinner) ──────────────── */
@keyframes appSpin { to { transform:rotate(360deg); } }
.app-loader { position:fixed; inset:0; z-index:999999; background:rgba(0,0,0,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .5s ease; }
.app-loader-spinner { width:32px; height:32px; border:3px solid rgba(255,255,255,.1); border-top-color:#6c63ff; border-radius:50%; animation:appSpin .8s linear infinite; }
.app-loader-text { color:rgba(255,255,255,.5); font-size:13px; margin-top:16px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* ── Project picker page (shown when no project is selected) ── */
body.project-picker-page { background:#0e0e12; color:#e8e8ea; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:auto; }
.project-picker-page .pp-wrap { width:100%; max-width:560px; padding:40px 24px; }
.project-picker-page .pp-brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.project-picker-page .pp-brand img { width:40px; height:40px; }
.project-picker-page .pp-brand .t { font-weight:700; font-size:18px; letter-spacing:.5px; }
.project-picker-page .pp-brand .s { font-size:12px; color:rgba(255,255,255,.45); }
.project-picker-page .pp-title { font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.5); margin:0 0 14px; }
.project-picker-page .pp-item { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:10px; margin-bottom:10px; text-decoration:none; color:inherit; transition:border-color .15s,background .15s; }
.project-picker-page .pp-item:hover { border-color:#6c63ff; background:rgba(108,99,255,.06); }
.project-picker-page .pp-thumb { width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0; background:rgba(255,255,255,.05); }
.project-picker-page .pp-thumb-fallback { width:48px; height:48px; border-radius:8px; background:rgba(108,99,255,.14); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#6c63ff; font-size:20px; }
.project-picker-page .pp-name { flex:1; min-width:0; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-picker-page .pp-arrow { color:rgba(255,255,255,.35); flex-shrink:0; }

/* ── index.php shell helpers ──────────────────────────── */
.sidebar-collapse-icon { font-size:16px; flex-shrink:0; }
.tl-filter-btn i { margin-right:4px; }
.col-picker-chevron { font-size:11px; }
#tableWrapper { padding:0 0 24px; margin-left:0; margin-right:0; }
#mediaTable.table { width:100%; --bs-table-bg:transparent; }
.col-no-head { width:36px; }
.detail-preview-wrap { padding:0 20px; }

/* ── Screener / proxy badge ───────────────────────────── */
.screener-badge { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.4px; padding:1px 6px; border-radius:3px; background:rgba(224,160,48,.14); color:#e0a030; border:1px solid rgba(224,160,48,.3); vertical-align:middle; margin-left:6px; }

/* ── Thumbnail "rendering" state (preview being generated) ── */
.thumb-rendering { width:90px; height:50px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border-radius:4px; }
.thumb-rendering i { width:20px; height:20px; font-size:18px; line-height:20px; text-align:center; color:var(--accent); display:inline-block; transform-origin:50% 50%; animation:spin 3.5s linear infinite; }

/* ── Detail panel: preview-being-rendered state ───────── */
.detail-rendering { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; height:100%; padding:16px; box-sizing:border-box; }
.detail-rendering i { width:32px; height:32px; font-size:30px; line-height:32px; text-align:center; color:var(--accent); display:inline-block; transform-origin:50% 50%; animation:spin 3.5s linear infinite; }
.detail-rendering-text { margin-top:14px; font-size:13px; font-weight:600; color:var(--text-primary); }
.detail-rendering-sub { margin-top:4px; font-size:11px; color:var(--text-muted); max-width:260px; }

/* ── Project picker: create-new row + /archivekitchen/new page ─────────────
   The dashed treatment mirrors the "Create a new project" row in the in-app
   Switch Project modal, so the two entry points read the same. */
.project-picker-page .pp-item-new { border-style:dashed; color:rgba(255,255,255,.55); }
.project-picker-page .pp-item-new:hover { border-style:dashed; color:#fff; }
.project-picker-page .pp-thumb-new {
  width:48px; height:48px; border-radius:8px; border:1px dashed rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px;
}
.project-picker-page .pp-item-new:hover .pp-thumb-new { border-color:#6c63ff; color:#6c63ff; }

/* Card shell shared by the name form and the provisioning progress. */
.project-picker-page .pp-card {
  border:1px solid rgba(255,255,255,.08); border-radius:10px;
  padding:18px; background:rgba(255,255,255,.02);
}
.project-picker-page .pp-label { display:block; font-size:12px; color:rgba(255,255,255,.55); margin-bottom:6px; }
.project-picker-page .pp-input {
  width:100%; box-sizing:border-box; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:9px 12px;
  color:#fff; font-size:14px; outline:none; transition:border-color .15s;
}
.project-picker-page .pp-input:focus { border-color:#6c63ff; }
.project-picker-page .pp-hint { font-size:11.5px; color:rgba(255,255,255,.4); margin:8px 0 0; line-height:1.5; }
.project-picker-page .pp-error {
  font-size:12px; color:#e8444a; background:rgba(232,68,74,.08);
  border:1px solid rgba(232,68,74,.2); border-radius:6px; padding:9px 12px; margin-top:12px;
}
.project-picker-page .pp-actions { display:flex; gap:10px; margin-top:16px; }
.project-picker-page .pp-btn-primary {
  flex:1; background:#6c63ff; border:1px solid #6c63ff; color:#fff; border-radius:6px;
  padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s;
}
.project-picker-page .pp-btn-primary:hover { opacity:.9; color:#fff; }
.project-picker-page .pp-btn-primary:disabled { opacity:.55; cursor:not-allowed; }
.project-picker-page .pp-btn-secondary {
  background:transparent; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75);
  border-radius:6px; padding:9px 16px; font-size:13px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.project-picker-page .pp-btn-secondary:hover { border-color:rgba(255,255,255,.3); color:#fff; }
.project-picker-page .pp-progress-track {
  width:100%; height:6px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden;
}
.project-picker-page .pp-progress-fill {
  width:0; height:100%; background:#6c63ff; border-radius:3px; transition:width .25s linear;
}
.project-picker-page .pp-status { font-size:13px; color:rgba(255,255,255,.8); margin:12px 0 0; }

/* ── Breadcrumb group navigator ────────────────────────────────────────────
   The category and page crumbs behave like the project crumb: clickable, and
   they open a modal listing the sibling pages of the current sidebar group. */
/* All clickable crumbs behave exactly like #breadcrumbProject: muted, and only
   the text colour changes on hover — no underline, no accent colour.
   #breadcrumbEpisode is a <span>, so the base `.breadcrumb-row a` rule above
   never applied to it and it needs naming explicitly. */
.breadcrumb-row #breadcrumbGroup,
.breadcrumb-row #breadcrumbPage,
.breadcrumb-row #breadcrumbEpisode {
  color:var(--text-muted); text-decoration:none; cursor:pointer;
}
.breadcrumb-row #breadcrumbGroup:hover,
.breadcrumb-row #breadcrumbPage:hover,
.breadcrumb-row #breadcrumbEpisode:hover {
  color:var(--text-primary); text-decoration:none;
}

.gn-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--border-color); border-radius:8px; margin-bottom:8px;
  text-decoration:none; color:inherit; transition:border-color .15s, background .15s;
}
.gn-item:hover { border-color:var(--accent); background:rgba(108,99,255,.04); color:inherit; }
.gn-item-active { border-color:var(--accent); background:rgba(108,99,255,.08); }
.gn-icon {
  width:32px; height:32px; border-radius:6px; background:rgba(108,99,255,.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent);
}
.gn-name { flex:1; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gn-count { font-size:11px; color:var(--text-muted); flex-shrink:0; }
.gn-arrow { color:var(--text-muted); flex-shrink:0; }
.gn-item-active .gn-arrow { color:var(--accent); }

/* ── New-project provisioning video ────────────────────────────────────────
   Fixed 16:9 box so the card does not resize when the video swaps in for the
   placeholder — the progress bar underneath would otherwise jump. */
.project-picker-page .pp-video {
  position:relative; width:100%; aspect-ratio:16/9; margin:0 0 16px;
  border-radius:8px; overflow:hidden; background:rgba(255,255,255,.03);
}
.project-picker-page .pp-video video { width:100%; height:100%; object-fit:cover; display:block; }
.project-picker-page .pp-video-placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center;
  border:1px dashed rgba(255,255,255,.14); border-radius:8px; color:rgba(255,255,255,.4);
}
.project-picker-page .pp-video-placeholder i { font-size:28px; opacity:.5; }
.project-picker-page .pp-video-placeholder span { font-size:12px; }
.project-picker-page .pp-video-placeholder small { font-size:10.5px; opacity:.6; font-family:monospace; }

/* ── New-project subscription price ─────────────────────────────────────────
   Collapsed to zero height until a price arrives, then animated open so the
   card grows into it rather than the content popping in. The spacing and rule
   live on the INNER element: on the outer one they would still paint a stray
   border while collapsed. */
.project-picker-page .pp-price {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .35s ease, opacity .3s ease .05s;
}
.project-picker-page .pp-price.is-open { opacity:1; }
.project-picker-page .pp-price-inner {
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
}
/* Respect a reduced-motion preference: appear, don't slide. */
@media (prefers-reduced-motion: reduce) {
  .project-picker-page .pp-price { transition:none; }
}
.project-picker-page .pp-price-row {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.project-picker-page .pp-price-label { font-size:12px; color:rgba(255,255,255,.55); }
.project-picker-page .pp-price-value { font-size:14px; color:rgba(255,255,255,.75); white-space:nowrap; }
.project-picker-page .pp-price-value #npPriceValue { font-size:18px; font-weight:700; color:var(--text-primary,#fff); }

/* ── Episodes table (project settings) ─────────────────────────────────────
   Moved out of inline styles in page-settings.js. The inputs are deliberately
   smaller than a standard .form-group field, but they now share its surface:
   same background, border, radius and focus colour — previously they were
   transparent with a border that only appeared on focus, which made them read
   as plain text rather than editable fields. */
.ep-table { width:100%; border-collapse:collapse; font-size:13px; }
.ep-table thead tr { border-bottom:1px solid var(--border-color); }
.ep-table th {
  text-align:left; padding:6px 8px;
  color:var(--text-muted); font-size:11px; font-weight:600;
}
.ep-table th.ep-col-actions { width:60px; text-align:right; }
.ep-table tbody tr { border-bottom:1px solid rgba(255,255,255,.04); }
.ep-table td { padding:6px 8px; }
.ep-table td.ep-cell-num { width:60px; }
.ep-table td.ep-cell-actions { text-align:right; }

/* Same surface as .form-group input, just compact. */
.ep-table input {
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-color);
  border-radius:6px;
  padding:4px 8px;
  color:var(--text-primary);
  font-size:13px;
  font-family:inherit;
  outline:none;
  transition:border-color .15s;
  box-sizing:border-box;
  width:100%;
}
.ep-table input:focus { border-color:var(--accent); }
.ep-table input.ep-edit-number { width:56px; font-size:12px; }
.ep-table input.ep-edit-code   { width:90px; font-size:12px; }

/* ── Project rows: name + category subline, with truncation ────────────────
   Used by the "Select a project" page and the in-app "Switch Project" modal.
   Long names are cut with an ellipsis rather than wrapping or pushing the
   arrow out of the row.

   min-width:0 is what actually makes the ellipsis work: a flex item defaults
   to min-width:auto, which refuses to shrink below its content, so the text
   would otherwise overflow instead of truncating. */
.pp-text, .gn-text, .proj-switch-text {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
}
.pp-name, .proj-switch-name {
  display:block; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pp-sub, .proj-switch-sub {
  display:block; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11.5px; font-weight:400; color:rgba(255,255,255,.45); line-height:1.3;
}
.project-picker-page .pp-sub { color:rgba(255,255,255,.45); }