/* RadPrintables - base theme + responsive layout fixes */

:root{
  --bg:#0b1220;
  --card:#0f1a2e;
  --muted:#9fb0c7;
  --text:#e8eef7;
  --border:#1f2b44;

  --good:#2dd4bf;
  --warn:#fbbf24;
  --bad:#fb7185;
}

/* ==============================
   THEME: Matte Purple (set by body.theme-matte)
   Uses CSS variables so modals/tables/forms inherit correctly.
   ============================== */
body.theme-matte{
  --bg:#1b1424;
  --card:#241a33;
  --muted:#c4b5fd;
  --text:#f5f3ff;
  --border:rgba(255,255,255,.10);

  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --panel: rgba(36,26,51,.92);

}

body.theme-matte a{ color:#d8b4fe; }
body.theme-matte .topbar{ background:#241a33; border-bottom:1px solid rgba(255,255,255,.08); }
body.theme-matte table thead th{ background:rgba(123,75,183,.14); }
body.theme-matte .pill{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); }
body.theme-matte .btn{ background:#7b4bb7; border-color:#7b4bb7; }
body.theme-matte .btn.secondary{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
body.theme-matte .btn.bad{ background:#ef4444; border-color:#ef4444; }

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% 0%, #162343 0%, var(--bg) 55%) fixed;
  color: var(--text);
  overflow-x:hidden; /* responsive fix */
}

a{ color:#93c5fd; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Layout container */
.container{
  width: min(1400px, calc(100% - 32px)); /* widened */
  margin: 0 auto;
  padding: 16px;
}

/* Top navigation */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(11,18,32,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.brand-title{ letter-spacing:.2px; }

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.nav a{
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:999px;
  color: var(--text);
  opacity:.9;
}
.nav a:hover{
  border-color: var(--border);
  background: rgba(255,255,255,.03);
  text-decoration:none;
}
.nav a.active{
  border-color:#38507a;
  background: rgba(147,197,253,.08);
}

/* Main content */
main.container{ padding:18px 0 40px; }

/* Cards */
.card, .panel{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 14px 50px rgba(0,0,0,.35);
  overflow: visible; /* responsive fix (no clipping) */
}

/* KPI grid */
.kpis{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 920px){
  .kpis{ grid-template-columns: repeat(2,1fr); }
}
.kpi{
  background: rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}
.kpi .label{ color: var(--muted); font-size:12px; }
.kpi .value{ font-size:26px; font-weight:800; margin:6px 0; }
.kpi .hint{ color: var(--muted); font-size:12px; }

/* Page grid */
.grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:16px;
  margin-top:16px;
}
@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
}

h2{ margin:0; font-size:18px; }
h3{ margin:14px 0 8px; font-size:15px; }
.sub{ margin-top:6px; color: var(--muted); font-size:12px; }
.note{ color: var(--muted); font-size:12px; }

/* Form rows */
.row, .form-row{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap; /* responsive fix */
}
.form-row > *{
  min-width:220px;
  flex:1 1 220px;
  align-items:flex-end;
}

/* Inputs */
.input, select{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  color: var(--text);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
}
.input:focus, select:focus{
  border-color:#38507a;
  box-shadow: 0 0 0 3px rgba(147,197,253,.12);
}

/* Buttons */
.btn{
  background: rgba(147,197,253,.15);
  border:1px solid #38507a;
  color: var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{ background: rgba(147,197,253,.22); }
.btn.secondary{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
}
.btn.secondary:hover{ background: rgba(255,255,255,.06); }

/* Keep action buttons visible on small screens */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  color: var(--text);
  background: rgba(255,255,255,.02);
}
.pill.good{ border-color: rgba(45,212,191,.45); background: rgba(45,212,191,.10); }
.pill.warn{ border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.10); }
.pill.bad{  border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.10); }

/* Tables */
table{
  width:100%;
  border-collapse: collapse;
  margin-top:10px;
  overflow:hidden;
  border-radius:12px;
}
thead th{
  text-align:left;
  font-size:12px;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  white-space:nowrap;
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(31,43,68,.55);
  white-space:nowrap;
}
tbody tr:hover{ background: rgba(255,255,255,.02); }

/* Horizontal scroll for wide tables (responsive fix) */
.table-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid var(--border);
}
.table-scroll table{
  margin-top:0;
  border-radius:0;
  border:none;
}

/* Mini cards */
.mini-card{
  background: rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-top:10px;
}
.mini-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.mini-title{ font-weight:700; }

.split{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

/* Small screens */
@media (max-width: 768px) {
  .container { padding: 12px; }
  table th, table td { padding: 8px 10px; }
}
/* ---------- Designs page: prevent giant thumbnails ---------- */

/* Global safety: images never exceed their container */
img {
  max-width: 100%;
  height: auto;
}

/* Most likely case: thumbnails are inside tables/cards on /designs */
table img,
.card img {
  max-width: 160px;
  max-height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* If the template uses a specific class name, catch common ones */
img.thumb,
img.thumbnail,
.design-thumb img {
  width: 160px;
  height: 120px;
  object-fit: cover;
}
/* ---------- Modal (image pop-out) ---------- */
.modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  align-items:center;
  justify-content:center;
}

.modal-backdrop.open{ display: flex; }

.modal{
  width: min(1100px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 90px rgba(0,0,0,.6);
  padding: 14px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.modal-title{
  font-weight: 800;
}

.modal img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 14px;
  border: 1px solid var(--border);
}
/* --- Modal polish (Start Print / image previews) --- */
.modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;              /* JS toggles to flex */
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
}

/* Make the modal fit the viewport nicely */
.modal{
  width: min(1100px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: hidden;           /* keep header fixed, body scrolls */
}

/* Scroll inside the modal body instead of the page */
.modal-body{
  overflow: auto;
  max-height: calc(100vh - 160px); /* tweak if your header is taller */
}

/* Remove the gross horizontal scrollbar caused by wide tables */
.modal-body table{
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* Inputs inside modals: keep them from stretching weirdly */
.modal .row{
  flex-wrap: wrap;
  gap: 12px;
}
/* --- Compact numeric inputs for filament grams --- */
input[name="model_g"],
input[name="support_g"],
input[name="waste_g"],
input[name="prime_g"]{
  width: 88px;              /* ~5 characters comfortably */
  min-width: 88px;
  padding: 6px 8px;
  text-align: right;        /* numbers read better aligned */
  font-variant-numeric: tabular-nums;
}

/* Tighten table columns in modals */
.modal table th:nth-child(2),
.modal table th:nth-child(3),
.modal table th:nth-child(4),
.modal table th:nth-child(5){
  width: 110px;
}

/* Keep total pill compact */
.modal [data-total]{
  min-width: 64px;
  display: inline-block;
  text-align: right;
}

/* ==============================
   Toasts (theme-matching)
   ============================== */
#toastHost{
  position:fixed;
  top:16px;
  right:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  pointer-events:auto;
  width:min(420px, calc(100vw - 32px));
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--border, rgba(255,255,255,.12));
  background: var(--panel, rgba(17,24,39,.92));
  color: var(--text, #e5e7eb);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  display:flex;
  gap:10px;
  align-items:flex-start;
  opacity:0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}

.toast.show{
  opacity:1;
  transform: translateY(0);
}

.toast .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:6px;
  flex:0 0 10px;
  background:#60a5fa; /* info default */
}

.toast.ok .dot{ background:#22c55e; }
.toast.warn .dot{ background:#f59e0b; }
.toast.bad .dot{ background:#ef4444; }
.toast.info .dot{ background:#60a5fa; }

.toast .body{ flex:1; }
.toast .title{ font-weight:800; line-height:1.2; }
.toast .msg{ margin-top:2px; font-size:13px; opacity:.92; line-height:1.25; }

.toast .x{
  border:none;
  background:transparent;
  color: var(--text, #e5e7eb);
  opacity:.75;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:0 4px;
}

.toast .x:hover{ opacity:1; }

.swatch{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:4px;
  margin-right:8px;
  vertical-align:middle;
  border:1px solid rgba(255,255,255,.25);
}

.muted-link {
  opacity: 0.85;
}
.muted-link:hover {
  opacity: 1;
}

/* ==============================
   Global dropdown + theme polish
   (moved from base.html for maintainability)
   ============================== */

/* Dark dropdown option lists (critical for dark themes)
   Note: native <option> styling is inconsistent across browsers.
   These rules maximize readability in Edge/Chromium. */
:root{ color-scheme: dark; }
body.theme-light{ color-scheme: light; }
body.theme-matte{ color-scheme: dark; }

select{
  background-color: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  --panel: rgba(255,255,255,.92);

}
select:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59,130,246,.6);
}
select option{
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
select option:hover,
select option:checked{
  background-color: #1f2b44 !important; /* border tone */
  color: #ffffff !important;
}

/* ---- Theme: Matte Purple (toggle in Admin) ---- */
/* (kept here so theme rules live with the rest of the CSS) */
body.theme-matte a{ color:#d8b4fe; }

/* Ensure topbar matches matte palette */
body.theme-matte .topbar{ background:#241a33; border-bottom:1px solid rgba(255,255,255,.08); }

/* Cards look richer in matte theme */
body.theme-matte .card, body.theme-matte .panel{
  background: #241a33;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

body.theme-matte table thead th{ background: rgba(123,75,183,.14); }
body.theme-matte .pill{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); }
body.theme-matte .pill.good{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.25); }
body.theme-matte .pill.warn{ background: rgba(234,179,8,.18); border-color: rgba(234,179,8,.25); }
body.theme-matte .pill.bad{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.25); }
body.theme-matte .btn{ background:#7b4bb7; border-color:#7b4bb7; }
body.theme-matte .btn.secondary{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
body.theme-matte .btn.bad{ background:#ef4444; border-color:#ef4444; }

/* ==============================
   Global UI polish (safe)
   ============================== */

/* Consistent focus visibility */
:where(a, button, input, select, textarea).focus-visible,
:where(a, button, input, select, textarea):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(147,197,253,.18);
}

/* Smooth hover/press without changing colors */
.btn, .nav a, a, .pill{
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease, transform .04s ease;
}
.btn:active{ transform: translateY(1px); }

/* Slightly tighter stacked rows globally (keeps existing spacing but reduces "air") */
.row{ margin-top: 8px; }



/* ==============================
   Theme presets
   ============================== */

/* Default theme uses :root values (current dark blue look) */

/* Explicit Dark (distinct from Default) */
body.theme-dark{
  --bg:#0a0f18;
  --card:#111827;
  --muted:#b6c2d6;
  --text:#f1f5f9;
  --border:rgba(255,255,255,.12);

  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;

  background: radial-gradient(1200px 800px at 20% 0%, #111827 0%, var(--bg) 60%) fixed;
  color: var(--text);
  --panel: rgba(2,6,23,.92);

}
body.theme-dark a{ color:#93c5fd; }
body.theme-dark .topbar{ background: rgba(10,15,24,.78); border-bottom: 1px solid var(--border); }
body.theme-dark .nav a.active{ border-color:#334155; background: rgba(255,255,255,.06); }

/* Light */
body.theme-light{
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#475569;
  --text:#0b1220;
  --border:rgba(15,23,42,.18);

  --good:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;

  background: radial-gradient(1200px 800px at 20% 0%, #ffffff 0%, var(--bg) 60%) fixed;
  color: var(--text);
}
body.theme-light a{ color:#1d4ed8; }
body.theme-light .topbar{
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
body.theme-light .card, body.theme-light .panel{
  box-shadow: 0 10px 28px rgba(2,6,23,.10);
}
body.theme-light thead th{
  background: rgba(2,6,23,.04);
  color: rgba(2,6,23,.65);
}
body.theme-light tbody td{ border-bottom: 1px solid rgba(2,6,23,.10); }
body.theme-light .pill{ background: rgba(2,6,23,.04); border-color: rgba(2,6,23,.12); }

/* High Contrast */
body.theme-contrast{
  --bg:#000000;
  --card:#000000;
  --muted:#ffffff;
  --text:#ffffff;
  --border:#ffffff;

  --good:#00ff8a;
  --warn:#ffd400;
  --bad:#ff4d4d;

  background: #000;
  color: #fff;
  --panel: #000000;

}
body.theme-contrast a{ color:#00b7ff; text-decoration: underline; }
body.theme-contrast .topbar{ background:#000; border-bottom:2px solid #fff; }
body.theme-contrast .card, body.theme-contrast .panel{
  background:#000;
  border:2px solid #fff;
  box-shadow:none;
}
body.theme-contrast .btn{
  background:#000;
  border:2px solid #fff;
}
body.theme-contrast .btn.secondary{
  background:#000;
  border:2px dashed #fff;
}
body.theme-contrast thead th{
  background:#000;
  color:#fff;
  border-bottom:2px solid #fff;
}
body.theme-contrast tbody td{ border-bottom:1px solid #fff; }
body.theme-contrast .pill{ border:2px solid #fff; background:#000; }


/* ==============================
   Pill fixes for Light + Contrast
   ============================== */

/* Light theme pills: stronger fills, readable text */
body.theme-light .pill{
  background: rgba(2,6,23,.06);
  border-color: rgba(2,6,23,.18);
  color: #0b1220;
}
body.theme-light .pill.good{
  background: rgba(22,163,74,.18);
  border-color: rgba(22,163,74,.35);
  color:#064e3b;
}
body.theme-light .pill.warn{
  background: rgba(217,119,6,.18);
  border-color: rgba(217,119,6,.35);
  color:#7c2d12;
}
body.theme-light .pill.bad{
  background: rgba(220,38,38,.18);
  border-color: rgba(220,38,38,.35);
  color:#7f1d1d;
}

/* High contrast pills: unmistakable states */
body.theme-contrast .pill{
  background:#000;
  border:2px solid #fff;
  color:#fff;
}
body.theme-contrast .pill.good{
  background:#00ff8a;
  border-color:#00ff8a;
  color:#000;
}
body.theme-contrast .pill.warn{
  background:#ffd400;
  border-color:#ffd400;
  color:#000;
}
body.theme-contrast .pill.bad{
  background:#ff4d4d;
  border-color:#ff4d4d;
  color:#000;
}


/* Light theme dropdowns */
body.theme-light select{
  background-color:#ffffff !important;
  color:#0b1220 !important;
  border-color: rgba(15,23,42,.25);
}
body.theme-light select option{
  background-color:#ffffff !important;
  color:#0b1220 !important;
}

/* High contrast dropdowns */
body.theme-contrast select{
  background-color:#000 !important;
  color:#fff !important;
  border:2px solid #fff;
}
body.theme-contrast select option{
  background-color:#000 !important;
  color:#fff !important;
}
body.theme-contrast select option:hover,
body.theme-contrast select option:checked{
  background-color:#fff !important;
  color:#000 !important;
}


/* Toast theme overrides */
body.theme-light .toast{
  background: rgba(255,255,255,.92) !important;
  color: #0b1220 !important;
  border-color: rgba(15,23,42,.18) !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.12);
}
body.theme-contrast .toast{
  border:2px solid #fff;
  box-shadow:none;
}
body.theme-contrast .toast .x{
  color:#fff;
}

body.theme-light .toast .x{ color: rgba(2,6,23,.75) !important; }

body.theme-dark .toast{
  background: rgba(2,6,23,.92) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* ==============================
   Link underline overrides
   ============================== */

/* Light theme: no underlines */
body.theme-light a,
body.theme-light a:hover{
  text-decoration: none !important;
}

/* High Contrast theme: no underlines (rely on color + contrast instead) */
body.theme-contrast a,
body.theme-contrast a:hover{
  text-decoration: none !important;
}

/* Spool warnings (Pending Complete) */
select.spool-empty, .input.spool-empty { outline: 2px solid var(--bad); outline-offset: 0; }
select.spool-low, .input.spool-low { outline: 2px solid var(--warn); outline-offset: 0; }

.start-print-close-row {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 50;
}

/* Start Print modal container should be the positioning context */
#startPrintBackdrop .modal {
  position: relative;
}

#startPrintBackdrop .modal-header {
  padding-right: 140px; /* adjust if needed */
}

/* Start Print modal table: ensure rounded corners on BOTH sides */
.table-shell{

  overflow: hidden;                 /* <-- this is the key */
  background: var(--card);          /* or var(--panel) depending on your theme vars */
}
/* 1) Make table truly fill the shell */
.table-shell table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* 2) Let the last column absorb remaining width */
.table-shell thead th:last-child,
.table-shell tbody td:last-child{
  width: 1%;
  white-space: nowrap;
}

/* 3) Make the “Remove” column content sit on the far right */
.table-shell tbody td:last-child{
  text-align: right;
  padding-right: 14px; /* match your shell padding */
}
.table-shell thead th:last-child{
  text-align: right;
  padding-right: 14px;
}

/* Optional: ensure inner table matches rounded container visually */
.table-shell{
  overflow: hidden; /* clips header bg to rounded corners */
}

/* Start Print modal – center filament table when narrower than modal */
#startPrintBackdrop #spMaterialsTable {
  margin-left: auto !important;
  margin-right: auto ;
}

/* Printer status pill */
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:18px; /* adjust */
  letter-spacing:.2px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.04);
}
.status-pill.good{
  background: rgba(46, 204, 113, 0.18);
  border-color: rgba(46, 204, 113, 0.35);
}
.status-pill.bad{
  background: rgba(231, 76, 60, 0.18);
  border-color: rgba(231, 76, 60, 0.35);
}
.status-pill.warn{
  background: rgba(241, 196, 15, 0.18);
  border-color: rgba(241, 196, 15, 0.35);
}
.status-pill.muted{
  opacity: .8;
}

/* Progress bar */
.progress-wrap{ margin-top:10px; }
.progress-bar{
  position: relative;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  border-radius: 999px;
  background: rgba(120, 80, 255, 0.55); /* stays on-brand */
}
.progress-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  mix-blend-mode: normal;
}

.progress-outer{
  width:100%;
  height:22px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

.progress-inner{
  height:100%;
  border-radius:999px;
  width:0%;
  position:relative;
  transition: width 0.8s ease; /* smooth animation when % changes */
  background: rgba(140, 90, 255, .55);
}

.progress-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  color: rgba(255,255,255,.9);
}

/* Shimmer animation only when "printing" */
.progress-inner.is-printing::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer{
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Optional pill styles if you haven’t added them already */
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:800;
  text-transform: capitalize;
}

.status-pill.good{ background: rgba(80, 220, 140, .16); border-color: rgba(80,220,140,.35); }
.status-pill.bad{  background: rgba(255, 90, 90, .16); border-color: rgba(255,90,90,.35); }
.status-pill.neutral{ background: rgba(255,255,255,.06); }

/* ==============================
   Printer KPI (theme-aware)
   ============================== */

/* Make the Printer KPI text readable in light theme */
body.theme-light #printerKpi .hint,
body.theme-light #printerKpi .note {
  color: var(--muted);
}

/* Status pill in Printer KPI uses .pill + .good/.bad/.neutral from your theme vars */
#printerKpi #printerStatusPill.pill.good  { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 18%, transparent); }
#printerKpi #printerStatusPill.pill.bad   { border-color: color-mix(in srgb, var(--bad)  45%, transparent); background: color-mix(in srgb, var(--bad)  18%, transparent); }
#printerKpi #printerStatusPill.pill.neutral { border-color: var(--border); background: rgba(255,255,255,.06); }

/* Progress UI matches your HTML structure:
   .progress-wrap is the track, #printerProgressBar is the fill, #printerProgressText overlays */
#printerKpi .progress-wrap{
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

#printerKpi #printerProgressBar{
  height: 100%;
  border-radius: 999px;
  width: 0%;
  transition: width 0.8s ease; /* smooth when % changes */
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}

/* When printing, use "good" tint so it looks alive across themes */
#printerKpi .progress-wrap.is-printing #printerProgressBar{
  background: color-mix(in srgb, var(--good) 35%, transparent);
}


/* Ensure shimmer can position correctly */
#printerKpi #printerProgressBar{
  position: relative;          /* REQUIRED for ::after */
  overflow: hidden;            /* keeps shimmer inside bar */
}

/* Make shimmer visible above the fill */
#printerKpi .progress-wrap.is-printing #printerProgressBar::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 2;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: printerShimmer 1.0s linear infinite;
  pointer-events: none;
}

@keyframes printerShimmer{
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Overlay % text */
#printerKpi #printerProgressText{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 12px;
  color: var(--text);
  pointer-events:none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Shimmer animation only while printing */
#printerKpi .progress-wrap.is-printing #printerProgressBar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: printerShimmer 1.2s linear infinite;
}

@keyframes printerShimmer{
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}