/* =========================================================================
   ElevenLabs-inspired light theme for voicelab.
   Loaded AFTER adminlte.min.css to override its dark chrome with a clean,
   minimal, monochrome light look. Pure presentation; no markup logic.
   ========================================================================= */

:root {
  --el-bg: #f7f7f8;          /* app background */
  --el-surface: #ffffff;     /* cards / panels */
  --el-surface-2: #fafafa;   /* subtle fills */
  --el-border: #e9e9ec;
  --el-border-strong: #dcdce0;
  --el-text: #0a0a0a;
  --el-text-2: #6b7280;
  --el-text-3: #9ca3af;
  --el-accent: #111113;      /* primary (black) */
  --el-accent-hover: #2a2a2e;
  --el-radius: 12px;
  --el-radius-sm: 8px;
  --el-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --el-ring: 0 0 0 3px rgba(17,17,19,.12);
}

* { font-feature-settings: "cv02","cv03","cv04","cv11"; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--el-bg) !important;
  color: var(--el-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* ── Navbar (top) ───────────────────────────────────────────────────────── */
.main-header.navbar {
  background: var(--el-surface) !important;
  border-bottom: 1px solid var(--el-border) !important;
  box-shadow: none !important;
}
.main-header .nav-link,
.main-header .navbar-nav .nav-link span,
.main-header .navbar-nav .nav-link i {
  color: var(--el-text) !important;
}
.main-header .text-muted { color: var(--el-text-2) !important; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.main-sidebar {
  background: var(--el-surface) !important;
  border-right: 1px solid var(--el-border);
  box-shadow: none !important;
}
.main-sidebar .brand-link {
  background: var(--el-surface) !important;
  border-bottom: 1px solid var(--el-border) !important;
  color: var(--el-text) !important;
}
.main-sidebar .brand-link .brand-text { color: var(--el-text) !important; }
.main-sidebar .brand-link i { color: var(--el-accent) !important; }
.sidebar .user-panel .info span { color: var(--el-text) !important; }
.sidebar .user-panel .info small { color: var(--el-text-3) !important; }
.sidebar .user-panel { border-bottom: 1px solid var(--el-border); }
.nav-sidebar .nav-header {
  color: var(--el-text-3) !important;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.nav-sidebar .nav-link {
  color: var(--el-text-2) !important;
  border-radius: var(--el-radius-sm);
  margin: 1px 8px;
}
.nav-sidebar .nav-link p { color: inherit !important; }
.nav-sidebar .nav-link i { color: var(--el-text-3) !important; }
.nav-sidebar .nav-link:hover {
  background: var(--el-surface-2) !important;
  color: var(--el-text) !important;
}
.nav-sidebar .nav-link.active {
  background: #f1f1f3 !important;
  color: var(--el-text) !important;
  box-shadow: none !important;
}
.nav-sidebar .nav-link.active i { color: var(--el-text) !important; }
.user-panel .image span { background: var(--el-accent) !important; }

/* ── Content header ─────────────────────────────────────────────────────── */
.content-header {
  background: var(--el-surface) !important;
  color: var(--el-text) !important;
  border-bottom: 1px solid var(--el-border);
}
.content-header h1 { color: var(--el-text) !important; font-weight: 600 !important; }
.content-header h1 i { color: var(--el-accent) !important; }
.content-header small,
.content-header .text-muted { color: var(--el-text-2) !important; }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.card {
  background: var(--el-surface);
  border: 1px solid var(--el-border) !important;
  border-radius: var(--el-radius) !important;
  box-shadow: var(--el-shadow) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--el-border) !important;
  font-weight: 600;
  color: var(--el-text);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--el-radius-sm); font-weight: 500; letter-spacing: -0.01em; }
.btn-primary {
  background: var(--el-accent) !important;
  border-color: var(--el-accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--el-accent-hover) !important;
  border-color: var(--el-accent-hover) !important;
  box-shadow: none !important;
}
.btn-outline-primary {
  color: var(--el-text) !important;
  border-color: var(--el-border-strong) !important;
  background: var(--el-surface) !important;
}
.btn-outline-primary:hover {
  background: var(--el-surface-2) !important;
  color: var(--el-text) !important;
  border-color: var(--el-text-3) !important;
}
.btn-outline-secondary {
  color: var(--el-text-2) !important;
  border-color: var(--el-border-strong) !important;
}
.btn-outline-secondary:hover {
  background: var(--el-surface-2) !important;
  color: var(--el-text) !important;
}
.btn-outline-danger { color: #b42318 !important; border-color: #f0c2bd !important; }
.btn-outline-danger:hover { background: #fef3f2 !important; color: #b42318 !important; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.form-control,
.custom-select,
select.form-control {
  border: 1px solid var(--el-border-strong);
  border-radius: var(--el-radius-sm);
  color: var(--el-text);
  background-color: var(--el-surface);
}
.form-control:focus,
select.form-control:focus {
  border-color: var(--el-accent) !important;
  box-shadow: var(--el-ring) !important;
}
.input-group-text {
  background: var(--el-surface-2);
  border: 1px solid var(--el-border-strong);
  color: var(--el-text-2);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { font-weight: 600; border-radius: 999px; }
.badge-success { background: #ecfdf3 !important; color: #067647 !important; }
.badge-warning { background: #fffaeb !important; color: #b54708 !important; }
.badge-secondary { background: #f2f2f4 !important; color: var(--el-text-2) !important; }
.badge-light { background: #f2f2f4 !important; color: var(--el-text-2) !important; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--el-radius-sm); border: 1px solid transparent; }
.alert-success { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.alert-danger  { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.alert-warning { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.alert-info    { background: #f5f8ff; color: #2d3b6b; border-color: #d3e0fb; }

/* ── Voice library overrides (index.html / voicelab.css) ────────────────── */
.voice-card { border: 1px solid var(--el-border) !important; border-radius: var(--el-radius) !important; }
.voice-card:hover { box-shadow: 0 6px 16px rgba(16,24,40,.08) !important; }
.voice-card.playing { border-color: var(--el-accent) !important; box-shadow: var(--el-ring) !important; }
.voice-name { color: var(--el-text) !important; }

.btn-play {
  background: var(--el-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.btn-play:hover:not(:disabled) { background: var(--el-accent-hover) !important; color: #fff !important; }
.btn-play.loading-state { background: #9ca3af !important; }
.btn-play.playing-state { background: #b42318 !important; }

/* Muted, monochrome-friendly avatars */
.voice-avatar.female { background: #f3f4f6 !important; color: #6b7280 !important; }
.voice-avatar.male   { background: #f3f4f6 !important; color: #6b7280 !important; }

/* Region/gender/source badges -> soft neutral tints */
.region-badge.north,
.filter-badge.region-badge.north   { background: #eef2ff !important; color: #3538cd !important; }
.region-badge.central,
.filter-badge.region-badge.central { background: #fff6ed !important; color: #b93815 !important; }
.region-badge.south,
.filter-badge.region-badge.south   { background: #ecfdf3 !important; color: #067647 !important; }
.badge-pink { background: #fdf2fa !important; color: #c11574 !important; }
.badge-blue { background: #eff8ff !important; color: #175cd3 !important; }

.region-heading { color: var(--el-text) !important; border-bottom: 1px solid var(--el-border) !important; }
.region-section[data-region] .region-heading { color: var(--el-text) !important; }

.filter-badge { border: 1px solid var(--el-border-strong) !important; background: var(--el-surface) !important; color: var(--el-text-2) !important; }
.filter-badge[data-filter="all"] { background: var(--el-surface) !important; color: var(--el-text-2) !important; }
.filter-badge.gender-badge.female,
.filter-badge.gender-badge.male { background: var(--el-surface) !important; color: var(--el-text-2) !important; }
.filter-badge.active { box-shadow: var(--el-ring) !important; background: #f1f1f3 !important; color: var(--el-text) !important; transform: none !important; }

/* ── Multi-select filter bar ── */
#filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
#filter-bar .filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
#filter-bar .fg-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--el-text-3); margin-right: .15rem;
}
#filter-bar .filter-group + .filter-group { border-left: 1px solid var(--el-border); padding-left: .75rem; }
.filter-chip {
  display: inline-flex; align-items: center; cursor: pointer; user-select: none;
  font-size: .8rem; font-weight: 500; line-height: 1;
  padding: .35rem .6rem; border-radius: 999px;
  border: 1px solid var(--el-border-strong); background: var(--el-surface); color: var(--el-text-2);
  transition: background .12s, color .12s, box-shadow .12s, border-color .12s;
}
.filter-chip:hover { border-color: var(--el-accent); color: var(--el-text); }
.filter-chip b { font-weight: 600; margin-left: .35rem; color: var(--el-text-3); font-variant-numeric: tabular-nums; }
.filter-chip.active { background: #f1f1f3; color: var(--el-text); border-color: var(--el-accent); box-shadow: var(--el-ring); }
.filter-chip.active b { color: var(--el-text-2); }
.btn-clear-filters {
  display: inline-flex; align-items: center; cursor: pointer;
  font-size: .8rem; font-weight: 600; line-height: 1;
  padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid var(--el-border-strong); background: var(--el-surface); color: var(--el-text-2);
  transition: background .12s, color .12s, box-shadow .12s;
}
.btn-clear-filters:hover { color: var(--el-text); border-color: var(--el-accent); }
.btn-clear-filters.active { background: var(--el-accent); color: #fff; border-color: var(--el-accent); }

.main-footer { background: var(--el-surface) !important; border-top: 1px solid var(--el-border) !important; color: var(--el-text-3) !important; }

#tts-text:focus { border-color: var(--el-accent) !important; box-shadow: var(--el-ring) !important; }

/* ── Misc ───────────────────────────────────────────────────────────────── */
a { color: var(--el-text); }
hr { border-top-color: var(--el-border); }
.text-muted { color: var(--el-text-2) !important; }

/* =========================================================================
   AWS Connect (Cloudscape) theme overlay — appended last so it wins.
   - Primary blue buttons (#0972d3), white text
   - Secondary/outline buttons: white bg + BLUE text + BLUE border
   - Dark navy nav chrome (top navbar + left sidebar)
   ========================================================================= */
:root {
  --el-accent: #0972d3;            /* AWS Cloudscape primary blue */
  --el-accent-hover: #065299;
  --el-ring: 0 0 0 3px rgba(9, 114, 211, .20);
  --awsc-nav-bg: #16202c;          /* dark navy header + sidebar */
  --awsc-nav-bg-2: #1e2a38;
  --awsc-nav-border: #2c3a48;
  --awsc-nav-text: #d5dbe0;
  --awsc-nav-text-muted: #8b97a3;
}

/* Top navbar — dark navy */
.main-header.navbar {
  background: var(--awsc-nav-bg) !important;
  border-bottom: 1px solid var(--awsc-nav-border) !important;
}
.main-header .nav-link,
.main-header .navbar-nav .nav-link,
.main-header .navbar-nav .nav-link span,
.main-header .navbar-nav .nav-link i { color: var(--awsc-nav-text) !important; }
.main-header .nav-link:hover { color: #fff !important; }
.main-header .text-muted { color: var(--awsc-nav-text-muted) !important; }

/* Sidebar — dark navy */
.main-sidebar {
  background: var(--awsc-nav-bg) !important;
  border-right: 1px solid var(--awsc-nav-border) !important;
}
.main-sidebar .brand-link {
  background: var(--awsc-nav-bg) !important;
  border-bottom: 1px solid var(--awsc-nav-border) !important;
  color: #fff !important;
}
.main-sidebar .brand-link .brand-text { color: #fff !important; }
.main-sidebar .brand-link i { color: var(--el-accent) !important; }
.sidebar .user-panel { border-bottom: 1px solid var(--awsc-nav-border) !important; }
.sidebar .user-panel .info span { color: #fff !important; }
.sidebar .user-panel .info small { color: var(--awsc-nav-text-muted) !important; }
.nav-sidebar .nav-header { color: var(--awsc-nav-text-muted) !important; }
.nav-sidebar .nav-link { color: var(--awsc-nav-text) !important; }
.nav-sidebar .nav-link p { color: inherit !important; }
.nav-sidebar .nav-link i { color: var(--awsc-nav-text-muted) !important; }
.nav-sidebar .nav-link:hover { background: var(--awsc-nav-bg-2) !important; color: #fff !important; }
.nav-sidebar .nav-link:hover i { color: #fff !important; }
.nav-sidebar .nav-link.active {
  background: var(--awsc-nav-bg-2) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--el-accent) !important;
}
.nav-sidebar .nav-link.active i { color: #fff !important; }

/* Buttons — solid blue primary + blue-bordered secondary/outline */
.btn-primary {
  background: var(--el-accent) !important;
  border-color: var(--el-accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--el-accent-hover) !important;
  border-color: var(--el-accent-hover) !important;
}
.btn-outline-primary,
.btn-outline-secondary {
  color: var(--el-accent) !important;
  border-color: var(--el-accent) !important;
  background: #fff !important;
}
.btn-outline-primary:hover {
  background: var(--el-accent) !important;
  border-color: var(--el-accent) !important;
  color: #fff !important;
}
.btn-outline-secondary:hover {
  background: #f0f7ff !important;
  border-color: var(--el-accent-hover) !important;
  color: var(--el-accent-hover) !important;
}

/* Links + blue accents */
a { color: var(--el-accent); }
a:hover { color: var(--el-accent-hover); }
.content-header h1 i { color: var(--el-accent) !important; }
.user-panel .image span { background: var(--el-accent) !important; }

/* Sidebar brand: wrap "Studio" onto a second line, centered under the first. */
.main-sidebar .brand-link { white-space: normal !important; }
.main-sidebar .brand-link .brand-text {
  display: inline-block;
  text-align: center;
  line-height: 1.12;
  vertical-align: middle;
}