/* root/public/css/app.css */
/* =========================================================================
   New App Theme (Animations on all pages)
   Primary background: #010018 (deep blue)
   Primary font color: #04FFFB
   ====================================================================== */

/* CSS Reset (minimal) */
:root { --pie-label-color: #000; } /* ensure high contrast on light wedges */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --bg: #00141f;
  --text: #04FFFB;
  --white: #ffffff;
  --muted: rgba(255,255,255,.72);
  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.02);
  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.18);
  --shadow: rgba(0,0,0,.45);
  --shadow-2: rgba(0,0,0,.55);
  --focus: rgba(4,255,251,.25);
}

body.theme {
  background: var(--bg);
  color: var(--text);
  font-family: "Open Sans", Arial, sans-serif, ui-sans-serif, system-ui, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  min-height: 100vh;
}

/* Layout helpers */
.center {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(16px, 4vw, 48px);
  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* Card */
.card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 28rem;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px var(--shadow);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover { box-shadow: 0 40px 100px var(--shadow-2); border-color: var(--border-strong); }

.card__header { padding: 28px 28px 8px; }
.card__header h1 { margin: 0 0 6px; font-weight: 700; }
.card__header .muted { margin: 0; color: var(--muted); }

.form { padding: 20px 28px 28px; display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: .9rem; color: var(--muted); }
.field > input {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--white);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}
.field > input:focus {
  box-shadow: 0 0 0 3px var(--focus), 0 10px 30px rgba(4,217,255,.10);
  border-color: var(--text);
  transform: translateY(-1px);
}
.actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--white);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  user-select: none;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
/*.btn:hover { transform: translateY(-1px); border-color: var(--border-strong); }*/
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, rgba(4,217,255,.25), rgba(4,217,255,.08));
  border-color: rgba(4,217,255,.45);
}
.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  text-decoration: underline;
}

.login-title {
  background: linear-gradient(45deg, #CDE0F7, var(--text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .5px;
}

/* === Password eye: robust placement (absolute, no grid overlap) ======= */
.field.field--has-toggle { position: relative; }

/* add some room on the right for the eye */
.field.field--has-toggle > input.has-toggle { padding-right: 44px; }

.field.field--has-toggle > .eye-toggle {
  position: absolute;
  right: 12px;
  /* JS sets the 'top' dynamically, so just keep these base styles */
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .85;
  z-index: 1; /* sit above the input without affecting layout */
}

.field.field--has-toggle > .eye-toggle:hover,
.field.field--has-toggle > .eye-toggle:focus-visible { opacity: 1; }
.field.field--has-toggle > .eye-toggle svg { width: 20px; height: 20px; }


/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 9999;
}
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--error { background: rgba(120, 20, 20, .80); }

/* Dialog */
dialog.dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: transparent;
}
.dialog::backdrop { background: rgba(0,0,30,.6); }
.dialog__card {
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  padding: 22px;
  min-width: min(90vw, 420px);
  color: var(--white);
}

/* === LOGIN HERO FX (adapted from sample) =============================== */
.login-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  /*background:
    radial-gradient(1200px 600px at 10% 10%, rgba(4,217,255,.10), transparent 60%),
    radial-gradient(900px 400px at 90% 20%, rgba(242,192,68,.10), transparent 60%),
    linear-gradient(180deg, #09005e 0%, #00141f 100%); */
  isolation: isolate;
}

/* Floating, blurred "energy" blobs */
.login-hero__blobs {
  position: absolute; inset: -20vmax;
  pointer-events: none; z-index: 0;
  filter: blur(40px);
}
.login-hero__blob {
  position: absolute; width: 40vmax; height: 40vmax; opacity: .35; border-radius: 50%;
  background: conic-gradient(from 180deg at 50% 50%, #04FFFB33, #a0e8ff33, #04FFFB33);
  animation: blobMove 18s ease-in-out infinite alternate;
}
.login-hero__blob--1 { top: 5%;  left: 0%;   animation-delay: 0s;  }
.login-hero__blob--2 { top: 40%; right: -10%; animation-delay: -4s; }
.login-hero__blob--3 { bottom: -5%; left: 30%; animation-delay: -8s; }

@keyframes blobMove {
  0%   { transform: translate3d(-5%, -5%, 0) scale(1.0) rotate(0deg); }
  50%  { transform: translate3d(5%, 2%, 0) scale(1.08) rotate(30deg); }
  100% { transform: translate3d(-3%, 4%, 0) scale(1.02) rotate(60deg); }
}

/* Subtle grid overlay */
.login-hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(1200px 600px at 50% 40%, #000 40%, transparent 80%);
}

/* Starfield + rise effect */
.login-hero__sparkles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(2px 2px at 20% 20%, rgba(255,255,255,.35) 60%, transparent 61%),
                    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,.25) 60%, transparent 61%),
                    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,.30) 60%, transparent 61%);
  animation: rise 22s linear infinite;
  opacity: .5;
}

/* Page-level dim overlay for reset screen */
.login-hero__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60); /* adjust to taste: 0.45–0.75 */
  z-index: 1;                      /* above FX (z:1) and below the card (z:2) */
  pointer-events: none;
  backdrop-filter: saturate(0.9) blur(0.5px);
}

@keyframes rise {
  from { transform: translateY(20px); }
  to   { transform: translateY(-40px); }
}

/* 3D tilt (driven by CSS variables) */
.login-card.tilt {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
}

/* Validation "shake" */
.shake { animation: shakeX 450ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeX {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px);  }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px);  }
}

/* Buttons shimmer */
.btn-shimmer::after {
  content:""; position:absolute; inset: 0 0 0 -150%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  animation: btnShimmer 2.4s infinite;
  border-radius: inherit;
}
@keyframes btnShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .login-hero__blobs, .login-hero__sparkles, .login-card.tilt, .btn-shimmer::after { animation: none !important; }
  .login-card.tilt { transform: none !important; }
}

/* Force hero to flat deep blue */
.login-hero {
  background: #00141f !important;
}

/* --- Full-page watermark logo (behind all content) --- */
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;                       /* fill the hero */
  background-image: url("/images/New color-05.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;         /* fills the screen; may crop edges */
  opacity: 0.08;                  /* watermark strength: 0.04–0.15 recommended */
  pointer-events: none;           /* clicks pass through */
  z-index: 0;                     /* stays behind your FX and card */
}

.actions__left { display: flex; gap: 12px; }

/* === LANDING LAYOUT ===================================================== */
.page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }

/* Header: full-width, thin divider, cap height ≤200px */
.shell-header {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  border-bottom: 1px solid var(--border-strong);
}
.shell-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left brand | center nav | right actions */
  align-items: center;
  gap: 12px;
  padding: 10px 12px;       /* near the edges as requested */
  max-height: 200px;
}

/* Brand (logo + FolioTrack) pinned far-left */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text); font-weight: 700;
}
.brand img {
  width: 100px; height: 100px; object-fit: contain; border-radius: 8px;
  box-shadow: 0 6px 18px var(--shadow);
}
.brand span { font-size: 1.1rem; letter-spacing: .3px; }

/* Top-center menu */
.primary-nav {
  justify-self: center;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.primary-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1px solid transparent;
  color: var(--text); text-decoration: none; font-weight: 600; opacity: .92;
  transition: transform .06s ease, border-color .2s ease, background .2s ease;
  white-space: nowrap;
}
.primary-nav a:hover { transform: translateY(-1px); border-color: var(--border); background: rgba(255,255,255,.04); }

/* Far-right actions (Support, Help, Logout) */
.header-actions{
  grid-column: 3;          /* put actions in the rightmost grid column */
  justify-self: end;       /* push to the far right edge */
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Workspace (middle fills remaining height) */
.workspace { min-height: 0; display: grid; grid-template-rows: auto 1fr; }

/* “Card Library” toolbar (prep only) */
.toolbar {
  padding: 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px dashed var(--border);
}
.toolbar .title { font-weight: 700; }
.toolbar .chip {
  display: inline-flex; align-items: center; height: 34px;
  padding: 0 12px; border-radius: 999px;
  border: 1px dashed var(--border);
  color: var(--text);
  background: rgba(255,255,255,.03);
  opacity: .7; user-select: none; cursor: not-allowed; /* not active yet */
}

/* Board: empty grid prepared for movable cards later */
.board {
  position: relative; height: 100%; overflow: auto; padding: 16px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, minmax(60px, 1fr));
  grid-auto-rows: 120px;
}

/* Footer: thin divider, ≤100px */
.shell-footer { border-top: 1px solid var(--border-strong); }
.shell-footer__inner {
  padding: 10px 12px;
  min-height: 50px; max-height: 80px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); text-align: center;
}

/* Responsive: stack nav under brand/actions on narrow screens */
@media (max-width: 720px){
  .shell-header__inner { grid-template-columns: 1fr 1fr; }
  .primary-nav { grid-column: 1 / -1; order: 3; justify-content: center; }
  .header-actions { order: 2; grid-column: 2; justify-self: end; }
}

/* === Global button hover highlight ===================================== */
:root{
  /* centralize the hover colors so we can tweak once if needed */
  --btn-hover-bg: #04FFFB;  /* requested background on hover */
  --btn-hover-ink: #00141F; /* requested text color on hover */
}

.btn:hover,
.btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-link:hover,
.btn-link:focus-visible {
  background: var(--btn-hover-bg) !important;
  color: var(--btn-hover-ink) !important;
  border-color: rgba(4, 255, 251, 0.8) !important; /* subtle cyan border */
  box-shadow: 0 8px 28px rgba(4, 255, 251, 0.25);  /* gentle glow */
  transform: translateY(-1px);
  text-decoration: none; /* removes underline on .btn-link when hovered */
}

.btn:active,
.btn-primary:active,
.btn-link:active {
  transform: translateY(0);
}

/* === BACKLOG TABLE ====================================================== */
.table-wrap {
  height: 100%;
  overflow: auto;
  padding: 0px 12px 16px;
}

.toolbar .badge {
  display: inline-flex; align-items: center; height: 28px;
  padding: 0 10px; border-radius: 999px;
  border: 1px dashed var(--border);
  color: var(--text); background: rgba(255,255,255,.03);
  margin-left: 8px;
}

.toolbar .spacer { flex: 1 1 auto; }

.toolbar .search input {
  height: 36px; padding: 0 12px; border-radius: 10px;
  width: 220px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--white);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.toolbar .search input:focus {
  box-shadow: 0 0 0 3px var(--focus);
  border-color: var(--text);
}

/* Data table */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  color: var(--white);
}

.data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
  font-weight: 700;
  padding: 10px 10px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.875rem; /* matches tbody/group rows */
}
.data-table thead th[aria-sort="ascending"]::after  { content: " ▲"; }
.data-table thead th[aria-sort="descending"]::after { content: " ▼"; }

.data-table tbody td {
  border-bottom: 1px solid var(--border);
  padding: 10px 10px;
  vertical-align: top;
}
.data-table tbody tr:hover td {
  background: rgba(255,255,255,.03);
}

.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Left-justify Estimate & Actual numeric columns */
.data-table td.num[data-col="estimate"],
.data-table td.num[data-col="actual"] {
  text-align: left;
}

/* Group header row */
.data-table tr.group td {
  position: sticky; top: 40px; z-index: 1; /* sticks below the header row */
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);  /* #04FFFB */
}
.data-table tr.group .count { opacity: .75; font-weight: 600; margin-left: 6px; }
/* (optional) Keep the caret button and count visually consistent */
.data-table tr.group .group__toggle { color: var(--text); }
.data-table tr.group .count { color: var(--text); opacity: .85; }

/* Priority tints 
.prio--critical { color: #ff7a7a; font-weight: 700; } 
.prio--high     { color: #ffc36b; font-weight: 700; } */
.prio--medium   { color: #ffe28a; }
.prio--low      { color: #a8ffd2; }
.prio--filler   { color: #c3d4ff; }

/* Empty state */
.empty {
  margin: 18px auto;
  text-align: center;
  color: var(--muted);
}

/* === BACKLOG: Description formatting =================================== */

/* Use fixed layout so width constraints are respected */
/*.data-table { table-layout: fixed; } */

/* Body rows: make data text ~2 sizes smaller than default */
.data-table tbody td {
  font-size: 0.875rem;   /* ~14px on a 16px base */
  line-height: 1.35;
}

.data-table tbody td:nth-child(5) {
  white-space: nowrap;   /* no wrapping */
  overflow: hidden;      /* hide overflow */
  text-overflow: ellipsis; /* show … when truncated */
  cursor: help;          /* hint there is a tooltip */
}

/* 1) Item # — compact (fits up to 10 characters) */
.data-table thead th:nth-child(1),
.data-table tbody td:nth-child(1),
.data-table thead th:nth-child(2),
.data-table tbody td:nth-child(2),
.data-table thead th:nth-child(3),
.data-table tbody td:nth-child(3),
.data-table thead th:nth-child(4),
.data-table tbody td:nth-child(4),
.data-table thead th:nth-child(11),
.data-table tbody td:nth-child(11),
.data-table thead th:nth-child(12),
.data-table tbody td:nth-child(12) {
  width: 10ch;
  max-width: 10ch;
  white-space: nowrap;
}

/* 2) Name — 10% of the screen with wrapping */
.data-table thead th:nth-child(5),
.data-table tbody td:nth-child(5) {
  width: 12vw;
  max-width: 12vw;
}
.data-table tbody td:nth-child(5) {
  white-space: normal;           /* allow wrapping */
  overflow-wrap: anywhere;       /* wrap long tokens */
  word-break: break-word;        /* safety for long strings */
}

.data-table tbody td:nth-child(6),
.data-table tbody td:nth-child(7) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;                  /* indicate there's more on hover */
}

/* === BACKLOG: Zebra striping + "embossed" rows ========================= */
.data-table tbody tr.row td {
  /* subtle embossed separators */
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
/* Stripe only the .row items, ignoring group header <tr> */
.data-table tbody tr.row:nth-child(odd of .row) td { background: rgba(255,255,255,.02); }

.data-table tbody tr.row:hover td {
  background: rgba(255,255,255,.04);
}

/* Collapsed rows (hidden) */
.data-table tbody tr.row.is-hidden { display: none; }

/* Group header toggle button */
.group__toggle {
  all: unset;
  display: inline-block;
  width: 1.25em;
  text-align: center;
  margin-right: 6px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
}
.group__toggle:hover {
  background: rgba(255,255,255,.08);
}

/* Priority colors: High = red; Critical = red + bold */
.prio--high     { color: #ff4d4d; font-weight: 600; }
.prio--critical { color: #ff4d4d; font-weight: 800; }

/* Item # centered (header + body) and compact width */
.data-table thead th:nth-child(1),
.data-table tbody td:nth-child(1) { text-align: center; }
/* .data-table thead th:nth-child(1),
.data-table tbody td:nth-child(1) { width: 10ch; max-width: 10ch; } */

/* Keep previous sizing rules (Name, Description, Acceptance Criteria) */
.data-table { table-layout: fixed; }

/* Name — 10% width with wrapping */
.data-table thead th:nth-child(5),
/* .data-table tbody td:nth-child(4) { width: 10vw; max-width: 10vw; } */
.data-table tbody td:nth-child(5) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Description & Acceptance Criteria — single-line, 20% width each */
.data-table thead th:nth-child(6),
.data-table tbody td:nth-child(6),
.data-table thead th:nth-child(7),
.data-table tbody td:nth-child(7) {
  width: 16vw;
  max-width: 16vw;
}
.data-table tbody td:nth-child(6),
.data-table tbody td:nth-child(7) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help; /* tooltip shows full text */
}

/* === BACKLOG: Details dialog =========================================== */
/* Backlog item popup: force dark panel background */
#itemDialog .dialog__card,
.dialog.item-modal .dialog__card {
  background: #00141f !important;   /* solid dark panel */
  color: var(--text);                /* keep your cyan text */
  border-color: var(--border-strong);
}

.dialog__card.detail {
  min-width: min(96vw, 1040px);
  max-height: 90vh;
  overflow: auto;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* label, value */
  column-gap: 16px;
  row-gap: 8px;
  margin: 6px 0 16px;
}
@media (max-width: 720px) {
  .details-grid { grid-template-columns: 1fr 1fr; }
}

.rich-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
}
.rich-content p { margin: 0 0 10px; }

/* === ACTION ITEM POP-UP =============================================== */
.item-dialog .dialog__card {
  /* solid card background per request */
  background: #00141f !important;
}

/* Column labels: shrink to match group header size 
.data-table thead th {
  font-size: 0.875rem;            /* match body/group rows 
} */

/* Group header: use brand cyan and same size for consistency */
.data-table tr.group td {
  color: var(--text);              /* #04FFFB via :root var */
  font-size: 0.875rem;
}

/* Make header opaque on pages that have a data table (e.g., Backlog) 
.page:has(.table-wrap .data-table) .shell-header {
  background: linear-gradient(180deg, rgba(0, 20, 31, 0.96), rgba(0, 20, 31, 0.94));
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  backdrop-filter: saturate(1.05) blur(6px);
} */

/* 1) Make the header opaque only on pages that contain a data table */
.page:has(.table-wrap .data-table) .shell-header {
  background: linear-gradient(180deg, rgba(0, 20, 31, 0.96), rgba(0, 20, 31, 0.94));
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  backdrop-filter: saturate(1.05) blur(6px);
}

/* 2) Ensure the table pane is the only vertical scroller
      → the thead (already sticky) stays visible at the top of that pane */
@supports (height: 100dvh) {
  .page:has(.table-wrap .data-table) { height: 100dvh; overflow: hidden; }
}
.page:has(.table-wrap .data-table) .workspace { min-height: 0; }
.page:has(.table-wrap .data-table) .table-wrap { height: 100%; overflow: auto; }

/* (No change needed to your existing sticky header rows)
   thead th already: position: sticky; top: 0; z-index: 2;
   group rows already: position: sticky; top: 40px; z-index: 1; */

   /* Optional: keep the Backlog toolbar pinned above the table rows */

.page:has(.table-wrap .data-table) .toolbar {
  position: sticky;
  top: 0;           /* sits right under the header */
  z-index: 35;      /* below .shell-header (z:40), above the table */
  background: linear-gradient(180deg, var(--card), var(--card-2));
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  backdrop-filter: saturate(1.05) blur(6px);
}

/* === Fix sticky column labels ========================================= */
/* Let <th position:sticky> use the real scroll container (.table-wrap) */
.page .table-wrap .data-table {
  overflow: visible;                 /* override earlier overflow:hidden */
  /* keep the rounded corners without using overflow clipping */
  clip-path: inset(0 round 12px);
}

/* Ensure header cells sit above group rows while stuck */
.page .table-wrap .data-table thead th { z-index: 3; }

@supports not (clip-path: inset(0 round 12px)) {
  .page .table-wrap .data-table { clip-path: none; }
}

/* --- Backlog header & groups: minimal overrides ----------------------- */

/* 1) Let group headers (e.g., "Task") scroll away; only the column labels stay fixed */
.page .table-wrap .data-table tr.group td {
  position: static;   /* override sticky */
  top: auto;
  z-index: auto;
}

/* 2) Make the column label row opaque while it sticks */
.page .table-wrap .data-table thead th {
  background: var(--bg);       /* solid app background (#00141f) */
  z-index: 3;                  /* ensure it sits above table body */
}

/* === INLINE EDITOR (Backlog: Type) ==================================== */
.data-table td.is-editing { padding: 6px; }

.cell-editor {
  appearance: none;
  width: 100%;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--white);
  outline: none;
  font-size: 0.875rem;
}
.cell-editor:focus {
  box-shadow: 0 0 0 3px var(--focus);
  border-color: var(--text);
}

/* Flash a row briefly after it moves between groups (post-save) */
@keyframes rowFlash {
  0%   { background-color: rgba(4,255,251,.18); }
  100% { background-color: transparent; }
}
.row--flash td { animation: rowFlash 1200ms ease forwards; }

/* === FIX: Native <select> option contrast on dark theme =============== */
/* Keep the closed control white-on-dark, but force readable options when
   the OS renders the open list using a light background. */
.cell-editor { color-scheme: dark; } /* hint to browsers with native menus */

.cell-editor option {
  /* Prefer system colors so the list matches the OS menu palette */
  color: CanvasText;
  background: Canvas;
}

/* Fallback for engines without system color keywords */
@supports not (color: CanvasText) {
  .cell-editor option { color: #111; background: #fff; }
}

/* Improve visibility for the focused/hovered item where supported */
.cell-editor option:checked,
.cell-editor option:hover {
  background: Highlight;
  color: HighlightText;
}

/* === INLINE POPOVER EDITOR (Backlog: Name, textarea) =================== */
.popover-editor {
  position: fixed;            /* detach from table scroll; anchor via JS */
  z-index: 1000;              /* above sticky headers/toolbars */
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  /* background: linear-gradient(180deg, var(--card), var(--card-2)); */
  background: var(--bg, #00141f); 
  box-shadow: 0 18px 50px var(--shadow-2);
}

/* Name textarea inside the popover */
.popover-editor > .cell-editor.cell-editor--textarea {
  width: 100%;
  min-height: calc(1.35em * 3 + 14px); /* ~3 rows tall, matching table line-height */
  padding: 8px 10px;
  resize: vertical;           /* allow user to grow if needed */
  line-height: 1.35;
  height: auto;               /* let rows define height */
  background: rgba(255,255,255,.06);
  color: var(--white);
  border-color: var(--border);
}

/* === BACKLOG: Rich-text popover (Quill) ================================ */
.popover-editor {
  position: fixed;
  z-index: 1000;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #00141f; /* solid dark */
  box-shadow: 0 20px 60px var(--shadow-2);
  color: var(--white);
}
.popover-editor--rich { width: 720px; max-width: min(85vw, 980px); }

/* Quill (snow) in dark theme */
.popover-editor--rich .ql-toolbar.ql-snow {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  color: var(--white);
}
.popover-editor--rich .ql-container.ql-snow {
  border: 1px solid var(--border);
  border-top: 0;
  background: rgba(255,255,255,.04);
  border-radius: 0 0 8px 8px;
  color: var(--white);
}
.popover-editor--rich .ql-editor {
  min-height: 220px; /* comfortable editing area */
  line-height: 1.45;
  color: var(--white);
}
.popover-editor--rich .ql-editor.ql-blank::before {
  color: var(--muted);
}

/* Make icons & pickers visible on dark */
.popover-editor--rich .ql-snow .ql-stroke { stroke: var(--white); }
.popover-editor--rich .ql-snow .ql-fill   { fill: var(--white); }
.popover-editor--rich .ql-snow .ql-picker,
.popover-editor--rich .ql-snow .ql-picker-label,
.popover-editor--rich .ql-snow .ql-picker-options {
  color: var(--white);
}
.popover-editor--rich .ql-snow .ql-picker-options {
  background: #0b2a39;
  border-color: var(--border);
}

/* Popover actions (Save / Cancel) */
.popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

[hidden] { display: none !important; }

/* Make the choice buttons taller */
button#manualBtn.btn,
button#aiBtn.btn,
#manualBtn,
#aiBtn {
    font-size: 2.375rem !important;   /* 3× your 1.125rem */
    line-height: 1.15 !important;
    padding-block: 0.6em !important;  /* scales with font size */
    min-height: 250px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;          /* in case a fixed height is set elsewhere */
    width: 250px !important;
    height: 250px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 0.75rem !important;      /* inner padding so text isn't flush */
    white-space: normal !important;    /* allow line wrapping */
    overflow-wrap: anywhere !important;/* break long words if needed */
}

/* Make the AI Settings dialog dark */
#aiConfigDlg .dialog__card {
  background: #00141f !important;     /* solid dark panel */
  color: var(--white) !important;
  border-color: var(--border-strong);
}

/* Inputs readable on dark */
#aiConfigDlg input,
#aiConfigDlg select,
#aiConfigDlg textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--white);
}

#aiConfigDlg input::placeholder,
#aiConfigDlg textarea::placeholder { color: rgba(255,255,255,0.55); }

/* Optional: slightly brighter helper text */
#aiConfigDlg .muted { color: rgba(255,255,255,0.75); }

#choiceScreen.center { 
  min-height: auto;                 /* stop forcing 100vh */
  max-height: calc(100vh - 240px);  /* adjust for header/toolbar */

}

/* === BACKLOG-ONLY COLUMN LAYOUT ====================================== */
.backlog-table { table-layout: fixed; }

/* ID, Type, Priority: compact */
.backlog-table thead th:nth-child(1),
.backlog-table tbody td:nth-child(1),
.backlog-table thead th:nth-child(2),
.backlog-table tbody td:nth-child(2),
.backlog-table thead th:nth-child(3),
.backlog-table tbody td:nth-child(3),
.backlog-table thead th:nth-child(10),
.backlog-table tbody td:nth-child(10) {
  width: 10ch;
  max-width: 10ch;
  white-space: nowrap;
}

.backlog-table thead th:nth-child(4),
.backlog-table tbody td:nth-child(4) {
  width: 13vw;
  max-width: 13vw;
}

.backlog-table tbody td:nth-child(4) {
  white-space: normal;           /* allow wrapping */
  overflow-wrap: anywhere;       /* wrap long tokens */
  word-break: break-word;        /* safety for long strings */
}

.backlog-table tbody td:nth-child(5),
.backlog-table tbody td:nth-child(6) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;                  /* indicate there's more on hover */
}

.backlog-table tbody td:nth-child(1) { text-align: center; }

.backlog-table thead th:nth-child(5),
.backlog-table tbody td:nth-child(5),
.backlog-table thead th:nth-child(6),
.backlog-table tbody td:nth-child(6) {
  width: 15vw;
  max-width: 15vw;
}

.backlog-table tbody td:nth-child(5),
.backlog-table tbody td:nth-child(6) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help; /* tooltip shows full text */
}

.backlog-table thead th:nth-child(7),
.backlog-table tbody td:nth-child(7),
.backlog-table thead th:nth-child(8),
.backlog-table tbody td:nth-child(8),
.backlog-table thead th:nth-child(9),
.backlog-table tbody td:nth-child(9),
.backlog-table thead th:nth-child(11),
.backlog-table tbody td:nth-child(11) {
  width: 13ch;
  max-width: 13ch;
}

/* My Work: State column looks read-only */
.data-table td.cell--state { cursor: default; opacity: .9; }

/* --- Splash tabs: ensure visible on dark theme --- */
.tablist .tab {
  color: var(--text);                 /* cyan on dark */
  appearance: none;                   /* consistent button rendering */
  -webkit-appearance: none;
}

.tablist .tab:hover,
.tablist .tab:focus-visible {
  color: var(--white);
  background: rgba(255,255,255,.04);
}

/* Active/selected tab */
.tablist .tab[aria-selected="true"] {
  color: var(--white);
  border-bottom-color: var(--text);   /* matches brand cyan */
}

/* Small badge inside the tab: keep readable */
.tablist .tab .badge {
  background: rgba(255,255,255,.12);
  color: var(--white);
}

/* Restore an accessible focus style (inline CSS removed outline) */
.tablist .tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* === Admin & Utility Layer (shared across admin pages) =============== */

/* Layout shells */
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.title-wrap { display: flex; align-items: center; gap: 8px; }
.muted { color: var(--muted); }

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center;
  padding: .15rem .6rem; border-radius: 999px;
  font-size: .85rem; color: var(--white);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
}
.pill.warn { background: rgba(242,192,68,.15); border-color: rgba(242,192,68,.45); color: #ffe28a; }

/* Controls row and kbd tag */
.controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      background: rgba(255,255,255,.07); border:1px solid var(--border);
      border-bottom-color: var(--border-strong); border-radius:.35rem; padding:.1rem .4rem; font-size:.85em; }
.statusbar{ display:flex; align-items:center; gap:.6rem; }

/* Form grid in dialogs */
.grid{ display:grid; gap:.6rem; grid-template-columns: repeat(2, 1fr); }
.grid .full{ grid-column:1 / -1; }
.hint{ font-size:.85rem; color: var(--muted); }
@media (max-width: 960px){ .grid{ grid-template-columns: 1fr; } }

/* Minor utilities */
.m-0{ margin:0 !important; }
.mt-8{ margin-top:8px !important; }
.mb-8{ margin-bottom:8px !important; }
.actions--end{ justify-content: flex-end; }
.label-switch-end{ align-self:end; display:flex; gap:.4rem; }

/* Admin tables: fine-tune column widths (inherits .data-table visuals) */
.admin-tips-table thead th:nth-child(1),
.admin-tips-table tbody td:nth-child(1){ width:8ch; text-align:center; white-space:nowrap; }
.admin-tips-table thead th:nth-child(3){ width:22ch; }
.admin-tips-table thead th:nth-child(4){ width:24ch; white-space:nowrap; }
.admin-tips-table thead th:nth-child(5){ width:12ch; white-space:nowrap; }
.admin-tips-table thead th:nth-child(8){ width:12ch; white-space:nowrap; }
.admin-tips-table tbody td:nth-child(6){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.admin-messages-table thead th:nth-child(1),
.admin-messages-table tbody td:nth-child(1){ width:8ch; text-align:center; white-space:nowrap; }
.admin-messages-table thead th:nth-child(3){ width:22ch; }
.admin-messages-table thead th:nth-child(4){ width:24ch; white-space:nowrap; }
.admin-messages-table thead th:nth-child(5){ width:12ch; white-space:nowrap; }
.admin-messages-table thead th:nth-child(8){ width:12ch; white-space:nowrap; }
.admin-messages-table tbody td:nth-child(7){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Admin Tips table: column sizing + truncation */
.data-table.admin-tips-table { table-layout: fixed; width: 100%; }

.data-table.admin-tips-table th,
.data-table.admin-tips-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow, fixed-width columns */
.admin-tips-table col.col-show      { width: 56px; }   /* checkbox */
.admin-tips-table col.col-actions   { width: 120px; }  /* Delete button */
.admin-tips-table col.col-id        { width: 10ch; }   /* short code */
.admin-tips-table col.col-date      { width: 20ch; }   /* ISO datetime */
.admin-tips-table col.col-cta-label { width: 12ch; }

/* Link column: give a reasonable slice + ellipsis */
.admin-tips-table col.col-cta-href  { width: 26ch; }

/* Title gets the remaining space */
.admin-tips-table col.col-title     { width: auto; }

/* Make the Title button behave like a full-width cell with ellipsis */
.admin-tips-table .edit {
  display: block;
  width: 100%;
  text-align: left;
  padding-inline: .5rem;
}

@media (max-width: 900px){
  .admin-tips-table th:nth-child(5),
  .admin-tips-table td:nth-child(5){ display:none; }
}

/* Admin Command Center tiles */
.center--compact { padding-top: 8vh; }

/* Admin Command Center tiles (force equal heights) */
/* Admin Command Center tiles — theme-aligned grid + equal heights */
.grid-2{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* prevents overflow */
  align-items: stretch;                               /* equal heights per row */
}
@media (max-width: 560px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Ensure each tile actually stretches to the row height */
.grid-2 > .tile{ align-self: stretch; }

/* Tile internals: stack content, pin actions to bottom */
.tile{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  padding: 16px;

  display: flex;
  flex-direction: column;
  min-height: 160px; /* small baseline so very short copy still lines up */
}
.tile__actions{
  margin-top: auto;   /* buttons align at the bottom across tiles */
  display: flex;
  gap: 12px;
}

/* Keep your tidy typography inside tiles */
.tile h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.tile p  { margin: 0; color: var(--muted); font-size: .95rem; }



/* Severity badges (used by Splash for Tips & Messages) */
.severity {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:700;
  letter-spacing:.3px; border:1px solid var(--border); margin-left:6px;
}
.severity.info    { color:#a8f7ff; background: rgba(4,217,255,.12);  border-color: rgba(4,217,255,.35);}
.severity.success { color:#b7ffcf; background: rgba(24,200,100,.14); border-color: rgba(24,200,100,.35);}
.severity.warning { color:#ffe28a; background: rgba(242,192,68,.14); border-color: rgba(242,192,68,.45);}
.severity.danger  { color:#ffb3b3; background: rgba(255,77,77,.14);  border-color: rgba(255,77,77,.45); }

/* Dialog/editor conveniences */
.grid textarea { width: 100%; min-height: 140px; }
/* Themed search is already defined; keep width helper for wrapper if needed */
.toolbar .search { min-width: 220px; }

/* ===== Splash (global) ============================================ */

/* Layout */
.splash-container { max-width: 960px; margin: 0 auto; padding: 16px; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* Toolbar halves */
.toolbar .left, .toolbar .right { display: flex; align-items: center; gap: 8px; }

/* Tabs */
.tablist { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin: 12px 0; }
.tablist .tab {
  padding: 8px 12px; border: 1px solid var(--border); border-bottom: none;
  background: var(--card); border-top-left-radius: 10px; border-top-right-radius: 10px;
  font-weight: 600;
}
.tablist .tab[aria-selected="true"] {
  background: var(--card-2); border-color: var(--border-strong, var(--border));
}

/* Panel container */
.panels { border: 1px solid var(--border); border-radius: 0 10px 10px 10px; background: var(--card); }
.panel { padding: 12px; }
.panel[aria-hidden="true"] { display: none; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .3px;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
}

/* List cards */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.list > li {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); padding: 12px 14px;
}
.list .title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.list .meta  { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; margin-bottom: 6px; }
.list .body  { line-height: 1.45; }

/* Item actions under each card */
.item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Footer area */
.footer-actions { margin-top: 12px; display: flex; justify-content: space-between; }
.footer-actions label { display: flex; align-items: center; gap: .4rem; }

/* Severity chips (already shared across app; here for completeness) */
.severity {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:700;
  letter-spacing:.3px; border:1px solid var(--border); margin-left:6px;
}
.severity.info    { color:#a8f7ff; background: rgba(4,217,255,.12);  border-color: rgba(4,217,255,.35);}
.severity.success { color:#b7ffcf; background: rgba(24,200,100,.14); border-color: rgba(24,200,100,.35);}
.severity.warning { color:#ffe28a; background: rgba(242,192,68,.14); border-color: rgba(242,192,68,.45);}
.severity.danger  { color:#ffb3b3; background: rgba(255,77,77,.14);  border-color: rgba(255,77,77,.45); }

/* Tiny utilities (used on Splash headings/text) */
.m-0{ margin:0 !important; }
.mt-4{ margin-top:4px !important; }
.mb-4{ margin-bottom:4px !important; }
.mt-8{ margin-top:8px !important; }
.mb-8{ margin-bottom:8px !important; }

/* ===== Admin page frame: shorter main + sticky footer ================== */
.theme.page--admin{
  min-height: 100vh;             /* make the page fill the viewport */
  display: flex;
  flex-direction: column;         /* column flow so footer comes last */
}

.theme.page--admin main.center{
  flex: 1 0 auto;                 /* main grows to fill leftover space */
}

/* Admin's compact center: do NOT force full-screen height */
.theme.page--admin .center--compact{
  min-height: 0;                  /* override any 100vh/min-height from theme */
  padding-top: clamp(12px, 5vh, 36px);  /* a little breathing room at top */
  place-items: start center;      /* keep your content vertically higher */
}

/* Footer sits at bottom naturally; ensure it doesn't shrink */
.theme.page--admin .shell-footer{
  flex-shrink: 0;
}

/* ===== Admin page: center main, keep footer at bottom ===== */
.theme.page--admin .center{
  /* Make the main area fill the viewport minus the footer’s height,
     then center the card inside that space */
  min-height: calc(100vh - 56px);   /* footer min-height is 56px */
  min-height: calc(100dvh - 56px);  /* modern mobile browsers (override) */
  display: grid;
  place-items: center;
}

/* Make sure the footer doesn’t shrink */
.theme.page--admin .shell-footer{
  flex-shrink: 0;
}

/* Sticky page footer layout (opt-in per page) */
.theme.page--has-footer{
  min-height: 100vh;
  min-height: 100dvh;         /* modern mobile units */
  display: flex;
  flex-direction: column;
}

.theme.page--has-footer > main{
  flex: 1 0 auto;             /* main grows, pushes footer down */
}

.theme.page--has-footer .shell-footer{
  margin-top: auto;           /* footer sticks to bottom on short pages */
  flex-shrink: 0;
}

/* =========================================================================
   Data Management (data-management.html) – Rule 1 UI (scoped)
   ====================================================================== */

.mgmt-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
}

/* Global .card has max-width: 28rem; expand only inside mgmt page */
.mgmt-wrap .card {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.mgmt-wrap .card h2 { margin: 0 0 10px 0; font-size: 18px; }

/* Utilities just for this page */
.mgmt-wrap .hidden { display: none !important; }
.mgmt-wrap .ok { color: #2f855a; }
.mgmt-wrap .err { color: #c53030; }

/* “Find” row */
.mgmt-wrap .form-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  align-items: center;
}
.mgmt-wrap .form-row input[type="number"] {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
}

/* Details grid (avoid clashing with global .meta) */
.mgmt-wrap .meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.mgmt-wrap .meta div {
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--card-2);
}
.mgmt-wrap .meta label {
  display: block;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 4px;
}

/* Button row: don't use global space-between here */
.mgmt-wrap .actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
}

/* =========================
   Data Management — layout (R1 + R2 side-by-side)
   ========================= */
.mgmt-wrap { max-width: 1840px; margin: 0 auto; padding: 16px; } /* wider so R1 + 1100px R2 fit */
.mgmt-layout { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }

/* Keep Rule 1 as-is; just let it take remaining space next to Rule 2 */
.mgmt-layout .r1-card { flex: 1 1 480px; max-width: 680px; }

/* Rule 2 must be 1100px wide and wrap under R1 when screen is narrow */
.mgmt-layout .r2-card { flex: 0 0 1100px; max-width: 1100px; }

/* Rule 2 table */
.r2-table { width: 100%; border-collapse: collapse; }
.r2-table th, .r2-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; }
.r2-table thead th { position: sticky; top: 0; background: var(--card-2); z-index: 1; }

/* Actions column — keep all three buttons visible and wrapping nicely */
.r2-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.r2-actions .btn { flex: 1 1 160px; min-width: 140px; }

/* Pagination */
.r2-pagination { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.r2-pagination .btn { min-width: 96px; }

/* ---- Data Management tabs (Rule 1 / Rule 2) ---- */
.mgmt-tabs{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.mgmt-tab[aria-selected="true"]{outline:2px solid var(--brand,#00ADBF);outline-offset:2px}

.rule-panel{display:none}
.rule-panel.active{display:block}

/* Host container where the selected rule renders below the tabs */
.mgmt-host{display:block}

/* Enforce requested widths (with responsive fallback) */
.mgmt-host .r1-card{width:500px;max-width:100%}
.mgmt-host .r2-card{width:1100px;max-width:100%}

/* Keep Rule 2 table buttons tidy */
.r2-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.r2-actions .btn{flex:1 1 160px;min-width:140px}

/* --- Rule 2: compact icon buttons side-by-side --- */
.r2-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;              /* keep them on one line */
}

.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;                    /* small, fixed size */
  height:32px;
  padding:0;                     /* override default .btn padding */
  line-height:1;
}

.btn-icon svg{ width:16px; height:16px; }

/* icon colors */
.btn-icon--ok{ color:#2e7d32; }      /* green check */
.btn-icon--danger{ color:#c53030; }  /* red X */
.btn-icon--muted{ color:inherit; }   /* eye uses current text color */

/* ensure actions column has enough room but not huge */
#r2Table th[colspan], #r2Table th:last-child{ white-space:nowrap; }
#r2Table th:last-child{ width:140px; }  /* room for 3x 32px + gaps */
.table-wrap{ overflow-x:auto; }         /* safe on narrow screens */

/* ---- Rule 2: make icon buttons half size ---- */
.btn-icon{
  width:8px;   /* was 32px */
  height:16px;  /* was 32px */
}

#r2Table th:last-child{ width:96px; } /* fits 3×16px + gaps */

/* Make the Rule 2 icon buttons truly small */
.r2-actions .btn { 
  min-width: 0 !important;     /* override the 140px floor */
  flex: 0 0 auto !important;   /* no flex-basis width */
  padding: 0 !important;       /* ensure no extra horizontal padding */
}

/* If you want the half-size icons we discussed */
.btn-icon{
  width:16px; 
  height:16px;
}
.btn-icon svg{
  width:12px; 
  height:12px;
}

/* === Workspace 20/80 split === */
.workspace.ws-split {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.ws-left {
  flex: 0 0 25%;
  max-width: 25%;
  overflow: auto;   /* scroll if needed */
  min-height: 0;    /* allow flex child to shrink for scrolling */
}

.ws-right {
  /* stays a flex item of .workspace (20/80 split) */
  flex: 1 1 80%;
  max-width: 80%;

  /* new: two vertical rows → 200px + remaining */
  display: grid;
  grid-template-rows: 200px 1fr;
  gap: 12px;

  /* layout hygiene */
  min-height: 0;
  overflow: hidden; /* top row and bottom row handle their own scroll */
}

/* Bottom (remaining) area under the 200px board */
/* Lay out Cycle Time and CFD side-by-side */
.wsr-main{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: nowrap;   /* keep them on one row; will scroll if too narrow */
  overflow: auto;      /* horizontal scroll on small widths */
}


/* Mobile: stack panels */
@media (max-width: 900px) {
  .workspace.ws-split {
    flex-direction: column;
  }
  .ws-left {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* === Metrics Starts Here === */

/* Base metric card */
.metric-card {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card, #fff), var(--card-2, #fafafa));
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #0f172a);
  opacity: 0.9;
}

.metric-card__title .subtitle{
  font-size: 10px;   /* same as Budgeted/Not Budgeted */
  line-height: 1.1;
  margin-left: 4px;
}

.metric-card__big {
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  color: var(--text, #0f172a);
}

.metric-card__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted, #64748b);
}

/* Board layout */
#board { display: flex; flex-wrap: wrap; gap: 12px;}

/* Zoom overlay + zoomed card */
.zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  pointer-events: none;   /* allow clicks to reach cards underneath */
}
.zoom-overlay.hidden { display: none; }

.metric-card.zoom3 {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 450px;   /* 3 × 150 */
  height: 450px;  /* 3 × 150 */
  transform: translate(-50%, -50%);
  z-index: 9999;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
}

/* Prevent background scroll while zoomed */
body.no-scroll { overflow: hidden; }

/* ===== Pipeline Metrics Card (before Backlog) ===== */
.pipeline-metrics-card{
  order: -101;            /* Backlog is -100; this comes first */
  position: relative;
  cursor: zoom-in;
  --border: #04FFFB;      /* cyan border like other cards */
}

/* small total in top-right (match others) */
.pipeline-metrics-card .metric-card__big{
  color: #FFFFFF;
  opacity: 1;                /* ensure true white over the card’s gradient */
  position: absolute;
  top: 6px;
  right: 8px;                /* keep aligned with existing totals */
  z-index: 3;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 40, 64, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  white-space: nowrap;
}

/* keep chart sizing consistent */
.pipeline-metrics-card svg{
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}

.pipeline-metrics-card.zoom3 svg { height: 384px; }

/* overlay rows at the bottom like Backlog/WIP */
.pipeline-metrics-card .metric-card__row{
  position: absolute;
  left: 8px;
  right: 8px;
  font-size: 10px;
  line-height: 1.1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0));
  padding: 0 2px;
}
.pipeline-metrics-card .metric-card__row:nth-last-of-type(2){ bottom: 22px; }
.pipeline-metrics-card .metric-card__row:last-of-type{ bottom: 6px; }

/* Pipeline: smaller total chip */
.pipeline-metrics-card .metric-card__big {
  font-size: 14px;   /* tweak to taste: 12–16px works well */
  line-height: 1;
}

/* Optional: make it a bit bigger when zoomed */
.pipeline-metrics-card.zoom3 .metric-card__big {
  font-size: 24px;
}


/* ----- Combined Backlog Metrics card ----- */
.backlog-metrics-card {
  order: -100;          /* keep first */
  cursor: zoom-in;
  position: relative;
}

.backlog-metrics-card .metric-card__title {
  margin-bottom: 0;
  font-size: 11px;
}

/* Small total, top-right */
.backlog-metrics-card .metric-card__big {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
}

/* Big pie inside 150×150 */
.backlog-metrics-card svg {
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}

/* 3× zoom behavior */
.backlog-metrics-card.zoom3 { cursor: zoom-out; }
.backlog-metrics-card.zoom3 svg { height: 384px; }

/* Overlay the two rows at the bottom to free space for the pie */
.backlog-metrics-card .metric-card__row {
  position: absolute;
  left: 8px;
  right: 8px;
  font-size: 10px;
  line-height: 1.1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0));
  padding: 0 2px;
}
.backlog-metrics-card .metric-card__row:nth-last-of-type(2) { bottom: 22px; } /* Approved */
.backlog-metrics-card .metric-card__row:last-of-type       { bottom: 6px; }  /* Not Approved */
/* Example: navy labels by default, cyan when zoomed */
.backlog-metrics-card { --pie-label-color: #00141F; }
.backlog-metrics-card.zoom3 { --pie-label-color: #04FFFB; }
/* Cyan border on the Backlog card */
.backlog-metrics-card {
  --border: #04FFFB; /* keeps 1px solid from .metric-card */
}

/* ===== WIP Metrics Card (matches Backlog card behavior) ===== */
.wip-metrics-card svg {
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}

/* 3× zoom behavior */
.wip-metrics-card.zoom3 { cursor: zoom-out; }
.wip-metrics-card.zoom3 svg { height: 384px; }

/* Overlay the two rows at the bottom to free space for the pie */
.wip-metrics-card .metric-card__row {
  position: absolute;
  left: 8px;
  right: 8px;
  font-size: 10px;
  line-height: 1.1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0));
  padding: 0 2px;
}
.wip-metrics-card .metric-card__row:nth-last-of-type(2) { bottom: 22px; } /* Started */
.wip-metrics-card .metric-card__row:last-of-type       { bottom: 6px;  } /* Not Started */

/* Same label color behavior as Backlog */
.wip-metrics-card { --pie-label-color: #00141F; }
.wip-metrics-card.zoom3 { --pie-label-color: #04FFFB; }

/* Cyan border like Backlog */
.wip-metrics-card { --border: #04FFFB; }

/* WIP: match Backlog card behavior exactly */
.wip-metrics-card {
  position: relative;   /* anchor the absolutely-positioned rows */
  cursor: zoom-in;      /* same affordance as Backlog */
}

/* Optional but recommended: place the total like Backlog’s small top-right */
.wip-metrics-card .metric-card__big {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
}

/* Default pie label color (optional) */
.metric-card svg text { fill: #002840; }

/* When the card is zoomed 3x, switch label color */
#backlogMetrics.zoom3 svg text,
#wipMetrics.zoom3 svg text,
.metric-card.zoom3 svg text {
  fill: #002840 !important;
}

/* ===== Throughput Metrics Card (matches Backlog/WIP) ===== */
.throughput-metrics-card {
  position: relative;
  cursor: zoom-in;
  --pie-label-color: #00141F; /* navy while small */
  --border: #04FFFB;          /* cyan border like other cards */
}

.throughput-metrics-card .metric-card__big {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
}

.throughput-metrics-card svg {
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}

/* overlay rows for date range */
.throughput-metrics-card .metric-card__row {
  position: absolute;
  left: 8px;
  right: 8px;
  font-size: 10px;
  line-height: 1.1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0));
  padding: 0 2px;
}
.throughput-metrics-card .metric-card__row:nth-last-of-type(2) { bottom: 22px; } /* From */
.throughput-metrics-card .metric-card__row:last-of-type       { bottom: 6px;  } /* To */

/* zoom label color (same as your other cards) */
.throughput-metrics-card.zoom3 { --pie-label-color: #04FFFB; }

/* honor your global zoom text override as well */

.date-inline-input {
  width: 96px;            /* fits MM/DD/YYYY */
  font-size: 10px;
  line-height: 1.1;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: rgba(255,255,255,0.06); /* readable on dark */
  color: var(--white);                 /* <-- text color */
  -webkit-text-fill-color: var(--white); /* <-- Blink/WebKit */
  caret-color: var(--white);                 /* dark-native controls */
  outline: none;
}

/* Ensure all parts of the date text render white */
.date-inline-input::-webkit-datetime-edit,
.date-inline-input::-webkit-datetime-edit-text,
.date-inline-input::-webkit-datetime-edit-year-field,
.date-inline-input::-webkit-datetime-edit-month-field,
.date-inline-input::-webkit-datetime-edit-day-field {
  color: var(--white);
}

/* Calendar icon: force light glyph on dark */
.throughput-metrics-card .date-inline-input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2) contrast(1.05) !important;
  opacity: 1 !important;
}

/* ===== Throughput Metrics Card (match Backlog/WIP zoom) ===== */
.throughput-metrics-card svg {
  width: 100%;
  height: 128px;   /* normal card size */
  display: block;
  margin-top: 0;
}

.throughput-metrics-card.zoom3 { cursor: zoom-out; }
.throughput-metrics-card.zoom3 svg {
  height: 384px;   /* 3× zoom height (same as Backlog/WIP) */
}

/* Optional: date text color behavior, mirroring others */
.throughput-metrics-card { --pie-label-color: #00141F; }
.throughput-metrics-card.zoom3 { --pie-label-color: #04FFFB; }

/* You already have this global rule, so labels turn navy when zoomed:
   .metric-card.zoom3 svg text { fill: #002840 !important; } */

/* === Tooltip for editable dates (tp_from / tp_to) === */
.has-tip { position: relative; cursor: pointer; }
.has-tip:focus { outline: none; }

.has-tip:hover::after,
.has-tip:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;               /* show on TOP of the date */
  left: 50%;
  transform: translate(-50%, -8px);
  background: rgba(0, 40, 64, 0.95);  /* matches your deep blue family */
  color: #CDE0F7;                     /* readable on dark */
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  pointer-events: none;
  z-index: 50;
}

.has-tip:hover::before,
.has-tip:focus::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(0, 40, 64, 0.95);
  z-index: 49;
}
/* Variant: place tooltip BELOW the trigger (for chart titles) */
.has-tip.tip-below:hover::after,
.has-tip.tip-below:focus::after{
  top: 100%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 8px);
}

.has-tip.tip-below:hover::before,
.has-tip.tip-below:focus::before{
  top: calc(100% - 4px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* Put chart-title tooltips above all layers */
.has-tip { position: relative; z-index: 10010; }

.has-tip:hover::after,
.has-tip:focus::after { z-index: 10011; }

.has-tip:hover::before,
.has-tip:focus::before { z-index: 10010; }


/* Make the top-right totals white (match PV/AV chip styling) */
.backlog-metrics-card .metric-card__big,
.wip-metrics-card .metric-card__big,
.throughput-metrics-card .metric-card__big {
  color: #FFFFFF;
  opacity: 1;                /* ensure true white over the card’s gradient */
  position: absolute;
  top: 6px;
  right: 8px;                /* keep aligned with existing totals */
  z-index: 3;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 40, 64, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  white-space: nowrap;
  /* drop display:grid / grid-template-columns unless you’ll add a label */
}


/* ===== Planned Velocity Metrics Card (combo chart) ===== */
.planned-velocity-card {
  position: relative;
  cursor: zoom-in;
  --border: #04FFFB; /* cyan border to match other metric cards */
}
.planned-velocity-card svg {
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}
.planned-velocity-card.zoom3 svg { height: 384px; }

/* compact stats stack in the top-right */
.planned-velocity-card .metric-card__stats {
  position: absolute;
  top: 6px;
  right: 8px;
  text-align: right;
  font-size: 10px;
  line-height: 1.05;
  opacity: 0.95;
}
.planned-velocity-card .metric-card__stats .v {
  font-size: 14px;
  font-weight: 400;
}

/* ===== Planned Velocity Metrics Card (combo chart) ===== */
.planned-velocity-metrics-card svg {
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}

.planned-velocity-metrics-card.zoom3 svg { height: 384px; }

/* Top-right mini-stats block */
.planned-velocity-metrics-card .metric-card__stats {
  position: absolute;
  top: 6px;
  right: 8px;
  text-align: right;
  font-size: 10px;
  line-height: 1.05;
  opacity: 0.95;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
}
.planned-velocity-metrics-card .metric-card__stats .v {
  font-size: 14px;
  font-weight: 400;
}

/* ===== Planned Velocity card: legible top-right stats on small card ===== */
.planned-velocity-metrics-card,
.planned-velocity-card {
  position: relative; /* ensure a stacking context */
}

/* keep title above the chart, too */
.planned-velocity-metrics-card .metric-card__title,
.planned-velocity-card .metric-card__title {
  position: relative;
  z-index: 2;
}

/* stats chip: high-contrast, above the SVG */
/* total and average planned velocity small box */
.planned-velocity-metrics-card .metric-card__stats,
.planned-velocity-card .metric-card__stats {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;                    /* ensure on top of SVG */
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 40, 64, 0.55);      /* deep-navy glass */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  white-space: nowrap;

}

/* label color = brand cyan; value = bright for contrast */
.planned-velocity-metrics-card .metric-card__stats { color: #04D9FF; }
.planned-velocity-card .metric-card__stats { color: #04D9FF; }

.planned-velocity-metrics-card .metric-card__stats .v,
.planned-velocity-card .metric-card__stats .v {
  color: #FFFFFF;
  font-size: 12px;        /* larger for the 150x150 card */
  line-height: 1.15;
  font-weight: 400;
}

/* make sure the chart sits underneath the chip */
.planned-velocity-metrics-card svg,
.planned-velocity-card svg {
  position: relative;
  z-index: 1;
}

/* zoomed: scale up the numbers a bit for readability */
.planned-velocity-metrics-card.zoom3 .metric-card__stats .v,
.planned-velocity-card.zoom3 .metric-card__stats .v {
  font-size: 28px;
  line-height: 1.1;
}

/* fallback if no backdrop-filter support */
@supports not (backdrop-filter: blur(2px)) {
  .planned-velocity-metrics-card .metric-card__stats,
  .planned-velocity-card .metric-card__stats {
    background: rgba(0, 40, 64, 0.85);
  }
}

/* Cyan border like Backlog/WIP/Throughput */
.planned-velocity-metrics-card { --border: #04FFFB; }

/* Planned Velocity: make the line highly visible, and color only the μ label to match */
.planned-velocity-metrics-card { --pv-line: #04FFFB; }              /* pick any bright brand color */

#pv_svg polyline {                                                   /* override JS stroke attr */
  stroke: var(--pv-line, #04FFFB) !important;
  stroke-width: 2.5 !important;                                      /* a touch thicker for clarity */
}

/* Only the second .sym inside the stats stack is the “μ” (Average) label */
.planned-velocity-metrics-card .metric-card__stats .sym:nth-of-type(2) {
  color: var(--pv-line, #04FFFB);
}

/* ===== Actual Velocity Metrics Card (combo chart) ===== */
.actual-velocity-card {
  position: relative;
  cursor: zoom-in;
  --border: #04FFFB; /* cyan border to match other metric cards */
}
.actual-velocity-card svg {
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}
.actual-velocity-card.zoom3 svg { height: 384px; }

/* compact stats stack in the top-right */
.actual-velocity-card .metric-card__stats {
  position: absolute;
  top: 6px;
  right: 8px;
  text-align: right;
  font-size: 10px;
  line-height: 1.05;
  opacity: 0.95;
}
.actual-velocity-card .metric-card__stats .v {
  font-size: 14px;
  font-weight: 400;
}

/* ===== Actual Velocity Metrics Card (combo chart) ===== */
.actual-velocity-metrics-card svg {
  width: 100%;
  height: 128px;
  display: block;
  margin-top: 0;
}

.actual-velocity-metrics-card.zoom3 svg { height: 384px; }

/* Top-right mini-stats block */
.actual-velocity-metrics-card .metric-card__stats {
  position: absolute;
  top: 6px;
  right: 8px;
  text-align: right;
  font-size: 10px;
  line-height: 1.05;
  opacity: 0.95;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
}
.actual-velocity-metrics-card .metric-card__stats .v {
  font-size: 14px;
  font-weight: 400;
}

/* ===== Actual Velocity card: legible top-right stats on small card ===== */
.actual-velocity-metrics-card,
.actual-velocity-card {
  position: relative; /* ensure a stacking context */
}

/* keep title above the chart, too */
.actual-velocity-metrics-card .metric-card__title,
.actual-velocity-card .metric-card__title {
  position: relative;
  z-index: 2;
}

/* stats chip: high-contrast, above the SVG */
/* total and average actual velocity small box */
.actual-velocity-metrics-card .metric-card__stats,
.actual-velocity-card .metric-card__stats {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;                    /* ensure on top of SVG */
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 40, 64, 0.55);      /* deep-navy glass */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  white-space: nowrap;

}

/* label color = brand cyan; value = bright for contrast */
.actual-velocity-metrics-card .metric-card__stats { color: #04D9FF; }
.actual-velocity-card .metric-card__stats { color: #04D9FF; }

.actual-velocity-metrics-card .metric-card__stats .v,
.actual-velocity-card .metric-card__stats .v {
  color: #FFFFFF;
  font-size: 12px;        /* larger for the 150x150 card */
  line-height: 1.15;
  font-weight: 400;
}

/* make sure the chart sits underneath the chip */
.actual-velocity-metrics-card svg,
.actual-velocity-card svg {
  position: relative;
  z-index: 1;
}

/* zoomed: scale up the numbers a bit for readability */
.actual-velocity-metrics-card.zoom3 .metric-card__stats .v,
.actual-velocity-card.zoom3 .metric-card__stats .v {
  font-size: 28px;
  line-height: 1.1;
}

/* fallback if no backdrop-filter support */
@supports not (backdrop-filter: blur(2px)) {
  .actual-velocity-metrics-card .metric-card__stats,
  .actual-velocity-card .metric-card__stats {
    background: rgba(0, 40, 64, 0.85);
  }
}

/* Cyan border like Backlog/WIP/Throughput */
.actual-velocity-metrics-card { --border: #04FFFB; }

/* Actual Velocity: make the line highly visible, and color only the μ label to match */
.actual-velocity-metrics-card { --av-line: #04FFFB; }              /* pick any bright brand color */

#av_svg polyline {                                                   /* override JS stroke attr */
  stroke: var(--av-line, #04FFFB) !important;
  stroke-width: 2.5 !important;                                      /* a touch thicker for clarity */
}

/* Only the second .sym inside the stats stack is the “μ” (Average) label */
.actual-velocity-metrics-card .metric-card__stats .sym:nth-of-type(2) {
  color: var(--av-line, #04FFFB);
}

/* ============================= large metric cards ============================ */
/* === Large Metric Card (450 x 300) =============================== */
/* Inherits all visuals from .metric-card; only size (and some type scale) changes */
.large-metric-card {
  width: 450px;
  height: 300px;
  flex: 0 0 auto;         /* prevents flex stretch/shrink in .board */
}

/* Optional: scale text nicely on the larger canvas */
.large-metric-card .metric-card__title { font-size: 14px; }
.large-metric-card .metric-card__big   { font-size: 64px; line-height: 1; }

/* Keep SVG responsive inside the larger tile */
.large-metric-card svg { max-width: 100%; height: auto; }

/* Force two rows in the Right panel: items 1–2 on row 1, 3–4 on row 2 */
#wsRightMain {
  display: grid;
  grid-template-columns: repeat(2, 450px); /* matches .large-metric-card width */
  gap: 12px;
  align-items: start;
  justify-content: start;  /* or 'center' if you prefer centered tiles */
  overflow: auto;          /* keep your scroll behavior */
  padding-left: 16px;   /* matches .board { padding: 16px } at line 384 */
}

#nmMetrics { position: relative; --border: #04FFFB; } /* anchor abs children + cyan border */

/* === Cycle Time (scatter) — cleaned =================================== */
#nmMetrics { position: relative; --border: #04FFFB; } /* anchor abs children + cyan border */

/* Keep title visible above chart */
#nmMetrics .metric-card__title { position: relative; z-index: 7; }

/* Chart box + spacing so title & bottom chips don’t overlap */
#nmMetrics #ct_svg{
  width: 100%;
  height: 220px;
  display: block;
  margin-top: 18px;         /* show "Cycle Time" title clearly */
  margin-bottom: 36px;      /* room for bottom-right stats chip / selector */
  shape-rendering: geometricPrecision;
}

/* Axis visibility on dark background */
#nmMetrics #ct_svg text{
  fill: #CDE0F7;                    /* readable labels */
  stroke: rgba(0,18,40,0.55);
  stroke-width: 0.5px;
  paint-order: stroke fill;
}
#nmMetrics #ct_svg line{ stroke: rgba(205,224,247,0.22); }   /* grid/ticks */
#nmMetrics #ct_svg path{ stroke: rgba(255,255,255,0.35); }   /* axis frame */

/* Scatter dots: subtle outline for contrast */
#nmMetrics #ct_svg circle{
  stroke: rgba(4,217,255,0.45);
  stroke-width: 0.8;
}

/* Unit selector (bottom-left), sized for 10px font */
#nmMetrics .ct-controls{
  position: absolute;
  bottom: 6px;
  left: 8px;
  z-index: 6;                  /* above SVG */
  pointer-events: auto;
}
#nmMetrics .ct-controls *{ pointer-events: auto; }
#nmMetrics .ct-unit{
  box-sizing: border-box;
  font-size: 10px;             /* requested size */
  height: 22px;
  line-height: 18px;
  padding: 2px 22px 2px 8px;   /* space for native arrow */
  min-width: 110px;            /* fits 'Quarters' */
  border-radius: 8px;
  border: 1px solid rgba(205,224,247,0.25);
  background: #00162A;         /* solid dark */
  color: #E6F2FF;              /* readable on dark */
  -webkit-text-fill-color: #E6F2FF;
  outline: none;
}
#nmMetrics .ct-unit option{
  font-size: 10px;
  line-height: 1.3;
}

/* Summary chip (P50 / P85 / N): bottom-right, one line, 10px */
#nmMetrics #ct_stats{
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 6;

  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0,40,64,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #04D9FF;
}
#nmMetrics #ct_stats .stat-label{ margin-right: 4px; font-size: 10px; }
#nmMetrics #ct_stats .v{
  margin-right: 12px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
}
/* Large metric card zoom: 450x300 → 675x450 */
.large-metric-card.zoom3 { width: 675px; height: 450px; }

/* Cursor affordance for large tiles */
.large-metric-card { cursor: zoom-in; }
.large-metric-card.zoom3 { cursor: zoom-out; }

/* Cycle Time SVG height in zoom (220 → 330) */
#nmMetrics.zoom3 #ct_svg { height: 330px; }

/* All zoomed metric cards: solid dark background */
.metric-card.zoom3 {
  --card: #00141f;
  --card-2: #00141f;
  background: #00141f !important;
}

#nmMetrics #ct_stats .v:last-of-type{ margin-right: 0; }
/* === Cycle Time hover tooltip ======================================= */
#nmMetrics .ct-tip{
  position: absolute;
  z-index: 8;
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,40,64,.95);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transform: translate(-9999px, -9999px);
}
#nmMetrics .ct-tip .row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  white-space: nowrap;
}
#nmMetrics .ct-tip .k{ color:#04D9FF; }
#nmMetrics .ct-tip[hidden]{ display:none; }

/* All zoomed metric cards: force solid dark background */
.metric-card.zoom3 {
  --card: #00141f;
  --card-2: #00141f;
  background: #00141f !important; /* wins over earlier gradient */
}

/* Large metric card zoom: 450x300 → 675x450 (overrides .metric-card.zoom3 450x450) */
.large-metric-card.zoom3 {
  width: 675px;
  height: 450px;
}

/* Cursor semantics for large cards */
.large-metric-card { cursor: zoom-in; }
.large-metric-card.zoom3 { cursor: zoom-out; }

/* Cycle Time SVG height in zoom (220 → 330) */
#nmMetrics.zoom3 #ct_svg { height: 330px; }

/* Center Cycle Time when zoomed */
#nmMetrics.zoom3 {
  position: fixed;              /* override the base #nmMetrics { position:relative } */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;                /* above the overlay */
}
/* Keep Cycle Time axis labels readable when zoomed */
#nmMetrics.zoom3 #ct_svg text {
  fill: #CDE0F7 !important;        /* override the global zoom text color */
  stroke: rgba(0,18,40,0.55);
  stroke-width: 0.5px;
  paint-order: stroke fill;
}

/* === Lead Time (histogram) ============================================= */
#ltMetrics { position: relative; --border: #04FFFB; }

#ltMetrics .metric-card__title { position: relative; z-index: 7; }

/* Chart box + spacing so title & chips don’t overlap */
#ltMetrics #lt_svg{
  width: 100%;
  height: 220px;
  display: block;
  margin-top: 18px;
  margin-bottom: 36px;
  shape-rendering: geometricPrecision;
}

/* Axis/readability on dark background (match Cycle Time) */
#ltMetrics #lt_svg text{
  fill: #CDE0F7;
  stroke: rgba(0,18,40,0.55);
  stroke-width: 0.5px;
  paint-order: stroke fill;
}
#ltMetrics #lt_svg line{ stroke: rgba(205,224,247,0.22); }
#ltMetrics #lt_svg path{ stroke: rgba(255,255,255,0.35); }

/* Unit selector (bottom-left), sized for 10px font (mirrors Cycle Time) */
#ltMetrics .lt-controls{
  position: absolute;
  bottom: 6px;
  left: 8px;
  z-index: 6;
  pointer-events: auto;
}
#ltMetrics .lt-controls *{ pointer-events: auto; }
#ltMetrics .lt-unit{
  box-sizing: border-box;
  font-size: 10px;
  height: 22px;
  line-height: 18px;
  padding: 2px 22px 2px 8px;
  min-width: 110px;            /* fits 'Quarters' */
  border-radius: 8px;
  border: 1px solid rgba(205,224,247,0.25);
  background: #00162A;
  color: #E6F2FF;
  -webkit-text-fill-color: #E6F2FF;
  outline: none;
}

/* Summary chip (N / μ): bottom-right (mirrors Cycle Time chip style) */
#ltMetrics #lt_stats{
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  white-space: nowrap;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0,40,64,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #04D9FF;
}
#ltMetrics #lt_stats .v{
  font-size: 10px;
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
}

/* Zoom: enlarge chart area like Cycle Time */
#ltMetrics.zoom3 #lt_svg { height: 330px; }

/* Solid dark background when any card is zoomed (already used elsewhere) */
/* (No change needed; your .metric-card.zoom3 rule already handles this) */

/* Lead Time stats: horizontal like Cycle Time percentiles */
#ltMetrics #lt_stats{
  position: absolute;      /* keep bottom-right chip */
  right: 8px;
  bottom: 6px;
  z-index: 6;

  display: flex;           /* <<< switch from grid to one horizontal row */
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0,40,64,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #04D9FF;
}

#ltMetrics #lt_stats .stat-label{ margin-right: 4px; font-size: 10px; }
#ltMetrics #lt_stats .v{
  margin-right: 12px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
}
#ltMetrics #lt_stats .v:last-of-type{ margin-right: 0; }

/* Lead Time: make the first label (N) match Cycle Time 95% color */
#ltMetrics #lt_stats .stat-label.sym:first-of-type {
  color: #CDE0F7 !important; /* overrides any inline style */
}

/* === Cumulative Flow (CFD) ============================================= */
#cfdMetrics { position: relative; --border: #04FFFB; }

#cfdMetrics #cfd_svg{
  width: 100%;
  height: 300px !important;
  display: block;
  margin-top: 18px;
  margin-bottom: 10px;            /* room for bottom legend */
  shape-rendering: geometricPrecision;
  font-size: 12px;
}

/* Axis/readability on dark background (match Cycle/Lead) */
#cfdMetrics #cfd_svg text{
  fill: #CDE0F7;
  stroke: rgba(0,18,40,0.55);
  stroke-width: 0.5px;
  paint-order: stroke fill;
}
#cfdMetrics #cfd_svg line{ stroke: rgba(205,224,247,0.22); }
#cfdMetrics #cfd_svg path{ stroke: rgba(255,255,255,0.35); }

/* Keep labels readable when zoomed */
#cfdMetrics.zoom3 #cfd_svg text{
  fill: #CDE0F7 !important;
  stroke: rgba(0,18,40,0.55);
  stroke-width: 0.5px;
  paint-order: stroke fill;
}

/* Legend (same typographic feel as your bottom chips) */
#cfd_legend.legend-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 16px; margin-top:6px; padding-top:6px;
  border-top:1px solid var(--border);
  color:#CDE0F7; font-size:10px; line-height:1.1;
}
#cfd_legend .legend-item{ display:inline-flex; align-items:center; gap:6px; }
#cfd_legend .legend-item .swatch{
  width:10px; height:10px; border-radius:2px;
  border:1px solid rgba(255,255,255,0.6);
}
/* === CFD zoom: center & scale to match Cycle/Lead ======================= */
#cfdMetrics.zoom3 {
  position: fixed;              /* same viewport centering pattern */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
/* CFD SVG height in zoom (220 → 330 like Cycle/Lead) */
#cfdMetrics.zoom3 #cfd_svg { height: 330px; }

/* CFD zoom: center & scale to match other large cards */
#cfdMetrics.zoom3{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 675px;     /* same zoom footprint as other large cards */
  height: 450px;
}

#cfdMetrics { cursor: zoom-in; }

/* CFD hover tooltip (fixed so it can exceed card bounds) */
#cfdMetrics .ct-tip{
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,40,64,.95);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transform: translate(-9999px, -9999px);
}
#cfdMetrics .ct-tip .row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  white-space: nowrap;
}
#cfdMetrics .ct-tip .k{ color:#04D9FF; }
#cfdMetrics .ct-tip[hidden]{ display:none; }

#cfdMetrics .ct-tip{ position:fixed; z-index:10000; }


.data-table td .cell-main { display:block; }
.data-table td .cell-sub  {
  display:block;
  margin-top:4px;
  font-size:11px;
  color: #39FF14;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.data-table td .cell-sub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}

/* =========================================================================
   Admin Users (User Management) – table, chips, and modals
   Scope to .theme.page--admin to avoid leaking to other pages
   ====================================================================== */

.theme.page--admin .um-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.theme.page--admin .um-table thead th { font-weight: 600; text-align: left; }
.theme.page--admin .um-table th,
.theme.page--admin .um-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  vertical-align: top;
  word-break: break-word;
}
.theme.page--admin .um-table tbody tr:hover { background: rgba(255,255,255,.03); }

/* Row action chips */
.theme.page--admin .row-actions { display:flex; flex-wrap:wrap; gap:6px; }
.theme.page--admin .row-actions .btn,
.theme.page--admin .row-actions .btn-sm {
  font-size:11px; line-height:1.1; padding:2px 8px; height:24px;
  border-radius:999px; border:1px solid var(--border-strong);
  background: rgba(0,20,31,.60);
  cursor: pointer;
}
.theme.page--admin .row-actions .btn:hover { background: rgba(0,20,31,.75); }
.theme.page--admin .row-actions .btn:focus-visible { outline:2px solid #04D9FF; outline-offset:1px; }
.theme.page--admin .row-actions .btn-primary {
  color:#04D9FF; background:#002840; border-color: rgba(4,217,255,.50);
}

/* Modals: hidden by default; JS sets display:flex to open */
.theme.page--admin .modal-backdrop{
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 1000;
}
/* Stacking: Step-Up above Add/Edit */
.theme.page--admin #editWrap   { z-index: 1000; }
.theme.page--admin #stepUpWrap { z-index: 1100; }

/* Lock scroll & hide page while Step-Up is active */
.theme.page--admin.modal-open { overflow: hidden; }
.theme.page--admin.stepup-open main { display: none; }

.theme.page--admin .modal{
  background:#00141f;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  width: min(90%, 520px);
  max-height: 85vh;
  overflow:auto;
}
.theme.page--admin .modal h2 { margin-top:0; }
.theme.page--admin .modal .actions { display:flex; gap:8px; flex-wrap:wrap; }
.theme.page--admin .modal .input,
.theme.page--admin .modal input,
.theme.page--admin .modal select,
.theme.page--admin .modal textarea { width:100%; }

/* Tame autofill glow on dark backgrounds */
.theme.page--admin input:-webkit-autofill,
.theme.page--admin input:-webkit-autofill:hover,
.theme.page--admin input:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}
/* Make Admin Users content wider (only this page) */
.theme.page--admin .center.center--compact {
  max-width: clamp(960px, 92vw, 1280px); /* ~2× wider, responsive */
}

/* Ensure the card and table actually fill the container */
.theme.page--admin .card { width: 100%; }
.theme.page--admin #list { width: 100%; overflow-x: auto; }
.theme.page--admin .um-table { width: 100%; }

/* Make Admin Users content wider (page-scoped, high specificity) */
body.theme.page--admin main.center.center--compact {
  max-width: clamp(960px, 92vw, 1280px) !important;  /* ~2× wider */
  width: 100% !important;
}

/* Ensure the card and list aren't capped by a smaller max-width */
body.theme.page--admin main.center.center--compact > .card {
  max-width: none !important;
  width: 100% !important;
}

body.theme.page--admin #list {
  max-width: none !important;
  width: 100% !important;
  overflow-x: auto;   /* allows horizontal scroll if needed */
}

/* Table should actually use the full width */
body.theme.page--admin .um-table { width: 100% !important; }
/* app.css */
.lead-time-metrics-card.zoom3 svg text {
  fill: #CDE0F7 !important;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 1px;
}
/* === Lead Time hover tooltip (mirror Cycle Time) ===================== */
#ltMetrics .ct-tip{
  position: absolute;
  z-index: 8;
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,40,64,.95);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transform: translate(-9999px, -9999px);
}
#ltMetrics .ct-tip .row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  white-space: nowrap;
}
#ltMetrics .ct-tip .k{ color:#04D9FF; }
#ltMetrics .ct-tip[hidden]{ display:none; }

/* Shared tooltip constraints (Cycle Time + Lead Time) */
/* Shared tooltip constraints (Cycle Time + Lead Time) */
.metric-card .ct-tip{
  min-width: 400px;           /* NEW: avoid super-narrow hovers */
  max-width: 800px;           /* NEW: wider hover box */
  max-height: 400px;          /* a bit taller */
  overflow: hidden;
  will-change: transform;
}


.metric-card .ct-tip .items{
  margin-top: 6px;
  max-height: 140px;     /* room for summary above */
  overflow: auto;        /* scroll only when pinned */
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.metric-card .ct-tip .more{
  margin-top: 4px;
  font-size: 11px;
  opacity: .8;
  text-decoration: underline;
  cursor: pointer;
}

.metric-card .ct-tip.pinned{
  pointer-events: auto;  /* allow scroll/click only when pinned */
  z-index: 9999;
}
/* Pinned chart tooltip: center screen + wide; wrap rows, no H-scroll */
/* Pinned: center screen + comfortably wide */
.metric-card .ct-tip.pinned{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(560px, 70vw, 980px);   /* wider panel */
  max-height: min(80vh, 680px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
}


/* When pinned, allow text to wrap nicely */
.metric-card .ct-tip.pinned .row{
  white-space: normal;
  grid-template-columns: minmax(56px, auto) 1fr;
  align-items: start;
}

/* Give the list more room when pinned */
.metric-card .ct-tip.pinned .items{
  max-height: calc(80vh - 120px);
}

/* Lead Time: when pinned, allow interaction (ID selector wins specificity) */
#ltMetrics .ct-tip.pinned { pointer-events: auto !important; }

/* Lead Time pinned tooltip: center on screen & interactive */
#ltMetrics .ct-tip.pinned{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;  /* beats the ID base rule */
  width: clamp(560px, 70vw, 980px);
  max-height: min(80vh, 680px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
  z-index: 10000;
  pointer-events: auto !important;              /* click/scroll inside */
}
/* Lock the page to the viewport on dashboard/landing; let the workspace scroll */
@supports (height: 100dvh) {
  .page:has(.workspace) { height: 100dvh; overflow: hidden; }
}
.page:has(.workspace) .workspace { overflow: auto; }

/* Keep the header opaque on pages with the workspace so content never shows through */
.page:has(.workspace) .shell-header{
  background: linear-gradient(180deg, rgba(0, 20, 31, 0.96), rgba(0, 20, 31, 0.94));
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  backdrop-filter: saturate(1.05) blur(6px);
}
/* === Quill “snow” on dark theme (global) ============================== */
.theme .ql-toolbar.ql-snow{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--white);
}
.theme .ql-container.ql-snow{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-top: 0;
  color: var(--white);
}
.theme .ql-editor{ color: var(--white); }
.theme .ql-editor.ql-blank::before{ color: var(--muted); }

/* Make icons/carets visible */
.theme .ql-snow .ql-stroke{ stroke: var(--white) !important; }
.theme .ql-snow .ql-fill{   fill:   var(--white) !important; }

/* Hover/active accent = brand cyan */
.theme .ql-snow .ql-toolbar button:hover .ql-stroke,
.theme .ql-snow .ql-toolbar button.ql-active .ql-stroke{ stroke:#04D9FF !important; }
.theme .ql-snow .ql-toolbar button:hover .ql-fill,
.theme .ql-snow .ql-toolbar button.ql-active .ql-fill{   fill:#04D9FF !important; }

/* Pickers & dropdowns */
.theme .ql-snow .ql-picker,
.theme .ql-snow .ql-picker-label{ color: var(--white) !important; }
.theme .ql-snow .ql-picker-options{
  background:#0b2a39;
  border:1px solid var(--border);
  color:var(--white);
}
.theme .ql-snow .ql-picker-options .ql-picker-item:hover,
.theme .ql-snow .ql-picker-options .ql-picker-item.ql-selected{
  color:#04D9FF;
}

/* Link/image tooltip (the small inline dialog) */
.theme .ql-snow .ql-tooltip{
  background:#00141f;
  border:1px solid var(--border);
  color:var(--white);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.theme .ql-snow .ql-tooltip input[type="text"]{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--white);
}
/* ==== LEFT RAIL TABS + LIST (ws-left) ================================== */
.ws-left { padding: 8px 10px; }

.ws-left .toolbar { padding: 8px 10px; }

/* Make the existing chips behave like tabs inside ws-left only (add-only) */
.ws-left .toolbar .chip {
  cursor: pointer;                /* override 'not-allowed' in global toolbar */
  opacity: 1;
  border-style: solid;
}
.ws-left .toolbar .chip[aria-selected="true"]{
  background: rgba(255,255,255,.10);
  border-color: var(--text);
  color: #fff;
}

.ws-left .sidebar-divider {
  border-bottom: 1px solid var(--border-strong);
  margin: 6px 0 8px 0;
}

/* List container + table: 10px max everywhere under the tabs */
.ws-left .side-list { font-size: 12px; line-height: 1.25; }
.ws-left .side-table {
  width: 100%;
  border-collapse: collapse;
}
.ws-left .side-table thead th {
  position: sticky; top: 0;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 700;
  padding: 6px 6px;
  font-size: 12px;                /* max 10px per requirement */
  white-space: nowrap;
}
.ws-left .side-table tbody td {
  border-bottom: 1px solid var(--border);
  padding: 6px 6px;
  vertical-align: top;
  font-size: 12px;                /* max 10px per requirement */
}
.ws-left .side-table tbody tr { cursor: pointer; }
.ws-left .side-table tbody tr:hover td {
  background: rgba(255,255,255,.04);
}

/* subtle id column + numeric alignment where useful */
.ws-left .side-table td.id   { text-align: center; width: 6ch; white-space: nowrap; }
.ws-left .side-table td.num  { text-align: right; white-space: nowrap; }
.ws-left .side-table td.date { white-space: nowrap; }

/* clamp name to keep rows tight */
.ws-left .side-table td.name {
  max-width: 26ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Let the Name column expand and still truncate neatly */
.ws-left .side-table { table-layout: fixed; } /* harmless even if JS sets it */
.ws-left .side-table td.name { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme .de-rail{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border-right: 1px solid var(--border);
  color: var(--white);
}

/* Data explorer starts herer */

body.theme .de-rail h2{ color: var(--text); }
body.theme .de-metric{ color: var(--muted); }
body.theme .de-metric strong{ color: var(--white); }

/* Toolbar + controls */
body.theme .de-toolbar .btn{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--white);
}
body.theme .de-toolbar .btn[aria-pressed="true"]{
  background: rgba(0,40,64,.55);
  border-color: var(--border);
}
body.theme .de-toolbar select,
body.theme .de-toolbar input[type="text"],
body.theme .filter-row input[type="text"],
body.theme .filter-row select,
body.theme .filter-date input[type="date"]{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--white);
}
body.theme .de-toolbar input::placeholder{ color: rgba(255,255,255,.60); }

/* Table wrapper + table */
body.theme .de-table-wrap{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
}
body.theme table.de{ color: var(--white); }
body.theme table.de thead th{
  background: var(--bg);
  border-bottom: 1px solid var(--border-strong);
}
body.theme table.de tbody td{ border-bottom: 1px solid var(--border); }
body.theme table.de tbody tr:nth-child(odd){ background: rgba(255,255,255,.02); }
body.theme table.de tbody tr:hover td{ background: rgba(255,255,255,.04); }
body.theme table.de .type-chip{ border-color: rgba(255,255,255,.12); }

/* Columns dialog */
body.theme dialog#columnsDlg{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #00141f; /* solid panel (matches theme) */
  color: var(--white);
}
body.theme dialog#columnsDlg header{
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}
body.theme dialog#columnsDlg .group{
  border: 1px dashed var(--border);
  background: var(--card-2);
}
body.theme dialog#columnsDlg footer{
  border-top: 1px solid var(--border);
}
/* Data Explorer — app.css addendum */
body.theme .de-layout .btn{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--white);
}
body.theme .de-layout .btn[aria-pressed="true"]{
  background: rgba(0,40,64,.55);
  border-color: var(--border);
}
body.theme .de-saved select,
body.theme .de-saved input{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--white);
}
body.theme .muted{ color: var(--muted); }
/* =========================================================================
   Data Explorer — layout & sizing (moved from data-explorer.html)
   ========================================================================= */

/* Width of the left rail */
:root { --rail-w: 200px; }

/* Two-column layout: rail + main */
.de-layout {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
}

/* Metric rail */
.de-rail { padding: 12px; }
.de-rail h2 { font-size: 14px; margin: 8px 0 4px; }

/* Rail metric rows */
.de-metric {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}
.de-metric strong { font-weight: 700; }

/* Main column + toolbar */
.de-main { padding: 12px; }

.de-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.de-toolbar .btn {
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* Saved views group + generic control sizing */
.de-saved { display: flex; gap: 6px; align-items: center; }
.de-saved select,
.de-saved input,
.de-toolbar select {
  padding: 6px;
  border-radius: 6px;
}

/* Table wrapper */
.de-table-wrap {
  border-radius: 10px;
  overflow: auto;
}

/* Core table */
table.de {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs, 14px);
}

/* Sticky header cells + resizer affordance */
table.de thead th {
  position: sticky;
  top: 0;
  padding: 8px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
table.de thead th.sortable { cursor: pointer; }
table.de thead th .sort { font-size: 10px; opacity: 0.6; margin-left: 4px; }
table.de thead th .resizer {
  position: absolute; right: 0; top: 0;
  width: 6px; height: 100%;
  cursor: col-resize;
}

/* Body cells */
table.de tbody td {
  padding: 6px 8px;
  vertical-align: top;
  white-space: nowrap;
}

/* Type pill in rows */
table.de tbody tr .type-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.85em;
}

/* Footer row (pager + result info) */
.de-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
}
.de-foot .pager { display: flex; gap: 6px; align-items: center; }

/* Columns dialog — structure only (theme supplies colors) */
dialog#columnsDlg {
  width: 760px;
  max-width: calc(100vw - 40px);
  border-radius: 12px;
  padding: 0;
}
dialog#columnsDlg header {
  padding: 10px 12px;
  font-weight: 700;
}
dialog#columnsDlg .content {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
dialog#columnsDlg .group {
  border-radius: 10px;
  padding: 8px;
}
dialog#columnsDlg footer {
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Column filter row */
.filter-row input[type="text"],
.filter-row select {
  width: 100%;
  padding: 5px;
  border-radius: 6px;
}

/* Date filter controls */
.filter-date { display: flex; gap: 6px; align-items: center; }
.filter-date input { width: 140px; }

/* === Data Explorer — page chrome & table ergonomics ==================== */

/* Declare header/footer heights for offset math (tweak if your logo height changes) */
:root { --header-h: 120px; --footer-h: 56px; }

/* 1) Header fixed to the viewport (not just sticky inside a scroller) */
.page .shell-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0, 20, 31, 0.96), rgba(0, 20, 31, 0.94));
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  backdrop-filter: saturate(1.05) blur(6px);
  border-bottom: 1px solid var(--border-strong);
}

/* 2) Footer fixed to the viewport */
.page .shell-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0, 20, 31, 0.94), rgba(0, 20, 31, 0.96));
  border-top: 1px solid var(--border-strong);
}

/* 3) Add safe padding so content never hides under the fixed bars */
.page { padding-top: var(--header-h); padding-bottom: var(--footer-h); }

/* 4) Data Explorer layout fills the space between fixed bars */
.de-layout { min-height: calc(100vh - var(--header-h) - var(--footer-h)); }

/* 5) Keep the left metric rail fixed in place while the table scrolls */
.de-rail {
  position: sticky;
  top: calc(var(--header-h) + 0px);
  align-self: start;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  overflow: auto;
}

/* 6) Ensure horizontal scroll lives only inside the table wrapper */
.de-main { overflow: hidden; }
.de-table-wrap { overflow: auto; }

/* 7) Native dropdowns: readable options when OS shows a light (white) menu */
.de-toolbar select option,
.filter-row select option { color: CanvasText; background: Canvas; }
@supports not (color: CanvasText) {
  .de-toolbar select option,
  .filter-row select option { color: #111; background: #fff; }
}

/* 8) Narrow starting widths + 1–2 line previews for Title/Description/Criteria/Notes */
table.de th[data-col="action_name"],
table.de td[data-col="action_name"] {
  width: clamp(16ch, 12vw, 24ch);
  max-width: 24ch;
}
table.de th[data-col="action_description"],
table.de td[data-col="action_description"],
table.de th[data-col="action_criteria"],
table.de td[data-col="action_criteria"],
table.de th[data-col="action_notes"],
table.de td[data-col="action_notes"] {
  width: clamp(18ch, 16vw, 28ch);
  max-width: 28ch;
}

/* Allow wrapping only on those preview cells */
table.de td[data-col="action_name"],
table.de td[data-col="action_description"],
table.de td[data-col="action_criteria"],
table.de td[data-col="action_notes"] { white-space: normal; }

/* Line-clamp helpers (applied by JS) */
.cell-clip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
}
.cell-clip .clip-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-1 .clip-text { -webkit-line-clamp: 1; }
.clip-2 .clip-text { -webkit-line-clamp: 2; }

/* Small inline thumbnails for rich-text columns */
.thumb-wrap {
  width: 22px; height: 22px; border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* === Data Explorer: sticky toolbar, fixed footer, and reliable column resizing === */

/* Make the right pane the scroll container so sticky toolbar & header work together */
.de-main { min-height: 0; overflow: auto; }

/* Let the table live inside the .de-main scroller (the table itself doesn't need its own scroller) */
.de-table-wrap { overflow: visible; }

/* Toolbar sticks under the page header while main scrolls */
:root { --de-toolbar-h: 44px; }  /* adjust if your toolbar height changes */
.de-toolbar{
  position: sticky;
  top: 0;                /* sits right under the fixed page header */
  z-index: 36;           /* above the table header */
  background: linear-gradient(180deg, var(--card), var(--card-2));
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  backdrop-filter: saturate(1.05) blur(6px);
  border-bottom: 1px solid var(--border);
}

/* Table header rows stick below the toolbar (row 1: labels, row 2: filters) */
table.de thead tr:nth-child(1) th { top: var(--de-toolbar-h); }
table.de thead tr:nth-child(2) th { top: calc(var(--de-toolbar-h) + 40px); } /* ~header row height */

/* Make column resizing stick across header & body */
table.de { table-layout: fixed; }

/* Footer is after .page in this file, so pin that specific DOM pattern */
.page + .shell-footer{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0, 20, 31, 0.94), rgba(0, 20, 31, 0.96));
  border-top: 1px solid var(--border-strong);
}
/* === Facet (dropdown multi-select) ===================================== */
.facet-btn{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--white);
  cursor: pointer; user-select: none;
}
.facet-btn .facet-summary{ font-size: 12px; opacity: .85; }

.facet-panel{
  position: fixed; /* overlay above sticky header/thead */
  width: 260px; max-height: 56vh; overflow: auto;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 30px rgba(0,0,0,.35);
  padding: 8px;
  z-index: 2000;
  display: none;
}
.facet-panel[data-open="1"]{ display: block; }

.facet-head{ display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; }
.facet-title{ font-weight: 600; }
.facet-clear{ margin-left: auto; font-size: 12px; opacity: .85; cursor: pointer; }

.facet-list{ display: grid; gap: 2px; }
.facet-check{
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 6px;
}
.facet-check:hover{ background: rgba(255,255,255,.04); }
.facet-check input{ margin: 0; }
/* === Opaque dark backgrounds for filters & facet panels ================= */

/* Make both sticky header rows solid dark (no see-through over rows) */
table.de thead tr:first-child th,
table.de thead tr.filter-row th{
  background: var(--bg);               /* your default dark */
  /* if your --bg has transparency in your theme, force a solid fallback: */
  background-color: var(--bg);
  z-index: 35;                         /* above body cells */
}

/* Facet dropdown panel should be solid dark and clearly outlined */
.facet-panel{
  background: var(--bg);               /* solid dark surface */
  background-color: var(--bg);         /* fallback for older browsers */
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 30px rgba(0,0,0,.45);
  z-index: 2000;                       /* well above the table/header */
}

/* Slightly darker hover inside the facet list for contrast */
.facet-check:hover{
  background: rgba(255,255,255,.06);
}

/* Optional: make the filter buttons themselves a bit more solid */
.filter-row .facet-btn,
.filter-row select,
.filter-row input[type="text"]{
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  color: var(--white);
  font-size: 10px;
}
.facet-btn{ justify-content: flex-start; }
.facet-btn .facet-summary{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}
/* === Date facet (compact calendar range) =============================== */
.date-btn{
  width: 100%;
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:6px; cursor:pointer;
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
  color: var(--white);
}
.date-btn .date-summary{
  font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.date-panel{
  position: fixed; z-index: 2000; display:none;
  width: 520px; max-width: calc(100vw - 24px);
  background: var(--bg); border:1px solid var(--border-strong); border-radius:10px;
  box-shadow: 0 18px 30px rgba(0,0,0,.45); padding:10px;
}
.date-panel[data-open="1"]{ display:block; }
.date-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.date-title{ font-weight:600; }
.date-spacer{ flex:1; }
.date-grids{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.cal{ border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal header{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-bottom:1px solid var(--border); }
.cal .mon{ font-weight:600; }
.cal .nav{ display:flex; gap:6px; }
.cal .nav button{ padding:2px 6px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.06); color:var(--white); cursor:pointer; }
.cal .dow, .cal .grid{ display:grid; grid-template-columns: repeat(7, 1fr); }
.cal .dow span{ text-align:center; font-size:11px; opacity:.8; padding:4px 0; }
.cal .day{ text-align:center; padding:6px 0; cursor:pointer; border-radius:6px; margin:2px; }
.cal .day.disabled{ opacity:.35; pointer-events:none; }
.cal .day:hover{ background: rgba(255,255,255,.06); }
.cal .day.selected{ background:#01324a; border:1px solid var(--border); }
.cal .day.in-range{ background: rgba(4,217,255,.12); }
.date-blank{
  border-top:1px solid var(--border); margin-top:8px; padding-top:8px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13px;
}
.date-blank .group{ display:flex; gap:8px; align-items:center; }
.date-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.date-actions .btn{ padding:6px 10px; border-radius:8px; border:1px solid var(--border); background: rgba(255,255,255,.06); color: var(--white); cursor:pointer; }
/* === Data Explorer: Type chip text should be dark ====================== */
table.de .type-chip{
  color: #00141f;          /* default dark text for good contrast on light chips */
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.18); /* subtle frame so it reads over any chip color */
}

/* Keep it dark even on hover/striped rows */
table.de tbody tr:hover .type-chip,
table.de tbody tr:nth-child(odd) .type-chip{
  color: #00141f;
}

/* CFD facet button styled like the LT unit <select> (scoped to CFD only) */
  #cfdMetrics .facet-btn{
    box-sizing: border-box;
    font-size: 10px;
    height: 22px;
    line-height: 18px;
    padding: 2px 22px 2px 8px;    /* same inset as LT */
    min-width: 90px;             /* fits 'Quarters'-length labels */
    border-radius: 8px;
    border: 1px solid rgba(205,224,247,0.25);
    background: #00162A;
    color: #E6F2FF;
    -webkit-text-fill-color: #E6F2FF;
    outline: none;

    /* override global facet button so it doesn't take a full row */
    width: auto !important;
    display: inline-flex !important;
    align-items: center; justify-content: space-between; gap: 8px;
  }
  #cfdMetrics .facet-btn .facet-summary{
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Limit CFD filter UI to 10px font — button, panel, and native <select> if present */
  /* Facet-style button */
  #cfdMetrics .facet-btn,
  #cfdMetrics .facet-btn .facet-summary{
    font-size: 10px !important;
    line-height: 1.1;
  }

  /* Facet dropdown panel + its contents */
  #cfdMetrics .facet-panel,
  #cfdMetrics .facet-panel .facet-head,
  #cfdMetrics .facet-panel .facet-title,
  #cfdMetrics .facet-panel .facet-clear,
  #cfdMetrics .facet-panel .facet-list,
  #cfdMetrics .facet-panel .facet-check,
  #cfdMetrics .facet-panel .facet-check span{
    font-size: 8px !important;
    line-height: 1.1;
  }

  /* If you’re using a native <select id="cfd_types" multiple>, keep it at 10px too */
  #cfdMetrics select#cfd_types{
    font-size: 8px !important;
    line-height: 1.1;
  }
  #cfdMetrics select#cfd_types option{
    font-size: 8px !important;
    line-height: 1.1;
  }

  #cfdMetrics .facet-btn,
  #cfdMetrics .facet-btn .facet-summary{
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Make the dropdown panel narrower and its contents 10px */
  #cfdMetrics .facet-panel{
    width: 180px !important;          /* was 260px in app.css */
  }
  #cfdMetrics .facet-panel,
  #cfdMetrics .facet-panel *{
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Tighten each row inside the panel a bit */
  #cfdMetrics .facet-panel .facet-check{
    padding: 2px 6px !important;
  }

  /* If you’re using a native <select id="cfd_types" multiple>, constrain it too */
  #cfdMetrics select#cfd_types{
    font-size: 10px !important;
    line-height: 1.1 !important;
    width: 140px !important;          /* keep the control compact */
    height: 22px !important;
    padding: 2px 8px !important;
  }
  #cfdMetrics select#cfd_types option{
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  /* CFD facet button (the trigger) — keep it compact */
  #cfdTypeFacet{
    width: auto !important;
    min-width: 110px;
    height: 22px;
    padding: 2px 8px;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  #cfdTypeFacet .facet-summary{
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Only the CFD dropdown panel (it lives under <body>, so we target by data-for) */
  .facet-panel[data-for="cfdTypeFacet"]{
    width: 180px !important;     /* narrower than the global 260px */
  }
  .facet-panel[data-for="cfdTypeFacet"],
  .facet-panel[data-for="cfdTypeFacet"] *{
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .facet-panel[data-for="cfdTypeFacet"] .facet-check{
    padding: 2px 6px !important;  /* tighter row spacing */
  }
  .facet-panel[data-for="cfdTypeFacet"] .facet-clear{
    font-size: 10px !important;   /* ensure the 'Clear' link is 10px too */
  }

  /* === CFD hover tooltip (mirror Cycle/Lead) ======================== */
#cfdMetrics .ct-tip{
  position: absolute;
  z-index: 8;
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,40,64,.95);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transform: translate(-9999px, -9999px);
}
#cfdMetrics .ct-tip .row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  white-space: nowrap;
}
#cfdMetrics .ct-tip .k{ color:#04D9FF; }
#cfdMetrics .ct-tip[hidden]{ display:none; }

/* (Optional) If you want the same centered modal when pinned as Lead Time: */
#cfdMetrics .ct-tip.pinned{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  width: clamp(560px, 70vw, 980px);
  max-height: min(80vh, 680px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
  z-index: 10000;
  pointer-events: auto !important;
}
/* Force CFD hover tooltip to mirror Lead Time positioning */
#cfdMetrics .ct-tip{
  position: absolute;  /* match #ltMetrics .ct-tip */
  z-index: 8;
}
/* Force CFD hover tooltip to overlay above the card contents */
#cfdMetrics { position: relative; }              /* anchor for abs children */
#cfdMetrics .ct-tip{
  position: fixed;   /* was: absolute */
  z-index: 8;
}
/* Permission-gated UI elements are hidden by default; JS will reveal them */
[data-minperm] { display: none; }