/* VVB Client design system — layered on top of Bootstrap 5, not a
   generic override. Custom palette, spacing, and components so the app
   doesn't read as an unstyled admin template. */

:root {
  --ie-primary: #5B4FE9;
  --ie-primary-dark: #4438C7;
  --ie-primary-soft: #EEEBFF;
  --ie-accent: #16B981;
  --ie-accent-soft: #E3FBF1;
  --ie-warn: #F59E0B;
  --ie-warn-soft: #FEF3E2;
  --ie-danger: #E5484D;
  --ie-danger-soft: #FDEAEA;
  --ie-blue: #2E7BF6;
  --ie-blue-soft: #E7F0FF;
  --ie-pink: #DB2777;
  --ie-pink-soft: #FCE1EC;
  --ie-teal: #0D9488;
  --ie-teal-soft: #E1F5F3;
  --ie-ink: #1B1B2F;
  --ie-ink-soft: #5B5B76;
  --ie-border: #E7E7F0;
  --ie-surface: #FFFFFF;
  --ie-bg: #F6F6FB;
  --ie-radius: 14px;
  --ie-radius-sm: 10px;
  --ie-shadow: 0 2px 10px rgba(27, 27, 47, 0.06);
  --ie-shadow-lg: 0 12px 32px rgba(27, 27, 47, 0.12);
  --ie-sidebar-w: 256px;
}

body {
  background: var(--ie-bg);
  color: var(--ie-ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.94rem;
}

a { color: var(--ie-primary); text-decoration: none; }
a:hover { color: var(--ie-primary-dark); }

.text-muted-ie { color: var(--ie-ink-soft) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--ie-primary);
  border-color: var(--ie-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ie-primary-dark);
  border-color: var(--ie-primary-dark);
}
.btn-outline-primary {
  color: var(--ie-primary);
  border-color: var(--ie-primary);
}
.btn-outline-primary:hover {
  background-color: var(--ie-primary);
  border-color: var(--ie-primary);
}
.btn { border-radius: var(--ie-radius-sm); font-weight: 500; }

/* ── App shell (sidebar + topbar) ────────────────────────────────────── */
.ie-shell { display: flex; min-height: 100vh; }

.ie-sidebar {
  width: var(--ie-sidebar-w);
  flex-shrink: 0;
  background: var(--ie-surface);
  border-right: 1px solid var(--ie-border);
  padding: 1.25rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.ie-sidebar-header { display: flex; align-items: center; justify-content: space-between; }

.ie-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ie-ink);
  padding: 0.25rem 0.5rem 1.5rem;
}
.ie-brand i { color: var(--ie-primary); font-size: 1.4rem; }
.ie-brand-logo { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }

.ie-sidebar-close { display: none; background: none; border: none; font-size: 1.2rem; color: var(--ie-ink-soft); padding: 0.25rem 0.5rem; }

.ie-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.ie-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--ie-radius-sm);
  color: var(--ie-ink-soft);
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.ie-nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.ie-nav-link:hover { background: var(--ie-primary-soft); color: var(--ie-primary-dark); }
.ie-nav-link.active { background: var(--ie-primary); color: #fff; box-shadow: var(--ie-shadow); }
/* Nav icons carry their own hue (see .ie-icon-* below); force white on the
   solid-purple active pill so the selected state stays clean/high-contrast
   no matter which color the icon normally is. */
.ie-nav-link.active i { color: #fff; }

/* ── Colorful icon utilities ─────────────────────────────────────────── */
.ie-icon-violet { color: var(--ie-primary); }
.ie-icon-green  { color: var(--ie-accent); }
.ie-icon-amber  { color: var(--ie-warn); }
.ie-icon-red    { color: var(--ie-danger); }
.ie-icon-blue   { color: var(--ie-blue); }
.ie-icon-pink   { color: var(--ie-pink); }
.ie-icon-teal   { color: var(--ie-teal); }

/* Semantic color-by-glyph for common status icons wherever they appear
   bare (alerts, empty states, modal titles, etc.) — these carry meaning by
   shape already, so coloring them by class needs no markup changes.
   Component-level color rules (nav icons, stat-icon circles, timeline
   dots) use compound selectors so they keep outranking these. */
i.bi-check-circle, i.bi-check2-circle, i.bi-check2-square,
i.bi-patch-check, i.bi-patch-check-fill { color: var(--ie-accent); }
i.bi-hourglass-split, i.bi-exclamation-triangle { color: var(--ie-warn); }
i.bi-x-circle, i.bi-flag, i.bi-exclamation-circle { color: var(--ie-danger); }
i.bi-telegram { color: #229ED9; }
i.bi-instagram { color: var(--ie-pink); }

.ie-main { flex: 1; min-width: 0; }

.ie-topbar {
  background: var(--ie-surface);
  border-bottom: 1px solid var(--ie-border);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
.ie-topbar h1 { font-size: 1.15rem; font-weight: 700; margin: 0; }

.ie-content { padding: 1.5rem; max-width: 1400px; }

/* Off-canvas nav backdrop — hidden by default unconditionally, not just
   inside the mobile media query below. Some WebViews (seen embedding this
   site in an Android app) don't honor the page's viewport meta tag the way
   a real mobile browser does, so a narrow-viewport-only media query can
   fail to match even on a phone-sized screen; without this base rule the
   backdrop would then fall back to the browser's default block-level
   rendering (a plain, on-screen div) instead of being invisible. */
.ie-sidebar-backdrop { display: none; }
.ie-sidebar-backdrop.show { display: block; }

/* ── Mobile bottom nav ───────────────────────────────────────────────── */
.ie-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--ie-surface);
  border-top: 1px solid var(--ie-border);
  z-index: 30;
  padding: 0.35rem 0.25rem;
}
.ie-bottom-nav .row { margin: 0; }
.ie-bottom-nav a,
.ie-bottom-nav button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; background: none; border: none;
  color: var(--ie-ink-soft); font-size: 0.68rem; padding: 0.35rem 0;
}
.ie-bottom-nav a.active { color: var(--ie-primary); }
.ie-bottom-nav i { font-size: 1.15rem; }

@media (max-width: 900px) {
  .ie-content { padding: 1rem 1rem 5.5rem; }

  /* Off-canvas sidebar on mobile, for every shell — the full nav (every
     item + Logout) is always reachable via the hamburger/close/"More"
     triggers, regardless of whatever shortcuts a shell's own bottom nav
     also shows. */
  .ie-sidebar {
    display: block;
    position: fixed;
    top: 0; right: 25%; bottom: 0; left: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--ie-shadow-lg);
  }
  .ie-sidebar.show { transform: translateX(0); }
  .ie-sidebar-backdrop {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(27,27,47,0.4); z-index: 35;
  }
  .ie-hamburger { display: inline-flex; }
  .ie-sidebar-close { display: inline-flex; }
  .ie-bottom-nav { display: block; }
}

.ie-hamburger { display: none; background: none; border: none; font-size: 1.3rem; color: var(--ie-ink); }

/* ── Cards / stats ───────────────────────────────────────────────────── */
.ie-card {
  background: var(--ie-surface);
  border: 1px solid var(--ie-border);
  border-radius: var(--ie-radius);
  box-shadow: var(--ie-shadow);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.ie-card:hover { box-shadow: var(--ie-shadow-lg); }
.ie-stat {
  padding: 1.1rem 1.25rem;
  border-radius: var(--ie-radius);
  background: var(--ie-surface);
  border: 1px solid var(--ie-border);
}
.ie-stat .ie-stat-label { color: var(--ie-ink-soft); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.ie-stat .ie-stat-value { font-size: 1.6rem; font-weight: 700; margin-top: 0.15rem; }
a.ie-stat { display: block; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, transform 0.1s ease; }
a.ie-stat:hover { box-shadow: var(--ie-shadow-lg); color: inherit; }
a.ie-stat:active { transform: scale(0.98); }
.ie-stat .ie-stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ie-primary-soft); color: var(--ie-primary); font-size: 1.1rem;
}
.ie-stat .ie-stat-icon-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 0.9rem; }

/* Icon-circle color variants — same base .ie-stat-icon shape/size, just a
   different hue per card. The child `i` gets its color set explicitly
   (compound selector: base class + variant class both required) so it
   reliably outranks the glyph-keyed semantic rules above when the same
   icon glyph is intentionally reused here with a different color. */
.ie-stat-icon.ie-stat-icon-violet { background: var(--ie-primary-soft); }
.ie-stat-icon.ie-stat-icon-violet i { color: var(--ie-primary); }
.ie-stat-icon.ie-stat-icon-green { background: var(--ie-accent-soft); }
.ie-stat-icon.ie-stat-icon-green i { color: var(--ie-accent); }
.ie-stat-icon.ie-stat-icon-amber { background: var(--ie-warn-soft); }
.ie-stat-icon.ie-stat-icon-amber i { color: var(--ie-warn); }
.ie-stat-icon.ie-stat-icon-red { background: var(--ie-danger-soft); }
.ie-stat-icon.ie-stat-icon-red i { color: var(--ie-danger); }
.ie-stat-icon.ie-stat-icon-blue { background: var(--ie-blue-soft); }
.ie-stat-icon.ie-stat-icon-blue i { color: var(--ie-blue); }
.ie-stat-icon.ie-stat-icon-pink { background: var(--ie-pink-soft); }
.ie-stat-icon.ie-stat-icon-pink i { color: var(--ie-pink); }
.ie-stat-icon.ie-stat-icon-teal { background: var(--ie-teal-soft); }
.ie-stat-icon.ie-stat-icon-teal i { color: var(--ie-teal); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge-ie { font-weight: 600; padding: 0.35em 0.7em; border-radius: 999px; font-size: 0.72rem; }
.badge-ie-active   { background: var(--ie-accent-soft); color: #0C8858; }
.badge-ie-pending  { background: var(--ie-warn-soft); color: #92600A; }
.badge-ie-danger   { background: var(--ie-danger-soft); color: #B7222A; }
.badge-ie-neutral  { background: #EEF0F5; color: var(--ie-ink-soft); }
.badge-ie-info     { background: var(--ie-primary-soft); color: var(--ie-primary-dark); }
.badge-ie-male     { background: #DCEBFF; color: #1655A3; }
.badge-ie-female   { background: #FCE1EC; color: #A31659; }

/* ── Progress bars ───────────────────────────────────────────────────── */
.ie-progress { height: 8px; border-radius: 999px; background: #EEF0F5; overflow: hidden; }
.ie-progress > span { display: block; height: 100%; background: var(--ie-primary); border-radius: 999px; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.ie-table thead th {
  border-bottom: 1px solid var(--ie-border);
  color: var(--ie-ink-soft);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.ie-table td, .ie-table th { vertical-align: middle; padding: 0.85rem 0.75rem; }
.ie-table tbody tr { border-bottom: 1px solid var(--ie-border); }
.ie-table tbody tr:last-child { border-bottom: none; }

/* ── Empty states ────────────────────────────────────────────────────── */
.ie-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ie-ink-soft);
}
.ie-empty i {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--ie-primary-soft); color: var(--ie-primary); font-size: 1.8rem;
}

/* ── Skeleton loaders ────────────────────────────────────────────────── */
.ie-skeleton {
  background: linear-gradient(90deg, #EEF0F5 25%, #F6F6FB 37%, #EEF0F5 63%);
  background-size: 400% 100%;
  animation: ie-skeleton-shine 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes ie-skeleton-shine {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Toasts ──────────────────────────────────────────────────────────── */
.ie-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Auth screens ────────────────────────────────────────────────────── */
.auth-body {
  background: linear-gradient(160deg, var(--ie-primary) 0%, var(--ie-primary-dark) 100%);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.auth-wrapper { width: 100%; max-width: 400px; }
.auth-card {
  background: var(--ie-surface);
  border-radius: var(--ie-radius);
  box-shadow: var(--ie-shadow-lg);
  padding: 2.25rem 2rem;
}
.auth-logo { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--ie-radius-sm);
  border-color: var(--ie-border);
  padding: 0.55rem 0.8rem;
}
/* Restore the right-hand gutter Bootstrap reserves for the select's caret —
   the shared rule above overwrites it down to 0.8rem, which crowds "Female"/
   longer option text behind the dropdown arrow. */
.form-select {
  padding-right: 2.25rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ie-primary);
  box-shadow: 0 0 0 0.2rem var(--ie-primary-soft);
}

/* ── Verifier queue task groups ──────────────────────────────────────── */
.ie-queue-chevron { transition: transform 0.15s ease; display: inline-block; }
[aria-expanded="true"] .ie-queue-chevron { transform: rotate(90deg); }
label.form-label { font-weight: 600; font-size: 0.85rem; }

/* ── Compact label:value badge rows for stat-only card rows (rollup
   tables with nothing to hide — reports, by-task overview) ───────────── */
.ie-mini-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ie-mini-stats .ie-mini-stat { background: #EEF0F5; color: var(--ie-ink-soft); border-radius: 999px; padding: 0.3em 0.75em; font-size: 0.78rem; }
.ie-mini-stats .ie-mini-stat strong { color: var(--ie-ink); font-weight: 700; }

/* ── Row/detail cards (flat-list-to-card conversions) ─────────────────── */
.ie-row-card-detail { padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--ie-border); }
.ie-row-card-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin-bottom: 0.75rem; }
.ie-row-card-detail dt { color: var(--ie-ink-soft); font-size: 0.78rem; font-weight: 600; }
.ie-row-card-detail dd { margin: 0; }

/* ── Page loader ─────────────────────────────────────────────────────────
   Shown by default (present in the raw HTML near the top of <body>, before
   any other content) so it's visible from first paint; app.js hides it once
   the page's own script has run, and re-shows it right before any
   navigation away (see app.js's beforeunload listener). pointer-events is
   always none — this is a visual "something is happening" indicator only,
   never a click-blocker, so a script failure can never strand the page.
   The animation is a pure-CSS fallback: even with zero JS, it self-hides
   after 2.5s so a broken script never leaves it on screen forever. */
.ie-page-loader {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 246, 251, 0.85);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
  animation: ie-page-loader-auto-hide 2.5s ease forwards;
}
/* animation: none cancels the fallback keyframe the instant JS hides this —
   otherwise a still-running CSS animation takes precedence over the opacity
   transition below and the loader would stay pinned visible until the
   animation's own 2.5s timeline finished, ignoring the earlier JS hide. */
.ie-page-loader.ie-page-loader-hidden { opacity: 0; animation: none; }
.ie-page-loader .spinner-border { color: var(--ie-primary); }
@keyframes ie-page-loader-auto-hide {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}