/* ============================================================
   VerifyFirst — Consultant Portal Styles  v1.0.0
   Supports: dark mode, light mode, theme accent colours
   ============================================================ */

/* ── Default (dark) theme tokens ── */
:root {
  --cl-accent:      #0ea5e9;
  --cl-accent-dark: #0284c7;
  --cl-accent-glow: rgba(14,165,233,.35);
  --cl-accent-soft: rgba(14,165,233,.12);

  --cl-bg:          #0f1117;
  --cl-bg2:         #161b27;
  --cl-bg3:         #1e2436;
  --cl-surface:     #1a2035;
  --cl-surface2:    #212840;
  --cl-border:      rgba(255,255,255,.08);
  --cl-border2:     rgba(255,255,255,.14);
  --cl-text:        #f1f5f9;
  --cl-text2:       #94a3b8;
  --cl-text3:       #64748b;
  --cl-shadow:      0 4px 24px rgba(0,0,0,.45);
  --cl-shadow-lg:   0 12px 48px rgba(0,0,0,.6);
  --cl-radius:      12px;
  --cl-radius-sm:   8px;
  --cl-sidebar-w:   260px;
  --cl-topbar-h:    64px;
}

/* ── Light mode ── */
[data-cl-theme="light"] {
  --cl-bg:       #f0f4f8;
  --cl-bg2:      #e8edf5;
  --cl-bg3:      #dde4ef;
  --cl-surface:  #ffffff;
  --cl-surface2: #f8fafc;
  --cl-border:   rgba(0,0,0,.08);
  --cl-border2:  rgba(0,0,0,.14);
  --cl-text:     #0f172a;
  --cl-text2:    #475569;
  --cl-text3:    #94a3b8;
  --cl-shadow:   0 4px 24px rgba(0,0,0,.10);
  --cl-shadow-lg:0 12px 48px rgba(0,0,0,.16);
}

/* ── Accent palettes ── */
[data-cl-accent="violet"]  { --cl-accent:#8b5cf6; --cl-accent-dark:#7c3aed; --cl-accent-glow:rgba(139,92,246,.35); --cl-accent-soft:rgba(139,92,246,.12); }
[data-cl-accent="emerald"] { --cl-accent:#10b981; --cl-accent-dark:#059669; --cl-accent-glow:rgba(16,185,129,.35);  --cl-accent-soft:rgba(16,185,129,.12); }
[data-cl-accent="rose"]    { --cl-accent:#f43f5e; --cl-accent-dark:#e11d48; --cl-accent-glow:rgba(244,63,94,.35);   --cl-accent-soft:rgba(244,63,94,.12);  }
[data-cl-accent="amber"]   { --cl-accent:#f59e0b; --cl-accent-dark:#d97706; --cl-accent-glow:rgba(245,158,11,.35);  --cl-accent-soft:rgba(245,158,11,.12); }
[data-cl-accent="sky"]     { --cl-accent:#0ea5e9; --cl-accent-dark:#0284c7; --cl-accent-glow:rgba(14,165,233,.35);  --cl-accent-soft:rgba(14,165,233,.12); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   DASHBOARD  (the outer wrapper shown/hidden by app.js)
   ============================================================ */
#dashboard {
  background: var(--cl-bg);
  color: var(--cl-text);
  transition: background .25s, color .25s;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cl-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.cl-sidebar {
  width: var(--cl-sidebar-w); flex-shrink: 0;
  background: var(--cl-surface);
  border-right: 1px solid var(--cl-border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform .28s cubic-bezier(.4,0,.2,1), background .25s;
}

.cl-sidebar-logo {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.3rem 1.4rem 1rem;
  border-bottom: 1px solid var(--cl-border);
  text-decoration: none;
}
.cl-sidebar-logo-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cl-accent), #818cf8);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px var(--cl-accent-glow); flex-shrink: 0;
}
.cl-sidebar-logo-icon svg { width: 18px; height: 18px; }
.cl-sidebar-logo-text { font-size: 1.15rem; font-weight: 700; color: var(--cl-text); }
.cl-sidebar-logo-text span { color: var(--cl-accent); }

.cl-sidebar-nav { flex: 1; padding: 1rem .75rem; overflow-y: auto; }

.cl-nav-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cl-text3);
  padding: .8rem .6rem .4rem; margin-top: .5rem;
}

.cl-nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: var(--cl-radius-sm);
  color: var(--cl-text2); font-size: .86rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
  border: none; background: none; width: 100%; text-align: left;
  margin-bottom: 2px;
}
.cl-nav-item i { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }
.cl-nav-item:hover { background: var(--cl-bg2); color: var(--cl-text); }
.cl-nav-item.active { background: var(--cl-accent-soft); color: var(--cl-accent); font-weight: 600; }
.cl-nav-item.active i { color: var(--cl-accent); }

.cl-sidebar-footer {
  padding: .85rem .75rem;
  border-top: 1px solid var(--cl-border);
}
.cl-sidebar-user {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem; border-radius: var(--cl-radius-sm);
  background: var(--cl-bg2);
}
.cl-user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cl-accent), #818cf8);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.cl-user-info { flex: 1; min-width: 0; }
.cl-user-name {
  font-size: .82rem; font-weight: 600; color: var(--cl-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-user-role { font-size: .7rem; color: var(--cl-text3); }
.cl-sidebar-signout {
  background: none; border: none; color: var(--cl-text3);
  cursor: pointer; padding: .3rem; font-size: 1rem;
  transition: color .15s; flex-shrink: 0;
}
.cl-sidebar-signout:hover { color: #f87171; }

/* ============================================================
   TOPBAR
   ============================================================ */
.cl-topbar {
  position: fixed; top: 0; left: var(--cl-sidebar-w); right: 0;
  height: var(--cl-topbar-h);
  background: var(--cl-surface); border-bottom: 1px solid var(--cl-border);
  display: flex; align-items: center; padding: 0 1.5rem;
  z-index: 100; gap: 1rem;
  transition: left .28s cubic-bezier(.4,0,.2,1), background .25s;
}
.cl-topbar-hamburger {
  display: none; background: none; border: none;
  color: var(--cl-text2); font-size: 1.3rem; cursor: pointer;
  padding: .3rem; border-radius: 6px; transition: color .15s;
}
.cl-topbar-hamburger:hover { color: var(--cl-text); }
.cl-topbar-title { font-size: 1rem; font-weight: 700; color: var(--cl-text); flex: 1; }
.cl-topbar-actions { display: flex; align-items: center; gap: .6rem; }

.cl-topbar-btn {
  background: none; border: 1px solid var(--cl-border);
  color: var(--cl-text2); padding: .42rem .75rem; border-radius: 8px;
  font-size: .82rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all .15s; white-space: nowrap;
}
.cl-topbar-btn:hover { border-color: var(--cl-accent); color: var(--cl-accent); }

/* Theme toggle pill */
.cl-theme-toggle {
  display: flex; align-items: center;
  background: var(--cl-bg2); border: 1px solid var(--cl-border);
  border-radius: 50px; padding: .22rem; gap: .2rem;
}
.cl-theme-opt {
  padding: .3rem .65rem; border-radius: 50px;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  background: none; border: none; color: var(--cl-text3);
  transition: all .15s;
}
.cl-theme-opt.active {
  background: var(--cl-surface); color: var(--cl-text);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Accent swatches */
.cl-accent-swatches { display: flex; gap: .35rem; align-items: center; }
.cl-accent-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: transform .15s, border-color .15s;
}
.cl-accent-swatch:hover { transform: scale(1.2); }
.cl-accent-swatch.active { border-color: var(--cl-text); transform: scale(1.15); }
.cl-swatch-sky     { background: #0ea5e9; }
.cl-swatch-violet  { background: #8b5cf6; }
.cl-swatch-emerald { background: #10b981; }
.cl-swatch-rose    { background: #f43f5e; }
.cl-swatch-amber   { background: #f59e0b; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.cl-main {
  margin-left: var(--cl-sidebar-w);
  padding-top: var(--cl-topbar-h);
  flex: 1; min-height: 100vh;
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);
}
.cl-content {
  padding: 1.75rem;
  padding-bottom: 3.5rem; /* space for fixed bottom banner */
}

/* Pages */
.cl-page { display: none; }
.cl-page.active { display: block; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.cl-stat-card {
  background: var(--cl-surface); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); padding: 1.2rem 1.3rem;
  display: flex; align-items: center; gap: .85rem;
  box-shadow: var(--cl-shadow);
  transition: box-shadow .2s, transform .2s, background .25s;
}
.cl-stat-card:hover { box-shadow: var(--cl-shadow-lg); transform: translateY(-2px); }
.cl-stat-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}
.cl-stat-icon.sky     { background: rgba(14,165,233,.15); color: #0ea5e9; }
.cl-stat-icon.violet  { background: rgba(139,92,246,.15); color: #8b5cf6; }
.cl-stat-icon.emerald { background: rgba(16,185,129,.15); color: #10b981; }
.cl-stat-icon.amber   { background: rgba(245,158,11,.15);  color: #f59e0b; }
.cl-stat-icon.rose    { background: rgba(244,63,94,.15);   color: #f43f5e; }
.cl-stat-info { flex: 1; }
.cl-stat-value { font-size: 1.45rem; font-weight: 800; color: var(--cl-text); line-height: 1; }
.cl-stat-label { font-size: .74rem; color: var(--cl-text3); margin-top: .2rem; }

/* ============================================================
   CL-CARD
   ============================================================ */
.cl-card {
  background: var(--cl-surface); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); box-shadow: var(--cl-shadow);
  transition: background .25s;
}
.cl-card-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--cl-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cl-card-title { font-size: .95rem; font-weight: 700; color: var(--cl-text); }
.cl-card-body  { padding: 1.4rem; }

/* ============================================================
   VERIFICATION STATUS CARD
   ============================================================ */
.cl-verify-card {
  background: var(--cl-surface); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius); box-shadow: var(--cl-shadow);
  overflow: hidden; margin-bottom: 1.5rem;
}
.cl-verify-stripe {
  height: 3px;
  background: linear-gradient(90deg, #f43f5e, #f59e0b, var(--cl-accent));
}
.cl-verify-body {
  padding: 1.4rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cl-verify-info { flex: 1; min-width: 0; }
.cl-verify-status-row {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem;
}
.cl-verify-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: #f43f5e; animation: cl-blink 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(244,63,94,0.15);
}
.cl-verify-dot.confirmed {
  background: #10b981; animation: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
@keyframes cl-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.35; transform:scale(.85); }
}
.cl-verify-label { font-size: 1.05rem; font-weight: 700; color: var(--cl-text); }
.cl-verify-sub   { font-size: .82rem; color: var(--cl-text3); line-height: 1.55; max-width: 500px; }
.cl-verify-done-msg {
  font-size: .82rem; color: #10b981; line-height: 1.55; max-width: 500px;
  margin: .4rem 0 0; font-style: italic;
}
.cl-verify-done-msg .bi { vertical-align: -.1em; }
.cl-verify-action {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--cl-accent), var(--cl-accent-dark));
  color: #fff; border: none; border-radius: 10px;
  padding: .6rem 1.4rem; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: filter .15s, transform .15s;
  text-decoration: none; box-shadow: 0 4px 16px var(--cl-accent-glow);
  white-space: nowrap; flex-shrink: 0;
}
.cl-verify-action:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
.cl-verify-action.link-done {
  background: rgba(16,185,129,.1); color: #10b981;
  box-shadow: none; cursor: default; pointer-events: none;
  border: 1px solid rgba(16,185,129,.25); font-style: italic;
  font-weight: 500; font-size: .8rem; border-radius: var(--cl-radius-sm);
}

/* ── Reverify button variants ── */
.cl-verify-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: .55rem;
  flex-shrink: 0;
}
.cl-reverify-renew {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 16px rgba(245,158,11,.35);
}
.cl-reverify-renew:hover { color: #fff; }
.cl-reverify-state {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}
.cl-reverify-state:hover { color: #fff; }

/* ============================================================
   INFO ROWS
   ============================================================ */
.cl-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 0; border-bottom: 1px solid var(--cl-border); font-size: .86rem;
}
.cl-info-row:last-child { border-bottom: none; }
.cl-info-label { color: var(--cl-text3); font-weight: 500; }
.cl-info-value { color: var(--cl-text); font-weight: 600; text-align: right; }

/* UID badge (topbar) */
.cl-uid-badge {
  font-size: .72rem; font-weight: 700;
  color: var(--cl-accent); background: var(--cl-accent-soft);
  border: 1px solid rgba(255,255,255,.08); border-radius: 50px;
  padding: .25rem .8rem; letter-spacing: .06em;
  font-family: 'Courier New', monospace; white-space: nowrap;
}

/* ============================================================
   PROFILE CARD
   ============================================================ */
.cl-profile-banner {
  height: 90px;
  background: linear-gradient(135deg, #0c1a40 0%, rgba(14,165,233,.14) 100%);
  border-radius: var(--cl-radius) var(--cl-radius) 0 0;
  position: relative; overflow: hidden;
}
.cl-profile-banner::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--cl-accent-glow) 0%, transparent 70%);
}
.cl-profile-body { padding: 0 1.4rem 1.4rem; }
.cl-profile-avatar {
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cl-accent), #818cf8);
  color: #fff; font-size: 1.55rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--cl-surface);
  box-shadow: 0 0 18px var(--cl-accent-glow);
  margin-top: -35px; position: relative; z-index: 1;
}
.cl-anon-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--cl-accent-soft); color: var(--cl-accent);
  border: 1px solid rgba(255,255,255,.08); border-radius: 50px;
  padding: .18rem .6rem; font-size: .7rem; font-weight: 700; vertical-align: middle;
}
.cl-section-heading {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--cl-text3);
  margin: 1.2rem 0 .6rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--cl-border);
}
.cl-skill-chip {
  display: inline-flex; align-items: center;
  background: var(--cl-accent-soft); color: var(--cl-accent);
  border-radius: 50px; padding: .2rem .75rem;
  font-size: .76rem; font-weight: 600; margin: .15rem;
}
.cl-placeholder-text {
  font-size: .82rem; color: var(--cl-text3); font-style: italic;
  padding: .7rem .9rem; border: 1px dashed var(--cl-border2);
  border-radius: var(--cl-radius-sm); background: var(--cl-bg2);
}

/* ============================================================
   RESUME CARD
   ============================================================ */
.cl-resume-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--cl-bg2); border: 1px solid var(--cl-border2);
  border-radius: var(--cl-radius-sm); padding: .85rem 1rem; margin-bottom: 1.2rem;
}
.cl-resume-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cl-accent), var(--cl-accent-dark));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff; box-shadow: 0 4px 12px var(--cl-accent-glow);
}
.cl-resume-info { flex: 1; min-width: 0; }
.cl-resume-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--cl-accent); }
.cl-resume-name  { font-size: .84rem; font-weight: 600; color: var(--cl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-resume-log-card {
  background: var(--cl-bg2);
  border: 1px solid var(--cl-border2);
  border-radius: var(--cl-radius-sm);
  padding: .9rem 1rem;
}
.cl-resume-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.cl-resume-log-note {
  font-size: .72rem;
  color: var(--cl-text3);
}
.cl-resume-log-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.cl-resume-log-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  background: var(--cl-surface);
  color: var(--cl-text);
  text-align: left;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.cl-resume-log-item:hover {
  border-color: var(--cl-accent);
  transform: translateY(-1px);
}
.cl-resume-log-item.active {
  border-color: var(--cl-accent);
  background: var(--cl-accent-soft);
}
.cl-resume-log-main {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}
.cl-resume-log-time {
  font-size: .74rem;
  color: var(--cl-text3);
}
.cl-resume-log-badges {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--cl-text3);
}
.cl-resume-log-badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(16,185,129,.14);
  color: #34d399;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ============================================================
   IDENTITY / DL DATA  (re-uses share-* classes from styles.css)
   ============================================================ */
.cl-share-note { font-size: .82rem; color: var(--cl-text2); line-height: 1.7; margin-bottom: 1rem; }

/* Override styles.css share classes for dark dashboard */
#dashboard .share-data-list {
  border: 1px solid var(--cl-border2);
  border-radius: var(--cl-radius-sm);
  overflow: hidden;
  background: var(--cl-bg2);
  margin-bottom: 0;
}

#dashboard .share-data-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--cl-border);
}
#dashboard .share-data-row:last-child { border-bottom: none; }

/* Checkbox cell */
#dashboard .share-check {
  display: flex;
  align-items: center;
  padding: 0.85rem 0.75rem 0.85rem 1rem;
  flex-shrink: 0;
}

/* Label + value */
#dashboard .share-row-text {
  flex: 1;
  padding: 0.85rem 0.5rem 0.85rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: nowrap;
  min-width: 0;
  cursor: pointer;
}
#dashboard .share-row-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cl-text);
  white-space: nowrap;
}
#dashboard .share-row-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cl-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Eye / toggle button — visible bordered square */
#dashboard .dl-eye-toggle {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border2);
  border-radius: 7px;
  color: var(--cl-text2);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
#dashboard .dl-eye-toggle:hover {
  border-color: var(--cl-accent);
  color: var(--cl-accent);
  background: var(--cl-accent-soft);
}

/* ── DL History timeline (replaces prev-location-banner) ── */
#dashboard .dl-history-timeline {
  border: 1px solid rgba(99,202,183,.35);
  border-radius: 10px;
  background: rgba(99,202,183,.07);
  padding: .8rem 1rem;
}
#dashboard .dl-hist-title {
  font-size: .75rem; font-weight: 700;
  color: var(--cl-accent); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: .65rem;
}
#dashboard .dl-hist-list {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
/* vertical connecting line */
#dashboard .dl-hist-list::before {
  content: '';
  position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: rgba(99,202,183,.35);
}
#dashboard .dl-hist-step {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .35rem 0;
  position: relative;
}
#dashboard .dl-hist-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: rgba(99,202,183,.3); border: 2px solid var(--cl-accent);
  margin-top: .1rem; position: relative; z-index: 1;
}
#dashboard .dl-hist-dot-current {
  background: var(--cl-accent);
  box-shadow: 0 0 0 3px rgba(99,202,183,.25);
}
#dashboard .dl-hist-info {
  display: flex; flex-direction: column; gap: .1rem;
}
#dashboard .dl-hist-loc {
  font-size: .88rem; font-weight: 600; color: var(--cl-text1);
}
#dashboard .dl-hist-meta {
  font-size: .74rem; color: var(--cl-text3);
}
#dashboard .dl-hist-badge {
  display: inline-block;
  background: var(--cl-accent); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  padding: .1rem .45rem; border-radius: 50px;
  vertical-align: middle; text-transform: uppercase; margin-left: .35rem;
}

/* keep old banner styles for any legacy references */
#dashboard .prev-location-banner {
  border: 1px solid rgba(99,202,183,.35);
  border-radius: 10px;
  background: rgba(99,202,183,.07);
  padding: .8rem 1rem;
}
#dashboard .prev-location-label {
  font-size: .75rem; font-weight: 600;
  color: var(--cl-accent); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: .55rem;
}
#dashboard .prev-location-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
#dashboard .prev-loc-col {
  display: flex; flex-direction: column; flex: 1; min-width: 110px;
}
#dashboard .prev-loc-head { font-size: .7rem; color: var(--cl-text3); margin-bottom: .15rem; }
#dashboard .prev-loc-val  { font-size: .9rem; font-weight: 600; color: var(--cl-text1); }
#dashboard .prev-loc-sub  { font-size: .72rem; color: var(--cl-text3); margin-top: .1rem; }
#dashboard .prev-loc-arrow { color: var(--cl-accent); font-size: 1.1rem; flex-shrink: 0; }
/* ─────────────────────────────────────────────────────────── */

/* Checkbox styling */
#dashboard .share-check .form-check-input {
  width: 1.15rem; height: 1.15rem;
  float: none; display: block;
  margin: 0;
  background-color: var(--cl-surface2);
  border-color: var(--cl-border2);
  border-radius: 4px;
  cursor: pointer;
}
#dashboard .share-check .form-check-input:checked {
  background-color: var(--cl-accent);
  border-color: var(--cl-accent);
}
#dashboard .share-check .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--cl-accent-soft);
  border-color: var(--cl-accent);
}

#dashboard .share-card-note { color: var(--cl-text2); }

/* Share email input */
.cl-share-bar { display: flex; gap: .6rem; align-items: stretch; margin-top: 1.1rem; }
.cl-share-input-wrap { position: relative; flex: 1; }
.cl-share-input-wrap > i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--cl-text3); font-size: 1rem; pointer-events: none;
}
.cl-share-email {
  width: 100%; padding: .72rem 1rem .72rem 2.5rem;
  background: var(--cl-bg2);
  border: 1px solid var(--cl-border2);
  border-radius: 10px; color: var(--cl-text); font-size: .875rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: 'Inter', sans-serif;
  height: 100%;
}
.cl-share-email:focus {
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px var(--cl-accent-soft);
}
.cl-share-email::placeholder { color: var(--cl-text3); }

/* ============================================================
   INLINE ALERTS
   ============================================================ */
.cl-alert {
  border-radius: 8px; padding: .75rem 1rem; font-size: .82rem; font-weight: 500;
  display: none; align-items: flex-start; gap: .5rem;
}
.cl-alert.show { display: flex; }
.cl-alert-success { background: rgba(16,185,129,.1); color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); border-left: 3px solid #10b981; }
.cl-alert-error   { background: rgba(244,63,94,.1);  color: #fca5a5; border: 1px solid rgba(244,63,94,.25); border-left: 3px solid #f43f5e; }

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
.cl-settings-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cl-text3); margin-bottom: .65rem; display: block;
}
.cl-theme-toggle-lg {
  display: inline-flex; align-items: center;
  background: var(--cl-bg2); border: 1px solid var(--cl-border);
  border-radius: 50px; padding: .3rem; gap: .25rem;
}
.cl-theme-opt-lg {
  padding: .45rem 1.1rem; border-radius: 50px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  background: none; border: none; color: var(--cl-text3);
  display: flex; align-items: center; gap: .45rem; transition: all .15s;
}
.cl-theme-opt-lg.active {
  background: var(--cl-surface); color: var(--cl-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.cl-accent-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.cl-accent-btn {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, border-color .15s;
}
.cl-accent-btn:hover { transform: scale(1.2); }
.cl-accent-btn.active { border-color: var(--cl-text); transform: scale(1.15); }

/* ============================================================
   BADGES
   ============================================================ */
.cl-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 50px; font-size: .7rem; font-weight: 700;
}
.cl-badge-success { background: rgba(16,185,129,.15); color: #10b981; }
.cl-badge-warning { background: rgba(245,158,11,.15);  color: #f59e0b; }
.cl-badge-danger  { background: rgba(244,63,94,.15);   color: #f43f5e; }
.cl-badge-info    { background: rgba(14,165,233,.15);  color: #0ea5e9; }
.cl-badge-muted   { background: var(--cl-bg2); color: var(--cl-text3); }
.cl-badge-accent  { background: var(--cl-accent-soft); color: var(--cl-accent); }

/* ============================================================
   BUTTONS
   ============================================================ */
.cl-btn {
  background: linear-gradient(135deg, var(--cl-accent), var(--cl-accent-dark));
  color: #fff; border: none; border-radius: var(--cl-radius-sm);
  padding: .55rem 1.3rem; font-size: .86rem; font-weight: 700;
  cursor: pointer; transition: filter .15s, transform .15s;
  display: inline-flex; align-items: center; gap: .4rem;
  box-shadow: 0 4px 16px var(--cl-accent-glow);
  font-family: 'Inter', sans-serif;
}
.cl-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
.cl-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }

.cl-btn-ghost {
  background: none; border: 1px solid var(--cl-border2);
  color: var(--cl-text2); border-radius: var(--cl-radius-sm);
  padding: .5rem 1.1rem; font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Inter', sans-serif;
}
.cl-btn-ghost:hover { border-color: var(--cl-accent); color: var(--cl-accent); }

.cl-refresh-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; color: var(--cl-accent);
  background: var(--cl-surface2); border: 1px solid var(--cl-border2);
  border-radius: 50px; padding: .4rem .9rem;
  cursor: pointer; transition: all .15s; text-decoration: none;
  font-family: 'Inter', sans-serif;
}
.cl-refresh-btn:hover {
  background: var(--cl-accent-soft); border-color: var(--cl-accent);
  transform: translateY(-1px); color: var(--cl-accent);
}

/* ============================================================
   PROCESSING NOTICE
   ============================================================ */
.cl-processing-notice {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1.1rem; background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2); border-radius: var(--cl-radius-sm);
  font-size: .82rem; color: var(--cl-text2);
}
.cl-processing-notice > i { color: #f59e0b; font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.cl-processing-notice strong { color: #f59e0b; display: block; margin-bottom: .2rem; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.cl-empty { text-align: center; padding: 3rem 1rem; color: var(--cl-text3); }
.cl-empty i { font-size: 2.5rem; margin-bottom: .75rem; display: block; opacity: .4; }
.cl-empty p { font-size: .88rem; }

/* ============================================================
   SPINNER
   ============================================================ */
.cl-spinner {
  width: 20px; height: 20px; border: 2.5px solid var(--cl-border2);
  border-top-color: var(--cl-accent); border-radius: 50%;
  animation: cl-spin .7s linear infinite; display: inline-block;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ============================================================
   BOTTOM BANNER
   ============================================================ */
.cl-bottom-banner {
  position: fixed; bottom: 0; left: var(--cl-sidebar-w); right: 0;
  background: var(--cl-surface); color: var(--cl-text3);
  text-align: center; padding: .55rem 1.5rem;
  font-size: .78rem; z-index: 99;
  border-top: 1px solid var(--cl-border); letter-spacing: .01em;
  transition: left .28s cubic-bezier(.4,0,.2,1);
}

/* On mobile the sidebar slides away, so the banner goes full-width */
@media (max-width: 991px) {
  .cl-bottom-banner { left: 0; }
}

/* ============================================================
   DOCX VIEWER
   ============================================================ */
.cl-docx-wrap {
  overflow-y: auto; max-height: 70vh;
  padding: 1.5rem 2rem;
}
#dashboard .docx-render-area h1,
#dashboard .docx-render-area h2,
#dashboard .docx-render-area h3 { color: var(--cl-text); }
#dashboard .docx-render-area p,
#dashboard .docx-render-area li  { color: var(--cl-text2); }
#dashboard .docx-render-area table { border-collapse: collapse; width: 100%; }
#dashboard .docx-render-area table td,
#dashboard .docx-render-area table th { border: 1px solid var(--cl-border); padding: .4rem .6rem; color: var(--cl-text2); }
#dashboard .docx-render-area table th { background: var(--cl-surface2); color: var(--cl-text); }

/* ============================================================
   LIGHT MODE — component-specific overrides
   ============================================================ */
[data-cl-theme="light"] .cl-profile-banner {
  background: linear-gradient(135deg, #e2e8f0 0%, rgba(14,165,233,.08) 100%);
}
[data-cl-theme="light"] .cl-profile-avatar {
  border-color: #fff;
}
[data-cl-theme="light"] .cl-theme-opt-lg.active,
[data-cl-theme="light"] .cl-theme-opt.active {
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
[data-cl-theme="light"] .cl-accent-btn.active { border-color: #0f172a; }
[data-cl-theme="light"] .cl-accent-swatch.active { border-color: #0f172a; }
[data-cl-theme="light"] .cl-share-email {
  background: #f8fafc; border-color: rgba(0,0,0,.14); color: #0f172a;
}
[data-cl-theme="light"] .cl-share-email::placeholder { color: #94a3b8; }

/* ============================================================
   LANDING PAGE — dark override
   (consultant.css is loaded on app.blade.php which has the white
    .landing-card from styles.css — override it to match the dark
    modal/dashboard theme so the whole page is consistent.)
   ============================================================ */

/* ── Landing top bar (back + theme toggle) ── */
.lp-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.5rem;
  pointer-events: none; /* children are clickable, bar itself is not */
}

.lp-back {
  pointer-events: all;
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.75);
  font-size: .83rem; font-weight: 600;
  text-decoration: none;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50px;
  padding: .38rem 1rem;
  backdrop-filter: blur(10px);
  transition: color .15s, background .15s;
}
.lp-back:hover { color: #fff; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.3); }

/* Light-mode back button */
body.lp-light .lp-back {
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.18);
}
body.lp-light .lp-back:hover { background: rgba(0,0,0,.34); color: #fff; }

/* ── Theme toggle pill (top-right of landing) ── */
.lp-theme-toggle {
  pointer-events: all;
  display: inline-flex; align-items: center;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50px; padding: .25rem;
  gap: .15rem;
  backdrop-filter: blur(10px);
}

.lp-theme-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.5);
  padding: .28rem .65rem; border-radius: 50px;
  font-size: .9rem; display: flex; align-items: center;
  transition: background .15s, color .15s;
}
.lp-theme-btn.active {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.lp-theme-btn:hover:not(.active) { color: rgba(255,255,255,.8); }

#landing-page .landing-wrapper {
  padding-top: 4.5rem; /* clear fixed topbar */
  background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
}
#landing-page .landing-overlay {
  background:
    radial-gradient(ellipse 80% 50% at 10% 60%, rgba(14,165,233,.18) 0%, transparent 60%),
    linear-gradient(145deg, rgba(10,16,40,.97) 0%, rgba(12,28,60,.95) 55%, rgba(10,18,50,.98) 100%);
}

/* Dark glass card — replaces the white .landing-card */
#landing-page .landing-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
/* Top accent stripe */
#landing-page .landing-card::before {
  background: linear-gradient(90deg, #0ea5e9, #818cf8, #0ea5e9);
}
/* Remove the light orb */
#landing-page .landing-card::after { background: transparent; }

/* Trust badge */
#landing-page .landing-trust-badge {
  background: rgba(14,165,233,.1);
  border-color: rgba(255,255,255,.15);
  color: #7dd3fc;
}

/* Heading — white-to-sky gradient */
#landing-page .landing-title {
  background: linear-gradient(135deg, #f1f5f9 5%, #7dd3fc 55%, #bae6fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
#landing-page .landing-subtitle {
  color: rgba(255,255,255,.5);
}

/* Divider */
#landing-page .landing-divider {
  background: linear-gradient(90deg, transparent, rgba(14,165,233,.35), transparent);
}

/* Slogan box */
#landing-page .slogan-section {
  background: rgba(14,165,233,.07);
  border: 1px solid rgba(14,165,233,.18);
  box-shadow: none;
}
#landing-page .slogan-line {
  color: rgba(255,255,255,.68);
}
#landing-page .slogan-line:last-child {
  color: #7dd3fc;
}

/* Register button = accent gradient pill */
#landing-page .auth-link:first-child {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(14,165,233,.38);
}
#landing-page .auth-link:first-child:hover {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(14,165,233,.5);
}
/* Login button = glass outline */
#landing-page .auth-link:last-child {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,.9);
  border: 2px solid rgba(255,255,255,.25);
}
#landing-page .auth-link:last-child:hover {
  background: rgba(255,255,255,.13);
  color: #fff !important;
  border-color: rgba(255,255,255,.45);
}
#landing-page .auth-note { color: rgba(255,255,255,.3); }

/* ── Landing LIGHT mode (body.lp-light) ── */
body.lp-light #landing-page .landing-overlay {
  background:
    radial-gradient(ellipse 80% 50% at 10% 60%, rgba(13,148,136,.15) 0%, transparent 60%),
    linear-gradient(145deg, rgba(15,40,75,.88) 0%, rgba(13,118,110,.80) 60%, rgba(21,40,72,.90) 100%);
}
/* Revert to original white card */
body.lp-light #landing-page .landing-card {
  background: rgba(255,255,255,.98);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 32px 80px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.4);
}
body.lp-light #landing-page .landing-card::before {
  background: linear-gradient(90deg, #0d9488 0%, #3b82f6 50%, #1e3a5f 100%);
}
body.lp-light #landing-page .landing-card::after {
  background: radial-gradient(circle, rgba(13,148,136,.04) 0%, transparent 70%);
}
body.lp-light #landing-page .landing-trust-badge {
  background: rgba(13,148,136,.06);
  border-color: rgba(13,148,136,.2);
  color: #0d9488;
}
body.lp-light #landing-page .landing-title {
  background: linear-gradient(135deg, #0f172a 15%, #1e3a8a 55%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.lp-light #landing-page .landing-subtitle { color: #64748b; }
body.lp-light #landing-page .landing-divider {
  background: linear-gradient(90deg, transparent, rgba(13,148,136,.2), transparent);
}
body.lp-light #landing-page .slogan-section {
  background: rgba(13,148,136,.04);
  border: 1px solid rgba(13,148,136,.12);
}
body.lp-light #landing-page .slogan-line       { color: #0d9488; }
body.lp-light #landing-page .slogan-line:last-child { color: #1e3a8a; }
body.lp-light #landing-page .auth-link:first-child {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff !important; -webkit-text-fill-color: #fff;
  box-shadow: 0 4px 16px rgba(13,148,136,.35);
}
body.lp-light #landing-page .auth-link:first-child:hover { filter: brightness(1.08); box-shadow: 0 8px 24px rgba(13,148,136,.45); }
body.lp-light #landing-page .auth-link:last-child {
  background: transparent;
  color: #0d9488 !important; -webkit-text-fill-color: #0d9488;
  border: 2px solid #0d9488;
}
body.lp-light #landing-page .auth-link:last-child:hover {
  background: #0d9488; color: #fff !important; -webkit-text-fill-color: #fff;
}
body.lp-light #landing-page .auth-note { color: #94a3b8; }

/* Light modals */
body.lp-light .modal-content {
  background: #fff;
  border-color: rgba(0,0,0,.06);
  color: #0f172a;
  box-shadow: 0 40px 100px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
body.lp-light .modal-header {
  background: linear-gradient(135deg, #fafbfc 0%, rgba(13,148,136,.04) 100%);
  border-bottom-color: #e2e8f0;
}
body.lp-light .modal-header .modal-title { color: #1e3a8a; }
body.lp-light .modal-header .modal-title .modal-icon {
  background: rgba(13,148,136,.08); border-color: rgba(13,148,136,.2); color: #0d9488;
}
body.lp-light .modal-header .btn-close { filter: none; opacity: .5; }
body.lp-light .modal-body  { background: #fff; }
body.lp-light .modal-footer { background: #f8fafc; border-top-color: #e2e8f0; }
body.lp-light .modal-body .form-label  { color: #475569; }
body.lp-light .modal-body .form-hint   { color: #94a3b8; }
body.lp-light .form-control, body.lp-light .form-select {
  background: #fff; border-color: #cbd5e1; color: #0f172a;
}
body.lp-light .form-control:focus, body.lp-light .form-select:focus {
  background: #fff; border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.14);
}
body.lp-light .form-control::placeholder { color: #94a3b8; }
body.lp-light .phone-wrapper  { background: #fff; border-color: #cbd5e1; }
body.lp-light .phone-wrapper:focus-within { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
body.lp-light .phone-prefix   { background: #f1f5f9; border-right-color: #cbd5e1; color: #475569; }
body.lp-light .btn-outline-secondary {
  background: #f8fafc !important; border-color: #cbd5e1 !important; color: #64748b !important;
}
body.lp-light .otp-digit {
  background: #f8fafc; border-color: #cbd5e1; color: #1e3a8a;
}
body.lp-light .otp-digit:focus { background: #fff; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
body.lp-light .otp-digit.filled { border-color: #99f6e4; }
body.lp-light .otp-meta         { background: #f8fafc; border-color: #e2e8f0; }
body.lp-light .otp-timer        { color: #64748b; }
body.lp-light .otp-timer .time  { color: #0d9488; }
body.lp-light .otp-input        { background: #f8fafc; border-color: #cbd5e1; color: #1e3a8a; }
body.lp-light .otp-input:focus  { background: #fff; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
body.lp-light .file-upload-zone          { background: #f8fafc; border-color: #cbd5e1; }
body.lp-light .file-upload-zone:hover    { border-color: #0d9488; background: rgba(13,148,136,.04); }
body.lp-light .file-upload-icon          { color: #0d9488; }
body.lp-light .file-upload-text          { color: #64748b; }
body.lp-light .consent-card              { background: rgba(13,148,136,.05); border-color: rgba(13,148,136,.2); }
body.lp-light .privacy-italic-note       { color: #94a3b8; border-top-color: #e2e8f0; }
body.lp-light .form-check-input          { background-color: #fff; border-color: #cbd5e1; }
body.lp-light .form-check-input:checked  { background-color: #0d9488; border-color: #0d9488; }
body.lp-light .form-check-label, body.lp-light .form-check-label * { color: #475569; }
body.lp-light .form-check-label strong   { color: #0f172a; }
body.lp-light .radio-card       { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
body.lp-light .radio-card:hover { border-color: #0d9488; background: rgba(13,148,136,.05); color: #0d9488; }
body.lp-light .radio-card.selected { border-color: #0d9488; background: rgba(13,148,136,.08); color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.1); }
body.lp-light .step-circle       { background: #f1f5f9; border-color: #cbd5e1; color: #94a3b8; }
body.lp-light .step-circle.active { background: #0d9488; border-color: #0d9488; }
body.lp-light .step-circle.done   { background: #10b981; border-color: #10b981; }
body.lp-light .step-label         { color: #94a3b8; }
body.lp-light .step-label.active  { color: #0d9488; }
body.lp-light .step-connector     { background: #e2e8f0; }
body.lp-light .inline-alert-error   { background: #fff1f2; color: #b91c1c; border-color: #fecaca; border-left-color: #ef4444; }
body.lp-light .inline-alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; border-left-color: #22c55e; }
body.lp-light .inline-alert-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; border-left-color: #3b82f6; }
body.lp-light .modal .btn-danger-soft { background: #fff1f2; border-color: #fecaca; color: #dc2626; }
body.lp-light .modal .btn-outline-mid { background: transparent; border-color: #cbd5e1; color: #64748b; }

/* ── Dashboard light theme — modal overrides ──
   Modals live outside #dashboard so data-cl-theme on #dashboard doesn't
   reach them. applyTheme() now also sets the attr on body, so these
   selectors cover all modals when the dashboard is in light mode.    */
body[data-cl-theme="light"] .modal-content {
  background: #fff;
  border-color: rgba(0,0,0,.06);
  color: #0f172a;
  box-shadow: 0 40px 100px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
body[data-cl-theme="light"] .modal-header {
  background: linear-gradient(135deg, #fafbfc 0%, rgba(13,148,136,.04) 100%);
  border-bottom-color: #e2e8f0;
}
body[data-cl-theme="light"] .modal-header .modal-title { color: #1e3a8a; }
body[data-cl-theme="light"] .modal-header .modal-title .modal-icon {
  background: rgba(13,148,136,.08); border-color: rgba(13,148,136,.2); color: #0d9488;
}
body[data-cl-theme="light"] .modal-header .btn-close { filter: none; opacity: .5; }
body[data-cl-theme="light"] .modal-body  { background: #fff; }
body[data-cl-theme="light"] .modal-footer { background: #f8fafc; border-top-color: #e2e8f0; }
body[data-cl-theme="light"] .modal-body .form-label  { color: #475569; }
body[data-cl-theme="light"] .modal-body .form-hint   { color: #94a3b8; }
body[data-cl-theme="light"] .form-control, body[data-cl-theme="light"] .form-select {
  background: #fff; border-color: #cbd5e1; color: #0f172a;
}
body[data-cl-theme="light"] .form-control:focus, body[data-cl-theme="light"] .form-select:focus {
  background: #fff; border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.14);
}
body[data-cl-theme="light"] .form-control::placeholder { color: #94a3b8; }
body[data-cl-theme="light"] .phone-wrapper  { background: #fff; border-color: #cbd5e1; }
body[data-cl-theme="light"] .phone-wrapper:focus-within { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
body[data-cl-theme="light"] .phone-prefix   { background: #f1f5f9; border-right-color: #cbd5e1; color: #475569; }
body[data-cl-theme="light"] .btn-outline-secondary {
  background: #f8fafc !important; border-color: #cbd5e1 !important; color: #64748b !important;
}
body[data-cl-theme="light"] .otp-digit {
  background: #f8fafc; border-color: #cbd5e1; color: #1e3a8a;
}
body[data-cl-theme="light"] .otp-digit:focus { background: #fff; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
body[data-cl-theme="light"] .otp-digit.filled { border-color: #99f6e4; }
body[data-cl-theme="light"] .otp-meta         { background: #f8fafc; border-color: #e2e8f0; }
body[data-cl-theme="light"] .otp-timer        { color: #64748b; }
body[data-cl-theme="light"] .otp-timer .time  { color: #0d9488; }
body[data-cl-theme="light"] .otp-input        { background: #f8fafc; border-color: #cbd5e1; color: #1e3a8a; }
body[data-cl-theme="light"] .otp-input:focus  { background: #fff; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.14); }
body[data-cl-theme="light"] .file-upload-zone          { background: #f8fafc; border-color: #cbd5e1; }
body[data-cl-theme="light"] .file-upload-zone:hover    { border-color: #0d9488; background: rgba(13,148,136,.04); }
body[data-cl-theme="light"] .file-upload-icon          { color: #0d9488; }
body[data-cl-theme="light"] .file-upload-text          { color: #64748b; }
body[data-cl-theme="light"] .consent-card              { background: rgba(13,148,136,.05); border-color: rgba(13,148,136,.2); }
body[data-cl-theme="light"] .privacy-italic-note       { color: #94a3b8; border-top-color: #e2e8f0; }
body[data-cl-theme="light"] .form-check-input          { background-color: #fff; border-color: #cbd5e1; }
body[data-cl-theme="light"] .form-check-input:checked  { background-color: #0d9488; border-color: #0d9488; }
body[data-cl-theme="light"] .form-check-label, body[data-cl-theme="light"] .form-check-label * { color: #475569; }
body[data-cl-theme="light"] .form-check-label strong   { color: #0f172a; }
body[data-cl-theme="light"] .radio-card       { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
body[data-cl-theme="light"] .radio-card:hover { border-color: #0d9488; background: rgba(13,148,136,.05); color: #0d9488; }
body[data-cl-theme="light"] .radio-card.selected { border-color: #0d9488; background: rgba(13,148,136,.08); color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.1); }
body[data-cl-theme="light"] .step-circle       { background: #f1f5f9; border-color: #cbd5e1; color: #94a3b8; }
body[data-cl-theme="light"] .step-circle.active { background: #0d9488; border-color: #0d9488; }
body[data-cl-theme="light"] .step-circle.done   { background: #10b981; border-color: #10b981; }
body[data-cl-theme="light"] .step-label         { color: #94a3b8; }
body[data-cl-theme="light"] .step-label.active  { color: #0d9488; }
body[data-cl-theme="light"] .step-connector     { background: #e2e8f0; }
body[data-cl-theme="light"] .inline-alert-error   { background: #fff1f2; color: #b91c1c; border-color: #fecaca; border-left-color: #ef4444; }
body[data-cl-theme="light"] .inline-alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; border-left-color: #22c55e; }
body[data-cl-theme="light"] .inline-alert-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; border-left-color: #3b82f6; }
body[data-cl-theme="light"] .modal .btn-danger-soft { background: #fff1f2; border-color: #fecaca; color: #dc2626; }
body[data-cl-theme="light"] .modal .btn-outline-mid { background: transparent; border-color: #cbd5e1; color: #64748b; }
/* QR modal specific: step items & privacy box in light mode */
body[data-cl-theme="light"] #verificationQrModal .modal-body p  { color: #475569 !important; }
body[data-cl-theme="light"] #verificationQrModal .modal-body h6 { color: #1e3a8a !important; }
body[data-cl-theme="light"] #verificationQrModal .qr-step-item  { background: #f8fafc; border-color: #e2e8f0; }
body[data-cl-theme="light"] #verificationQrModal .qr-step-text  { color: #475569 !important; }
body[data-cl-theme="light"] #verificationQrModal .privacy-box   { background: rgba(13,148,136,.05); border-left-color: #0d9488; color: #475569; }
body[data-cl-theme="light"] #verificationQrModal .privacy-box p { color: #475569 !important; }
body[data-cl-theme="light"] #verificationQrModal hr             { border-color: #e2e8f0 !important; }
/* Register modal section headings in light mode */
body[data-cl-theme="light"] #registrationModal .modal-body h6   { color: #0d9488 !important; }
/* Viewer modal header badges in light mode */
body[data-cl-theme="light"] #docxViewerModal  .modal-header .btn.btn-sm,
body[data-cl-theme="light"] #resumeViewerModal .modal-header .btn.btn-sm {
  background: rgba(13,148,136,.07)  !important;
  color:       #0d9488              !important;
  border-color: rgba(13,148,136,.25) !important;
}


/* ============================================================
   SIDEBAR OVERLAY (mobile)
   ============================================================ */
.cl-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 199;
  backdrop-filter: blur(2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .cl-sidebar { transform: translateX(calc(-1 * var(--cl-sidebar-w))); }
  .cl-sidebar.open { transform: translateX(0); box-shadow: var(--cl-shadow-lg); }
  .cl-sidebar-overlay.open { display: block; }
  .cl-topbar { left: 0; }
  .cl-main   { margin-left: 0; }
  .cl-topbar-hamburger { display: flex; }
  /* Compact accent swatches on tablets */
  .cl-accent-swatches { gap: .28rem; }
  .cl-accent-swatch { width: 17px; height: 17px; }
}

@media (max-width: 767px) {
  /* Dashboard content */
  .cl-content { padding: 1rem 1rem 3.5rem; }
  .cl-share-bar { flex-direction: column; }
  /* Hide accent picker from topbar on mobile (available in Settings) */
  .cl-accent-swatches { display: none; }
  .cl-verify-body { flex-direction: column; }
  .cl-verify-actions { width: 100%; }
  .cl-verify-action { width: 100%; justify-content: center; }
  .cl-verify-action.link-done { white-space: normal; text-align: center; }
  /* Card padding */
  .cl-card-body { padding: 1.1rem; }
  /* Info rows text wrap */
  .cl-info-value { word-break: break-word; overflow-wrap: break-word; text-align: right; }
  /* Landing page card */
  #landing-page .landing-card { padding: 2.5rem 1.75rem; }
  #landing-page .landing-card::before { margin: -2.5rem -1.75rem 2rem; }
  #landing-page .auth-links { gap: .75rem; }
  #landing-page .auth-link { padding: .72rem 1.75rem; font-size: .92rem; min-width: 120px; }
}

@media (max-width: 575px) {
  /* Topbar: strip text from sign-out to save space */
  .cl-topbar { padding: 0 .9rem; gap: .5rem; }
  .cl-topbar-btn .d-none { display: none !important; }
  /* Hide UID badge from topbar — visible in Settings */
  .cl-uid-badge { display: none !important; }
  /* Compact theme toggle */
  .cl-theme-toggle { gap: 0; }
  .cl-theme-opt { padding: .3rem .6rem; font-size: .8rem; }
  /* Profile card */
  .cl-profile-banner { height: 72px; }
  .cl-profile-avatar { width: 58px; height: 58px; font-size: 1.25rem; margin-top: -29px; }
  /* Verify action when done — long text wraps cleanly */
  .cl-verify-action.link-done { font-size: .78rem; padding: .55rem .85rem; }
  /* Resume card */
  .cl-resume-card { flex-wrap: wrap; gap: .6rem; }
  /* Landing page */
  #landing-page .landing-card { padding: 2.2rem 1.25rem 2rem; }
  #landing-page .landing-card::before { margin: -2.2rem -1.25rem 1.8rem; }
  #landing-page .landing-title { font-size: 1.5rem; }
  #landing-page .landing-subtitle { font-size: .82rem; }
  #landing-page .auth-links { flex-direction: column; align-items: stretch; gap: .6rem; }
  #landing-page .auth-link { text-align: center; min-width: unset; padding: .75rem 1rem; }
  /* Modals */
  .modal-dialog { margin: .5rem; }
  .modal-body { padding: 1.25rem; }
  .modal-footer { padding: .8rem 1.25rem; }
  /* OTP */
  .otp-digit { width: 40px; height: 50px; font-size: 1.35rem; border-radius: 10px; }
  .otp-digits-row { gap: .3rem; }
}


/* ============================================================
   MODALS — Dark theme overrides
   (consultant.css is only loaded on app.blade.php, so these
    do not affect any other page in the project.)
   ============================================================ */

/* ── Modal shell ── */
.modal-content {
  background: #1a2138;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);
  color: var(--cl-text);
}

/* ── Header ── */
.modal-header {
  background: linear-gradient(135deg, #1a2138 0%, rgba(14,165,233,.07) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-header .modal-title { color: var(--cl-text); }
.modal-header .modal-title .modal-icon {
  background: rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.22);
  color: var(--cl-accent);
  box-shadow: 0 0 12px rgba(14,165,233,.18);
}
.modal-header .btn-close { filter: invert(1) brightness(0.55); opacity: .55; }
.modal-header .btn-close:hover { opacity: 1; }

/* ── Body ── */
.modal-body { background: #1a2138; }

/* ── Footer ── */
.modal-footer {
  background: #141928;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Backdrop ── */
.modal-backdrop.show { opacity: 0.72; }

/* ── Inline alerts ── */
.inline-alert-error {
  background: rgba(244,63,94,.09); color: #fca5a5;
  border: 1px solid rgba(244,63,94,.22); border-left: 3px solid #f43f5e;
}
.inline-alert-success {
  background: rgba(16,185,129,.09); color: #6ee7b7;
  border: 1px solid rgba(16,185,129,.22); border-left: 3px solid #10b981;
}
.inline-alert-info {
  background: rgba(14,165,233,.09); color: #7dd3fc;
  border: 1px solid rgba(14,165,233,.22); border-left: 3px solid #0ea5e9;
}
.inline-alert-demo {
  background: rgba(245,158,11,.09); color: #fde68a;
  border: 1px solid rgba(245,158,11,.22); border-left: 3px solid #f59e0b;
}

/* ── Form labels & hints ── */
.modal-body .form-label { color: var(--cl-text2); }
.modal-body .form-hint,
.modal-body .form-hint.italic-note { color: var(--cl-text3); }

/* ── Text inputs / selects ── */
.form-control, .form-select {
  background: #141928;
  border-color: rgba(255,255,255,.14);
  color: var(--cl-text);
}
.form-control:focus, .form-select:focus {
  background: #1e2540;
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
  color: var(--cl-text);
}
.form-control::placeholder { color: #475569; }
.form-control.is-invalid   { border-color: #f43f5e; background: rgba(244,63,94,.05); }
.form-control.is-valid     { border-color: #10b981; }
.invalid-feedback          { color: #fca5a5; }

/* ── Input-group password toggle ── */
.btn-outline-secondary {
  background: #1e2540 !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #64748b !important;
}
.btn-outline-secondary:hover {
  background: #252d54 !important;
  border-color: rgba(255,255,255,.22) !important;
  color: var(--cl-text) !important;
}

/* ── Phone wrapper ── */
.phone-wrapper {
  background: #141928;
  border-color: rgba(255,255,255,.14);
}
.phone-wrapper:focus-within {
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.phone-wrapper.is-invalid { border-color: #f43f5e; }
.phone-prefix {
  background: #1e2540;
  border-right-color: rgba(255,255,255,.14);
  color: #94a3b8;
}

/* ── 6-digit OTP boxes ── */
.otp-digit {
  background: #141928;
  border-color: rgba(255,255,255,.16);
  color: var(--cl-text);
}
.otp-digit:focus {
  border-color: var(--cl-accent);
  background: #1e2540;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.otp-digit.filled   { border-color: rgba(14,165,233,.4); }
.otp-digit.is-invalid { border-color: #f43f5e; background: rgba(244,63,94,.06); }
.otp-sep { background: rgba(255,255,255,.16); }

/* ── OTP meta bar ── */
.otp-meta {
  background: #141928;
  border-color: rgba(255,255,255,.08);
}
.otp-timer { color: #64748b; }
.otp-timer .time { color: var(--cl-accent); }
.otp-timer .time.urgent { color: #f43f5e; }
.otp-attempts { color: #475569; }

/* ── Single-field OTP (reset password) ── */
.otp-input {
  background: #141928;
  border-color: rgba(255,255,255,.16);
  color: var(--cl-text);
}
.otp-input:focus {
  border-color: var(--cl-accent);
  background: #1e2540;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}

/* ── File upload zone ── */
.file-upload-zone {
  background: #141928;
  border-color: rgba(255,255,255,.14);
}
.file-upload-zone:hover {
  border-color: var(--cl-accent);
  background: rgba(14,165,233,.05);
}
.file-upload-zone.has-file {
  border-color: #10b981;
  background: rgba(16,185,129,.06);
}
.file-upload-icon { color: var(--cl-accent); }
.file-upload-text { color: #64748b; }
.file-name-badge {
  background: rgba(16,185,129,.12);
  color: #6ee7b7;
  border-color: rgba(16,185,129,.25);
}

/* ── Consent card ── */
.consent-card {
  background: rgba(14,165,233,.06);
  border-color: rgba(14,165,233,.22);
}
.privacy-italic-note {
  color: #475569;
  border-top-color: rgba(255,255,255,.08);
}

/* ── Form check ── */
.form-check-input {
  background-color: #1e2540;
  border-color: rgba(255,255,255,.2);
}
.form-check-input:checked {
  background-color: var(--cl-accent);
  border-color: var(--cl-accent);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(14,165,233,.18); }
.form-check-label,
.form-check-label * { color: var(--cl-text2); }
.form-check-label strong { color: var(--cl-text); }

/* ── Reset password — radio cards ── */
.radio-card {
  background: #1e2540;
  border-color: rgba(255,255,255,.10);
  color: var(--cl-text2);
}
.radio-card:hover {
  border-color: var(--cl-accent);
  background: rgba(14,165,233,.07);
  color: var(--cl-accent);
}
.radio-card.selected {
  border-color: var(--cl-accent);
  background: rgba(14,165,233,.10);
  color: var(--cl-accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,.14);
}

/* ── Registration step indicator ── */
.step-circle {
  background: #1e2540;
  border-color: rgba(255,255,255,.12);
  color: #475569;
}
.step-circle.active { background: var(--cl-accent); border-color: var(--cl-accent); color: #fff; }
.step-circle.done   { background: #10b981; border-color: #10b981; color: #fff; }
.step-label         { color: #475569; }
.step-label.active  { color: var(--cl-accent); }
.step-connector     { background: rgba(255,255,255,.10); }
.step-connector.done { background: #10b981; }

/* ── QR code (keep white so the QR is scannable) ── */
.qr-container { background: #fff; border-color: rgba(255,255,255,.12); }

/* ── Secondary / danger buttons inside modals ── */
.modal .btn-danger-soft {
  background: rgba(244,63,94,.10);
  border-color: rgba(244,63,94,.22);
  color: #f87171;
}
.modal .btn-danger-soft:hover {
  background: rgba(244,63,94,.18);
  border-color: rgba(244,63,94,.35);
  color: #fca5a5;
}
.modal .btn-outline-mid {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  color: var(--cl-text2);
}
.modal .btn-outline-mid:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
  color: var(--cl-text);
}

/* ── Debug OTP banners (dev mode) ── */
#otpDebugBanner, #resetOtpDebugBanner {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.25) !important;
  color: #fde68a !important;
}

/* ── QR modal — dark-theme visibility fixes ──
   modal-qr.blade.php uses inline styles with light-theme vars
   (--blue-deep = #1e3a5f, --gray-500 = #64748b) that are invisible
   on the dark modal background (#1a2138). Override them here.       */

/* All paragraph / heading text inside the QR modal body */
#verificationQrModal .modal-body h6 { color: var(--cl-text) !important; }
#verificationQrModal .modal-body p  { color: var(--cl-text2) !important; }

/* Make the prominent "Scan this code..." instruction a bit brighter */
#qrDesktopView .col-md-7 > p:first-of-type { color: var(--cl-text) !important; }

/* Dividers */
#verificationQrModal hr { border-color: rgba(255,255,255,.1) !important; }

/* QR step items — replace the light grey card (#f9fafb) with a dark surface */
#verificationQrModal .qr-step-item {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
}
#verificationQrModal .qr-step-item:hover {
  background: rgba(14,165,233,.09);
  border-color: rgba(14,165,233,.22);
}
#verificationQrModal .qr-step-text          { color: var(--cl-text2) !important; }
#verificationQrModal .qr-step-text strong   { color: var(--cl-text)  !important; }

/* Privacy box — replace light card with dark-accent surface */
#verificationQrModal .privacy-box {
  background: rgba(14,165,233,.06);
  border-left-color: var(--cl-accent);
  color: var(--cl-text2);
}
#verificationQrModal .privacy-box p        { color: var(--cl-text2) !important; }
#verificationQrModal .privacy-box strong   { color: var(--cl-text)  !important; }

/* ── Registration modal — section headings & hint text ── */
#registrationModal .modal-dialog {
  max-width: 760px;
}

#registrationModal .modal-body h6   { color: var(--cl-accent)  !important; }
#registrationModal .modal-body span[style*="gray-400"],
#registrationModal .modal-body small { color: var(--cl-text3) !important; }
#registrationModal .modal-body div[style*="gray-500"] { color: var(--cl-text3) !important; }

/* Password step does not need the full modal width */
#registrationModal #regStep2 {
  max-width: 620px;
  margin: 0 auto;
}

/* ── OTP modal — hint paragraphs ── */
#otpModal .modal-body p { color: var(--cl-text2) !important; }

/* ── DOCX / PDF viewer modals — header title & download badge ── */
#docxViewerModal  .modal-title,
#resumeViewerModal .modal-title { color: var(--cl-text) !important; }

#docxViewerModal  .modal-header .btn.btn-sm,
#resumeViewerModal .modal-header .btn.btn-sm {
  background: rgba(14,165,233,.1)  !important;
  color:       var(--cl-accent)    !important;
  border-color: rgba(14,165,233,.28) !important;
}
#docxViewerModal  .modal-header .btn.btn-sm:hover,
#resumeViewerModal .modal-header .btn.btn-sm:hover {
  background: rgba(14,165,233,.2)  !important;
}

/* Loading / error state text inside viewer modals */
#docxViewerLoading  { color: var(--cl-text3) !important; }
#docxViewerErrorMsg { color: var(--cl-text2) !important; }