/* =============================== */
/* Tracking ▸ At risk layout polish */
/* =============================== */

.risk-summary{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.risk-chip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  min-width: 240px;
}

.risk-chip-k{
  font-size: 12px;
  opacity: 0.85;
}

.risk-chip-v{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.risk-list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-group{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}

.risk-group-h{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.risk-group-title{
  font-weight: 700;
  letter-spacing: 0.2px;
}

.risk-group-meta{
  font-size: 12px;
  opacity: 0.75;
}

.risk-rows{
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.risk-row-date{
  font-weight: 600;
}

.risk-row-metric{
  font-size: 12px;
  opacity: 0.85;
}

.risk-row-sub{
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.35;
  word-break: break-word;
}

.risk-goal-card{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  padding: 12px;
}

.risk-goal-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.risk-goal-name{
  font-weight: 700;
}

.risk-goal-due{
  font-size: 12px;
  opacity: 0.75;
}

.risk-goal-note{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.35;
}


/* ---------- Plate map drawer (minimal V1) ---------- */
.plate-drawer{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
.plate-drawer[hidden]{
  display: none !important;
}
.plate-drawer-backdrop{
  flex: 1;
  background: rgba(0,0,0,0.35);
}
.plate-drawer-panel{
  width: min(1050px, 50vw);
  max-width: 1140px;
  min-width: 520px;
  height: 100%;
  background: var(--panel-bg, #101014);
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -12px 0 40px rgba(0,0,0,0.40);
  display: flex;
  flex-direction: column;
}
.plate-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
}
.plate-drawer-title{
  font-weight: 650;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plate-drawer-actions{ display: flex; gap: 8px; align-items: center; }
.plate-drawer-body{
  padding: 14px;
  overflow: auto;
}

/* Plate-level timing summary (read-only) */
.plate-timing-info{
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.plate-timing-info .pti-title{
  font-weight: 750;
  margin-bottom: 4px;
}
.plate-timing-info .pti-hint{
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  margin-bottom: 8px;
}
.plate-timing-info .pti-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.plate-timing-info .pti-label{
  font-size: 12px;
  color: rgba(255,255,255,0.78);
}
.plate-timing-info .pti-val{
  font-size: 12px;
  white-space: nowrap;
}
.plate-timing-info .pti-num{
  font-weight: 750;
}
.plate-timing-info .pti-muted{
  color: rgba(255,255,255,0.60);
  margin-left: 6px;
}
.plate-timing-info .pti-ovr{
  margin-left: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 1px 6px;
  border-radius: 999px;
}
.plate-timing-info .pti-def{
  margin-left: 8px;
  color: rgba(255,255,255,0.60);
}

.plate-timing-info textarea{
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 13px;
  min-height: 64px;
  resize: vertical;
  margin-top: 6px;
}
.plate-timing-info textarea:focus{
  outline: none;
  border-color: rgba(255,255,255,.5);
}

.plate-map-grid{
  width: 100%;
  position: relative;
}
.plate-map-wrap{
  width: 100%;
  max-width: 860px; /* Fixed container width */
  display: grid;
  grid-template-rows: auto repeat(var(--num-rows, 8), var(--well-size, 1fr));
  gap: 8px;
}
.plate-map-header,
.plate-map-row{
  display: grid;
  grid-template-columns: var(--row-header-width, 34px) repeat(var(--num-cols, 12), var(--well-size, 1fr));
  gap: 6px;
  align-items: center;
}
.plate-map-corner{ height: 20px; }
.plate-map-colhead,
.plate-map-rowhead{
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  text-align: center;
}
.plate-map-rowhead{ text-align: right; padding-right: 2px; }
.plate-map-well{
  aspect-ratio: 1 / 1;
  width: var(--well-size, 100%);
  height: var(--well-size, auto);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}
.plate-map-well:hover{
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.07);
}

/* --- Plate map well metadata visuals (demo) --- */
.plate-map-well{
  position: relative;
  overflow: hidden;
}

/* Optional per-well fill color (driven by "Color wells by") */
.plate-map-well.has-fill{
  background: var(--pm-fill-color, rgba(255,255,255,0.05));
}

/* Antibody hatch overlay (colored per antibody) */
.plate-map-well::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  /* Always hatch; the color is set per-well via --pm-antibody-color */
  background-image: repeating-linear-gradient(
    var(--pm-antibody-angle, 45deg),
    var(--pm-antibody-color, rgba(255,255,255,0.30)) 0 2px,
    rgba(0,0,0,0) 2px 8px
  );
  background-size: auto;
}
.plate-map-well.has-antibody::before{
  opacity: 1;
}

/* Backward-compatible class names (kept so nothing else breaks) */
.ab-pattern-0,.ab-pattern-1,.ab-pattern-2,.ab-pattern-3,.ab-pattern-4,.ab-pattern-5{ }

/* Cell line halo (strong) */
.plate-map-well::after{
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  border: 0 solid transparent;
  pointer-events: none;
}
.plate-map-well.has-cellline::after{
  border-width: 3px;
  border-color: var(--pm-cellline-color, rgba(255,255,255,0.80));
}

/* Condition badge */
.pm-condition-badge{
  position: absolute;
  bottom: 4px;
  left: 4px;
  display: none;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
}
.plate-map-well.has-condition .pm-condition-badge{
  display: inline-block;
}

/* Hide text in badges for small wells (384-well) - keep color only */
.plate-map-wrap[data-cols="24"] .pm-condition-badge{
  font-size: 0;
  min-width: 8px;
  min-height: 8px;
  padding: 3px;
}

/* Plate-map legend (always visible) */
.plate-map-legend{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.78);
  font-size: 12px;
}

/* Compact legend under mini plate maps (Imaging view) */
.pm-mini-legend{
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 11px;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  max-height: 150px;
  overflow: auto;
}

.pm-legend-section{
  min-width: 0;
}
.pm-legend-title{
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin-bottom: 6px;
}
.pm-legend-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-legend-entry{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  user-select: none;
}
.pm-legend-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-legend-empty{
  color: rgba(255,255,255,0.55);
  font-style: italic;
}
.pm-legend-swatch{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  color: rgba(255,255,255,0.92);
}
.pm-legend-ring{
  background: transparent;
  border: 3px solid rgba(255,255,255,0.80);
}
.pm-legend-pattern{
  background: rgba(255,255,255,0.06);
  background-image: repeating-linear-gradient(
    var(--pm-antibody-angle, 45deg),
    var(--pm-antibody-color, rgba(255,255,255,0.30)) 0 2px,
    rgba(0,0,0,0) 2px 8px
  );
  background-size: auto;
  border: 1px solid rgba(255,255,255,0.18);
}
.pm-legend-badge{
  width: auto;
  height: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.22);
}

/* Quick entry controls */
.plate-map-controls{
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plate-map-control-row{
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 8px;
  align-items: center;
}

.plate-map-control-btns{
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}
.plate-map-control-label{
  font-size: 12px;
  color: rgba(255,255,255,0.78);
}
.plate-map-control-input{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  outline: none;
}
.plate-map-control-input.pm-mixed{
  color: rgba(255,255,255,0.65);
  font-style: italic;
}
.plate-map-control-input:focus{
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
}

.plate-map-well.is-selected{
  border-color: rgba(255,255,255,0.90);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.09);
}

/* Drag-select marquee */
.plate-map-marquee{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 10px;
  background: rgba(59,130,246,0.10);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.10);
  pointer-events: none;
  z-index: 5;
}

.plate-map-selected-info{
  font-size: 12px;
  color: rgba(255,255,255,0.80);
  margin-bottom: 10px;
}

.plate-map-help{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  line-height: 1.35;
}

.kbd{
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,0.18);
  border-bottom-color: rgba(255,255,255,0.28);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  margin: 0 2px;
}

/* Simple, readable V1 styling */
:root{
  --bg: #0b1020;
  --panel: #0f1833;
  --panel2: #101b3a;
  --text: #e8ecff;
  --muted: #aeb7e6;
  --border: rgba(255,255,255,.10);
  --shadow: rgba(0,0,0,.35);

  --seeding: #4b74ff;
  --induction: #a855f7;
  --imaging: #22c55e;
  --staining: #f59e0b;
  --fix: #94a3b8;
  --danger: #ef4444;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 700px at 10% 0%, #142255 0%, var(--bg) 55%);
  color: var(--text);
}

.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 8px 8px;
  line-height: 1;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  background: rgba(11,16,32,.72);
}

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

.brand-title{
  display: block;
  margin: 0;
  line-height: 0;
  font-weight: 700;
  letter-spacing: .2px;
}
.brand-planner{
  color: #d8a34b;
  font-weight: 700;
  line-height: 1;
}
.brand-subtitle{
  color: var(--muted);
  font-size: 12px;
  margin-top: 0;
}

.toolbar{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- View switch (Calendar / Experiments / Plates) --- */
.view-switch{
  display:flex;
  align-items:center;
  gap: 10px;
}

.view-label{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.2px;
  user-select: none;
}

.view-tabs{
  display:inline-flex;
  align-items:stretch;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.15);
}

.btn.view-tab{
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 7px 12px;
  background: transparent;
  color: var(--text);
  opacity: 0.78;
}

.btn.view-tab:hover{
  opacity: 0.95;
  background: rgba(255,255,255,0.06);
}

.btn.view-tab.view-tab-active{
  opacity: 1;
  background: rgba(255,255,255,0.10);
}

.btn.view-tab:focus-visible{
  outline: 2px solid rgba(255,255,255,0.20);
  outline-offset: -2px;
}

/* ---------- Topbar: compact time group + dropdown menus (V3.2 UI) ---------- */
.btn-group{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-icon{ padding: 6px 9px; }

.dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dropdown-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: rgba(16,27,58,.98);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 8px;
  z-index: 999;
}
.dropdown-item{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  margin: 6px 0;
}
.dropdown-item:hover{ background: rgba(255,255,255,.10); }
.dropdown-item.btn-active{
  outline: 2px solid rgba(255,255,255,.18);
}
.dropdown-sep{
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 8px 2px;
}
.dropdown-danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.45);
}
.dropdown-danger:hover{ background: rgba(239,68,68,.24); }

.divider{
  width:1px;
  height: 22px;
  background: var(--border);
  margin: 0 6px;
}

.btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- Unsaved changes indicator (Data menu button) ---------- */
#btnData{ position: relative; }
#btnData.is-dirty{
  color: #E6A700 !important;
}
#btnData.is-dirty::after{
  content: '';
  position: absolute;
  top: 4px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E6A700;
}

.btn-block{ width:100%; display:block; }
.btn-primary{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.45);
}
.btn-primary:hover{ background: rgba(34,197,94,.24); }
.btn-secondary{
  background: rgba(255,255,255,.03);
}
.btn-active{
  outline: 2px solid rgba(255,255,255,.18);
}
.btn-danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.45);
}
.btn-danger:hover{ background: rgba(239,68,68,.24); }

.layout{
  display:grid;
  align-items: start;
  grid-template-columns: 380px 1fr;
  gap: 14px;
  padding: 14px;
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 60px var(--shadow);
  height: calc(100vh - 90px);
  overflow: auto;
}

.create-panel{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.create-panel.edit-mode{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.35);
}

.panel h2{
  margin: 6px 0 10px;
  font-size: 15px;
  letter-spacing: .2px;
}
hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* --- Left sidebar: clearer section separation (Experiments / Filters / Selected day) --- */
.sidebar-section{
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}

.sidebar-section:first-of-type{ margin-top: 8px; }

.sidebar-section-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sidebar-section h2{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(232,236,255,.92);
}

.section-icon{
  display:inline-block;
  margin-right: 8px;
  opacity: .85;
  transform: translateY(-1px);
}

.sidebar-section-day{
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.12);
}

.sidebar-section-filters .checkbox{ margin: 6px 0; }

/* ---------- Sidebar Filters: collapsible (Program + Steps) ---------- */
.filters-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  /* Make the entry point very visible while keeping the rest of the UI quiet */
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 900;
  border-radius: 12px;
}
.filters-toggle-left{ display: inline-flex; align-items: center; }
.filters-toggle-chevron{ opacity: .9; }
.filters-body{ margin-top: 10px; }
.filters-body[hidden]{ display:none !important; }
.filters-subhead{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(232,236,255,.82);
  margin: 2px 0 6px;
}
.filters-subsep{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 10px 0;
}
.filters-subhead-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 2px 0 6px;
  cursor: pointer;
  color: inherit;
}
.filters-subhead-toggle:hover{ color: rgba(255,255,255,1); }
.filters-subhead-toggle[data-locked="true"]{ cursor: default; }
.filters-subhead-toggle[data-locked="true"]:hover{ color: rgba(232,236,255,.82); }
.filters-sub-chevron{
  opacity: .7;
  font-size: 11px;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}
.filters-subhead-toggle[aria-expanded="true"] .filters-sub-chevron{ transform: rotate(0deg); }
.filters-subgroup[hidden]{ display: none !important; }
.program-filter-actions{
  display:flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.program-filter-actions .link-btn{ font-size: 12px; }

.form label{
  display:block;
  margin: 10px 0;
  font-size: 13px;
  color: var(--muted);
}
.form input, .form textarea, .form select{
  width: 100%;
  margin-top: 6px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline: none;
}
.form input:focus, .form textarea:focus, .form select:focus{
  border-color: rgba(255,255,255,.22);
}
.hint{ margin-top:6px; font-size: 12px; color: rgba(174,183,230,.85); }

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.checkbox{
  display:flex !important;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.checkbox input{ width: auto; margin: 0; }

.exp-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Experiments panel: active list + search ---------- */
.exp-sections{ display:flex; flex-direction: column; gap: 12px; }
.exp-section{ display:flex; flex-direction: column; gap: 8px; }
.exp-section-head{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.exp-section-title{ font-weight: 900; font-size: 13px; letter-spacing: .2px; }
.exp-scroll{
  max-height: 260px;
  overflow: auto;
  padding-right: 6px; /* keep scrollbar off cards */
}
.exp-scroll-search{ max-height: 220px; }
.exp-search{
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline: none;
  font-size: 13px;
}
.exp-search:focus{ border-color: rgba(255,255,255,.22); }
.exp-card{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 10px;
}
.exp-card .top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}
.exp-card .id{
  font-weight: 800;
}
.exp-card .meta{
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.exp-card .actions{
  display:flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

/* Two-line actions inside experiment cards */
.actions-row{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Selected experiment: allow stacked full-width buttons (Export / Delete) */
.exp-card.selected .actions{ align-items: stretch; }
.actions-row.actions-row-block{ align-self: stretch; }

.icon-btn-block{ width: 100%; display:block; text-align:center; }

.icon-btn.icon-btn-primary{
  /* Make "Export to OneNote" stand out as the primary action on selected cards */
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.55);
  color: rgba(8,10,20,.92);
}
.icon-btn.icon-btn-primary:hover{ background: rgba(255,255,255,.98); }

.icon-btn.icon-btn-danger{
  /* Destructive action: red + visually smaller */
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.55);
  color: rgba(255,235,235,.98);
  padding: 5px 8px;
  font-size: 11.5px;
}
.icon-btn.icon-btn-danger:hover{ background: rgba(239,68,68,.24); }

/* Bold short description directly under title/buttons */
.exp-desc{
  margin-top: 8px;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(232,236,255,.98);
}
.icon-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
}
.icon-btn:hover{ background: rgba(255,255,255,.10); }

.day-panel{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 10px;
  min-height: 80px;
}
.day-panel h3{
  margin: 0 0 8px;
  font-size: 14px;
}
.day-item{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 8px 0;
}
.day-item:first-of-type{ border-top: 0; }
.day-item .left{ min-width: 0; }
.day-item .label{ font-weight: 700; font-size: 13px; }
.day-item .sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}
.muted{ color: var(--muted); font-size: 12px; }

.calendar-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 60px var(--shadow);
  overflow: hidden;
  display:flex;
  flex-direction: column;
  height: calc(100vh - 90px);
}
.calendar-header{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
}
.range-label{
  font-weight: 800;
  letter-spacing: .2px;
}
.legend{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.legend-item{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.18);
}
.swatch-seeding{ background: var(--seeding); }
.swatch-induction{ background: var(--induction); }
.swatch-imaging{ background: var(--imaging); }
.swatch-staining{ background: var(--staining); }
.swatch-fix{ background: var(--fix); }
.swatch-coating{ background: #06b6d4; }

.calendar{
  padding: 12px;
  overflow: auto;
  flex: 1;
}
.grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.dow{
  font-size: 12px;
  color: var(--muted);
  padding: 0 6px 4px;
}
.day{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 192px;
  background: rgba(0,0,0,.14);
  overflow: hidden;
}

/* ---------- Weekends + special days (visual planning signal; not blocking) ---------- */
.day.day-weekend{
  border-top: 3px solid rgba(148,163,184,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0) 42%),
    rgba(0,0,0,.14);
}

.day.day-special{
  border-top: 3px solid rgba(59,130,246,.55);
  background:
    linear-gradient(180deg, rgba(59,130,246,.10), rgba(0,0,0,0) 48%),
    rgba(0,0,0,.14);
}

/* Type-specific accents (subtle differences) */
.day.day-special-holiday{
  border-top-color: rgba(245,158,11,.65);
  background:
    linear-gradient(180deg, rgba(245,158,11,.10), rgba(0,0,0,0) 48%),
    rgba(0,0,0,.14);
}
.day.day-special-retreat{
  border-top-color: rgba(168,85,247,.65);
  background:
    linear-gradient(180deg, rgba(168,85,247,.12), rgba(0,0,0,0) 48%),
    rgba(0,0,0,.14);
}
.day.day-special-maintenance{
  border-top-color: rgba(34,197,94,.60);
  background:
    linear-gradient(180deg, rgba(34,197,94,.10), rgba(0,0,0,0) 48%),
    rgba(0,0,0,.14);
}
.day.day-special-other{
  border-top-color: rgba(148,163,184,.60);
  background:
    linear-gradient(180deg, rgba(148,163,184,.10), rgba(0,0,0,0) 48%),
    rgba(0,0,0,.14);
}

.special-day-label{
  display:inline-flex;
  align-items:center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(232,236,255,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
  flex: 0 1 auto;
}
.day:hover{
  border-color: rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
}
.day .head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.day .date{
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.day .small{
  color: var(--muted);
  font-size: 11px;
}

.items{
  padding: 8px 8px 10px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.block{
  position: relative;
  border-radius: 10px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.14);
  color: white;
  font-weight: 800;
  font-size: 12px;
  cursor: grab;
  user-select: none;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block:active{ cursor: grabbing; }
.block:hover{ outline: 2px solid rgba(255,255,255,.22); }

.block.coating{ background: color-mix(in srgb, #06b6d4 72%, black 28%); }
.block.seeding{ background: color-mix(in srgb, var(--seeding) 72%, black 28%); }
.block.induction{ background: color-mix(in srgb, var(--induction) 72%, black 28%); }
.block.imaging{ background: color-mix(in srgb, var(--imaging) 72%, black 28%); }
.block.fixation{ background: color-mix(in srgb, #9ca3af 72%, black 28%); }

.block.staining{ background: color-mix(in srgb, var(--staining) 72%, black 28%); }

.block .fix-badge{
  position:absolute;
  right: 8px;
  bottom: 6px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
}
.block .ghost{
  opacity: .9;
}

.more{
  padding: 0 8px 10px;
  color: var(--muted);
  font-size: 12px;
  cursor:pointer;
}
.more:hover{ text-decoration: underline; }

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 18px 60px var(--shadow);
}

/* Toast action (e.g., Undo) */
.toast.has-action{
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast .toast-msg{ white-space: nowrap; }
.toast .toast-action{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: rgba(200, 215, 255, .92);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.toast .toast-action:hover{ color: rgba(235, 240, 255, 1); }

/* Temporary highlight for last-changed blocks */
.block.flash{
  outline: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 6px rgba(59,130,246,.18);
}



@media print{
  /* Try hard to preserve on-screen colors in PDF/print */
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body{ background: white !important; color: black !important; }
  .topbar, .panel, .toast{ display:none !important; }
  .layout{ grid-template-columns: 1fr !important; padding: 0 !important; }
  .calendar-wrap{
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
  }
  .calendar-header{
    border-bottom: 1px solid #ddd !important;
    background: white !important;
    color: black !important;
  }
  .range-label{ color: black !important; }
  .legend-item{ color: #333 !important; }
  .day{ background: white !important; color: black !important; border: 1px solid #ddd !important; }
  .day .head{ border-bottom: 1px solid #eee !important; }
  .dow{ color: #333 !important; }
  .block{ border: 1px solid rgba(0,0,0,.25) !important; }
  .block .fix-badge{ border: 1px solid rgba(0,0,0,.35) !important; }

  /* --- Plate Map export (in-place print) --- */
  body.printing-plate-map .layout{ display:none !important; }
  body.printing-plate-map #pm-print-root{ display:block !important; }
  body.printing-plate-map{ background: white !important; color: black !important; }

  /* Keep the export to a single page: slightly smaller typography + tighter spacing */
  body.printing-plate-map .pm-print-wrap{ padding: 10px; }
  body.printing-plate-map .pm-print-title{ font-size: 14px; font-weight: 800; margin-bottom: 2px; }
  body.printing-plate-map .pm-print-sub{ font-size: 10px; opacity: .75; margin-bottom: 8px; }
  body.printing-plate-map .pm-print-content{ display: grid; gap: 8px; }

  /* Compact the grid for printing */
  body.printing-plate-map .plate-map-wrap{ gap: 4px !important; }
  body.printing-plate-map .plate-map-header,
  body.printing-plate-map .plate-map-row{
    grid-template-columns: 26px repeat(var(--num-cols, 12), 1fr) !important;
    gap: 3px !important;
  }
  body.printing-plate-map .plate-map-colhead,
  body.printing-plate-map .plate-map-rowhead{ font-size: 10px !important; }
  body.printing-plate-map .plate-map-well{ border-radius: 4px !important; }
  body.printing-plate-map .pm-condition-badge{
    font-size: 9px !important;
    padding: 1px 4px !important;
    border-radius: 999px !important;
    bottom: 2px !important;
    left: 2px !important;
    max-width: calc(100% - 6px) !important;
  }

  /* Compact legend (still fully visible) */
  body.printing-plate-map .plate-map-legend{
    margin-top: 6px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    font-size: 10px !important;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
  body.printing-plate-map .pm-legend-list{ gap: 4px !important; }
  body.printing-plate-map .pm-legend-entry{ gap: 6px !important; }
  body.printing-plate-map .pm-legend-swatch{ width: 14px !important; height: 14px !important; border-radius: 5px !important; }

  /* Clean export: no marquee, no selection highlight */
  body.printing-plate-map .plate-map-marquee{ display:none !important; }
  body.printing-plate-map .plate-map-well.is-selected{
    border-color: rgba(0,0,0,.25) !important;
    box-shadow: none !important;
    background: transparent !important;
  }


  /* --- Plate Map: print-only export (map + legend + title/barcode) --- */
  body.printing-plate-map > :not(#plate-map-print-root){
    display: none !important;
  }
  #plate-map-print-root{
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: black !important;
    /* Use native print scaling to avoid partial grid rendering / clipping */
    zoom: 1;
  }
  #plate-map-print-root .pm-print-header{
    margin: 0 0 10px 0;
  }
  #plate-map-print-root .pm-print-title{
    font-size: 16px;
    font-weight: 800;
    color: black;
    margin-bottom: 2px;
  }
  #plate-map-print-root .pm-print-barcode{
    font-size: 12px;
    font-weight: 700;
    color: #222;
  }
  #plate-map-print-root .pm-print-content{
    display: grid;
    gap: 10px;
  }

  /* --- High-contrast, full-grid print overrides --- */
  #plate-map-print-root .plate-map-grid,
  #plate-map-print-root .plate-map-wrap{
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Force rows to size to content (avoid fr-row collapsing in some print engines) */
  #plate-map-print-root .plate-map-wrap{
    grid-template-rows: auto repeat(var(--num-rows, 8), auto) !important;
    gap: 6px !important;
  }

  /* Make the grid reliably visible on white paper */
  #plate-map-print-root .plate-map-colhead,
  #plate-map-print-root .plate-map-rowhead{
    color: #111 !important;
    font-weight: 700 !important;
  }

  /* Use physical sizes so wells render and stay readable */
  #plate-map-print-root .plate-map-header,
  #plate-map-print-root .plate-map-row{
    grid-template-columns: 9mm repeat(var(--num-cols, 12), 1fr) !important;
    gap: 4mm !important;
  }
  #plate-map-print-root .plate-map-corner{ height: 6mm !important; }
  #plate-map-print-root .plate-map-colhead,
  #plate-map-print-root .plate-map-rowhead{ font-size: 10pt !important; }

  #plate-map-print-root .plate-map-well{
    width: 12mm !important;
    height: 12mm !important;
    aspect-ratio: auto !important;
    background: #fff !important;
    border: 1.6px solid #222 !important;
    border-radius: 3mm !important;
    box-shadow: none !important;
  }

  /* Make antibody hatch visible on white paper */
  #plate-map-print-root .plate-map-well::before{
    opacity: 0.75 !important;
  }

  /* Cell line halo should remain bold */
  #plate-map-print-root .plate-map-well::after{
    inset: 2px !important;
    border-radius: 3mm !important;
  }
  #plate-map-print-root .plate-map-well.has-cellline::after{
    border-width: 3px !important;
  }

  /* Condition badge: invert for paper */
  #plate-map-print-root .pm-condition-badge{
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #222 !important;
    font-weight: 800 !important;
  }

  /* Legend: show text clearly and make swatches readable */
  #plate-map-print-root .plate-map-legend{
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #bbb !important;
  }
  #plate-map-print-root .pm-legend-title{ color: #111 !important; font-weight: 800 !important; }
  #plate-map-print-root .pm-legend-text{ color: #111 !important; }
  #plate-map-print-root .pm-legend-empty{ color: #333 !important; }
  #plate-map-print-root .pm-legend-swatch{
    width: 18px !important;
    height: 18px !important;
    /* Keep swatches in COLOR (border/background set inline via JS for rings / via CSS vars for patterns).
       Only enforce thickness/style for print readability. */
    border-width: 2px !important;
    border-style: solid !important;
  }

  /* Make antibody pattern swatches readable on white paper (keep color via --pm-antibody-color). */
  #plate-map-print-root .pm-legend-pattern{
    background: #fff !important;
    border-color: rgba(0,0,0,0.35) !important;
    background-image: repeating-linear-gradient(
      var(--pm-antibody-angle, 45deg),
      var(--pm-antibody-color, rgba(0,0,0,0.35)) 0 2px,
      rgba(0,0,0,0) 2px 7px
    ) !important;
  }

  /* Condition badge swatches: paper-friendly but still distinct. */
  #plate-map-print-root .pm-legend-badge{
    background: #fff !important;
    color: #111 !important;
    border-color: rgba(0,0,0,0.45) !important;
  }

  #plate-map-print-root .plate-map-help{ display:none !important; }
  #plate-map-print-root .plate-map-marquee{ display:none !important; }
}

/* Hidden by default; only shown during print when body has .printing-plate-map */
#pm-print-root{ display:none; }

.filters{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.mode-label{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}


/* Export JSON – result modal vertical offset (keep in sync with validation modal) */
#exportResultModal .modal-card{
  transform: translateY(200px);
}

/* OneNote export modal */
.modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
}
.modal[hidden]{ display:none; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.modal-card{
  position: relative;
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(16,27,58,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.modal-body{
  padding: 12px;
}
.modal-body textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  resize: vertical;
}
.modal-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
}

/* Export → Validate latest (modal helpers) */
/* UI fix: the Export JSON validation prompt was slightly too high and could be clipped under the top bar. */
#exportValidateModal .modal-card{
  transform: translateY(200px);
}
.export-validate-intro{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.export-validate-lead{
  font-weight: 900;
  letter-spacing: .2px;
}
.export-validate-note{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.export-validate-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.export-validate-skip{
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}
.export-validate-skip:hover{ color: var(--text); }
.export-validate-result{
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.35;
}

/* ---------- List View (table) ---------- */
.list-view{
  padding: 12px;
}
.list-view .panel{
  background: rgba(16,27,58,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.list-view .panelHead{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.list-view .panelHead .h{
  font-weight: 900;
}
.list-view .muted{
  opacity: .8;
  font-size: 13px;
}

/* ---------- List View search tools ---------- */
.list-view .lv-tools{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px 0 12px;
}
.list-view .lv-search{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 1;
}
.list-view .lv-search-input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
}
.list-view .lv-search-clear{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
}
.list-view .lv-count{
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  opacity: .7;
}

.list-view .lv-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  opacity: .85;
  user-select: none;
}
.list-view .lv-toggle input{
  transform: translateY(1px);
}

.list-view tbody tr.lv-group-row td{
  padding: 8px 12px;
  font-weight: 900;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.list-view .lv-group-chev{
  display:inline-block;
  width: 16px;
  opacity: .9;
}
.list-view .lv-group-title{
  opacity: .95;
}

.list-view tbody tr.lv-row-child td.id{
  padding-left: 28px;
}


.list-view .lv-tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px 0 12px;
}
.list-view tbody tr.lv-row-selected{
  background: rgba(255,255,255,.10);
  outline: 2px solid rgba(255,255,255,.16);
  outline-offset: -2px;
}

/* Plates view: when an experiment is selected elsewhere, non-matching rows are visually de-prioritized. */
.list-view tbody tr.lv-dim{
  opacity: .45;
}

.list-view .lv-context-hint{
  font-size: 12px;
  opacity: .75;
}
.list-view table{
  width: 100%;
  border-collapse: collapse;
}
.list-view th, .list-view td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}
.list-view th{
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  opacity: .8;
  background: rgba(0,0,0,.18);
}
.list-view tbody tr:hover{
  background: rgba(255,255,255,.06);
}
.list-view .id{
  font-weight: 900;
  white-space: nowrap;
}
.list-view .desc{
  max-width: 640px;
}
.list-view .tag{
  display:inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 12px;
  opacity: .85;
  white-space: nowrap;
}
.list-view .right{
  text-align: right;
  white-space: nowrap;
}

/* ---------- List View editable fields ---------- */
.list-view input.lv-input,
.list-view select.lv-input,
.list-view textarea.lv-input{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 6px 8px;
  font-size: 13px;
}

/* Tooltip wrapper for disabled selects (Safari often won't show title on disabled controls) */
.lv-locked{
  display: block;
  cursor: help;
}
.lv-locked select.lv-input{
  cursor: not-allowed;
}

/* Ensure native dropdown menus are readable in dark theme (browser UIs vary).
   - color-scheme encourages a dark native popup
   - option/optgroup colors help when supported */
.list-view select.lv-input{ color-scheme: dark; }
.list-view select.lv-input option,
.list-view select.lv-input optgroup{
  background: rgba(16,27,58,.98);
  color: var(--text);
}
.list-view textarea.lv-input{
  min-height: 54px;
  resize: vertical;
}
.list-view td.cell{ min-width: 140px; }
.list-view td.cell-notes{ min-width: 260px; }
.list-view td.cell-desc{ min-width: 320px; }

/* ---------- List View OneNote fields ---------- */
.list-view .btn-small{
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}
.list-view tr.details-row td{
  background: rgba(0,0,0,.14);
}
.list-view .details{
  padding: 10px 0;
}
.list-view .details-grid{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 14px;
  align-items: start;
}
@media (max-width: 1100px){
  .list-view .details-grid{ grid-template-columns: 1fr; }
}
.list-view .field-label{
  font-size: 12px;
  font-weight: 900;
  opacity: .82;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.list-view .field-control{
  width: 100%;
}
.list-view .pill{
  display:inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 12px;
  opacity: .9;
  white-space: nowrap;
}

/* ---------- Modal (generic) ---------- */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.modal[hidden]{ display:none !important; }
.modalCard{
  width: min(720px, 100%);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  background: rgba(20,20,24,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  overflow:hidden;
}
.modalTitle{
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,.10);
  flex-shrink: 0;
}
.modalBody{ 
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.modalActions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  flex-shrink: 0;
}
.radioRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  margin: 8px 0;
}
.btn.primary{
  background: rgba(255,255,255,.92);
  color: #111;
}

/* ---------- List views: keep headers visible and tables scrollable ---------- */
.list-view{
  height: calc(100vh - 90px);
  overflow: hidden;
}
.list-view .panel{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.list-view .tableScroller{
  flex: 1;
  min-height: 0; /* critical so overflow works inside flex */
  overflow: auto;
}


/* V2.2: Sticky headers */
.list-view thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* V2.2: Plate status color-coding */
.status-pill{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.14);
}
.status-ok{ background: rgba(34,197,94,.22); color:#bbf7d0; }
.status-failed{ background: rgba(239,68,68,.22); color:#fecaca; }
.status-not-imaged{ background: rgba(148,163,184,.22); color:#e5e7eb; }
.status-unknown{ background: rgba(148,163,184,.12); color:#e5e7eb; }


/* V2.3: Calendar visibility controls */
.cal-vis{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.vis-status{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.btn-small{
  padding: 6px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}
.exp-card.hidden-exp{
  opacity: .72;
}
.hidden-pill{
  display:inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  background: rgba(0,0,0,.12);
  white-space: nowrap;
}


/* Experiments panel: Selected experiment + collapsible Active list (Option 2) */
.exp-card.selected{
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.selected-pill{
  display:inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(59,130,246,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #cfe3ff;
  background: rgba(59,130,246,.18);
  white-space: nowrap;
}

.idea-pill{
  display:inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(230,167,0,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #ffe7a6;
  background: rgba(230,167,0,.14);
  white-space: nowrap;
}
.exp-active-controls{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content: flex-end;
}
.link-btn{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: rgba(200, 215, 255, .92);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover{ color: rgba(235, 240, 255, 1); }


/* ---------- Option A: highlight selected experiment across the calendar ---------- */
.block.block-dim{
  opacity: .45;
  filter: saturate(.85);
}

.block.block-related{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 0px;
}

.block.block-active{
  outline: 3px solid rgba(255,255,255,.62);
  box-shadow: 0 0 0 6px rgba(59,130,246,.18);
}

/* --- Ghost preview blocks (during drag) --- */
.ghost-block{
  opacity: 0.28;
  border: 1px dashed rgba(0,0,0,0.45);
  pointer-events: none;
  font-style: italic;
}
.day.drop .ghost-block{ opacity: 0.38; }

/* --- Day load / capacity badges --- */
.day .head{ position: relative; }

/* Top-right compact warning chips */
.load-badges{
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  z-index: 3;
}
.load-badge{
  cursor: help;
  cursor: help;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(120, 16, 24, .85); /* dark red */
  color: rgba(255,255,255,.98);
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.load-badge:hover{
  background: rgba(160, 20, 32, .92);
}


/* --- Hover tooltip (for capacity badges) --- */
.hover-tip{
  position: fixed;
  z-index: 10000;
  max-width: 420px;
  background: rgba(16,27,58,.96);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 8px 10px;
  color: rgba(255,255,255,.98);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  pointer-events: none;
  transform: translate(0,0);
}
.hover-tip .tip-title{ font-weight: 900; margin-bottom: 4px; }
.hover-tip .tip-body{ opacity: .92; }


/* ---------- Settings modal table ---------- */
.settings-section{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 10px;
}

/* ---------- Settings modal tabs ---------- */
.settings-tabs{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.settings-tab{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  opacity: .82;
}
.settings-tab:hover{ background: rgba(255,255,255,.10); opacity: .95; }
.settings-tab-active{
  opacity: 1;
  background: rgba(255,255,255,.12);
  outline: 2px solid rgba(255,255,255,.18);
}
.settings-panel[hidden]{ display:none !important; }
.settings-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.settings-h{
  font-weight: 900;
  letter-spacing: .2px;
}
.settings-table-wrap{
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
}
.settings-table{
  width: 100%;
  border-collapse: collapse;
  background: rgba(0,0,0,.08);
}
.settings-table th, .settings-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}
.settings-table th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  opacity: .85;
  background: rgba(255,255,255,.04);
  position: sticky;
  top: 0;
  z-index: 1;
}
.settings-input{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 7px 8px;
  font-size: 13px;
  outline: none;
}
.settings-input:focus{ border-color: rgba(255,255,255,.24); }
.settings-input.small{ text-align:center; }

/* Ensure native dropdown menus are readable in dark theme for Settings.
   (Matches the List View / Plate Status dropdown styling.) */
.settings-panel select.settings-input{ color-scheme: dark; }
.settings-panel select.settings-input option,
.settings-panel select.settings-input optgroup{
  background: rgba(16,27,58,.98);
  color: var(--text);
}
.settings-textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  resize: vertical;
}
.settings-textarea:focus{ border-color: rgba(255,255,255,.24); }
.del-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,.45);
  background: rgba(239,68,68,.14);
  color: rgba(255,235,235,.98);
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.del-btn:hover{ background: rgba(239,68,68,.24); }


/* ---------- Getting Started (accordion) ---------- */
.getting-started h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
}

.gs-toggle{
  width: 100%;
  text-align: left;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
}

.gs-toggle:hover{ background: rgba(255,255,255,.09); }

.gs-toggle::after{
  content: '\25B8';
  float: right;
  opacity: .9;
}

.gs-toggle[aria-expanded="true"]::after{ content: '\25BE'; }

.gs-panel{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}

.gs-panel p{ margin: 8px 0; }
.gs-panel ul, .gs-panel ol{ margin: 8px 0 8px 22px; }


/* ---------- Calendar format: Today (execution) view ---------- */
.today-grid{
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
  overflow: auto;
}

.today-bucket{
  /* Accent color (set per bucket via .accent-* classes) */
  --today-accent: rgba(148,163,184,.75);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

/* Reuse the existing step color code in Today view */
.today-bucket.accent-coating, .today-card.accent-coating{ --today-accent: #06b6d4; }
.today-bucket.accent-seeding, .today-card.accent-seeding{ --today-accent: var(--seeding); }
.today-bucket.accent-induction, .today-card.accent-induction{ --today-accent: var(--induction); }
.today-bucket.accent-imaging, .today-card.accent-imaging{ --today-accent: var(--imaging); }
.today-bucket.accent-fix, .today-card.accent-fix{ --today-accent: var(--fix); }
.today-bucket.accent-stain, .today-card.accent-stain{ --today-accent: var(--staining); }

.today-bucket-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 8px;
  border-top: 3px solid var(--today-accent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.today-bucket-title{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  opacity: .92;
}

.today-swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  background: var(--today-accent);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  flex: 0 0 auto;
}

.today-bucket-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.today-warn{
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(120, 16, 24, .85);
  color: rgba(255,255,255,.98);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: help;
}
.today-warn:hover{ background: rgba(160, 20, 32, .92); }

.today-bucket-count{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
}

.today-cards{
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* Imaging: group by instrument (platform) inside the Imaging bucket */
.today-subgroup{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 2px;
}

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

.today-subtitle{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(232,236,255,.92);
  opacity: .9;
}

.today-submeta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.today-subcount{
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
}

.today-subwarn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(120, 16, 24, .85);
  color: rgba(255,255,255,.98);
  font-size: 11px;
  font-weight: 900;
  cursor: help;
}
.today-subwarn:hover{ background: rgba(160, 20, 32, .92); }

.today-subrule{
  height: 1px;
  background: rgba(255,255,255,.10);
}

.today-empty{
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  opacity: .85;
}

.today-card{
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 10px 10px 10px 14px;
}

/* Left accent stripe to carry the step color code */
.today-card::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--today-accent);
  border-radius: 12px 0 0 12px;
  opacity: .95;
}

.today-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.today-card-id{
  font-weight: 900;
  letter-spacing: .2px;
}

.today-card-goal{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  background: rgba(0,0,0,.12);
  white-space: nowrap;
}

.today-step-pill{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.today-desc{
  margin-top: 8px;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(232,236,255,.98);
}

.today-meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.today-meta .k{ opacity: .9; font-weight: 900; }

.today-card.today-card-dim{
  opacity: .55;
  filter: saturate(.85);
}

.today-card.today-card-active{
  outline: 3px solid rgba(255,255,255,.62);
  box-shadow: 0 0 0 6px rgba(59,130,246,.18);
}

/* ---------- Imaging view (minimal) ---------- */
body.view-imaging .calendar-header .legend,
body.view-imaging .calendar-header .cal-vis{
  display: none;
}

.imaging-view{
  padding: 12px;
}

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

.imaging-title{
  font-size: 18px;
  font-weight: 800;
}

.imaging-note{
  margin-bottom: 12px;
}

.imaging-exp{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  padding: 12px;
  margin-bottom: 12px;
}

.imaging-exp-head{
  margin-bottom: 10px;
}

.imaging-exp-title{
  font-size: 15px;
  font-weight: 800;
}

.imaging-exp-sub{
  margin-top: 2px;
}

.imaging-plates{
  display: grid;
  /* Gold standard: 3 mini-plate maps per row (with responsive fallbacks) */
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

@media (max-width: 1000px){
  .imaging-plates{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 700px){
  .imaging-plates{ grid-template-columns: 1fr; }
}

.imaging-plate-card{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  padding: 10px;
}

/* Imaging view: plate status outline (vision-peripheral friendly) */
.imaging-plate-card.status-ok{
  border-color: rgba(34,197,94,0.45);
}
.imaging-plate-card.status-failed{
  border-color: rgba(239,68,68,0.65);
}
.imaging-plate-card.status-not-imaged{
  border-color: rgba(255,255,255,0.10);
}
.imaging-plate-card.status-unknown{
  border-color: rgba(148,163,184,0.22);
}

.imaging-plate-head{
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
}

.imaging-plate-card.dragging{
  opacity: 0.7;
}

.imaging-exp-head.drop-target{
  position: relative;
  outline: 2px dashed rgba(255,255,255,0.55);
  outline-offset: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
}

/* Drop hint chip (appears only while drop-target is active) */
.imaging-exp-head.drop-target::after{
  content: 'Drop to move plate';
  position: absolute;
  right: 10px;
  bottom: -10px;
  transform: translateY(100%);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2px;
  pointer-events: none;
}

/* Imaging view: drag ghost label that follows the cursor */
.pm-drag-ghost{
  position: fixed;
  z-index: 20000;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(16,27,58,0.90);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.98);
  font-weight: 900;
  font-size: 12px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}

.pm-drag-ghost .pm-drag-ghost-sub{
  margin-top: 2px;
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  font-size: 11px;
}

.imaging-plate-name{
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.imaging-plate-ovr{
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(226,232,240,0.95);
  background: rgba(255,255,255,0.06);
}

.imaging-plate-barcode{
  margin-top: 2px;
  font-size: 12px;
}

.pm-mini-wrap{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
}

.pm-mini-wrap:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}

.pm-mini-grid{
  display: grid;
  grid-template-columns: repeat(var(--mini-cols, 12), 1fr);
  grid-template-rows: repeat(var(--mini-rows, 8), 1fr);
  gap: 3px;
}

.pm-mini-grid .plate-map-well{
  border-radius: 4px;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
}

.pm-mini-grid .plate-map-well::after{
  inset: 1px;
  border-radius: 4px;
}

.pm-mini-grid .pm-condition-badge{
  bottom: 2px;
  left: 2px;
  font-size: 10px;
  padding: 1px 4px;
}

/* Hide text in badges for small wells in mini-grid (384-well) */
.pm-mini-grid[data-cols="24"] .pm-condition-badge{
  font-size: 0;
  min-width: 4px;
  min-height: 4px;
  padding: 2px;
}

.imaging-empty{
  padding: 14px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}

/* ----- Goals dashboard (PM view) ----- */
.goals-head-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}
.goals-head-actions .btn{ white-space: nowrap; }

/* Tabs inside Goals view (Delivery / Metadata completion) */
.goals-tabs{
  display:flex;
  gap: 8px;
  padding: 10px 12px 0;
}
.goals-tab{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.82);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.goals-tab:hover{ background: rgba(255,255,255,0.06); }
.goals-tab-active{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}

/* ----- Goals: Goal Progress (Graph view) — Option A small multiples grid ----- */
.goals-graph-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
  padding: 6px 4px;
}

@media (max-width: 1100px){
  .goals-graph-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

@media (max-width: 760px){
  .goals-graph-grid{ grid-template-columns: 1fr; }
}

.goals-graph-card{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 10px 10px 8px;
}

.goals-graph-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.goals-graph-name{
  font-weight: 900;
  letter-spacing: .2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goals-graph-unassigned{ font-style: italic; opacity: .9; }

.goals-graph-total{
  opacity: 0.72;
  font-size: 12px;
  white-space: nowrap;
}

.goals-graph-bars{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.goals-graph-row{
  display: grid;
  grid-template-columns: 96px 1fr 44px;
  column-gap: 10px;
  align-items: center;
}

.goals-graph-label{
  opacity: 0.85;
  font-size: 12px;
  white-space: nowrap;
}

.goals-graph-barwrap{
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.goals-graph-bar{ height: 100%; width: 0%; }

.goals-graph-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* Metadata completion tab */
.goals-meta-wrap{
  margin-top: 12px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
}
.goals-meta-title{ font-weight: 800; }
.goals-meta-sub{
  margin-top: 6px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  line-height: 1.3;
}
.goals-meta-stats{
  margin-top: 10px;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
}
.goals-summary{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
}
.goals-summary-line{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 14px;
  margin: 4px 0;
}
.goals-k{
  color: rgba(255,255,255,0.70);
}
.goals-v{
  font-weight: 700;
  margin-right: 10px;
}

.goals-summary-sub{
  margin-top: 6px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  line-height: 1.25;
}
.goals-unassigned{
  font-style: italic;
}
.goals-failed{
  color: rgba(255,120,120,0.95);
  font-weight: 700;
}
.goals-note{
  margin-top: 10px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
}


.goals-monthly{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
}
.goals-monthly-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.goals-monthly-title{
  font-weight: 700;
}
.goals-monthly-controls{
  display:flex;
  align-items:center;
  gap: 8px;
}
.goals-monthly-explain{
  margin: 6px 0 10px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  line-height: 1.3;
}
.goals-month-input{
  min-width: 140px;
}
.goals-monthly-totals td{
  border-top: 1px solid rgba(255,255,255,0.12);
  font-weight: 700;
}

/* ----- Goals view: very marked separation (LIVE vs MONTHLY) ----- */
/* Tracking view (was Goals): allow the whole panel to scroll when content exceeds viewport */
body.view-goals .list-view.goals-view .panel{
  height: calc(100vh - 140px);
  overflow: auto;
}

body.view-goals .goals-section{
  margin-top: 12px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
}

body.view-goals .goals-section-current{
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

body.view-goals .goals-section-monthly{
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.08);
}

body.view-goals .goals-section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

body.view-goals .goals-section-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

body.view-goals .goals-section-sub{
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  white-space: nowrap;
}

body.view-goals .goals-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.85);
}

body.view-goals .goals-badge-live{
  border-color: rgba(120,200,255,0.22);
  background: rgba(60,140,200,0.15);
}

body.view-goals .goals-badge-monthly{
  border-color: rgba(200,170,255,0.22);
  background: rgba(160,110,255,0.12);
}

body.view-goals .goals-separator{
  margin: 16px 0;
  padding: 10px 0;
  text-align:center;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
}

body.view-goals .goals-separator span{
  display:inline-block;
  padding: 0 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

/* Tweak existing blocks inside the new sections */
body.view-goals .goals-section .goals-summary,
body.view-goals .goals-section .goals-monthly{
  margin-top: 0;
  background: rgba(0,0,0,0.10);
}

body.view-goals .goals-section-current .goals-summary{
  border-color: rgba(255,255,255,0.10);
}

body.view-goals .goals-section-monthly .goals-monthly{
  border-color: rgba(255,255,255,0.10);
}

/* Delivery tab: keep summary visible while allowing many goals rows */
body.view-goals .goals-current-tableScroller{
  max-height: 56vh;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}


/* --- Global program filter (topbar) --- */
.program-banner{
  display:flex;
  align-items:center;
  gap:10px;
  /* Symmetric padding keeps the centered text visually centered even with the Clear button on the right */
  padding:8px 72px;
  border-bottom:1px solid rgba(148,163,184,.12);
  background: #C98A3A;
  position: sticky;
  top: 0;
  z-index: 20;
  justify-content: center;
}
.program-banner[hidden]{
  display:none !important;
}
.program-banner-text{
  font-size: 13px;
  font-weight: 900;
  color: rgba(226,232,240,.92);
  flex: 1;
  text-align: center;
}

/* Keep the Clear button functional + visible without breaking centering */
.program-banner #btnClearProgramFilter{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.dropdown-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  cursor:pointer;
  user-select:none;
  color: rgba(226,232,240,.92);
}
.dropdown-check:hover{
  background: rgba(255,255,255,.06);
}
.dropdown-check input{
  width: 14px;
  height: 14px;
}

/* Topbar tint when a single program is selected */
.topbar.program-L{ background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(2,6,23,.86)); }
.topbar.program-S{ background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(2,6,23,.86)); }
.topbar.program-R{ background: linear-gradient(180deg, rgba(168,85,247,.22), rgba(2,6,23,.86)); }
.topbar.program-O{ background: linear-gradient(180deg, rgba(245,158,11,.20), rgba(2,6,23,.86)); }


/* Export JSON – result step: make the Downloads warning a clear callout (Option A) */
#exportValidateModal .export-download-callout{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  line-height: 1.35;
}


/* Imaging sessions (vNext) */
.imaging-sessions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.imaging-session-card{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 10px 12px;
}
.imaging-session-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}
.imaging-session-title{
  font-weight: 600;
}
.imaging-session-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.imaging-session-row .radio{
  display:flex;
  align-items:center;
  gap:6px;
}
.imaging-session-row .mini{
  font-size: 12px;
  opacity: 0.85;
}
.imaging-session-row input[type="number"]{
  width: 90px;
}
.imaging-session-remove{
  padding: 4px 8px;
}


/* Imaging sessions UI: segmented control (Live | Fixed) */
.imaging-session-toggle{
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.imaging-session-toggle .seg-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.85);
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  line-height: 1;
}
.imaging-session-toggle .seg-btn + .seg-btn{
  border-left: 1px solid rgba(255,255,255,0.12);
}
.imaging-session-toggle .seg-btn.active{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}
.imaging-session-toggle .seg-btn:focus{
  outline: none;
}
.imaging-session-toggle .seg-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.25);
  outline-offset: -2px;
}

/* Imaging sessions: derived Live/Fixed badge + fixation button */
.imaging-session-status{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  opacity: .95;
}
.imaging-session-status.is-live{
  background: rgba(255,255,255,0.06);
}
.imaging-session-status.is-fixed{
  background: rgba(255,255,255,0.10);
}
.imaging-session-fix-btn{
  margin-left: 6px;
}

/* Plate map session tabs */
.pm-session-tabs{ margin: 10px 0 6px 0; }
.pm-session-tabs-wrap{ display:flex; gap:6px; flex-wrap:wrap; }
.pm-session-tab{
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  cursor:pointer;
}
.pm-session-tab:hover{ background: rgba(255,255,255,0.10); }
.pm-session-tab-active{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
}

/* Plate map field visibility toggle */
.pm-visibility-toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  flex-wrap: wrap;
}

.pm-visibility-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-visibility-select{
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.pm-visibility-select:hover{
  background: rgba(255,255,255,0.10);
}

.pm-visibility-hint{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.75;
  padding: 4px 10px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 6px;
}

.pm-visibility-hint-btn{
  margin-left: 2px;
  padding: 2px 6px;
  font-size: 11px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

.pm-visibility-hint-btn:hover{
  background: rgba(255,255,255,0.14);
}



/* Plate Map Field Picker Modal */
.pm-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
}

.pm-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(16,27,58,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  z-index: 9999;
}

.pm-modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.pm-modal-title{
  font-weight: 900;
  letter-spacing: .2px;
}

.pm-modal-body{
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.pm-modal-search{
  display:flex;
}
.pm-modal-search-input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 800;
}

.pm-modal-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

.pm-modal-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  user-select: none;
}

.pm-modal-item:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.pm-modal-item input[type="checkbox"]{
  transform: translateY(1px);
}

.pm-modal-item-name{
  font-weight: 900;
}

.pm-modal-item-key{
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(220,230,255,.85);
}

.pm-modal-footer{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.pm-modal-create-label{
  font-weight: 900;
  letter-spacing: .2px;
}

.pm-modal-create-row{
  display:flex;
  gap: 10px;
}

.pm-modal-create-input{
  flex: 1 1 auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 800;
}

.pm-modal-create-msg{
  color: rgba(245,158,11,.95);
  font-size: 12px;
  font-weight: 900;
}

/* Export → Validate latest (modal helpers) */
/* UI fix: the Export JSON validation prompt was slightly too high and could be clipped under the top bar. */
#exportValidateModal .modal-card{
  transform: translateY(200px);
}
.export-validate-intro{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.export-validate-lead{
  font-weight: 900;
  letter-spacing: .2px;
}
.export-validate-note{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.export-validate-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;

/* ---------- Today view: Alerts panel (replaces lab-specific Induction) ---------- */
.alerts-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px;
}
.alerts-sec{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding:10px;
}
.alerts-sec-h{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
}
.alerts-empty{
  color: rgba(255,255,255,0.35);
  font-size: 12px;
}
.alerts-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.alerts-row{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.25;
}
.alerts-actions{
  display:flex;
  justify-content:flex-end;
  padding:2px 4px 0 4px;
}

/* =========================================================================
   Generic Type Form (Phase 4 — lab-activities block cards)
   ========================================================================= */
#genericTypeFields{
  display:flex; flex-direction:column; gap:0; margin-top:6px;
}
.gtf-block-card{
  border:1px solid rgba(255,255,255,0.10);
  border-left:4px solid var(--gtf-accent, #888);
  border-radius:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.04);
  position:relative;
}
.gtf-block-card.gtf-disabled{
  opacity:.4; border-left-color:rgba(255,255,255,.12);
}
.gtf-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.gtf-block-title{
  display:flex; align-items:center; gap:8px; font-weight:700; font-size:0.95em;
}
.gtf-block-anchor-badge{
  font-size:0.72em; font-weight:700; color:var(--muted);
  background:rgba(255,255,255,.08); border-radius:4px; padding:2px 6px;
}
.gtf-live-badge{
  font-size:0.72em; font-weight:600; border-radius:999px; padding:2px 8px;
  background:rgba(255,255,255,.08); color:var(--muted);
}
.gtf-live-badge.live{ background:rgba(34,197,94,.15); color:#4ade80; }
.gtf-live-badge.fixed{ background:rgba(234,179,8,.15); color:#fbbf24; }
.gtf-block-body{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.gtf-block-body label{ display:flex; align-items:center; gap:6px; font-size:0.9em; }
.gtf-block-body input[type="number"]{
  width:70px;
}
/* Two-tone connector */
.gtf-connector{
  display:flex; flex-direction:column; align-items:center; padding:0;
  position:relative; min-height:42px;
}
.gtf-connector-line{
  width:3px; flex:1; min-height:8px;
}
.gtf-connector-field{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; font-size:0.82em; color:var(--muted);
  background:rgba(20,20,28,.95);
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
  z-index:1; line-height:1;
}
.gtf-connector-field input[type="number"]{
  width:38px; padding:3px 2px; border-radius:5px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);
  color:var(--text); font-size:1em; text-align:center;
  line-height:1; margin:0; vertical-align:middle;
  -moz-appearance:textfield;
}
.gtf-connector-field input[type="number"]::-webkit-inner-spin-button,
.gtf-connector-field input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none; margin:0;
}
.gtf-instance-row{
  display:flex; align-items:center; gap:10px; margin-top:6px;
}
.gtf-instance-row span:first-child{ font-weight:500; min-width:100px; font-size:0.9em; }
.gtf-instance-row label{ display:flex; align-items:center; gap:6px; font-size:0.9em; }
.gtf-instance-row input[type="number"]{ width:70px; }
.gtf-removed-blocks{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.gtf-removed-blocks .btn{ font-size:0.82em; }