/* ============================================================
   VisitApp — Modern Glass Design System v2
   Glassmorphism · 50px pill cards · Generous breathing room
   GL = #1e40af | MS = #c2410c
   Fonts: Barlow Semi Condensed + IBM Plex Sans
   ============================================================ */

:root {
  --navy:       #0f2445;
  --navy-dark:  #080f1e;
  --navy-light: #1a3560;
  --gl:         #1e40af;
  --gl-light:   #dbeafe;
  --gl-glow:    rgba(30,64,175,0.18);
  --ms:         #c2410c;
  --ms-light:   #ffedd5;
  --ms-glow:    rgba(194,65,12,0.18);
  --success:    #059669;
  --success-lt: #d1fae5;
  --warn:       #d97706;
  --warn-lt:    #fef3c7;
  --text:       #1e293b;
  --text-muted: #64748b;
  --border:     rgba(255,255,255,0.55);

  /* ── Modern rounded corners ── */
  --radius-pill: 50px;
  --radius-card: 28px;
  --radius-input: 18px;
  --radius-sm:   14px;
  --radius-tag:  50px;

  /* ── Glass layers ── */
  --glass-bg:       rgba(255,255,255,0.72);
  --glass-bg-dark:  rgba(9,23,41,0.82);
  --glass-border:   1px solid rgba(255,255,255,0.55);
  --glass-blur:     blur(18px);

  /* ── Shadows ── */
  --shadow:     0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-md:  0 12px 40px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.07);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .9rem;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(30,64,175,0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(194,65,12,0.07) 0%, transparent 55%),
    linear-gradient(165deg, #eef2ff 0%, #f8fafc 50%, #fff8f5 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.vapp-page-title,.brand-label {
  font-family: 'Barlow Semi Condensed', sans-serif;
}

/* ── Navbar ───────────────────────────────────────────────── */
.vapp-nav {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: .65rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
}

.navbar-brand { color: #e2e8f0 !important; text-decoration: none; }

.brand-gl   { color: #60a5fa; font-family: 'Barlow Semi Condensed',sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:-.03em; }
.brand-sep  { color: rgba(255,255,255,.25); margin: 0 3px; }
.brand-ms   { color: #fb923c; font-family: 'Barlow Semi Condensed',sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:-.03em; }
.brand-label{ color: rgba(255,255,255,.6); font-family:'Barlow Semi Condensed',sans-serif; font-size:.95rem; font-weight:500; letter-spacing:.04em; margin-left:6px; }

.vapp-nav .nav-link {
  color: rgba(255,255,255,.72) !important;
  font-size: .875rem;
  padding: .45rem .9rem !important;
  border-radius: var(--radius-pill);
  transition: all .2s ease;
}
.vapp-nav .nav-link:hover  { color: #fff !important; background: rgba(255,255,255,.10); }
.vapp-nav .nav-link.active { color: #fff !important; background: rgba(255,255,255,.15); }
.nav-user { color: rgba(255,255,255,.5); font-size:.8rem; padding: .4rem .5rem; }

/* ── Flash Messages ──────────────────────────────────────── */
.vapp-messages { position: fixed; top: 70px; right: 16px; z-index: 2000; width: min(400px, 90vw); }
.flash-msg {
  border-radius: var(--radius-card);
  margin-bottom: 10px;
  font-size: .875rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  transition: opacity .3s;
}
.flash-msg.alert-success { background: rgba(5,150,105,.85);  color: #fff; }
.flash-msg.alert-danger  { background: rgba(185,28,28,.85);  color: #fff; }
.flash-msg.alert-warning { background: rgba(180,83,9,.85);   color: #fff; }

/* ── Main / Footer ───────────────────────────────────────── */
.vapp-main   { flex: 1; padding-bottom: 2rem; }
.vapp-footer {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  color: rgba(255,255,255,.4);
  font-size: .8rem;
  padding: 1rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Glass Card ──────────────────────────────────────────── */
.vapp-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.vapp-card-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: rgba(255,255,255,.92);
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
}

.vapp-page-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.vapp-section-head {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vapp-divider { border-color: rgba(0,0,0,.07); margin: 1.1rem 0; }
.vapp-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 5px;
  display: block;
}

/* ── Form Controls ───────────────────────────────────────── */
.vapp-input {
  background: rgba(255,255,255,.85);
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: var(--radius-input);
  color: var(--text);
  font-size: .875rem;
  padding: .55rem 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.vapp-input:focus {
  background: #fff;
  border-color: var(--gl);
  box-shadow: 0 0 0 4px var(--gl-glow);
  outline: none;
}
.vapp-select {
  background: rgba(255,255,255,.85);
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: var(--radius-input);
  font-size: .875rem;
  padding: .5rem 1rem;
  appearance: auto;
  transition: border-color .2s, box-shadow .2s;
}
.vapp-select:focus {
  border-color: var(--gl);
  box-shadow: 0 0 0 4px var(--gl-glow);
}
.vapp-input-icon {
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: var(--radius-input) !important;
  color: var(--text-muted);
}

/* ── Buttons ─────────────────────────────────────────────── */
.vapp-btn-primary {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border: none;
  color: #fff;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: .7rem 1.8rem;
  box-shadow: 0 4px 20px rgba(15,36,69,.3);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.vapp-btn-primary:hover  { color:#fff; opacity:.9; box-shadow: 0 6px 28px rgba(15,36,69,.4); transform:translateY(-1px); }
.vapp-btn-primary:active { transform: scale(.97); }

.vapp-btn-secondary {
  background: rgba(100,116,139,.15);
  border: 1.5px solid rgba(100,116,139,.25);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  font-weight: 600;
  padding: .55rem 1.2rem;
  transition: .2s;
}
.vapp-btn-secondary:hover { background: rgba(100,116,139,.25); color: var(--text); }

.vapp-btn-outline {
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(15,36,69,.18);
  color: var(--navy);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  backdrop-filter: blur(8px);
  transition: .2s;
}
.vapp-btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.vapp-btn-add {
  background: rgba(30,64,175,.08);
  border: 1.5px dashed rgba(30,64,175,.35);
  color: var(--gl);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--radius-pill);
  padding: .25rem .8rem;
  transition: .2s;
}
.vapp-btn-add:hover { background: var(--gl-light); border-color: var(--gl); border-style:solid; }

.vapp-btn-gl {
  background: rgba(30,64,175,.1);
  border: 1.5px solid rgba(30,64,175,.3);
  color: var(--gl);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing:.03em;
  border-radius: var(--radius-pill);
  padding: .3rem .85rem;
  transition: .2s;
}
.vapp-btn-gl:hover { background: var(--gl); color: #fff; }

.vapp-btn-ms {
  background: rgba(194,65,12,.1);
  border: 1.5px solid rgba(194,65,12,.3);
  color: var(--ms);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing:.03em;
  border-radius: var(--radius-pill);
  padding: .3rem .85rem;
  transition: .2s;
}
.vapp-btn-ms:hover { background: var(--ms); color: #fff; }

.vapp-btn-icon {
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(0,0,0,.09);
  color: var(--text-muted);
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  transition: .2s;
}
.vapp-btn-icon:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.btn-xs { font-size:.78rem; padding:.2rem .6rem; }

/* ── Repeatable row sections ─────────────────────────────── */
.repeat-section { margin: .5rem 0; }
.repeat-header  { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.repeat-body    { display:flex; flex-direction:column; gap:.5rem; }

.repeat-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  animation: rowSlideIn .22s ease both;
}

@keyframes rowSlideIn {
  from { opacity:0; transform:translateY(-8px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.remove-btn {
  background: rgba(220,38,38,.08);
  border: 1.5px solid rgba(220,38,38,.25);
  color: #dc2626;
  border-radius: var(--radius-pill);
  padding: .28rem .6rem;
  font-size: .8rem;
  flex-shrink: 0;
  transition: .2s;
  line-height: 1;
}
.remove-btn:hover { background: #dc2626; color: #fff; }

/* ── Product rows ────────────────────────────────────────── */
.product-row {
  border: 1.5px solid rgba(0,0,0,.07);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  animation: rowSlideIn .22s ease both;
  transition: box-shadow .2s;
}
.product-row:hover  { box-shadow: var(--shadow); }
.product-row.product-gl { border-left: 4px solid var(--gl); }
.product-row.product-ms { border-left: 4px solid var(--ms); }

/* ── Badges & Tags ───────────────────────────────────────── */
.badge-gl {
  display: inline-block;
  background: var(--gl-light);
  color: var(--gl);
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .1em;
  padding: .15rem .55rem;
  border-radius: var(--radius-tag);
}
.badge-ms {
  display: inline-block;
  background: var(--ms-light);
  color: var(--ms);
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .1em;
  padding: .15rem .55rem;
  border-radius: var(--radius-tag);
}
.tag-gl   { background:var(--gl-light);   color:var(--gl);     font-size:.72rem; font-weight:700; padding:.18rem .55rem; border-radius:var(--radius-tag); }
.tag-ms   { background:var(--ms-light);   color:var(--ms);     font-size:.72rem; font-weight:700; padding:.18rem .55rem; border-radius:var(--radius-tag); }
.tag-done { background:var(--success-lt); color:var(--success); font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:var(--radius-tag); }
.tag-ocr  { font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:var(--radius-tag); }
.ocr-queued     { background:var(--warn-lt);   color:var(--warn); }
.ocr-processing { background:#ede9fe; color:#6d28d9; }
.ocr-done       { background:var(--success-lt); color:var(--success); }
.ocr-failed     { background:#fee2e2; color:#991b1b; }

/* ── Status Badges ───────────────────────────────────────── */
.status-badge { font-size:.7rem; font-weight:800; padding:.22rem .65rem; border-radius:var(--radius-tag); letter-spacing:.07em; text-transform:uppercase; }
.status-new        { background:#f1f5f9; color:#475569; }
.status-contacted  { background:var(--gl-light); color:var(--gl); }
.status-quote_sent { background:var(--warn-lt); color:#92400e; }
.status-converted  { background:var(--success-lt); color:var(--success); }
.status-lost       { background:#fee2e2; color:#991b1b; }

/* ── Table ───────────────────────────────────────────────── */
.vapp-table { font-size:.875rem; }
.vapp-table thead th {
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:.77rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted);
  border-bottom:1px solid rgba(0,0,0,.07);
  background:rgba(248,250,252,.6);
  padding:.8rem 1rem;
}
.vapp-table tbody td {
  padding:.7rem 1rem;
  vertical-align:middle;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.vapp-table tbody tr { transition: background .15s; }
.vapp-table tbody tr:hover { background:rgba(30,64,175,.03); }
.vapp-table-name { color:var(--navy); font-weight:700; text-decoration:none; }
.vapp-table-name:hover { color:var(--gl); text-decoration:underline; }
.fw-600 { font-weight:600; }

/* ── Star rating ─────────────────────────────────────────── */
.star-rating { display:flex; gap:6px; }
.star-btn {
  background:none; border:none;
  font-size:1.5rem;
  color: rgba(0,0,0,.12);
  cursor:pointer; padding:0 1px; line-height:1;
  transition: color .12s, transform .12s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}
.star-btn:hover,
.star-btn.active { color:#f59e0b; transform:scale(1.2); }

/* ── Card image previews ─────────────────────────────────── */
.card-preview {
  width:100%; max-height:150px; object-fit:cover;
  border-radius: var(--radius-sm);
  border: var(--glass-border);
  margin-top:.5rem;
  box-shadow: var(--shadow);
}
.card-preview-sm {
  width:100%; max-height:130px; object-fit:contain;
  border-radius: var(--radius-sm);
  border: var(--glass-border);
  box-shadow: var(--shadow);
}
.selfie-thumb { border-radius:50%; width:84px; height:84px; object-fit:cover; box-shadow:var(--shadow-md); }

/* ── Selfie camera ───────────────────────────────────────── */
.selfie-video { width:100%; border-radius:var(--radius-card); background:#000; }

/* ── Modal ───────────────────────────────────────────────── */
.vapp-modal {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-card);
  color: #e2e8f0;
}
.vapp-modal .modal-header { border-color:rgba(255,255,255,.1); padding:1.25rem 1.5rem; }
.vapp-modal .modal-footer { border-color:rgba(255,255,255,.1); padding:.85rem 1.5rem; }

/* ── OCR pre ─────────────────────────────────────────────── */
.ocr-pre {
  font-size:.75rem; max-height:180px; overflow:auto;
  background:rgba(241,245,249,.6);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  padding:.75rem 1rem;
  white-space:pre-wrap; word-break:break-word;
}

/* ── Email Queue rows ────────────────────────────────────── */
.eq-row { display:flex; align-items:center; gap:.6rem; padding:.7rem 1.25rem; border-bottom:1px solid rgba(0,0,0,.05); font-size:.83rem; }
.eq-row:last-child { border-bottom:none; }
.eq-status { font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; }
.eq-queued  { color:var(--warn); }
.eq-sent    { color:var(--success); }
.eq-failed  { color:#dc2626; }

/* ── Stat Cards ──────────────────────────────────────────── */
.stat-card {
  border-radius: var(--radius-card);
  padding:1.4rem 1.5rem;
  display:flex; flex-direction:column; gap:.35rem;
  box-shadow: var(--shadow-md);
  position:relative; overflow:hidden;
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.stat-card::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events:none;
}
.stat-icon  { font-size:1.5rem; opacity:.75; }
.stat-val   { font-family:'Barlow Semi Condensed',sans-serif; font-size:2.25rem; font-weight:700; line-height:1; }
.stat-label { font-size:.75rem; opacity:.75; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.stat-card-navy { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%); color:#fff; }
.stat-card-gl   { background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%); color:#fff; }
.stat-card-ms   { background:linear-gradient(135deg,#c2410c 0%,#f97316 100%); color:#fff; }
.stat-card-green{ background:linear-gradient(135deg,#047857 0%,#10b981 100%); color:#fff; }

/* ── Resources ───────────────────────────────────────────── */
.resource-card { border-radius:var(--radius-card); overflow:hidden; }
.resource-card-header {
  padding:.85rem 1.25rem;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:.9rem;
  background:rgba(248,250,252,.6);
  border-bottom:1px solid rgba(0,0,0,.07);
  letter-spacing:.04em;
}
.resource-gl .resource-card-header { border-left:4px solid var(--gl); }
.resource-ms .resource-card-header { border-left:4px solid var(--ms); }
.resource-iframe-wrap { width:100%; aspect-ratio:16/9; }
.resource-iframe { width:100%; height:100%; border:none; }

/* ── Legend ─────────────────────────────────────────────── */
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.dot-gl { background:var(--gl); }
.dot-ms { background:var(--ms); }

/* ── Login page ──────────────────────────────────────────── */
.login-page {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(30,64,175,.22) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(194,65,12,.16) 0%,transparent 55%),
    linear-gradient(160deg, #080f1e 0%, #0f2445 100%);
  background-attachment: fixed;
}

.login-wrapper { display:flex; min-height:100vh; }

.login-brand {
  flex:0 0 44%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3.5rem 3rem;
  position:relative; overflow:hidden;
}
.login-brand::before {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    -55deg,
    transparent, transparent 60px,
    rgba(255,255,255,.025) 60px, rgba(255,255,255,.025) 61px
  );
}

.brand-mark    { display:flex; align-items:baseline; gap:4px; margin-bottom:1.75rem; }
.brand-gl-lg   { font-family:'Barlow Semi Condensed',sans-serif; font-size:4.5rem; font-weight:700; color:#60a5fa; line-height:1; }
.brand-slash   { font-size:3.2rem; color:rgba(255,255,255,.2); font-weight:200; }
.brand-ms-lg   { font-family:'Barlow Semi Condensed',sans-serif; font-size:4.5rem; font-weight:700; color:#fb923c; line-height:1; }
.login-tagline { font-family:'Barlow Semi Condensed',sans-serif; font-size:2.4rem; font-weight:700; color:rgba(255,255,255,.9); text-align:center; line-height:1.12; }
.login-tagline span { color:#60a5fa; }
.login-sub     { color:rgba(255,255,255,.38); font-size:.85rem; margin-top:.6rem; text-align:center; }
.login-dots    { display:flex; gap:10px; margin-top:2.5rem; }
.dot           { width:13px; height:13px; border-radius:50%; }
.dot-gl        { background:var(--gl); animation:dotPulse 2s infinite ease-in-out; }
.dot-ms        { background:var(--ms); animation:dotPulse 2s .8s infinite ease-in-out; }
@keyframes dotPulse { 0%,100%{opacity:.3;transform:scale(.9);}50%{opacity:1;transform:scale(1.1);} }

.login-form-panel {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(24px);
  padding:2.5rem 2rem;
  border-left: 1px solid rgba(255,255,255,.07);
}

.login-card {
  width:100%; max-width:400px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: calc(var(--radius-card) + 8px);
  padding: 2.5rem 2rem;
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
}

.login-card-title { font-family:'Barlow Semi Condensed',sans-serif; font-size:2rem; font-weight:700; color:#f1f5f9; }
.login-card-sub   { font-size:.82rem; color:rgba(255,255,255,.42); }

.login-card .vapp-label   { color:rgba(255,255,255,.55); }
.login-card .vapp-input   { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#f1f5f9; }
.login-card .vapp-input::placeholder { color:rgba(255,255,255,.3); }
.login-card .vapp-input:focus { background:rgba(255,255,255,.13); border-color:rgba(96,165,250,.7); box-shadow:0 0 0 4px rgba(96,165,250,.12); }
.login-card .vapp-input-icon { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.4); }

@media (max-width:640px){
  .login-brand { display:none; }
  .login-form-panel { background:transparent; border:none; }
  .login-card { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1); }
}

/* ── Dropdown menu ───────────────────────────────────────── */
.dropdown-menu {
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding: .35rem !important;
}
.dropdown-item { border-radius: 8px !important; padding:.55rem .85rem !important; font-size:.875rem; transition:.15s; }
.dropdown-item:hover { background:rgba(255,255,255,.08) !important; }

/* ── Alert override ──────────────────────────────────────── */
.alert {
  border-radius: var(--radius-card) !important;
  border: none !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.alert-warning { background:rgba(255,237,213,.85) !important; color:#7c2d12 !important; }

/* ── Form check ──────────────────────────────────────────── */
.form-check-input { border-radius:6px !important; }
.form-check-input:checked { background-color:var(--gl) !important; border-color:var(--gl) !important; }
.form-check-input:focus   { box-shadow:0 0 0 3px var(--gl-glow) !important; }

/* ── Chevron toggle ──────────────────────────────────────── */
.toggle-chevron { transition:transform .25s ease; }
[aria-expanded="false"] .toggle-chevron { transform:rotate(-90deg); }

/* ── Bootstrap overrides ─────────────────────────────────── */
.card   { border-radius: var(--radius-card) !important; border:none; }
.border-top-0 { border-top:none !important; }

/* ── Spacing helpers ─────────────────────────────────────── */
.card-body { padding: 1.5rem; }

@media (max-width:576px) {
  .card-body { padding:1.1rem; }
  .vapp-card-header { padding:.75rem 1.1rem; }
  .stat-card { padding:1.1rem 1.2rem; }
}

/* ── Login input group (fixed icon alignment) ────────────── */
.login-input-group {
  display: flex;
  align-items: stretch;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  transition: border-color .2s, box-shadow .2s;
}
.login-input-group:focus-within {
  border-color: rgba(96,165,250,0.7);
  box-shadow: 0 0 0 4px rgba(96,165,250,0.12);
}
.login-input-icon {
  display: flex;
  align-items: center;
  padding: 0 .85rem;
  color: rgba(255,255,255,0.4);
  font-size: 1rem;
  flex-shrink: 0;
  background: transparent;
}
.login-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f1f5f9;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: .875rem;
  padding: .65rem .5rem;
  min-width: 0;
}
.login-input::placeholder { color: rgba(255,255,255,.3); }
.login-eye-btn {
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255,255,255,.4);
  padding: 0 .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: .95rem;
  transition: color .2s;
}
.login-eye-btn:hover { color: rgba(255,255,255,.8); }

/* ── Navbar custom 1024px breakpoint ────────────────────── */
/* Bootstrap navbar-expand-lg collapses at <992px.
   Override here to collapse at <1024px  */
@media (max-width:1024px) {
  .vapp-nav .navbar-collapse { display: none !important; }
  .vapp-nav .navbar-collapse.show,
  .vapp-nav .navbar-collapse.collapsing { display: block !important; }
  .vapp-nav .navbar-toggler { display: flex !important; }
}
@media (min-width:1025px) {
  .vapp-nav .navbar-collapse { display: flex !important; flex-basis: auto; }
  .vapp-nav .navbar-toggler { display: none !important; }
}

/* ── Recording toast ─────────────────────────────────────── */
.rec-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15,36,69,.96);
  color: #f1f5f9;
  border-radius: 50px;
  padding: .6rem 1.4rem;
  font-size: .85rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: .6rem;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.rec-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.rec-toast.toast-success { border-color: rgba(5,150,105,.5); }
.rec-toast.toast-warn    { border-color: rgba(217,119,6,.5); background:rgba(146,64,14,.9); }
.rec-toast.toast-error   { border-color: rgba(220,38,38,.5); background:rgba(153,27,27,.9); }

/* ── Global mic bar ──────────────────────────────────────── */
.mic-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(30,64,175,0.22);
  border-radius: 50px;
  padding: .45rem .9rem .45rem .6rem;
  margin-bottom: 1rem;
  position: sticky;
  top: 62px;          /* just below the navbar */
  z-index: 1020;
  box-shadow: 0 4px 18px rgba(15,36,69,.10);
}
.mic-bar-label {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .04em;
}
#globalMicBtn {
  border-radius: 50px;
  padding: .3rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  font-family: 'Barlow Semi Condensed', sans-serif;
  letter-spacing: .05em;
  border: none;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: .2s;
  box-shadow: 0 2px 8px rgba(15,36,69,.2);
}
#globalMicBtn:hover { opacity: .88; }
#globalMicBtn.recording {
  background: linear-gradient(135deg,#dc2626 0%,#ef4444 100%);
  animation: micPulse 1s infinite ease-in-out;
}
@keyframes micPulse { 0%,100%{box-shadow:0 2px 8px rgba(220,38,38,.3);} 50%{box-shadow:0 2px 18px rgba(220,38,38,.6);} }