/* ==========================================================================
   Certra — login page, user chip, admin panel, modal
   ========================================================================== */

/* ---- login: split screen ----------------------------------------------- */
body.auth { height: 100vh; overflow: hidden; }

.auth-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  height: 100vh;
}

/* left: schematic data-art on the page canvas */
.auth-art {
  position: relative;
  background: var(--bg);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px;
  overflow: hidden;
}
.auth-art .wordmark {
  position: absolute; top: 32px; left: 32px;
  display: flex; align-items: center; gap: 10px;
}
.auth-art .wordmark .brand-mark { width: 34px; height: 23px; }
.auth-art .wordmark h1 {
  font-size: 14px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text);
}
.auth-art .tagline {
  position: absolute; top: 62px; left: 32px;
  font-size: 12px; color: var(--text-3);
}
.auth-art .art-svg { width: 100%; max-width: 620px; margin: 0 auto; }
.auth-art .art-foot {
  position: absolute; bottom: 28px; left: 32px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}

/* right: form column */
.auth-form-col {
  background: var(--surface-1);
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px;
  overflow-y: auto;
}
.auth-card {
  width: 100%; max-width: 360px; margin: 0 auto;
  background: none; border: none; border-radius: 0; box-shadow: none; padding: 0;
  animation: fade-up 0.2s var(--ease);
}
.auth-brand { display: none; }
.auth-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.auth-sub { font-size: 13px; color: var(--text-2); margin-bottom: 24px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .input { height: var(--ctl-h); }
.auth-form .btn.primary { height: var(--ctl-h-lg); font-size: 13px; margin-top: 4px; }

.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 36px; }
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--text-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }

.auth-error {
  display: none;
  align-items: flex-start; gap: 8px;
  padding: 9px 11px;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--r-xs);
  font-size: 12.5px; color: var(--text);
  animation: fade-up 0.16s var(--ease);
  margin-bottom: 14px;
}
.auth-error.show { display: flex; }
.auth-error svg { color: var(--danger); flex: none; margin-top: 1px; }

.auth-foot {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-3);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-form-col { padding: 32px 20px; }
}

/* ---- user chip in the topbar ------------------------------------------- */
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--ctl-h); padding: 0 10px 0 4px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-weight: 400;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.user-chip:hover { background: var(--surface-3); border-color: var(--border-strong); }
.avatar {
  width: 24px; height: 24px; border-radius: 4px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text-2); font-family: var(--mono); font-size: 10.5px; font-weight: 500;
}
.avatar.lg { width: 32px; height: 32px; font-size: 12px; }
.user-chip .who { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-user { padding: 8px 10px; display: flex; align-items: center; gap: 10px; }
.menu-user .who { min-width: 0; }
.menu-user .who b { display: block; font-size: 13px; font-weight: 500; }
.menu-user .who span {
  display: block; font-family: var(--mono); font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* roles: outline badges — admin accent, analyst info, viewer neutral */
.role-badge {
  display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 1px 7px; border-radius: var(--r-xs);
  border: 1px solid var(--border-strong); color: var(--text-2); background: transparent;
}
.role-badge.admin { border-color: var(--accent-ring); color: var(--accent); }
.role-badge.analyst { border-color: var(--info); color: var(--info); }
.role-badge.viewer { border-color: var(--border-strong); color: var(--text-3); }

/* ---- admin panel ------------------------------------------------------- */
.admin-page { display: grid; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; }
.admin-main { overflow-y: auto; }
.admin-inner { max-width: 1100px; padding: 20px 24px 48px; }

.admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.admin-head .grow { flex: 1; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px;
}
.stat .k { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.stat .v {
  font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -0.01em;
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.stat .v small { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 4px; }

.admin-tabs { width: 100%; }

.actions-cell { display: flex; gap: 2px; justify-content: flex-end; }
.icon-btn {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--text-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.dot-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.dot-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.dot-state.on i { background: var(--success); }
.dot-state.off { color: var(--text-3); }

.audit-detail {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- modal ------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0, 0, 0, 0.6);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-med);
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 440px;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  transform: translateY(6px); transition: transform var(--t-med);
  max-height: 90vh; display: flex; flex-direction: column;
}
.modal-backdrop.show .modal { transform: none; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16px; font-weight: 600; }
.modal-head .btn { margin-left: auto; }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.modal-foot { padding: 12px 16px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); }
.radio-cards { display: flex; flex-direction: column; gap: 6px; }
.radio-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--inset); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.radio-card:hover { border-color: var(--border-strong); }
.radio-card input { margin-top: 2px; accent-color: var(--accent); }
.radio-card b { font-size: 12.5px; font-weight: 500; display: block; }
.radio-card span { font-size: 11.5px; color: var(--text-3); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

@media (max-width: 720px) {
  .admin-inner { padding: 16px 14px 32px; }
  .user-chip .who { display: none; }
}

/* ---- login data-art (SVG) ---------------------------------------------- */
/* Base styles are the FINISHED state: with animation off (reduced motion, or
   an old engine) the art renders exactly as the static design intended. */
.art-svg .ax { stroke: var(--border); stroke-width: 1; fill: none; }
.art-svg .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 1 5; fill: none; }
.art-svg .det { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.art-svg .curve { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; fill: none; }
.art-svg .mark { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }
.art-svg .pt { fill: var(--accent); }
.art-svg .bar { fill: var(--border-strong); }
.art-svg text { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.art-svg .lbl { fill: var(--text-2); font-size: 11px; }
.art-svg .tick { fill: var(--text-3); font-size: 10px; }

/* ---- the run ------------------------------------------------------------
   A Monte Carlo run that never finishes. The earlier version built the chart,
   froze for six seconds and then wiped itself to start over, which read as
   "the animation stopped". Nothing is ever cleared now: the curve draws once
   and stays, while two things keep moving forever — a wave of arriving samples
   across the histogram, and a cursor walking the cumulative curve. */

/* samples: one crest travels the histogram continuously. The per-bar delays in
   the markup are negative and span exactly one period, so the wave is already
   mid-flight on the first painted frame. */
.art-svg .bar { animation: mc-wave 5s ease-in-out infinite; }
@keyframes mc-wave {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 1; }
}

/* the curve integrates them — drawn once on load, then left alone */
.art-svg .curve {
  stroke-dasharray: 610;          /* measured path length: 604.5px */
  stroke-dashoffset: 0;
  animation: mc-draw 2.2s var(--ease) both;
}
@keyframes mc-draw {
  from { stroke-dashoffset: 610; }
  to   { stroke-dashoffset: 0; }
}

/* the baseline, then the percentiles, settle in behind it — once */
.art-svg .det, .art-svg .det-lbl { animation: mc-fade 0.5s var(--ease) 0.2s both; }
.art-svg .pt, .art-svg .lbl { animation: mc-fade 0.5s var(--ease) 2.1s both; }
.art-svg .mark { animation: mc-fade-mark 0.5s var(--ease) 2.1s both; }
@keyframes mc-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes mc-fade-mark { from { opacity: 0; } to { opacity: 0.5; } }

/* a sample cursor walking the distribution, on a loop */
.art-svg .tracer { fill: var(--accent); }
.art-svg .tracer-g { opacity: 0; }              /* hidden unless the path resolves */
@supports (offset-path: path("M0 0")) {
  .art-svg .tracer-g { opacity: 1; }
  .art-svg .tracer {
    offset-path: path("M60 320C170 320 240 262 320 180C400 98 480 52 580 46");
    offset-rotate: 0deg;
    animation: mc-trace 7s linear 2.2s infinite;
  }
  @keyframes mc-trace {
    0%        { offset-distance: 0%;   opacity: 0; }
    10%       { opacity: 1; }
    90%       { opacity: 1; }
    100%      { offset-distance: 100%; opacity: 0; }
  }
}

/* Motion is opt-out: with reduced motion the art is simply the finished chart. */
@media (prefers-reduced-motion: reduce) {
  .art-svg .bar, .art-svg .curve, .art-svg .det, .art-svg .det-lbl,
  .art-svg .mark, .art-svg .pt, .art-svg .lbl, .art-svg .tracer {
    animation: none !important;
  }
  .art-svg .tracer-g { opacity: 0; }
}