/* =====================================================================
   Research Task Manager — design system
   ===================================================================== */
:root {
  /* surfaces */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;

  /* ink */
  --ink: #0f172a;
  --ink-strong: #020617;
  --ink-soft: #475569;
  --ink-mute: #94a3b8;

  /* lines */
  --line: #e5e9f0;
  --line-soft: #eef2f6;

  /* brand */
  --primary: #4f46e5;
  --primary-strong: #4338ca;
  --primary-soft: #eef2ff;
  --primary-ring: rgba(79, 70, 229, .25);

  /* feedback */
  --danger: #dc2626;
  --danger-dark: #b91c1c;
  --danger-soft: #fef2f2;
  --success: #15a364;
  --success-soft: #ecfdf5;
  --warn: #d97706;
  --warn-soft: #fef3c7;

  /* column accents (used as left-border on cards, dot on column heads) */
  --idea: #8b5cf6;
  --todo: #64748b;
  --ongoing: #2563eb;
  --onhold: #d97706;
  --completed: #15a364;

  /* shadows (layered for realism) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 14px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg: 0 18px 38px rgba(15, 23, 42, .14), 0 6px 14px rgba(15, 23, 42, .06);
  --shadow-xl: 0 26px 64px rgba(15, 23, 42, .22);

  /* radii + transitions */
  --r-sm: 6px;
  --r: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --t-fast: 120ms cubic-bezier(.2, .8, .2, 1);
  --t-base: 180ms cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  /* Stop Chrome/Edge from hijacking a horizontal drag as the "swipe to go
     back" navigation gesture. Users dragging to select text inside inputs
     (especially on the registration and accept-invite forms) were finding
     themselves bounced to the previous page. `contain` keeps overscroll
     inside the element without triggering navigation. */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss02';
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at -10% -20%, rgba(79, 70, 229, .07), transparent 60%),
    radial-gradient(1000px 600px at 110% -10%, rgba(124, 58, 237, .06), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--ink-soft); }
.small { font-size: 12px; margin: 4px 0 0; }

/* selection */
::selection { background: var(--primary-soft); color: var(--ink-strong); }

/* scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- focus + buttons ---------------- */
:focus-visible {
  outline: 3px solid var(--primary-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.btn {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .005em;
  cursor: pointer;
  line-height: 1.2;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform 80ms ease;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, #6259e8, var(--primary));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(15,23,42,.18);
}
.btn-primary:hover { background: linear-gradient(180deg, #5046e0, var(--primary-strong)); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }

.btn-danger {
  background: linear-gradient(180deg, #e63946, var(--danger));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(15,23,42,.18);
}
.btn-danger:hover { background: linear-gradient(180deg, #d83139, var(--danger-dark)); }

.btn-success {
  background: linear-gradient(180deg, #1ec47f, var(--success));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(15,23,42,.18);
}
.btn-success:hover { background: linear-gradient(180deg, #19b173, #128955); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-block { width: 100%; display: flex; justify-content: center; margin-top: 10px; }
.icon-btn { font-size: 18px; padding: 6px 10px; line-height: 1; border-radius: 9px; }

/* count badge (pill) */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  background: var(--warn); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1.4;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r-pill);
}

/* ---------------- inputs ---------------- */
input, textarea, select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  font-size: 14px; font-family: inherit; color: var(--ink);
  background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--ink-mute); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-ring);
}
textarea { resize: vertical; min-height: 70px; }

.form-error   { color: var(--danger); font-size: 13px; margin: 10px 0 0; min-height: 1em; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.privacy-section {
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line-soft);
  border-radius: 10px; background: var(--surface-soft, rgba(0,0,0,.02));
}
.privacy-section summary {
  cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink);
  list-style: none; padding: 2px 0;
}
.privacy-section summary::-webkit-details-marker { display: none; }
.privacy-section summary::before { content: '▸ '; color: var(--ink-soft); margin-right: 4px; }
.privacy-section[open] summary::before { content: '▾ '; }
.privacy-section label { display: block; margin-top: 8px; font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.form-success {
  color: #047857; font-size: 14px; margin: 12px 0 0; min-height: 0;
  line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere;
}
.form-success:not(:empty) {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(16, 185, 129, .08); border: 1px solid rgba(16, 185, 129, .28);
}

.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--primary); font-weight: 700; font-size: 13px; font-family: inherit;
}
.link-btn:hover { text-decoration: underline; }

/* ===================================================================
   LOGIN
   =================================================================== */
.login-view {
  position: relative;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 400px at 0% 0%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(255,255,255,.1), transparent 60%),
    linear-gradient(135deg, #4338ca 0%, #6d28d9 55%, #8b5cf6 100%);
  padding: 20px;
}
.login-lang-switch {
  position: absolute; top: 18px; right: 18px;
  display: inline-flex; gap: 6px; padding: 6px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  border-radius: 999px; box-shadow: 0 4px 14px rgba(15,23,42,.18);
}
.login-lang-switch .lang-btn {
  color: #fff; background: transparent; border-color: rgba(255,255,255,.45);
}
.login-lang-switch .lang-btn:hover { background: rgba(255,255,255,.18); }
.login-lang-switch .lang-btn.active { background: #fff; color: var(--primary); border-color: #fff; }
.login-card {
  background: var(--surface);
  width: 100%; max-width: 400px; padding: 36px 32px;
  border-radius: 18px; box-shadow: var(--shadow-xl);
  text-align: center;
}
.login-logo {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.login-card h1 { font-size: 22px; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
.login-sub { color: var(--ink-soft); margin: 0 0 22px; font-size: 14px; }
.login-card label { display: block; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin: 14px 0 5px; text-transform: uppercase; letter-spacing: .06em; }
.login-card input { width: 100%; }

.auth-switch { margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); }

/* ===================================================================
   TOPBAR
   =================================================================== */
.app-view { display: flex; flex-direction: column; height: 100vh; }

/* Left icon strip. Sits below the topbar (which spans full width) and runs
   down the page next to .app-main. On mobile we hide it and rely on the
   topbar buttons. */
.sidebar {
  position: fixed; left: 0; top: 60px; bottom: 0; width: 72px;
  background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
  color: #fff;
  display: flex; flex-direction: column; gap: 6px; padding: 14px 8px;
  z-index: 20;
}
.sb-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: none; color: #c7d2fe;
  padding: 10px 6px; border-radius: 10px;
  cursor: pointer; font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast);
}
.sb-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-item.active { background: rgba(255,255,255,.15); color: #fff; }
.sb-icon { font-size: 20px; line-height: 1; position: relative; display: inline-block; }
.sb-badge {
  position: absolute; top: -6px; right: -10px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 999px;
  min-width: 14px; text-align: center;
}
.sb-badge.hidden { display: none; }
.sb-label { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.app-view > .app-main { flex: 1; margin-left: 72px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.app-view > .app-main > .board-wrap,
.app-view > .app-main > .dashboard-wrap { flex: 1; min-height: 0; }
@media (max-width: 680px) {
  .sidebar { display: none; }
  .app-view > .app-main { margin-left: 0; }
}

.missing-reports-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 0 0 18px;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  color: #fff; font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .3);
}
.missing-reports-banner.hidden { display: none; }
.missing-reports-banner .link-btn { color: #fff; text-decoration: underline; font-weight: 700; }
.missing-reports-banner .banner-close {
  margin-left: auto; background: transparent; border: none; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}

/* Reports → Members section (admin) */
.reports-members-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.reports-members-title { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
/* Layout: name takes the flexible space, the day picker has a fixed width,
   the status column also flexes but right-aligns. Each "1fr" is wrapped in
   minmax(0, 1fr) so long content doesn't push the cell wider than the column. */
.reports-members-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); gap: 10px; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px;
}
.reports-members-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.reports-member-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px;
}
.reports-member-row.overdue { border-color: #fcd34d; background: #fffbeb; }
.reports-member-row .rm-main { min-width: 0; overflow: hidden; }
.reports-member-row .rm-name {
  font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reports-member-row .rm-meta {
  font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reports-member-row .rm-day { display: flex; align-items: center; min-width: 0; }
.reports-member-row .rm-day select {
  width: 100%;
  font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.reports-member-row .rm-status {
  font-size: 11.5px; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Superuser console */
.super-console { padding: 24px 26px 60px; overflow-y: auto; flex: 1; }
.super-console.hidden { display: none; }
.super-lab-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.super-lab-pill {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.super-lab-pill:hover { background: var(--surface-2, #f1f5f9); border-color: var(--primary); }
.super-lab-detail { margin-top: 18px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.super-lab-detail.hidden { display: none; }
.super-lab-detail h4 { margin: 0 0 8px; }
.super-users-table th, .super-users-table td { font-size: 12.5px; }
.super-lab-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
  margin-bottom: 12px;
}
.super-lab-linkrow { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.super-priv-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fde68a; color: #78350f; font-weight: 600; font-size: 11.5px;
  padding: 3px 9px; border-radius: 999px;
}

/* Signups bar chart */
.super-signups-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 100px;
  padding: 8px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.sb-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sb-bar-fill {
  width: 80%; min-height: 4px;
  background: linear-gradient(180deg, #6366f1, #4338ca);
  border-radius: 4px 4px 0 0; transition: height 240ms ease;
}
.sb-bar-day { font-size: 9px; color: var(--ink-mute); }

/* Two-column layout (top labs by members + by tasks) */
.super-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.super-top-list { display: flex; flex-direction: column; gap: 6px; }
.super-top-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px;
}
.super-top-name { font-weight: 600; }
.super-top-count { color: var(--primary); font-weight: 700; }

/* Recent events list */
.super-recent-events { display: flex; flex-direction: column; gap: 6px; }
.super-event-row { padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; }
.super-event-msg { font-weight: 500; }

@media (max-width: 680px) {
  .super-two-col { grid-template-columns: 1fr; }
  .super-signups-bars { height: 70px; }
}

/* Reports modal — fix the layout so a long template list scrolls inside the
   pane instead of stretching the whole modal off the page. */
.reports-layout {
  display: flex; gap: 18px; padding: 18px 22px; align-items: stretch;
  min-height: 0;
  /* Cap height to a fixed slice of the viewport so the modal never grows past
     the screen. The inner panes (templates list, detail body) handle their
     own scrolling so adding templates only grows the inner list. */
  height: min(70vh, 640px);
}
#reports-modal .modal { display: flex; flex-direction: column; max-height: 92vh; }
.reports-list-wrap {
  flex: 1; min-width: 240px; max-width: 320px;
  border-right: 1px solid var(--line); padding-right: 16px;
  display: flex; flex-direction: column; min-height: 0;
}
.reports-detail-wrap {
  flex: 2; min-width: 0;
  display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto;
}
.reports-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex: none; }
.report-templates-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.report-tpl-row {
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px;
  cursor: pointer; background: var(--surface);
}
.report-tpl-row:hover { background: var(--surface-2, #f8fafc); }
.report-tpl-row.selected { border-color: var(--primary); background: var(--primary-soft, #eef2ff); }
.report-tpl-row.is-past { opacity: .65; }
.report-tpl-row { position: relative; }
.report-tpl-row .rt-title { font-weight: 700; font-size: 13.5px; padding-right: 28px; }
.report-tpl-row .rt-meta { margin-top: 2px; }
.report-tpl-row .rt-edit-btn {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: none; cursor: pointer; padding: 2px 4px;
  border-radius: 6px; font-size: 14px;
}
.report-tpl-row .rt-edit-btn:hover { background: rgba(0,0,0,.06); }
.report-detail-head { margin-bottom: 12px; }
.report-detail-head h3 { margin: 0 0 4px; }
.report-detail-head p { margin: 0; }
.report-empty-state {
  border: 1px dashed var(--line); border-radius: 12px; padding: 32px;
  text-align: center;
}
.report-admin-list { display: flex; flex-direction: column; gap: 6px; }
.report-admin-row {
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 4px 12px;
  background: var(--surface);
}
.report-row-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 8px 0; cursor: pointer; list-style: none;
}
.report-row-owner { font-weight: 600; }
.report-row-body { padding: 8px 0 12px; }
.report-row-content {
  background: var(--surface-2, #f8fafc); padding: 10px 12px; border-radius: 8px;
  white-space: pre-wrap; font-family: inherit; font-size: 13px; margin: 0 0 8px;
}
.report-row-actions { display: flex; gap: 12px; align-items: center; }

/* rtm2 — visual badges + tree view */
.brand-edition-tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  background: #16a34a; color: #fff;
  padding: 2px 7px; border-radius: 9999px;
  margin-left: 4px; line-height: 1.2;
}
.brand-edition-tag-inline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  background: #16a34a; color: #fff;
  padding: 2px 7px; border-radius: 9999px;
  margin-left: 6px; vertical-align: middle;
}
/* ---- rtm2 time-progress widget ---- */
.task-time-block {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(37, 99, 255, 0.04), rgba(37, 99, 255, 0.01));
}
.task-time-block.running {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
}
.task-time-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.task-time-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.task-time-status {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 9999px;
  background: rgba(100, 116, 139, 0.15); color: #475569;
}
.task-time-block.running .task-time-status { background: rgba(16, 185, 129, 0.15); color: #047857; }
.task-time-block.running .task-time-status::before {
  content: '●'; margin-right: 4px; color: #10b981;
  animation: task-time-pulse 1.4s ease-in-out infinite;
}
@keyframes task-time-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.task-time-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.task-time-elapsed {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.5px;
}
.task-time-block.running .task-time-elapsed { color: #047857; }

/* Time badge on the Kanban card */
.mini-badge.time-badge {
  background: rgba(100, 116, 139, 0.14); color: #475569;
  font-variant-numeric: tabular-nums;
}
.mini-badge.time-badge.running {
  background: rgba(16, 185, 129, 0.15); color: #047857; font-weight: 600;
}
.mini-badge.time-badge.running::before {
  content: '●'; margin-right: 3px; color: #10b981;
  animation: task-time-pulse 1.4s ease-in-out infinite;
}

/* =========================================================================
   Email lock + change-request UI
   ========================================================================= */
.email-row { display: flex; align-items: center; gap: 8px; }
.email-row input { flex: 1; }
input.email-locked {
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink-soft);
  cursor: not-allowed;
}
input.email-locked:focus { outline: none; }
.email-pending-note {
  margin: 6px 0 0; padding: 8px 12px;
  font-size: 12.5px; color: #92400e; line-height: 1.5;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
}
.email-review-details p { margin: 6px 0; font-size: 13px; }
.email-review-details p strong { display: inline-block; min-width: 128px; color: var(--ink-soft); font-weight: 600; }
.lab-tree-email-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 9999px;
  background: rgba(245, 158, 11, 0.18); color: #92400e;
}

/* =========================================================================
   Reports — lock-on-submit UI
   ========================================================================= */
.report-owner-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.report-lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 9999px;
  background: rgba(245, 158, 11, 0.15); color: #92400e;
}
.report-lock-hint {
  margin: 8px 0 0; padding: 10px 12px;
  font-size: 12.5px; color: #92400e; line-height: 1.5;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
}
.report-submit-hint {
  margin: 8px 0 0; padding: 8px 12px;
  font-size: 12px; color: var(--ink-soft); line-height: 1.5;
  background: rgba(37, 99, 255, 0.04);
  border: 1px dashed rgba(37, 99, 255, 0.28);
  border-radius: 8px;
}
.report-row-lock-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 9999px;
  background: rgba(245, 158, 11, 0.15); color: #92400e;
  margin-left: 8px;
}
.report-row-return {
  font-size: 11.5px !important;
  color: #1d4ed8 !important;
}
.report-row-return:hover { background: rgba(37, 99, 255, 0.08) !important; }
.report-row-request-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 9999px;
  background: rgba(37, 99, 255, 0.14); color: #1d4ed8;
  margin-left: 8px;
  animation: report-request-chip-pulse 2s ease-in-out infinite;
}
@keyframes report-request-chip-pulse { 0%,100%{opacity:.75} 50%{opacity:1} }
.report-request-pending {
  display: inline-block;
  font-size: 12px; color: var(--ink-soft); font-style: italic;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(100, 116, 139, 0.08);
}

/* =========================================================================
   rtm2 · Lab tree interactive management panel
   ========================================================================= */

/* ---- Modal shell + header ---- */
.lab-tree-modal-shell { max-height: 92vh; display: flex; flex-direction: column; }
.lab-tree-modal-shell .modal-body { overflow-y: auto; padding: 0 22px 22px; }
.lab-tree-modal-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* ---- Sticky toolbar (search + role stats) ---- */
.lab-tree-toolbar {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface, #fff);
  padding: 14px 0 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06));
  margin-bottom: 12px;
}
.lab-tree-search-wrap {
  position: relative; flex: 0 0 260px;
}
.lab-tree-search {
  width: 100%;
  padding: 8px 30px 8px 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface, #fff);
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.lab-tree-search:focus {
  outline: none;
  border-color: #2563ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.14);
}
.lab-tree-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; opacity: 0.6; pointer-events: none;
}
.lab-tree-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 0; background: transparent;
  color: var(--ink-soft); cursor: pointer; font-size: 18px; line-height: 1;
  border-radius: 50%;
}
.lab-tree-search-clear:hover { background: var(--surface-3, rgba(0,0,0,.05)); color: var(--ink); }
.lab-tree-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.lab-tree-stat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 9999px;
  font-size: 11.5px; font-weight: 500;
  background: rgba(100, 116, 139, 0.10); color: #475569;
}
.lab-tree-stat-pill b { font-weight: 700; }
.lab-tree-stat-pill.total { background: rgba(37, 99, 255, 0.12); color: #1d4ed8; }
.lab-tree-stat-pill.role-admin { background: rgba(79, 70, 229, 0.12); color: #4338ca; }
.lab-tree-stat-pill.role-postdoc { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.lab-tree-stat-pill.role-researcher { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.lab-tree-stat-pill.role-student { background: rgba(14, 165, 233, 0.12); color: #0369a1; }

.lab-tree-intro { margin: 0 0 12px; }

/* ---- Tree connectors (softer, solid) ---- */
.lab-tree-render { padding: 0 4px 8px; font-size: 13px; }
.lab-tree-ul {
  list-style: none;
  padding-left: 30px;
  margin: 8px 0 0;
  border-left: 1.5px solid var(--line-soft, rgba(0,0,0,.08));
}
.lab-tree-render > .lab-tree-ul { padding-left: 0; border-left: 0; }
.lab-tree-li { padding: 8px 0 8px 16px; position: relative; }
.lab-tree-li::before {
  content: ''; position: absolute; left: -1px; top: 32px;
  width: 14px; height: 1.5px;
  background: var(--line-soft, rgba(0,0,0,.08));
  border-bottom-left-radius: 4px;
}
.lab-tree-render > .lab-tree-ul > .lab-tree-li::before { display: none; }
.lab-tree-collapsed-hint {
  margin: 4px 0 0 18px; padding: 4px 10px;
  font-size: 11.5px; color: var(--ink-soft); font-style: italic;
  background: rgba(100, 116, 139, 0.05);
  border-radius: 6px; display: inline-block;
}

/* ---- Card ---- */
.lab-tree-card {
  display: grid;
  grid-template-columns: 22px minmax(200px, 1.3fr) minmax(340px, 2fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(0,0,0,.10));
  border-radius: 12px;
  background: var(--surface, #fff);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.lab-tree-card:hover {
  border-color: rgba(37, 99, 255, 0.24);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.lab-tree-card.role-admin    { border-left: 3px solid #4f46e5; }
.lab-tree-card.role-postdoc  { border-left: 3px solid #7c3aed; }
.lab-tree-card.role-researcher { border-left: 3px solid #6366f1; }
.lab-tree-card.role-student  { border-left: 3px solid #0ea5e9; }

/* ---- Chevron ---- */
.lab-tree-chevron {
  width: 22px; height: 22px; border: 0; background: transparent;
  color: var(--ink-soft); font-size: 10px; cursor: pointer;
  border-radius: 6px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.lab-tree-chevron:hover:not(.invisible) { background: rgba(37, 99, 255, 0.08); color: #2563ff; }
.lab-tree-chevron.invisible { visibility: hidden; }

/* ---- Identity ---- */
.lab-tree-ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lab-tree-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 15px; flex: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.lab-tree-text { min-width: 0; flex: 1; }
.lab-tree-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.25;
}
.lab-tree-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.lab-tree-search-mark { background: rgba(250, 204, 21, 0.35); border-radius: 3px; padding: 0 2px; }
.lab-tree-role-pill {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 9999px; color: #fff;
}
.lab-tree-role-pill.role-admin      { background: #4f46e5; }
.lab-tree-role-pill.role-postdoc    { background: #7c3aed; }
.lab-tree-role-pill.role-researcher { background: #6366f1; }
.lab-tree-role-pill.role-student    { background: #0ea5e9; }
.lab-tree-pin {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  background: #fef3c7; color: #92400e;
  padding: 2px 7px; border-radius: 9999px;
}
.lab-tree-supchip {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 9999px;
  background: rgba(37, 99, 255, 0.08); color: #1d4ed8;
}
.lab-tree-sub { color: var(--ink-soft); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Controls ---- */
.lab-tree-ctrls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lab-tree-ctrl-label {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-size: 9.5px; color: var(--ink-soft); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.lab-tree-select {
  font-size: 12px; font-weight: 500;
  padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  min-width: 110px; max-width: 190px;
  transition: border-color 120ms ease;
}
.lab-tree-select:hover:not(:disabled) { border-color: #2563ff; }
.lab-tree-select:disabled { opacity: 0.65; cursor: not-allowed; }
.lab-tree-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-soft); cursor: pointer; user-select: none;
  padding: 4px 8px; border-radius: 6px;
  transition: background 120ms ease;
}
.lab-tree-toggle:hover { background: rgba(37, 99, 255, 0.05); color: var(--ink); }
.lab-tree-toggle input { accent-color: var(--primary); width: 14px; height: 14px; margin: 0; }
.lab-tree-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.lab-tree-actions .btn-sm { font-size: 11.5px; padding: 5px 10px; }
.lab-tree-archive { color: var(--danger, #b91c1c); }
.lab-tree-archive:hover { background: rgba(185, 28, 28, 0.08); }

/* ---- Empty state ---- */
.lab-tree-empty {
  text-align: center; padding: 40px 20px;
  border: 1.5px dashed var(--line-soft); border-radius: 14px;
  margin: 20px 0;
  background: rgba(37, 99, 255, 0.02);
}
.lab-tree-empty-icon { font-size: 44px; margin-bottom: 10px; }
.lab-tree-empty-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.lab-tree-empty p { max-width: 380px; margin: 0 auto 16px; }

/* ---- Pending invites ---- */
.lab-tree-pending-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.lab-tree-section-head { margin-bottom: 10px; }
.lab-tree-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 4px;
}
.lab-tree-count-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 8px;
  border-radius: 9999px; background: rgba(245, 158, 11, 0.15); color: #92400e;
  font-size: 11px; font-weight: 700;
}
.lab-tree-pending-list { display: flex; flex-direction: column; gap: 6px; }
.lab-tree-pending-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--line, rgba(0,0,0,.14));
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.03);
}
.lab-tree-pending-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b; flex: none;
  animation: lab-tree-pending-pulse 2s ease-in-out infinite;
}
@keyframes lab-tree-pending-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.lab-tree-pending-meta { flex: 1; min-width: 0; }
.lab-tree-pending-main { font-weight: 600; font-size: 13px; color: var(--ink); }
.lab-tree-pending-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.lab-tree-pending-expires {
  font-size: 11px; color: var(--ink-soft);
  padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.03);
}

/* The Manage-Users modal already styles its own .parent-select for the table */
.parent-select { font-size: 11.5px; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; max-width: 140px; }

@media (max-width: 760px) {
  .lab-tree-card { grid-template-columns: 22px 1fr; gap: 8px; }
  .lab-tree-ctrls { grid-column: 1 / -1; justify-content: flex-start; }
  .lab-tree-stats { margin-left: 0; width: 100%; }
  .lab-tree-search-wrap { flex: 1 1 100%; }
}
@media (max-width: 680px) {
  .reports-layout { flex-direction: column; }
  .reports-list-wrap { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 12px; }
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  z-index: 5;
}
.brand { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 10px; letter-spacing: -.005em; }
a.brand, a.app-brand { color: inherit; text-decoration: none; cursor: pointer; transition: opacity 120ms ease; }
a.brand:hover, a.app-brand:hover { opacity: 0.82; }
/* Login card brand → landing page link */
.login-brand-link {
  display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: opacity 120ms ease;
}
.login-brand-link:hover { opacity: 0.82; text-decoration: none; }
.login-brand-link h1 { margin-top: 8px; font-size: 26px; }
.brand-mark {
  background: transparent;
  border-radius: 50%;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
}
/* Lab brand sits to the right of a vertical separator. Its mark stays neutral
   (no purple gradient) so the uploaded logo reads on a clean background. */
.lab-brand .brand-mark {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lab-brand-default { font-size: 13px; line-height: 1; }
.brand-sep {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, var(--line, rgba(0,0,0,.18)), transparent);
  margin: 0 6px;
}
.brand-sep.hidden, .lab-brand.hidden, .app-brand.hidden { display: none; }
.topbar-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lab-brand .brand-text { font-size: 14px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.owner-filter { display: flex; align-items: center; gap: 8px; padding-right: 4px; }
.owner-filter label { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.owner-filter select { width: auto; min-width: 170px; padding: 7px 10px; }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600;
  padding: 4px 4px 4px 6px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
}
.user-avatar { display: inline-flex; align-items: center; justify-content: center; }

.role-badge {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-pill); color: #fff; background: var(--ink-soft);
  display: inline-block; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center;
  line-height: 1.2;
}
.users-table .role-badge { font-size: 8.5px; padding: 2px 5px; letter-spacing: 0; max-width: 110px; }
:lang(tr) .users-table .role-badge { font-size: 8px; letter-spacing: 0; }
.role-badge.admin       { background: var(--primary); }
.role-badge.researcher  { background: var(--ongoing); }
.role-badge.superuser   { background: #0f172a; }
.role-badge.postdoc     { background: #7c3aed; }
.role-badge.student     { background: #0ea5e9; }

/* per-user permission toggles in the Manage Users table */
.role-select {
  font-size: 12px; font-weight: 600;
  padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 100%; max-width: 100%; min-width: 0;
}
:lang(tr) .role-select { font-size: 11.5px; padding: 4px 4px; }
.role-select:focus { outline: 2px solid var(--primary-ring, rgba(79,70,229,.25)); outline-offset: 1px; }
.perm-toggles { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.perm-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; user-select: none;
}
.perm-toggle input { width: 14px; height: 14px; accent-color: var(--primary); margin: 0; }
.perm-readonly {
  font-size: 11px; font-weight: 600; color: var(--ink-mute);
  font-style: italic; padding-top: 2px;
}
.readonly-tag {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2, #eef2ff); color: var(--ink-soft);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-left: 6px;
  border: 1px solid var(--line);
}
.readonly-tag.hidden { display: none; }

.menu { position: relative; }
.menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 220px; padding: 6px;
  overflow: hidden; z-index: 20;
  animation: menuIn 140ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: 9px 12px; font-size: 13.5px; font-weight: 500;
  border-radius: 8px;
  cursor: pointer; color: var(--ink);
  transition: background var(--t-fast);
}
.menu-item:hover { background: var(--surface-2); }

/* notifications */
.notif-dropdown { width: 380px; max-width: 92vw; padding: 0; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 13px;
}
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item {
  /* Extra left padding accommodates the unread accent stripe below so the
     text position doesn't shift when a row switches from read to unread. */
  padding: 11px 16px 11px 20px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; transition: background var(--t-fast), border-left-color var(--t-fast);
  border-left: 4px solid transparent;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
/* Unread state: soft rose wash + hot-pink accent stripe on the left edge.
   Rose is distinct from --primary-soft (blue, row-selection) and --warn-soft
   (amber, used for warnings elsewhere), so "new" reads unambiguously. Once
   the row is clicked or the menu is opened it snaps back to the neutral
   background — see markNotifsSeen() in app.js. */
.notif-item.unread {
  background: #fef2f2;
  border-left-color: #e11d48;
}
.notif-item.unread:hover { background: #fee2e2; }
.notif-item.unread .notif-msg { font-weight: 600; color: #881337; }
.notif-msg { color: var(--ink); font-weight: 500; }
.notif-meta { color: var(--ink-soft); font-size: 11.5px; margin-top: 3px; }
.notif-empty { padding: 24px 14px; color: var(--ink-soft); font-size: 13px; text-align: center; font-style: italic; }
.notif-load-more {
  display: block; width: 100%;
  padding: 10px 12px; margin: 4px 0 0;
  border: 0; border-top: 1px solid var(--line-soft);
  background: transparent; color: var(--primary);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease;
}
.notif-load-more:hover { background: rgba(37, 99, 255, 0.06); }

/* ===================================================================
   AVATARS
   =================================================================== */
.avatar {
  display: inline-block; border-radius: 50%;
  object-fit: cover; vertical-align: middle; flex: none;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}
.avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}
.avatar-large {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  font-size: 36px; color: #fff; font-weight: 700;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.25);
}
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.avatar-row { display: flex; gap: 22px; align-items: center; margin-bottom: 6px; }
.avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ===================================================================
   BOARD
   =================================================================== */
.board-wrap { flex: 1; overflow: auto; padding: 20px 22px; }
.board { display: flex; gap: 16px; align-items: flex-start; min-height: 100%; }

.column {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* PC: columns flex-distribute to fit the viewport (no horizontal page scroll).
     min-width: 0 lets them shrink as needed; max-width caps them on huge monitors. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;
  display: flex; flex-direction: column;
  max-height: 100%;
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* keeps the coloured header inside the rounded corners */
}

/* Per-status column palette: a saturated header strip + a softly tinted body.
   Each column gets its own column-<status> modifier from renderBoard(). */
.column-idea       { background: #fffbeb; border-color: #fde68a; }
.column-todo       { background: #eff6ff; border-color: #bfdbfe; }
.column-ongoing    { background: #eef2ff; border-color: #c7d2fe; }
.column-onhold     { background: #fff7ed; border-color: #fed7aa; }
.column-completed  { background: #ecfdf5; border-color: #bbf7d0; }

.column-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px 10px;
  font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .07em;
  color: #fff;
}
.column-idea       .column-head { background: linear-gradient(180deg, #f59e0b, #d97706); }
.column-todo       .column-head { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.column-ongoing    .column-head { background: linear-gradient(180deg, #6366f1, #4f46e5); }
.column-onhold     .column-head { background: linear-gradient(180deg, #f97316, #ea580c); }
.column-completed  .column-head { background: linear-gradient(180deg, #16a34a, #15803d); }
.column-head .column-count {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.column-head .column-dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
.column-icon { font-size: 15px; line-height: 1; }
.column-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.column-count {
  margin-left: auto;
  background: var(--surface-2); color: var(--ink-soft);
  border-radius: var(--r-pill);
  font-size: 11.5px; padding: 1px 9px; font-weight: 700;
}
.column-body { padding: 4px 10px 8px; overflow-y: auto; flex: 1; min-height: 24px; }
.column-body.drag-over { background: var(--primary-soft); border-radius: 12px; }

.add-card-btn {
  margin: 6px 10px 10px; background: transparent; border: none;
  color: var(--ink-soft); text-align: left; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
}
.add-card-btn:hover { background: var(--surface-2); color: var(--ink); }

/* ---------------- CARDS ---------------- */
.card {
  position: relative;
  background: var(--surface);
  border-radius: 11px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 11px 12px 10px;
  margin-bottom: 8px;
  cursor: grab;
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform 90ms ease;
  border-left: 3px solid var(--idea);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: #cdd6e3;
  transform: translateY(-1px);
}
.card.dragging { opacity: .45; transform: rotate(.5deg); cursor: grabbing; }
.card-title {
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--ink); word-break: break-word;
}
.card-icon { margin-right: 5px; }
.card-desc {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-badges { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.mini-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid transparent;
}
.due-badge.overdue { background: var(--danger-soft); color: var(--danger-dark); border-color: #fecaca; }
.due-badge.soon    { background: var(--warn-soft); color: #92400e; border-color: #fde68a; }

.owner-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--ink-soft);
  padding: 2px 10px 2px 2px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
}
.owner-tag .avatar, .owner-tag .avatar-fallback { width: 18px; height: 18px; font-size: 9px; box-shadow: none; }
.card-date { font-size: 11px; color: var(--ink-mute); margin-left: auto; font-weight: 500; }

/* completed look */
.card-completed { background: var(--success-soft); border-color: #bbf7d0; border-left-color: var(--completed); }
.card-completed .card-title { text-decoration: line-through; color: var(--ink-soft); }
.card-completed::after {
  content: '✓';
  position: absolute; top: 9px; right: 9px;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, #1ec47f, var(--success)); color: #fff;
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(21,163,100,.4), inset 0 1px 0 rgba(255,255,255,.25);
}

.empty-hint {
  color: var(--ink-mute); font-size: 13px; text-align: center;
  padding: 22px 8px; font-style: italic;
  border: 1.5px dashed var(--line); border-radius: 10px; margin: 4px 2px;
}

/* ===================================================================
   MODALS
   =================================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 20px;
  animation: backdropIn 160ms ease;
}
.modal {
  background: var(--surface); border-radius: 16px;
  width: 100%; max-width: 500px;
  box-shadow: var(--shadow-xl);
  max-height: 92vh; overflow-y: auto;
  animation: modalIn 200ms cubic-bezier(.2, .8, .2, 1);
}
.modal-wide { max-width: 920px; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.005em; }
.modal-close {
  background: var(--surface-2); border: none; font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--ink-soft);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--surface-3); color: var(--ink); }
.modal form { padding: 20px 24px 22px; }
.modal label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  margin: 14px 0 5px; text-transform: uppercase; letter-spacing: .06em;
}
.modal form > label:first-of-type { margin-top: 0; }
.form-row { display: flex; gap: 14px; }
.form-col { flex: 1; min-width: 0; }
.modal-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

/* icon picker */
.icon-picker { display: flex; flex-wrap: wrap; gap: 5px; }
.icon-opt {
  width: 34px; height: 34px; border: 1.5px solid var(--line);
  background: var(--surface); border-radius: 8px;
  cursor: pointer; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: border-color var(--t-fast), background var(--t-fast), transform 80ms ease;
}
.icon-opt:hover { border-color: var(--primary); transform: translateY(-1px); }
.icon-opt.selected {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.icon-opt.none { font-size: 10.5px; color: var(--ink-soft); font-weight: 700; }

/* checklist + links */
.checklist-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.checklist-block:first-of-type { border-top: none; padding-top: 0; }
.checklist-progress { color: var(--ink-soft); font-weight: 700; margin-left: 4px; }
.checklist-items, .links-items { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.checklist-item, .link-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  transition: background var(--t-fast);
}
.checklist-item:hover, .link-item:hover { background: var(--surface-2); }
.checklist-item input[type="checkbox"] {
  width: 16px; height: 16px; flex: none; cursor: pointer; accent-color: var(--primary);
}
.checklist-item .ci-text { flex: 1; font-size: 14px; }
.checklist-item .ci-text.done { text-decoration: line-through; color: var(--ink-mute); }
.checklist-item .ci-del, .link-item .ci-del {
  background: none; border: none; color: var(--ink-mute);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px;
  transition: color var(--t-fast);
}
.checklist-item .ci-del:hover, .link-item .ci-del:hover { color: var(--danger); }
.checklist-add, .links-add { display: flex; gap: 6px; }
.checklist-add input { flex: 1; }
.links-add input[type="url"]  { flex: 1.4; }
.links-add input[type="text"] { flex: 1; }
.checklist-hint { color: var(--ink-mute); font-size: 12.5px; font-style: italic; padding: 4px 2px; }

.link-item .link-url {
  flex: 1; font-size: 13.5px; color: var(--primary); text-decoration: none; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-item .link-url:hover { text-decoration: underline; }
.link-item::before { content: '🔗'; font-size: 13px; opacity: .55; }

/* ===================================================================
   USERS TABLE
   =================================================================== */
.users-layout { display: flex; gap: 22px; padding: 22px 24px; align-items: flex-start; }
.users-list-wrap { flex: 1.6; min-width: 0; }
.users-form-wrap { flex: 1; min-width: 240px; border-left: 1px solid var(--line); padding-left: 22px; }
.users-layout h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table-fixed { table-layout: fixed; }
.users-table-fixed .col-user    { width: auto; }
.users-table-fixed .col-role    { width: 168px; }
.users-table-fixed .col-tasks   { width: 60px; }
.users-table-fixed .col-actions { width: 140px; }
.users-table th {
  text-align: left; color: var(--ink-soft);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 8px; border-bottom: 2px solid var(--line);
}
.users-table td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.users-table td.col-tasks-cell { text-align: center; }
.user-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-row-name > .user-row-name-text { min-width: 0; flex: 1; }
.user-row-name > .user-row-name-text > div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-name-cell { font-weight: 600; }
.user-username { color: var(--ink-soft); font-weight: 400; font-size: 12px; }
.link-danger { color: var(--danger); background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
.link-danger:hover { text-decoration: underline; background: var(--danger-soft, #fee2e2); }
.row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.row-actions .btn { white-space: nowrap; }
.row-actions .link-danger { white-space: nowrap; }

.pending-section {
  background: var(--warn-soft);
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.pending-section h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; color: #78350f; }
.pending-rereg-note {
  background: #fef3c7; border: 1px solid #fcd34d; color: #78350f;
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  display: inline-block; margin-top: 4px;
}

.archive-section {
  background: var(--surface-2, #f8fafc); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-top: 18px;
}
.archive-section h3 { margin: 0 0 8px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.archive-section .users-table td { opacity: .85; }
.deleted-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); background: var(--surface-3, #eef2f7);
  padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}

/* ===================================================================
   WORK CLASS — filter chips + card badge + dimmed state
   =================================================================== */
.work-class-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.work-class-filter.hidden { display: none; }
.wcf-label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.wcf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.wc-chip:hover { background: var(--surface-2, #f1f5f9); }
.wc-chip.active {
  background: var(--primary-soft, #eef2ff);
  border-color: var(--primary);
  color: var(--primary-strong, var(--primary));
}
.wc-chip.muted { opacity: .55; }

.card-wc-badge {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2, #eef2ff); color: var(--primary-strong, var(--primary));
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid var(--line);
}

/* When the active filter excludes a card's class, dim it without hiding. */
.card.wc-shadowed {
  opacity: .35;
  filter: saturate(.6);
}
.card.wc-shadowed:hover { opacity: .55; }

/* ===================================================================
   DASHBOARD VIEW
   =================================================================== */
.dashboard-wrap {
  padding: 24px 26px 60px;
  overflow-y: auto;
  flex: 1;
}
.dashboard-wrap.hidden { display: none; }
.dash-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.dash-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.dash-sub { margin: 4px 0 0; }
.dash-wave { display: inline-block; }
.dash-actions { display: flex; gap: 8px; }
.dash-section { margin-bottom: 28px; }
.dash-section-title {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em;
}
.dash-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-section-head .dash-section-title { margin: 0; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.dash-tile {
  position: relative;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  overflow: hidden;
}
.dash-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  border-color: var(--primary);
}
.dash-tile .dash-tile-icon {
  font-size: 28px; line-height: 1; display: inline-block; margin-bottom: 8px;
}
.dash-tile .dash-tile-label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
}
.dash-tile .dash-tile-count {
  display: block; font-size: 28px; font-weight: 800; color: var(--ink); margin-top: 2px;
  letter-spacing: -.02em;
}
.dash-tile-bg {
  position: absolute; inset: 0; opacity: .12; z-index: 0; pointer-events: none;
}
.dash-tile > * { position: relative; z-index: 1; }

/* Per-type accent colours for output tiles */
.dash-tile.t-article       .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #93c5fd, transparent 70%); }
.dash-tile.t-presentation  .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #c4b5fd, transparent 70%); }
.dash-tile.t-grant         .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #fde68a, transparent 70%); }
.dash-tile.t-award         .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #86efac, transparent 70%); }
.dash-tile.t-software      .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #fca5a5, transparent 70%); }
.dash-tile.t-project       .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #f0abfc, transparent 70%); }
.dash-tile.t-other         .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #cbd5e1, transparent 70%); }
.dash-tile.m-admin         .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #c4b5fd, transparent 70%); }
.dash-tile.m-postdoc       .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #ddd6fe, transparent 70%); }
.dash-tile.m-researcher    .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #bbf7d0, transparent 70%); }
.dash-tile.m-student       .dash-tile-bg { background: radial-gradient(120% 80% at 100% 0%, #bae6fd, transparent 70%); }

/* Topbar: highlight the active view toggle */
#view-toggle-btn.active { background: var(--primary); color: #fff; }

/* ===================================================================
   ACADEMIC ITEMS LIST
   =================================================================== */
.items-modal-body { padding: 16px 22px 22px; }
.items-modal-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.items-list { display: flex; flex-direction: column; gap: 8px; }
.items-row {
  display: grid; grid-template-columns: 1fr auto auto auto auto;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.items-row:hover { border-color: var(--line); background: var(--surface-2, #f8fafc); }
.items-row .ir-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.items-row .ir-meta { color: var(--ink-soft); font-size: 12px; }
.items-row .ir-actions { display: flex; gap: 6px; align-items: center; }
.items-row .ir-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--primary-soft, #eef2ff); color: var(--primary-strong, var(--primary));
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.items-row .ir-link:hover { background: var(--primary); color: #fff; }

@media (max-width: 680px) {
  .items-row { grid-template-columns: 1fr; gap: 4px; }
  .items-row .ir-actions { justify-content: flex-end; }
  .dash-head { flex-direction: column; align-items: stretch; }
}

/* ===================================================================
   LABS PANEL (superuser) + INVITES
   =================================================================== */
.login-lab-name {
  margin: -6px 0 18px; font-weight: 700; color: var(--ink); font-size: 14.5px;
}
.login-lab-name.hidden { display: none; }
.login-logo-img {
  width: 56px; height: 56px; object-fit: contain;
  border-radius: 14px; background: #fff; padding: 6px;
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
}
.login-logo-img.hidden { display: none; }
/* Lab logo in the topbar — bigger than the app mark so it's the visual
   anchor of the workspace identity. */
.brand-mark-img {
  width: 36px; height: 36px; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 3px;
  box-shadow: 0 2px 6px rgba(15,23,42,.18);
}
.brand-mark-img.hidden { display: none; }
/* Make the lab-brand mark wrapper hold a larger logo without breaking the
   topbar height. */
.lab-brand .brand-mark { padding: 0; background: transparent; box-shadow: none; }
.lab-brand .brand-mark-img { width: 40px; height: 40px; }
.lab-brand .lab-brand-default { font-size: 26px; }

.modal-small { max-width: 420px; }
.modal-small .modal-body { padding: 18px 22px 22px; }

/* Apply-lab modal: cap the form's vertical growth and let only the body
   scroll, so the Submit button at the bottom of the modal-actions row is
   never pushed off-screen on small viewports. */
#apply-lab-modal .modal { max-height: 92vh; display: flex; flex-direction: column; }
#apply-lab-modal form {
  display: flex; flex-direction: column;
  max-height: calc(92vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 22px;
  gap: 2px;
}
#apply-lab-modal form > *:not(.modal-actions) { flex: 0 0 auto; }
#apply-lab-modal form > .modal-actions {
  margin-top: auto; padding-top: 12px;
  position: sticky; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--line-soft);
  z-index: 2;
}
#apply-lab-modal form > p.muted.small { margin: 4px 0 8px; }
#apply-lab-modal form > label { margin-top: 8px; }
#apply-lab-modal form > hr { margin: 10px 0 !important; }
#apply-lab-modal .captcha-row { margin-bottom: 4px; }
.lab-logo-preview {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px;
  margin: 0 auto 14px;
  background: var(--surface-2, #eef2ff);
  border-radius: 18px; border: 1px solid var(--line);
  overflow: hidden;
}
.lab-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.lab-logo-placeholder { font-size: 42px; color: var(--ink-soft); }

/* ---- Lab-logo cropper ---- */
.lab-logo-cropper { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 14px; }
.lab-logo-cropper-canvas-wrap {
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  background: var(--surface, #fff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
.lab-logo-canvas {
  display: block;
  width: 260px; height: 260px;
  cursor: grab;
  touch-action: none;
  border-radius: 12px;
  /* Checker background is a CSS layer only — never baked into canvas exports. */
  background-color: #f8fafc;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%),
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}
.lab-logo-canvas:active { cursor: grabbing; }
.lab-logo-cropper-controls {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 280px;
  padding: 0 4px;
}
.lab-logo-cropper-controls label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.lab-logo-cropper-controls input[type="range"] { flex: 1; accent-color: #2563ff; }
.lab-logo-zoom-value {
  min-width: 44px; text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.lab-logo-cropper-quick-actions {
  display: flex; gap: 6px;
}
.lab-logo-cropper-quick-actions .btn-sm { font-size: 11.5px; padding: 4px 10px; }

.privacy-status {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2, #eef2ff); color: var(--ink-soft);
  font-weight: 700; font-size: 12px; letter-spacing: .04em;
  margin: 0 0 14px;
}
.privacy-status.on { background: #f59e0b; color: #fff; }

.labs-layout { display: flex; gap: 22px; padding: 22px 24px; align-items: flex-start; }
.labs-list-wrap { flex: 1.4; min-width: 0; }
.labs-form-wrap { flex: 1; min-width: 260px; border-left: 1px solid var(--line); padding-left: 22px; }
.labs-layout h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.labs-list { display: flex; flex-direction: column; gap: 8px; }
.lab-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px;
}
.lab-row .lab-main { min-width: 0; }
.lab-row .lab-name { font-weight: 700; }
.lab-row .lab-meta { margin-top: 2px; }
.lab-row .lab-admin { margin-top: 1px; }
.lab-row .lab-actions { display: flex; gap: 6px; align-items: center; }

.invites-pending-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.invites-pending-title { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.invites-list { display: flex; flex-direction: column; gap: 6px; }

/* Shape picker (used by Lab logo and Avatar) */
.shape-picker { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.shape-opt {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 14px; cursor: pointer; line-height: 1;
}
.shape-opt.active { border-color: var(--primary); background: var(--primary-soft, #eef2ff); color: var(--primary); }
.shape-opt:hover { border-color: var(--primary); }
.avatar-shape-row { margin-top: 10px; }

/* Border-shape classes — applied to logo IMG wrappers + previews */
.shape-circle  { border-radius: 50%; }
.shape-rounded { border-radius: 14px; }
.shape-square  { border-radius: 0; }
.shape-none    { border-radius: 0; box-shadow: none !important; }

/* Avatars use a CSS variable so every avatar (topbar, user list, card owner)
   inherits the same shape choice without us hunting for each instance. */
.avatar, .avatar-fallback { border-radius: var(--avatar-shape, 50%); }

/* Work-class manager modal */
.wc-add-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; }
.wc-add-row input { flex: 1; }
.wc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wc-item {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px;
}
.wc-item .wc-name { font-weight: 600; }
.wc-item .wc-tag { font-size: 11px; }
.wc-item .wc-actions { display: flex; gap: 6px; align-items: center; }
.wc-rename-btn { padding: 2px 6px; font-size: 14px; }
.wc-empty { padding: 8px 10px; font-style: italic; }

/* Password input with show/hide eye */
.pw-input-row { position: relative; display: flex; align-items: center; }
.pw-input-row > input { flex: 1; padding-right: 38px; }
.pw-input-row > .pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px 8px; border-radius: 6px;
}
.pw-input-row > .pw-eye:hover { background: var(--surface-2, #f1f5f9); }

/* Pending lab application section in the Labs modal */
.pending-labs-section {
  background: var(--warn-soft);
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.pending-labs-section h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; color: #78350f; }
.lab-row.lab-pending { border-color: #fde68a; background: #fffbeb; }
.lab-row.lab-rejected { opacity: .55; }

/* Captcha row + honeypot on the public apply form */
.captcha-row {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.captcha-question {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-weight: 700; font-size: 18px; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--surface-2, #eef2ff); color: var(--ink);
  min-width: 80px; text-align: center; user-select: none;
}
.captcha-equals { font-weight: 700; color: var(--ink-soft); }
.honeypot {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.invite-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 8px 10px;
  background: var(--surface-2, #f8fafc); border: 1px solid var(--line-soft); border-radius: 8px;
}
.invite-row .invite-main { min-width: 0; }
.invite-row .invite-email { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 680px) {
  .labs-layout { flex-direction: column; padding: 18px; gap: 18px; }
  .labs-form-wrap { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
  .lab-row { flex-direction: column; align-items: stretch; }
  .lab-row .lab-actions { justify-content: flex-end; }
}

/* ===================================================================
   TOAST
   =================================================================== */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink-strong); color: #fff;
  padding: 11px 18px; border-radius: 12px;
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 100; max-width: min(560px, 92vw);
  text-align: center; line-height: 1.45;
  word-wrap: break-word; overflow-wrap: anywhere;
  animation: toastIn 180ms cubic-bezier(.2, .8, .2, 1);
}
.toast.error { background: var(--danger); }
/* Inline action link inside a toast (e.g. "Undo" after Return-for-revision).
   Styled to blend with either the neutral or error variant since the color is
   inherited from the surrounding toast. */
.toast-action {
  background: transparent;
  border: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  margin-left: 10px;
  padding: 0;
}
.toast-action:hover { text-decoration: none; }
.toast-action:disabled { opacity: .6; cursor: default; text-decoration: none; }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

/* Tablet portrait / large phone (above phone breakpoint): just trim padding
   + give the notification dropdown a sane max width. Columns keep
   flex-distributing so the board never overflows the page. */
@media (max-width: 820px) {
  .board-wrap { padding: 16px; }
  .notif-dropdown { width: 320px; max-width: calc(100vw - 24px); }
}

/* PHONE — board becomes a horizontal swipe carousel, modals slide up as bottom sheets */
@media (max-width: 680px) {
  /* Topbar: wrap nicely, bigger touch targets */
  .topbar {
    flex-wrap: wrap; height: auto;
    padding: 10px 12px;
    gap: 8px;
    row-gap: 8px;
  }
  .topbar-right { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .brand { font-size: 14.5px; }

  /* Owner-filter takes its own row */
  .owner-filter { flex-basis: 100%; padding: 4px 0 2px; }
  .owner-filter select { flex: 1; min-width: 0; }

  /* Board becomes a horizontal SWIPE carousel: one column per swipe,
     snapping cleanly between Idea / To Do / Ongoing / On Hold / Completed. */
  .board { flex-direction: row; gap: 12px; padding-right: 14px; }
  .column {
    flex: 0 0 calc(100vw - 28px);
    width: calc(100vw - 28px);
    min-width: 0;
    max-width: none;
    max-height: none;
    border-radius: 14px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .column-body { max-height: calc(100vh - 200px); }
  .board-wrap {
    padding: 14px;
    scroll-padding-left: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* Users modal stacks (two columns -> one) */
  .users-layout { flex-direction: column; padding: 18px; gap: 18px; }
  .users-form-wrap {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 18px;
  }
  /* On very narrow screens, let the table breathe */
  .users-table-fixed { table-layout: auto; }
  .users-table-fixed .col-user,
  .users-table-fixed .col-role,
  .users-table-fixed .col-tasks,
  .users-table-fixed .col-actions { width: auto; }

  /* Form rows stack into single-column on phone */
  .form-row { flex-direction: column; gap: 0; }
  .links-add { flex-direction: column; }

  /* Touch-friendly targets */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 32px; }
  .icon-btn { min-width: 42px; min-height: 42px; padding: 8px 11px; }
  .menu-item { padding: 12px 14px; min-height: 44px; }
  .add-card-btn { padding: 12px 12px; }
  .checklist-item, .link-item { padding: 8px; min-height: 40px; }
  .checklist-item input[type="checkbox"] { width: 20px; height: 20px; }
  .icon-opt { width: 40px; height: 40px; font-size: 18px; }

  /* Modals become bottom sheets — much more natural on phones */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
    backdrop-filter: blur(2px);
  }
  .modal {
    width: 100%; max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    animation: sheetIn 260ms cubic-bezier(.2, .8, .2, 1);
    /* room for the iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .modal-head { padding: 16px 18px; }
  .modal form { padding: 16px 18px 20px; }

  /* Bigger inputs prevent iOS auto-zoom on focus */
  input, textarea, select { font-size: 16px; padding: 11px 12px; }
  .btn { font-size: 14px; padding: 10px 14px; }

  /* Make cards a bit cushier for tapping */
  .card { padding: 12px 13px 11px; }
  .card-title { font-size: 14.5px; }

  /* Hide the date subtext in card meta on small screens to keep cards uncluttered */
  .card-date { display: none; }
}

@keyframes sheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ===================================================================
   v4 components: presence, SSO buttons, language switcher, verify banner,
   calendar row, forgot/reset/verify pages
   =================================================================== */
.presence-list {
  display: flex; align-items: center; gap: 4px;
  padding-right: 4px;
}
.presence-list .avatar, .presence-list .avatar-fallback {
  width: 24px; height: 24px;
  box-shadow: 0 0 0 2px var(--surface);
  margin-left: -6px;
}
.presence-list .avatar:first-child, .presence-list .avatar-fallback:first-child { margin-left: 0; }
.presence-more {
  margin-left: 4px; color: var(--ink-soft);
  font-size: 11.5px; font-weight: 700;
}

.auth-meta { margin: 12px 0 0; font-size: 13px; text-align: right; }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-mute); font-size: 12px; margin: 16px 0 10px;
  text-transform: uppercase; letter-spacing: .08em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; height: 1px; background: var(--line); flex: 1;
}

.sso-btn {
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 8px;
  font-weight: 600;
}
.sso-btn:hover { background: var(--surface-2); border-color: #cdd6e3; }
.sso-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
#sso-google .sso-icon { background: linear-gradient(135deg, #ea4335, #fbbc05); }
#sso-microsoft .sso-icon { background: linear-gradient(135deg, #0078d4, #00a4ef); }

.menu-sub {
  padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.menu-sub-label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.menu-sub-buttons { display: flex; gap: 4px; }
.lang-btn {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.lang-btn:hover { background: var(--surface-2); }
.lang-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.verify-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  background: var(--warn-soft); color: #78350f;
  border-bottom: 1px solid #fde68a;
  font-size: 13px;
}

.calendar-row {
  display: flex; gap: 6px; align-items: center;
}
.calendar-row input {
  flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
}

/* =====================================================================
   Admin walkthrough — one-time spotlight tour of the left sidebar
   ===================================================================== */
.walkthrough { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
/* The backdrop is a full-viewport dim layer. We punch a "hole" around the
   focused element by drawing a very large box-shadow on the spotlight
   itself (see .walkthrough-spotlight). */
.walkthrough-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 6, 23, 0.55);
  pointer-events: auto;
  animation: walkFadeIn 200ms ease-out;
}
.walkthrough-spotlight {
  position: absolute;
  border-radius: 10px;
  /* Ring around the target + massive outward shadow that dims everything
     beyond the ring. Doing it this way means we don't need SVG masks. */
  box-shadow: 0 0 0 4px var(--primary),
              0 0 0 9999px rgba(2, 6, 23, 0.55);
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
  pointer-events: none;
}
.walkthrough-card {
  position: absolute;
  background: var(--surface);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  width: 320px; max-width: calc(100vw - 32px);
  pointer-events: auto;
  transition: top .3s ease, left .3s ease;
  animation: walkCardIn 250ms cubic-bezier(.2,.8,.2,1);
}
.walkthrough-card::before {
  /* Small triangle that visually anchors the card to the spotlighted item.
     Hidden by default; each .arrow-* class turns it on AND places it.
     Without the display:none the pseudo-element would render as a rotated
     white square at (0,0) on the welcome step, floating in front of the
     title text. */
  content: ''; position: absolute; width: 12px; height: 12px;
  background: var(--surface);
  transform: rotate(45deg);
  display: none;
}
.walkthrough-card.arrow-left::before  { display: block; left: -6px;  top: 24px;  box-shadow: -2px 2px 2px rgba(15,23,42,.04); }
.walkthrough-card.arrow-right::before { display: block; right: -6px; top: 24px;  box-shadow:  2px -2px 2px rgba(15,23,42,.04); }
.walkthrough-card.arrow-top::before   { display: block; top: -6px;   left: 24px; box-shadow: -2px -2px 2px rgba(15,23,42,.04); }
.walkthrough-close {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 6px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: 20px; line-height: 1;
}
.walkthrough-close:hover { background: var(--surface-2); color: var(--ink); }
.walkthrough-title {
  /* Room on the RIGHT for the absolute-positioned close button (26px wide,
     10px offset) and on the LEFT for wide glyphs like 'W' that font metrics
     sometimes bleed past 0. Overflow-wrap keeps long words from clipping. */
  margin: 0 0 6px 0; font-size: 15px; font-weight: 700; color: var(--ink-strong);
  padding: 0 40px 0 2px;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.walkthrough-desc {
  margin: 0 0 14px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
}
.walkthrough-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.walkthrough-progress {
  font-size: 11.5px; font-weight: 600; color: var(--ink-mute);
  letter-spacing: .04em; text-transform: uppercase;
}
.walkthrough-nav { display: flex; gap: 6px; }
.walkthrough-nav .btn { padding: 6px 12px; font-size: 12.5px; }
@keyframes walkFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes walkCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Welcome-step opt-out row inside the walkthrough card. Only visible when
   the current step is the welcome screen (app.js toggles .hidden). */
.walkthrough-welcome-opts { margin: 4px 0 14px 0; }
.walkthrough-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft); cursor: pointer;
  user-select: none;
}
.walkthrough-checkbox input {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--primary);
}

/* Board column headers — responsive across both languages.
   Turkish labels ("Devam Ediyor", "Beklemede", "Tamamlandı") are longer than
   the English originals, and text-transform:uppercase adds more visual
   width. Let the title flex to fill the 

/* ============================================================
   Superuser console — compact layout (2026-07-14 rework)
   ============================================================ */
.super-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 0 24px;
}
.super-kpi {
  background: linear-gradient(180deg, #fff, #fbfbfe);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 4px -2px rgba(15, 23, 42, .05);
}
.super-kpi .kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); font-weight: 600; }
.super-kpi .kpi-value { font-size: 26px; font-weight: 700; color: var(--ink-strong, var(--ink)); margin-top: 4px; letter-spacing: -.01em; }
.super-kpi .kpi-sub   { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.super-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 200px;
}
.super-panel .dash-section-title { margin-top: 0; }

.super-lab-data-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.super-lab-data-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: #fafbfd;
}
.super-lab-data-row .lab-name { flex: 1; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.super-lab-data-row .lab-slug { color: var(--ink-mute); font-size: 12px; font-weight: 400; margin-left: 6px; }
.super-lab-data-row button { padding: 5px 10px; font-size: 12px; border-radius: 6px; }

.super-details {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
}
.super-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 13.5px;
  padding: 8px 4px;
  list-style: revert;
}
.super-details[open] > summary { color: var(--ink); }
.super-details .dash-section { margin-top: 14px; }

.dash-head.compact { margin-bottom: 12px; }


/* Superuser users panel — cross-lab directory */
.super-users-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.super-users-tools { display: flex; align-items: center; gap: 12px; }
.super-users-tools input[type="search"] {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; min-width: 220px;
}
.super-users-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.super-users-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; margin-top: 6px; }
.super-user-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px;
  align-items: center; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: #fafbfd;
  font-size: 13px;
}
.super-user-row.deleted { background: #fef2f2; border-color: #fecaca; opacity: 0.85; }
.super-user-row .u-main { min-width: 0; }
.super-user-row .u-name { font-weight: 600; color: var(--ink); }
.super-user-row .u-name .deleted-badge { margin-left: 6px; padding: 1px 6px; background: #fee2e2; color: #b91c1c; border-radius: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.super-user-row .u-meta { color: var(--ink-soft); font-size: 12px; margin-top: 1px; }
.super-user-row .u-role { padding: 2px 8px; background: #eef2ff; color: var(--primary); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.super-user-row .u-role.role-admin { background: #dbeafe; color: #1d4ed8; }
.super-user-row .u-role.role-superuser { background: #fce7f3; color: #be185d; }
.super-user-row button { padding: 4px 9px; font-size: 12px; border-radius: 6px; white-space: nowrap; }


/* Task priority color-coded badges */
.mini-badge.pri-badge { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; padding: 2px 7px; border: 1px solid transparent; }
.mini-badge.pri-low     { background: #dcfce7; color: #166534; border-color: #86efac; }
.mini-badge.pri-medium  { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.mini-badge.pri-high    { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.mini-badge.pri-urgent  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; animation: pri-pulse 2s ease-in-out infinite; }
@keyframes pri-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.0); }
}
/* Priority hint under the disabled select */
#task-priority-hint { margin-top: 4px; }
#task-priority[disabled] { opacity: 0.75; cursor: not-allowed; }


/* Inline verification-resend status: sits next to the "Resend the link"
   button so the user gets feedback in place, without a toast. */
.resend-status { margin-left: 8px; font-size: 13px; font-weight: 500; transition: color .2s; }
.resend-status.is-pending { color: var(--ink-soft); font-style: italic; }
.resend-status.is-ok { color: #15803d; }
.resend-status.is-err { color: #b91c1c; }
#resend-verify:disabled { opacity: 0.6; cursor: default; }

/* Two-step lab-first login — resolved lab pill sits above credentials */
.login-lab-resolved {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 8px 0 14px;
  background: var(--primary-soft, #eef2ff); border-radius: 8px;
  font-size: 13.5px; color: var(--ink);
}
.login-lab-resolved strong { color: var(--primary, #4f46e5); }
.login-lab-resolved .link-btn { margin-left: auto; font-size: 12.5px; }
#login-continue-btn { margin-top: 12px; }


/* Inviter identity pill on the invite form — shows the current member's name
   read-only so they know whose sub-tree the invited person will land in. */
.invite-from-pill {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0 0 14px;
  background: var(--primary-soft, #eef2ff); border-radius: 8px;
  font-size: 13.5px; color: var(--ink);
}
.invite-from-pill strong { color: var(--primary, #4f46e5); }


/* Language flag picker (accept-invite form). Two big pill buttons with an
   emoji flag + language name. Clicking one activates it (bordered + tinted). */
.flag-picker { display: flex; gap: 10px; margin: 6px 0 14px; }
.flag-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.flag-opt:hover { background: #f3f4f8; }
.flag-opt.active { border-color: var(--primary, #4f46e5); background: var(--primary-soft, #eef2ff); color: var(--primary, #4f46e5); font-weight: 700; }
.flag-emoji { font-size: 20px; line-height: 1; }

/* =====================================================================
   MOBILE RESPONSIVE — 2026-07-15 rework
   The app was originally desktop-first; these breakpoints reshape the
   topbar, sidebar, board, modals, and forms so it works on phones.
   ===================================================================== */

/* Tablet + phone shared: general fluid overrides */
@media (max-width: 900px) {
  /* Topbar collapses; hide the "Viewing" indicator + presence list; brand
     text shrinks; the account button gets a bit more breathing room. */
  .topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .topbar .app-brand h1 { font-size: 16px; }
  .topbar .lab-brand { font-size: 14px; }
  .topbar .presence-list, .topbar .presence-wrap { display: none !important; }
  .topbar .owner-filter-wrap { max-width: 160px; }

  /* Modals: full-height sheet-style on small screens */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { max-height: 92vh; width: 100%; max-width: none; border-radius: 16px 16px 0 0; overflow-y: auto; }
  .modal.modal-wide { border-radius: 16px 16px 0 0; }
  .modal-body { padding: 16px; }
  .modal-head { padding: 12px 16px; position: sticky; top: 0; background: #fff; z-index: 2; }
  .form-row { flex-direction: column; gap: 8px; }
  .form-col { width: 100%; }

  /* Board: horizontal-scroll instead of squeezing all columns. */
  .board {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    padding: 8px 12px; -webkit-overflow-scrolling: touch;
  }
  .board .column { flex: 0 0 78vw; scroll-snap-align: start; min-width: 260px; }
}

/* Phone-only overrides (≤720px) */
@media (max-width: 720px) {
  /* Sidebar → horizontal bottom-strip so the board owns the vertical space */
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: 58px;
    display: flex; flex-direction: row; justify-content: space-around; align-items: center;
    padding: 4px 2px; z-index: 30;
    background: #fff; border-right: 0; border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px -6px rgba(15,23,42,.15);
  }
  .sb-item {
    flex: 1; flex-direction: column; gap: 2px; padding: 4px 2px;
    font-size: 10px; text-align: center;
  }
  .sb-icon { font-size: 20px; }
  .sb-label { font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }

  /* Main area now has bottom padding so the sidebar strip doesn't cover
     the last row of the board / dashboard. */
  .app-view > .app-main { margin-left: 0 !important; padding-bottom: 68px; }
  .app-main { padding: 8px !important; }

  /* Topbar becomes single-line: hide the lab brand text, keep the logo */
  .topbar .lab-brand-name { display: none; }
  .topbar .topbar-separator { display: none; }
  .topbar .topbar-actions { gap: 4px; }
  .topbar-actions .btn-sm { padding: 4px 8px; font-size: 12px; }

  /* Dashboard tiles: 2-up on phones */
  .dash-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .dash-tile { padding: 12px !important; }
  .dash-tile .tile-count { font-size: 22px; }

  /* Users table (Manage Users) — horizontal scroll instead of wrap */
  .users-table-fixed { min-width: 560px; }
  .users-list-wrap { overflow-x: auto; }

  /* Superuser console panels stack full-width */
  .super-two-col { grid-template-columns: 1fr !important; }
  .super-kpi-row { grid-template-columns: repeat(2, 1fr); }

  /* Reports layout: header + body stack; details table gets horizontal scroll */
  .reports-modal-body { flex-direction: column !important; }
  .reports-modal-body .reports-list-panel,
  .reports-modal-body .report-detail-panel { width: 100% !important; max-height: none !important; }

  /* Login card — full-width on phones with tight side margins */
  .login-view { padding: 12px; }
  .login-card { padding: 22px 18px; }
  .login-lang-switch { top: 8px; right: 8px; }

  /* Toasts — bottom-safe area, above the sidebar strip */
  .toast { bottom: 74px !important; left: 12px !important; right: 12px !important; }

  /* Walkthrough card — center + fit small screens */
  .walkthrough-card { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; top: 20% !important; }
  .walkthrough-card::before { display: none !important; }
  .walkthrough-spotlight { display: none !important; }

  /* Notification menu — full-width dropdown */
  .notif-menu { right: 8px !important; left: 8px !important; width: auto !important; max-width: none !important; }

  /* Lab tree modal — full height on phones */
  .lab-tree-modal-shell { height: 92vh; }
  .lab-tree-body { max-height: calc(92vh - 120px); overflow-y: auto; }

  /* Two-step login pill wraps neatly */
  .login-lab-resolved { flex-wrap: wrap; }

  /* Priority + assignee dropdowns — allow full width */
  #task-priority, #task-owner, #rt-assign, #task-icon, #task-work-class { max-width: 100%; }
}

/* Very small phones (≤380px) — tighten further. Labels stay visible so
   the bottom nav is legible; we just shrink them further. */
@media (max-width: 380px) {
  .sb-label { display: inline-block !important; font-size: 9px !important; }
  .sb-item { padding: 6px 2px; }
  .super-kpi-row { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr !important; }
  .topbar .app-brand h1 { font-size: 15px; }
}

/* Touch improvements — bigger hit targets everywhere */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  input, select, textarea { font-size: 16px; }  /* prevent iOS zoom */
}


/* Language toggle buttons — flag emoji sizing.
   Emojis render at parent font-size, but on small login pill buttons they
   look cramped. Bump them a bit for legibility. */
.lang-btn { font-size: 16px !important; padding: 4px 10px !important; line-height: 1; }
.login-lang-switch .lang-btn { font-size: 13px; padding: 4px 10px; font-weight: 700; }


/* Inline SVG flags (Preferred language picker). Rendered directly in the
   HTML so we don't depend on OS emoji fonts — some Windows versions and
   headless browsers render regional-indicator emoji as plain "GB" / "TR"
   text, which broke the picker's legibility. */
.flag-svg { display: inline-block; vertical-align: middle; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.flag-opt .flag-svg { margin-right: 4px; }


/* Lab-term countdown pill in the topbar. Color escalates as the lab
   approaches expiration; last 30 days makes the pill clickable to open
   the extension request modal. */
.lab-term-pill { border-radius: 999px; font-weight: 600; padding: 5px 12px; margin-right: 6px; }
.lab-term-pill.term-ok       { border-color: #86efac; background: #dcfce7; color: #166534; }
.lab-term-pill.term-warn     { border-color: #fde68a; background: #fef9c3; color: #854d0e; }
.lab-term-pill.term-caution  { border-color: #fdba74; background: #ffedd5; color: #9a3412; }
.lab-term-pill.term-danger   { border-color: #fca5a5; background: #fee2e2; color: #b91c1c; }
.lab-term-pill.term-actionable { cursor: pointer; text-decoration: underline dotted; }
.lab-term-pill.term-pending  { opacity: 0.85; cursor: default; }

/* Superuser extension request rows */
.super-ext-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.super-ext-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fafbfd; }
.super-ext-row .super-ext-meta { margin-bottom: 4px; }
.super-ext-row .super-ext-msg { font-size: 13.5px; color: var(--ink); }
.super-ext-row .super-ext-actions { margin-left: auto; display: flex; gap: 6px; }


/* Expiry pill on the superuser lab-data-list row */
.super-lab-data-row .lab-exp { font-size: 12px; padding: 2px 8px; border-radius: 6px; font-weight: 600; margin-right: 4px; white-space: nowrap; }
.super-lab-data-row .lab-exp.exp-ok       { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.super-lab-data-row .lab-exp.exp-warn     { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.super-lab-data-row .lab-exp.exp-danger   { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.super-lab-data-row .lab-exp.exp-expired  { background: #4b5563; color: #f9fafb; border: 1px solid #374151; }
.super-lab-data-row .lab-exp.exp-none     { background: #f3f4f6; color: var(--ink-mute); border: 1px solid var(--line); font-style: italic; }


/* Floating expiration-editor pop used by extendLabDirect. Centered on the
   viewport (mobile-friendly), with a native <input type="date"> so admins
   can pick day/month/year in whatever their OS date picker looks like. */
.exp-editor-pop {
  position: fixed; z-index: 1200;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 20px 40px -10px rgba(15,23,42,.25));
  padding: 16px 18px; min-width: 260px;
  display: flex; flex-direction: column; gap: 8px;
}
.exp-editor-pop::before {
  content: ''; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: -1;
}
.exp-editor-pop label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.exp-editor-pop input[type="date"] {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 14px;
}
.exp-editor-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }


/* Account dropdown section headers + divider — visually splits the menu
   into "Your account" / "Lab settings" / sign-out clusters. */
.menu-section-label {
  padding: 12px 14px 4px; font-size: 11px; font-weight: 700;
  color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em;
  border-top: 1px solid var(--line-soft);
}
.menu-section-label:first-child { border-top: 0; padding-top: 8px; }
.menu-divider { height: 1px; background: var(--line-soft); margin: 6px 0; }
.menu-item-danger { color: #b91c1c; }
.menu-item-danger:hover { background: #fef2f2; }


/* Settings modal — single scrollable pane with grouped sections. */
.settings-modal-shell { max-width: 640px; }
.settings-body { padding: 8px 20px 20px; max-height: 70vh; overflow-y: auto; }
.settings-section { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.settings-section:first-child { border-top: 0; padding-top: 4px; }
.settings-section h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-mute); font-weight: 700; margin: 0 0 12px;
}
.settings-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row > div:first-child { flex: 1; min-width: 0; }
.settings-row-title { font-weight: 600; color: var(--ink); font-size: 14px; }
.settings-row .muted.small { margin: 2px 0 0; }
.settings-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.settings-lang-picker { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.settings-lang-picker .lang-btn {
  background: transparent; border: 0; padding: 5px 12px; font-weight: 700;
  color: var(--ink-soft); cursor: pointer; font-size: 12px; font-family: inherit;
}
.settings-lang-picker .lang-btn.active { background: var(--primary, #4f46e5); color: #fff; }

@media (max-width: 640px) {
  .settings-row { flex-direction: column; align-items: stretch; }
  .settings-row-actions { justify-content: flex-end; }
}


/* Inline language picker inside the account dropdown (classic menu). */
.menu-lang-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 14px; font-size: 13px; color: var(--ink-soft);
}
.menu-lang-label { font-weight: 500; }
.menu-lang-buttons { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.menu-lang-buttons .lang-btn {
  background: transparent; border: 0; padding: 4px 10px; font-weight: 700;
  color: var(--ink-soft); cursor: pointer; font-size: 11px; font-family: inherit;
}
.menu-lang-buttons .lang-btn.active { background: var(--ink); color: #fff; }


/* "← Settings" button injected into sub-modal heads when opened from the
   unified Settings hub. Small ghost pill that sits left of the title. */
.modal-head .back-to-settings-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-soft); font-weight: 600; font-size: 12.5px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  cursor: pointer; margin-right: auto;
  transition: background var(--t-fast), color var(--t-fast);
  font-family: inherit;
}
.modal-head .back-to-settings-btn:hover {
  background: var(--surface-2); color: var(--ink);
}
/* When Settings is in wizard-sub mode, the head lays out as
   [Back][Title on right side][Close]. Ensure it flexes cleanly. */
#settings-modal .modal-head {
  display: flex; align-items: center; gap: 12px;
}
#settings-modal .modal-head h2 {
  margin: 0; flex: 1; text-align: center; font-size: 15px;
}
.settings-body.settings-sub-view { padding: 0; }
.settings-body.settings-sub-view form { padding: 20px 24px 22px; }

/* ============================================================
   Settings — right-side sliding panel (compact)
   ============================================================ */
.settings-panel {
  position: fixed;
  top: 60px;
  right: 0;
  height: calc(100vh - 60px);
  width: 100%;
  max-width: 380px;
  background: #312e81;
  color: #e0e7ff;
  box-shadow: -18px 0 60px -12px rgba(15, 23, 42, .55);
  z-index: 4;
  display: flex; flex-direction: column;
  animation: settingsPanelIn 240ms cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}
.settings-panel.hidden { display: none !important; }
@keyframes settingsPanelIn {
  from { transform: translateX(100%); opacity: .8; }
  to   { transform: translateX(0);    opacity: 1; }
}
.settings-panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  flex-shrink: 0;
}
.settings-panel-head h2 {
  margin: 0; flex: 1; text-align: center;
  font-size: 15px; font-weight: 700; color: #fff;
}
.settings-panel-close {
  background: rgba(255, 255, 255, .08); border: 0;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; color: #e0e7ff;
  font-size: 18px; line-height: 1;
  transition: background 150ms ease, color 150ms ease;
}
.settings-panel-close:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* Body is a flex column so the sign-out wrap can push to the bottom
   whenever the content is shorter than the panel — no gap, no scroll. */
.settings-panel-body {
  flex: 1; overflow-y: auto;
  padding: 2px 0 0;
  display: flex; flex-direction: column;
}
.settings-group-label {
  padding: 12px 16px 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(224, 231, 255, .55); font-weight: 700;
}
.settings-list-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 16px;
  background: transparent; border: 0;
  color: #e0e7ff; font-family: inherit; font-size: 14px;
  cursor: pointer; text-align: left;
  border-top: 1px solid rgba(255, 255, 255, .06);
  transition: background 150ms ease;
}
.settings-list-row:first-of-type { border-top: 0; }
.settings-list-row:hover { background: rgba(255, 255, 255, .07); }
.settings-list-row.settings-list-static { cursor: default; }
.settings-list-row.settings-list-static:hover { background: transparent; }
.settings-list-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.settings-list-icon svg { display: block; width: 18px; height: 18px; }
.settings-list-title { flex: 1; font-weight: 600; color: #fff; font-size: 13.5px; }

/* Chevron/arrow markers on the right are hidden — user asked for a
   cleaner look. The rows are still fully clickable. */
.settings-list-chev { display: none !important; }

/* Compact EN/TR pill inside the language row */
.settings-panel .settings-lang-picker {
  display: inline-flex; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden;
}
.settings-panel .settings-lang-picker .lang-btn {
  background: transparent !important; border: 0 !important;
  padding: 3px 10px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: rgba(224, 231, 255, .8) !important;
  cursor: pointer; font-family: inherit;
  line-height: 1.4 !important;
  letter-spacing: .03em;
  min-width: 0 !important;
  min-height: 0 !important;
}
.settings-panel .settings-lang-picker .lang-btn.active { background: #fff; color: #312e81; }

/* Flag-only language switcher inside the Settings panel — compact icons
   instead of text pills so the row lines up with the others. */
.settings-panel .settings-lang-flags {
  display: inline-flex; gap: 8px;
  border: 0 !important;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.settings-panel .lang-flag-btn {
  background: transparent !important; border: 1.5px solid transparent !important;
  padding: 2px !important;
  cursor: pointer;
  border-radius: 4px;
  line-height: 0 !important;
  min-width: 0 !important; min-height: 0 !important;
  font-family: inherit;
  opacity: 0.55;
  transition: opacity 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.settings-panel .lang-flag-btn:hover { opacity: 0.85; }
.settings-panel .lang-flag-btn.active {
  opacity: 1;
  border-color: #fff !important;
}
.settings-panel .lang-flag-btn svg { display: block; border-radius: 2px; }

/* Language row: put flags immediately next to the title with a subtle
   pipe separator. The title no longer flex-stretches so the flags sit
   right beside it instead of getting pushed to the far right. */
.settings-panel .settings-list-lang .settings-list-title { flex: 0 0 auto; }
.settings-panel .settings-lang-sep {
  color: rgba(224, 231, 255, .35);
  font-size: 14px;
  font-weight: 400;
  margin: 0 4px 0 6px;
  user-select: none;
}

/* Sign-out row pinned to the bottom of the panel body */
.settings-signout-wrap {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.settings-list-signout { color: #fca5a5; }
.settings-list-signout .settings-list-icon { color: #fca5a5; }
.settings-list-signout .settings-list-title { color: #fecaca; }
.settings-list-signout:hover { background: rgba(220, 38, 38, .18); }

/* Sub-view: sub-modal form embedded inside the panel body */
.settings-panel-body.settings-sub-view { padding: 0; display: block; }
.settings-panel-body.settings-sub-view form { padding: 20px 20px 24px; background: #fff; color: var(--ink); }
.settings-panel-body.settings-sub-view form label { color: var(--ink-soft); }

/* Back button in the panel head */
.settings-panel-head .back-to-settings-btn {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-weight: 600; font-size: 12px;
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
  transition: background 150ms ease;
}
.settings-panel-head .back-to-settings-btn:hover { background: rgba(255, 255, 255, .2); }

/* Bigger gear icon in the top-right */
#account-btn.icon-btn {
  font-size: 26px; padding: 8px 14px;
  min-width: 46px; min-height: 46px;
  border-radius: 12px;
}
#account-btn.icon-btn:hover { background: var(--surface-2, #f3f4f8); }

@media (max-width: 480px) {
  .settings-panel { max-width: 100%; }
}


/* Days-remaining card inside the Extend request modal */
.ext-status-card {
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
  background: var(--surface-2, #f3f4f8); border: 1px solid var(--line, #e5e9f0);
  transition: background 200ms ease, border-color 200ms ease;
}
.ext-status-line { display: flex; align-items: baseline; gap: 8px; }
.ext-status-days { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.ext-status-label { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.ext-status-sub { margin: 6px 0 0; }
.ext-status-hint { margin: 10px 0 0; }
.ext-status-card.ext-ok      { background: #ecfdf5; border-color: #a7f3d0; }
.ext-status-card.ext-ok      .ext-status-days { color: #047857; }
.ext-status-card.ext-warn    { background: #fefce8; border-color: #fde68a; }
.ext-status-card.ext-warn    .ext-status-days { color: #b45309; }
.ext-status-card.ext-caution { background: #fff7ed; border-color: #fdba74; }
.ext-status-card.ext-caution .ext-status-days { color: #c2410c; }
.ext-status-card.ext-danger  { background: #fef2f2; border-color: #fca5a5; }
.ext-status-card.ext-danger  .ext-status-days { color: #b91c1c; }

/* Lab tree helper spacings (in case they were missing) */
.lab-tree-render { padding: 12px 0 4px; }
.lab-tree-pending { margin: 6px 0 0; }


/* ============================================================
   Trash modal — soft-deleted task list (visual card layout)
   ============================================================ */
#trash-modal .modal { max-width: 780px; }
#trash-modal .modal-body { padding: 0 22px 22px; max-height: 78vh; overflow-y: auto; }
#trash-modal .modal-head {
  padding: 16px 22px 14px;
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
  border-bottom: 1px solid var(--line-soft);
}
#trash-modal .modal-head h2 { font-size: 18px; }
#trash-modal .modal-body .muted.small:first-child {
  padding: 12px 0 6px; margin: 0;
}
.trash-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.trash-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 4px;
  background: var(--surface-2, #f3f4f8);
  border-radius: 10px;
}
.trash-count { font-weight: 700; color: var(--ink); font-size: 13.5px; letter-spacing: -.01em; }
.trash-count::before {
  content: '🗑'; margin-right: 6px; opacity: .7;
}

/* Skeleton loading rows — animated shimmer */
.trash-skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.trash-skeleton-row {
  height: 84px; border-radius: 12px;
  background: linear-gradient(90deg, #f3f4f8 0%, #eef1f6 50%, #f3f4f8 100%);
  background-size: 200% 100%;
  animation: trashShimmer 1.4s ease-in-out infinite;
}
@keyframes trashShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.trash-row {
  display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line-soft, #eef1f6); border-radius: 12px;
  background: var(--surface, #fff);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.trash-row:hover {
  box-shadow: 0 6px 16px -4px rgba(15,23,42,.14);
  border-color: var(--line);
  transform: translateY(-1px);
}

.trash-row-stripe {
  flex-shrink: 0; width: 54px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f3f4f8);
  border-right: 1px solid var(--line-soft);
  font-size: 22px;
}
.trash-row-stripe.status-idea      { background: #fff7ed; }
.trash-row-stripe.status-todo      { background: #eff6ff; }
.trash-row-stripe.status-ongoing   { background: #eef2ff; }
.trash-row-stripe.status-onhold    { background: #fefce8; }
.trash-row-stripe.status-completed { background: #ecfdf5; }

.trash-row-meta { flex: 1; min-width: 0; padding: 12px 6px 12px 0; display: flex; flex-direction: column; gap: 4px; }
.trash-row-title { font-weight: 700; color: var(--ink); word-break: break-word; font-size: 14.5px; }
.trash-row-desc { line-height: 1.4; }
.trash-row-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0; }
.trash-chip {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--surface-2, #f3f4f8); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.trash-chip-status.status-idea      { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
.trash-chip-status.status-todo      { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.trash-chip-status.status-ongoing   { background: #e0e7ff; color: #4338ca; border-color: #a5b4fc; }
.trash-chip-status.status-onhold    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.trash-chip-status.status-completed { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.trash-chip-priority.priority-low     { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.trash-chip-priority.priority-medium  { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.trash-chip-priority.priority-high    { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.trash-chip-priority.priority-urgent  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

.trash-row-sub { margin: 4px 0 0; }
.trash-row-actions {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; flex-shrink: 0;
  border-left: 1px solid var(--line-soft);
  background: var(--surface, #fff);
  justify-content: center;
}
.trash-row-actions .btn { white-space: nowrap; }

/* Empty state */
.trash-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 16px; text-align: center; color: var(--ink-mute);
}
.trash-empty-icon { color: var(--ink-mute); margin-bottom: 8px; }
.trash-empty-title { font-weight: 700; font-size: 15px; color: var(--ink-soft); }
.trash-empty-sub { margin-top: 4px; }

@media (max-width: 640px) {
  .trash-row { flex-direction: column; }
  .trash-row-stripe { width: 100%; height: 40px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .trash-row-actions { flex-direction: row; border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* Reports list — group headers when templates are bucketed by ISO week */
.rt-week-header {
  font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-mute);
  padding: 14px 8px 6px;
  margin-top: 4px; border-top: 1px solid var(--line-soft);
}
.rt-week-header:first-child { border-top: 0; margin-top: 0; padding-top: 8px; }

/* Seat-limit strip inside the invite form */
.seat-usage { padding: 8px 12px; margin: 8px 0 12px; border-radius: 10px; background: var(--surface-2, #f3f4f8); border: 1px solid var(--line, #e5e9f0); }
.seat-usage[hidden] { display: none; }
.seat-usage-line { font-size: 13px; color: var(--ink); }
.seat-usage-line strong { font-weight: 800; letter-spacing: -.01em; }
.seat-usage-line.seat-low { color: #c2410c; }
.seat-usage-line.seat-full { color: #b91c1c; }
.seat-usage-note { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
.seat-request-btn { display: inline-block; margin-top: 8px; text-decoration: none; }

/* Compact extend-request status card (v2) */
.ext-status-card.ext-status-card-v2 { padding: 14px 16px; margin-bottom: 14px; }
.ext-status-card-v2 .ext-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ext-status-card-v2 .ext-status-days-block { display: flex; align-items: baseline; gap: 8px; }
.ext-status-card-v2 .ext-status-days { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ext-status-card-v2 .ext-status-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ext-status-card-v2 .ext-status-expiry-pill {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, .06); font-weight: 600; white-space: nowrap;
}
.ext-status-card-v2 .ext-status-hint { margin-top: 8px; font-weight: 600; }
.ext-status-card-v2.ext-danger  .ext-status-hint { color: #b91c1c; }
.ext-status-card-v2.ext-caution .ext-status-hint { color: #c2410c; }
.ext-status-card-v2.ext-warn    .ext-status-hint { color: #b45309; }
.ext-status-card-v2.ext-ok      .ext-status-hint { color: #047857; }
.ext-footnote { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.ext-footnote a { color: var(--primary, #4f46e5); }

/* Settings > Lab seats — inline usage badge on the row */
.settings-inline-badge {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: rgba(224,231,255,.95);
  font-weight: 700; font-size: 10.5px; letter-spacing: .02em;
  vertical-align: middle;
}
.settings-inline-badge.seat-badge-low  { background: rgba(251, 191, 36, .28); color: #fef3c7; }
.settings-inline-badge.seat-badge-full { background: rgba(220, 38, 38, .32); color: #fecaca; }

/* Settings > Lab seats sub-view */

/* ============================================================
   Settings > Lab seats — sub-view (redesigned)
   Matches the app's card + panel style used by other sub-views.
   ============================================================ */
.seats-subview {
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: transparent;   /* the panel-body already shows white when active */
  min-height: 100%;
}
.seats-card {
  background: #fff;
  border: 1px solid var(--line, #e5e9f0);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.seats-card-action { padding-bottom: 18px; }
.seats-card-metric { text-align: center; margin-bottom: 14px; }
.seats-card-metric:last-child { margin-bottom: 0; }
.seats-count { font-size: 42px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.seats-count strong { font-weight: 800; }
.seats-count .seats-of, .seats-count .seats-inf {
  font-size: 24px; font-weight: 600; color: var(--ink-mute); margin-left: 4px;
}
.seats-caption { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.seats-progress-wrap { margin-top: 16px; }
.seats-progress-track {
  height: 8px; border-radius: 999px; background: var(--surface-2, #eef1f6); overflow: hidden;
}
.seats-progress-fill {
  height: 100%; transition: width 240ms ease;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border-radius: 999px;
}
.seats-progress-fill.seats-bar-low  { background: linear-gradient(90deg, #d97706, #f59e0b); }
.seats-progress-fill.seats-bar-full { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.seats-progress-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; font-size: 12.5px; color: var(--ink-soft);
}
.seats-avail-badge {
  padding: 2px 10px; border-radius: 999px;
  background: rgba(79, 70, 229, .1); color: #4338ca;
  font-weight: 700; font-size: 12px;
}

.seats-hint {
  margin: 0 0 12px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5;
}
.seats-hint-full { color: #b91c1c; font-weight: 600; }
.seats-request-btn { margin-top: 4px; }
.seats-footnote {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--line-soft, #eef1f6);
  color: var(--ink-mute);
}

/* Make sure the panel body shows white when a sub-view is active so the
   cards read on the right surface (was showing indigo before). */
.settings-panel-body.settings-sub-view { background: var(--bg, #f8fafc); }

/* ============================================================
   Sign-in / sign-out lightweight transition overlay.
   ============================================================ */
.it-flash {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.it-flash-signin  { background: linear-gradient(135deg, #4f46e5, #22d3ee); }
.it-flash-signout { background: linear-gradient(135deg, #1e1b4b, #4f46e5); }
.it-flash.it-flash-visible { opacity: .35; }

.fade-in { animation: fadeInBrief 380ms ease-out; }
@keyframes fadeInBrief {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Settings > Lab seats — inline seat-request form */
.seats-request-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.seats-request-form.hidden { display: none; }
.seats-req-label { font-weight: 600; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.seats-req-required { color: #b91c1c; margin-left: 2px; }
.seats-request-form input[type="number"],
.seats-request-form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 13.5px; color: var(--ink); background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.seats-request-form input[type="number"]:focus,
.seats-request-form textarea:focus {
  outline: none; border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.seats-req-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}

/* ============================================================
   Mobile responsiveness — designed for "Add to Home Screen"
   PWA usage. Breakpoints: ≤768 (tablet), ≤480 (phone).
   ============================================================ */
@media (max-width: 768px) {
  /* Give the app the full viewport minus a bit of safe-area padding
     for iOS home-indicator + notch. */
  body { padding-bottom: env(safe-area-inset-bottom); }
  .app-view { padding: 0; }

  /* Topbar collapses to a single row with tighter spacing. */
  .topbar {
    padding: 8px 10px;
    height: auto; min-height: 56px;
    flex-wrap: wrap; gap: 8px;
  }
  .topbar .app-brand h1 { font-size: 15px; }
  .topbar .lab-brand   { font-size: 13px; }
  .topbar-right { gap: 4px; }
  .topbar-right .btn { padding: 6px 8px; font-size: 13px; }

  /* Left sidebar becomes a bottom-fixed tab strip on phone. Keeps
     Board / Reports / Members within thumb reach. */
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: 58px;
    flex-direction: row; align-items: center; justify-content: space-around;
    padding: 4px 8px; border-right: 0; border-top: 1px solid var(--line);
    background: var(--surface); box-shadow: 0 -6px 20px -8px rgba(15,23,42,.12);
    z-index: 30;
  }
  .sb-item {
    flex: 1; max-width: 100px; padding: 6px 4px;
    flex-direction: column; gap: 2px; font-size: 10.5px;
  }
  .sb-item .sb-icon { font-size: 20px; }
  .sb-item .sb-label { font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Push the main content up so nothing hides behind the bottom bar. */
  .app-main { padding-bottom: 76px; margin-left: 0 !important; }

  /* Board — horizontal scroll on phones. Give columns a fixed width so
     users can swipe between them. */
  .board {
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 12px;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .board .column { scroll-snap-align: start; }

  /* Modals fill most of the screen on phone. */
  .modal-backdrop { padding: 8px; }
  .modal { max-width: 100%; max-height: 92vh; }

  /* Settings right-panel becomes full-width on phone. */
  .settings-panel { max-width: 100%; left: 0; right: 0; top: 56px; height: calc(100vh - 56px); }
}

@media (max-width: 480px) {
  /* Even tighter — phones. */
  .topbar { padding: 6px 8px; }
  .topbar .app-brand h1 { font-size: 14px; }
  .board { grid-auto-columns: 88vw; }
  .modal { border-radius: 12px; }
  /* Larger tap targets — Apple HIG says 44×44pt. */
  .btn, .icon-btn { min-height: 44px; }
  .sb-item { min-height: 48px; }
  .form-error { font-size: 12.5px; }
}

/* When the app runs in standalone mode (installed PWA), hide any
   browser-only nudges. */
@media (display-mode: standalone) {
  .pwa-install-hint { display: none !important; }
}

/* PWA install button — shown in the topbar until the visitor taps it
   or dismisses it. Falls back to CSS-hidden if not eligible. */
.pwa-install-btn { display: none; }
.pwa-install-btn.pwa-eligible { display: inline-flex; }

/* ============================================================
   Mobile fixes — round 2 (contrast, notifications, modals)
   ============================================================ */
@media (max-width: 768px) {
  /* Bottom-bar readability. Icons stay colored (their emoji tint), text
     needs an explicit dark color + weight so it doesn't disappear on the
     white bar. */
  .sidebar .sb-item {
    color: #1e293b !important;
    background: transparent !important;
  }
  .sidebar .sb-item .sb-icon {
    color: #4f46e5 !important;
    filter: none;
  }
  .sidebar .sb-item .sb-label {
    color: #1e293b !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }
  .sidebar .sb-item.active,
  .sidebar .sb-item.sb-active {
    background: rgba(79,70,229,.08) !important;
    color: #4338ca !important;
    border-radius: 8px;
  }
  .sidebar .sb-item.active .sb-label,
  .sidebar .sb-item.sb-active .sb-label { color: #4338ca !important; }

  /* Notifications dropdown becomes a full-height side sheet from the right
     on phones so users can read every row without scrolling in a tiny box.
     Adds a visible × close button so they can dismiss and return to the board. */
  .notif-dropdown {
    position: fixed !important;
    top: 56px !important; right: 0 !important; left: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: calc(100vh - 56px - 58px) !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 40 !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 24px -8px rgba(15,23,42,.16);
  }
  .notif-dropdown .notif-head { position: sticky; top: 0; background: var(--surface, #fff); z-index: 2; padding: 12px 16px; }
  .notif-dropdown .notif-head::after {
    content: '×';
    position: absolute; right: 12px; top: 8px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface-2, #f3f4f8); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; font-weight: 400;
    cursor: pointer;
  }

  /* Settings right-panel — ensure the body scrolls independently and content
     never gets cut off at the bottom (respecting the bottom nav). */
  .settings-panel {
    top: 56px !important;
    height: calc(100vh - 56px - 58px) !important;
    max-width: 100% !important;
    right: 0 !important; left: 0 !important;
  }
  .settings-panel-body {
    overflow-y: auto !important;
    padding-bottom: 24px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals — leave the bottom nav visible so users always have a way back.
     A dedicated ← Back top-left button gives explicit navigation home.
     Uses safe-area for iPhone home indicator. */
  .modal-backdrop {
    top: 56px !important;
    bottom: 58px !important;
    height: calc(100vh - 56px - 58px) !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal-backdrop .modal {
    max-height: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal-backdrop .modal-head {
    position: sticky; top: 0; background: var(--surface, #fff); z-index: 5;
    padding: 12px 14px;
  }
  /* Give every modal-head a visible "×" close button styled consistently. */
  .modal-backdrop .modal-close {
    min-width: 40px; min-height: 40px;
  }

  /* Task modal + reports modal + manage users, etc. — same rules. */
  .lab-tree-modal-shell, .reports-modal-shell { max-width: 100% !important; }

  /* Prevent modals from covering the bottom bar completely — it stays
     visible under the modal-backdrop's bottom margin. */
  .sidebar { z-index: 60 !important; }
}

/* Keep-me-signed-in checkbox on login card */
.login-remember {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 8px; font-size: 13px; color: var(--ink-soft);
  cursor: pointer; user-select: none;
}
.login-remember input { width: 16px; height: 16px; accent-color: var(--primary, #4f46e5); }

/* Add-to-Home-Screen coach mark */
.pwa-install-hint {
  position: fixed; left: 12px; right: 12px; bottom: calc(58px + env(safe-area-inset-bottom) + 12px);
  z-index: 55;
  background: #0f172a; color: #f1f5f9;
  border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.4);
  font-family: inherit; font-size: 13.5px; line-height: 1.4;
  display: flex; gap: 10px; align-items: flex-start;
  animation: pwaSlideUp 260ms ease;
}
@keyframes pwaSlideUp { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
.pwa-install-hint .pwa-body { flex: 1; }
.pwa-install-hint strong { color: #fff; display: block; margin-bottom: 2px; }
.pwa-install-hint code {
  background: rgba(255,255,255,.14); padding: 1px 6px; border-radius: 4px;
  font-family: -apple-system, ui-monospace, monospace; font-size: 12px;
}
.pwa-install-hint button {
  background: transparent; border: 0; color: #cbd5e1; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 4px; font-family: inherit;
}
.pwa-install-hint button.pwa-cta {
  background: #4f46e5; color: #fff; padding: 6px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 700;
  margin-top: 6px;
}

/* Belt-and-suspenders — force the Settings panel body to scroll on mobile.
   Some devices ignored the earlier rule when the panel content grew beyond
   the viewport minus topbar minus bottom nav. */
@media (max-width: 768px) {
  .settings-panel {
    top: 56px !important;
    height: calc(100dvh - 56px - 58px) !important;
    max-height: calc(100dvh - 56px - 58px) !important;
    display: flex !important; flex-direction: column !important;
  }
  .settings-panel-head { flex-shrink: 0; }
  .settings-panel-body {
    flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important;
    padding-bottom: 32px !important; min-height: 0 !important;
  }
  /* Use dynamic viewport height (100dvh) for modals too so iOS Safari's
     URL bar collapsing doesn't cut the panel short. */
  .modal-backdrop { height: calc(100dvh - 56px - 58px) !important; }
}

/* Real notification close button — replaces the un-clickable ::after '×'.
   Kept the same visual so nothing changes for the user besides taps
   actually dismissing the panel. */
.notif-dropdown .notif-head::after { content: none !important; }
.notif-close-btn-x {
  position: absolute; right: 12px; top: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2, #f3f4f8); color: var(--ink);
  display: none; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 400;
  cursor: pointer; border: 0; padding: 0;
  font-family: inherit;
}
@media (max-width: 768px) {
  .notif-close-btn-x { display: flex; }
  .notif-dropdown .notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-right: 56px !important;
  }
}

/* ================= MANAGE USERS — MOBILE ================= */
@media (max-width: 768px) {
  /* Header row: title + View lab tree + × should stack cleanly and never
     bleed off the edge of the viewport. */
  #users-modal .modal-head { flex-wrap: wrap; gap: 8px; }
  #users-modal .modal-head h2 { font-size: 17px; margin: 0; flex: 1 1 auto; min-width: 0; }
  #users-modal .modal-head > div {
    margin-left: 0 !important; gap: 6px !important;
    flex: 0 0 auto;
  }
  #users-modal #open-lab-tree { font-size: 11.5px; padding: 5px 10px; white-space: nowrap; }

  /* User tables: contain overflow inside the section so the panel itself
     doesn't scroll horizontally. Each table gets its own horizontal
     scroll if the row is too wide. */
  #users-modal .users-layout { padding: 12px !important; gap: 14px !important; }
  #users-modal .users-list-wrap,
  #users-modal .users-form-wrap { padding: 0 !important; border: 0 !important; min-width: 0 !important; }
  #users-modal .users-form-wrap { padding-top: 6px !important; }
  #users-modal .pending-section,
  #users-modal .archive-section,
  #users-modal .users-list-wrap > h3 { padding: 0; }

  /* Force any oversize table into its own scrollable wrapper. */
  #users-modal .users-table-fixed {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; min-width: 0;
  }
  #users-modal .users-table thead,
  #users-modal .users-table tbody,
  #users-modal .users-table tr { width: 100%; }
  #users-modal .users-table th,
  #users-modal .users-table td { padding: 8px 6px; font-size: 12.5px; }
  #users-modal .users-table .role-badge {
    font-size: 8px; padding: 1.5px 4px; max-width: 90px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Invite by email form — keep every field inside the viewport width. */
  #users-modal .users-form-wrap input,
  #users-modal .users-form-wrap select,
  #users-modal .users-form-wrap textarea {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
  #users-modal .users-form-wrap label {
    font-size: 11px; letter-spacing: .06em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
  }
  #users-modal .users-form-wrap h3 { font-size: 14px; }

  /* Any pill / chip / count that would otherwise overflow gets clipped. */
  #users-modal .count-badge,
  #users-modal .deleted-badge,
  #users-modal .readonly-tag {
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ================= BOARD CARDS — MOBILE (compact) ================= */
@media (max-width: 768px) {
  .card {
    padding: 7px 9px 7px !important;
    margin-bottom: 6px !important;
    border-radius: 9px !important;
    border-left-width: 2px !important;
  }
  .card-title { font-size: 12.5px !important; line-height: 1.25 !important; }
  .card-desc {
    font-size: 11px !important; margin-top: 3px !important;
    -webkit-line-clamp: 2 !important;
  }
  .card-badges { gap: 4px !important; margin-top: 5px !important; }
  .mini-badge, .due-badge {
    font-size: 9.5px !important; padding: 1px 6px !important;
  }
  .owner-tag { font-size: 9.5px !important; padding: 1px 7px 1px 1px !important; }
  .owner-tag .avatar, .owner-tag .avatar-fallback { width: 14px !important; height: 14px !important; font-size: 8px !important; }
  .card-date { font-size: 9.5px !important; }
  .card-icon { margin-right: 3px !important; }
  .card-completed::after {
    top: 6px !important; right: 6px !important;
    width: 16px !important; height: 16px !important; font-size: 10px !important;
  }
}

/* ================= BOARD SCROLL — MOBILE ================= */
@media (max-width: 768px) {
  /* Board fills the height between topbar (56px) and bottom nav (58px).
     Using 100dvh (dynamic viewport) so iOS Safari's collapsing URL bar
     doesn't leave the last card hidden. */
  .board-wrap {
    height: calc(100dvh - 56px - 58px) !important;
    max-height: calc(100dvh - 56px - 58px) !important;
    overflow: hidden !important;
    padding: 10px 10px 0 !important;
  }
  .board {
    height: 100% !important;
    align-items: stretch !important;
  }
  .column {
    max-height: 100% !important;
    height: 100% !important;
    display: flex !important; flex-direction: column !important;
  }
  .column-head { flex-shrink: 0; }
  /* THE KEY BIT: the column body owns the vertical scroll on mobile.
     overscroll-behavior: contain stops the outer horizontal-snap
     container from stealing the touch and letting cards get cut off. */
  .column-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* Extra bottom pad so the last card clears the bottom nav +
       iOS home-indicator safe area. */
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  /* The horizontal board scroll must not clip the vertical scroll inside. */
  .board { touch-action: pan-x pan-y !important; }
  .column-body { touch-action: pan-y !important; }
}

/* ================================================================
   MOBILE POLISH — Reports, Manage Users, Settings top offset
   ================================================================ */

/* Settings panel — the mobile topbar wraps (viewer filter + notif +
   user chip + gear all stack on narrow phones), so `top: 56px` left
   part of the panel hidden behind a taller-than-expected topbar.
   Cover the whole screen from top to bottom-nav instead. */
@media (max-width: 768px) {
  .settings-panel {
    top: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: calc(100dvh - 58px) !important;
    max-height: calc(100dvh - 58px) !important;
    z-index: 60 !important;      /* above the topbar so nothing bleeds through */
  }
  .settings-panel-head {
    padding: 14px 16px !important;
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
  }
}

/* ========================= REPORTS — MOBILE ========================= */
@media (max-width: 768px) {
  /* Kill the fixed-height slab; let the modal own the scroll. */
  #reports-modal .modal { max-height: 100% !important; height: 100% !important; }
  #reports-modal .reports-layout {
    display: flex !important; flex-direction: column !important;
    height: auto !important; min-height: 0 !important;
    padding: 14px 12px !important; gap: 14px !important;
  }
  #reports-modal .reports-list-wrap,
  #reports-modal .reports-detail-wrap {
    flex: 0 0 auto !important; width: 100% !important;
    max-width: 100% !important; min-width: 0 !important;
    border: 0 !important; padding: 0 !important;
    overflow: visible !important;
  }
  /* "Select a template on the left..." is nonsense on a stacked mobile
     layout. Hide the empty state — the user picks a template from the
     list above and the detail expands below. */
  #reports-modal #report-empty-state { display: none !important; }

  /* Members · Weekly day section: give it breathing room and a proper
     card look so it doesn't collide with the templates list. */
  #reports-modal .reports-members-section {
    padding: 12px !important;
    background: var(--surface, #fff);
    border: 1px solid var(--line-soft, #e5e7eb);
    border-radius: 12px;
    margin-top: 6px !important;
  }
  #reports-modal .reports-members-title { font-size: 11px !important; }
  /* Change the tight 3-col grid into a stacked row so long names/roles
     and the day dropdown never bump into each other. */
  #reports-modal .reports-members-head { display: none !important; }
  #reports-modal .reports-members-list { max-height: 320px !important; }
  #reports-modal .reports-member-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  #reports-modal .reports-member-row .rm-day select {
    padding: 8px 10px !important; font-size: 13px !important;
  }
  #reports-modal .reports-member-row .rm-status {
    text-align: left !important; font-size: 12px !important;
  }
  #reports-modal .reports-member-row .rm-name { font-size: 13px !important; }
  #reports-modal .reports-member-row .rm-meta { font-size: 11px !important; }

  /* Report templates list */
  #reports-modal .reports-list-head { flex-wrap: wrap; gap: 8px; }
  #reports-modal .reports-list-head h3 { font-size: 15px; margin: 0; }
  #reports-modal .reports-list-head .btn { font-size: 12px; padding: 6px 10px; }
  #reports-modal .report-templates-list { max-height: none !important; }

  /* Detail pane: only becomes tall/scrollable once a template is picked. */
  #reports-modal .report-detail {
    border-top: 1px solid var(--line-soft);
    padding-top: 12px;
  }
  #reports-modal .report-detail-head h3 { font-size: 16px; }
}

/* ================= MANAGE USERS — MOBILE POLISH ================= */
@media (max-width: 768px) {
  /* Give sections card treatment so they read as separate groups
     instead of one long jumble. */
  #users-modal .users-list-wrap > h3,
  #users-modal .users-form-wrap > h3 {
    font-size: 14px;
    margin: 4px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
  }
  #users-modal .pending-section,
  #users-modal .archive-section {
    background: var(--surface, #fff);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 12px !important;
    margin-bottom: 12px;
  }
  #users-modal .users-form-wrap {
    background: var(--surface, #fff);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px !important;
    margin-top: 4px;
  }
  #users-modal .users-form-wrap .muted.small { font-size: 11.5px; }
  /* Invite meta pills ("Davet eden … role.admin" + "2/12 seats used") */
  #users-modal .invite-inviter,
  #users-modal .invite-seats-usage,
  #users-modal .seats-line {
    display: block; width: 100%;
    padding: 8px 10px; margin-bottom: 8px;
    background: var(--surface-2, #f3f4f8);
    border-radius: 8px; font-size: 12px;
    box-sizing: border-box;
  }
}