/*
 * prox-polish.css — finesse pass over the legacy selectors.
 *
 * Loaded LAST on every surface. Re-skins the existing markup using the
 * canonical tokens from prox-tokens.css — no HTML changes required, every
 * rule targets classes/ids that already exist. Delete this file and the
 * app falls back to its previous look (fully reversible).
 *
 * Sections: 0 base · 1 buttons · 2 inputs · 3 nav/tabs · 4 cards ·
 *           5 selection bar · 6 modals/dialogs · 7 comments/player ·
 *           8 review module bits · 9 recipient pages · 10 library flag
 */

/* ── 0. Base refinements ─────────────────────────────────────────── */
body {
  font-family: var(--prox-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--prox-accent-soft); color: var(--prox-text-primary); }

/* One focus language everywhere (keyboard only — no rings on click) */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--prox-shadow-glow) !important;
  border-radius: var(--prox-radius-sm);
}

/* Slim, dark scrollbars like every pro tool */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: var(--prox-radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ── 1. Buttons — one height, one radius, one motion curve ───────── */
button.refresh,
.btn-download-selected,
.account-btn,
.btn-primary, .btn-secondary,
.btn-filter-toggle,
.gradient-nav-wrapper .btn-filter-tabs,
.btn-bin-inline,
.empty-state-illus .cta,
#btnUploadRush {
  font-family: var(--prox-font-sans);
  font-size: var(--prox-text-sm);
  font-weight: var(--prox-weight-semibold);
  letter-spacing: var(--prox-tracking-normal);
  height: 36px;
  padding: 0 var(--prox-space-4);
  border-radius: var(--prox-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--prox-space-2);
  transition:
    background var(--prox-duration-fast) var(--prox-ease-out),
    border-color var(--prox-duration-fast) var(--prox-ease-out),
    transform var(--prox-duration-fast) var(--prox-ease-out),
    box-shadow var(--prox-duration-fast) var(--prox-ease-out),
    opacity var(--prox-duration-fast) var(--prox-ease-out);
}
button.refresh:hover,
.btn-download-selected:hover:not(:disabled),
.account-btn:hover:not(:disabled),
.btn-primary:hover, .btn-secondary:hover,
.btn-filter-toggle:hover,
.btn-bin-inline:hover { transform: translateY(-1px); }
button.refresh:active,
.btn-download-selected:active:not(:disabled),
.btn-primary:active, .btn-secondary:active { transform: translateY(0) scale(0.98); }
.btn-download-selected:disabled,
.account-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Primary actions carry the brand; secondaries are quiet ghosts */
.btn-primary, .account-btn, #btnUploadRush {
  background: var(--prox-accent);
  color: var(--prox-text-on-accent);
}
.btn-primary:hover, .account-btn:hover:not(:disabled) { background: var(--prox-accent-hover); }
.btn-secondary, button.refresh, .btn-filter-toggle, .btn-bin-inline {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--prox-border);
  color: var(--prox-text-secondary);
}
.btn-secondary:hover, button.refresh:hover, .btn-filter-toggle:hover, .btn-bin-inline:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--prox-border-strong);
  color: var(--prox-text-primary);
}

/* Icon buttons on cards: tighter, rounder, calmer until hover */
.card-actions .btn-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--prox-radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--prox-border);
  color: var(--prox-text-tertiary);
  font-size: var(--prox-text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--prox-duration-fast) var(--prox-ease-out),
    color var(--prox-duration-fast) var(--prox-ease-out),
    border-color var(--prox-duration-fast) var(--prox-ease-out),
    transform var(--prox-duration-fast) var(--prox-ease-out);
}
.card-actions .btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--prox-text-primary);
  border-color: var(--prox-border-strong);
  transform: translateY(-1px);
}
.card-actions .btn-icon.btn-delete:hover,
.card-actions .btn-icon.btn-delete-folder:hover {
  background: var(--prox-danger-soft);
  border-color: var(--prox-danger);
  color: var(--prox-danger);
}

/* ── 2. Inputs & selects ─────────────────────────────────────────── */
.search-row input.search,
.account-input,
#commentText,
#sortOrder,
select {
  font-family: var(--prox-font-sans);
  font-size: var(--prox-text-base);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--prox-border);
  border-radius: var(--prox-radius-md);
  color: var(--prox-text-primary);
  transition:
    border-color var(--prox-duration-fast) var(--prox-ease-out),
    background var(--prox-duration-fast) var(--prox-ease-out),
    box-shadow var(--prox-duration-fast) var(--prox-ease-out);
}
.search-row input.search { height: 40px; padding: 0 var(--prox-space-4); }
#sortOrder, select { height: 34px; padding: 0 var(--prox-space-3); }
.search-row input.search:focus,
.account-input:focus,
#commentText:focus,
select:focus {
  border-color: var(--prox-accent);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: var(--prox-shadow-glow);
}
.search-row input.search::placeholder { color: var(--prox-text-quaternary); }

/* ── 3. Navigation tabs ──────────────────────────────────────────── */
.gradient-nav-item {
  font-size: var(--prox-text-base);
  font-weight: var(--prox-weight-medium);
  letter-spacing: var(--prox-tracking-normal);
  padding: var(--prox-space-2) var(--prox-space-5);
  border-radius: var(--prox-radius-pill);
  color: var(--prox-text-tertiary);
  transition: color var(--prox-duration-fast) var(--prox-ease-out);
}
.gradient-nav-item:hover { color: var(--prox-text-primary); }
.gradient-nav-item.active {
  color: var(--prox-text-primary);
  font-weight: var(--prox-weight-semibold);
}
.gradient-nav-pill {
  transition: transform var(--prox-duration-base) var(--prox-ease-spring),
              width var(--prox-duration-base) var(--prox-ease-spring);
}

/* ── 4. Cards ────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--prox-border);
  border-radius: var(--prox-radius-lg);
  background: var(--prox-surface-1);
  transition:
    transform var(--prox-duration-base) var(--prox-ease-out),
    box-shadow var(--prox-duration-base) var(--prox-ease-out),
    border-color var(--prox-duration-base) var(--prox-ease-out);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--prox-border-strong);
  box-shadow: var(--prox-shadow-card-hover);
}
.card-title {
  font-size: var(--prox-text-md);
  font-weight: var(--prox-weight-semibold);
  letter-spacing: var(--prox-tracking-tight);
  line-height: var(--prox-leading-snug);
}
.card-meta { font-size: var(--prox-text-xs); color: var(--prox-text-tertiary); }
.card-meta .meta-label { color: var(--prox-text-quaternary); }

/* Bigger, hover-revealed selection checkbox (always visible if checked) */
.card .card-checkbox {
  width: 22px;
  height: 22px;
  accent-color: var(--prox-accent);
  opacity: 0;
  transition: opacity var(--prox-duration-fast) var(--prox-ease-out);
  cursor: pointer;
}
.card:hover .card-checkbox,
.card .card-checkbox:checked { opacity: 1; }

/* Thumbnails get a soft fade-in instead of the flicker */
.card-preview video { transition: opacity var(--prox-duration-base) var(--prox-ease-out); }
.card-preview .card-preview-placeholder {
  background: linear-gradient(100deg,
    rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 60%);
  background-size: 200% 100%;
  animation: prox-shimmer 1.4s linear infinite;
  color: transparent;            /* hide "Loading…" text — shimmer says it */
  border-radius: var(--prox-radius-lg) var(--prox-radius-lg) 0 0;
}
@keyframes prox-shimmer { to { background-position: -200% 0; } }

/* ── 4b. List view → uniform, flat, Frame.io-style rows ──────────── */
/* Root cause of ragged rows: .grid sets align-items:start, which the
   list's flex column inherits — children shrink-wrap. Stretch them. */
.grid.list {
  align-items: stretch;
  gap: 0;
  padding: var(--prox-space-4) 0;
}
/* Rows are flat table rows, not floating cards: full width, separator
   line, quiet hover highlight, no lift/scale. */
.grid.list .card {
  position: relative;
  width: 100%;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0 var(--prox-space-3) 0 44px;   /* left gutter for the checkbox */
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--prox-border);
  border-radius: 0;
  box-shadow: none;
}
.grid.list .card:first-child { border-top: 1px solid var(--prox-border); }
.grid.list .card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--prox-border);
}
/* Small 16:9 thumbnail (Frame.io keeps it; the old CSS hid it) */
.grid.list .card-preview {
  display: block !important;
  position: static !important;   /* lets the checkbox anchor to the row */
  width: 64px;
  height: 36px;
  min-width: 64px;
  flex: 0 0 64px;
  aspect-ratio: auto;
  border-radius: var(--prox-radius-xs);
  overflow: hidden;
  background: #000;
}
.grid.list .card-preview video { object-fit: cover; }
.grid.list .card-preview .card-preview-placeholder { border-radius: var(--prox-radius-xs); }
/* Checkbox: vertically centred in the row's left gutter, visible on hover
   or when checked (grid hover-reveal rule already handles opacity) */
.grid.list .card .card-checkbox {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%);
  margin: 0;
}
/* Duration badge lives inside the preview as an overlay — too cramped at
   64px wide; the player and grid view still show it */
.grid.list .card-duration { display: none !important; }
/* Metadata cells are laid out by the CSS-grid table defined in index.html
   (.grid.list .card uses display:grid; card-body/card-meta use
   display:contents so each value is a grid column). Just style the cells. */
.grid.list .card-meta > span {
  min-width: 0;
  text-align: left;
  font-size: var(--prox-text-xs);
  color: var(--prox-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inline labels are replaced by the column header row. */
.grid.list .card-meta .meta-label { display: none; }
/* Duration column: list view only (grid shows it as the thumbnail badge) */
.grid.square .meta-duration-wrap { display: none; }

/* Row actions appear on hover (or keyboard focus) — calm at rest */
.grid.list .card-actions {
  opacity: 0;
  transition: opacity var(--prox-duration-fast) var(--prox-ease-out);
}
.grid.list .card:hover .card-actions,
.grid.list .card:focus-within .card-actions { opacity: 1; }

/* Folder tiles: quiet surface + line icon instead of pink emoji block */
.prox-folder-preview {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--prox-text-tertiary);
  transition: color var(--prox-duration-fast) var(--prox-ease-out);
}
.card:hover .prox-folder-preview { color: var(--prox-accent); }

/* SVG icon plumbing */
.btn-icon .prox-icon { display: block; }
.prox-icon { flex-shrink: 0; }
.comment-annotation-badge .prox-icon { display: inline-block; vertical-align: -2px; }
#proxDrawBtn .prox-icon { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* ── 5. Selection bar → floating bottom action bar ───────────────── */
.select-actions {
  position: fixed !important;
  left: 50%;
  bottom: var(--prox-space-6);
  transform: translateX(-50%);
  z-index: var(--prox-z-sticky);
  background: rgba(20, 20, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--prox-border-strong);
  border-radius: var(--prox-radius-xl);
  box-shadow: var(--prox-shadow-lg);
  padding: var(--prox-space-3) var(--prox-space-4);
  display: flex;
  align-items: center;
  gap: var(--prox-space-3);
  animation: prox-slide-up var(--prox-duration-base) var(--prox-ease-spring);
}
@keyframes prox-slide-up {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
.select-all-label { font-size: var(--prox-text-sm); color: var(--prox-text-secondary); }
/* The bar now sits at the bottom — open its dropdown upward, not down */
.select-actions .bulk-action-dropdown {
  top: auto !important;
  bottom: calc(100% + var(--prox-space-2)) !important;
  box-shadow: var(--prox-shadow-lg);
  border-radius: var(--prox-radius-md);
}

/* ── 6. Modals & dialogs ─────────────────────────────────────────── */
.account-modal-content,
.comment-dialog-content {
  background: var(--prox-surface-2);
  border: 1px solid var(--prox-border-strong);
  border-radius: var(--prox-radius-xl);
  box-shadow: var(--prox-shadow-xl);
  animation: prox-modal-in var(--prox-duration-base) var(--prox-ease-spring);
}
@keyframes prox-modal-in {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.account-modal, .comment-dialog {
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.account-modal-title { font-size: var(--prox-text-xl); font-weight: var(--prox-weight-semibold); }
.account-modal-section h3 {
  font-size: var(--prox-text-xs);
  font-weight: var(--prox-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--prox-tracking-caps);
  color: var(--prox-text-tertiary);
}

/* ── 7. Comments panel & player chrome ───────────────────────────── */
.comment-item, .marker-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--prox-border);
  border-radius: var(--prox-radius-md);
  padding: var(--prox-space-3);
  margin-bottom: var(--prox-space-2);
  transition: border-color var(--prox-duration-fast) var(--prox-ease-out);
}
.comment-item:hover, .marker-item:hover { border-color: var(--prox-border-strong); }
.comment-timestamp, .marker-timestamp {
  font-family: var(--prox-font-mono);
  font-size: var(--prox-text-xs);
  font-weight: var(--prox-weight-semibold);
  color: var(--prox-cyan);
  cursor: pointer;
}
.comment-author { font-size: var(--prox-text-xs); color: var(--prox-text-tertiary); }
.comment-text { font-size: var(--prox-text-base); line-height: var(--prox-leading-normal); }
.comment-actions button {
  font-size: var(--prox-text-xs);
  font-weight: var(--prox-weight-medium);
  background: none;
  border: none;
  color: var(--prox-text-quaternary);
  cursor: pointer;
  padding: var(--prox-space-1) var(--prox-space-2);
  border-radius: var(--prox-radius-xs);
  transition: color var(--prox-duration-fast) var(--prox-ease-out),
              background var(--prox-duration-fast) var(--prox-ease-out);
}
.comment-actions button:hover { color: var(--prox-text-primary); background: rgba(255,255,255,0.08); }
.comment-actions .btn-delete-comment:hover { color: var(--prox-danger); background: var(--prox-danger-soft); }
.comment-actions .btn-resolve-comment:hover { color: var(--prox-success); background: var(--prox-success-soft); }

.overlay-close {
  border-radius: var(--prox-radius-pill);
  transition: background var(--prox-duration-fast) var(--prox-ease-out),
              transform var(--prox-duration-fast) var(--prox-ease-out);
}
.overlay-close:hover { transform: scale(1.05); }
.video-marker { background: var(--prox-cyan); }

/* ── 8. Review-module widgets (injected by prox-review.js) ───────── */
#proxBell { transition: background var(--prox-duration-fast) var(--prox-ease-out),
                        transform var(--prox-duration-fast) var(--prox-ease-out); }
#proxBell:hover { background: rgba(255, 255, 255, 0.14) !important; transform: scale(1.06); }
#proxVersionSel { font-family: var(--prox-font-sans); }
.prox-version-badge { box-shadow: var(--prox-shadow-sm); }

/* ── 9. Recipient pages (transfer.html / share.html) ─────────────── */
.state-screen h1 {
  font-size: var(--prox-text-2xl);
  font-weight: var(--prox-weight-semibold);
  letter-spacing: var(--prox-tracking-tight);
}
/* Sticky download CTA on small screens — the highest-leverage mobile fix */
@media (max-width: 640px) {
  #downloadAllBtn, .download-cta, .prox-btn-gradient.is-lg {
    position: sticky;
    bottom: var(--prox-space-4);
    z-index: var(--prox-z-sticky);
    box-shadow: var(--prox-shadow-lg);
  }
}

/* ── 9b. Round 2 — fixes from the live visual review ─────────────── */

/* Archive client tiles: replace the off-brand #667eea gradient with the
   Prox.io brand ramp (matched via inline-style attribute — no JS change). */
.card .card-preview[style*="667eea"] {
  background: linear-gradient(135deg,
    rgba(232, 67, 147, 0.85), rgba(168, 85, 247, 0.90) 52%, rgba(6, 182, 212, 0.75)) !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Client delete ×: hidden until the card is hovered, neutral glass chip
   top-right, danger only on direct hover. (Overrides inline styles.) */
.card .archive-client-delete-btn {
  opacity: 0 !important;
  top: 10px !important;
  right: 10px !important;
  transform: none !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--prox-radius-md) !important;
  backdrop-filter: blur(4px);
  transition: opacity var(--prox-duration-fast) var(--prox-ease-out),
              background var(--prox-duration-fast) var(--prox-ease-out) !important;
}
.card:hover .archive-client-delete-btn,
.card .archive-client-delete-btn:focus-visible { opacity: 1 !important; }
.card .archive-client-delete-btn:hover { background: var(--prox-danger) !important; color: #fff !important; }

/* Breadcrumb: quiet section label, not a floating purple link */
#archiveBreadcrumb {
  font-size: var(--prox-text-xs);
  font-weight: var(--prox-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--prox-tracking-caps);
  color: var(--prox-text-tertiary);
}
#archiveBreadcrumb :is(a, span, button) { color: inherit; }
#archiveBreadcrumb :is(a, button):hover { color: var(--prox-text-primary); }

/* My Transfers rows: hierarchy + calm destructive action */
.my-transfer-desc { font-size: var(--prox-text-md); font-weight: var(--prox-weight-semibold); }
.my-transfer-meta { font-size: var(--prox-text-xs); color: var(--prox-text-tertiary); display: flex; gap: var(--prox-space-3); }
.my-transfer-status {
  font-size: var(--prox-text-micro);
  font-weight: var(--prox-weight-bold);
  letter-spacing: var(--prox-tracking-caps);
  border-radius: var(--prox-radius-pill);
  padding: 3px 10px;
}
.my-transfer-copy-btn {
  height: 32px;
  padding: 0 var(--prox-space-3) !important;
  border-radius: var(--prox-radius-md) !important;
  font-weight: var(--prox-weight-semibold);
  transition: background var(--prox-duration-fast) var(--prox-ease-out),
              transform var(--prox-duration-fast) var(--prox-ease-out);
}
.my-transfer-copy-btn:hover { transform: translateY(-1px); }
/* Delete: ghost at rest — red is earned on hover, not shouted on every row */
.my-transfer-delete-btn {
  background: transparent !important;
  border-color: var(--prox-border) !important;
  color: var(--prox-text-tertiary) !important;
  transition: all var(--prox-duration-fast) var(--prox-ease-out) !important;
}
.my-transfer-delete-btn:hover {
  background: var(--prox-danger-soft) !important;
  border-color: var(--prox-danger) !important;
  color: var(--prox-danger) !important;
}

/* Send / My Transfers sub-tabs: clearer states */
.transfer-sub-tab {
  font-size: var(--prox-text-base);
  font-weight: var(--prox-weight-medium);
  color: var(--prox-text-tertiary);
  transition: color var(--prox-duration-fast) var(--prox-ease-out);
}
.transfer-sub-tab:hover { color: var(--prox-text-secondary); }
.transfer-sub-tab.active { color: var(--prox-text-primary); font-weight: var(--prox-weight-semibold); }

/* Recipient page: progress bar reads as a 4px status line, not a rainbow
   banner; file-type emoji rendered monochrome so the list looks designed */
.progress-bar-wrap {
  height: 4px;
  border-radius: var(--prox-radius-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.progress-bar-fill { border-radius: var(--prox-radius-pill); }
.ficon {
  color: var(--prox-text-tertiary);
  display: inline-flex;
  align-items: center;
}
/* emoji fallback only (when prox-icons.js fails to load) */
.ficon:not(:has(.prox-icon)) { filter: grayscale(1) brightness(1.9); opacity: 0.75; }

/* ── 10. Library / C2C parked behind a flag ──────────────────────── */
/* portal-main.js sets data-no-library on <html> when ENABLE_LIBRARY=false. */
[data-no-library] .gradient-nav-item[data-tab="tabLibrary"],
[data-no-library] #btnBinInline,
[data-no-library] #btnUploadRush {
  display: none !important;
}