/* ========================================================================
   InterpretBank – shared brand tokens & cross-page component styles
   Included by every page (webapp + ASR). Works with Bootstrap 4 & 5.
   ======================================================================== */

/* ── 1. Brand tokens ─────────────────────────────────────────────────────── */
:root {
  --ib-brand:       #F5C518;               /* bright golden yellow (brand) */
  --ib-brand-dark:  #D4A914;               /* hover / pressed              */
  --ib-brand-text:  #1f2937;               /* dark text on yellow buttons  */
  --ib-brand-bg:    rgba(245, 197, 24, .08);
  --ib-brand-bg2:   rgba(245, 197, 24, .15);
  --ib-radius:      10px;
  --ib-shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);

  /* Desktop-app navy – used for the header bar, echoing the Tk app chrome */
  --ib-navy:        #1e3a5f;
  --ib-navy-dark:   #16293f;
  --ib-navy-light:  #2c4d78;
  --ib-navy-text:   #eaf0f8;
  --ib-tile-bg:     #f5f6f8;               /* flat grey tile, like the Desktop dashboard cards */
  --ib-tile-border: #e7e9ee;
}

/* ── 2. Iconify defaults ─────────────────────────────────────────────────── */
iconify-icon {
  display: inline-flex;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

/* ── 3. Primary button → brand yellow (BS4 + BS5) ───────────────────────── */
.btn-primary {
  background-color: var(--ib-brand) !important;
  border-color:     var(--ib-brand) !important;
  color: var(--ib-brand-text) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ib-brand-dark) !important;
  border-color:     var(--ib-brand-dark) !important;
  color: var(--ib-brand-text) !important;
  box-shadow: 0 0 0 .2rem rgba(245,197,24,.35) !important;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):active {
  background-color: var(--ib-brand-dark) !important;
  border-color:     var(--ib-brand-dark) !important;
  color: var(--ib-brand-text) !important;
}

/* ── 4. Form switches → brand yellow (Bootstrap 5) ──────────────────────── */
.form-check-input:checked {
  background-color: var(--ib-brand);
  border-color:     var(--ib-brand);
}
.form-check-input:focus {
  border-color: var(--ib-brand);
  box-shadow: 0 0 0 .2rem rgba(245,197,24,.3);
}

/* ── 5. Shared modal polish ──────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--ib-radius) !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.12) !important;
}
.modal-header {
  border-bottom: 1px solid #f3f4f6;
  padding: .85rem 1.2rem;
}
.modal-footer {
  border-top: 1px solid #f3f4f6;
  padding: .7rem 1.2rem;
}
.nav-tabs .nav-link.active {
  border-bottom-color: var(--ib-brand);
  color: var(--ib-brand-dark);
  font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--ib-brand-dark); }

/* ── 6. Audio level bar → brand yellow ──────────────────────────────────── */
#audioLevelBar { background-color: var(--ib-brand); }