:root{
  --accent:#673ab7;
  --accent-2:#5e35b1;
  --bg:#f7f7fb;
  --card:#ffffff;
  --ink:#242a31;
  --muted:#6b7280;
  --chip:#eef0ff;
  --chip-text:#3f51b5;
  /* ↓ Tighter default so content doesn't sit far from header before JS recalculates */
  --appbar-h:56px;           /* was 160px */
}

html, body { height:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  padding-top:var(--appbar-h);   /* keeps content exactly below fixed header */
  overflow-y:auto;
}

/* When bottom CTA is visible on predict page */
body.cta-open{
  padding-bottom:90px;
}

/* ===== Fixed App Bar / Menu ===== */
.appbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1040;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  padding:26px 0 20px;
  margin-bottom:0;
}
.appbar h2{
  margin:0;
  font-weight:700;
}

.quick-nav a{
  color:#fff;
  text-decoration:none;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-weight:600;
  font-size:.9rem;
}
.quick-nav a.active{
  background:#fff;
  color:var(--accent-2);
}

/* Responsive tweaks for header/nav */
@media (max-width:576px){
  .appbar h2{ font-size:1.25rem; }
  .quick-nav a{ font-size:.8rem; padding:4px 10px; }
}

/* ===== Generic Card / Shell Styling ===== */
.card-like{
  background:var(--card);
  border:1px solid #e9eaf3;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(20,23,38,.06);
  padding:20px;
}
.card-tall{ min-height:50vh; }

.shell{
  border:1px solid #e9eaf3;
  border-radius:14px;
  background:var(--card);
  box-shadow:0 6px 18px rgba(20,23,38,.06);
  padding:14px;
}

/* Text utils */
.mini{
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}
.muted{ color:var(--muted); }
.form-label{ font-weight:600; }
.small-mono{
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}

/* KPI tiles (main dashboard style) */
.kpi{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid #eceef7;
  background:#fff;
}
.kpi .icon{
  width:38px; height:38px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#efe9ff;
  color:var(--accent);
  font-size:18px;
  font-weight:700;
}
.kpi .val{
  font-size:1.15rem;
  font-weight:800;
}
.kpi .lbl{
  font-size:.9rem;
  color:var(--muted);
}

/* Chips (model version tags on dashboard, etc.) */
.chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--chip);
  color:var(--chip-text);
  border:1px solid #dfe3ff;
  font-weight:600;
  font-size:.85rem;
}

/* Pills and status badges */
.pill{
  padding:.35rem .6rem;
  border-radius:999px;
  font-weight:700;
}
.badge-slo{ font-weight:700; }
.status-box{ font-weight:600; }

/* Progress bars */
.progress{
  height:10px;
  border-radius:8px;
  background:#f0f2fb;
}
.progress-bar{
  border-radius:8px;
}

/* Charts */
.chart-fit{
  height:clamp(360px, 50vh, 720px);
}

/* Monitor helpers (also shared, safe to keep) */
.clickable{ cursor:pointer; }
.metric-row{ gap:.5rem; }
.metric-row .badge{ white-space:nowrap; }
.card-note{
  font-size:.85rem;
  color:var(--muted);
}

/* ===== Predict Page Specific ===== */

/* Drag & drop zone */
.dropzone{
  border:2px dashed #cfd2e6;
  border-radius:14px;
  background:#fafbff;
  padding:28px;
  text-align:center;
  transition:border-color .2s, background .2s, transform .08s;
  cursor:pointer;
}
.dropzone.dragover{
  border-color:var(--accent);
  background:#f1ecff;
  transform:scale(0.998);
}
.dz-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:#ece7ff;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:10px;
}

/* Image previews grid */
.preview-container{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:12px;
}
.preview-card{
  position:relative;
  border:1px solid #e8e9f3;
  background:#fff;
  border-radius:12px;
  padding:10px;
  text-align:center;
}
.thumb{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e4e6f2;
  cursor:zoom-in;
}
.remove-btn,
.edit-btn{
  position:absolute;
  top:8px;
  background:#fff;
  border:1px solid #e0e2ee;
  border-radius:999px;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center; justify-content:center;
  line-height:1;
  color:#6b7280;
  z-index:3;
  cursor:pointer;
  font-size:14px;
}
.remove-btn{ right:8px; }
.edit-btn{ left:8px; }

/* File count badge */
.counter-badge{
  background:#f0ecff;
  color:var(--accent);
  font-weight:600;
  border-radius:999px;
  padding:4px 10px;
  font-size:.85rem;
}

/* Spinner row after submit */
#spinner{ display:none; }

/* Editor modal canvas area */
.editor-wrap{
  position:relative;
  width:100%;
  height:64vh;
  min-height:360px;
  background:#222;
  border-radius:12px;
  display:flex;
  align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid #343a40;
}
#editorCanvas{
  display:block;
  max-width:100%;
  max-height:100%;
  background:#222;
  cursor:none; /* custom cursor ring replaces it */
}

/* Custom brush cursor (white ring with black outline) */
.brush-cursor{
  position:absolute;
  left:0; top:0;
  z-index:5;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  outline:2px solid rgba(0,0,0,.55);
  pointer-events:none;
  display:none; /* toggled by JS */
  box-sizing:border-box;
  width:40px;
  height:40px;
}

/* Editor toolbar text weight tweak */
.editor-toolbar .form-label{
  font-weight:500;
}

/* Bottom CTA bar when all images reviewed */
.done-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1030;
  transform:translateY(110%);
  transition:transform .25s ease;
}
.done-cta.show{ transform:translateY(0); }
.done-cta .bar{
  background:#fff;
  border-top:1px solid #e9eaf3;
  box-shadow:0 -8px 24px rgba(20,23,38,.08);
  padding:12px 0;
}

/* ===== Results Page Specific ===== */
.table-shell{
  border:1px solid #e9eaf3;
  border-radius:14px;
  background:var(--card);
  box-shadow:0 6px 18px rgba(20,23,38,.06);
  padding:14px;
}
#resultsTable thead th{
  position:static;
  background:var(--accent);
  color:#fff;
  border-bottom:0;
}
.thumb.thumb-md{
  width:80px;
  height:80px;
  border-radius:8px;
  transition:transform .2s;
}
.thumb.thumb-md:hover{ transform:scale(1.04); }
.table-fit td, .table-fit th{ white-space:nowrap; }
.truncate-cell{ max-width:260px; }
.truncate-cell .truncate{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
  font-size:20px;
  line-height:1;
  vertical-align:middle;
}
.icon-btn{ padding:0 .5rem; }
.btn-icon{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:0;
}
.btn-outline-success.active{ background:#198754; color:#fff; }
.btn-outline-danger.active{ background:#dc3545; color:#fff; }
.explain-img{
  max-width:100%; height:auto;
  border-radius:10px; border:1px solid #e7e7ef; background:#fff;
}
.explain-card{
  background:var(--card); border:1px solid #e9eaf3; border-radius:14px;
  box-shadow:0 6px 18px rgba(20,23,38,.06); padding:14px; height:100%;
}
.modal-xl{ --bs-modal-width:95vw; }
.modal-body-scroll{ max-height:calc(100vh - 200px); overflow:auto; }
.legend-badge{ font-weight:600; }
.btn-toggle{ border-color:#adb5bd; }
.btn-toggle.active{ background:#343a40; color:#fff; border-color:#343a40; }
.d-hide{ display:none !important; }

/* Page loading overlay */
.page-loading-overlay{
  position:fixed; inset:0;
  background:rgba(255,255,255,0.85);
  z-index:2050;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.page-loading-panel{
  background:#fff; border:1px solid #e9eaf3; border-radius:14px;
  box-shadow:0 10px 24px rgba(20,23,38,.08);
  padding:18px 22px; display:flex; align-items:center; gap:14px;
}
.page-loading-text{ font-weight:600; color:#333; }

/* ===== Versions Page Specific ===== */
#versionsTable thead th{
  position:static;
  background:var(--accent);
  color:#fff;
  border-bottom:0;
}
#customPageLen{ width:90px; }

/* ===== Auth (Login / Setup) ===== */
.auth-bg{
  min-height:100vh;
  background:
    radial-gradient(900px 600px at -10% -20%, rgba(103,58,183,.20), transparent 70%),
    radial-gradient(800px 500px at 110% 120%, rgba(94,53,177,.18), transparent 70%),
    var(--bg);
}

.auth-card{
  width:min(440px, 92vw);
  background:#fff;
  border:1px solid #e9eaf3;
  border-radius:18px;
  padding:22px 20px;
  box-shadow:0 18px 40px rgba(20,23,38,.12);
}

.auth-logo{
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.15rem;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(103,58,183,.35);
}

/* Floating labels: crisper look */
.form-floating>.form-control{
  border-radius:12px;
  border:1px solid #e6e8f2;
}
.form-floating>.form-control:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem rgba(103,58,183,.1);
}
.form-floating>label{
  color:#6b7280;
}

/* Auto-Retrain status pill */
#kpiRetrainBadge{
  font-size: .70rem;        /* smaller text */
  padding: .15rem .50rem;   /* tighter pill */
  line-height: 1;           /* compact */
  color: #fff !important;   /* force white text */
  border-radius: 999px;
  font-weight: 600;
}