/* MediaDB UI framework — Linear-inspired dark dashboard layer.
   This file intentionally overrides the older inline page CSS without changing backend behavior. */
:root {
  --bg: #08090a !important;
  --surface: rgba(255,255,255,0.035) !important;
  --surface2: rgba(255,255,255,0.055) !important;
  --surface3: rgba(255,255,255,0.075) !important;
  --border: rgba(255,255,255,0.075) !important;
  --border-light: rgba(255,255,255,0.14) !important;
  --text: #f7f8f8 !important;
  --muted: #8a8f98 !important;
  --accent: #6c73ff !important;
  --accent-hover: #8389ff !important;
  --danger: #ff5c70 !important;
  --success: #28d17c !important;
  --warning: #f59e0b !important;
  --pill-bg: rgba(255,255,255,0.045) !important;
  --pill-border: rgba(255,255,255,0.11) !important;
  --shadow-soft: 0 20px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
  --shadow-card: 0 12px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html { min-height: 100%; color-scheme: dark; }
body {
  min-height: 100%;
  max-width: 1440px;
  margin: 0 auto !important;
  padding: clamp(16px, 2vw, 32px) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-feature-settings: "cv01", "ss03";
  color: var(--text) !important;
  background: #08090a !important;
  letter-spacing: -0.01em;
}
body::before { content: none; }

a { color: inherit; }
h1, h2, h3 {
  color: var(--text) !important;
  letter-spacing: -0.04em !important;
}
h1 {
  font-size: clamp(2rem, 4vw, 4.4rem) !important;
  line-height: .98 !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}
h2 { font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important; font-weight: 590 !important; }
h3 { font-weight: 590 !important; }
.subtitle, .muted, p.muted {
  color: var(--muted) !important;
  font-size: .94rem !important;
  line-height: 1.65 !important;
}

.box, .login-box, .topbar, .selected-bar, .empty-state {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.026)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(18px) saturate(135%);
}
.box { padding: clamp(18px, 2.2vw, 30px) !important; margin-bottom: 22px !important; }
.box::after, .login-box::after, .topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%);
  opacity: .5;
}
.box > *, .login-box > *, .topbar > * { position: relative; z-index: 1; }
body > .box:first-of-type {
  padding: clamp(22px, 3vw, 38px) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.028)) !important;
}

.nav-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
a.button, button, .btn, .pagination a, .pagination span {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.055) !important;
  color: #eef0ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.18);
  font-weight: 560 !important;
  letter-spacing: -0.01em;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
a.button:first-child, button[type="submit"], .pagination .current {
  background: linear-gradient(135deg, var(--accent), #8b5cf6) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
a.button:hover, button:hover, .btn:hover, .pagination a:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(131,137,255,.55) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.3), 0 0 0 4px rgba(108,115,255,.10);
}
.btn-ghost { background: rgba(255,255,255,.035) !important; }
.btn-danger, button.btn-danger { background: linear-gradient(135deg, #ef4444, #fb7185) !important; }

input, select, textarea, .up-field input, .filter-group input, .filter-group select,
.card .fields-grid input, .card .fields-grid textarea {
  background: rgba(7,8,10,.72) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  outline: none !important;
  font-family: inherit !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus, select:focus, textarea:focus, .up-field input:focus, .filter-group input:focus, .filter-group select:focus {
  border-color: rgba(131,137,255,.8) !important;
  box-shadow: 0 0 0 4px rgba(108,115,255,.16) !important;
  background: rgba(12,13,16,.9) !important;
}
input::placeholder, textarea::placeholder { color: #62666d !important; }

.upload-grid, .filter-bar, .stats, .grid, .media-grid {
  gap: 14px !important;
}
.stat, .card, .thumb, .chip, .label-pill, .bulk-label, .individual-label, .type-badge,
.card .individual-label, .card .type-pill, .mini-pill, .st, .mega-progress {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--pill-border) !important;
  box-shadow: var(--shadow-card);
}
.stat, .card, .thumb, .mega-progress { border-radius: var(--radius-md) !important; }
.card, .thumb {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.card:hover, .thumb:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(131,137,255,.42) !important;
  background: rgba(255,255,255,.068) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.34), 0 0 0 1px rgba(108,115,255,.08) !important;
}
.card img, .card video, .thumb img, .thumb video {
  border-radius: 12px !important;
  background: #020203 !important;
  border: 1px solid rgba(255,255,255,.075);
}
.stat .val {
  background: linear-gradient(135deg, #fff, #9ca3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.stat .lbl, .meta, .card .meta { color: var(--muted) !important; }
.meta b, .card .meta b { color: #d0d6e0 !important; }

.label-pill, .chip, .bulk-label, .individual-label, .type-badge, .mini-pill, .st, .card .type-pill {
  border-radius: 999px !important;
  color: #d0d6e0 !important;
}
.chip.active, .bulk-label:has(input:checked), .individual-label:has(input:checked), .card .individual-label:has(input:checked), .card.selected {
  background: rgba(108,115,255,.18) !important;
  border-color: rgba(131,137,255,.70) !important;
  color: white !important;
}
.status-reviewed, .st-reviewed { color: var(--success) !important; }
.status-unreviewed, .st-unreviewed { color: var(--warning) !important; }

.upload-box {
  border-radius: 18px !important;
  border: 1px dashed rgba(131,137,255,.42) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(108,115,255,.18), transparent 22rem),
    rgba(255,255,255,.025) !important;
}
.upload-box:hover { background: rgba(108,115,255,.09) !important; }
.mega-progress-track {
  background: #050607 !important;
  border-color: rgba(255,255,255,.10) !important;
  height: 16px !important;
}
.mega-progress-bar {
  background: linear-gradient(90deg, #6c73ff, #28d17c) !important;
  box-shadow: 0 0 22px rgba(108,115,255,.45);
}

.login-box {
  max-width: 460px !important;
  margin-top: 12vh !important;
  padding: 34px !important;
}
.login-box h1::before {
  content: "MediaDB";
  display: block;
  width: max-content;
  margin-bottom: 16px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: #d0d6e0;
  font-size: 12px;
  font-weight: 560;
  letter-spacing: .02em;
}
.error { color: #ff8a9a !important; }

.section-header { align-items: center !important; }
hr, hr.divider { border-color: rgba(255,255,255,.08) !important; }
.empty-state { border-style: dashed !important; text-align: center; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(131,137,255,.32);
  background: rgba(108,115,255,.11);
  color: #c7cbff;
  font-size: 12px;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 18px rgba(40,209,124,.75);
}

@media (max-width: 760px) {
  body { padding: 12px !important; }
  h1 { font-size: 2rem !important; }
  .box { border-radius: 18px !important; }
  .grid { grid-template-columns: 1fr !important; }
  .filter-bar { display: grid !important; grid-template-columns: 1fr !important; }
  .fields-grid, .card .fields-grid { grid-template-columns: 1fr !important; }
  a.button, button, .btn { width: auto; justify-content: center; }
}


/* Action fixes and cleaner group controls */
.card-actions, .group-bulkbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.card-actions form, .nav-row form { margin: 0; display: inline-flex; }
.group-bulkbar {
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.group-card .card-actions { padding: 0 16px 16px; }
.group-card .group-main-link { display: block; }
.group-card .icon {
  font-size: .68rem !important;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  padding: 3px 7px;
}
.select-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--pill-border);
  background: rgba(8,9,10,.82);
  color: #d0d6e0;
  font-size: .76rem;
  cursor: pointer;
}
.card.selected {
  border-color: rgba(131,137,255,.70) !important;
  box-shadow: 0 0 0 3px rgba(108,115,255,.14), var(--shadow-card) !important;
}
.btn-sm, a.btn-sm, button.btn-sm { padding: 6px 11px !important; font-size: .78rem !important; }
button.btn-ghost { background: rgba(255,255,255,.035) !important; }

/* Loading skeleton and action additions */
body.loading .grid, body.loading .media-grid { opacity: .55; }
.skeleton { background: linear-gradient(90deg, #1b1b20 25%, #25252c 37%, #1b1b20 63%); background-size: 400% 100%; animation: skeleton-pulse 1.2s ease-in-out infinite; border-radius: 10px; }
@keyframes skeleton-pulse { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.hot-badge, .btn-hot-active { background: #e85d8f !important; color: white !important; border-color: #e85d8f !important; }
.mass-edit-panel { margin: 14px 0; padding: 14px; border: 1px solid var(--border, #2e2e35); border-radius: 12px; background: #14141a; }
.mass-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 10px 0; }
.mass-edit-grid label { display: flex; flex-direction: column; gap: 5px; color: var(--muted, #aaa); font-size: .82rem; }
.mass-edit-grid label.full { grid-column: 1 / -1; }
.mass-edit-grid input[type=checkbox] { width: auto; margin-right: 6px; }


/* Global background video job notification */
.video-job-toast {
  position: fixed !important; right: 18px; bottom: 18px; z-index: 9999;
  width: min(360px, calc(100vw - 36px)); background: #17171d;
  border: 1px solid var(--border-light, rgba(255,255,255,.14)); border-radius: 14px; padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); display: none;
}
.video-job-toast.show { display: block !important; }
.video-job-title { font-weight: 700; margin-bottom: 6px; }
.video-job-msg { color: var(--muted, #8a8f98); font-size: .85rem; margin-bottom: 10px; }
.video-job-bar { height: 9px; background: #0d0d10; border-radius: 999px; overflow: hidden; border: 1px solid var(--border, rgba(255,255,255,.075)); }
.video-job-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent, #6c73ff), var(--success, #28d17c)); transition: width .25s ease; }
.video-job-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.video-job-actions a { display: none; color: white !important; background: var(--success, #28d17c); padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: .86rem; }
.video-job-toast.ready .video-job-actions a { display: inline-flex; }