/* ============================================================
   Phase 37 — UX / UI Improvement Sweep
   Targeted visual and interaction polish across:
   auth, hub, beats, wardrobe, tabs, buttons, empty states.
   ============================================================ */

/* ── Auth overlay: suppress error box when it has no content ─────────── */
#auth-err:empty {
  display: none !important;
}

/* ── Auth overlay: sharper card shadow + subtle entrance ─────────────── */
.auth-card {
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12) !important;
}

/* ── Tab nav: add visible underline indicator on active tab ──────────── */
.tab { position: relative; overflow: hidden; }
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10px; right: 10px;
  height: 2.5px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  animation: tabUnderlineIn .18s ease;
}
@keyframes tabUnderlineIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ── Tab nav: smoother hover transition ──────────────────────────────── */
.tab {
  transition: background .13s, color .13s !important;
}

/* ── New project button: elevated primary style ──────────────────────── */
#new-btn {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(37,99,235,.28) !important;
  transition: background .15s, box-shadow .15s, transform .1s !important;
}
#new-btn:hover {
  background: var(--brand-hover) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.38) !important;
}
#new-btn:active { transform: scale(.96) !important; }

/* ── Hub search input: glass-morphism feel ───────────────────────────── */
.hub-search-input {
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 4px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
body.dark .hub-search-input {
  background: rgba(30,36,51,.90) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ── Hub dash pills: semantic color variants ─────────────────────────── */
#hub-dash-bar .hub-dash-pill[data-stat="projects"] {
  background: rgba(37,99,235,.09);
  color: #1d4ed8;
  border-color: rgba(37,99,235,.22);
}
#hub-dash-bar .hub-dash-pill[data-stat="scenes"] {
  background: rgba(5,150,105,.09);
  color: #065f46;
  border-color: rgba(5,150,105,.22);
}
#hub-dash-bar .hub-dash-pill[data-stat="days"] {
  background: rgba(217,119,6,.09);
  color: #92400e;
  border-color: rgba(217,119,6,.22);
}
#hub-dash-bar .hub-dash-pill[data-stat="cast"] {
  background: rgba(124,58,237,.09);
  color: #5b21b6;
  border-color: rgba(124,58,237,.22);
}
#hub-dash-bar .hub-dash-pill[data-stat="locked"] {
  background: rgba(22,163,74,.09);
  color: #14532d;
  border-color: rgba(22,163,74,.22);
}
body.dark #hub-dash-bar .hub-dash-pill[data-stat="projects"] { color: var(--brand); border-color: rgba(77,142,248,.28); background: rgba(77,142,248,.12); }
body.dark #hub-dash-bar .hub-dash-pill[data-stat="scenes"]   { color: #34d399;      border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.09); }
body.dark #hub-dash-bar .hub-dash-pill[data-stat="days"]     { color: #fbbf24;      border-color: rgba(251,191,36,.28); background: rgba(251,191,36,.09); }
body.dark #hub-dash-bar .hub-dash-pill[data-stat="cast"]     { color: #a78bfa;      border-color: rgba(167,139,250,.28); background: rgba(167,139,250,.09); }
body.dark #hub-dash-bar .hub-dash-pill[data-stat="locked"]   { color: #86efac;      border-color: rgba(134,239,172,.28); background: rgba(134,239,172,.09); }

/* ── Hub folder cards: hide action row, reveal on hover ──────────────── */
.folder-actions {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.folder:hover .folder-actions,
.folder:focus-within .folder-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Ensure genre select also appears on hover */
.folder-genre-sel {
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.folder:hover .folder-genre-sel,
.folder:focus-within .folder-genre-sel {
  opacity: 1;
  pointer-events: auto;
}

/* ── Folder card: project type badge ─────────────────────────────────── */
.folder-type-badge {
  display: inline-block;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0,0,0,.09);
  color: rgba(0,0,0,.42);
  line-height: 1.5;
  margin-top: 3px;
  align-self: flex-start;
}
body.dark .folder-type-badge {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.42);
}

/* ── Folder card: subtle label refinement ────────────────────────────── */
.folder-label {
  box-shadow: 2px 3px 10px rgba(0,0,0,.13) !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* ── Beats / Corkboard: readable empty state on cork background ──────── */
.cork-empty-state {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  padding: 40px 28px !important;
  opacity: 1 !important;
}
body.dark .cork-empty-state {
  background: rgba(24,30,45,.88) !important;
  color: var(--ink) !important;
}

/* ── Wardrobe: improve ghost add-cards legibility on cork ─────────────── */
#wardrobe-app .wdb-add-card {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.60) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
  color: #374151 !important;
  transition: background .18s, box-shadow .18s;
}
#wardrobe-app .wdb-add-card:hover {
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.14) !important;
}
body.dark #wardrobe-app .wdb-add-card {
  background: rgba(24,30,45,.78) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: var(--ink) !important;
}

/* ── Wardrobe: fallback for inline-styled empty-state divs ───────────── */
.wd-empty-state {
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  padding: 40px 32px !important;
  color: #374151 !important;
  text-align: center;
  max-width: 460px;
  margin: 32px auto !important;
}
body.dark .wd-empty-state {
  background: rgba(24,30,45,.88) !important;
  color: var(--ink) !important;
}
.wd-empty-state p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: #4b5563;
}
body.dark .wd-empty-state p { color: var(--muted); }

/* ── Storyboard: polish empty-state card ─────────────────────────────── */
#storyboard-app .card {
  transition: box-shadow .2s, transform .15s;
}
#storyboard-app .card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.12) !important;
  transform: translateY(-1px);
}

/* ── Global: consistent, accessible focus rings ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ── Global buttons: snappy active micro-interaction ─────────────────── */
.btn:active:not(:disabled) {
  transform: scale(.95) !important;
  transition: transform .08s !important;
}

/* ── Snapshot toast: improve legibility ──────────────────────────────── */
.snapshot-toast {
  font-size: .82rem !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
}

/* ── Local banner: clearer type ──────────────────────────────────────── */
#local-banner {
  font-weight: 700 !important;
  letter-spacing: .01em;
  font-size: .78rem !important;
}

/* ── Modal: slightly elevated entrance shadow ────────────────────────── */
.modal {
  box-shadow: 0 24px 72px rgba(0,0,0,.22), 0 6px 20px rgba(0,0,0,.12) !important;
}

/* ── Schedule day header: stronger text contrast ─────────────────────── */
.sched-day-head,
[class*="sched-day"] h2,
[class*="sched-day"] h3 {
  text-shadow: 0 1px 3px rgba(0,0,0,.18);
}