:root{
  --bg:#070b12;
  --card: #21252ca1;
  --muted: rgba(205, 206, 206, 0.658);
  --text: rgba(222, 245, 239, 0.678);
  --line: rgba(50, 122, 122, 0.267);

  --btn: rgba(255,255,255,0.08);
  --btn2: rgba(255,255,255,0.05);

  --accent: #44d1ff;
  --accent2: #7a5cff;

  --ok:#5dffb2;
  --warn:#ffcf66;
  --bad:#ff7a86;

  --pill: rgba(255,255,255,0.07);

  --shadow: 0 10px 28px rgba(0, 0, 0, 0.288);
  --radius:16px;
  --pad:16px;
  --max: 1100px;
  font-synthesis-weight:none;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  position:static;
  top:0;
  background: rgba(7,11,18,.95);
  backdrop-filter: blur(6px);
  z-index:10;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 240px;
}
.brand-logo{ width:80px; height:80px; }
.brand-title{ font-size:18px; font-weight:700; letter-spacing:.2px; }
.brand-sub{ font-size:14px; color:var(--muted); }

.topbar-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

.pill{
  border:1px solid var(--line);
  background:var(--pill);
  color:var(--text);
  padding:4px 8px;
  border-radius:12px;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  white-space:nowrap;

  font-size:12px;
  font-weight:500;
}
.pill:active{ transform: translateY(1px); }

.pill:active{ transform: translateY(1px); }

/* Selected state for pill filters */
.pill.is-selected{
  border-color: rgba(68,209,255,0.55);
  box-shadow: 0 0 0 3px rgba(68,209,255,0.15);
}

.wrap{
  max-width:var(--max);
  margin: 16px auto 40px;
  padding: 0 16px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
}

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  border-bottom:1px solid var(--line);
  margin-bottom: 12px;
}

h1{ margin:0; font-size:20px; }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin: 12px 0 16px;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
  .topbar{ flex-direction:column; align-items:flex-start; }
  .topbar-actions{ width:100%; justify-content:flex-start; }
  .brand{ width:100%; }
}

@media (max-width: 980px){

  .card-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .card-head .row{
    width:100%;
    justify-content:flex-end;
  }

}

/* Allow pill row to wrap cleanly */
.row{
  flex-wrap: wrap;
  gap: 8px;
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 980px){
  .grid3{ grid-template-columns: 1fr; }
}

.panel{
  background: #11141b;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.panel-title{ font-weight:500; margin-bottom:9px; }

.muted{ color:var(--muted); margin:9px 0; line-height:1.35; }

.row{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap:8px;
}

.badge{
  border:1px solid var(--line);
  background: rgba(0,0,0,.15);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color: var(--muted);
}

.badge.badge-alert{
  background: rgba(255,122,134,0.10);
  border-color: rgba(255,122,134,0.22);
  color: rgba(255,225,228,0.95);
}

.badge.badge-warn{
  background: rgba(255,214,102,0.10);
  border-color: rgba(255,214,102,0.22);
  color: rgba(255,240,200,0.95);
}

.insight-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.insight-tile{
  background: var(--card-bg, rgba(255,255,255,0.04));
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
}

.insight-number{
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.insight-label{
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
}

.insight-tile.warning{
  border-color: rgba(217,83,79,0.65);
}

.btn{
  border:1px solid var(--line);
  background: var(--btn);
  color:var(--text);
  padding:10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.btn.primary{
  border-color: rgba(68,209,255,0.32);
  background: linear-gradient(
    180deg,
    rgba(68, 208, 255, 0.13),
    rgba(68, 208, 255, 0.137)
  );
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.btn.file{ position:relative; overflow:hidden; }
.btn.file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.table-wrap{ overflow:auto; border-radius: 14px; border:1px solid var(--line); }
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 840px;
}
.table th, .table td{
  border-bottom:1px solid var(--line);
  padding:10px 10px;
  text-align:left;
  font-size:13px;
}
.table th{ color: var(--muted); font-weight:600; }
.table td{ vertical-align:top; }

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 10px;
}
.field span{ font-size:12px; color: var(--muted); }
.field input:not([type="checkbox"]), .field textarea, .field select{
  background: var(--btn2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius: 12px;
  padding:10px 10px;
  outline:none;
}
.field textarea{ min-height: 90px; resize: vertical; }

/* Themed selects */
.field select{
  appearance: none;
  -webkit-appearance: none;

  background: var(--btn2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 38px 10px 12px;
  font: inherit;
  line-height: 1.2;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field select:focus{
  border-color: rgba(78,199,255,0.45);
  box-shadow: 0 0 0 3px rgba(78,199,255,0.12);
}

.field select:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

hr.sep{
  border:none;
  border-top:1px solid var(--line);
  margin: 12px 0;
}

.progress{
  height:10px;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background: rgba(0,0,0,.15);
  margin: 10px 0 14px;
}
.progress-bar{
  height:100%;
  background: linear-gradient(
    90deg,
    rgba(68,209,255,0.6),
    rgba(122,92,255,0.6)
  );
  width:0%;
  transition: width .15s linear;
}

.wizard-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top: 12px;
  border-top:1px solid var(--line);
  margin-top: 12px;
}

.hidden{ display:none !important; }

.toast{
  position:fixed;
  bottom:16px;
  left:16px;
  right:16px;
  max-width: var(--max);
  margin: 0 auto;
  background: rgba(0,0,0,.65);
  border:1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .15s linear, transform .15s linear;
  pointer-events:none;
}
.toast.show{ opacity:1; transform: translateY(0); }

.footer{
  border-top:1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 16px;
  gap: 8px;
}

.footer-logo{
  height: 80px;
  opacity: 0.9;
}

.footer-contact{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-contact a{
  color: rgba(199, 255, 255, 0.39);
  text-decoration: none;
  font-size: 14px;
}

.footer-contact a:hover{
  text-decoration: underline;
}

.switch{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.switch input{
  width: 18px;
  height: 18px;
  border-radius: 5px; /* force square */
}

.mini{ font-size:12px; color: var(--muted); line-height:1.35; }
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.2);
  color: var(--text);
}

.hazard-card{
  border:1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
  padding: 12px;
  margin-bottom: 10px;
}
.hazard-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hazard-title{
  font-weight:700;
  font-size:14px;
}
.hazard-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.scoreline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin: 8px 0;
}
.pill2{
  border:1px solid var(--line);
  border-radius:999px;
  padding: 6px 10px;
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size:12px;
}
.band-low{ color: var(--ok); }
.band-med{ color: var(--warn); }
.band-high{ color: var(--bad); }
.band-int{ color: #ff9aa5; }

/* Buttons that look like pills */
button.pill2{
  font: inherit;
  line-height: inherit;
  border: 1px solid var(--line);
  cursor: pointer;
}
button.pill2:active{ transform: translateY(1px); }

/* Subtle band backgrounds for band count pills */
.bandpill{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.bandpill.low{
  background: rgba(93,255,178,0.12);
  border-color: rgba(93,255,178,0.22);
}
.bandpill.med{
  background: rgba(255,207,102,0.12);
  border-color: rgba(255,207,102,0.22);
}
.bandpill.high{
  background: rgba(255,122,134,0.10);
  border-color: rgba(255,122,134,0.20);
}
.bandpill.int{
  background: rgba(255,154,165,0.10);
  border-color: rgba(255,154,165,0.22);
}

/* Tooltip */
.has-tip{ position:relative; }
.has-tip::after{
  content: attr(data-tip);
  position:absolute;
  left:0;
  bottom: calc(100% + 10px);
  width: 260px;
  max-width: 70vw;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.85);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .12s linear, transform .12s linear;
  z-index: 20;
}
.has-tip:hover::after,
.has-tip:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}

/* Count pop animation */
.count-pop{
  display:inline-block;
  animation: countPop .22s ease-out;
}
@keyframes countPop{
  0%{ transform: scale(0.92); }
  100%{ transform: scale(1); }
}

.small-table{
  width:100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.small-table th, .small-table td{
  border-bottom:1px solid var(--line);
  padding:8px 8px;
  font-size:12px;
}
.small-table th{ color: var(--muted); font-weight:600; }

.warnbox{
  border:1px solid var(--line);
  border-left: 4px solid var(--warn);
  background: rgba(255,207,102,.12);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  font-size:13px;
  margin-top: 10px;
}
.badbox{
  border:1px solid var(--line);
  border-left: 4px solid var(--bad);
  background: rgba(255,122,134,.12);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  font-size:13px;
  margin-top: 10px;
}

/* ========== TRACK 4: GUIDANCE + VALIDATION ========== */

.hintbox{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}

.hint-title{
  font-weight: 600;
  margin-bottom: 8px;
}

.checklist{
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.checkitem{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.18);
}

.dot.ok{
  background: rgba(120,255,180,0.35);
}

.dot.bad{
  background: rgba(255,120,120,0.35);
}

.field-error input,
.field-error textarea,
.field-error select{
  border-color: rgba(255,120,120,0.75) !important;
  box-shadow: 0 0 0 3px rgba(255,120,120,0.10);
}

.errtext{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.9;
}

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

/* ========== TRACK 6: SAVE STATUS ========== */
.badge.saved{
  border-color: rgba(120,255,180,0.35);
}

.badge.dirty{
  border-color: rgba(255,180,80,0.40);
}

.badge.saving{
  border-color: rgba(180,200,255,0.40);
}

#wizardSaveBadge{
  display: inline-flex;
}

/* ========== TRACK 8b: DASHBOARD CARDS (SINGLE ACTION SET) ========== */

#viewDashboard .table-wrap{ display:none; }

/* ===== Unified checkbox style (works everywhere) ===== */
input.dash-pick{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 5px;

  border: 1px solid var(--line);
  background: rgba(112, 112, 112, 0.336);

  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin: 0;
}


input.dash-pick:checked::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 9px;
  border: solid #061018;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Dashboard cards only, pin the picker top-right */
.dash-card-head input.dash-pick{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #44d1ff;
  margin: 0;
}

.dash-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap:12px;
  margin-top: 14px;
}

@media (max-width: 980px){
  .dash-cards{ grid-template-columns: 1fr; }
}

.dash-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: #11141b;
  padding: 14px;
}

.dash-card.is-selected{
  border-color: rgba(68,209,255,0.55);
  box-shadow: 0 0 0 3px rgba(68,209,255,0.15);
}

.dash-card-head{
  display:block;
  margin-bottom: 10px;
}


input.dash-pick:checked{
  background: var(--brand, #31849B);
  border-color: var(--brand, #31849B);
}

input.dash-pick:checked::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dash-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px 10px;
  font-size:13px;
  margin-bottom: 10px;
}
@media (max-width: 980px){
  .dash-meta{ grid-template-columns: 1fr; }
}

.dash-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 10px;
}

.dash-actions{
  justify-content:flex-start;
}

.history-dialog{
  width: min(900px, 92vw);
  border: none;
  border-radius: 14px;
  padding: 0;
}

.history-dialog::backdrop{
  background: rgba(0,0,0,0.55);
}

.history-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.history-title{
  font-size: 16px;
  font-weight: 700;
}

.history-sub{
  padding: 0 14px 12px 14px;
  opacity: 0.8;
  font-size: 13px;
}

.history-list{
  padding: 12px 14px 14px 14px;
  display: grid;
  gap: 10px;
}

.history-item{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px;
}

.history-row{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
}

.history-v{
  font-weight: 700;
}

.history-meta{
  opacity: 0.75;
  font-size: 12px;
  text-align: right;
}

.history-summary{
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.9;
}

.history-actions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.history-empty{
  padding: 10px;
  opacity: 0.8;
}

/* Save modal */
.save-dialog{
  width: min(720px, 92vw);
  border: none;
  border-radius: 14px;
  padding: 0;
}

.save-dialog::backdrop{
  background: rgba(0,0,0,0.55);
}

.save-form{
  padding: 0;
}

.save-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.save-title{
  font-size: 16px;
  font-weight: 700;
}

.save-body{
  padding: 14px;
  display: grid;
  gap: 12px;
}

.save-row{
  display: grid;
  gap: 8px;
}

.save-label{
  opacity: 0.85;
  font-size: 13px;
}

.save-radio{
  display: flex;
  gap: 10px;
  align-items: center;
}

.save-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: inherit;
}

.save-check{
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0.9;
}

.save-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Save modal refined */

.save-dialog{
  width: min(720px, 92vw);
  border-radius: 16px;
  border: 1px solid #44d1ff;              /* light blue edge */
  background: rgba(18, 22, 28, 0.95);     /* much less transparent */
  backdrop-filter: blur(6px);
  color: var(--text, #e9eef5);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.6),
    0 0 0 1px rgba(68,209,255,0.25);      /* subtle glow */
  padding: 0;
}

.save-dialog::backdrop{
  background: rgba(0,0,0,0.65);
}

.save-input{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: inherit;
}

.save-dialog .btn{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: inherit;
  transition: all 0.15s ease;
}

.save-dialog .btn:hover{
  background: rgba(68,209,255,0.15);
  border-color: #44d1ff;
}

.save-dialog .btn.ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
}

@keyframes bumpPop{
  0%{ transform: scale(1); box-shadow: none; }
  35%{ transform: scale(1.06); box-shadow: 0 0 0 2px rgba(68,209,255,0.35); }
  100%{ transform: scale(1); box-shadow: none; }
}

.badge.bump{
  animation: bumpPop 320ms ease;
}

.badge.bump-minor{
  animation: bumpMinor 320ms ease;
}

.badge.bump-major{
  animation: bumpMajor 420ms ease;
}

@keyframes bumpMinor{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.06); box-shadow: 0 0 0 2px rgba(68,209,255,0.35); }
  100%{ transform: scale(1); }
}

@keyframes bumpMajor{
  0%{ transform: scale(1); }
  35%{
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(255,120,120,0.45);
    background: rgba(255,60,60,0.12);
  }
  100%{ transform: scale(1); }
}

/* History modal styling aligned with Save modal */

.history-dialog{
  width: min(900px, 92vw);
  border-radius: 16px;
  border: 1px solid #44d1ff;
  background: rgba(18, 22, 28, 0.95);
  backdrop-filter: blur(6px);
  color: var(--text, #e9eef5);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.6),
    0 0 0 1px rgba(68,209,255,0.25);
  padding: 0;
}

.history-dialog::backdrop{
  background: rgba(0,0,0,0.65);
}

.history-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.history-sub{
  padding: 0 14px 12px 14px;
  opacity: 0.85;
  font-size: 13px;
}

.history-list{
  padding: 14px;
  display: grid;
  gap: 12px;
}

.history-item{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
}

.history-actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.brand-preview{
  margin-top: 10px;
  width: 120px;
  height: 120px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  padding: 10px;
}

.pill{
  padding:4px 8px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
}

.pill-band{ border:1px solid rgba(255,255,255,.18); }

.band-low{ background:#14391d; color:#bff2c9; }
.band-medium{ background:#3a2f12; color:#ffe0a6; }
.band-high{ background:#3a1717; color:#ffb3b3; }
.band-intolerable{ background:#2b0b0b; color:#ff9a9a; border-color: rgba(255,120,120,.55); }

.pill-review{ border:1px solid rgba(255,255,255,.18); }

.review-soon{ background:#3a2f12; color:#ffe0a6; }
.review-due{ background:#3a1717; color:#ffb3b3; }
.review-overdue{ background:#2b0b0b; color:#ff9a9a; border-color: rgba(255,120,120,.55); }

.dash-card.is-soon{ outline:1px solid rgba(255,224,166,.35); }
.dash-card.is-due{ outline:1px solid rgba(255,179,179,.45); }
.dash-card.is-overdue{ outline:2px solid rgba(255,154,154,.55); }

.pill-status{ border:1px solid rgba(255,255,255,.18); }

.status-draft{ background:#1f2937; color:#cbd5e1; }
.status-live{ background:#0f3a2d; color:#8ef0c6; }
.status-archived{ background:#2b2b2b; color:#999; }

.pill-progress{ border:1px solid rgba(255,255,255,.18); }

.progress-signed{ background:#0f3a2d; color:#8ef0c6; }
.progress-pending{ background:#3a2f12; color:#ffe0a6; }

.dash-title{
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  word-break:break-word;
  margin-bottom:8px;   /* space between title and pills */
}

.dash-pills{
  display:flex;
  flex-wrap:wrap;
  column-gap:8px;
  row-gap:8px;
  margin-top:6px;
}

.pill{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}


/* Action pill colours */
.pill.pill-open{
  background: rgba(93,255,178,0.10);
  border-color: rgba(93,255,178,0.22);
  color: rgba(225,255,240,0.95);
}

.pill.pill-delete{
  background: rgba(255,122,134,0.10);
  border-color: rgba(255,122,134,0.22);
  color: rgba(255,225,228,0.95);
}

.gap{gap:8px;}

/* Dashboard action buttons €“ tinted outline style */

.dash-actions .btn{
  background: transparent;
  border: 0.5px solid var(--line);
  transition: all .15s ease;
}

/* Open */
.dash-actions .btn[data-open]{
  border-color: rgba(93,255,178,0.35);
  color: rgba(180, 255, 225, 0.644);
}

.dash-actions .btn[data-open]:hover{
  background: rgba(93,255,178,0.08);
  transform: translateY(-1px);
}

/* Duplicate */
.dash-actions .btn[data-dup]{
  border-color: rgba(255,214,102,0.35);
  color: rgba(255, 228, 155, 0.644);
}

.dash-actions .btn[data-dup]:hover{
  background: rgba(255,214,102,0.08);
  transform: translateY(-1px);
}

/* Delete */
.dash-actions .btn[data-del]{
  border-color: rgba(255,122,134,0.35);
  color: rgba(255, 205, 210, 0.644);
}

.dash-actions .btn[data-del]:hover{
  background: rgba(255,122,134,0.08);
  transform: translateY(-1px);
}

/* History */
.dash-actions .btn[data-hist]{
  border-color: rgba(78,199,255,0.35);
  color: rgba(210, 240, 255, 0.644);
}

.dash-actions .btn[data-hist]:hover{
  background: rgba(78,199,255,0.08);
  transform: translateY(-1px);
}

/* Themed selects */


.grid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 980px){
  .grid4{ grid-template-columns: 1fr; }
}

/* ========================================
   DROPDOWN OPTIONS READABILITY FIX (v2)
   Paste at the VERY BOTTOM of styles.css
   If you added the previous dropdown patch,
   remove it or paste this BELOW it so this wins.
======================================== */

/* Keep the closed select themed */
.field select{
  background: var(--btn2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 38px 10px 12px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text); /* closed control text stays readable */
}

/* Custom arrow */
.field select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Force readable option colours in the dropdown list */
.field select option{
  color: #111;          /* readable on light popup */
  background: #fff;     /* match the native popup background */
}

/* Selected option highlight still uses system highlight, but text stays readable */
.field select option:checked{
  color: #111;
}

/* Keep your inputs and textareas themed (if another rule overrides) */
.field input,
.field textarea{
  background: var(--btn2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 10px;
  outline: none;
}

.dash-card-head{
  position: relative;
  padding-right: 34px;
}


.dash-card.is-selected{
  border-color: rgba(68,209,255,.6);
  box-shadow: 0 0 10px rgba(68,209,255,.2);
}

/* Keep card text inside the card */
.dash-card{
  overflow:hidden;
}

.dash-meta > div{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* If your Updated line uses muted/mini text, keep it wrapping too */
.dash-card .muted,
.dash-card .mini{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Cards: keep Updated inside the card */
.dash-card-head{
  overflow: hidden;
}

.dash-updated{
  position: absolute;
  top: 14px;
  right: 14px;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 12px;
}

/* Force dashboard card picker to be icon-only, top-right */
.dash-card-head{
  position: relative;
  padding-right: 34px;
}


/* Prevent any card header text from painting outside rounded corners */
.card{
  overflow: hidden;
}

/* Cards page: if Updated uses dash-pick by mistake, neutralise it */
div.dash-pick{
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cards page: make Updated a pill (it is currently a div.dash-pick) */
div.dash-pick{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--muted);

  font-size: 12px;
  line-height: 1;
  white-space: nowrap;

  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  position: static; /* prevents spill from any old absolute rules */
}

.pill-updated{
  background: #000000;
  border-color: rgba(68, 208, 255, 0.5);
  color: #88cee9b4; /* dark text for contrast */
}

.dash-card.is-archived{
  opacity: 0.65;
}

.dash-card.is-archived .badge{
  opacity: 0.9;
}

.btn-archive{
  border-color: #a54307e5;
  color: #fbbe249a;
}
.btn-archive:hover{
  background: rgba(251,191,36,0.08);
}

.btn-restore{
  border-color: #065f46;
  color: #34d399;
}
.btn-restore:hover{
  background: rgba(52,211,153,0.08);
}

.btn-danger{
  border-color: #7f1d1d;
  color: #f87171;
}
.btn-danger:hover{
  background: rgba(248,113,113,0.08);
}