/**
 * Board Modals CSS
 * ============================================
 * Styles for board creation, settings, and management modals
 * Also includes board-chip switcher styles
 */

/* ============================================
   BOARD SWITCHER CHIPS
   ============================================ */

#board-switcher {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

#board-chips {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.board-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #374151);
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.board-chip:hover {
  background: var(--hover-bg, #f3f4f6);
  border-color: var(--accent-color, #14b8a6);
}

.board-chip.active {
  background: var(--accent-color, #14b8a6);
  color: white;
  border-color: var(--accent-color, #14b8a6);
}

.board-chip .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.board-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.2);
}

.board-chip .board-privacy-icon,
.group-chip .group-privacy-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ============================================
   PRIVACY BADGE - Color-coded label on chip
   ============================================ */
.chip-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

.chip-privacy-badge i {
  font-size: 0.6rem;
}

/* Privacy badge color variants */
.chip-privacy-badge.privacy-all {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

.chip-privacy-badge.privacy-work {
  background: rgba(8, 145, 178, 0.12);
  color: #0891b2;
}

.chip-privacy-badge.privacy-personal {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.chip-privacy-badge.privacy-private {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.chip-privacy-badge.privacy-busy-only {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}

/* Active chip: badge uses white-on-transparent style */
.board-chip.active .chip-privacy-badge,
.group-chip.active .chip-privacy-badge {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   OWNER BADGE - Shows admin/owner name
   ============================================ */
.chip-owner {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  opacity: 0.8;
  white-space: nowrap;
}

.chip-owner i {
  font-size: 0.55rem;
  color: #d97706;
}

.board-chip.active .chip-owner,
.group-chip.active .chip-owner {
  color: rgba(255, 255, 255, 0.75);
}

.board-chip.active .chip-owner i,
.group-chip.active .chip-owner i {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   DARK MODE - Privacy badge + Owner overrides
   ============================================ */
body.dark-mode .chip-privacy-badge.privacy-all,
body.dark-mode .chip-privacy-badge.privacy-all {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

body.dark-mode .chip-privacy-badge.privacy-work,
body.dark-mode .chip-privacy-badge.privacy-work {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
}

body.dark-mode .chip-privacy-badge.privacy-personal,
body.dark-mode .chip-privacy-badge.privacy-personal {
  background: rgba(192, 132, 252, 0.15);
  color: #c084fc;
}

body.dark-mode .chip-privacy-badge.privacy-private,
body.dark-mode .chip-privacy-badge.privacy-private {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

body.dark-mode .chip-privacy-badge.privacy-busy-only,
body.dark-mode .chip-privacy-badge.privacy-busy-only {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

body.dark-mode .chip-owner,
body.dark-mode .chip-owner {
  color: var(--text-muted, #9ca3af);
}

body.dark-mode .chip-owner i,
body.dark-mode .chip-owner i {
  color: #fbbf24;
}

/* ============================================
   GROUP-CHIP alias styles (JS uses group-chip,
   CSS originally used board-chip)
   ============================================ */
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #374151);
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.group-chip:hover {
  background: var(--hover-bg, #f3f4f6);
  border-color: var(--accent-color, #14b8a6);
}

.group-chip.active {
  background: var(--accent-color, #14b8a6);
  color: white;
  border-color: var(--accent-color, #14b8a6);
}

.group-chip .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.group-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.2);
}

/* Delete button */
.group-chip .group-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: currentColor;
  opacity: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.7rem;
}

.group-chip:hover .group-delete-btn {
  opacity: 0.6;
}

.group-chip .group-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.group-chip.active .group-delete-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Add group chip */
.group-chip.add-group {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted, #6b7280);
}

.group-chip.add-group:hover {
  background: var(--accent-color, #14b8a6);
  border-style: solid;
  color: white;
}

/* Pending join request chip — approval-required group you've asked to join but
   aren't a member of yet. Amber, dashed, slightly muted so it reads as
   "in progress, not selectable like a real board". */
.group-chip.group-chip--pending {
  background: var(--amber-50, #fffbeb);
  border-style: dashed;
  border-color: var(--amber-400, #fbbf24);
  color: var(--amber-700, #b45309);
  cursor: pointer;
}

.group-chip.group-chip--pending:hover {
  background: var(--amber-100, #fef3c7);
  border-color: var(--amber-500, #f59e0b);
  color: var(--amber-800, #92400e);
}

.group-chip.group-chip--pending .group-chip-pending-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  background: var(--amber-400, #fbbf24);
  color: #fff;
  border-radius: 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.group-chip.group-chip--pending i {
  color: var(--amber-500, #f59e0b);
}

body.dark-mode .group-chip.group-chip--pending {
  background: rgba(180, 83, 9, 0.18);
  border-color: var(--amber-500, #f59e0b);
  color: var(--amber-200, #fde68a);
}

body.dark-mode .group-chip.group-chip--pending .group-chip-pending-tag {
  background: var(--amber-500, #f59e0b);
  color: #1e293b;
}

body.dark-mode .group-chip {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .group-chip:hover {
  background: var(--slate-700, #334155);
}

body.dark-mode .group-chip {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .group-chip:hover {
  background: var(--slate-700, #334155);
}

/* Delete button - hidden by default, visible on hover */
.board-chip .board-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: currentColor;
  opacity: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.board-chip:hover .board-delete-btn {
  opacity: 0.6;
}

.board-chip .board-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.board-chip.active .board-delete-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Add board chip */
.board-chip.add-board {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted, #6b7280);
}

.board-chip.add-board:hover {
  background: var(--accent-color, #14b8a6);
  border-style: solid;
  color: white;
}

/* ============================================
   CREATE BOARD MODAL - Option Pills
   Uses standard .modal, .modal-content, etc.
   ============================================ */

/* Header privacy selector - icon chips in top right */
.header-privacy-selector {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}

.privacy-chip {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #64748b;
}

.privacy-chip:hover {
  background: #e2e8f0;
}

.privacy-chip.selected {
  border-color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.1);
}

.privacy-chip[data-preset="standard"] i { color: #f59e0b; }
.privacy-chip[data-preset="open"] i { color: #22c55e; }
.privacy-chip[data-preset="privacy_first"] i { color: #8b5cf6; }

body.dark-mode .privacy-chip {
  background: var(--slate-700, #334155);
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .privacy-chip:hover {
  background: var(--slate-600, #475569);
}

body.dark-mode .privacy-chip.selected {
  background: rgba(45, 212, 191, 0.15);
  border-color: var(--primary-400, #2dd4bf);
}

.create-board-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Option pills mirror the event modal's capsule chips (.event-type-chip /
   .duration-chip in style.css) so group creation reads as the same app as
   event creation: fully-rounded capsule, white base, accent-filled when
   selected. .option-pill is used ONLY by the two group modals
   (create-board-modal.js, session-board-modal.js), so this re-skins both. */
.option-pill {
  flex: 1;
  /* min-width:0 lets a flex:1 pill shrink WITHOUT clipping its label. Without
     it a narrow modal crammed the icon + text past the pill edge and the label
     ("Temporary") was cut off / hidden. Paired with white-space:normal so a
     tight label wraps inside the pill instead of vanishing. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--white, #fff);
  /* 1.5px border + 600 weight match the event-modal .duration-chip reference
     (style.css), so the pills read as the same control family app-wide. */
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  white-space: normal;
  text-align: center;
  /* SQUAT LABELS (2026-08-14, user: "request button the text seems squat").
     No line-height and no min-height were declared, so with white-space:normal
     a one-word label like "Request" sat on a tight inherited line-box inside
     only 8px of vertical padding. */
  line-height: 1.25;
  min-height: 38px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.option-pill:hover {
  border-color: var(--primary-300, #5eead4);
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-700, #0f766e);
}

/* Selected = solid accent fill, matching the event modal's neutral
   (non-category-keyed) chip active state (.duration-chip.active fallback). */
.option-pill.selected {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #fff;
}

.option-pill i {
  font-size: 0.75rem;
}

/* Dark Mode */
body.dark-mode .option-pill {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .option-pill:hover {
  border-color: var(--primary-400, #2dd4bf);
  background: var(--slate-700, #334155);
  color: var(--primary-300, #5eead4);
}

body.dark-mode .option-pill.selected {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #fff;
}

/* Privacy sub-control: the founding-class capsules render as a refinement
   of the Privacy section, not a co-equal field. Quieter than a .form-group
   <label> so the preset dropdown stays the headline control. */
.privacy-section .privacy-subfield {
  margin-top: 12px;
  margin-bottom: 6px;
}

/* Quiet caption above a nested privacy control (e.g. "Who can see what",
   "From your calendar"). Used standalone now, so it owns its own spacing. */
.privacy-subfield-label {
  display: block;
  margin: 4px 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
}
/* When a sub-label introduces a NESTED secondary control inside the section
   (the temp modal's "From your calendar"), give it breathing room above. */
.privacy-section .visibility-dropdown-wrapper + .calendar-sharing-toggle,
.privacy-section .privacy-scale + .calendar-sharing-toggle {
  margin-top: 10px;
}
.privacy-section > .privacy-subfield-label:not(:first-of-type) {
  margin-top: 14px;
}

.privacy-subfield-note {
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .privacy-subfield-label {
  color: var(--slate-300, #cbd5e1);
}

/* ============================================================
   MERGED PRIVACY SCALE (create-group + temp-group modals)
   One labelled radio-card list replacing the old preset dropdown +
   Standard/Private/Manual capsule pair. Reuses the .visibility-option
   card shell (style.css) but rendered open as a vertical stack, so each
   level shows its "what members see" line at a glance.
   ============================================================ */
.privacy-scale {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 4px;
}
/* The base .visibility-option (style.css) is a flex menu row; as a standalone
   button we just ensure full-width + left alignment + button-reset. */
.privacy-scale-option {
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--white, #fff);
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
}
.privacy-scale-option:hover {
  border-color: var(--primary-300, #5eead4);
  background: var(--primary-50, #f0fdfa);
}
.privacy-scale-option.selected {
  border-color: var(--primary-500, #14b8a6);
  background: var(--primary-50, #f0fdfa);
  box-shadow: 0 0 0 1px var(--primary-500, #14b8a6) inset;
}

/* ---- "What members see" mini-board preview (per scale level) --------------
   The base .visibility-option is a horizontal [icon][text] flex row. Allow it
   to wrap so the preview thumbnail drops onto its own full-width line below the
   label, where it's legible. The icon column is 24px (style.css); align the
   preview to the text by leaving it full-width and letting the row's gap own
   spacing. */
.privacy-scale-option {
  flex-wrap: wrap;
}
.vis-preview {
  /* Full-width so it wraps under the icon+text instead of squeezing beside it. */
  flex: 1 0 100%;
  display: flex;
  /* 2026-08-03: the preview grew from one cell to a 3-cell day-strip (the
     join wizard's illustrated [Busy][Free][Busy] rhythm — the design the user
     called the better version). Strip above, caption below. */
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  /* Indent to line up with the label text (past the 24px icon + row gap). */
  padding-left: calc(24px + var(--space-3, 12px));
}
/* The 3-cell strip: three sibling board cells sharing the row equally. */
.vis-preview-strip {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 280px;
}
/* One representative board cell, sized like a small timeline cell. */
.vis-preview-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-xs, 4px);
  background: var(--white, #fff);
  overflow: hidden;
}
/* Private: the join wizard's "?" placeholder — "unknown", not "free all day". */
.vis-preview-q {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--slate-400, #94a3b8);
}
/* Shared: a titled event chip is visible (working green, --status-available /
   .tz-seg-working on the real board). */
.vis-preview-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: var(--vp-color, #16a34a);
}
/* Busy: a solid RED block, no title — matches .tz-seg-busy on the real board
   (rgb(220,38,38) + the same inset hairline). DEF-073: this was amber
   (#f59e0b), a colour the board reserves for flex/off-hours/tentative, so the
   preview depicted a cell the app never actually renders. */
.vis-preview-busy {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  /* Fill the cell so it reads as a solid "taken" block. */
  width: 100%;
  text-align: center;
  background: var(--vp-color, var(--status-busy, #dc2626));
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}
/* Private: an empty (free) cell — nothing shown. */
.vis-preview-free {
  display: block;
  width: 100%;
  height: 100%;
}
.vis-preview-caption {
  font-size: 0.6875rem;
  color: var(--slate-500, #64748b);
}
.vis-preview-caption strong {
  color: var(--slate-700, #334155);
  font-weight: 600;
}
body.dark-mode .vis-preview-cell {
  border-color: var(--slate-600, #475569);
  background: var(--slate-900, #0f172a);
}
body.dark-mode .vis-preview-q {
  color: var(--slate-500, #64748b);
}

/* ---- Collapsed privacy disclosure (create-group modal, 2026-08-03) --------
   The privacy scale sits behind a <details> whose summary always names the
   level in force. Two-line summary text: section title + the current level. */
.cbm-privacy-disclosure > .cbm-desc-summary {
  align-items: flex-start;
}
.cbm-privacy-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.cbm-privacy-current {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-500, #64748b);
}
body.dark-mode .cbm-privacy-current {
  color: var(--slate-400, #94a3b8);
}
body.dark-mode .vis-preview-caption {
  color: var(--slate-400, #94a3b8);
}
body.dark-mode .vis-preview-caption strong {
  color: var(--slate-200, #e2e8f0);
}
/* Label row: the level name + (Recommended) + the "Permanent" lock chip flow
   inline after the name. Make it a LEFT-ALIGNED wrapping flex row so on a narrow
   (mobile) modal the badges wrap UNDER the name flush-left instead of flowing
   ragged / centre-drifting against the inline baseline (user 2026-06-26: "in
   create groups the permanent needs aligning correctly especially on mobile" +
   "left align the padlock and permanent"). align-items:center keeps the lock
   glyph + text vertically centred with the name; the row label box already left-
   aligns via .privacy-scale-option { text-align:left }. */
.privacy-scale-option .option-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  column-gap: 6px;
}
/* The little "Permanent" lock chip on the irreversible levels (Private/Manual)
   — quiet amber so it reads as a caution, not an error. margin-left removed: the
   parent flex `gap` now owns the spacing so it stays consistent whether the chip
   sits inline after the name or wraps to its own line, keeping it flush-left. */
.privacy-scale-lock {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--amber-600, #d97706);
  white-space: nowrap;
}
.privacy-scale-lock i {
  font-size: 0.625rem;
  margin-right: 2px;
}
body.dark-mode .privacy-scale-option {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}
body.dark-mode .privacy-scale-option:hover,
body.dark-mode .privacy-scale-option.selected {
  background: var(--slate-700, #334155);
}

body.dark-mode .privacy-subfield-note {
  color: var(--slate-500, #64748b);
}

/* ============================================
   BOARD SETTINGS MODAL
   ============================================ */

.board-settings-modal .modal-content {
  max-width: 520px;
}

.board-settings-modal .settings-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.board-settings-modal .settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.board-settings-modal .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
}

/* Availability mode toggle */
.availability-mode-toggle {
  display: flex;
  gap: 0.5rem;
}

.availability-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--card-bg, #fff);
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.availability-mode-btn:hover {
  border-color: var(--accent-color, #14b8a6);
}

.availability-mode-btn.selected {
  border-color: var(--accent-color, #14b8a6);
  background: rgba(20, 184, 166, 0.05);
}

.availability-mode-btn .mode-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-color, #374151);
}

.availability-mode-btn .mode-header i {
  color: var(--accent-color, #14b8a6);
}

.availability-mode-btn .mode-description {
  font-size: 0.8125rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

.availability-mode-btn .mode-best-for {
  font-size: 0.75rem;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}

/* Locked setting badge */
.locked-setting-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 0.25rem;
  margin-left: auto;
}

/* Danger zone */
.danger-zone {
  padding: 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
}

.danger-zone .section-title {
  color: #991b1b;
  margin-bottom: 0.75rem;
}

.danger-zone-actions {
  display: flex;
  gap: 0.75rem;
}

.danger-zone .btn-danger-outline {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.danger-zone .btn-danger-outline:hover {
  background: #ef4444;
  color: white;
}

/* ============================================
   QUICK MEET MODAL
   ============================================ */

/* QuickMeet-scoped chrome removed (add-surfaces D1 — the QuickMeet modal is
   deleted). The .participant-* / .meeting-* rules below are intentionally
   kept: they are consumed by the guest page (meet.html, .participant-row).
   The .scanner-preview-* rules were removed with the dead ScannerPreviewStrip
   module (GS-07 — its only consumer, session-board-modal, replaced it with
   "Suggest from my calendar"). */

/* Meeting date picker */
.meeting-date-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.meeting-date-input,
.meeting-time-input,
.meeting-duration-select {
  flex: 1;
}

.meeting-date-input label,
.meeting-time-input label,
.meeting-duration-select label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* (Scanner preview strip rules removed — GS-07. The ScannerPreviewStrip
   module was dead: no <script> include, no render() caller, and it carried
   a false-positive "Fair to everyone" verdict the live surfaces rejected.
   The guest strip on meet.html uses its own inline .scanner-cell CSS.) */

/* Participants list */
.participants-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.participants-header h4 {
  font-size: 0.875rem;
  font-weight: 600;
}

.participants-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.participant-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--hover-bg, #f9fafb);
  border-radius: 0.5rem;
}

.participant-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-color, #14b8a6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.participant-info {
  flex: 1;
  min-width: 0;
}

.participant-name {
  font-weight: 500;
  color: var(--text-color, #374151);
}

.participant-tz {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.participant-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 1rem;
}

/* Temp sync option */
.temp-sync-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.temp-sync-option input[type="checkbox"] {
  margin-top: 0.125rem;
}

.temp-sync-info h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #166534;
  margin-bottom: 0.25rem;
}

.temp-sync-info p {
  font-size: 0.8125rem;
  color: #15803d;
  line-height: 1.4;
}

/* Share link section */
.share-link-section {
  padding: 1rem;
  background: var(--hover-bg, #f9fafb);
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.share-link-section h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.share-link-row {
  display: flex;
  gap: 0.5rem;
}

.share-link-row input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* ============================================
   BOARD MEMBERS PANEL
   ============================================ */

.board-members-panel {
  max-height: 400px;
  overflow-y: auto;
}

.member-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition: background 0.2s ease;
}

.member-list-item:hover {
  background: var(--hover-bg, #f9fafb);
}

.member-list-item .member-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-color, #14b8a6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.member-list-item .member-details {
  flex: 1;
  min-width: 0;
}

.member-list-item .member-name {
  font-weight: 500;
  color: var(--text-color, #374151);
}

.member-list-item .member-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.member-role-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0.25rem;
}

.member-role-badge.owner {
  background: #fef3c7;
  color: #92400e;
}

.member-actions {
  display: flex;
  gap: 0.25rem;
}

.member-action-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.2s ease;
}

.member-action-btn:hover {
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-color, #374151);
}

.member-action-btn.remove:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* Pending invites section */
.pending-invites-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.pending-invites-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.pending-invite-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.pending-invite-item .invite-email {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-color, #374151);
}

.pending-invite-item .invite-status {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.invite-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.invite-action-btn.resend {
  background: #e0e7ff;
  color: #4338ca;
}

.invite-action-btn.accept {
  background: #d1fae5;
  color: #065f46;
}

.invite-action-btn.deny {
  background: #fecaca;
  color: #991b1b;
}

/* ============================================
   CONTEXT MENU STYLES
   ============================================ */

.board-context-menu {
  position: fixed;
  min-width: 180px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  z-index: var(--z-popover);
}

/* .context-menu-item base + :hover + .danger removed 2026-08-04.
   This file loads AFTER style.css, so this copy was the one that actually won
   app-wide — every context menu in the app was painted by these hardcoded
   values rather than by the token-based canonical rule in style.css. The
   canonical rule already carries an equivalent .danger treatment, so deleting
   this changes no intended appearance; it just stops the override. Do not
   reintroduce an unscoped .context-menu-item rule here. */

.context-menu-divider {
  height: 1px;
  background: var(--border-color, #e5e7eb);
  margin: 0.5rem 0;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

body.dark-mode .board-chip {
  background: var(--card-bg-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
  color: var(--text-color-dark, #e5e7eb);
}

body.dark-mode .board-chip:hover {
  background: var(--hover-bg-dark, #374151);
}

body.dark-mode .privacy-preset-card,
body.dark-mode .entry-mode-btn,
body.dark-mode .availability-mode-btn {
  background: var(--card-bg-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
}

body.dark-mode .board-context-menu {
  background: var(--card-bg-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
}

body.dark-mode .context-menu-item:hover {
  background: var(--hover-bg-dark, #374151);
}

body.dark-mode .danger-zone {
  background: rgba(127, 29, 29, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .temp-sync-option {
  background: rgba(22, 101, 52, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
}

/* QUICK MEET BUTTON section removed (add-surfaces D1 — surface deleted). */

/* ============================================
   CALENDAR SHARING TOGGLE
   ============================================ */

.calendar-sharing-toggle {
  background: var(--hover-bg, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.toggle-row.sub-toggle {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #374151);
}

.toggle-desc {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* Checkbox styled as toggle switch. Matches the attendees switch
   (.create-switch / .propose-switch in style.css) — same 36×20 track, pill
   radius, and 14px flat knob — so the group modal's toggles read identically
   to the Essential/Invited switches. Semantics stay normal here (off = grey,
   on = teal), since "share my calendar: on" should read as enabled.

   Scoped to .calendar-sharing-toggle so the dimension/colour rules reach
   specificity (0,2,1) — enough to beat the global `.form-group
   input[type="checkbox"]` (18×18) and `.toggle-switch` (44×24) rules that
   otherwise won the cascade and squashed the switch. board-modals.css loads
   after style.css, so the tie with .form-group input[type=checkbox] breaks
   our way. */
.calendar-sharing-toggle input.toggle-switch {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  /* The global `.form-group input` rule leaks padding (12px 16px) onto this
     checkbox and distorts the track + knob — zero it out. */
  padding: 0;
  margin: 0;
  background: var(--slate-300, #cbd5e1);
  border-radius: var(--radius-xl, 9999px);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.calendar-sharing-toggle input.toggle-switch:checked {
  background: var(--primary-500, #14b8a6);
}

.calendar-sharing-toggle input.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.calendar-sharing-toggle input.toggle-switch:checked::after {
  transform: translateX(16px);
}

/* Form hint text. 12px / secondary matches the inline duration hint, so every
   helper line in these two modals reads at one size (was 11px muted — visibly
   smaller than its neighbours). */
.form-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  padding: 0 2px;
  line-height: 1.45;
}

/* Recommended badge */
.recommended-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
  border-radius: 4px;
}

/* Dark mode overrides for calendar sharing and toggles */
body.dark-mode .calendar-sharing-toggle,
body.dark-mode .calendar-sharing-toggle {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}

body.dark-mode .toggle-title,
body.dark-mode .toggle-title {
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .toggle-desc,
body.dark-mode .toggle-desc {
  color: var(--slate-400, #94a3b8);
}

body.dark-mode input.toggle-switch,
body.dark-mode input.toggle-switch {
  background: var(--slate-600, #475569);
}

body.dark-mode input.toggle-switch:checked,
body.dark-mode input.toggle-switch:checked {
  background: var(--accent-color, #14b8a6);
}

body.dark-mode .toggle-row.sub-toggle,
body.dark-mode .toggle-row.sub-toggle {
  border-top-color: var(--slate-600, #475569);
}

body.dark-mode .recommended-badge,
body.dark-mode .recommended-badge {
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
}

body.dark-mode .form-hint,
body.dark-mode .form-hint {
  color: var(--slate-500, #64748b);
}

/* ============================================
   CREATE-GROUP SIZING — mirror #event-modal (style.css) so the ~7-section
   stack lays out in two columns instead of a tall single column that forces
   page-scroll. Width was previously a JS inline max-width:420px; that inline
   style is removed so this rule owns sizing. 2026-06-26.
   ============================================ */

#create-board-modal .modal-content {
  max-width: 760px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#create-board-modal .modal-header,
#create-board-modal .modal-footer {
  flex-shrink: 0;
}

#create-board-modal .modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Two-column form grid ≥640px. Each .form-group is a grid item; rows that
   should stay full-width (privacy section with its sub-controls, calendar
   sharing) opt out via .cbm-full. Below 640px it collapses to one column. */
@media (min-width: 641px) {
  #create-board-modal .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 4px;
    align-content: start;
  }

  #create-board-modal .modal-body > .form-group {
    margin-bottom: 0;
    min-width: 0;
  }

  /* Full-width rows: privacy (tall, has sub-controls), anything tagged
     .cbm-full, and the calendar-sharing block (the last .form-group in the
     body — a plain .form-group from the shared buildCalendarSharingHTML with
     no distinguishing class, so target it positionally). */
  #create-board-modal .modal-body > .privacy-section,
  #create-board-modal .modal-body > .cbm-full,
  #create-board-modal .modal-body > .form-group:last-child {
    grid-column: 1 / -1;
  }
}

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

@media (max-width: 640px) {
  #create-board-modal .modal-content,
  .create-board-modal .modal-content,
  .board-settings-modal .modal-content {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }

  /* DEF-076 (2026-07-27): "create a group has no exit X".
     The X is in the markup and wired (#close-create-board-modal), but on a
     phone this rule turns the modal into a full-bleed sheet with
     min-height:100vh, while the sizing block above sets max-height:90vh +
     overflow:hidden on the SAME element. min-height wins, so the content box
     grows past the viewport, the flex column stretches, and the header —
     which is flex-shrink:0 and FIRST in the column — can be scrolled/pushed
     out of the visible area with no way back to it, because the overflow is
     owned by .modal-body rather than the page.

     Pin the header instead: cap the sheet to the true viewport (dvh where
     supported, so mobile browser chrome doesn't steal the last rows) and make
     the header sticky so the close button is reachable at every scroll
     position. */
  #create-board-modal .modal-content {
    min-height: 100dvh;
    max-height: 100dvh;
  }

  #create-board-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white, #fff);
    /* Tighter than the 24px desktop padding so the title + X keep more of the
       short viewport for the form itself. */
    padding: 16px 16px 12px;
  }

  body.dark-mode #create-board-modal .modal-header {
    background: var(--slate-900, #0f172a);
  }

  /* The X is a 44px touch target; keep it from being crowded by a long
     translated title (de/vi wrap the hardest). */
  #create-board-modal .modal-header h2 {
    font-size: 20px;
    padding-right: 8px;
  }

  /* WHO CAN JOIN, one pill per row (2026-08-16, user: the options rendered as
     one run of text, "AnyoneRequestInviteLocked", and Request had bad fit).
     Two faults here: this rule was never closed — the comment below opened
     immediately after flex-direction and swallowed a duplicated copy of the
     header block above, so the parser discarded the lot — and it targeted a
     `.entry-mode-selector` CLASS that appears nowhere. The markup uses the ID
     (create-board-modal.js), so the pills kept their 4-across desktop layout
     on a phone; at ~25% of a narrow modal the longest label, "Request", which
     also carries an icon, crushed against its neighbours. */
  #entry-mode-selector {
    flex-direction: column;
  }

  #entry-mode-selector .option-pill {
    /* flex:1 divides the ROW; once stacked each pill should own the full
       width rather than shrink to its text. */
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
  }

  .availability-mode-toggle {
    flex-direction: column;
  }

  .meeting-date-row {
    flex-direction: column;
  }

  .danger-zone-actions {
    flex-direction: column;
  }
}

/* SAVE-TIME EXPORT OPT-IN (2026-09-01, owner: "export google shouldn't that be
   a confirmation action not preconfirmation, ie see confirmation dialogue,
   confirm or confirm and export depending on event type"). A quiet row
   directly above the event modal's footer, so the choice reads as part of
   COMMITTING the event rather than as another button competing with Save.
   Deliberately not styled as a CTA — it is a modifier on the save, not a
   second action. Visibility is owned by event-modal-manager.js (Google
   connected + exportable type + not already exported + auto-export off). */
.save-export-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 8px;
}
.save-export-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    user-select: none;
}
.save-export-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.save-export-label i {
    color: #4285f4;   /* Google blue — matches the standalone Export button */
}
.save-export-label:hover {
    color: var(--text-primary, #0f172a);
}
body.dark-mode .save-export-label {
    color: var(--text-secondary, #94a3b8);
}
body.dark-mode .save-export-label:hover {
    color: #f1f5f9;
}