:root {
  --bg: #0f1117;
  --bg-elevated: #1a1e2a;
  --surface: #181b24;
  --surface-2: #1f2430;
  --border: #2a3142;
  --text: #e8ecf4;
  --muted: #8b95a8;
  --accent: #4f8cff;
  --accent-soft: rgba(79, 140, 255, 0.15);
  --accent-subtle: rgba(79, 140, 255, 0.1);
  --accent-text: #fff;
  --success: #3ecf8e;
  --warn: #f0b429;
  --danger: #f07178;
  --hover: rgba(255, 255, 255, 0.08);
  --radius: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --font: "DM Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

/* ─── Subtle scrollbar: hidden at rest, visible only on the element
   that's actively scrolled or hovered ───────────────────────────────
   Uses the standardized `scrollbar-color` + `scrollbar-width` properties
   (CSS Scrollbars Styling Module Level 1, Chrome 121+, Firefox 64+,
   Safari 26.2+). The thumb color is `transparent` by default and is
   toggled to a visible value by JS via the `.is-scrolling` and
   `.is-hovered` classes on the SPECIFIC element being scrolled or
   hovered. No `::-webkit-scrollbar { width: 0 }` tricks — those force
   the browser from overlay to classic mode and the scrollbar still
   renders. The `scrollbar-color: transparent` approach works in both
   modes and doesn't fight the browser's overlay behavior.
   The `*` selector sets the default for every scrollable element;
   the per-element class toggles it visible for that one element. */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s;
}
.is-scrolling,
.is-hovered {
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

/* WebKit/Blink fallback: hide the legacy `::-webkit-scrollbar` thumb
   background by default. This is belt-and-suspenders for older
   browsers that don't respect `scrollbar-color`. We do NOT set
   `width: 0` because that forces the scrollbar into classic mode
   (per Chrome docs) and the scrollbar still renders. Instead, we
   just make the thumb transparent. */
*::-webkit-scrollbar {
  background: transparent;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
  transition: background-color 0.2s;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
.is-scrolling::-webkit-scrollbar-thumb,
.is-hovered::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.28);
}
.is-scrolling::-webkit-scrollbar-thumb:hover,
.is-hovered::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.45);
}

.hidden {
  display: none !important;
}

/* Login */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--accent-soft, rgba(79, 140, 255, 0.25)), transparent),
    var(--bg);
  position: relative;
  overflow: hidden;
}

.login-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.login-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
}

.login-sub {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.login-card label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.login-card input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.login-card input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.login-card input[readonly] {
  background: var(--surface);
  color: var(--muted);
  border-style: dashed;
  cursor: default;
  opacity: 0.85;
}

.login-loading {
  margin-top: 0.5rem;
  color: var(--accent);
  font-size: 0.85rem;
  text-align: center;
}

.error-text {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

/* Buttons */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
  line-height: 1.25;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text, #fff);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--muted);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-ghost:hover {
  color: var(--text);
}

.btn-block {
  width: 100%;
}

/* Hero (landing-style header) */
.hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(79, 140, 255, 0.08) 0%, transparent 50%),
    var(--surface);
}

/* Header top-right action group: admin, health, sign-out */
.hero-header-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.45rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.header-control-btn:hover,
.header-control-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  outline: none;
}

.hero-sign-out {
  /* kept as class on the sign-out button for specificity; base sizing from .header-control-btn */
}

.server-health-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.server-health-indicator.unreachable {
  display: inline-flex;
  color: var(--warn);
}
.server-health-indicator::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0;
}
.server-health-indicator.unreachable::after {
  background: var(--warn);
  opacity: 1;
}

.event-log-btn {
  position: absolute;
  top: 1rem;
  right: 6.75rem;
  z-index: 3;
}

.app-version {
  margin-left: 0.2em;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.65;
  vertical-align: middle;
  user-select: none;
  pointer-events: none;
}

.sietch-name {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.65;
  vertical-align: middle;
  user-select: none;
  pointer-events: none;
}

.sietch-name .app-version {
  margin-left: 0.2em;
  font-size: inherit;
  opacity: inherit;
}

.hero-inner {
  max-width: 1820px;
  margin: 0 auto;
  padding: 2rem 1rem 1.6rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.hero-logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  line-height: 0;
  pointer-events: none;
}

.hero-copy {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.hero-logo {
  display: block;
  flex-shrink: 0;
  width: 84px;
  height: auto;
  margin: 0;
  padding: 0;
  object-fit: contain;
}

.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-title em {
  font-style: italic;
  color: var(--accent);
}

.hero-desc {
  margin: 0.75rem 0 0;
  max-width: none;
  color: var(--muted);
  white-space: nowrap;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.55rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.btn-icon-only-lg {
  padding: 0.65rem 0.75rem;
  min-width: 3.25rem;
  min-height: 3.25rem;
}

.btn-inline-icon {
  display: block;
  flex-shrink: 0;
}

/* Refresh button spin animation during CRM data load */
.refresh-btn-loading .btn-inline-icon {
  animation: crm-refresh-spin 0.8s linear infinite;
}

@keyframes crm-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.field-required {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.85em;
}

.hero-actions .btn-primary.btn-icon-only {
  color: #fff;
}

#quick-note-opportunity-selected .contact-clear {
  cursor: pointer;
  text-decoration: underline;
  margin-left: 0.35rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.global-opp-search {
  position: relative;
  flex-shrink: 0;
}

.global-opp-search-input {
  width: min(220px, 28vw);
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
}

.global-opp-search-input::placeholder {
  color: var(--muted);
}

.global-opp-search-input:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.global-opp-search-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  min-width: max(100%, 320px);
  width: max(320px, 100%);
  max-height: min(70vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.global-opp-search-item {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.global-opp-search-item:last-child {
  border-bottom: none;
}

.global-opp-search-item:hover,
.global-opp-search-item:focus-within {
  background: var(--accent-soft);
}

.global-opp-search-item-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0.1rem 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  cursor: pointer;
}

.global-opp-search-item-title:hover,
.global-opp-search-item-title:focus {
  color: var(--accent);
  outline: none;
}

.global-opp-search-open {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 0.05rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}

.global-opp-search-open:hover,
.global-opp-search-open:focus {
  border-color: var(--border);
  background: var(--surface);
  color: var(--accent);
  outline: none;
}

.crm-open-external svg {
  display: block;
}

.global-opp-search-results .search-empty {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Toolbar */
.toolbar {
  max-width: 1820px;
  margin: 0 auto;
  padding: 1rem 1rem;
}

.toolbar-presets {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.presets-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.chip {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.chip-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}

.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  min-width: 8rem;
}

.field input[type="checkbox"],
.field input[type="radio"] {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.field-narrow input {
  width: 5.5rem;
}

.field-check {
  padding-bottom: 0.35rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.toolbar-meta {
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
}

.portal-label {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Kanban board */
.board {
  max-width: 1820px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;        /* horizontal scroll for off-screen columns */
  overflow-y: visible;     /* the board never scrolls vertically — columns do */
  min-height: 420px;       /* visual floor so empty boards still show column outlines */
  align-items: stretch;    /* columns fill the board's cross-axis height — required for the column-body's `max-height: 100%` to scale with the tile */
  cursor: grab;            /* click-and-drag horizontal scroll (see app.js) */
}
.board:active {
  cursor: grabbing;
}

.column {
  flex: 0 0 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  /* Column fills the board's cross-axis height (via align-items: stretch
     on the board). The column-body inside uses `max-height: 100%` so it
     caps to the column's available height — not the viewport. When the
     user resizes the tile taller, the column grows; the column-body's
     max-height tracks. When the column has fewer cards than the column
     is tall, the column-body is content-tall (no stretch) and there's
     empty space below the last card inside the column (per user). */
  max-height: none;
  min-height: 0;
  overflow: hidden;        /* backstop: never let column content escape */
}

.column-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  flex-shrink: 0;          /* keep the header at its natural height even when the column is short on content */
}

.column-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.column-title {
  font-weight: 600;
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-count {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface-2);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.column-body {
  padding: 0.65rem;
  overflow-y: auto;        /* the only vertical scroll surface */
  flex: 0 1 auto;          /* content-tall, capped by max-height (NOT stretched to fill the column) */
  max-height: 100%;        /* cap to the column's available height — scales with the tile, not the viewport */
  min-height: 80px;
}



.card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 3.6rem 1.65rem 0.75rem;
  margin-bottom: 0.5rem;
  cursor: default;
  transition: box-shadow 0.15s, border-color 0.15s;
  /* Wrap long words/URLs inside the card. Kanban card text (project
     titles, descriptions, CRM URLs) often has no natural break points
     and would otherwise overflow the card's right border. The
     `overflow-wrap` property is inherited, so all child text
     elements (.card-title, .card-meta, .card-details, .card-description,
     .card-contact) get this wrap behavior too. `min-width: 0` is
     defensive — the cards aren't flex items today, but if any future
     flex/grid context wraps them, this lets them shrink below their
     intrinsic content size so the wrap can actually take effect. */
  overflow-wrap: break-word;
  min-width: 0;
}

.card-actions {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.card-preview-btn,
.card-edit-btn {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-preview-btn .card-action-icon {
  display: block;
}

.card:hover .card-preview-btn,
.card:hover .card-edit-btn,
.card-preview-btn:focus-visible,
.card-edit-btn:focus-visible {
  opacity: 1;
}

.card-preview-btn:hover,
.card-edit-btn:hover {
  background: var(--surface);
  color: var(--text);
}

.card-due {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.4rem;
  margin: 0;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.card-due--overdue {
  color: var(--danger);
  font-weight: 600;
}

.card-created {
  margin-left: 0.6rem;
  font-size: 0.62rem;
  color: var(--muted);
  opacity: 0.7;
}

.card:hover {
  border-color: var(--muted);
}

.card--high-priority:hover {
  border-color: var(--warn);
}

.card-title {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: 1rem;
}

.card-meta {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.card-value {
  color: var(--success);
  font-weight: 600;
}

.card-details {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.card-contact {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.card-description {
  margin: 0 0 0.35rem;
  color: var(--text);
}

.card-detail-line {
  margin: 0.15rem 0 0;
}

.card-detail-label {
  color: var(--muted);
  font-weight: 600;
}

.card-stage-pill {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
}

.card-checklist-warn {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger);
}

.empty-column {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.board-loading,
.board-error {
  padding: 3rem;
  text-align: center;
  color: var(--muted);
  width: 100%;
}

.board-error {
  color: var(--danger);
}

.board-error-retry {
  margin-left: 6px;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.9em;
  opacity: 0.9;
}
.board-error-retry:hover { opacity: 1; }

/* Tile-level loading indicator */
.tile-loading {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.tile-loading-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: tile-loading-spin 0.6s linear infinite;
  margin-right: 0.5rem;
  vertical-align: middle;
}
@keyframes tile-loading-spin {
  to { transform: rotate(360deg); }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 360px;
  padding: 0.85rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  z-index: 2003;
  animation: slide-in 0.25s ease;
}

.toast.error {
  border-color: var(--danger);
  color: var(--danger);
}

/* Also shift header meta indicators when sidebar is open */
.bookmark-open #mutation-sync-status,
.bookmark-open #crm-crash-banner {
  margin-right: 240px;
}

.toast.warning {
  border-color: #f59e0b;
  color: #1f2937;
  background: #fef3c7;
}

/* Bottom-right CRM sync / action status (for connecting, sent, queued feedback) */
.crm-sync-status {
  position: fixed;
  bottom: 3.5rem;
  right: 1.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  z-index: 2001;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 320px;
}

.crm-sync-status.warning {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #1f2937;
}

.crm-sync-status .progress {
  width: 50px;
  height: 2px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.crm-sync-status .progress-bar {
  height: 100%;
  background: #3b82f6;
  animation: crm-progress 3s infinite ease-in-out;
}

@keyframes crm-progress {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(20%); }
  100% { transform: translateX(300%); }
}

.refreshing-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: refresh-spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* (removed all .crm-*-banner rules: no header warning banners per spec.
   Unreachability is indicated only via bottom progress bar on timeout + compact header marquee after 8s) */

/* Multi-group layout */
.global-meta {
  max-width: 1820px;
  margin: 0 auto;
  padding: 0 1rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.global-meta-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
}

#mutation-sync-status {
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

/* Note attachments queue list — matches .crm-sync-status style, stacked above it on the left */
#note-queue-list {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 2002;
  max-width: 420px;
  padding: 0.5rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  box-shadow: var(--shadow);
  line-height: 1.4;
}
#note-queue-list:empty {
  display: none;
}
.note-queue-item {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-queue-item.success { color: #166534; }
.note-queue-item.fail { color: #9f1239; }
.note-queue-item .q-attach { opacity: 0.8; font-size: 0.9em; }
.note-queue-item .q-check { margin-left: 0.25em; }
.note-queue-item .q-fail { margin-left: 0.25em; color: #9f1239; }

/* Indicator stack: holds toast, CRM sync status, and note queue so they stack
   vertically on the right by default, and on the left when a bookmark preview is open. */
.bookmark-indicator-stack {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  z-index: 2004;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: min(420px, calc(100vw - 3rem));
  pointer-events: none;
}
.bookmark-indicator-stack.bookmark-open {
  right: auto;
  left: 1.5rem;
  align-items: flex-start;
}
.bookmark-indicator-stack.hidden {
  display: none !important;
}
.bookmark-indicator-stack > * {
  pointer-events: auto;
}
.bookmark-indicator-stack .toast,
.bookmark-indicator-stack .crm-sync-status,
.bookmark-indicator-stack #note-queue-list {
  position: static !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  animation: slide-in 0.2s ease;
}
.bookmark-indicator-stack .toast {
  max-width: 100%;
}
.bookmark-indicator-stack .crm-sync-status {
  max-width: 100%;
}
.bookmark-indicator-stack #note-queue-list {
  max-width: 100%;
}

/* Attachments field in note editors (deal-edit + quick-note) */
.note-attachments-field {
  margin-top: 0.25rem;
}
.note-attachments-field label {
  font-size: 0.75rem;
  display: block;
  margin-bottom: 0.1rem;
}
.note-attachments-input {
  font-size: 0.75rem;
}
.selected-attachments {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  line-height: 1.25;
}
.selected-attachments .sel-item {
  display: inline-block;
  margin-right: 0.5em;
  background: var(--surface-2);
  padding: 0 0.3em;
  border-radius: 2px;
}
.selected-attachments .sel-remove {
  cursor: pointer;
  margin-left: 0.2em;
  opacity: 0.7;
}
.selected-attachments .sel-remove:hover { opacity: 1; }

/* Compact scrolling marquee indicator pinned to the underside of the header (inside .global-meta), on the right side.
   Width stays compact/narrow (like previous small version). Height larger via bigger font + padding (user: "font needed to be larger" for height).
   Matches the font-size/style of the left-side meta text ("open opportunities · 2 open tasks ...") which is 0.8rem.
   More amber colors, starts with emoji (set in JS). */
.crm-header-marquee {
  margin-left: auto; /* push to the right side of the global-meta flex row */
  font-size: 0.9rem; /* larger than the old 9.5px tiny version, to give more height/visibility while matching surrounding meta text size */
  line-height: 1.25;
  color: #713f12;
  background: #fef08c;
  border: 1px solid #b45309;
  border-radius: 3px;
  padding: 2px 6px;
  max-width: 480px; /* doubled width, nothing else changed */
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.2);
  flex-shrink: 0;
}
.crm-header-marquee span {
  display: inline-block;
  min-width: 100%;
  animation: crm-marquee 8s linear infinite;
  padding-left: 0;
}
@keyframes crm-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.crm-header-marquee.hidden {
  display: none !important;
}

.crm-crash-banner {
  margin-left: auto;
  font-size: 0.75rem;
  line-height: 1.3;
  background: #f59e0b;
  color: #1f2937; /* dark text, readable on amber in both light and dark mode */
  border: 1px solid #b45309;
  border-radius: 3px;
  padding: 2px 6px;
  max-width: 320px;
  white-space: normal;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-collapse-tile {
  flex-shrink: 0;
}

.tile-collapsed-hint,
.feed-collapsed-hint {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  margin: 0.5rem 0;
  padding: 0.35rem 0.5rem;
  list-style: none;
}

.feed-collapsed-hint {
  padding: 0.65rem 0.85rem;
}

/* Daily focus quote */
.daily-focus {
  font-family: var(--font);
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50vw;
  min-width: 0;
  flex-shrink: 1;
}

.daily-focus-quote {
  color: var(--text);
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.daily-focus-author {
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  font-family: var(--font);
  letter-spacing: normal;
  white-space: nowrap;
  flex-shrink: 0;
}

.daily-focus-refresh {
  font-size: 0.75rem;
  font-family: var(--font);
  font-style: normal;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.05rem 0.2rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}

.daily-focus-refresh:hover {
  background: var(--surface-2);
  color: var(--text);
}

.daily-focus-refresh:focus {
  outline: none;
  background: var(--surface-2);
}

/* Dashboard tile grid — 4 columns; double height spans 2 rows */
/* grid-auto-flow: dense backfills holes with later tiles (tight masonry-like
   packing). It is safe now because resize commits ONCE on pointerup (single
   re-pack) and SortableJS animates sibling movement — the old jumpiness came
   from live mousemove commits + fallback clone + transform transitions
   (ISSUE-013), not from dense itself. */
.dashboard-tiles {
  --tile-row-height: 400px;
  max-width: 1820px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  gap: 1.25rem;
  position: relative; /* anchor for .tile-resize-ghost */
}

/* .panel is a legacy full-width top-panel class reused on feed/tasks/presence
   tiles. As a GRID TILE, `margin: 0 auto` shrinks + horizontally centers the
   tile inside its grid area (dead strips on both sides) and margin-bottom adds
   extra vertical space. Kill both so tiles stretch to fill their cells. */
.dashboard-tile.panel {
  margin: 0;
  max-width: none;
}

.dashboard-tile {
  grid-column: span 4;
  min-width: 0;
  min-height: var(--tile-row-height);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: visible;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  /* No transform transition / will-change here — animating transform on every
     tile makes grid reflows look like jumping and wastes GPU (ISSUE-013). */
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-tile:hover {
  border-color: var(--accent-soft, rgba(109, 75, 255, 0.3));
  box-shadow: 0 4px 16px rgba(109, 75, 255, 0.12);
}

.dashboard-tile.tile-half {
  grid-column: span 2;
}

.dashboard-tile.tile-three {
  grid-column: span 3;
}

.dashboard-tile.tile-quarter {
  grid-column: span 1;
}

.dashboard-tile.tile-double {
  grid-row: span 2;
}
.dashboard-tile.tile-triple {
  grid-row: span 3;
}
.dashboard-tile.tile-quad {
  grid-row: span 4;
}
.dashboard-tile.tile-double .feed-list,
.dashboard-tile.tile-double .tasks-by-user,
.dashboard-tile.tile-triple .feed-list,
.dashboard-tile.tile-triple .tasks-by-user,
.dashboard-tile.tile-quad .feed-list,
.dashboard-tile.tile-quad .tasks-by-user {
  max-height: none;
  flex: 1;
  min-height: 0;
}

.dashboard-tile.tile-body-collapsed {
  min-height: 0;
  height: auto;
  grid-row: auto;
  align-self: start;
}

.dashboard-tile.tile-body-collapsed.tile-double {
  grid-row: auto;
}

.dashboard-tile > .tile-body-content {
  display: grid;
  grid-template-rows: auto;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
  max-height: 2000px;
  flex: 1;
  min-width: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.dashboard-tile.tile-body-collapsed > .tile-body-content {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.dashboard-tile > .tile-body-content > * {
  min-height: 0;
  min-width: 0;
}

.dashboard-tile.tile-body-collapsed > *:not(.tile-toolbar):not(.group-tile-bar):not(.tile-body-content):not(.tile-resize-handle) {
  display: none !important;
}

.dashboard-tile.dragging {
  opacity: 0.55;
  border-color: var(--accent);
}

.dashboard-tile.drag-over {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.tile-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  cursor: grab;
  user-select: none;
  /* Anchor for absolute-positioned children (e.g. .template-dropdown)
     so they land under the toolbar instead of the nearest positioned
     ancestor (the tile), where they'd be hidden behind the columns. */
  position: relative;
}

.tile-toolbar:active {
  cursor: grabbing;
}

.tile-drag-hint {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  padding: 0.15rem 0.4rem 0.15rem 0.1rem;
  flex-shrink: 0;
  cursor: grab;
  border-radius: 2px;
}
.tile-drag-hint:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.035);
}

.tile-drag-hint.hidden {
  display: none;
}

.tile-toolbar-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.tile-toolbar-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  margin-left: 0.15rem;
  flex-shrink: 0;
}

.group-tile-bar {
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.group-tile-name-display {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.3rem 0.25rem;
  border-radius: 4px;
  cursor: text;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 22rem;
}

.group-tile-name-display:hover {
  background: rgba(255, 255, 255, 0.04);
}

.group-tile-name-input {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  flex: 0 0 auto;
  min-width: 4ch;
  max-width: 100%;
}

.group-tile-name-input:focus {
  box-shadow: 0 0 0 2px rgba(109, 75, 255, 0.2);
}

.group-tile-count {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.group-tile-count-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.tile-toolbar-tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 auto;
  min-width: 0;
  position: relative; /* anchor for dropdowns like template/accent inside tools */
}

.tile-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* ── Toolbar adaptive layout via container queries ─────────────────────────
   The tile is a container (container-type: inline-size), so @container
   queries respond to the tile's ACTUAL rendered width — no hardcoded
   .tile-quarter / .tile-half / @media breakpoints needed.

   Rules:
   - Actions (minimize/close) ALWAYS far right via margin-left:auto.
   - When the tile is narrow (< ~550px), formatting + tools wrap to row 2.
   - When wide, everything rides the title row automatically.
────────────────────────────────────────────────────────────────────────── */

/* Narrow: formatting drops to row 2 */
@container (max-width: 550px) {
  .notes-quick-format-group {
    order: 10;
    flex-basis: 100%;
  }
  /* Group tiles: deal count + filter summary drop to row 2 on narrow tiles.
     Filter toggle and template buttons stay on row 1 with the title. */
  .board-group-tile .group-tile-count-summary {
    order: 10;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
  }
  /* Generic tiles: tools row 2 */
  .tile-toolbar-tools {
    order: 10;
    flex-basis: 100%;
  }
  /* Team/Tasks tiles: keep status dropdown + user selector on the title row
     even on narrow/mobile widths; they are compact enough not to obstruct. */
  .dashboard-tile.presence-panel .tile-toolbar-tools,
  .dashboard-tile.tasks-panel .tile-toolbar-tools {
    order: 0;
    flex-basis: auto;
  }
}

.tile-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 0.5rem;
}

.tile-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.tile-menu-trigger {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  font-weight: 500;
}

.tile-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 9.5rem;
  padding: 0.25rem 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.tile-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
}

.tile-menu-item:hover,
.tile-menu-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.tile-menu-item--danger {
  color: var(--danger, #c45c5c);
}

.tile-layout-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: auto;
}

/* In quarter (narrow) view for tiles (esp. tasks tile in top panel row), make the
   toolbar button groupings tighter so they stay in a single row without bunching
   or adding extra height/row to the title bar. Reduced gaps + paddings + force
   nowrap on layout sub-group. */
.dashboard-tile.tile-quarter .tile-toolbar {
  gap: 0.15rem;
  padding: 0.25rem 0.4rem;
}
.dashboard-tile.tile-quarter .tile-layout-btns {
  gap: 0.1rem;
  flex-wrap: nowrap;
  margin-left: 0.15rem;
}
.dashboard-tile.tile-quarter .tile-btn-icon {
  padding: 0.1rem 0.2rem;
}
.dashboard-tile.tile-quarter .btn-tasks-list {
  padding: 0.1rem 0.2rem;
}
.dashboard-tile.tile-quarter .tile-toolbar .btn-new-task {
  padding: 0.15rem 0.3rem;
  font-size: 0.65rem;
}
.dashboard-tile.tile-quarter .tile-btn {
  font-size: 0.65rem;
  padding: 0.15rem 0.3rem;
}
.dashboard-tile.tile-quarter .tasks-tab {
  font-size: 0.65rem;
  padding: 0.1rem 0.3rem;
}

.tile-btn {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.tile-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.tile-btn-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.dashboard-tile.feed-panel,
.dashboard-tile.tasks-panel,
.dashboard-tile.presence-panel {
  display: flex;
  flex-direction: column;
  min-height: var(--tile-row-height);
  max-height: var(--tile-row-height);
  height: auto;
}

/* Double-height panels: fill the 2-row grid area. !important so these beat the
   generic `min-height: 0 !important` on multi-row tiles below (specificity wins
   when both are important), otherwise a short tasks list collapses the tile and
   leaves blank space inside its spanned grid rows. */
.dashboard-tile.tile-double.feed-panel,
.dashboard-tile.tile-double.tasks-panel,
.dashboard-tile.tile-double.presence-panel {
  min-height: calc(var(--tile-row-height) * 2 + 1.25rem) !important;
  max-height: calc(var(--tile-row-height) * 2 + 1.25rem);
}
.dashboard-tile.tile-triple.feed-panel,
.dashboard-tile.tile-triple.tasks-panel,
.dashboard-tile.tile-triple.presence-panel {
  min-height: calc(var(--tile-row-height) * 3 + 2.5rem) !important;
  max-height: calc(var(--tile-row-height) * 3 + 2.5rem);
}
.dashboard-tile.tile-quad.feed-panel,
.dashboard-tile.tile-quad.tasks-panel,
.dashboard-tile.tile-quad.presence-panel {
  min-height: calc(var(--tile-row-height) * 4 + 3.75rem) !important;
  max-height: calc(var(--tile-row-height) * 4 + 3.75rem);
}

/* Multi-row tiles: override panel/board-group min-height so tiles stretch to fill grid area */
.dashboard-tile.tile-double,
.dashboard-tile.tile-triple,
.dashboard-tile.tile-quad {
  min-height: 0 !important;
  height: auto;
  max-height: none;
}

/* Board-group multi-row: cap height to match grid area */
.dashboard-tile.tile-double.board-group-tile {
  max-height: calc(var(--tile-row-height) * 2 + 1.25rem);
}
.dashboard-tile.tile-triple.board-group-tile {
  max-height: calc(var(--tile-row-height) * 3 + 2.5rem);
}
.dashboard-tile.tile-quad.board-group-tile {
  max-height: calc(var(--tile-row-height) * 4 + 3.75rem);
}

.dashboard-tile.tile-double.presence-panel .presence-tile-body,
.dashboard-tile.tile-triple.presence-panel .presence-tile-body,
.dashboard-tile.tile-quad.presence-panel .presence-tile-body {
  max-height: none;
  flex: 1;
}

.dashboard-tile.presence-panel .tile-toolbar,
.dashboard-tile.tasks-panel .tile-toolbar {
  flex-wrap: nowrap;
}
/* Presence tile: hide title, tabs go first */
.dashboard-tile.presence-panel .tile-toolbar .tile-toolbar-title {
  display: none;
}
.dashboard-tile.presence-panel .tile-toolbar .tile-toolbar-count {
  display: none;
}

/* Hide empty toolbar-tools div so it doesn't push action buttons to row 2 */
.dashboard-tile .tile-toolbar-tools:empty {
  display: none;
}

/* Team tile body fills available height with scroll constraint */
.dashboard-tile.presence-panel .presence-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.presence-list-compact {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.dashboard-tile.feed-panel .panel-header,
.dashboard-tile.tasks-panel .panel-header,
.dashboard-tile.presence-panel .panel-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.65rem 1rem 0;
  margin-bottom: 0.5rem;
  min-height: auto;
}

.panel-header-feed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.panel-header-feed .feed-keyword-filter {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin-left: 0;
}

/* Panel tiles: override .tile-body-content grid → flex column so
   the content child (feed-list / tasks-by-user) can flex:1 to fill
   the tile without empty space below. */
.dashboard-tile.feed-panel > .tile-body-content,
.dashboard-tile.tasks-panel > .tile-body-content,
.dashboard-tile.presence-panel > .tile-body-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Presence panel: constrain height so entries list scrolls instead of expanding tile */
.dashboard-tile.presence-panel > .tile-body-content {
  max-height: var(--tile-row-height);
}
.dashboard-tile.presence-panel.tile-double > .tile-body-content {
  max-height: calc(var(--tile-row-height) * 2 + 1.25rem);
}
.dashboard-tile.presence-panel.tile-triple > .tile-body-content {
  max-height: calc(var(--tile-row-height) * 3 + 2.5rem);
}
.dashboard-tile.presence-panel.tile-quad > .tile-body-content {
  max-height: calc(var(--tile-row-height) * 4 + 3.75rem);
}

.dashboard-tile.feed-panel .feed-list {
  list-style: none;
  margin: 0 1rem 1rem;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
}

.dashboard-tile.tasks-panel .tasks-by-user {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
}

.dashboard-tile.feed-panel .feed-list {
  /* flex:1 + overflow-y:auto fills tile and scrolls when needed */
}

.dashboard-tile .tasks-by-user .board-loading {
  padding: 0.65rem 0.85rem;
  margin: 0;
}

.dashboard-tile.board-group-tile .board-group-header {
  border-top: none;
}

/* Board-group-tiles: clip board overflow so unbounded column growth
   doesn't push the tile past its max-height. Also clips children to the
   tile's border-radius, eliminating square-corner "spikey" artifacts. */
.dashboard-tile.board-group-tile {
  overflow: hidden;
  max-height: var(--tile-row-height);
}

.dashboard-tile.tile-double.board-group-tile {
  max-height: calc(var(--tile-row-height) * 2 + 1.25rem);
}

/* All board-group-tiles: board scrolls vertically when columns overflow.
   The tile itself is capped at --tile-row-height via max-height on .board-group-tile.
   padding-bottom keeps the horizontal scrollbar above the tile's rounded
   bottom corners so overflow:hidden doesn't clip it. */
.dashboard-tile.board-group-tile .board {
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 1rem;
}

/* Local kanban: deal-level kanban tile.
   The base `.column-body { max-height: 100% }` rule (set above on the
   shared .column-body class) provides the per-column vertical scroll
   that scales with the tile height. We do NOT cap the tile height here
   — the tile is whatever height it needs (including user-resized). The
   board's vertical scroll is disabled (`overflow-y: hidden`) so the
   column-body is the only vertical scroller. The board's horizontal
   scroll is kept (`overflow-x: auto`) for columns off-screen. */
.dashboard-tile.local-kanban-tile {
  overflow: hidden; /* clip the column-body to the tile border if needed */
}
.dashboard-tile.local-kanban-tile .local-kanban-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.dashboard-tile.local-kanban-tile .board {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1rem;
}
.dashboard-tile.local-kanban-tile.tile-double .board {
  padding-bottom: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Main page-wide kanban (the .board-group-tile in renderBoardGroups, one
   per project group). Inherits the same per-column vertical scroll as
   the deal-level kanban via the base `.column-body { max-height: 100%;
   overflow-y: auto }` rule. We don't cap the tile height here — the
   main kanban is dynamic and resizes with the tile. The board's vertical
   scroll is explicitly disabled so the column-body is the only vertical
   scroller. */
.dashboard-tile.board-group-tile:not(.personal-notes-tile) {
  overflow: hidden;
}
.dashboard-tile.board-group-tile:not(.personal-notes-tile) .board {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Top panels */
.panel {
  max-width: 1820px;
  margin: 0 auto 1.25rem;
  padding: 0 1rem;
}

.panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.35rem 1rem;
  margin-bottom: 0.65rem;
}

.panel-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.panel-sub {
  font-size: 0.8rem;
  color: var(--muted);
}

.btn-tile-remove {
  flex-shrink: 0;
  margin-left: 0.15rem;
  color: #e5484d;
}

.btn-tile-remove:hover {
  color: #ff6b6b;
  background: rgba(229, 72, 77, 0.12);
}

.btn-tile-remove .tile-remove-icon {
  stroke: currentColor;
}

.tasks-by-user {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tabs + quick-add live above the list inside the tasks tile */
/* Tabs now live in the tile title bar as a compact segmented control. */
.tasks-tabs {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.15rem;
  flex-shrink: 0;
}

.tasks-tab {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tasks-tab:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}

.tasks-tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(79, 140, 255, 0.35);
}

.tasks-tab-count {
  display: inline-block;
  min-width: 1.05rem;
  margin-left: 0.15rem;
  padding: 0.02rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-3, rgba(128, 128, 128, 0.15));
  vertical-align: middle;
}

.tasks-tab.active .tasks-tab-count {
  color: var(--accent);
  background: rgba(79, 140, 255, 0.15);
}

.tasks-quick-add {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.tasks-quick-add input {
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}

.tasks-quick-add input::placeholder {
  color: var(--muted);
}

.tasks-list {
  display: flex;
  flex-direction: column;
}

/* Two-column (Todo + Project Tasks) layout toggle. Appears when the tasks tile
   is half-width or wider (not quarter). */
.tasks-columns-btn {
  display: none;
}
.dashboard-tile.tasks-panel:not(.tile-quarter) .tasks-columns-btn {
  display: inline-flex;
}
.tasks-columns-btn.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(79, 140, 255, 0.35);
}

/* Two-column view: hidden by default; shown when the tile is half-width or
   wider with the toggle on. The single (tab) view hides at the same time. */
.tasks-columns {
  display: none;
}
.dashboard-tile.tasks-panel:not(.tile-quarter).tasks-columns-on .tasks-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.6rem;
  align-items: start;
  min-height: 0;
}
.dashboard-tile.tasks-panel:not(.tile-quarter).tasks-columns-on .tasks-single-view {
  display: none;
}

.tasks-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.tasks-column-head {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.tasks-column .tasks-list {
  min-height: 0;
}
.tasks-column .board-loading {
  padding: 0.65rem 0.85rem;
  margin: 0;
}
.tasks-column .task-row {
  padding-right: 0.45rem;
  padding-left: 0.45rem;
}

/* Dense task rows: divider lines instead of bordered cards. */
.task-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.task-row:hover {
  background: var(--surface-2);
}

.task-row:last-of-type {
  border-bottom: none;
}

.task-row.done {
  opacity: 0.55;
}

.task-row--overdue {
  background: rgba(240, 180, 41, 0.06);
  box-shadow: inset 3px 0 0 var(--warn);
}

.task-row--ghost {
  opacity: 0.4;
  background: var(--surface-2);
}

/* Task row hover tooltip — floats above the row, pointer-events enabled so it
   can be hovered without disappearing. 200ms show-delay prevents flicker when
   moving between rows; instant hide avoids stale tooltips. */
.task-tooltip {
  position: fixed;
  z-index: 200;
  pointer-events: auto;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
}
.task-tooltip-desc {
  margin-bottom: 0.35rem;
  white-space: normal;
  word-break: break-word;
}
.task-tooltip-due,
.task-tooltip-repeat {
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 0.1rem;
}
.task-tooltip-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.3rem 0;
}
.task-tooltip-items {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.task-tooltip-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.74rem;
}
.task-tooltip-more {
  font-style: italic;
}
.task-tooltip-project {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--border);
}

.task-drag-handle {
  color: var(--muted);
  cursor: grab;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.1rem;
  user-select: none;
  flex-shrink: 0;
}

.task-drag-handle:active {
  cursor: grabbing;
}

.task-complete-cb {
  cursor: pointer;
  flex-shrink: 0;
}

.task-pin-btn {
  display: none;
  padding: 0.1rem;
  flex-shrink: 0;
}

.task-row:hover .task-pin-btn {
  display: inline-flex;
}

.task-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.task-row-chips {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

.task-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}

.task-chip--overdue {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(240, 113, 120, 0.1);
}

.task-chip--today {
  color: var(--warn);
  border-color: var(--warn);
  background: rgba(240, 180, 41, 0.1);
}

.task-chip-label {
  color: var(--accent);
  border-color: rgba(79, 140, 255, 0.4);
  background: rgba(79, 140, 255, 0.08);
}

.task-chip-project {
  cursor: pointer;
  color: var(--accent);
  border-color: rgba(79, 140, 255, 0.4);
}

.task-chip-project:hover {
  text-decoration: underline;
}
/* The linked project name on a task row. The full name is already
   available in the `title` tooltip on hover, so capping + ellipsis
   here is non-destructive — it just gives the task title its
   horizontal space back on long project names. */
.task-chip-project-text {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@container (max-width: 400px) {
  .task-chip-project-text { display: none; }
  .task-chip-project { padding: 0.15rem 0.35rem; }
}
@media (max-width: 600px) {
  .task-chip-project-text { display: none; }
  .task-chip-project { padding: 0.15rem 0.35rem; }
}

/* Task preview/edit modal */
.task-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

@media (max-width: 520px) {
  .task-edit-grid {
    grid-template-columns: 1fr;
  }
}

.task-edit-project-chip {
  cursor: pointer;
}

.task-edit-project-none {
  font-size: 0.8rem;
  color: var(--muted);
}

.task-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.task-item-text {
  flex: 1;
  font-size: 0.85rem;
  min-width: 0;
}

.task-item-text.done {
  text-decoration: line-through;
  color: var(--muted);
}

.task-item-del {
  color: var(--muted);
  padding: 0.1rem 0.3rem;
}

.task-item-del:hover {
  color: var(--danger);
}

.task-item-add-row {
  margin-top: 0.25rem;
}

.task-item-add-row input {
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}

.task-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.btn-toast-action {
  margin-left: 0.75rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  color: var(--accent);
  border-color: rgba(79, 140, 255, 0.5);
  flex-shrink: 0;
}

.confetti-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--confetti-color);
  pointer-events: none;
  z-index: 10000;
  animation: confetti-burst 0.8s ease-out forwards;
}

@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--confetti-dx), var(--confetti-dy)) rotate(360deg);
    opacity: 0;
  }
}

/* High Priority tag highlight on opportunity cards */
.card--high-priority {
  background: rgba(240, 180, 41, 0.08);
  border-color: var(--warn);
  border-left: 4px solid var(--warn);
}

.tasks-list-row label a:first-of-type {
  color: #d4942b;
  text-decoration: none;
  font-weight: 500;
}
.tasks-list-row label a:hover {
  text-decoration: underline;
}

.group-filter-summary {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.btn-tasks-list {
  font-size: 0.9rem;
  padding: 0.28rem 0.35rem;
  min-width: auto;
  margin-right: 2px;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-tasks-list:hover {
  opacity: 1;
}
.btn-tasks-list svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}
/* Note: tasks archive button now lives in toolbar (moved left of New task); header only has user filter label */

.tasks-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.tasks-list-filter {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text);
}

.tasks-list-body {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem;
  background: var(--surface);
  color: inherit;
}

.tasks-list-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  background: var(--surface);
  margin-bottom: 2px;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.tasks-list-row:last-child {
  border-bottom: none;
}
.tasks-list-row:hover {
  background: var(--surface-2, #e9ecef);
}
.tasks-list-row.done {
  opacity: 0.75;
  text-decoration: line-through;
  background: var(--surface);
}
.tasks-list-row label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: inherit;
  font-size: 0.85rem;
}
.tasks-list-row input[type="checkbox"] {
  accent-color: var(--accent, #0d6efd);
}
.tasks-list-row .feed-meta {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.template-delete-list {
  max-height: 40vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0.5rem 0;
}
.template-delete-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.template-delete-row:last-child {
  border-bottom: none;
}
.template-delete-name {
  flex: 1;
}
.btn-delete-tpl {
  color: var(--danger);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
}

/* Collapsible tag multiselect (matches select height/style) */
.multiselect {
  position: relative;
  min-width: 160px;
}

.multiselect-trigger {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.875rem;
  padding: 0.5rem 2rem 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b95a8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

.multiselect-trigger:hover {
  border-color: var(--muted);
}

.multiselect-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  max-width: 280px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0.35rem;
}

.multiselect-panel label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.multiselect-panel label:hover {
  background: var(--accent-soft);
}

.checkbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  width: auto;
  min-width: 0;
}

.checkbox-filter input {
  accent-color: var(--accent);
}

.group-filters .field.field-checkbox {
  min-width: 0;
  flex: 0 1 auto;
  align-self: flex-end;
  padding-bottom: 0.35rem;
}

.card-title-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.card-title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.dashboard-tile.board-group-tile.board-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.board-group {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.board-group-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  overflow-y: auto;
}

.board-group.filters-collapsed .board-group-header {
  display: none;
}

.board-group.filters-collapsed .group-tile-bar .group-filter-summary-compact {
  display: inline;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-tile-bar .group-filter-summary-compact {
  display: none;
  font-size: 0.72rem;
  color: var(--muted);
}

/* Collapsed group tiles: hide filter summary so toolbar height is uniform. */
.dashboard-tile.board-group-tile.tile-body-collapsed .group-filter-summary-compact {
  display: none !important;
}

.group-filters-panel {
  margin-top: 0.35rem;
}

.btn-toggle-filters {
  flex-shrink: 0;
}

.board-group-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.board-group-title-row input[type="text"] {
  flex: 1;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
}

.board-group-title-row input[type="text"]:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.board-group-count {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Local kanban controls row (now just the +status / +task buttons, since the board name is in the tile toolbar title bar above). */
.local-kanban-header {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0;
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--border);
}

.btn-danger:hover {
  border-color: var(--danger);
}

.btn-success {
  background: transparent;
  color: var(--success);
  border: 1px solid var(--border);
}

.btn-success:hover {
  border-color: var(--success);
}

.group-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-start;
}

.group-filters .field {
  min-width: 120px;
}



.contact-field {
  position: relative;
  min-width: 200px;
}

.contact-field input[type="search"] {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.contact-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.contact-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.contact-results button:hover {
  background: var(--accent-soft);
}

.contact-selected {
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: 0.25rem;
}

.contact-clear {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

.preview-contact-picker {
  position: relative;
}

.preview-contact-search {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

.board-group .board {
  padding: 1rem 1.25rem;
  max-width: none;
  margin: 0;
}

.column-empty .column-body {
  min-height: 72px;
  border: 1px dashed var(--border);
  margin: 0.65rem;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .dashboard-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-tile {
    grid-column: span 2;
  }
  .dashboard-tile.tile-half {
    grid-column: span 2;
  }
  .dashboard-tile.tile-three {
    grid-column: span 2;
  }
  .dashboard-tile.tile-quarter {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  .dashboard-tiles {
    grid-template-columns: 1fr;
  }

  .dashboard-tile,
  .dashboard-tile.tile-half,
  .dashboard-tile.tile-three,
  .dashboard-tile.tile-quarter {
    grid-column: 1 / -1;
  }
}

/* Confirm modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

/* Confirm dialog must stack above all other modals */
#confirm-modal {
  z-index: 2100;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}

/* Make the Team/Presence popup resizable (user can drag bottom-right corner to see more messages) */
#presence-modal .modal-card {
  width: min(624px, 96vw);
  height: min(80vh, 80dvh);
  min-height: 500px;
  resize: both;
  overflow: hidden;
  min-width: 408px;
  max-width: 90vw;
  max-height: 85vh;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
}
#presence-modal .modal-card > * {
  flex-shrink: 0;
}
#presence-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#presence-modal .modal-header,
#presence-modal .presence-header,
#presence-modal .presence-tabs,
#presence-modal .modal-actions {
  flex-shrink: 0;
}

/* Team modal responsive */
@media (max-width: 768px) {
  #presence-modal .modal-card {
    width: 95vw;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  #presence-modal { padding: 0; }
  #presence-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
  }
}

.modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.modal-header .modal-title {
  margin: 0;
}

.modal-message {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-card-form {
  width: min(480px, 92vw);
  max-height: min(90vh, 720px);
  overflow-y: auto;
}

.modal-form .field {
  margin-bottom: 0.85rem;
}

#quick-note-form .field {
  margin-bottom: 0.5rem;
}

.modal-form .field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.modal-form .field input:not([type="checkbox"]),
.modal-form .field select,
.modal-form .field textarea,
.modal-form .field .note-editor {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
}

.modal-form .field textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.modal-form .field .note-editor {
  resize: vertical;
  min-height: 4.5rem;
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  outline: none;
}

.note-format-toolbar {
  display: flex;
  gap: 0.2rem;
  margin: 0.1rem 0 0.2rem;
  flex-wrap: wrap;
}

.note-format-btn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-width: 1.35em;
  text-align: center;
  user-select: none;
}
.note-format-btn:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.note-format-btn:active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.note-format-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0.15rem 0.2rem;
}

/* Single light-green highlighter button swatch (subtle so it doesn't look like the bright applied highlight) */
.note-format-btn[data-cmd="hiliteColor"] { background: #c8e6c9; color: #222; border-color: #81c784; }
.note-format-btn[data-cmd="hiliteColor"]:hover { filter: brightness(0.95); }

/* Text color button with colored bar indicator */
.note-format-color-btn { position: relative; }
.note-format-color-bar {
  display: block;
  width: 14px;
  height: 3px;
  background: #ef5350;
  border-radius: 1px;
  margin: 1px auto 0;
}

/* Native date input for backdating notes - show the browser's default pulldown UI */
.note-backdate-input {
  font-size: 0.78rem;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  width: auto;
  max-width: 138px;
  min-width: 108px;
}

.note-backdate-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.note-backdate-btn {
  background: none;
  border: 1px solid var(--border);
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.note-backdate-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.note-backdate-btn svg {
  width: 14px;
  height: 14px;
}
.note-backdate-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.note-editor {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.note-editor:focus {
  border-color: var(--accent);
}

.note-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  font-style: italic;
  pointer-events: none;
  display: block;
}

/* Rich text (bold/italic/underline) + highlight from quick event notes / deal-edit event notes
   must render visibly in the preview deal modal history (and while editing in the modals).
   Use <mark> for highlight + the notes-tile low-opacity light-green tint so it doesn't wash out text. */
.opp-preview-history-body strong,
.opp-preview-history-body b,
.opp-preview-history-body--html strong,
.opp-preview-history-body--html b,
.note-editor strong,
.note-editor b {
  font-weight: 700;
}
.opp-preview-history-body em,
.opp-preview-history-body i,
.opp-preview-history-body--html em,
.opp-preview-history-body--html i,
.note-editor em,
.note-editor i {
  font-style: italic;
}
.opp-preview-history-body u,
.opp-preview-history-body--html u,
.note-editor u {
  text-decoration: underline;
}

/* Light green highlight (more green, much lower opacity for readability, copied from notes-tile mark fix).
   !important to override inline styles from execCommand hiliteColor.
   Targets both <mark> (if produced) and spans. */
.note-editor mark,
.note-editor span[style*="background-color"] {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Preview modal history highlights need a darker tint and dark text so they are
   readable on the modal's dark background. This applies to the main preview modal,
   bookmark preview, and search popup preview since they all reuse .opp-preview-history-body.
   CRM rich-text notes use <b> tags with inline background-color for highlights, so we
   target mark, span, and b with both background-color and background shorthand. */
.opp-preview-history-body mark,
.opp-preview-history-body span[style*="background-color"],
.opp-preview-history-body span[style*="background:"],
.opp-preview-history-body b[style*="background-color"],
.opp-preview-history-body b[style*="background:"],
.opp-preview-history-body--html mark,
.opp-preview-history-body--html span[style*="background-color"],
.opp-preview-history-body--html span[style*="background:"],
.opp-preview-history-body--html b[style*="background-color"],
.opp-preview-history-body--html b[style*="background:"],
.opp-preview-history-body--plain mark,
.opp-preview-history-body--plain span[style*="background-color"],
.opp-preview-history-body--plain span[style*="background:"],
.opp-preview-history-body--plain b[style*="background-color"],
.opp-preview-history-body--plain b[style*="background:"],
.opp-preview-note-detail mark,
.opp-preview-note-detail span[style*="background-color"],
.opp-preview-note-detail span[style*="background:"],
.opp-preview-note-detail b[style*="background-color"],
.opp-preview-note-detail b[style*="background:"] {
  background-color: rgba(34, 197, 94, 0.3) !important;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.modal-checkbox {
  margin: 0.25rem 0 0.85rem;
}

.modal-error {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--danger);
}

.modal-card-deal-edit {
  max-width: 28rem;
  padding: 0.75rem 1rem;
  resize: both;
  overflow: hidden;
  min-width: 400px;
  max-width: 96vw;
  min-height: 550px;
  height: min(700px, 85vh);
  max-height: 92vh;
}

.modal-card-deal-edit.modal-card-form {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.modal-card-deal-edit .modal-form {
  /* Audit: the form is the scroll container. Previously set to
     `flex: none; overflow-y: visible` which meant that on the
     bookmark / preview side-by-side layout with many custom fields,
     the form content overflowed the card and got clipped (no scroll).
     Now the form grows to fill remaining space and scrolls when
     its contents exceed the card's max-height. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.modal-card-deal-edit .modal-actions {
  flex-shrink: 0;
  background: var(--surface);
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
}

.modal-card-deal-edit .note-editor {
  resize: none;
}

.deal-edit-user-fields-bar {
  margin: 0.5rem 0 0.25rem;
  display: none;
}

.deal-edit-user-fields {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--surface-2);
  overflow-y: auto;
}
.deal-edit-user-fields .field {
  margin-bottom: 0.5rem;
}
.deal-edit-user-fields .field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}
.deal-edit-user-fields .field input,
.deal-edit-user-fields .field select,
.deal-edit-user-fields .field textarea {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}
.deal-edit-user-fields .checkbox-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.deal-edit-user-fields .checkbox-filter input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
}

/* Deal edit modal mobile: full screen */
.deal-edit-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  resize: none !important;
}
.deal-edit-fullscreen .deal-edit-user-fields {
  max-height: none;
}

.modal-card-deal-edit .modal-actions {
  z-index: 2;
}

.modal-card-create-opp {
  width: min(520px, 94vw);
  max-height: min(92vh, 800px);
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  padding: 0.6rem 0.85rem;
  resize: both;
  min-width: 400px;
  max-width: 96vw;
  min-height: 400px;
}
.create-opp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem 0.2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.create-opp-header .modal-title {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 1.1rem;
}

.modal-card-create-opp .modal-form {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 0.5rem;
}

.create-opp-legend {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 0.25rem;
}

.create-opp-field-heading {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

.field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.create-opp-user-fields-unavailable {
  margin: 0.35rem 0 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: var(--surface);
  cursor: help;
}

.create-opp-custom-fields .field {
  margin-bottom: 0.75rem;
}

.create-opp-custom-fields .checkbox-filter {
  margin: 0;
}

/* ===================== Presence / Team (header button, modal, pinned tile) ===================== */

#presence-btn {
  position: relative;
}

#presence-btn.has-waiting-messages::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border: 1px solid #fff;
  border-radius: 50%;
  animation: presence-wait-flash 1s infinite;
  pointer-events: none;
}

/* Self-online indicator on the presence icon (green dot). 
   Now the bottom-right green counter (small circle for 1 online, with number if >1) is the .presence-online-badge span.
   The ::before is suppressed in JS when the counter badge is shown to avoid double/big green visuals. */
#presence-btn.is-online::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  background: #22c55e;
  border: 1px solid var(--bg, #111);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

@keyframes presence-wait-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.presence-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border: 1px solid var(--surface);
  pointer-events: none;
}

.presence-badge.hidden {
  display: none;
}


.presence-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.presence-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.presence-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
}
.presence-tab:hover {
  color: var(--text);
}
.presence-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.presence-my-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.presence-my-status .btn {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
}

.presence-my-status textarea {
  width: 100%;
  max-width: 320px;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
}

.presence-status-select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.presence-section-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0.25rem 0.5rem 0.1rem;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.presence-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0.5rem;
}

/* Recent messages (inbox) section in the Team modal — gives visibility to past/new DMs + clear */
#presence-recent {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 0.5rem;
  max-height: 140px;
  overflow: auto;
}
.presence-recent-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 1rem; /* larger for inbox on Messages tab (twice as prominent) */
}
.presence-recent-row:last-child {
  border-bottom: none;
}
.presence-recent-row:hover {
  background: var(--surface-2);
}

/* Unread vs read shading in the Messages inbox recent list.
   Unread = more prominent (darker surface + blue accent border for "new").
   Read = lighter/muted (faded, less emphasis).
   This makes it easy to see which threads have unread messages.
   The demo message will be shaded as unread until you click it in the session. */
.presence-recent-row.unread {
  background: var(--surface-2);
  border-left: 4px solid #3b82f6; /* blue accent to clearly mark unread/new */
  font-weight: 500;
}
.presence-recent-row.unread::after {
  content: "●";
  color: #3b82f6;
  font-size: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.presence-recent-row.read {
  opacity: 0.65;
}
.presence-recent-row.read .presence-recent-who,
.presence-recent-row.read .presence-recent-snip,
.presence-recent-row.read .presence-recent-time {
  color: var(--muted);
}
.presence-recent-who {
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presence-recent-snip {
  color: var(--muted);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
.presence-recent-time {
  color: var(--muted);
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-right: 0.1rem;
}
.presence-clear-btn {
  font-size: 0.85rem !important;
  padding: 0 0.25rem !important;
  line-height: 1 !important;
  opacity: 0.7;
}
.presence-clear-btn:hover {
  opacity: 1;
  background: rgba(239,68,68,0.15);
}

.presence-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 0.5rem;
}

.presence-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.presence-user:last-child {
  border-bottom: none;
}
.presence-user:hover {
  background: var(--surface-2);
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.presence-dot.online {
  background: #22c55e;
  animation: presence-dot-breathe 2.2s ease-in-out infinite;
}
.presence-dot.idle {
  background: #f59e0b;
}
.presence-dot.offline {
  background: #475569;
}
.presence-dot.afd {
  background: #64748b;
}
@keyframes presence-dot-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 60%, transparent);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 6px 2px color-mix(in srgb, #22c55e 55%, transparent);
    opacity: 1;
  }
}

.presence-name {
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-status {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: auto;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.presence-dm {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}

.presence-dm-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.presence-dm-log {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem; /* larger for viewing more messages at once */
  min-height: 260px;   /* ensure the chat history area is tall even if parent constrained */
}

.presence-msg {
  max-width: 80%;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.presence-msg.me {
  align-self: flex-end;
  background: var(--accent-soft);
  color: var(--text);
}

.presence-dm-input {
  display: grid;
  grid-template-areas:
    "text buttons"
    "picker .";
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  position: relative;
}
.presence-dm-input textarea {
  grid-area: text;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
  min-height: 2.2em;
}
.presence-dm-input-buttons {
  grid-area: buttons;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.presence-admin {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.8rem;
}
.presence-admin-header {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.presence-admin-list .presence-admin-row {
  padding: 0.2rem 0;
  border-top: 1px solid var(--border);
}
.presence-admin-list .presence-admin-row:first-child {
  border-top: none;
}

.presence-admin-list .presence-admin-row .admin-label {
  color: var(--muted);
  font-size: 0.72rem;
}

/* DM rich features: replies, read receipts, emoji picker, colors */
.presence-reply-context {
  font-size: 0.7em;
  line-height: 1.2;
  color: var(--muted);
  border-left: 2px solid var(--border);
  padding-left: 0.35rem;
  margin-bottom: 0.2rem;
  opacity: 0.85;
  font-style: italic;
}
.presence-reply-context .presence-reply-label {
  font-weight: 600;
  font-style: normal;
}
.presence-reply-preview {
  font-size: 0.72rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
}
.presence-reply-preview span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presence-reply-preview button {
  font-size: 0.7rem;
  padding: 0 0.2rem;
}
.presence-read-receipt {
  font-size: 0.6em;
  color: #22c55e;
  margin-top: 0.1rem;
  align-self: flex-end;
}

.presence-msg-status {
  font-size: 0.6em;
  margin-top: 0.1rem;
  align-self: flex-end;
}

.presence-msg-time {
  font-size: 0.6em;
  color: var(--muted);
  margin-top: 0.15rem;
  opacity: 0.75;
  line-height: 1;
  text-align: right;
}
.presence-msg:not(.me) .presence-msg-time {
  text-align: left;
}

/* ---------- DM pagination ---------- */
.presence-dm-load-more {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  margin-bottom: 8px;
  transition: background 0.15s, color 0.15s;
}
.presence-dm-load-more:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
.presence-dm-load-more:disabled { opacity: 0.4; cursor: not-allowed; }

/* CRM Mail Inbox modal styles — override .modal-card width */
#mail-inbox-modal {
  padding: 0.5rem;
}
#mail-inbox-modal .mail-inbox-card {
  width: min(1400px, 96vw);
  max-width: min(1600px, 96vw);
  height: min(85vh, 85dvh);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  resize: both;
  min-width: 560px;
  min-height: 420px;
}
/* Mail pagination */
.mail-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--muted);
  position: sticky;
  bottom: 0;
  background: var(--surface);
  z-index: 1;
}
.mail-page-info { white-space: nowrap; }
.mail-inbox-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mail-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.mail-account-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.mail-account-select {
  min-width: 180px;
}
.mail-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .mail-toolbar {
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
  }
  .mail-toolbar .btn-small {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
  }
  .mail-search {
    flex: 1 1 100%;
    max-width: none;
    order: -1;
  }
}
.mail-inbox-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  flex-shrink: 0;
}
.mail-inbox-tab {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  margin-right: -1px;
}
.mail-inbox-tab:hover {
  color: var(--text);
  background: var(--bg-elevated);
}
.mail-inbox-tab.active {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--border);
  border-bottom: 2px solid var(--surface);
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.mail-inbox-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mail-tab-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--tab-color, var(--accent)) 35%, transparent);
  color: var(--tab-color, var(--accent));
}
.mail-tab-avatar .ti {
  font-size: 0.8rem;
  line-height: 1;
}
.mail-tab-cog {
  display: inline-flex;
  align-items: center;
  margin-left: 0.15rem;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}
.mail-tab-cog .ti {
  font-size: 0.85rem;
}
.mail-inbox-tab:hover .mail-tab-cog,
.mail-tab-cog:hover {
  opacity: 1;
  color: var(--text);
}
@media (max-width: 600px) {
  .mail-inbox-tab .mail-tab-label {
    display: none;
  }
  .mail-inbox-tab {
    padding: 0.4rem 0.5rem;
    gap: 0.2rem;
  }
  .mail-tab-cog {
    margin-left: 0;
  }
}
.mail-tab-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 0.3rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
}
.mail-tab-badge:empty {
  display: none;
}
.acct-icon-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.acct-icon-pick:hover {
  border-color: var(--accent);
  color: var(--text);
}
.acct-icon-pick.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-elevated);
}
.acct-icon-pick .ti {
  font-size: 1rem;
}
.acct-color-pick {
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.15s;
}
.acct-color-pick:hover {
  transform: scale(1.12);
}
.acct-color-pick.selected {
  border-color: var(--text);
  transform: scale(1.12);
}
.mail-folder-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}
.mail-folder-btn:hover {
  background: var(--bg-elevated);
}
.mail-folder-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 500;
}
.mail-folder-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
}
.mail-folder-badge:empty {
  display: none;
}
.mail-tag-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 4px;
}
.mail-tag-item:hover {
  background: var(--bg-elevated);
}
.mail-tag-item.active {
  background: var(--accent-subtle);
  color: var(--accent);
}
.mail-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mail-link-deal-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 0.5rem;
  z-index: 100;
}
.mail-link-deal-dropdown input {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.mail-link-deal-results {
  max-height: 200px;
  overflow-y: auto;
}
.mail-link-deal-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.3rem 0.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
  border-radius: 3px;
}
.mail-link-deal-results button:hover {
  background: var(--bg-elevated);
}
.mail-link-deal-results button.selected {
  background: var(--accent-subtle);
  color: var(--accent);
}
@media (max-width: 600px) {
  .mail-link-deal-dropdown {
    right: 0;
    top: 100%;
    bottom: auto;
    width: 250px;
    margin-top: 4px;
  }
}
#mail-tag-dropdown {
  left: auto;
  right: 0;
  width: auto;
  min-width: 160px;
}
.mail-search {
  flex: 1;
  max-width: 300px;
}
.mail-main-area {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.mail-main-area.mail-main-column {
  flex-direction: column;
}
.mail-list-container {
  flex: 3;
  overflow: auto;
  border-right: 1px solid var(--border);
  padding: 0.5rem;
  container-type: inline-size;
}
.mail-list {
  width: 100%;
}
.mail-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 0.9rem;
}
.mail-row:hover {
  background: #f8f9fa;
}
.mail-row.selected {
  background: #e6f0ff;
}
.mail-from,
.mail-subject {
  color: #aaa; /* less bright grey for readability in dark */
}
.mail-row-read .mail-from,
.mail-row-read .mail-subject {
  color: #777; /* even darker for read emails */
}
.mail-row input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.mail-from {
  width: 160px;
  min-width: 80px;
  flex-shrink: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #aaa;
}
.mail-subject {
  flex: 1;
  min-width: 0;
  color: #aaa;
  font-weight: 600;
}
.mail-subject-text {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-row-tags {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  align-items: center;
}
.mail-tag-badge-inline {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.6rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}
.mail-date {
  width: auto;
  min-width: 105px;
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
  color: var(--muted);
  font-size: 0.8rem;
}
.mail-sidebar-toggle {
  flex: 0 0 auto;
  align-self: stretch;
  width: 18px;
  min-width: 18px;
  padding: 0;
  border: none;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  user-select: none;
}
.mail-sidebar-toggle:hover {
  background: var(--hover);
  color: var(--text);
}
.mail-right-sidebar {
  flex: 0 0 auto;
  width: 210px;
  min-width: 210px;
  max-width: 230px;
  padding: 0.5rem;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  overflow: auto;
  font-size: 0.75rem;
  color: var(--text);
  transition: width 0.15s, min-width 0.15s, padding 0.15s;
}
.mail-right-sidebar.mail-viewer-warning {
  background: var(--surface-2);
  border-left: 3px solid var(--warn);
}
.mail-right-sidebar.hidden {
  display: none;
}
.mail-right-sidebar.mail-sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-left: none;
}
.scanner-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  max-width: 100%;
  overflow: hidden;
}
.scanner-admin-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
@media (max-width: 900px) {
  .scanner-admin-grid {
    grid-template-columns: 1fr;
  }
}
/* Desktop: overflow + folder button hidden */
.mail-toolbar .toolbar-overflow-btn { display: none; }
.mail-toolbar .mail-search-icon { display: none; }

@media (max-width: 600px) {
  /* Settings gear hidden on mobile — accessible via overflow menu instead */
  #mail-account-settings-btn { display: none; }
  /* --- Fix 4: Compact inline layout for mail rows --- */
  .mail-row.mail-header { display: none; }
  .mail-row {
    gap: 0.2rem 0.4rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.82rem;
  }
  .mail-from {
    width: 110px;
    min-width: 60px;
    flex-shrink: 1;
    font-size: 0.82rem;
  }
  .mail-row .mail-subject {
    flex: 1 1 100%;
    min-width: 0;
    order: 10;
    font-size: 0.85rem;
  }
  .mail-row .mail-snippet { display: none; }
  .mail-row .mail-date {
    order: 4;
    width: auto;
    min-width: auto;
    margin-left: auto;
    font-size: 0.75rem;
  }
  .mail-star { order: -1; }
  .mail-row .mail-row-tags { order: 3; }
  .mail-row .mail-expand-btn {
    order: 5;
    margin-left: 0;
    min-width: auto;
    width: 22px;
    height: 22px;
    padding: 0;
  }

  /* --- Fix 3: Larger touch targets for action buttons --- */
  .opp-preview-mail-foot {
    gap: 0.25rem;
    padding: 0.1rem 0;
  }
  .opp-preview-mail-foot .btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    min-width: auto;
    min-height: auto;
  }
  .opp-preview-mail-foot .btn .btn-label { display: none; }
  .opp-preview-mail-foot .btn i { font-size: 1.1rem; }

  /* --- Fix 6: Toolbar overflow menu --- */
  .mail-toolbar .toolbar-overflow-btn { display: flex; }
  .mail-toolbar .toolbar-secondary { display: none; }
  .toolbar-overflow-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    padding: 0.25rem 0;
    min-width: 140px;
  }
  .toolbar-overflow-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
  }
  .toolbar-overflow-dropdown button:hover {
    background: var(--hover);
  }

  /* --- Fix 7: Collapsible search --- */
  .mail-search-icon { display: flex; }
  .mail-search {
    position: absolute;
    left: 0; top: 0; right: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10;
    flex: none;
    max-width: none;
  }
  .mail-search.expanded {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Mobile sidebar: starts collapsed, expandable via toggle --- */
  .mail-right-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-left: none;
  }
  .mail-right-sidebar:not(.mail-sidebar-collapsed) {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 200px !important;
    padding: 0.5rem !important;
    overflow: auto;
    border-left: 1px solid var(--border);
  }

  /* --- Fix 5: Full-screen overlay base (JS creates it) --- */
  .mail-header { font-size: 0.78rem; }
}

/* Mobile email overlay — base styles */
.mail-mobile-email-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Desktop: hide overlay */
@media (min-width: 601px) {
  .mail-mobile-email-overlay { display: none !important; }
}
#mail-contact-context-menu button:hover {
  background: var(--hover);
}
.mail-contact-item {
  padding: 3px 0.4rem;
  cursor: pointer;
  border-radius: 4px;
}
.mail-contact-item:hover {
  background: var(--hover);
}
.mail-contact-name {
  font-size: 0.78rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-contact-email {
  font-size: 0.68rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-contacts-toggle[aria-expanded="true"] .ti-chevron-right {
  transform: rotate(90deg);
}
.mail-contacts-list {
  transition: max-height 0.25s ease;
}
.mail-contacts-list.expanded {
  max-height: none !important;
  overflow-y: visible;
}
.scanner-log {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  background: #0d1117;
  color: #c9d1d9;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #21262d;
}
.scanner-log:empty::before {
  content: '$ tail -f scanner.log';
  color: #484f58;
}
.scanner-log .log-entry .log-ts {
  color: #484f58;
}
.scanner-log .log-entry.log-processed .log-status {
  color: #3fb950;
}
.scanner-log .log-entry.log-error .log-status {
  color: #f85149;
}
.scanner-log .log-entry.log-skipped .log-status {
  color: #d29922;
}
.scanner-log .log-entry.log-rule .log-status {
  color: #a371f7;
}
.scanner-log .log-entry.log-feedback-pending {
  border-left: 3px solid #d29922;
  padding-left: 0.3rem;
  margin-bottom: 0.15rem;
  background: rgba(210, 153, 34, 0.05);
  white-space: normal;
  word-break: break-all;
}
/* Log entry — two-column grid: checkbox left, message right */
.scanner-log .log-entry {
  display: grid;
  grid-template-columns: 1rem 1fr;
  column-gap: 0.4rem;
  align-items: start;
  padding: 1px 0;
}
.scanner-log .log-entry .log-cb {
  margin: 0;
  align-self: start;
}
.scanner-log .log-entry .log-msg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}
@media (max-width: 600px) {
  .scanner-log {
    font-size: 0.7rem;
  }
}
.mail-viewer-warning-content {
  position: relative;
}
.mail-warning-dismiss {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 4px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.mail-warning-dismiss:hover {
  color: var(--text);
}
.mail-viewer-warning-content h4 {
  color: var(--warn);
  font-size: 0.85rem;
  margin: 0 0 .25rem 0;
}
.mail-viewer-warning-content p,
.mail-viewer-warning-content ul {
  margin: 0.15rem 0;
  line-height: 1.2;
}
.mail-viewer-warning-content ul {
  padding-left: 1rem;
}
.mail-viewer-warning-content li {
  margin-bottom: 0.1rem;
}
.mail-viewer-warning-content p.small {
  font-size: 0.65rem;
  color: var(--muted);
}
.mail-deal-search {
  width: 100%;
  margin-bottom: 0.5rem;
}
.mail-deal-results {
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.mail-deal-result {
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.mail-deal-result:hover {
  background: #f0f8ff;
}
.mail-deal-result.selected {
  background: #d0e8ff;
  font-weight: 500;
}
.mail-link-btn {
  width: 100%;
}
.mail-selected-info {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #555;
}

#mail-inbox-btn {
  position: relative;
}

.mail-today-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* Dark mode / theme fixes for mail modal (use CSS vars, avoid hard light colors) */
.mail-inbox-card select,
.mail-inbox-card input[type="search"],
.mail-deal-search {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.mail-row {
  border-bottom-color: var(--border);
}
.mail-row:hover {
  background: var(--surface-2);
}
.mail-row.selected {
  background: var(--accent-soft);
}
.mail-deal-result {
  border-bottom-color: var(--border);
}
.mail-deal-result:hover {
  background: var(--surface-2);
}
.mail-deal-result.selected {
  background: var(--accent-soft);
}

/* Additional for link field and readability */
.mail-deal-results button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 1px;
}
.mail-deal-results button.selected {
  background: var(--accent-soft);
  font-weight: 500;
}
.mail-subject {
  color: #d0d0d0; /* muted brightness for dark bg, following other tiles' secondary text */
  font-weight: 600;
}
.mail-row {
  font-size: 0.92rem;
  line-height: 1.35;
}
.mail-from {
  color: var(--text);
  font-weight: 500;
}

.mail-item {
  border-bottom: 1px solid var(--border);
}
.mail-detail {
  width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin: 0.1rem 0 0.3rem;
  font-size: 0.9rem;
}
.mail-expand-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  order: 8;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}
.mail-detail .opp-preview-mail-header,
.mail-detail .opp-preview-mail-body,
.mail-detail .opp-preview-mail-embed,
.mail-detail .opp-preview-mail-text,
.mail-detail .opp-preview-mail-iframe {
  background: #24272e;
  color: var(--text);
  border-color: var(--border);
}
.mail-detail .opp-preview-mail-text {
  color: #222;
  background: transparent;
}
/* Compact reply buttons in the expanded mail-list view (mail-detail embed foot) */
.mail-detail .opp-preview-mail-foot {
  padding: 0;
}
.mail-detail .opp-preview-mail-foot .btn {
  padding: 0.15rem 0.4rem;
  min-width: auto;
  min-height: auto;
  font-size: 0.8rem;
}
  /* reuse some preview styles but scope for readability */
  font-size: 0.85rem;
}
/* Dark mode contrast adjustments for mail components */
.mail-folder-btn { color: var(--text); opacity: 0.85; }
.mail-folder-btn:hover { opacity: 1; }
.mail-folder-btn.active { opacity: 1; }
.mail-tag-item { color: var(--text); opacity: 0.85; }
.mail-tag-item:hover { opacity: 1; }
.mail-inbox-tab { color: var(--muted); }
.mail-inbox-tab:hover { color: var(--text); opacity: 0.9; }
.mail-inbox-tab.active { color: var(--accent); opacity: 1; }
.mail-link-deal-dropdown input { background: var(--bg); color: var(--text); border-color: var(--border); }
.mail-link-deal-dropdown button { color: var(--text); }
.mail-link-deal-dropdown button:hover { background: var(--bg-elevated); }
.mail-link-deal-dropdown button.selected { background: var(--accent-subtle); color: var(--accent); }
#compose-body { background: var(--bg); color: var(--text); }
.mail-toolbar .btn-ghost { color: var(--text); opacity: 0.8; }
.mail-toolbar .btn-ghost:hover { opacity: 1; }
.mail-toolbar .btn-ghost:disabled { opacity: 0.4; }
.mail-toolbar .btn-ghost i { font-size: 1.125rem; }
.mail-toolbar input[type="search"] { background: var(--bg); color: var(--text); border-color: var(--border); }
/* Emoji picker as a floating overlay (used by inline DM) */
.presence-emoji-picker-overlay {
  position: fixed;
  max-height: 180px;
  overflow-y: auto;
  z-index: 99999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  width: auto;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
}

.presence-emoji-picker {
  grid-area: picker;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 0.25rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-width: 100%;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-top: 0;
}
.presence-emoji-btn {
  font-size: 1.1rem;
  padding: 0.15rem;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.presence-emoji-btn:hover {
  background: var(--surface-2);
}

/* Color code: received (others) always green bubble; sent (me) uses the current accent */
.presence-msg {
  background: #22c55e; /* received = green */
  color: #111;
}
.presence-msg.me {
  background: var(--accent-soft); /* sent = current accent */
  color: var(--text);
}
.presence-msg-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.presence-msg-text a {
  color: var(--accent);
  text-decoration: underline;
  word-break: break-all;
}

/* Small button variant used inside the modal */
.btn-small {
  font-size: 0.92rem;
  padding: 0.25rem 0.5rem;
}

/* The pinned presence tile uses normal tile styles + a compact list inside the body */
.presence-tile-body {
  padding: 0.25rem 0.5rem 0.5rem;
  font-size: 0.78rem;
  cursor: default;
}
.presence-tile-body .presence-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.presence-tile-body .presence-user:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}

/* Avatar initials */
.presence-user-avatar {
  width: 31px;
  height: 31px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.9;
  flex-shrink: 0;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.presence-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
/* Icon avatars inside the team list (Tabler icon). The default font-size
   on .presence-user-avatar is set for 2-letter initials (11px); bump the
   icon to fill the 31×31 box more naturally so the icon weight matches
   the visual weight of the bold uppercase initials next to it. */
.presence-user-avatar.user-avatar-icon {
  font-size: 1.05rem;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.presence-user-avatar.user-avatar-icon i {
  color: var(--accent);
  line-height: 1;
}
/* Presence dot on avatar */
.presence-user-avatar .presence-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
}
/* User name */
.presence-user-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
/* Unread DM badge */
.presence-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #3b82f6);
  flex-shrink: 0;
  animation: presence-unread-breathe 2.2s ease-in-out infinite;
}
@keyframes presence-unread-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #3b82f6) 60%, transparent);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 6px 2px color-mix(in srgb, var(--accent, #3b82f6) 55%, transparent);
    opacity: 1;
  }
}
/* Section headers */
.presence-section-header {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.35rem 0.5rem 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Filter input */
.presence-filter-input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-family: var(--font);
  margin-bottom: 0.25rem;
  outline: none;
  transition: border-color 0.15s;
}
.presence-filter-input:focus {
  border-color: var(--accent);
}
.presence-filter-input::placeholder {
  color: var(--muted);
}
/* Manual status: directly right of username, bold */
.presence-manual-status {
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
  margin-left: 0.35rem;
  margin-right: auto;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auto-derived status: keep original styling, no overrides */
.presence-tile-body .presence-status {
  margin-left: auto;
  text-align: right;
}

/* Divider between online and offline users */
.presence-tile-divider {
  border-top: 1px solid var(--border);
  margin: 0.3rem 0;
}

/* Collapsible offline section */
.presence-offline-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.presence-offline-toggle:hover {
  color: var(--text);
}
.presence-offline-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.65rem;
  width: 0.65rem;
}
.presence-offline-toggle.expanded .presence-offline-arrow {
  transform: rotate(90deg);
}
/* Domino expand animation for offline users */
.presence-offline-section.section-just-expanded .presence-user {
  animation: presence-domino-in 0.36s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
}
.presence-offline-section.section-just-expanded .presence-user:nth-child(1) { animation-delay: 0.04s; }
.presence-offline-section.section-just-expanded .presence-user:nth-child(2) { animation-delay: 0.08s; }
.presence-offline-section.section-just-expanded .presence-user:nth-child(3) { animation-delay: 0.12s; }
.presence-offline-section.section-just-expanded .presence-user:nth-child(4) { animation-delay: 0.16s; }
.presence-offline-section.section-just-expanded .presence-user:nth-child(5) { animation-delay: 0.20s; }
.presence-offline-section.section-just-expanded .presence-user:nth-child(6) { animation-delay: 0.24s; }
.presence-offline-section.section-just-expanded .presence-user:nth-child(7) { animation-delay: 0.28s; }
.presence-offline-section.section-just-expanded .presence-user:nth-child(8) { animation-delay: 0.32s; }
@keyframes presence-domino-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Team tile tabs */
.presence-tile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 0.75rem;
  background: var(--surface);
}

/* Inline tabs in tile toolbar — no border, no background, compact padding */
.presence-tile-tabs-inline {
  border-bottom: none;
  padding: 0;
  background: transparent;
  gap: 0;
  flex-shrink: 0;
}
.presence-tile-tabs-inline .presence-tile-tab {
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  border-bottom-width: 1px;
  margin-bottom: 0;
}

.presence-tile-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  font-family: var(--font);
  transition: color 0.15s, border-color 0.15s;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.tab-icon {
  flex-shrink: 0;
}
.tab-label {
  white-space: nowrap;
}
/* Icon-only tabs on narrow screens */
@media (max-width: 768px) {
  .tab-label {
    display: none;
  }
  .presence-tile-tab,
  .presence-tab {
    padding: 0.35rem 0.5rem;
  }
}

.presence-tile-tab:hover {
  color: var(--text);
}

.presence-tile-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.presence-tile-tab .msg-badge {
  background: #3b82f6;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0 0.25rem;
  border-radius: 8px;
  margin-left: 0.2rem;
  min-width: 12px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.online-badge {
  background: #22c55e;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0 0.25rem;
  border-radius: 8px;
  margin-left: 0.2rem;
  min-width: 12px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

/* Messages tab content header with pop-out button */
.presence-tile-messages-header {
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0.5rem;
}

/* All presence bodies (team/messages/dm) constrained uniformly */
.presence-tile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Waiting messages flash on the messages button */
.presence-msg-count-btn.has-waiting-messages {
  position: relative;
}

.presence-msg-count-btn.has-waiting-messages::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border: 1px solid var(--surface);
  border-radius: 50%;
  animation: presence-wait-flash 1s infinite;
  pointer-events: none;
  z-index: 1;
}

/* Team tile toolbar controls */
.dashboard-tile.presence-panel .panel-header.panel-header-presence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.presence-tile-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.presence-status-select-tile {
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.72rem;
  font-family: var(--font);
  cursor: pointer;
  max-width: 140px;
}

.presence-status-select-tile:focus {
  outline: none;
  border-color: var(--accent);
}

/* Icon button replacing the status <select> */
.presence-status-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.presence-status-icon-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,0.06));
  border-color: var(--accent-soft, rgba(109, 75, 255, 0.3));
}
.presence-status-icon-btn svg {
  width: 16px;
  height: 16px;
}
/* Status dot overlay on icon button */
.presence-status-icon-btn .status-dot-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-2);
  pointer-events: none;
}
.presence-status-icon-btn .status-dot-indicator.online { background: #22c55e; }
.presence-status-icon-btn .status-dot-indicator.dnd { background: #ef4444; }
.presence-status-icon-btn .status-dot-indicator.afk { background: #f59e0b; }
.presence-status-icon-btn .status-dot-indicator.custom { background: #8b5cf6; }

/* Floating status dropdown — reuse template-dropdown pattern */
.status-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.35rem 0;
}
.status-dropdown.hidden {
  display: none;
}
.status-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: background 0.1s;
}
.status-dropdown-item:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}
.status-dropdown-item.active {
  background: var(--accent-soft, rgba(109, 75, 255, 0.1));
  color: var(--accent);
}

/* Inline custom status input in tile toolbar */
.presence-custom-wrap {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex: 1 1 auto;
}
.presence-custom-input {
  flex: 1 1 auto;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  font-family: var(--font);
  min-width: 80px;
}
.presence-custom-input:focus {
  outline: none;
  border-color: var(--accent);
}
.presence-custom-ok,
.presence-custom-cancel {
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1;
}
.presence-custom-ok:hover { border-color: #22c55e; color: #22c55e; }
.presence-custom-cancel:hover { border-color: #ef4444; color: #ef4444; }

.presence-msg-count-btn {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.presence-msg-count-btn:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.presence-msg-count-btn .msg-badge {
  background: #3b82f6;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0 0.3rem;
  border-radius: 8px;
  margin-left: 0.25rem;
  min-width: 14px;
  display: inline-block;
  text-align: center;
}

.presence-admin-toggle-tile {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.presence-admin-toggle-tile:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Popup button on right edge of tile */
.presence-popup-btn {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.presence-popup-btn svg {
  width: 16px;
  height: 16px;
}
.presence-popup-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
}

/* Flashing unread indicator in tile toolbar */
.presence-unread-flash {
  color: var(--accent, #3b82f6);
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}
.presence-unread-flash.hidden {
  display: none;
}

/* Online count in toolbar */
.presence-online-count {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Messages tab styles */
.msg-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
  font-size: 0.85rem;
}
.msg-row:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}
.msg-row-unread {
  border-left-color: #3b82f6;
}
.msg-row-unread .msg-name {
  font-weight: 600;
}
.msg-name {
  font-size: 0.85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-preview {
  flex: 1;
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-time {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.msg-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Timesheet tab */
.ts-clock-widget {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ts-timer-display {
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: 0.05em;
}
.ts-clock-btn {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: var(--font);
}
.ts-clock-btn:active {
  transform: scale(0.97);
}
.ts-clock-btn.clock-in {
  background: #22c55e;
  color: #fff;
}
.ts-clock-btn.clock-in:hover {
  background: #16a34a;
}
.ts-clock-btn.clock-out {
  background: #ef4444;
  color: #fff;
}
.ts-clock-btn.clock-out:hover {
  background: #dc2626;
}
.ts-break-btn {
  padding: 0.35rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
}
.ts-break-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,0.06));
}
.ts-break-btn.on-break {
  border-color: #f59e0b;
  color: #f59e0b;
}
/* Date range selector */
.ts-date-range {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.ts-date-range button {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 0.72rem;
  font-family: var(--font);
}
.ts-date-range button:hover {
  background: var(--hover-bg, rgba(255,255,255,0.06));
}
.ts-date-range .ts-date-label {
  font-weight: 600;
  flex: 1;
  text-align: center;
}
/* Entry list */
.ts-entries-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ts-entry-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--border);
}
/* The still-running shift row: subtle highlight + Live badge color. */
.ts-entry-row-active {
  background: rgba(34, 197, 94, 0.06);
}
.ts-entry-live-dot {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--success, #22c55e);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  white-space: nowrap;
}
.ts-entry-times {
  color: var(--text);
}
.ts-entry-duration {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ts-entry-edit-btn {
  padding: 0.15rem 0.3rem;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}
.ts-entry-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.ts-entry-edit-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,0.06));
  color: var(--text);
}
/* Footer bar (total + export) */
.ts-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--border);
  min-height: 32px;
}
.ts-daily-total {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.ts-export-btns {
  display: flex;
  gap: 0.35rem;
}
.ts-export-wrap {
  position: relative;
}
.ts-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
}
.ts-export-btn svg {
  width: 16px;
  height: 16px;
}
.ts-export-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,0.06));
}
.ts-export-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  z-index: 50;
  min-width: 200px;
}
.ts-export-dropdown.hidden {
  display: none;
}
.ts-export-dropdown label {
  font-size: 0.72rem;
  color: var(--muted);
}
.ts-export-dropdown-date {
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.72rem;
  font-family: var(--font);
  max-width: 130px;
}
.ts-export-dropdown-date:focus {
  outline: none;
  border-color: var(--accent);
}
.ts-export-go {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-family: var(--font);
  cursor: pointer;
  margin-left: 0.25rem;
  transition: opacity 0.15s;
}
.ts-export-go:hover {
  opacity: 0.85;
}
/* Admin summary table */
.ts-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.ts-admin-table th,
.ts-admin-table td {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  text-align: left;
}
.ts-admin-table th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 0.72rem;
}

/* Open Shifts (admin) table — slightly larger than the summary tables
   because the action buttons need room. */
.ts-admin-shifts-table th,
.ts-admin-shifts-table td {
  vertical-align: middle;
}
.ts-admin-shifts-table tr:hover {
  background: var(--surface-2);
}
.ts-admin-shifts-table .btn-sm {
  padding: 0.2rem 0.5rem;
  font-size: 0.74rem;
  margin-left: 0.25rem;
}
.ts-entry-project {
  font-size: 0.72rem;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}
.ts-clock-indicator {
  font-size: 0.7rem;
  margin-left: auto;
  opacity: 0.7;
}
.ts-admin-toggle {
  cursor: pointer;
  user-select: none;
}
.ts-admin-toggle .presence-offline-arrow {
  display: inline-block;
  margin-right: 0.25rem;
  transition: transform 0.15s;
}
.ts-admin-toggle.expanded .presence-offline-arrow {
  transform: rotate(0deg);
}
.ts-project-select {
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-family: var(--font);
  margin-top: 0.25rem;
}
/* Timesheet empty state */
.ts-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Inline DM inside the tile */
#presence-tile-dm-inline {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.presence-dm-inline-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.presence-dm-inline-back {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  font-family: var(--font);
}

.presence-dm-inline-back:hover {
  color: var(--text);
}

.presence-dm-inline-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-dm-inline-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.presence-dm-inline-log .presence-msg {
  margin-bottom: 0.35rem;
}

.presence-dm-inline-input {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.presence-dm-inline-field {
  flex: 1 1 auto;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-family: var(--font);
}

.presence-dm-inline-field:focus {
  outline: none;
  border-color: var(--accent);
}

.presence-dm-inline-buttons {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
}

.presence-emoji-inline-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  line-height: 1;
}
.presence-emoji-inline-btn:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

.presence-dm-inline-send {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.presence-dm-inline-send:hover {
  border-color: var(--accent);
  background: var(--surface);
}

/* DM popup modal */
.modal-card-dm-popup {
  width: min(560px, 94vw);
  max-height: 85vh;
  min-height: 450px;
  display: flex;
  flex-direction: column;
}

/* Larger DM popup for pop-out from messages inbox */
.modal-card-dm-popup.dm-popup-large,
.dm-popup-large .modal-card-dm-popup {
  width: min(720px, 96vw);
  max-height: 92vh;
  min-height: 600px;
}

#dm-popup-modal.dm-popup-large .modal-card-dm-popup {
  width: min(720px, 96vw);
  max-height: 92vh;
  min-height: 600px;
}

.dm-popup-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dm-popup-header .modal-title {
  flex: 1;
  font-size: 0.95rem;
}

.dm-popup-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-popup-input {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.dm-popup-input textarea {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
  resize: vertical;
  min-height: 2.5rem;
}

.dm-popup-input textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Messages inbox popup modal */
.modal-card-messages-popup {
  width: min(640px, 94vw);
  max-height: 90vh;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.messages-popup-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.messages-popup-header .modal-title {
  flex: 1;
}

.messages-popup-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 1rem;
}

.messages-popup-list .presence-recent-row {
  cursor: pointer;
}

.deal-edit-modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.deal-edit-modal-head .modal-title {
  margin: 0;
}

.deal-edit-crm-link {
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.deal-edit-crm-link:hover {
  text-decoration: underline;
}

.deal-edit-title-field {
  margin-bottom: 0.5rem;
}

.deal-edit-title-input {
  display: block;
  width: 100%;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.25rem 0;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}

.deal-edit-title-input:focus {
  border-bottom-color: var(--accent);
}

.deal-edit-title-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.modal-card-opp-preview {
  width: min(720px, 96vw);
  height: min(80vh, 800px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  min-width: 420px;
  max-width: 96vw;
  min-height: 400px;
}

/* Project preview modal mobile: full-screen, no corner resize */
@media (max-width: 600px) {
  #opp-preview-modal {
    padding: 0;
  }
  #opp-preview-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  .opp-preview-field {
    flex-direction: column;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
  }
  .opp-preview-fields {
    gap: 0.4rem 0.75rem;
  }
}

/* Changelog modal */
.modal-card-changelog {
  width: min(720px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.changelog-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}

.changelog-version {
  font-size: 0.85rem;
  color: var(--muted);
  font-family: var(--font);
  font-weight: 500;
}

.changelog-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.55;
}

.changelog-body .notes-md-h1,
.changelog-body .notes-md-h2,
.changelog-body .notes-md-h3 {
  margin: 0.5rem 0 0.35rem;
  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
}

.changelog-body .notes-md-h1 { font-size: 1.1rem; }
.changelog-body .notes-md-h2 { font-size: 0.95rem; }
.changelog-body .notes-md-h3 { font-size: 0.85rem; }

.changelog-body p {
  margin: 0.35rem 0;
  color: var(--text);
}

.changelog-body ul,
.changelog-body ol {
  margin: 0.35rem 0;
  padding-left: 1.25rem;
}

.changelog-body li {
  margin: 0.2rem 0;
}

.changelog-body a {
  color: var(--accent);
  text-decoration: underline;
}

.changelog-body code {
  background: rgba(255,255,255,0.08);
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  font-size: 0.78rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.changelog-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.5rem 0;
}

.modal-card-changelog .modal-actions {
  padding-top: 0.75rem;
  justify-content: flex-end;
}

/* Changelog modal: fill the screen on narrow viewports so the close button
   is always reachable (matches the mobile full-screen pattern used by
   photo-report / invoice-generator / coc-generator modals). */
@media (max-width: 720px) {
  #changelog-modal {
    padding: 0;
  }
  .modal-card-changelog {
    width: 100vw;
    max-width: 100vw;
    /* Reset the desktop min-width: 720px — otherwise the card is forced to
       720px wide on narrow viewports and overflows the right edge. */
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 1rem;
    margin: 0;
  }
}

.opp-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}

.opp-preview-head .modal-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  word-break: break-word;
}

.opp-preview-head-actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.opp-preview-edit-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.opp-preview-edit-btn:hover,
.opp-preview-edit-btn:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}

.opp-preview-bookmark-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.opp-preview-bookmark-btn:hover,
.opp-preview-bookmark-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
  outline: none;
}

.opp-preview-bookmark-btn.bookmarked {
  color: var(--accent);
  border-color: var(--accent);
}

.opp-preview-bookmark-btn.bookmarked:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.opp-preview-bookmark-btn .bookmark-ribbon-icon {
  width: 14px;
  height: 14px;
}

.opp-preview-open-crm {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}

.opp-preview-open-crm:hover,
.opp-preview-open-crm:focus {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.opp-preview-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.opp-preview-loading,
.opp-preview-error {
  padding: 1rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.opp-preview-error {
  color: var(--danger, #c44);
}

.opp-preview-section {
  margin-bottom: 1.15rem;
}

.opp-preview-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.opp-preview-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.25rem 0.75rem;
  margin-bottom: -1px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.opp-preview-tab-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.opp-preview-task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.opp-preview-task-row:last-child {
  border-bottom: none;
}
.opp-preview-task-row.done {
  opacity: 0.55;
}
.opp-preview-task-row.done .opp-preview-task-title {
  text-decoration: line-through;
}
.opp-preview-task-check {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.opp-preview-task-info {
  flex: 1;
  min-width: 0;
}
.opp-preview-task-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}
.opp-preview-task-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-preview-task-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}
.opp-preview-tasks-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.opp-preview-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.opp-preview-tab:hover:not(.active) {
  color: var(--text);
}

.opp-preview-section:last-child {
  margin-bottom: 0;
}

.opp-preview-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.opp-preview-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.opp-preview-section-head .opp-preview-section-title {
  margin: 0;
}
.opp-preview-section-edit {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}
.opp-preview-section-edit:hover {
  color: var(--text);
  background: var(--surface-2);
}

.opp-preview-section-body {
  /* wraps section content */
}

.opp-preview-desc-edit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.5rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  min-height: 3.5rem;
}
.opp-preview-desc-edit:focus {
  outline: none;
  border-color: var(--accent);
}
.opp-preview-desc-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.opp-preview-field.opp-preview-field-chk {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.25rem;
  margin: 0.1rem 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  min-width: 0;
}
.opp-preview-field-chk-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  padding: 0.1rem 0;
  margin-right: 1rem;
}
.opp-preview-fields-chk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  margin-top: 0.3rem;
}
.opp-preview-field.opp-preview-field-chk .opp-preview-chk-yes,
.opp-preview-field-chk-inline .opp-preview-chk-yes {
  color: var(--success, #22c55e);
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.opp-preview-field.opp-preview-field-chk .opp-preview-chk-no,
.opp-preview-field-chk-inline .opp-preview-chk-no {
  color: var(--muted);
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
/* Audit: the checkbox / square icons inside these spans are full-size
   Tabler SVGs (24x24). Scale them to match the field-row font
   height (1.1em so they sit slightly above the baseline for visual
   prominence). Audit 2026-10-14: bumped from 0.95em to 1.1em — the
   user said the previous size was way too small. */
.opp-preview-chk-yes svg,
.opp-preview-chk-no svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.field-value-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  line-height: 1.4;
  width: fit-content;
}

.field-value-tag.tag-amber {
  color: var(--warn);
  border-color: var(--warn);
  background: rgba(240, 180, 41, 0.12);
}

.opp-preview-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.opp-preview-field {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.84rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.opp-preview-field dt {
  margin: 0;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.opp-preview-field dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
  min-width: 0;
}

.opp-preview-field-full {
  grid-column: 1 / -1;
}

.opp-preview-field-overdue {
  border-color: rgba(220, 38, 38, 0.8);
  background: rgba(220, 38, 38, 0.15);
}

/* Collapsible field groups in preview modal */
.opp-preview-field-group {
  margin-bottom: 0.5rem;
}
.opp-preview-field-group-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.3rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.opp-preview-field-group-chevron {
  font-size: 0.55rem;
  color: var(--muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.opp-preview-field-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.opp-preview-field-group-head:hover .opp-preview-field-group-label {
  color: var(--text);
}
.opp-preview-field-group-body {
  padding-top: 0.2rem;
}

/* Inline project-fields edit mode in preview modal */
.opp-preview-fields-edit {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.opp-preview-fields-edit-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 0.75rem;
}

.opp-preview-fields-edit-row > label {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

.opp-preview-fields-edit-control input,
.opp-preview-fields-edit-control select,
.opp-preview-fields-edit-control textarea {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

.opp-preview-fields-edit-control input:focus,
.opp-preview-fields-edit-control select:focus,
.opp-preview-fields-edit-control textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.opp-preview-fields-edit-legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.opp-preview-fields-edit-custom .field {
  margin-bottom: 0.5rem;
}

.opp-preview-fields-edit-custom .field label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.opp-preview-fields-edit-custom .field input,
.opp-preview-fields-edit-custom .field select,
.opp-preview-fields-edit-custom .field textarea {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

.opp-preview-fields-edit-custom .checkbox-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.opp-preview-fields-edit .checkbox-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  width: 100%;
}
.opp-preview-fields-edit .checkbox-filter input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}

.opp-preview-fields-edit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.opp-preview-fields-edit-actions .btn-small {
  padding: 0.35rem 0.6rem;
}

@media (max-width: 600px) {
  .opp-preview-fields-edit-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .opp-preview-fields-edit-row > label {
    text-align: left;
  }
}

.opp-preview-description {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.opp-preview-history {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.opp-preview-history-item {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.opp-preview-history-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.opp-preview-history-main {
  flex: 1;
  min-width: 0;
}

.opp-preview-history-attachments {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  max-width: 42%;
  text-align: right;
}

.opp-preview-attachment-link {
  font-size: 0.68rem;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
  word-break: break-all;
  max-width: 11rem;
}

.opp-preview-attachment-link:hover,
.opp-preview-attachment-link:focus {
  color: inherit;
  text-decoration: underline;
  outline: none;
}

/* Embedded audio player — wraps an audio file's filename link + a native
   <audio controls> element below it. Used both inside note bodies (inline)
   and the structured attachments aside (stacked). */
.opp-preview-audio-player {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  margin: 0.2rem 0;
  max-width: 100%;
}
.opp-preview-audio-player--stacked {
  align-items: flex-end;
  width: 100%;
}
.opp-preview-audio-player--inline {
  align-items: flex-start;
  width: 100%;
}
.opp-preview-audio-player .opp-preview-attachment-link {
  max-width: none;
  font-size: 0.78rem;
}
.opp-preview-audio-player-el {
  width: 100%;
  max-width: 18rem;
  height: 32px;
  display: block;
}
@media (max-width: 480px) {
  .opp-preview-audio-player-el {
    max-width: 100%;
  }
}

.opp-preview-history-item:last-child {
  border-bottom: none;
}

.opp-preview-history-item--customer-update {
  border-left: 3px solid #f97316;
  padding-left: calc(0.75rem - 3px);
}

.opp-preview-history-item--quick-context {
  background: rgba(37, 99, 235, 0.08);
  border-left: 3px solid #2563eb;
  padding-left: calc(0.75rem - 3px);
}
.opp-preview-history-item--quick-context .opp-preview-history-type-icon svg {
  filter: drop-shadow(0 1px 1px rgba(37,99,235,0.35));
}

/* Compact action events (field changes) */
.opp-preview-history-item--action {
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  background: transparent;
  border-left: 2px solid var(--border);
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
}
.opp-preview-history-item--action .opp-preview-history-meta-row {
  margin-bottom: 0;
  gap: 0.2rem;
  flex-shrink: 0;
}
.opp-preview-history-item--action .opp-preview-history-body {
  display: inline;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;
}
.opp-preview-history-item--action .opp-preview-history-row {
  display: inline;
  border: none;
  padding: 0;
}
.opp-preview-history-item--action .opp-preview-history-main {
  display: inline;
}
.opp-preview-history-item--action .opp-preview-history-type-icon {
  margin-top: 0;
}

/* Inline images in note history + editor */
.note-editor img,
.preview-note-editor img {
  max-width: 200px;
  max-height: 150px;
  display: block;
  border-radius: 4px;
  cursor: default;
}
.note-inline-img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
  border: 1px solid var(--border);
  display: block;
}
.note-inline-img:hover {
  transform: scale(1.02);
}
.note-img-pending {
  max-width: 200px;
  max-height: 150px;
  border-radius: 4px;
  border: 1px dashed var(--muted);
  opacity: 0.7;
  display: block;
}

/* Note image lightbox */
.note-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1rem;
}
.note-image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.note-image-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Event note threading */
.opp-preview-history-replies {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.opp-preview-history-reply-btn {
  font: inherit;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  align-self: flex-end;
}
.opp-preview-history-reply-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.opp-preview-history-thread {
  margin-top: 0.3rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--accent);
}
.opp-preview-history-reply-item {
  padding: 0.3rem 0;
  font-size: 0.78rem;
}
.opp-preview-history-reply-item + .opp-preview-history-reply-item {
  border-top: 1px solid var(--border);
}
.opp-preview-history-reply-meta {
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.opp-preview-history-reply-body {
  color: var(--text);
  line-height: 1.4;
}
/* Typography for reply bodies — same baseline as the main history body so bold /
   italic / underline renders visibly (the regular note-body rule targets
   .opp-preview-history-body, which doesn't match reply bodies). */
.opp-preview-history-reply-body strong,
.opp-preview-history-reply-body b {
  font-weight: 700;
}
.opp-preview-history-reply-body em,
.opp-preview-history-reply-body i {
  font-style: italic;
}
.opp-preview-history-reply-body u {
  text-decoration: underline;
}
/* Subtle highlighter for reply bodies (mirrors the rule set at lines
   3268-3291 for the main note body). Audit 2026-10-14: dropped the
   vivid 0.65 opacity + forced #000 text color in both modes — too
   high-contrast. Now a single low-opacity tint with the text color
   inherited from the surrounding content. Works the same in light
   and dark mode. */
.opp-preview-history-reply-body mark,
.opp-preview-history-reply-body span[style*="background-color"],
.opp-preview-history-reply-body span[style*="background:"],
.opp-preview-history-reply-body b[style*="background-color"],
.opp-preview-history-reply-body b[style*="background:"] {
  background-color: rgba(34, 197, 94, 0.3) !important;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.opp-preview-history-reply-body.deleted {
  font-style: italic;
  color: var(--muted);
}
.opp-preview-history-reply-editor {
  margin-top: 0.3rem;
}
/* Reply toolbar — same look as the main preview note toolbar but smaller and
   aligned to the right (mirrors the compact email-compose / quick-note
   toolbars). */
.opp-preview-history-reply-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--surface);
  padding: 0.15rem 0.25rem;
  margin-bottom: 0;
}
.opp-preview-history-reply-toolbar .note-format-btn {
  font-size: 0.78rem;
  padding: 0.15rem 0.35rem;
  min-width: 1.4rem;
}
.opp-preview-history-reply-editor-body {
  position: relative;
}
.opp-preview-history-reply-input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  min-height: 5rem;
  max-height: 240px;
  overflow-y: auto;
}
/* Keep the contenteditable reply editor looking like the previous textarea. */
.opp-preview-history-reply-input:focus {
  outline: none;
  border-color: var(--accent);
}
.opp-preview-history-reply-input:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  font-style: italic;
  pointer-events: none;
}
/* Mention dropdown anchored to the reply editor (same look as the existing
   preview mention-dropdown — the reply dropdown reuses .mention-dropdown). */
.opp-preview-history-reply-mention {
  position: absolute;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  max-height: 180px;
  overflow-y: auto;
  min-width: 160px;
}
/* Per-reply delete button (×) inside the reply meta row — author or admin
   only; the renderer hides it otherwise. Inline with the meta text on the
   right edge. */
.opp-preview-history-reply-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.opp-preview-history-reply-delete {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.opp-preview-history-reply-delete:hover,
.opp-preview-history-reply-delete:focus {
  color: var(--danger, #ef4444);
  background: var(--surface-2);
  outline: none;
}
.opp-preview-history-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.opp-preview-jump-history {
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  margin: 0 0 0.4rem 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.opp-preview-jump-history:hover {
  border-color: var(--accent);
  color: var(--text);
}

.opp-preview-history-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.opp-preview-history-type-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
  color: var(--muted);
  opacity: 0.72;
}

.opp-preview-history-type-icon svg {
  display: block;
}

.opp-preview-history-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.35rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

.opp-preview-history-meta-sep {
  opacity: 0.65;
}

.opp-preview-history-meta-author-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.opp-preview-history-meta-author {
  color: var(--muted);
}

.opp-preview-history-meta-when {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.9;
  white-space: nowrap;
}

.opp-preview-history-delete {
  margin-left: auto;
  font-size: 0.85rem;
  padding: 0 0.15rem;
  line-height: 1;
  color: var(--muted);
  opacity: 0.45;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.opp-preview-history-delete:hover {
  opacity: 1;
  color: #dc2626;
}

.opp-preview-history-body {
  margin: 0;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.opp-preview-mail-summary {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text);
}

.opp-preview-note-toggle {
  margin: 0 0 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.opp-preview-note-toggle:hover,
.opp-preview-note-toggle:focus {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.opp-preview-note-detail[hidden],
.opp-preview-note-detail.hidden {
  display: none !important;
}

.opp-preview-mail-embed[hidden],
.opp-preview-mail-embed.hidden {
  display: none !important;
}

.opp-preview-note-detail.opp-preview-history-body--html {
  max-height: 220px;
  overflow: auto;
  margin-top: 0.25rem;
  padding: 0.35rem 0.45rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
}

.opp-preview-history-body--collapsed-mail .opp-preview-mail-summary {
  color: var(--muted);
}

.opp-preview-history-body--html {
  white-space: normal;
  max-height: 280px;
  overflow: auto;
}

.opp-preview-history-body--html p {
  margin: 0 0 0.45rem;
}

.opp-preview-history-body--html p:last-child {
  margin-bottom: 0;
}

.opp-preview-history-body--html a {
  color: inherit;
}
.opp-preview-body a,
.opp-preview-body a:visited,
.preview-link {
  color: inherit;
}

.opp-preview-history-body--html ul,
.opp-preview-history-body--html ol {
  margin: 0.25rem 0 0.45rem 1.1rem;
  padding: 0;
}

.opp-preview-mail-toggle {
  margin-top: 0.4rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.opp-preview-mail-toggle:hover,
.opp-preview-mail-toggle:focus {
  border-color: var(--accent);
  color: inherit;
  outline: none;
}

.opp-preview-mail-embed {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 0.3rem 0.5rem;
}

/* Expanded linked email in deal preview / bookmark preview spans full history-item width */
.opp-preview-history-item > .opp-preview-mail-embed {
  width: 100%;
  box-sizing: border-box;
}

.opp-preview-history-body--mail-received .opp-preview-mail-summary {
  color: var(--text);
}



.opp-preview-mail-head {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}

.opp-preview-mail-head strong {
  display: block;
  color: var(--text);
  font-size: 0.82rem;
  margin-bottom: 0.15rem;
}

.opp-preview-mail-body {
  width: 100%;
  box-sizing: border-box;
  max-height: min(70vh, 560px);
  overflow: auto;
  border: 1px solid #2a3142;
  border-radius: 6px;
  background: #181b24;
}

.opp-preview-mail-iframe {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  background: #181b24;
}

.opp-preview-mail-text {
  margin: 0;
  padding: 0.65rem;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e8ecf4;
  background: transparent;
}

.opp-preview-mail-foot {
  margin-top: 0.05rem;
  font-size: 0.72rem;
}

.opp-preview-mail-foot a,
.opp-preview-mail-fallback {
  color: inherit;
}

.opp-preview-mail-loading,
.opp-preview-mail-error {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.opp-preview-mail-error {
  color: var(--danger, #b33);
}

.opp-preview-empty {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

/* Phase 2I: Stage dropdown in preview */
.opp-preview-stage-select {
  width: 100%;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.opp-preview-stage-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}

/* Phase 2I: Tags in preview */
.opp-preview-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.opp-preview-tags .field-value-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.opp-preview-tag-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.1rem;
  opacity: 0.5;
}
.opp-preview-tag-remove:hover {
  opacity: 1;
  color: var(--danger, #dc2626);
}
.opp-preview-tag-add-wrap {
  display: inline-flex;
}
.opp-preview-tag-add-wrap .template-dropdown {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 99999;
}
.opp-preview-tag-add {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.opp-preview-tag-add option {
  background: var(--surface);
  color: var(--text);
}
.opp-preview-tag-add:focus {
  outline: none;
  border-color: var(--accent);
}

/* Phase 2I: Checklist 3-column grid */
.opp-preview-fields-3col {
  grid-template-columns: repeat(3, 1fr);
}

.opp-preview-documents {
  list-style: none;
  padding: 0;
  margin: 0;
}
.opp-preview-documents li {
  margin: 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.opp-preview-documents a {
  text-decoration: none;
  color: inherit;
}
.opp-preview-documents a:hover {
  text-decoration: underline;
}

.opp-docs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

/* Match icon-only button sizing in the project modal Documents tab toolbar so
   Upload and the + (Create Document) buttons render at the same dimensions as
   the standalone Documents modal's toolbar. */
.opp-docs-toolbar .btn-icon-only {
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0.35rem;
}

.opp-docs-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.opp-docs-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.opp-docs-actions-select {
  min-width: 7.5rem;
  cursor: pointer;
}

.opp-docs-actions-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.opp-docs-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
}

.opp-preview-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: none;
  overflow-y: auto;
  flex: 1;
}

.opp-preview-doc-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.opp-preview-doc-item:hover {
  background: var(--surface-2);
}

.opp-preview-doc-item.selected {
  background: rgba(59, 130, 246, 0.08);
}

.opp-doc-cb {
  flex-shrink: 0;
  cursor: pointer;
}

.opp-doc-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.opp-doc-title-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.opp-doc-title {
  font-size: 0.85rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.opp-doc-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.opp-doc-meta {
  display: flex;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.opp-doc-size::after {
  content: " · ";
}

.opp-doc-download {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.opp-preview-doc-item:hover .opp-doc-download {
  opacity: 1;
}

/* ── Doc preview pane (right side of Documents tab in opp-preview modal) ── */
.opp-preview-doc-container {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  overflow: hidden;
  gap: 0;
}

.opp-preview-doc-container .opp-preview-docs-list {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 0.5rem 0.5rem 1rem;
  margin: 0;
  list-style: none;
}

.opp-preview-doc-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
  flex-shrink: 0;
  padding: 0;
}

.opp-preview-doc-item:hover .opp-preview-doc-eye,
.opp-preview-doc-eye:focus-visible {
  opacity: 1;
}

.opp-preview-doc-eye:hover {
  background: var(--surface-2, rgba(255,255,255,0.06));
  color: var(--accent, #4f8cff);
}

.opp-preview-doc-pane {
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  border-left: 1px solid var(--border);
  background: var(--surface-2, #1f2330);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width 200ms ease, min-width 200ms ease, border-left-width 200ms ease;
}

.opp-preview-doc-pane-collapsed {
  width: 0;
  min-width: 0;
  border-left-width: 0;
}

.opp-preview-doc-container.preview-open .opp-preview-doc-pane {
  width: min(640px, 55%);
  min-width: 280px;
}

.opp-preview-doc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  flex-shrink: 0;
}

.opp-preview-doc-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--text);
}

.opp-preview-doc-title-row i {
  color: var(--muted);
  font-size: 1rem;
  flex-shrink: 0;
}

#opp-preview-doc-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.opp-preview-doc-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.opp-preview-doc-actions .btn-icon-only {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms;
}

.opp-preview-doc-actions .btn-icon-only:hover:not(:disabled) {
  background: var(--surface-2, rgba(255,255,255,0.06));
}

.opp-preview-doc-actions .btn-icon-only:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.opp-preview-doc-activity {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  min-height: 1.4rem;
  flex-shrink: 0;
  line-height: 1.4;
}
/* Collapse the empty activity row in the project modal preview pane.
   Same intent as .documents-preview-activity:empty — the row's
   min-height + border otherwise show a dark band when no activity
   has been recorded yet. */
.opp-preview-doc-activity:empty {
  display: none;
}

.opp-preview-doc-activity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.opp-preview-doc-activity-avatar {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--accent, #4f8cff);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.opp-preview-doc-activity-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opp-preview-doc-frame-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.opp-preview-doc-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.opp-preview-doc-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
}

.opp-preview-doc-empty i {
  font-size: 2rem;
  opacity: 0.6;
}

.opp-preview-doc-empty p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.opp-preview-doc-empty-hint {
  font-size: 0.75rem !important;
  color: var(--muted) !important;
}

@media (max-width: 720px) {
  /* On narrow screens the preview pane becomes a full-width overlay so it
     doesn't compress the list. The show/hide toggle still works. Mirrors the
     documents-modal mobile pattern. */
  .opp-preview-doc-pane:not(.opp-preview-doc-pane-collapsed) {
    position: absolute;
    inset: 0;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 5;
    background: var(--surface-2, #1f2330);
  }
}

.opp-doc-download:hover {
  background: var(--surface);
  color: var(--text);
}

/* ── Photos tab in opportunity preview modal ─────────────────────────────── */

.opp-photos-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.opp-photos-quota {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.opp-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  overflow-y: auto;
  flex: 1;
  padding-bottom: 0.5rem;
}

.opp-photos-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
}

.opp-photo-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.opp-photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: zoom-in;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
}

.opp-photo-thumb:hover {
  border-color: var(--accent);
}

.opp-photo-thumb:active {
  transform: scale(0.98);
}

.opp-photo-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.opp-photo-name {
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opp-photo-size {
  font-size: 0.7rem;
  color: var(--muted);
}

.opp-photo-delete {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.opp-photo-item:hover .opp-photo-delete {
  opacity: 1;
}

.opp-photo-delete:hover {
  background: rgba(220, 38, 38, 0.85);
}

.opp-photo-item.selected .opp-photo-thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.opp-photo-checkbox {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  width: 18px;
  height: 18px;
  margin: 0;
  z-index: 2;
  cursor: pointer;
}

.opp-photos-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.opp-photos-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.opp-photos-actions-select {
  min-width: 7.5rem;
  cursor: pointer;
}

.opp-photos-actions-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.opp-photos-dest-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.opp-photos-dest-panel.hidden {
  display: none;
}

.opp-photos-dest-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.opp-photos-dest-field {
  position: relative;
}

.opp-photos-dest-input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.85rem;
}

.opp-photos-dest-input:focus {
  outline: none;
  border-color: var(--accent);
}

.opp-photos-dest-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 180px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.25rem;
}

.opp-photos-dest-results.hidden {
  display: none;
}

.opp-photos-dest-results button {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}

.opp-photos-dest-results button:hover,
.opp-photos-dest-results button:focus-visible {
  background: var(--surface-2);
}

.opp-photos-dest-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Photo lightbox */

.photo-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  outline: none;
}

.photo-lightbox-box {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.photo-lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.photo-lightbox-caption {
  color: #e5e5e5;
  font-size: 0.85rem;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-lightbox-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: transparent;
  border: none;
  color: #e5e5e5;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-lightbox-close:hover {
  color: #fff;
}

.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.photo-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.photo-lightbox-prev {
  left: -3rem;
}

.photo-lightbox-next {
  right: -3rem;
}

@media (max-width: 600px) {
  .photo-lightbox-nav {
    top: auto;
    bottom: -3rem;
    transform: none;
  }
  .photo-lightbox-prev {
    left: calc(50% - 3rem);
  }
  .photo-lightbox-next {
    right: calc(50% - 3rem);
  }
  .photo-lightbox-close {
    top: -2rem;
  }
}

.deal-edit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 0;
  width: fit-content;
}

.deal-edit-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.deal-edit-tags-row .opp-preview-tag-add-wrap {
  flex-shrink: 0;
}

#quick-note-modal .field:has(.deal-edit-tags-row) {
  margin-bottom: 0.3rem;
}

.deal-edit-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.deal-edit-tag-remove {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 0.1rem;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
}

.deal-edit-tag-remove:hover {
  opacity: 1;
}

.deal-edit-tag-add {
  margin-top: 0.4rem;
}

.deal-edit-tag-add select {
  width: 100%;
  font-size: 0.85rem;
}

.deal-edit-note-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem 0.25rem;
  margin: 0.5rem 0 0;
}

.deal-edit-note-legend {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 0.25rem;
}

/* Quick note modal: the fieldset is now INSIDE the form (it used to be
   a flex sibling of the form). We make the form a flex column so the
   fieldset can grow inside it, and the fieldset a flex column so the
   qn-editor-wrap (already flex: 1) fills the space between the toolbar
   and the attachments row. The note-editor's existing
   flex: 1; min-height: 0; max-height: none; (see .qn-editor-wrap below)
   then fills the qn-editor-wrap. min-height: 0 is required on every
   flex item in the chain so children can shrink and the overflow-y:
   auto on the form (.modal-card-deal-edit .modal-form) actually
   overflows. */
#quick-note-modal .modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#quick-note-modal .deal-edit-note-fieldset {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 0.5rem;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 0.5rem 0 0;
  overflow: hidden;
}
.qn-note-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
.qn-editor-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.qn-editor-wrap .note-editor {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.field-optional {
  font-weight: 400;
  color: var(--muted);
}

/* Add tile modal */
.modal-card-add-tile {
  width: min(480px, 100%);
}

.add-tile-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

.add-tile-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.add-tile-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.add-tile-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-tile-option:disabled:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

.add-tile-option-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.add-tile-option-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.add-tile-calendar-form {
  margin-top: 0.5rem;
}

.add-tile-calendar-form .field input[type="url"] {
  width: 100%;
  font-size: 0.82rem;
}

/* Calendar source type buttons */
.calendar-source-type-btns {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.calendar-source-type-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.calendar-source-type-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.calendar-oauth-info-text {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.5rem 0;
  line-height: 1.4;
}

/* Calendar settings modal */
.modal-card-calendar-settings {
  width: min(480px, calc(100vw - 2rem));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
}
@media (max-width: 600px) {
  .modal-card-calendar-settings {
    width: calc(100vw - 1rem);
    max-height: 90vh;
    margin: 0.5rem auto;
  }
}
.modal-card-calendar-settings .modal-card-body {
  overflow-y: auto;
  padding: 0.75rem 1rem;
}
.calendar-settings-section {
  margin-bottom: 1rem;
}
.calendar-settings-section h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.calendar-settings-sources-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.calendar-settings-empty {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}
.calendar-settings-source-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}
.calendar-settings-source-row .source-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.calendar-settings-source-row .source-info {
  flex: 1;
  min-width: 0;
}
.calendar-settings-source-row .source-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.calendar-settings-source-row .source-detail {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-settings-source-row .source-remove {
  flex-shrink: 0;
  padding: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 4px;
}
.calendar-settings-source-row .source-remove:hover {
  color: #e05252;
  background: rgba(224, 82, 82, 0.1);
}
.calendar-settings-source-row .source-sync {
  flex-shrink: 0;
  padding: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 4px;
}
.calendar-settings-source-row .source-sync:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.calendar-settings-source-row .source-sync:disabled {
  opacity: 0.5;
  cursor: default;
}
.calendar-settings-source-row .source-visible {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.calendar-settings-source-row .source-color {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.calendar-settings-source-row .source-name-input {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.05rem 0.25rem;
  width: 100%;
  font-family: var(--font);
}
.calendar-settings-source-row .source-name-input:hover,
.calendar-settings-source-row .source-name-input:focus {
  border-color: var(--border);
  background: var(--surface);
}
.calendar-settings-source-row .source-error {
  font-size: 0.72rem;
  color: #e05252;
  margin-top: 0.15rem;
}
/* Per-tile source filter rows */
.calendar-settings-tiles-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.calendar-settings-tile-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calendar-settings-tile-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-settings-tile-source {
  flex-shrink: 0;
  max-width: 12rem;
}
/* Calendar search results + export row */
.cal-settings-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
}
.cal-search-row {
  display: grid;
  grid-template-columns: 9rem 1fr 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.78rem;
}
.cal-search-when {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cal-search-summary {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-search-where {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-settings-export-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
/* Notification drawer snooze/dismiss actions */
.notification-drawer-item-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.notification-drawer-action {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}
.notification-drawer-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}
@media print {
  /* Hide everything but the tile currently being printed. */
  body * { visibility: hidden !important; }
  .calendar-tile, .calendar-tile * { visibility: visible !important; }
  .calendar-tile { position: absolute; inset: 0; }
  .calendar-tile .tile-toolbar .btn-calendar-today,
  .calendar-tile .tile-toolbar .btn-calendar-nav,
  .calendar-tile .tile-toolbar .btn-tile-remove { display: none !important; }
  .calendar-tile .calendar-agenda-more { display: none !important; }
}
.calendar-settings-add-form {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

/* Toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.25rem 0;
}
.toggle-row input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Calendar event edit modal */
.modal-card-calendar-edit {
  width: min(500px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-card-calendar-edit .modal-card-body {
  overflow-y: auto;
  padding: 0.75rem 1rem;
}
.cal-edit-datetime-row {
  display: flex;
  gap: 0.75rem;
}
.cal-edit-datetime-row .field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cal-edit-datetime-row input[type="date"],
.cal-edit-datetime-row input[type="time"] {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.cal-edit-time {
  max-width: 110px;
}
@media (max-width: 600px) {
  .cal-edit-datetime-row {
    flex-direction: column;
    gap: 0.35rem;
  }
  .cal-edit-time {
    max-width: none;
  }
}

/* Calendar tile (monthly) */
.dashboard-tile.calendar-tile {
  min-height: var(--tile-row-height);
}

/* Calendar tile: keep tools on title row even when narrow */
@container (max-width: 550px) {
  .dashboard-tile.calendar-tile .tile-toolbar-tools {
    order: 0;
    flex-basis: auto;
  }
}

/* Calendar tile: consistent button sizing in toolbar */
.dashboard-tile.calendar-tile .tile-toolbar .btn-ghost {
  padding: 0.25rem 0.45rem;
  font-size: 0.78rem;
}
.dashboard-tile.calendar-tile .tile-toolbar .btn-ghost i {
  font-size: 0.95rem;
}

/* Calendar tile: actions row never wraps, close button always last + rightmost */
.dashboard-tile.calendar-tile .tile-toolbar-actions {
  flex-wrap: nowrap;
}
.dashboard-tile.calendar-tile .tile-toolbar-actions .btn-tile-remove {
  margin-left: 0.35rem;
}

/* Calendar tile: flex-wrap:nowrap so tabs + actions stay on one row */
.dashboard-tile.calendar-tile .tile-toolbar {
  flex-wrap: nowrap;
}

/* Calendar view tabs (inline, same pattern as Team tile) */
.calendar-view-tabs {
  display: inline-flex;
  gap: 0;
  flex-shrink: 0;
}
.calendar-view-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: 0;
  border-radius: 0;
  font-family: var(--font);
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.calendar-view-tab:hover {
  color: var(--text);
}
.calendar-view-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.calendar-view-tab .tab-icon {
  flex-shrink: 0;
}
/* Icon-only tabs on narrow screens */
@media (max-width: 768px) {
  .calendar-view-tab .tab-label {
    display: none;
  }
  .calendar-view-tab {
    padding: 0.15rem 0.35rem;
  }
}

.dashboard-tile.calendar-tile .calendar-month-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: 0.65rem 0.85rem 1rem;
}

/* Calendar: ensure the month grid itself can shrink below its natural height */
.dashboard-tile.calendar-tile .calendar-month-grid {
  min-height: 0;
}

.dashboard-tile.calendar-tile.tile-double .calendar-month-body {
  max-height: none;
}

.dashboard-tile.calendar-tile.tile-double {
  min-height: calc(var(--tile-row-height) * 2 + 1.25rem);
}

/* Double height: scale calendar content vertically instead of adding empty space below fixed min-heights */
.dashboard-tile.calendar-tile.tile-double .calendar-month-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dashboard-tile.calendar-tile.tile-double .calendar-month-grid {
  flex: 1;
  min-height: 0;
}
.dashboard-tile.calendar-tile.tile-double .calendar-day {
  min-height: 7.5rem; /* grow days for extra vertical space in double tiles */
}

/* Collapsed notes/calendar/tasks/presence must actually shrink (their min-height rules
   override the generic .tile-body-collapsed { min-height:0 } due to later cascade). */
.dashboard-tile.calendar-tile.tile-body-collapsed,
.dashboard-tile.notes-tile.tile-body-collapsed,
.dashboard-tile.tasks-panel.tile-body-collapsed,
.dashboard-tile.presence-panel.tile-body-collapsed {
  min-height: 0 !important;
  max-height: none !important;
  height: auto;
}

/* Collapsed notes tiles: hide formatting toolbar, menus, accent picker, mode toggle
   so minimized height matches every other tile type. */
.dashboard-tile.notes-tile.tile-body-collapsed .notes-quick-format-group,
.dashboard-tile.notes-tile.tile-body-collapsed .tile-menu-wrap,
.dashboard-tile.notes-tile.tile-body-collapsed .btn-notes-mode-toggle {
  display: none !important;
}

/* Collapsed notes tiles: ensure uniform toolbar padding matching .tile-toolbar (0.45rem 0.65rem). */
.dashboard-tile.notes-tile.tile-body-collapsed .notes-tile-bar {
  padding: 0.45rem 0.65rem;
}

/* Collapsed calendar tiles: hide month nav and timezone so minimized height is uniform. */
.dashboard-tile.calendar-tile.tile-body-collapsed .calendar-month-nav,
.dashboard-tile.calendar-tile.tile-body-collapsed .calendar-tz-label,
.dashboard-tile.calendar-tile.tile-body-collapsed .calendar-tz-select {
  display: none !important;
}

/* Collapsed Team/Presence tile: force-hide body content AND all toolbar extras
   so minimized height matches the title bar of other tiles. */
.dashboard-tile.presence-panel.tile-body-collapsed > .tile-body-content {
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  flex: 0 !important;
  overflow: hidden !important;
}
.dashboard-tile.presence-panel.tile-body-collapsed .presence-tile-tabs-inline,
.dashboard-tile.presence-panel.tile-body-collapsed .presence-popup-btn,
.dashboard-tile.presence-panel.tile-body-collapsed .presence-tile-status-btn,
.dashboard-tile.presence-panel.tile-body-collapsed .presence-tile-admin-btn,
.dashboard-tile.presence-panel.tile-body-collapsed .presence-online-count,
.dashboard-tile.presence-panel.tile-body-collapsed .presence-tile-toolbar,
.dashboard-tile.presence-panel.tile-body-collapsed .tile-toolbar-tools > :not(.tile-toolbar-spacer) {
  display: none !important;
}
.dashboard-tile.presence-panel.tile-body-collapsed .panel-header {
  padding: 0.45rem 0.65rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  cursor: grab;
}
.dashboard-tile.presence-panel.tile-body-collapsed .presence-tile-body {
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0;
  overflow: hidden;
}

.calendar-tile-bar .calendar-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.35rem;
}

.calendar-tz-label {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  flex-shrink: 1;
  min-width: 0;
  max-width: 11rem;
}

.calendar-tz-select {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  max-width: 100%;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.calendar-tz-select:hover,
.calendar-tz-select:focus {
  border-color: var(--accent);
  outline: none;
}

.calendar-month-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  min-width: 7.5rem;
  text-align: center;
}

.btn-calendar-nav {
  padding: 0.15rem 0.45rem;
  font-size: 1.1rem;
  line-height: 1;
}

.calendar-month-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar-weekday {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
  padding: 0.2rem 0;
}

.calendar-day {
  min-height: 4.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 0.2rem 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.calendar-day-outside {
  opacity: 0.45;
}

.calendar-day-today .calendar-day-num {
  color: var(--accent);
  font-weight: 700;
}

.calendar-day-num {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

.calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
}

.calendar-event-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  font-family: inherit;
  font-weight: inherit;
  font-size: 0.62rem;
  line-height: 1.25;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--event-color) 22%, transparent);
  border-left: 3px solid var(--event-color);
  color: var(--text);
  min-width: 0;
  width: 100%;
  margin: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.calendar-event-chip .calendar-event-label {
  font-size: inherit;
  line-height: inherit;
}

.calendar-event-chip:hover {
  background: color-mix(in srgb, var(--event-color) 35%, transparent);
}

.modal-card-calendar-event {
  width: min(520px, 100%);
}

.calendar-event-modal-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 0.45rem;
  vertical-align: middle;
}

.calendar-event-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.75rem 0 1rem;
  max-height: min(60vh, 420px);
  overflow: auto;
}

.calendar-event-detail-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  align-items: start;
}

.calendar-event-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.calendar-event-detail-value {
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-word;
}

.calendar-event-detail-value a {
  color: var(--accent);
}

.calendar-event-detail-desc-text {
  white-space: pre-wrap;
  line-height: 1.45;
}

.calendar-event-detail-empty {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}

/* Notes / to-do tile */
.dashboard-tile.notes-tile {
  min-height: var(--tile-row-height);
}

.dashboard-tile.notes-tile[data-accent] .notes-tile-body {
  border-left: 3px solid var(--notes-accent, var(--accent));
  padding-left: 0.6rem;
}

.dashboard-tile.notes-tile .notes-tile-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.85rem 1rem;
  overflow: hidden;
}

.dashboard-tile.notes-tile.tile-double .notes-tile-body {
  min-height: calc(var(--tile-row-height) * 2 - 100px);
}

/* Narrow: constrain notes title width */
@container (max-width: 400px) {
  .notes-tile-name {
    max-width: 5.5rem;
  }
}

/* Ensure notes and calendar tiles actually shrink when collapsed (their specific min-height
   rules were overriding the general .tile-body-collapsed min-height:0) */
.dashboard-tile.calendar-tile.tile-body-collapsed,
.dashboard-tile.notes-tile.tile-body-collapsed {
  min-height: 0 !important;
  height: auto;
}

/* Collapsed notes tiles: hide formatting toolbar, menus, accent picker, mode toggle
   so minimized height matches every other tile type. */
.dashboard-tile.notes-tile.tile-body-collapsed .notes-quick-format-group,
.dashboard-tile.notes-tile.tile-body-collapsed .tile-menu-wrap,
.dashboard-tile.notes-tile.tile-body-collapsed .btn-notes-mode-toggle {
  display: none !important;
}

/* Collapsed notes tiles: ensure uniform toolbar padding matching .tile-toolbar (0.45rem 0.65rem). */
.dashboard-tile.notes-tile.tile-body-collapsed .notes-tile-bar {
  padding: 0.45rem 0.65rem;
}

/* Collapsed calendar tiles: hide month nav and timezone so minimized height is uniform. */
.dashboard-tile.calendar-tile.tile-body-collapsed .calendar-month-nav,
.dashboard-tile.calendar-tile.tile-body-collapsed .calendar-tz-label,
.dashboard-tile.calendar-tile.tile-body-collapsed .calendar-tz-select {
  display: none !important;
}

.dashboard-tile.presence-panel.tile-body-collapsed .presence-tile-body {
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0;
  overflow: hidden;
}

.notes-editor {
  flex: 1;
  min-height: 12rem;
  width: 100%;
  resize: vertical;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

.notes-editor:focus {
  outline: none;
  border-color: var(--accent);
}



.notes-preview {
  flex: 1;
  min-height: 12rem;
  overflow: auto;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.notes-preview.hidden,
.notes-editor.hidden {
  display: none !important;
}

.notes-md-h1,
.notes-md-h2,
.notes-md-h3 {
  margin: 0.5rem 0 0.35rem;
  line-height: 1.25;
}

.notes-md-h1 {
  font-size: 1.15rem;
}

.notes-md-h2 {
  font-size: 1rem;
}

.notes-md-h3 {
  font-size: 0.92rem;
}

.notes-md-section {
  margin: 0;
  padding: 0;
}
.notes-md-section > summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
}
.notes-md-section > summary::-webkit-details-marker {
  display: none;
}
.notes-md-section > summary::before {
  content: "▶";
  font-size: 0.65em;
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.notes-md-section[open] > summary::before {
  content: "▼";
}

.notes-preview p {
  margin: 0.35rem 0;
}

.notes-md-list {
  margin: 0.35rem 0 0.35rem 1.1rem;
  padding: 0;
}

.notes-md-quote {
  margin: 0.35rem 0;
  padding: 0.35rem 0.65rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.notes-preview code {
  font-size: 0.82em;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  background: var(--bg);
}

.notes-preview a {
  color: var(--accent);
}

.notes-preview u {
  text-decoration: underline;
}

.notes-preview mark {
  background-color: rgba(255, 235, 59, 0.35);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.notes-preview del {
  opacity: 0.65;
  text-decoration: line-through;
}

.notes-md-empty {
  color: var(--muted);
  font-style: italic;
}

.notes-tile-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

/* Tight group for the bullet + numbered list buttons: right next to each other,
   with a subtle box + shadow to make them obviously clickable buttons.
   Reduced side padding as requested. */
.notes-list-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem; /* a little more padding between the bullet and numbered icons */
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  background: var(--surface-2);
  margin: 0 0.05rem; /* minimal external side space, shrunk */
}
.notes-list-btns .btn-notes-bullet,
.notes-list-btns .btn-notes-numbered {
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.2rem 0.3rem; /* more side padding + height to match neighboring icons */
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  min-width: 1.1em;
  text-align: center;
}
.notes-list-btns .btn-notes-bullet:hover,
.notes-list-btns .btn-notes-numbered:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
.notes-list-btns .btn-notes-bullet + .btn-notes-numbered {
  border-left: 1px solid var(--border);
}

/* Formatting buttons (bold/italic/underline etc) grouped next to lists buttons */
.notes-format-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  background: var(--surface-2);
  margin: 0 0.05rem;
}
.notes-format-btns .btn-notes-bold,
.notes-format-btns .btn-notes-italic,
.notes-format-btns .btn-notes-strike,
.notes-format-btns .btn-notes-underline,
.notes-format-btns .btn-notes-highlight,
.notes-format-btns .btn-notes-quote,
.notes-format-btns .btn-notes-code {
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.15rem 0.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  min-width: 1em;
  text-align: center;
  font-family: ui-monospace, monospace;
}
.notes-format-btns .btn-notes-bold:hover,
.notes-format-btns .btn-notes-italic:hover,
.notes-format-btns .btn-notes-strike:hover,
.notes-format-btns .btn-notes-underline:hover,
.notes-format-btns .btn-notes-highlight:hover,
.notes-format-btns .btn-notes-quote:hover,
.notes-format-btns .btn-notes-code:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
.notes-format-btns .btn-notes-bold + .btn-notes-italic,
.notes-format-btns .btn-notes-italic + .btn-notes-strike,
.notes-format-btns .btn-notes-strike + .btn-notes-underline,
.notes-format-btns .btn-notes-underline + .btn-notes-highlight,
.notes-format-btns .btn-notes-highlight + .btn-notes-quote,
.notes-format-btns .btn-notes-quote + .btn-notes-code {
  border-left: 1px solid var(--border);
}

/* Quick format group (B/I/S/U/H + emoji) — enlarged to match tile-btn-icon */
.notes-quick-format-group {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.notes-quick-format-group .btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.35rem;
  min-width: 1.5rem;
  text-align: center;
  font-family: ui-monospace, monospace;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
}

.notes-quick-format-group .btn:hover {
  color: var(--text);
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
  border-color: var(--accent);
}

/* Notes menu triggers (File, Edit) */
.btn-notes-file-menu,
.btn-notes-edit-menu {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}

.notes-tile-bar .btn-remove-notes {
  flex-shrink: 0;
}

/* Hide the printer button (does not appear to work) */
.btn-notes-print {
  display: none !important;
}

.modal-card-notes-archive {
  max-width: 420px;
}

.notes-archive-restore-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
}

.notes-archive-restore-item {
  border-bottom: 1px solid var(--border);
}

.notes-archive-restore-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.65rem 0.5rem;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.notes-archive-restore-pick:hover {
  background: var(--surface-2);
}

.notes-archive-restore-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.notes-archive-restore-date {
  font-size: 0.78rem;
  color: var(--muted);
}

.notes-archive-restore-empty {
  padding: 0.75rem 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.notes-accent-select {
  font-size: 0.65rem;
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  max-width: 5.5rem;
}

.btn-notes-pin.tile-btn-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.notes-md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.65rem 0;
}

.notes-md-checklist {
  list-style: none;
  margin: 0.35rem 0;
  padding: 0;
}

.notes-md-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  cursor: pointer;
}

.notes-md-check-input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.notes-md-check-text del {
  opacity: 0.7;
}

.notes-preview del {
  opacity: 0.72;
}

/* ── Enhanced markdown: code blocks ──────────────────────────────────────── */

.notes-md-codeblock {
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  overflow-x: auto;
  font-family: 'DM Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #d0d0d0;
}

.notes-md-codeblock code {
  background: none;
  padding: 0;
  border: none;
  font-size: inherit;
  color: inherit;
}

/* ── Enhanced markdown: tables ────────────────────────────────────────────── */

.notes-md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}

.notes-md-table th,
.notes-md-table td {
  border: 1px solid var(--border, #333);
  padding: 0.4rem 0.65rem;
  text-align: left;
}

.notes-md-table th {
  background: var(--surface-2, #1a1a1a);
  font-weight: 600;
  white-space: nowrap;
}

.notes-md-table tr:hover td {
  background: rgba(109, 75, 255, 0.04);
}

/* ── Enhanced markdown: images ────────────────────────────────────────────── */

.notes-md-img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0.35rem 0;
  cursor: pointer;
}

.notes-md-img:hover {
  opacity: 0.9;
}

/* ── Enhanced markdown: mermaid diagrams ──────────────────────────────────── */

.notes-md-mermaid {
  margin: 0.5rem 0;
  text-align: center;
}

.notes-md-mermaid pre {
  display: none;
}

.notes-md-mermaid-label {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--muted, #666);
  background: var(--surface-2, #1a1a1a);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
}

/* ── Enhanced markdown: TOC ───────────────────────────────────────────────── */

.notes-md-toc {
  background: var(--surface-2, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 0.65rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.82rem;
}

.notes-md-toc-title {
  font-weight: 600;
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
}

.notes-md-toc ul {
  margin: 0;
  padding-left: 1.2rem;
}

.notes-md-toc li {
  margin: 0.15rem 0;
}

.notes-md-toc a {
  color: var(--accent, #6d4aff);
  text-decoration: none;
}

.notes-md-toc a:hover {
  text-decoration: underline;
}

/* ── Enhanced markdown: nested lists ──────────────────────────────────────── */

.notes-md-nested {
  margin: 0.15rem 0;
  padding-left: 1.2rem;
}

/* ── Entity linking ───────────────────────────────────────────────────────── */

.notes-linked-chips {
  display: flex;
  gap: 0.3rem;
  padding: 0.25rem 0.85rem 0;
  flex-wrap: wrap;
}

.notes-linked-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  background: var(--accent-soft, rgba(109, 75, 255, 0.12));
  color: var(--accent, #6d4aff);
  border-radius: 10px;
  cursor: default;
}
.notes-linked-icon {
  font-size: 0.75rem;
  flex-shrink: 0;
}
/* Mobile/narrow: hide project name, show only link icon */
@container (max-width: 400px) {
  .notes-linked-chip-text { display: none; }
  .notes-linked-chip { padding: 0.15rem 0.35rem; }
}
@media (max-width: 600px) {
  .notes-linked-chip-text { display: none; }
  .notes-linked-chip { padding: 0.15rem 0.35rem; }
}

.notes-linked-chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.6;
}

.notes-linked-chip-remove:hover {
  opacity: 1;
}

/* ── Color filter dropdown ────────────────────────────────────────────────── */

.notes-color-dropdown {
  background: var(--surface, #111);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 160px;
  padding: 4px 0;
  max-height: 60vh;
  overflow-y: auto;
}

.notes-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: none;
  background: none;
  color: var(--text, #e0e0e0);
  cursor: pointer;
  font-size: 0.85rem;
  text-align: left;
}

.notes-dropdown-item:hover {
  background: var(--surface-2, #1a1a1a);
}

.notes-dropdown-active {
  background: var(--surface-2, #1a1a1a);
}

.notes-dropdown-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.notes-dropdown-dot-all {
  background: none;
  border: 1px solid var(--border, #333);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #666);
}

.notes-dropdown-check {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--accent, #6d4aff);
}

/* ── Note edit modal ──────────────────────────────────────────────────────── */

.notes-ctx-menu {
  position: fixed;
  z-index: 10001;
  background: var(--surface, #111);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 180px;
  padding: 4px 0;
}

.notes-ctx-colors {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 10002;
  background: var(--surface, #111);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0.4rem 0.5rem;
  gap: 0.3rem;
  flex-wrap: wrap;
  min-width: 120px;
}

.ctx-menu-item:hover > .notes-ctx-colors,
.ctx-menu-item:focus-within > .notes-ctx-colors {
  display: flex;
}

.notes-ctx-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.1s;
}

.notes-ctx-color-btn:hover {
  transform: scale(1.15);
}

.notes-ctx-color-active {
  border-color: var(--text, #e0e0e0);
}

.modal-card-note-edit {
  width: min(560px, 92vw);
  height: min(90vh, 800px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  resize: both;
  min-width: 400px;
  max-width: 96vw;
  min-height: 400px;
}

.note-edit-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem 0.5rem;
  flex-shrink: 0;
}

.note-edit-head-actions {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.note-edit-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
}

.note-edit-title-input {
  width: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.4rem 0;
  border: none;
  border-bottom: 1px solid var(--border, #333);
  background: transparent;
  color: var(--text, #e0e0e0);
  outline: none;
  flex-shrink: 0;
}

.note-edit-title-input:focus {
  border-bottom-color: var(--accent, #6d4aff);
}

.note-edit-color-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0;
  flex-shrink: 0;
}

.note-edit-color-btn {
  flex-shrink: 0;
}

.note-edit-toolbar {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  padding: 0.25rem 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.note-edit-toolbar .notes-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border, #333);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

.notes-mode-toggle.tile-btn-active,
.note-edit-toolbar .notes-mode-toggle.tile-btn-active {
  background: var(--accent-soft, rgba(109, 75, 255, 0.15));
  color: var(--accent, #6d4aff);
  border-radius: 4px;
}

.notes-mode-toggle.tile-btn-active svg,
.note-edit-toolbar .notes-mode-toggle.tile-btn-active svg {
  stroke-width: 2.5;
}

.note-edit-editor {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--surface-2, #1a1a1a);
  color: var(--text, #e0e0e0);
}

.note-edit-editor:focus {
  outline: none;
  border-color: var(--accent, #6d4aff);
}

.note-edit-preview {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--surface-2, #1a1a1a);
  font-size: 0.88rem;
  line-height: 1.5;
}

.note-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--border, #333);
  flex-shrink: 0;
}

.note-edit-footer-actions {
  display: flex;
  gap: 0.5rem;
}

/* Mobile: full-screen, edge to edge */
@media (max-width: 600px) {
  #note-edit-modal {
    padding: 0;
  }
  .modal-card-note-edit {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    resize: none;
    min-width: 0;
    max-width: 100%;
  }
  .note-edit-modal-head {
    padding: 0.5rem 0.75rem 0.4rem;
  }
  .note-edit-body {
    padding: 0 0.75rem;
  }
  .note-edit-footer {
    padding: 0.5rem 0.75rem;
  }
}

.notes-link-btn {
  flex-shrink: 0;
}

.notes-link-search {
  padding: 0.25rem 0.85rem 0;
  position: relative;
}

.notes-link-search-input {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--surface-2, #1a1a1a);
  color: var(--text, #e0e0e0);
  outline: none;
}

.notes-link-search-input:focus {
  border-color: var(--accent, #6d4aff);
}

/* ── Version history panel ────────────────────────────────────────────────── */

.notes-versions-panel {
  padding: 0.35rem 0.85rem 0;
  border-top: 1px solid var(--border, #333);
  margin-top: 0.25rem;
}

.notes-versions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.notes-versions-title {
  font-size: 0.8rem;
  font-weight: 600;
}

.notes-versions-close {
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.3rem;
}

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

.notes-version-item {
  background: var(--surface-2, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}

.notes-version-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.notes-version-label {
  font-size: 0.78rem;
  font-weight: 600;
}

.notes-version-time {
  font-size: 0.7rem;
  color: var(--muted, #666);
}

.notes-version-preview {
  font-size: 0.72rem;
  color: var(--muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.notes-version-restore {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
}

.notes-versions-empty {
  font-size: 0.78rem;
  color: var(--muted, #666);
  text-align: center;
  padding: 0.5rem;
}

.notes-tile-footer {
  flex-shrink: 0;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem;
  overflow: hidden;
  min-width: 0;
}

.notes-stats-label,
.notes-updated-label {
  font-size: 0.65rem;
  color: var(--muted);
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.notes-tile-footer:hover .notes-updated-label {
  color: var(--text);
}

.calendar-event-attendees {
  line-height: 1.4;
}

.calendar-event-detail-uid {
  margin: 0.75rem 0 0;
  font-size: 0.65rem;
  color: var(--muted);
  word-break: break-all;
}

/* ── Calendar Week/Day View ──────────────────────────────────────────────── */
.calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  min-height: 0;
  flex: 1;
}
.calendar-day-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 0;
  flex: 1;
}
.calendar-time-col {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  min-height: 0;
}
.calendar-time-col:first-child {
  border-left: none;
}
.calendar-time-header {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.calendar-time-header.calendar-time-today {
  color: var(--accent);
  font-weight: 700;
}
.calendar-time-slots {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  position: relative;
}
.calendar-time-slot {
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.calendar-time-slot:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.calendar-time-slot:nth-child(even) {
  border-bottom-style: dotted;
  border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent);
}
/* Non-working hours are shaded so the work day stands out. */
.calendar-time-slot.calendar-hour-off {
  background: color-mix(in srgb, var(--muted) 6%, transparent);
}
.calendar-time-slot.calendar-hour-off:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.calendar-time-event {
  position: absolute;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  font-size: 0.65rem;
  line-height: 1.2;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  border-left: 3px solid var(--event-color, var(--accent));
  background: color-mix(in srgb, var(--event-color, var(--accent)) 15%, var(--surface));
  color: var(--text);
}
.calendar-time-event:hover {
  background: color-mix(in srgb, var(--event-color, var(--accent)) 25%, var(--surface));
}
.calendar-time-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-time-event-time {
  font-size: 0.6rem;
  color: var(--muted);
}
/* Now-line across today's column in week/day views. */
.calendar-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #e05252;
  z-index: 2;
  pointer-events: none;
}
.calendar-now-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e05252;
}
/* All-day + continuation strip above the hour grid. */
.calendar-allday-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0.2rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.calendar-allday-chip {
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  font-size: 0.65rem;
  font-family: var(--font);
  border: none;
  border-left: 3px solid var(--event-color, var(--accent));
  background: color-mix(in srgb, var(--event-color, var(--accent)) 15%, var(--surface));
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.calendar-allday-chip:hover {
  background: color-mix(in srgb, var(--event-color, var(--accent)) 25%, var(--surface));
}
/* All-day section */
.calendar-allday-section {
  border-bottom: 1px solid var(--border);
  padding: 0.2rem;
  min-height: 1.5rem;
}
.calendar-allday-event {
  display: inline-block;
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  font-size: 0.65rem;
  margin: 1px;
  border-left: 3px solid var(--event-color, var(--accent));
  background: color-mix(in srgb, var(--event-color, var(--accent)) 15%, var(--surface));
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Calendar Agenda View ─────────────────────────────────────────────────── */
.calendar-agenda {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0;
}
.calendar-agenda-day {
  padding: 0 0.75rem;
}
.calendar-agenda-day-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0 0.2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.2rem;
}
.calendar-agenda-day-header.agenda-today {
  color: var(--accent);
}
.calendar-agenda-event {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  cursor: pointer;
  border-radius: 4px;
}
.calendar-agenda-event:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.calendar-agenda-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-top: 0.25rem;
  flex-shrink: 0;
  background: var(--event-color, var(--accent));
}
.calendar-agenda-event-info {
  flex: 1;
  min-width: 0;
}
.calendar-agenda-event-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-agenda-event-time {
  font-size: 0.72rem;
  color: var(--muted);
}
.calendar-agenda-event-location {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-agenda-more {
  display: block;
  margin: 0.4rem auto 0.6rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.75rem;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.calendar-agenda-more:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Calendar event editor additions ─────────────────────────────────── */
.cal-edit-row-2 {
  display: flex;
  gap: 0.6rem;
}
.cal-edit-row-2 .field {
  flex: 1;
  min-width: 0;
}
.cal-edit-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.cal-edit-inline input[type="number"] {
  width: 4.5rem;
}
.cal-edit-colors {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding: 0.15rem 0;
}
.cal-edit-color {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.cal-edit-color.selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}
.cal-edit-byday {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.cal-edit-byday-day {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--text);
}
.cal-edit-rrule-preview {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.25rem 0 0;
}
.cal-edit-scope {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text);
  margin-top: 0.25rem;
}
.calendar-event-readonly {
  font-size: 0.75rem;
  color: var(--muted);
  margin-right: auto;
}
.calendar-agenda-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 2rem 1rem;
}

/* ── Calendar tile body fills height, scrolls internally ──────────────────── */
.dashboard-tile.calendar-tile > .tile-body-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dashboard-tile.calendar-tile .calendar-month-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.65rem 0.85rem 1rem;
}

.notes-tile-bar .btn-notes-copy {
  flex-shrink: 0;
}

.notes-tile-bar .btn-notes-mode.tile-btn-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.add-tile-notes-form {
  margin-top: 0.5rem;
}

.add-tile-notes-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0;
  font-size: 0.82rem;
  color: var(--text);
}

.add-tile-notes-archived-wrap {
  margin-top: 0.65rem;
}

.add-tile-notes-archived-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

.add-tile-notes-archived-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.add-tile-notes-archived-item:last-child {
  border-bottom: none;
}

.btn-notes-restore {
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Personal Notes Tile (PostgreSQL-backed, browse + edit modes)
   ═══════════════════════════════════════════════════════════════════════════════ */

.personal-notes-tile {
  display: flex;
  flex-direction: column;
  min-height: var(--tile-row-height);
}

.personal-notes-tile.tile-double {
  min-height: calc(var(--tile-row-height) * 2 + 1.25rem) !important;
}

.personal-notes-tile.tile-triple {
  min-height: calc(var(--tile-row-height) * 3 + 2.5rem) !important;
}

.personal-notes-tile > .tile-body-content {
  display: flex;
  flex-direction: column;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.notes-tile-bar {
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.notes-count-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #888);
  background: var(--surface-2, #1a1a1a);
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  line-height: 1.3;
}

/* ── Search bar ────────────────────────────────────────────────────────────── */

.notes-search-bar {
  padding: 0 0.65rem 0.35rem;
}

.notes-search-input {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--surface-2, #1a1a1a);
  color: var(--text, #e0e0e0);
  outline: none;
}

.notes-search-input:focus {
  border-color: var(--accent, #6d4aff);
}

/* ── Color filter chips ────────────────────────────────────────────────────── */

.notes-color-chips {
  display: flex;
  gap: 0.3rem;
  padding: 0 0.65rem 0.4rem;
  flex-wrap: wrap;
}

.notes-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.1s;
}

.notes-chip:first-child {
  /* "All" chip — neutral */
  background: var(--surface-2, #1a1a1a) !important;
  border: 1px solid var(--border, #333);
  width: auto;
  height: auto;
  border-radius: 10px;
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  color: var(--text-muted, #888);
}

.notes-chip:hover {
  transform: scale(1.15);
}

.notes-chip-active {
  border-color: var(--text, #e0e0e0);
  transform: scale(1.15);
}

/* ── Card container ────────────────────────────────────────────────────────── */

.notes-card-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0.65rem 1.5rem;
}

.notes-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(min-content, auto);
  gap: 0.5rem;
  align-content: start;
  height: 100%;
}

.notes-list-view {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Note cards ────────────────────────────────────────────────────────────── */

.notes-card {
  background: var(--surface-2, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.notes-card:hover {
  border-color: var(--accent, #6d4aff);
  box-shadow: 0 2px 8px rgba(109, 75, 255, 0.1);
}

.notes-card-drag {
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  font-size: 0.7rem;
  color: var(--muted, #666);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s;
  user-select: none;
  z-index: 1;
}

.notes-card:hover .notes-card-drag {
  opacity: 0.7;
}

.notes-card-drag:hover {
  opacity: 1 !important;
}

.notes-card.sortable-ghost {
  opacity: 0.35;
  border: 2px dashed var(--accent, #6d4aff);
}

.notes-card.sortable-chosen {
  border-color: var(--accent, #6d4aff);
  box-shadow: 0 4px 16px rgba(109, 75, 255, 0.2);
}

.notes-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.notes-archive-label {
  font-size: 0.7rem;
  color: var(--muted, #888);
}

.notes-card-pinned {
  border-top: 2px solid var(--accent, #6d4aff);
}

.notes-card-title {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
  margin-bottom: 0.2rem;
  word-break: break-word;
}

.notes-card-preview {
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  line-height: 1.45;
  margin-bottom: 0.25rem;
  flex: 1;
  min-height: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.notes-card-preview > * { margin: 0 0 0.35rem; }
.notes-card-preview > *:last-child { margin-bottom: 0; }
.notes-card-preview h1, .notes-card-preview h2, .notes-card-preview h3,
.notes-card-preview h4, .notes-card-preview h5, .notes-card-preview h6 {
  font-weight: 700; color: var(--text); margin: 0 0 0.3rem;
}
.notes-card-preview h1 { font-size: 1.1rem; }
.notes-card-preview h2 { font-size: 1rem; }
.notes-card-preview h3 { font-size: 0.92rem; }
.notes-card-preview h4, .notes-card-preview h5, .notes-card-preview h6 { font-size: 0.85rem; }
.notes-card-preview ul, .notes-card-preview ol { padding-left: 1.2rem; }
.notes-card-preview li { margin-bottom: 0.15rem; }
.notes-card-preview code {
  font-family: var(--font-mono, monospace);
  background: var(--surface, #1a1a1a);
  padding: 0 0.25rem;
  border-radius: 3px;
  font-size: 0.9em;
}
.notes-card-preview pre {
  background: var(--surface, #1a1a1a);
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.75rem;
}
.notes-card-preview pre code { background: none; padding: 0; }
.notes-card-preview a { color: var(--accent); }
.notes-card-preview img { max-width: 100%; height: auto; border-radius: 4px; }
.notes-card-preview table { border-collapse: collapse; width: 100%; font-size: 0.72rem; }
.notes-card-preview th, .notes-card-preview td { border: 1px solid var(--border); padding: 2px 5px; }

.notes-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted, #666);
}

.notes-card-pin {
  font-size: 0.7rem;
}

/* List view cards */
.notes-list-view .notes-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
}

.notes-list-view .notes-card-title {
  flex: 0 0 auto;
  max-width: 150px;
  margin-bottom: 0;
}

.notes-list-view .notes-card-preview {
  flex: 1;
  -webkit-line-clamp: 1;
  margin-bottom: 0;
}

.notes-list-view .notes-card-footer {
  flex: 0 0 auto;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */

.notes-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted, #666);
  font-size: 0.85rem;
  grid-column: 1 / -1;
}

/* ── Quick add ─────────────────────────────────────────────────────────────── */

.notes-quick-add {
  padding: 0.4rem 0.65rem 0.65rem;
  border-top: 1px solid var(--border, #333);
}

.notes-quick-add-input {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--surface-2, #1a1a1a);
  color: var(--text, #e0e0e0);
  outline: none;
}

.notes-quick-add-input:focus {
  border-color: var(--accent, #6d4aff);
}

/* ── Edit mode ─────────────────────────────────────────────────────────────── */

.notes-edit-title {
  font-size: 0.9rem;
  font-weight: 600;
  outline: none;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  min-width: 3rem;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}

.notes-edit-title:focus {
  border-color: var(--border, #333);
  background: var(--surface-2, #1a1a1a);
}

.notes-edit-title:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted, #666);
}

.notes-edit-color-row {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem 0;
  flex-wrap: wrap;
}

.notes-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.1s;
}

.notes-color-dot:hover {
  transform: scale(1.15);
}

.notes-color-active {
  border-color: var(--text, #e0e0e0);
  transform: scale(1.15);
}

.notes-edit-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.65rem;
}

.notes-edit-toolbar {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  padding: 0.2rem 0;
  flex-wrap: wrap;
}

.notes-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border, #333);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

.notes-edit-body .notes-editor {
  flex: 1;
  min-height: 6rem;
  width: 100%;
  resize: none;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--surface-2, #1a1a1a);
  color: var(--text, #e0e0e0);
}

.notes-edit-body .notes-editor:focus {
  outline: none;
  border-color: var(--accent, #6d4aff);
}

.notes-edit-body .notes-preview {
  flex: 1;
  min-height: 6rem;
  overflow: auto;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--surface-2, #1a1a1a);
  font-size: 0.85rem;
  line-height: 1.5;
}

.notes-edit-body .notes-preview.hidden,
.notes-edit-body .notes-editor.hidden {
  display: none !important;
}

.notes-back-btn {
  gap: 0.25rem;
  touch-action: manipulation;
}

/* ── Collapsed state ───────────────────────────────────────────────────────── */

.personal-notes-tile.tile-body-collapsed .notes-search-bar,
.personal-notes-tile.tile-body-collapsed .notes-color-chips,
.personal-notes-tile.tile-body-collapsed .notes-card-container,
.personal-notes-tile.tile-body-collapsed .notes-quick-add,
.personal-notes-tile.tile-body-collapsed .notes-edit-color-row,
.personal-notes-tile.tile-body-collapsed .notes-edit-body,
.personal-notes-tile.tile-body-collapsed .notes-tile-footer {
  display: none !important;
}

.notes-tile-highlight {
  animation: notes-tile-glow 1.5s ease-out;
}

@keyframes notes-tile-glow {
  0% { box-shadow: 0 0 0 3px var(--accent, #6d4aff); }
  100% { box-shadow: none; }
}

.calendar-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--event-color);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.calendar-event-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.calendar-more-events {
  font-size: 0.6rem;
  color: var(--muted);
  padding-left: 0.15rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
}
button.calendar-more-events:hover {
  color: var(--accent);
  text-decoration: underline;
}

.calendar-loading-hint,
.calendar-error {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.5rem 0;
}

.dashboard-tile.calendar-loading .calendar-month-body {
  opacity: 0.55;
}

.field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.deal-edit-attach-hint {
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-style: italic;
  opacity: 0.85;
}

.modal-error.hidden {
  display: none;
}

.tile-toolbar .btn-new-task {
  font-size: 0.72rem;
  padding: 0.3rem 0.65rem;
  flex-shrink: 0;
}

.tile-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.35rem;
  line-height: 0;
  flex-shrink: 0;
}

/* Hide the pin button for now (completely broken on the top tiles) */
.tile-pin-btn {
  display: none !important;
}

.btn-tile-refresh {
  margin-left: 0.1rem;
  color: var(--muted);
}

.btn-tile-refresh:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-tile-refresh:disabled {
  opacity: 0.55;
  cursor: wait;
}

.btn-tile-refresh.is-refreshing .tile-refresh-icon {
  animation: tile-refresh-spin 0.75s linear infinite;
}

.tile-layout-icon {
  display: block;
}

@keyframes tile-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.opportunity-picker-field {
  position: relative;
}

/* Tablet: move logo to top-left before it starts overlapping buttons */
@media (max-width: 1050px) {
  .hero-logo-wrap {
    left: 0.75rem;
    top: 0.65rem;
    transform: none;
    width: 48px;
    height: 48px;
  }
  .hero-logo {
    width: 48px;
  }
  .hero-inner {
    padding-top: 3.5rem;
  }
}

/* Narrow tablet: actions drop below title before they overlap "dashboard" */
@media (max-width: 840px) {
  .hero-inner {
    flex-wrap: wrap;
  }
  .hero-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .hero-logo-wrap {
    width: 32px;
    height: 32px;
  }

  .hero-logo {
    width: 32px;
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .hero-header-actions {
    top: 0.65rem;
    right: 0.75rem;
    gap: 0.3rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .header-control-btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.35rem;
  }

  .hero-sign-out {
    min-width: auto;
    font-size: 0.75rem;
    padding: 0.35rem 0.55rem;
  }

  .admin-console-btn {
    /* sizing now handled by .header-control-btn */
  }

  .server-health-indicator {
    /* sizing now handled by .header-control-btn */
  }

  .hero-inner {
    padding: 1.5rem 1rem 1rem;
    padding-top: 3.5rem;
    flex-wrap: wrap;
  }

  .hero-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  .global-opp-search {
    flex: 1 1 100%;
    order: 1;
  }

  .global-opp-search-input {
    width: 100%;
  }

  .global-opp-search-results {
    left: 0;
    right: 0;
    width: auto;
  }

  .dashboard-tiles {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .board-group .board {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .column {
    flex: 0 0 260px;
  }

  .daily-focus {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    max-width: 100%;
  }
  .daily-focus-quote {
    white-space: normal;
    overflow: visible;
  }
}

/* Mail attachments shown inside expanded email panel */
.mail-attachments-panel {
  padding: 6px 8px;
  font-size: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.mail-attachments-panel .mail-attachment-link {
  padding: 1px 4px;
  margin: 0 2px;
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
}
.mail-attachments-panel .mail-attachment-link a {
  color: var(--accent);
  text-decoration: underline;
  font-size: 11px;
}
.mail-attachments-panel .mail-attachment-link a:hover {
  text-decoration: underline;
}

/* ================================================================================
   Search popup modal — large search with tabbed preview (max 5 tabs)
   ================================================================================ */

.modal-card-search-popup {
  width: min(900px, 96vw);
  max-height: 92vh;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  resize: both;
  min-width: 420px;
  height: min(85vh, 85dvh);
}

.modal-card-search-popup .modal-actions {
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}

/* Search popup modal mobile: full-screen, no corner resize */
@media (max-width: 600px) {
  #search-popup-modal {
    padding: 0;
  }
  #search-popup-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
}

.search-popup-tabs {
  display: flex;
  gap: 0.35rem;
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem 0;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface);
  flex-wrap: nowrap;
}

.search-popup-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  position: relative;
  overflow: hidden;
}

.search-popup-tab.active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  border-bottom: 1px solid var(--surface);
  font-weight: 600;
  z-index: 1;
  flex-shrink: 0;
}

.search-popup-tab:hover:not(.active) {
  color: var(--text);
  background: var(--surface-3, var(--surface-2));
  border-color: var(--border);
}

.search-popup-tab-search {
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
  flex-shrink: 0;
}

.search-popup-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.search-popup-tab-close {
  margin-left: 0.25rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.15rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.search-popup-tab-close:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* Content wrapper: holds both search tab and preview containers */
#search-popup-preview-containers {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.search-popup-tab-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: none;
}

.search-popup-tab-content.active {
  display: flex;
  flex-direction: column;
}

/* Search tab specific */
.search-popup-tab-content[data-tab-content="search"] {
  display: none;
}

.search-popup-tab-content[data-tab-content="search"].active {
  display: flex;
  flex-direction: column;
}

/* Ensure preview container fills the tab content */
.search-popup-tab-content.active .search-popup-preview-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Search tab */
.search-popup-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* Deal-status filter sits to the right of the search input inside the
   search-popup-input-wrap. Keep it narrow so the search input fills.
   Background + color + border come from .search-popup-filter-bar select
   (matched by class) but the descendant selector here needs them too
   because it's not a child of the filter bar. */
.search-popup-input-wrap > .search-popup-filter-select {
  flex: 0 0 auto;
  min-width: 7.5rem;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
}
.search-popup-input-wrap > .search-popup-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.search-popup-input {
  flex: 1;
  min-width: 0; /* allow the flex item to shrink below its content size */
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--font);
}

.search-popup-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.search-popup-tag-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.search-popup-tag-select {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
  cursor: pointer;
}

.search-popup-tag-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.search-popup-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.search-popup-filter-bar select {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

.search-popup-filter-bar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.search-popup-filter-bar .btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.search-popup-batch-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-wrap: wrap;
}

.search-popup-batch-bar.hidden {
  display: none;
}

.search-popup-batch-bar select {
  flex: 1 1 auto;
  min-width: 6rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.8rem;
  font-family: var(--font);
}

.search-popup-batch-bar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.search-popup-batch-bar .btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
}

.search-popup-batch-count {
  font-size: 0.8rem;
  color: var(--muted);
  margin-right: auto;
  white-space: nowrap;
}

.search-popup-select-all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--muted);
}

.search-popup-select-all label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.search-popup-select-all input,
.search-popup-result-checkbox {
  cursor: pointer;
  flex-shrink: 0;
}

.search-popup-result-checkbox {
  opacity: 0.75;
  accent-color: var(--muted);
  transform: scale(0.92);
}

.search-popup-result-row {
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.search-popup-results {
  flex: 1;
  min-height: 0;
  padding: 0.5rem 1rem;
  overflow-y: auto;
}

.search-popup-results-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.search-popup-results-header-label {
  font-weight: 500;
}

.search-popup-results-header-tag {
  font-weight: 600;
  color: var(--accent);
  background: var(--surface-2);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.search-popup-results-header-count {
  margin-left: auto;
  font-size: 0.8rem;
}

.search-popup-results-empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 1rem 0;
  text-align: center;
}

.search-popup-export-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.search-popup-export-bar .btn {
  font-size: 0.8rem;
}

.search-popup-error {
  padding: 0.75rem 1rem;
  margin: 0.5rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--warn, #f0b429);
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
}

.search-popup-error.hidden {
  display: none;
}

/* Custom field filters */
.search-popup-custom-filters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 1rem 0;
  background: var(--surface);
}

.search-popup-custom-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-popup-custom-filter-field,
.search-popup-custom-filter-value,
.search-popup-custom-filter-operator {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

.search-popup-custom-filter-field {
  flex: 1 1 35%;
  min-width: 8rem;
}

.search-popup-custom-filter-value,
.search-popup-custom-filter-operator {
  flex: 1 1 45%;
  min-width: 8rem;
}

.search-popup-custom-filter-row input[type="date"],
.search-popup-custom-filter-row input[type="text"] {
  flex: 1 1 45%;
  min-width: 8rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

.search-popup-custom-filter-remove {
  flex: 0 0 auto;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.search-popup-custom-filter-remove:hover {
  color: var(--danger, #ef4444);
  background: var(--surface-2);
  border-color: var(--border);
}

.search-popup-custom-filter-actions {
  display: flex;
  align-items: center;
  padding: 0.35rem 1rem 0.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.search-popup-custom-filter-actions .btn {
  font-size: 0.8rem;
}

/* Pagination */
.search-popup-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.search-popup-pagination .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.search-popup-page-info {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

.search-popup-results-count {
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface);
}

/* Background tab highlight */
.search-popup-tab.new-tab {
  animation: search-tab-pulse 1.2s ease-out 2;
}

@keyframes search-tab-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 -2px 0 0 var(--accent); }
}

/* Mobile filter stacking */
@media (max-width: 700px) {
  .search-popup-filter-bar {
    flex-wrap: wrap;
  }
  .search-popup-filter-bar select {
    flex: 1 1 45%;
    min-width: 6rem;
  }
  .search-popup-custom-filter-row {
    flex-wrap: wrap;
  }
  .search-popup-custom-filter-field,
  .search-popup-custom-filter-value,
  .search-popup-custom-filter-operator,
  .search-popup-custom-filter-row input[type="date"],
  .search-popup-custom-filter-row input[type="text"] {
    flex: 1 1 100%;
  }
}

/* Result rows */
.search-popup-result-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.15s;
  cursor: default;
}

.search-popup-result-row:hover {
  background: var(--surface-2);
}

.search-popup-result-title {
  font-weight: 500;
  flex-shrink: 0;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b8c0d0;
}

.search-popup-result-meta {
  color: var(--muted);
  font-size: 0.8rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-popup-result-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.search-popup-result-actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  min-height: 1.6rem;
}

.search-popup-result-bookmark {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.search-popup-result-bookmark:hover {
  color: var(--accent);
  background: var(--surface-2);
}
.search-popup-result-bookmark.bookmarked {
  color: var(--accent);
}
.search-popup-result-bookmark.bookmarked:hover {
  color: #ef4444;
}

/* Preview tab */
.search-popup-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}

.search-popup-preview-title {
  margin: 0;
  font-size: 1rem;
  flex: 1;
  word-break: break-word;
  line-height: 1.3;
}

.search-popup-preview-actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.search-popup-preview-refresh {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  margin-right: 0.25rem;
}

.search-popup-preview-refresh:hover,
.search-popup-preview-refresh:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}

.search-popup-preview-edit {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.search-popup-preview-edit:hover,
.search-popup-preview-edit:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}

.search-popup-preview-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.15rem;
}

/* Preview tab container (flex wrapper for each tab) */
.search-popup-preview-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0.75rem 1rem;
  overflow: hidden;
}

/* ================================================================================
   Bookmark ribbon button on search popup preview
   ================================================================================ */

.search-popup-preview-bookmark {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-popup-preview-bookmark:hover,
.search-popup-preview-bookmark:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}

.search-popup-preview-bookmark.bookmarked {
  color: var(--accent);
}

.search-popup-preview-bookmark.bookmarked:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/* ================================================================================
   Bookmark ribbon button on deal tiles
   ================================================================================ */

.card-bookmark-btn {
  position: absolute;
  bottom: 0.3rem;
  right: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  z-index: 1;
}

.card-bookmark-btn:hover,
.card-bookmark-btn:focus-visible {
  color: var(--accent);
  background: var(--surface-2);
  outline: none;
}

.card-bookmark-btn.bookmarked {
  color: var(--accent);
}

.card-bookmark-btn.bookmarked:hover {
  color: #ef4444;
}

/* ================================================================================
   Bookmark trigger tab — rounded pill on right edge when sidebar is hidden
   ================================================================================ */

.right-sidebar-triggers {
  position: fixed;
  bottom: 67%;
  right: 0;
  z-index: 1499;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.45rem;
  align-items: stretch;
}

.bookmark-trigger {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 2.6rem;
  padding: 0.7rem 0.35rem;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  transition: color 0.15s, background 0.15s, opacity 0.2s, transform 0.2s;
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
}

.bookmark-trigger-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: -0.15em;
  font-size: 0.55rem;
  font-weight: 700;
}

.bookmark-trigger:hover,
.bookmark-trigger:focus-visible {
  color: var(--accent);
  background: var(--surface-2);
  outline: none;
}

.bookmark-trigger.trigger-hidden {
  display: none;
}

/* ================================================================================
   Search trigger — right edge, positioned above bookmark trigger
   ================================================================================ */

.search-trigger {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  transition: color 0.15s, background 0.15s, opacity 0.2s, transform 0.2s;
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
}

.search-trigger:hover,
.search-trigger:focus-visible {
  color: var(--accent);
  background: var(--surface-2);
  outline: none;
}

.search-trigger.trigger-hidden {
  display: none;
}

/* ── Modal sidebar triggers (icon-only, for minimized email/documents) ── */
.modal-sidebar-trigger {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  transition: color 0.15s, background 0.15s, opacity 0.2s, transform 0.2s;
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
}

.modal-sidebar-trigger svg,
.search-trigger svg {
  width: 1.4rem;
  height: 1.4rem;
}
.modal-sidebar-trigger:hover,
.modal-sidebar-trigger:focus-visible {
  color: var(--accent);
  background: var(--surface-2);
  outline: none;
}
.modal-sidebar-trigger.trigger-hidden {
  display: none;
}

#email-trigger { order: 4; }
#documents-trigger { order: 5; }
#presence-trigger { order: 3; }

/* Modal card head: flex row with title left, close button right */
.modal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-card-head .modal-title {
  margin: 0;
  font-size: 1rem;
}

/* ── Modal header controls: minimize + close buttons ── */
.modal-header-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.modal-header-control:hover,
.modal-header-control:focus-visible {
  background: var(--surface);
  color: var(--text);
  border-color: var(--muted);
  outline: none;
}

.modal-minimize-btn {
  opacity: 1;
  font-size: 1.1rem;
}

/* ── Search popup header (new) ── */
.search-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.search-popup-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.search-popup-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ================================================================================
   Bookmark sidebar — slides in from right
   ================================================================================ */

.bookmark-preview-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1499;
  transition: opacity 0.25s ease;
}
.bookmark-preview-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.bookmark-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: 1500;
  display: flex;
  flex-direction: row;
  transition: transform 0.25s ease;
  overflow: hidden;
  pointer-events: none;
}

.bookmark-sidebar.sidebar-hidden {
  transform: translateX(100%);
}

.bookmark-sidebar:not(.sidebar-hidden) {
  transform: translateX(0);
}

.bookmark-sidebar-strip {
  width: 220px;
  min-width: 220px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  pointer-events: auto;
  overflow: hidden;
}

.bookmark-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.5rem 0.5rem 0.35rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bookmark-sidebar-header-left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.bookmark-sidebar-action-btn {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.bookmark-sidebar-action-btn:hover,
.bookmark-sidebar-action-btn:focus-visible {
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}

.bookmark-sidebar-toggle {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.bookmark-sidebar-toggle:hover,
.bookmark-sidebar-toggle:focus-visible {
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}

.bookmark-sidebar-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-sidebar-tabs {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 0;
}

.bookmark-tabs-empty {
  padding: 1rem 0.65rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

/* Individual tab button */
.bookmark-tab {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0.4rem 0.5rem 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
  min-height: 0;
  gap: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  margin-bottom: 4px;
  border-radius: 6px;
}

/* High Priority tag highlight on bookmark tabs */
.bookmark-tab--high-priority {
  background: rgba(240, 180, 41, 0.08);
  border-color: var(--warn);
  border-left: 3px solid var(--warn);
}

.bookmark-tab:hover {
  background: var(--surface-2);
}

.bookmark-tab.active {
  background: var(--surface-2);
  border-left-color: var(--accent);
}

.bookmark-tab-icon {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.12s;
  pointer-events: auto;
}
.bookmark-tab-icon:hover {
  opacity: 1;
  color: #ef4444;
}

.bookmark-tab-stage-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.bookmark-tab-title {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  padding-right: 1.25rem;
}

.bookmark-tab-meta {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1.25rem;
}

.bookmark-tab-dragging {
  opacity: 0.4;
}

.bookmark-tab-drag-over {
  border-top: 2px solid var(--accent) !important;
  border-left-color: var(--accent) !important;
  background: var(--surface-2);
}

/* Bookmark dividers — visual separators / category headers */

.bookmark-divider {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.65rem;
  margin: 0.25rem 0;
  cursor: grab;
  position: relative;
  user-select: none;
}

.bookmark-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 1rem;
}

.bookmark-divider:hover .bookmark-divider-delete,
.bookmark-divider:focus-within .bookmark-divider-delete {
  opacity: 1;
}

.bookmark-divider-delete {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  font-size: 0.85rem;
  line-height: 1;
}

.bookmark-divider-delete:hover,
.bookmark-divider-delete:focus-visible {
  color: #ef4444;
  background: var(--surface-2);
  outline: none;
}

.bookmark-divider-dragging {
  opacity: 0.4;
}

.bookmark-divider-drag-over {
  border-top: 2px solid var(--accent) !important;
  background: var(--surface-2);
}

/* Expanded preview panel */
.bookmark-sidebar-preview {
  width: 880px;
  min-width: 880px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  pointer-events: auto;
  overflow: hidden;
}

.bookmark-sidebar-preview.hidden {
  display: none;
}

.bookmark-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bookmark-preview-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.bookmark-preview-action-btn {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.bookmark-preview-action-btn:hover,
.bookmark-preview-action-btn:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
}

.bookmark-preview-open-crm {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}

.bookmark-preview-open-crm:hover,
.bookmark-preview-open-crm:focus {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

#bookmark-preview-unbookmark {
  color: var(--accent);
}

#bookmark-preview-unbookmark:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.bookmark-preview-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.65rem 0.85rem;
}

.bookmark-preview-body .opp-preview-tabs {
  margin-top: 0;
}

/* Responsive: narrow screen — reduce sidebar widths */
@media (max-width: 1400px) {
  .bookmark-sidebar-preview {
    width: 600px;
    min-width: 600px;
  }
}

@media (max-width: 1100px) {
  .bookmark-sidebar-strip {
    width: 170px;
    min-width: 170px;
  }
  .bookmark-sidebar-preview {
    width: 420px;
    min-width: 420px;
  }
}

@media (max-width: 768px) {
  .bookmark-sidebar-strip {
    width: 140px;
    min-width: 140px;
  }
  .bookmark-sidebar-preview {
    width: calc(100vw - 160px);
    min-width: 260px;
  }

  /* When a bookmark preview is open on mobile, hide the tab strip and let the preview fill the screen */
  .bookmark-sidebar.mobile-preview-open .bookmark-sidebar-strip {
    display: none;
  }
  .bookmark-sidebar.mobile-preview-open .bookmark-sidebar-preview {
    width: 100vw;
    min-width: 100vw;
    border-right: none;
  }
}

/* ================================================================================
   Notification Drawer
   ================================================================================ */

.notification-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1499;
  transition: opacity 0.25s ease;
}
.notification-drawer-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.notification-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, width 0.25s ease;
  overflow: hidden;
  pointer-events: auto;
}

.notification-drawer.drawer-hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.notification-drawer:not(.drawer-hidden) {
  transform: translateX(0);
}

.notification-drawer.popout-mode {
  width: min(700px, 90vw);
}

.notification-drawer-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notification-drawer-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.notification-drawer-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.notification-popout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.notification-popout-btn:hover {
  background: var(--border);
  color: var(--text);
}

.notification-drawer-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.notification-drawer-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.notification-drawer-item {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.notification-drawer-item:hover {
  background: var(--surface-2);
}
.notification-drawer-item.unread {
  border-left: 3px solid var(--accent, #22c55e);
  padding-left: calc(1rem - 3px);
  background: rgba(34, 197, 94, 0.04);
}

.notification-drawer-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.notification-drawer-item-icon {
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}
.notification-drawer-item.unread .notification-drawer-item-icon {
  color: var(--accent, #22c55e);
}

.notification-drawer-item-body {
  flex: 1;
  min-width: 0;
}

.notification-drawer-item-actor {
  font-weight: 600;
  font-size: 0.85rem;
}

.notification-drawer-item-message {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.15rem;
  line-height: 1.35;
}

.notif-inline-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.notif-inline-link:hover {
  text-decoration: underline;
}

.notification-drawer-item-time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  margin-top: 0.1rem;
}

.notification-drawer-item-expand {
  align-self: flex-start;
  margin-top: 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.notification-drawer-item-expand:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.notification-drawer-item-expanded {
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .notification-drawer {
    width: 100vw;
    border-left: none;
  }
  .notification-drawer.popout-mode {
    width: 100vw;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .notification-drawer {
    width: min(380px, 90vw);
  }
}

/* Notification unread badge */
.notification-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #22c55e);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
#notification-bell-btn {
  position: relative;
}
@keyframes notification-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.notification-pulse {
  animation: notification-pulse 0.3s ease-in-out;
}

/* ================================================================================
   Event log modal
   ================================================================================ */

.event-log-btn {
  z-index: 3;
}

.event-log-list {
  max-height: 60vh;
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.4;
}

.event-log-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.event-log-entry:last-child {
  border-bottom: none;
}

.event-log-entry-icon {
  flex-shrink: 0;
  width: 1.3rem;
  text-align: center;
  font-size: 0.9rem;
}

.event-log-entry-body {
  flex: 1;
  min-width: 0;
}

.event-log-entry-type {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.7rem;
  min-width: 4.5em;
  color: #888;
  white-space: nowrap;
}

.event-log-entry-opp {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
}

.event-log-entry-msg {
  flex-shrink: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-log-entry-time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

.event-log-entry-type {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.7rem;
  min-width: 4.5em;
  color: #888;
}
.event-log-entry.success .event-log-entry-type {
  color: #4ade80;
}
.event-log-entry.fail .event-log-entry-type {
  color: #f87171;
}

.event-log-entry.success .event-log-entry-icon {
  color: #166534;
}

.event-log-entry.fail .event-log-entry-icon {
  color: #9f1239;
}

.event-log-empty {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* ── Activity User Bar (admin console) ── */
.activity-user-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}
.activity-user-bar label {
  font-weight: 500;
  flex-shrink: 0;
}
.activity-user-bar .form-control {
  flex: 1 1 auto;
  min-width: 0;
}
.activity-ts-controls {
  margin-bottom: 0.5rem;
}
.activity-ts-controls .ts-date-range {
  flex-wrap: wrap;
}

/* ── Header Clock Button ── */
#header-clock-btn.header-clock-active {
  color: #00ff88;
  border-color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
  animation: header-clock-breathe 2.2s ease-in-out infinite;
}
@keyframes header-clock-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, #00ff88 60%, transparent);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 6px 2px color-mix(in srgb, #00ff88 55%, transparent);
    opacity: 1;
  }
}

/* ── Infrastructure Tab ──────────────────────────────────────────────────────── */

.infra-header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.infra-header-row h3 { margin: 0; }
.infra-last-updated {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--muted, #999);
  white-space: nowrap;
}

/* Status grid */
.infra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.infra-card {
  background: var(--bg-elevated, #f4f5f7);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}
.infra-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text, #1f2937);
}
.infra-card-body {
  font-size: 0.82rem;
  line-height: 1.45;
}
.infra-card-meta {
  font-size: 0.76rem;
  color: var(--muted, #888);
  margin-top: 0.2rem;
}

/* Status dots */
.infra-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.infra-dot-ok   { background: #22c55e; }
.infra-dot-fail { background: #ef4444; }
.infra-dot-loading { background: #9ca3af; }

/* Status text */
.infra-ok   { color: #22c55e; }
.infra-fail { color: #ef4444; }
.infra-warn { color: #f59e0b; }

/* Container rows */
.infra-container-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.infra-container-name { font-size: 0.75rem; color: var(--muted, #888); }

/* Resource / error / backup strip */
.infra-row-strip {
  font-size: 0.82rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border, #d1d5db);
  color: var(--text, #1f2937);
  line-height: 1.5;
}
.infra-resources { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.infra-resource-item {
  white-space: nowrap;
}
.infra-top-errors {
  margin-top: 0.25rem;
  font-size: 0.78rem;
}
.infra-top-error-item {
  display: inline-block;
  margin-bottom: 0.15rem;
}

/* Log controls row */
.infra-log-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.infra-log-select, .infra-log-search {
  font-size: 0.82rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
}
.infra-log-search { width: 180px; }
.infra-log-auto-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted, #888);
  cursor: pointer;
  white-space: nowrap;
}
.infra-log-auto-label input[type=checkbox] {
  width: 14px; height: 14px;
}
.infra-log-count {
  font-size: 0.78rem;
  color: var(--muted, #999);
  margin-left: auto;
  white-space: nowrap;
}

/* Log entry source badge */
.event-log-entry-source {
  display: inline-block;
  font-size: 0.72rem;
  color: #7c8aff;
  background: rgba(124, 138, 255, 0.1);
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-right: 0.35rem;
  white-space: nowrap;
}

/* Verify connectivity results */
.infra-status-indicator {
  font-size: 0.82rem;
  white-space: nowrap;
}
.infra-status-indicator.ok   { color: #22c55e; }
.infra-status-indicator.fail { color: #ef4444; }
.infra-verify-target {
  display: inline-block;
  margin-right: 0.75rem;
}

/* ── Customer Bot Modal ── */

.bot-customers-btn {
  position: absolute;
  top: 1rem;
  right: 9.5rem;
  z-index: 3;
}

@media (max-width: 640px) {
  .bot-customers-btn {
    top: 2.5rem;
    right: 1rem;
  }
  .event-log-btn {
    top: 2.5rem;
    right: 3.75rem;
  }
}

.modal-card-bot-customers {
  width: min(540px, 92vw);
  max-height: min(90vh, 720px);
  overflow-y: auto;
}

@media (min-width: 900px) {
  .modal-card-bot-customers {
    width: min(960px, 92vw);
  }
}

.bot-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 900px) {
  .bot-layout {
    flex-direction: row;
  }
  .bot-layout-left {
    flex: 1;
    min-width: 0;
  }
  .bot-layout-right {
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
  }
}

.bot-section {
  margin-bottom: 1rem;
}

.bot-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bot-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bot-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.bot-category-select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.bot-generated-code {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border: 1px dashed var(--accent);
  border-radius: 8px;
}

.bot-code-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bot-code-value {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: ui-monospace, 'SF Mono', monospace;
  letter-spacing: 0.1em;
  color: var(--accent);
  user-select: all;
}

.bot-code-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.bot-code-awaiting {
  color: var(--accent);
  font-style: italic;
}

.bot-code-expires {
  color: var(--muted);
}

.bot-mappings-list {
  max-height: 30vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.bot-mapping-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.bot-mapping-row:last-child {
  border-bottom: none;
}

.bot-mapping-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bot-mapping-nickname {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  flex-shrink: 0;
  max-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-mapping-nickname-empty {
  color: var(--border);
  font-style: normal;
}

.bot-nickname-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.bot-mapping-category {
  font-size: 0.75rem;
  color: var(--muted);
  flex-shrink: 0;
}

.bot-mapping-status {
  font-size: 0.72rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.bot-mapping-status.linked {
  background: #16653420;
  color: #166534;
}

.bot-mapping-status.pending {
  background: #a1620720;
  color: #a16207;
}

.bot-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}

.bot-mapping-employee-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #2563eb20;
  color: #2563eb;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.bot-section-title svg {
  vertical-align: middle;
  margin-right: 0.3rem;
}

.bot-broadcast-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bot-broadcast-select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.bot-broadcast-toolbar {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.bot-format-btn {
  width: 2rem;
  height: 1.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bot-format-btn:hover {
  background: var(--surface-2);
}

.bot-broadcast-textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
  box-sizing: border-box;
}

.bot-broadcast-status {
  font-size: 0.85rem;
  color: var(--muted);
  align-self: center;
}

.bot-usage-content {
  max-height: 30vh;
  overflow-y: auto;
  font-size: 0.82rem;
}

.bot-usage-table {
  width: 100%;
  border-collapse: collapse;
}

.bot-usage-table th,
.bot-usage-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.bot-usage-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bot-usage-table td {
  font-size: 0.82rem;
}

.bot-usage-row {
  cursor: default;
}

.bot-usage-toggle {
  width: 2rem;
  text-align: center;
}

.bot-usage-toggle .btn {
  font-size: 0.65rem;
  padding: 0;
  line-height: 1;
}

.bot-usage-ep-detail td {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.25rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.bot-usage-ep-item {
  display: inline-block;
  margin-right: 0.75rem;
}

.bot-usage-empty {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}

/* ── Bot Status Bar ─────────────────────────────────────────────────────── */

.bot-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.bot-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bot-status-dot.online { background: #22c55e; box-shadow: 0 0 6px #22c55e80; }
.bot-status-dot.warning { background: #eab308; box-shadow: 0 0 6px #eab30880; }
.bot-status-dot.offline { background: #6b7280; }

.bot-status-meta {
  color: var(--muted);
  margin-left: auto;
  font-size: 0.8rem;
}

.bot-status-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.bot-enabled-toggle {
  margin-bottom: 0 !important;
}

/* ── Bot Settings Form ─────────────────────────────────────────────────── */

.bot-settings-form .field {
  margin-bottom: 0.6rem;
}

.bot-settings-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: var(--text-secondary);
}

.bot-settings-form input[type="text"],
.bot-settings-form input[type="password"],
.bot-settings-form input[type="number"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.bot-settings-status {
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.bot-settings-status.success { color: #22c55e; }
.bot-settings-status.error { color: #ef4444; }

/* ── Bot Activity Log ──────────────────────────────────────────────────── */

.bot-activity-filters {
  margin-bottom: 0.5rem;
}

.bot-activity-log {
  max-height: 400px;
  overflow-y: auto;
}

.bot-activity-log .bot-usage-table tr.error td {
  color: #ef4444;
}

.bot-activity-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.bot-activity-page-info {
  color: var(--muted);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.pref-telegram-types {
  margin-left: 1.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
  margin-top: 0.25rem;
}

.pref-telegram-types.hidden {
  display: none;
}

.profile-toggle-sub {
  margin: 0.15rem 0;
}

.profile-toggle-sub .profile-toggle-label {
  font-size: 0.8rem !important;
  color: var(--muted);
}

/* ── Sietch CRM Footer ─────────────────────────────────────────────────────── */

.sietch-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.sietch-footer:hover {
  opacity: 0.9;
}

.sietch-footer-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.login-sietch-footer {
  pointer-events: none;
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.login-sietch-footer .sietch-footer-logo {
  height: 96px;
}

.login-sietch-footer:hover {
  opacity: 1;
}

.sietch-footer-text {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.05em;
}

.sietch-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  margin-top: 1rem;
  background: var(--surface, #1a1a2e);
  border-top: 1px solid var(--border, #2a2a4a);
  opacity: 0.5;
}

.sietch-dashboard-footer .sietch-footer-text {
  font-size: 0.65rem;
}

/* ── Admin Branding Modal ──────────────────────────────────────────────────── */

.modal-card-branding {
  width: min(480px, 92vw);
  max-height: min(90vh, 720px);
  overflow-y: auto;
}

.color-input-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.color-input-row input[type="color"] {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
}

.color-hex {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Document Picker (must appear above admin console) ─────────────── */
#document-picker-modal {
  z-index: 2100;
}

/* ── Admin Console Modal ─────────────────────────────────────────────────────── */
#admin-console-modal .modal-card,
.admin-modal-card {
  width: min(96vw, 1440px);
  height: min(840px, 85vh);
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  min-width: 0;
  max-width: 96vw;
  min-height: 420px;
  max-height: 90vh;
}

#admin-console-modal .admin-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#admin-console-modal .admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.5rem;
  overflow-x: visible;
  overflow-y: hidden;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}

#admin-console-modal .admin-tabs::-webkit-scrollbar {
  height: 4px;
}

#admin-console-modal .admin-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
}

#admin-console-modal .admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

#admin-console-modal .admin-tab-btn:hover {
  background: var(--bg-elevated);
}

#admin-console-modal .admin-tab-btn.active {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
}

/* Form controls — dark mode support */
.form-control {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
select.form-control {
  appearance: auto;
}
.form-control::placeholder {
  color: var(--muted);
}

/* Icon-only mode when tabs don't fit */
@media (max-width: 768px) {
  #admin-console-modal .admin-tab-label {
    display: none;
  }
  #admin-console-modal .admin-tab-btn {
    padding: 0.4rem;
  }
}

/* ── Automation Tab ────────────────────────────────────────────────────── */
.automation-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.automation-stats {
  font-size: 0.8rem;
  color: var(--muted);
}
.automation-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 900px) {
  .automation-layout {
    flex-direction: row;
  }
  .automation-rules-panel {
    flex: 1.2;
    min-width: 0;
  }
  .automation-logs-panel {
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
  }
}
.automation-rules-list {
  max-height: 400px;
  overflow-y: auto;
}
.automation-rule-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: var(--surface);
  font-size: 0.85rem;
  transition: border-color 0.15s;
}
.automation-rule-row:hover {
  border-color: var(--accent);
}
.automation-rule-info {
  flex: 1;
  min-width: 0;
}
.automation-rule-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-rule-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--muted);
}
.automation-rule-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.automation-rule-badge.trigger {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.automation-rule-badge.action {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.automation-rule-badge.dry-run {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.automation-rule-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.automation-rule-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.automation-rule-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.automation-rule-toggle .toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 10px;
  transition: background 0.2s;
}
.automation-rule-toggle input:checked + .toggle-track {
  background: var(--accent);
}
.automation-rule-toggle .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  pointer-events: none;
}
.automation-rule-toggle input:checked ~ .toggle-thumb {
  transform: translateX(16px);
}
.automation-logs-list {
  max-height: 360px;
  overflow-y: auto;
  font-size: 0.8rem;
}
.automation-log-entry {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.automation-log-entry:last-child {
  border-bottom: none;
}
.automation-log-time {
  color: var(--muted);
  white-space: nowrap;
  font-size: 0.7rem;
  min-width: 70px;
}
.automation-log-rule {
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-log-detail {
  flex: 1;
  color: var(--text);
}
.automation-log-error {
  color: #ef4444;
  font-weight: 600;
}
/* Form grid */
.automation-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) {
  .automation-form-grid {
    grid-template-columns: 1fr;
  }
}
.automation-form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}
.automation-form-section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.automation-field {
  margin-bottom: 0.6rem;
}
.automation-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}
.automation-field .form-control,
.automation-field select,
.automation-field input[type="text"],
.automation-field input[type="number"],
.automation-field input[type="email"],
.automation-field input[type="password"],
.automation-field textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  box-sizing: border-box;
}
.automation-field textarea {
  resize: vertical;
}
.automation-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: help;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}
.automation-info-btn:hover {
  background: var(--accent);
  color: #fff;
}
.automation-info-btn::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.automation-info-btn:hover::after {
  opacity: 1;
  pointer-events: auto;
}
.automation-user-picker,
.automation-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 120px;
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.automation-user-picker label,
.automation-tag-picker label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.automation-user-picker label:hover,
.automation-tag-picker label:hover {
  background: var(--surface);
}
.automation-user-picker input[type="checkbox"],
.automation-tag-picker input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}
.automation-user-picker:empty,
.automation-tag-picker:empty {
  min-height: 2rem;
  display: flex;
  align-items: center;
}
.automation-rule-name-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-bottom: 2px solid transparent;
  outline: none;
  min-width: 0;
}
.automation-rule-name-input:focus {
  border-bottom-color: var(--accent);
}
.automation-rule-name-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.automation-test-preview {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  max-height: 200px;
  overflow-y: auto;
}
.automation-test-result {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.automation-test-result:last-child {
  border-bottom: none;
}
.automation-test-result .project-name {
  font-weight: 600;
  color: var(--text);
}
.automation-test-result .preview-detail {
  color: var(--muted);
  font-size: 0.75rem;
}

/* Mobile: fill screen */
@media (max-width: 640px) {
  #admin-console-modal {
    padding: 0 !important;
    place-items: stretch !important;
    align-items: stretch !important;
  }
  #admin-console-modal .modal-card,
  .admin-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0 !important;
  }
  #sync-log {
    max-height: 200px;
  }
  /* Collapse inline grids to single column on mobile */
  .admin-tab-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Bot tab status bar wraps */
  .bot-status-bar {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .bot-status-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  .bot-status-actions .btn {
    flex-shrink: 0;
  }
  /* Ensure admin content scrolls on mobile */
  #admin-console-modal .admin-main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Header Settings Dropdown ────────────────────────────────────────────────── */
.header-settings-wrap {
  position: relative;
}

@media (max-width: 640px) {
  .header-settings-wrap .template-dropdown {
    right: 0;
    left: auto;
    min-width: 160px;
    max-width: 200px;
  }
}

/* ── Documents Modal ──────────────────────────────────────── */
.documents-modal-card {
  width: min(960px, 95vw);
  height: min(80vh, 800px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  resize: both;
  min-width: 480px;
  min-height: 400px;
  max-width: 96vw;
  max-height: 90vh;
}

.documents-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.documents-modal-header .modal-title {
  margin: 0;
  flex-shrink: 0;
}

.documents-modal-search-wrap {
  flex: 1;
}

.documents-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.documents-search-input {
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
}

.documents-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.documents-modal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.documents-scope-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.documents-scope-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}

.documents-scope-btn:hover {
  background: var(--surface-2);
}

.documents-scope-btn.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
  font-weight: 500;
}

.documents-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.documents-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.documents-selected-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Sort button + custom dropdown */
.documents-sort-wrap {
  position: relative;
  display: inline-flex;
}

.documents-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
}

.documents-sort-menu.hidden {
  display: none;
}

.documents-sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.documents-sort-option:hover,
.documents-sort-option:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.documents-sort-option.selected {
  font-weight: 600;
  color: var(--accent);
}

.documents-sort-option.selected::after {
  content: "✓";
  font-size: 0.85rem;
}

/* Actions button + custom dropdown */
.documents-actions-wrap {
  position: relative;
  display: inline-flex;
}

.documents-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 130px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
}

.documents-actions-menu.hidden {
  display: none;
}

.documents-actions-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.documents-actions-option:hover {
  background: var(--surface-2);
  outline: none;
}

/* Documents sidebar toggle */
.documents-sidebar-toggle {
  flex: 0 0 auto;
  align-self: stretch;
  width: 18px;
  min-width: 18px;
  padding: 0;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}

.documents-sidebar-toggle:hover {
  background: var(--hover);
  color: var(--text);
}

.documents-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 0.75rem 0.5rem;
  overflow-y: auto;
  transition: width 0.15s, min-width 0.15s, padding 0.15s, border-width 0.15s;
}

.documents-sidebar.documents-sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-right: none;
}
.documents-sidebar.documents-sidebar-collapsed .documents-folder-tree {
  display: none;
}

.documents-sidebar.documents-sidebar-collapsed + .documents-sidebar-toggle {
  border-right: 1px solid var(--border);
}

/* Folder tree in sidebar.
   Audit 2026-10-14: the tree container is a sibling of the 3 scope
   buttons inside .documents-scope-list. With only a top border it
   looked like a child row of the active scope (especially when
   empty — "No folders yet" sat between the active scope button and
   the next scope button). Added a bottom border + slight inner
   background so the tree is clearly its own panel, distinct from
   the scope buttons above and below. */
.documents-folder-tree {
  margin: 0.5rem 0;
  padding: 0.4rem 0.3rem 0.4rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 4px;
  min-height: 1.5rem;
}
.documents-folder-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.documents-folder-tree-item {
  position: relative;
}
.documents-folder-tree-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  padding-left: calc(0.6rem + var(--tree-depth, 0) * 18px);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text);
  transition: background 0.12s;
  user-select: none;
}
.documents-folder-tree-row:hover {
  background: var(--surface-2);
}
.documents-folder-tree-row.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
  font-weight: 500;
}
.documents-folder-tree-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.15s;
  cursor: pointer;
  padding: 1px;
  border-radius: 3px;
}
.documents-folder-tree-chevron svg {
  pointer-events: none;
}
.documents-folder-tree-chevron:hover {
  background: rgba(255,255,255,0.1);
}
.documents-folder-tree-chevron.expanded {
  transform: rotate(90deg);
}
.documents-folder-tree-chevron.no-children {
  visibility: hidden;
}
.documents-folder-tree-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--muted);
}
.documents-folder-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.documents-folder-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ensure icon-only toolbar buttons size consistently */
.documents-toolbar .btn-icon-only {
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0.35rem;
}

.documents-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.documents-list-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.documents-list-row:hover {
  background: var(--surface-2);
}

.documents-list-row.selected {
  background: rgba(59, 130, 246, 0.08);
}

.documents-list-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
}

.doc-doc-icon {
  flex-shrink: 0;
  color: var(--muted);
}

.doc-doc-title {
  flex: 1;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-doc-meta {
  font-size: 0.75rem;
  color: var(--muted);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}

.doc-doc-size {
  display: inline;
}

.doc-doc-size::after {
  content: " · ";
}

.doc-doc-date {
  display: inline;
}

.doc-doc-title-input {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.doc-doc-title-input:focus {
  outline: none;
}

.doc-rename-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.doc-rename-actions .btn-icon-only {
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.25rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.doc-rename-actions .btn-icon-only:hover {
  background: var(--surface);
  color: var(--text);
}

.documents-project-group {
  margin-bottom: 0.75rem;
}

.documents-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.documents-project-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.documents-project-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.documents-project-files {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.documents-group-header {
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}

.documents-group-header:hover {
  color: var(--text);
}

.documents-group-header .collapse-icon {
  margin-right: 0.3rem;
  transition: transform 0.15s;
  display: inline-block;
}

.documents-group-header.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

.documents-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Pagination footer for the documents list (Audit 2026-10-14). */
.documents-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 0.5rem 0.4rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.documents-pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.documents-pager-info {
  min-width: 7rem;
  text-align: center;
}
.documents-pager-pages {
  color: var(--muted);
  font-size: 0.72rem;
  margin-left: 0.25rem;
}

.documents-empty-icon {
  margin-bottom: 0.75rem;
  opacity: 0.4;
}

.documents-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.08);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.documents-drop-overlay.hidden {
  display: none;
}

.documents-drop-message {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
}

.documents-move-copy-panel {
  position: absolute;
  top: 3.5rem;
  left: 1rem;
  width: min(380px, calc(100% - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.75rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.documents-move-copy-panel.hidden {
  display: none;
}

.documents-move-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.9rem;
}

.documents-move-copy-head .btn-icon-only {
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.2rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.documents-move-copy-head .btn-icon-only:hover {
  background: var(--surface-2);
  color: var(--text);
}

.documents-move-copy-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.documents-move-copy-select,
.documents-move-copy-project-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.documents-move-copy-select:focus,
.documents-move-copy-project-input:focus {
  outline: none;
  border-color: var(--accent);
}

.documents-move-copy-project {
  display: flex;
  flex-direction: column;
}

.documents-move-copy-project-field {
  position: relative;
}

.documents-move-copy-project-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 21;
}

.documents-move-copy-project-results.hidden {
  display: none;
}

.documents-move-copy-project-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.documents-move-copy-project-results button:hover,
.documents-move-copy-project-results button:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.documents-move-copy-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.documents-move-copy-actions .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.documents-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--muted);
}

.ctx-menu {
  position: fixed;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  min-width: 180px;
  padding: 4px 0;
  top: 0;
  left: 0;
}

.ctx-menu.hidden {
  display: none;
}

.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.ctx-menu-item:hover,
.ctx-menu-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.ctx-menu-item--danger {
  color: var(--danger);
}

.ctx-menu-item--danger:hover,
.ctx-menu-item--danger:focus-visible {
  background: rgba(240, 113, 120, 0.12);
}

.ctx-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Documents: folder navigation + new button ── */

.documents-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.documents-breadcrumb-item {
  white-space: nowrap;
}

.documents-breadcrumb-link {
  color: var(--accent);
  cursor: pointer;
}

.documents-breadcrumb-link:hover {
  text-decoration: underline;
}

.documents-breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}

.documents-breadcrumb-sep {
  color: var(--muted);
  margin: 0 0.1rem;
}

.documents-folder-row {
  cursor: pointer;
}

.documents-folder-row:hover {
  background: var(--hover-bg, rgba(255,255,255,0.04));
}

.documents-folder-row.drag-over {
  background: var(--accent-bg, rgba(79, 140, 255, 0.15));
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.documents-list-row.dragging {
  opacity: 0.4;
}

.documents-folder-icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.documents-folder-name {
  cursor: pointer;
}

.documents-new-wrap {
  position: relative;
}

.documents-new-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 30;
  min-width: 180px;
  padding: 4px;
}

.documents-new-menu.hidden {
  display: none;
}

.documents-new-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.documents-new-option:hover {
  background: var(--hover-bg, rgba(255,255,255,0.06));
}

.documents-new-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.ctx-folder-item {
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .documents-sidebar {
    width: 140px;
  }
  .documents-modal-card {
    width: 98vw;
    height: 90vh;
    resize: none;
    min-width: 0;
    max-width: 100%;
  }
}

/* ── Documents Modal: Preview Pane ───────────────────────────────────────── */
.documents-preview-pane {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  border-left: 1px solid var(--border);
  background: var(--surface-2, #1a1d27);
  overflow: hidden;
  transition: width 200ms ease, min-width 200ms ease;
  /* Sit between main and right edge; takes precedence over hidden toggle state */
}

.documents-preview-pane-collapsed {
  width: 0;
  min-width: 0;
  border-left-width: 0;
}

.documents-preview-pane:not(.documents-preview-pane-collapsed) {
  width: min(640px, 50%);
  min-width: 280px;
}

.documents-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  flex-shrink: 0;
  background: var(--surface);
}

.documents-preview-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--text);
}

.documents-preview-title i {
  color: var(--muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}

#documents-preview-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.documents-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.documents-preview-actions .btn-icon-only {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 150ms;
}

.documents-preview-actions .btn-icon-only:hover:not(:disabled) {
  background: var(--surface-2, rgba(255,255,255,0.06));
}

.documents-preview-actions .btn-icon-only:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.documents-preview-activity {
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  min-height: 1.5rem;
  flex-shrink: 0;
  line-height: 1.4;
}
/* Collapse the empty activity row so the preview pane doesn't show a dark
   band between the file-name header and the iframe toolbar. When the JS
   populates this div with activity rows, the :empty selector no longer
   matches and the row displays normally. */
.documents-preview-activity:empty {
  display: none;
}

.documents-preview-activity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.documents-preview-activity-avatar {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent, #4f8cff);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.documents-preview-activity-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-preview-frame-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.documents-preview-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.documents-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
}

.documents-preview-empty i {
  font-size: 2.5rem;
  opacity: 0.6;
}

.documents-preview-empty p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}

.documents-preview-empty-hint {
  font-size: 0.78rem !important;
  color: var(--muted) !important;
}

/* Per-row "eye" preview button — appears on hover for clearly-desktop users */
.doc-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}

.documents-list-row:hover .doc-preview-btn,
.doc-preview-btn:focus-visible {
  opacity: 1;
}

.doc-preview-btn:hover {
  background: var(--surface-2, rgba(255,255,255,0.06));
  color: var(--accent, #4f8cff);
}

@media (max-width: 720px) {
  /* On narrow screens the preview pane becomes a full-width overlay so it
     doesn't compress the list. The show/hide toggle still works. */
  .documents-preview-pane:not(.documents-preview-pane-collapsed) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 5;
    background: var(--surface-2, #1a1d27);
  }
}

/* ── Resize Handles ──────────────────────────────────────────────────────── */
.dashboard-tile {
  position: relative;
}

.tile-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s ease;
  touch-action: none; /* let pointer events drive the resize on touch */
  overflow: hidden;
  pointer-events: auto;
}

.dashboard-tile:hover .tile-resize-handle {
  opacity: 0.5;
}

.tile-resize-handle:hover {
  opacity: 1 !important;
}

.dashboard-tile.tile-resizing {
  opacity: 0.65;
}

.tile-resize-se {
  bottom: 6px;
  right: 6px;
  cursor: nwse-resize;
  border-radius: 0 0 var(--radius) 0;
  background: linear-gradient(135deg, transparent 55%, var(--muted) 55%, var(--muted) 62%, transparent 62%, transparent 75%, var(--muted) 75%, var(--muted) 82%, transparent 82%);
}

.tile-resize-sw {
  bottom: 6px;
  left: 6px;
  cursor: nesw-resize;
  border-radius: 0 0 0 var(--radius);
  background: linear-gradient(225deg, transparent 55%, var(--muted) 55%, var(--muted) 62%, transparent 62%, transparent 75%, var(--muted) 75%, var(--muted) 82%, transparent 82%);
}

/* Ghost preview shown during resize drag — the ONLY thing that moves.
   The real tile keeps its grid span until pointerup commit (ISSUE-013). */
.tile-resize-ghost {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px dashed var(--accent, #6d4aff);
  border-radius: var(--radius);
  background: rgba(109, 75, 255, 0.08);
}

@media (max-width: 600px) {
  .tile-resize-handle {
    width: 18px;
    height: 18px;
  }
}

/* Pin button active state — HIDDEN for now (causes erratic behavior from full DOM rebuild) */
.btn-pin-tile {
  display: none !important;
}

/* ── Template Dropdown ────────────────────────────────────────────────────── */
.template-menu-wrap {
  /* Anchors the absolute-positioned dropdown to the button itself instead
     of the toolbar's right edge (matches .header-settings-wrap pattern). */
  position: relative;
}
.template-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 100;
  min-width: 200px;
  max-width: 280px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.35rem 0;
}

.template-dropdown.hidden {
  display: none;
}

.template-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-dropdown-item:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}

.template-dropdown-item--danger {
  color: var(--danger, #ef4444);
}

.template-dropdown-item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.template-dropdown-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.template-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.35rem 0;
}

/* Group tile toolbar */

/* ── Phase 2D: Terminal Theme (Scrolling Data Panes) ───────────────────────── */
/* Applied to: history notes, feed, event log — monospace font, dark bg, border-left entry markers */
.history-scroll-pane,
.event-log-list,
.feed-list,
.tasks-scroll-pane {
  font-family: 'DM Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.65rem;
  line-height: 1.55;
  color: #d0d0d0;
  font-size: 0.82rem;
}

.history-scroll-pane .entry,
.event-log-list .event-log-entry,
.feed-list li,
.tasks-scroll-pane .task-row {
  border-left: 2px solid #333;
  padding-left: 0.7rem;
  margin-bottom: 0.4rem;
}

.history-scroll-pane .entry.reply,
.event-log-list .event-log-entry.reply,
.feed-list li.reply,
.tasks-scroll-pane .task-row.reply {
  border-left-color: #666;
  margin-left: 1rem;
}

.history-scroll-pane .entry:hover,
.event-log-list .event-log-entry:hover,
.feed-list li:hover,
.tasks-scroll-pane .task-row:hover {
  background: rgba(109, 75, 255, 0.06);
}

.history-scroll-pane a,
.event-log-list a,
.feed-list a,
.tasks-scroll-pane a {
  color: #7c8aff;
}

/* ── Phase 2D: Admin Modal Terminal Theme ──────────────────────────────────── */
#admin-console-modal .modal-card,
.admin-modal-card {
  background: #0a0a0a;
  border: 1px solid #333;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

#admin-console-modal .modal-header {
  border-bottom-color: #333;
}

#admin-console-modal .modal-header-control {
  background: #1a1a1a;
  border-color: #333;
  color: #d0d0d0;
}

#admin-console-modal .modal-header-control:hover,
#admin-console-modal .modal-header-control:focus-visible {
  background: #252525;
  color: #00ff88;
  border-color: #00ff88;
}

#admin-console-modal .admin-body {
  background: #0f0f0f;
}

#admin-console-modal .admin-tabs {
  background: #1a1a1a;
  border-bottom: 1px solid #333;
}

#admin-console-modal .admin-tab-btn {
  color: #e0e0e0;
  border: 1px solid transparent;
  background: transparent;
  font-family: 'DM Mono', ui-monospace, 'Consolas', monospace;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#admin-console-modal .admin-tab-btn:hover {
  background: #252525;
  color: var(--accent);
}

#admin-console-modal .admin-tab-btn.active {
  background: #1a1a1a;
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

#admin-console-modal .admin-main {
  background: #0f0f0f;
  color: #d0d0d0;
}

/* ── Admin Terminal Theme: Form Elements ────────────────────────────────────── */
#admin-console-modal .admin-main input[type="text"],
#admin-console-modal .admin-main input[type="email"],
#admin-console-modal .admin-main input[type="password"],
#admin-console-modal .admin-main input[type="number"],
#admin-console-modal .admin-main input[type="search"],
#admin-console-modal .admin-main input[type="url"] {
  background: #1a1a1a;
  border: 1px solid #444;
  color: #e0e0e0;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}
#admin-console-modal .admin-main input[type="text"]:focus,
#admin-console-modal .admin-main input[type="email"]:focus,
#admin-console-modal .admin-main input[type="password"]:focus,
#admin-console-modal .admin-main input[type="number"]:focus,
#admin-console-modal .admin-main input[type="search"]:focus,
#admin-console-modal .admin-main input[type="url"]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

#admin-console-modal .admin-main input[type="file"] {
  color: #c0c0c0;
  background: transparent;
}
#admin-console-modal .admin-main input[type="file"]::file-selector-button {
  background: #252525;
  border: 1px solid #555;
  color: #d0d0d0;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}
#admin-console-modal .admin-main input[type="file"]::file-selector-button:hover {
  background: #333;
  border-color: var(--accent);
  color: var(--accent);
}

#admin-console-modal .admin-main input[type="checkbox"],
#admin-console-modal .admin-main input[type="radio"] {
  accent-color: var(--accent);
}

#admin-console-modal .admin-main select {
  background: #1a1a1a;
  border: 1px solid #444;
  color: #e0e0e0;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
}
#admin-console-modal .admin-main select:focus {
  border-color: var(--accent);
  outline: none;
}

#admin-console-modal .admin-main label {
  color: #c0c0c0;
}

#admin-console-modal .admin-main h4 {
  color: #e0e0e0;
}

#admin-console-modal .admin-main p,
#admin-console-modal .admin-main .modal-message {
  color: #999;
}

#admin-console-modal .admin-main .btn {
  border: 1px solid #444;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#admin-console-modal .admin-main .btn-primary {
  background: var(--accent);
  color: var(--accent-text, #fff);
  border-color: var(--accent);
}
#admin-console-modal .admin-main .btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 80%, #000);
  border-color: color-mix(in srgb, var(--accent) 80%, #000);
}

#admin-console-modal .admin-main .btn-secondary {
  background: #252525;
  color: #d0d0d0;
  border-color: #555;
}
#admin-console-modal .admin-main .btn-secondary:hover {
  background: #333;
  border-color: var(--accent);
  color: var(--accent);
}

#admin-console-modal .admin-main .btn-danger {
  background: #5c1a1a;
  color: #f8d0d0;
  border-color: #5c1a1a;
}
#admin-console-modal .admin-main .btn-danger:hover {
  background: #7a2222;
  border-color: #f87171;
}

#admin-console-modal .admin-main .btn-ghost {
  background: transparent;
  color: #c0c0c0;
  border-color: transparent;
}
#admin-console-modal .admin-main .btn-ghost:hover {
  background: #252525;
  color: var(--accent);
}

#admin-console-modal .admin-main .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Admin infra tab terminal theme overrides */
#admin-tab-infra .infra-card {
  background: #1a1a1a;
  border-color: #333;
  color: #d0d0d0;
}
#admin-tab-infra .infra-card-header { color: #e0e0e0; }
#admin-tab-infra .infra-card-meta { color: #777; }
#admin-tab-infra .infra-row-strip { border-top-color: #333; color: #d0d0d0; }
#admin-tab-infra .infra-ok   { color: #4ade80; }
#admin-tab-infra .infra-fail { color: #f87171; }
#admin-tab-infra .infra-warn { color: #fbbf24; }
#admin-tab-infra .infra-dot-ok   { background: #4ade80; }
#admin-tab-infra .infra-dot-fail { background: #f87171; }
#admin-tab-infra .infra-dot-loading { background: #555; }
#admin-tab-infra .infra-container-name { color: #888; }
#admin-tab-infra .event-log-entry-source {
  color: #93c5fd;
  background: rgba(147, 197, 253, 0.1);
}
#admin-tab-infra .infra-log-select, #admin-tab-infra .infra-log-search {
  background: #1a1a1a;
  border-color: #333;
  color: #d0d0d0;
}
#admin-tab-infra .infra-log-auto-label { color: #888; }
#admin-tab-infra .infra-log-count { color: #666; }
#admin-tab-infra .infra-last-updated { color: #666; }
#admin-tab-infra .infra-status-indicator { color: #888; }
#admin-tab-infra .infra-status-indicator.ok   { color: #4ade80; }
#admin-tab-infra .infra-status-indicator.fail { color: #f87171; }

/* ── Admin: Daily Quote config ──────────────────────────────────────────────── */
.dq-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.25rem 0.75rem;
}
.dq-preset-grid label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #d0d0d0;
  cursor: pointer;
  padding: 0.15rem 0;
}
.dq-preset-grid input[type="checkbox"] {
  accent-color: var(--accent);
  width: auto;
}
.dq-quote-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 0.3rem;
  background: #111;
}
.dq-quote-item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.25rem 0.3rem;
  border-bottom: 1px solid #222;
  font-size: 0.8rem;
  color: #ccc;
}
.dq-quote-item:last-child { border-bottom: none; }
.dq-quote-item-text {
  flex: 1;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dq-quote-item-author {
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}
.dq-quote-item-del {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0.2rem;
  flex-shrink: 0;
}
.dq-quote-item-del:hover { color: var(--danger, #f87171); }
.dq-import-textarea {
  width: 100%;
  font-family: monospace;
  font-size: 0.78rem;
  resize: vertical;
  background: #111;
  border: 1px solid #333;
  color: #d0d0d0;
}
.dq-panel { margin-top: 0.5rem; }

/* ── Phase 2D: SortableJS Drag Classes ─────────────────────────────────────── */
.dashboard-tile.sortable-ghost {
  opacity: 0.35;
  border: 2px dashed var(--accent, #6d4aff);
  box-shadow: 0 0 0 3px rgba(109, 75, 255, 0.15);
}

.dashboard-tile.sortable-chosen {
  border-color: var(--accent, #6d4aff);
  box-shadow: 0 4px 20px rgba(109, 75, 255, 0.2);
  transform: scale(1.01);
}

.dashboard-tile.sortable-drag {
  opacity: 0.9;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

/* Narrow mobile: prevent modal cutoff and keep content inside */
@media (max-width: 480px) {
  .modal-card {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
  }
  #compose-send-btn {
    padding: 0.35rem 0.8rem;
  }
  #documents-modal {
    padding: 0;
  }
  .documents-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  .documents-main {
    min-width: 0;
  }
  .documents-toolbar {
    gap: 0.35rem;
    padding: 0.5rem;
  }
  .documents-toolbar .btn-icon-only,
  .documents-toolbar .btn-sm {
    min-width: 1.9rem;
    min-height: 1.9rem;
    padding: 0.3rem;
  }
  /* Sort dropdown: fixed on mobile to escape overflow */
  .documents-sort-menu {
    position: fixed;
    z-index: 99999;
  }
  /* Actions dropdown: fixed on mobile */
  .documents-actions-menu {
    position: fixed;
    z-index: 99999;
  }
}

/* Compose body images: auto-resize to standard width (not thumbnail) */
#compose-body img,
.compose-tab-body img {
  max-width: 600px;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Compose modal: fill viewport on mobile, sticky footer */
@media (max-width: 600px) {
  #compose-email-modal {
    padding: 0;
  }
  #compose-email-modal .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #compose-email-modal .modal-card > div:last-child {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    z-index: 1;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  #compose-email-modal .note-editor {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Password status indicator */
.pw-status {
  font-size: 0.75rem;
  color: #3fb950;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile: modals fill viewport */
@media (max-width: 600px) {
  #account-settings-modal .modal-card {
    max-height: 100dvh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
  #account-settings-modal .modal-card > div:first-of-type {
    flex-shrink: 0;
  }
  #account-settings-modal .modal-card > div:nth-of-type(2) {
    flex: 1;
    min-height: 0;
  }
  #mail-inbox-modal {
    padding: 0;
  }
  #mail-inbox-modal .mail-inbox-card {
    height: 100dvh;
    max-height: 100dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  .mail-inbox-header {
    flex-shrink: 0;
  }
  .mail-toolbar {
    flex-shrink: 0;
  }
  .mail-main-area {
    min-height: 0;
    flex: 1;
  }
  .mail-list-container {
    min-height: 0;
  }
  .mail-footer-actions {
    flex-shrink: 0;
  }
  .mail-sidebar-toggle {
    display: none;
  }
  #custom-behavior-modal .modal-card {
    max-height: 100dvh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* ── Phase 2G: Profile Modal ──────────────────────────────────────────── */
.profile-modal-body {
  padding: 1.2rem 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
}

.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.profile-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--mention-color, hsl(200, 55%, 42%));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.profile-avatar-circle.has-image {
  background: transparent;
}
.profile-avatar-circle:hover {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
}

.profile-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.profile-avatar-crop {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
}

.profile-avatar-crop-viewport {
  width: 100%;
  height: 100%;
  cursor: grab;
  overflow: hidden;
}
.profile-avatar-crop-viewport:active {
  cursor: grabbing;
}

.profile-avatar-crop-img {
  position: absolute;
  pointer-events: none;
  user-select: none;
  transform-origin: 0 0;
}

.profile-avatar-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.profile-upload-btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  color: var(--muted);
}
.profile-upload-btn:hover {
  color: var(--text);
}
.profile-upload-btn.has-photo {
  color: var(--danger, #f07178);
}
.profile-upload-btn.has-photo:hover {
  color: var(--danger, #f07178);
  opacity: 0.85;
}

.profile-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.profile-legend {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  padding: 0 0.3rem;
  margin-bottom: 0.5rem;
}

.profile-field {
  margin-bottom: 0.6rem;
}

.profile-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.profile-field .form-control {
  width: 100%;
  max-width: 320px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s, color 0.15s;
}
.profile-field .form-control:focus {
  color: var(--text);
  border-color: var(--accent);
  outline: none;
}
.profile-field .form-control:disabled {
  color: var(--muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-field-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  margin-top: 0.15rem;
  display: block;
}

.profile-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.profile-toggle-label {
  font-size: 0.85rem;
  min-width: 120px;
}

/* ── @-mention autocomplete ───────────────────────────────────────────── */
.mention-dropdown {
  position: absolute;
  z-index: 1000;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 180px;
  overflow-y: auto;
  min-width: 180px;
}

.mention-dropdown-item {
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: background 0.1s;
}
.mention-dropdown-item:hover {
  background: var(--bg-subtle, #f3f4f6);
}

.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--mention-color, hsl(200, 55%, 42%));
  color: #fff;
  border-radius: 12px;
  padding: 0.15rem 0.5rem 0.15rem 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
}

.mention-inline {
  color: var(--mention-color, var(--accent, #4f8cff));
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
}
.mention-inline:hover {
  text-decoration: underline;
}

.mention-chip-at {
  font-weight: 700;
  opacity: 0.8;
}

.mention-chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.15rem;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.mention-chip-remove:hover {
  opacity: 1;
}

.note-editor {
  position: relative;
}

.note-editor-wrap {
  position: relative;
  overflow: visible;
}

/* ── Add Note button in preview history section header ───────────────── */
/* Add note button in preview section header — matches docs modal "Add document" button style */
.opp-preview-section-add-note {
  background: none;
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.opp-preview-section-add-note:hover {
  color: var(--accent, #66bb6a);
  border-color: var(--accent, #66bb6a);
  background: rgba(102, 187, 106, 0.08);
}
.opp-preview-section-add-note svg { width: 18px; height: 18px; }
.opp-preview-section-add-note span { text-transform: uppercase; letter-spacing: 0.04em; }

/* Remove problematic margin/padding that causes visual layout issues */
.preview-note-editor-wrap {
  display: none;
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
  box-sizing: border-box;
}
.preview-note-editor-wrap.active { display: block; }

/* Fix toolbar alignment and spacing */
.preview-note-editor-wrap .preview-format-toolbar {
  margin-bottom: 0.25rem;
  justify-content: flex-start;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.preview-note-editor-wrap .note-format-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0.15rem 0.2rem;
}

/* Backdate button in toolbar — directly after clear formatting, not far-right */
.preview-note-editor-wrap .note-format-toolbar .note-backdate-btn {
  background: none;
  border: 1px solid var(--border);
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.preview-note-editor-wrap .note-format-toolbar .note-backdate-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.preview-note-editor-wrap .note-format-toolbar .note-backdate-btn svg { width: 14px; height: 14px; }
.opp-preview-section-add-note svg {
  width: 14px;
  height: 14px;
}

/* ── Preview note editor wrapper ─────────────────────────────────────── */
.preview-note-editor-wrap {
  display: none;
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
}
.preview-note-editor-wrap.active {
  display: block;
}

.preview-note-editor-wrap .preview-format-toolbar {
  margin-bottom: 0.5rem;
}
.preview-note-editor-wrap .note-format-sep + .note-format-btn {
  margin-left: 0;
}
.preview-note-editor-wrap .note-editor {
  min-height: 120px;
  max-height: 330px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.preview-note-editor-wrap .note-editor:focus {
  outline: none;
  border-color: var(--accent, #66bb6a);
}
.preview-note-editor-wrap .note-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

/* Action row */
.preview-note-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.preview-note-backdate-btn {
  flex-shrink: 0;
}
.backdate-display {
  font-size: 0.78rem;
  color: var(--accent);
  white-space: nowrap;
}
.backdate-display.hidden {
  display: none;
}
.compose-graph-banner.hidden {
  display: none !important;
}
.compose-graph-banner #compose-graph-banner-btn {
  white-space: nowrap;
}
.preview-note-cancel {
  margin-left: auto;
}
.qn-note-type-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.qn-note-type-row select {
  width: auto;
  max-width: 200px;
}
.preview-note-type-select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  max-width: 160px;
}
.preview-note-type-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Highlighter dropdown ────────────────────────────────────────────── */
.preview-highlighter-dropdown {
  position: fixed;
  z-index: 99999;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.preview-highlighter-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.preview-highlighter-swatch:hover {
  border-color: var(--text);
  transform: scale(1.15);
}

/* ── Preview link input ──────────────────────────────────────────────── */
.preview-link-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.preview-link-input {
  flex: 1;
  min-width: 160px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font-size: 0.82rem;
}
.preview-link-input:focus {
  outline: none;
  border-color: var(--accent, #66bb6a);
}
.preview-link-input-wrap .btn {
  flex-shrink: 0;
}

.preview-mention-dropdown {
  position: absolute;
  z-index: 99998;
  left: 0;
  right: auto;
}

/* ── Mention dropdown in preview editor ──────────────────────────────── */
.preview-mention-dropdown {
  position: absolute;
  z-index: 99998;
  left: 0;
  right: auto;
}

/* ── Compose: tabs in title bar ───────────────────────────────────────── */
.mail-inbox-header .modal-title {
  flex-shrink: 0;
}
.mail-inbox-header .mail-inbox-tabs {
  flex: 1;
  overflow-x: auto;
  border-bottom: none;
}
.mail-inbox-header .mail-header-actions {
  flex-shrink: 0;
}

/* ── Star column ──────────────────────────────────────────────────────── */
.mail-star {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  cursor: pointer;
  opacity: 0.65;
  color: var(--muted);
  transition: opacity 0.15s, color 0.15s;
}
.mail-star:hover {
  opacity: 1;
}
.mail-star.starred {
  opacity: 1;
  color: #f59e0b;
}
.mail-snippet {
  flex: 2;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 120px;
  flex-basis: 0;
  order: 5;
}
.mail-date { order: 6; }
.mail-row-tags { order: 7; }

/* ── Email preview modal ──────────────────────────────────────────────── */
#email-preview-modal .modal-card {
  max-width: 900px;
  width: 95vw;
  max-height: 92vh;
  resize: both;
  overflow: hidden;
  min-width: 420px;
  min-height: 420px;
  height: min(85vh, 85dvh);
}
/* Email preview modal: email body fills available height so resizing the modal grows the message view */
#email-preview-modal #email-preview-body-wrap {
  display: flex;
  flex-direction: column;
}
#email-preview-modal #email-preview-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#email-preview-modal .opp-preview-mail-iframe {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  border: none;
}
#email-preview-modal .opp-preview-mail-text {
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: auto;
}
#email-preview-head > div {
  line-height: 1.45;
}
#email-preview-head strong {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 400;
}
.email-preview-action .btn-label {
  margin-left: 0.25rem;
}
#email-preview-attachments .mail-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  margin: 0.15rem 0.3rem 0.15rem 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
}
#email-preview-attachments .mail-attachment-link:hover {
  background: var(--hover);
}
#email-preview-attachments .mail-attachment-link a {
  color: var(--accent);
  text-decoration: none;
}
#email-preview-attachments .mail-attachment-link a:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  #email-preview-modal .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0;
    max-height: 100vh !important;
    height: 100vh;
    height: 100dvh;
    resize: none;
    min-width: 0;
  }
  #email-preview-modal { padding: 0; }
  .email-preview-action[data-action="reply"] .btn-label,
  .email-preview-action[data-action="forward"] .btn-label,
  .email-preview-action[data-action="headers"] .btn-label,
  .email-preview-action[data-action="archive"] .btn-label,
  .email-preview-action[data-action="print"] .btn-label { display: none; }
  .email-preview-action { min-width: 36px; min-height: 36px; }
}

/* ── Document picker file selection ────────────────────────────────── */
.doc-picker-file-row.selected {
  background: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
}
.doc-picker-file-row {
  cursor: pointer;
}

/* ── Right-click context menu for mail list ────────────────────────── */
.mail-context-menu {
  position: fixed;
  z-index: 10001;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  padding: 0.25rem 0;
  min-width: 170px;
}
.mail-context-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  text-align: left;
  position: relative;
}
.mail-context-item:hover {
  background: var(--hover);
}
.mail-context-item i {
  font-size: 1rem;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}
.mail-context-separator {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0;
}
.mail-context-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -0.25rem;
  z-index: 10002;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  padding: 0.25rem 0;
  min-width: 150px;
  max-height: 250px;
  overflow-y: auto;
}
.mail-context-submenu.visible {
  display: block;
}
.mail-context-subitem {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.6rem;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
  text-align: left;
}
.mail-context-subitem:hover {
  background: var(--hover);
}

/* ── Compose tab in mail inbox ──────────────────────────────────────── */
.compose-tab {
  background: var(--bg-elevated) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 500;
}
.compose-tab .compose-tab-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.2rem;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 0.3rem;
}
.compose-tab .compose-tab-close:hover {
  color: var(--text);
}
.compose-tab-title {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compose-tab-content {
  background: var(--bg);
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
}
.mail-tab-content {
  flex: 1;
  min-height: 0;
}
/* When compose tab is active, hide sidebar and make main area full width */
.mail-main-area:has(.compose-tab-content:not(.hidden)) .mail-right-sidebar,
.mail-main-area:has(.compose-tab-content:not(.hidden)) #mail-sidebar-toggle {
  display: none !important;
}

/* ── Attachment list in compose ───────────────────────────────────────── */
.compose-attachment-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0;
  font-size: 0.8rem;
}

/* ── Undo send banner ─────────────────────────────────────────────────── */
.undo-send-banner {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ── Compose compact fields ───────────────────────────────────────────── */
.opp-project-number-badge:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}
.compose-fields-section {
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
  max-height: 35%;
}
.compose-fields-section label {
  font-size: 0.8rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.15rem;
}
.compose-fields-section input,
.compose-fields-section select {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
}
.compose-body-section {
  flex: 1;
  min-height: 0;
  padding: 0 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
}
.mail-inline-reply {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.mail-inline-reply label {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
}

/* ── Mail list adaptive row height via container queries ─────────────────────
   .mail-list-container is an inline-size container, so these rules respond to
   the mail list's ACTUAL rendered width (reading sidebar open/closed, window
   resize) — no hardcoded viewport breakpoints needed.

   When the list is too narrow to show the snippet inline, the row becomes
   double-height: line 1 = from + tags (+ date/time + expand button, which is
   always the last item on the top line), line 2 = subject. Body snippet hidden.
   Placed at end of file so these rules win over the base .mail-snippet rule.
────────────────────────────────────────────────────────────────────────── */
@container (max-width: 720px) {
  .mail-row.mail-header { display: none; }
  .mail-row {
    gap: 0.2rem 0.4rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.85rem;
  }
  .mail-from {
    width: 120px;
    min-width: 60px;
    flex-shrink: 1;
    font-size: 0.82rem;
  }
  .mail-subject {
    flex: 1 1 100%;
    min-width: 0;
    order: 10;
    font-size: 0.85rem;
  }
  .mail-snippet {
    display: none;
  }
  .mail-date {
    order: 4;
    width: auto;
    min-width: auto;
    margin-left: auto;
    font-size: 0.7rem;
  }
  .mail-star { order: -1; }
  .mail-row-tags { order: 3; }
  .mail-expand-btn {
    order: 5;
    margin-left: 0;
    min-width: auto;
    width: 22px;
    height: 22px;
    padding: 0;
  }
}

/* ── Behavior toggles layout ────────────────────────────────────────── */
.behavior-row {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.behavior-row:last-child {
  border-bottom: none;
}
.behavior-config {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 1.5rem;
  margin-top: 0.2rem;
  font-size: 0.75rem;
}
.behavior-config-label {
  color: var(--muted);
  font-size: 0.75rem;
}
.behavior-scope {
  font-size: 0.75rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  max-width: 150px;
}
/* Custom behaviors list */
.custom-behavior-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 0.3rem;
  background: var(--bg-elevated);
  cursor: grab;
}
.custom-behavior-item:active {
  cursor: grabbing;
}
.custom-behavior-item.dragging {
  opacity: 0.5;
  border-style: dashed;
}
.custom-behavior-item .drag-handle {
  color: var(--muted);
  margin-right: 0.3rem;
  font-size: 0.8rem;
}
.custom-behavior-item .behavior-actions {
  display: flex;
  gap: 0.2rem;
}
@media (max-width: 600px) {
  .behavior-config {
    flex-wrap: wrap;
    margin-left: 1rem;
  }
  .behavior-scope {
    max-width: 100%;
  }
}

/* ── Mail auto-link status icons ─────────────────────────────────────── */
.mail-link-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.3rem;
  font-size: 0.75rem;
  cursor: help;
  flex-shrink: 0;
}
.mail-link-icon svg {
  width: 14px;
  height: 14px;
}
.mail-link-icon.linked {
  color: #22c55e;
}
.mail-link-icon.linked:hover {
  color: #16a34a;
}
.mail-link-icon.unlinked {
  color: #f59e0b;
}
.mail-link-icon.unlinked:hover {
  color: #d97706;
}
.mail-link-icon.has-attachments {
  color: #8b95a8;
}
.mail-link-icon.has-attachments:hover {
  color: #a0aec0;
}
@media (prefers-color-scheme: dark) {
  .mail-link-icon.linked { color: #4ade80; }
  .mail-link-icon.linked:hover { color: #22c55e; }
  .mail-link-icon.unlinked { color: #fbbf24; }
  .mail-link-icon.unlinked:hover { color: #f59e0b; }
}

/* Scanner log dry-run status */
.log-dry-run {
  border-left: 2px solid var(--accent);
}
.log-dry-run .log-status {
  color: var(--accent);
}
/* Scanner log checkbox — spacing handled by grid column-gap */
.log-cb {
  margin: 0;
}
/* Correction modal project results */
.correction-pick:hover {
  background: var(--bg-elevated);
}
.correction-pick.selected {
  background: var(--accent-subtle);
  color: var(--accent);
}
/* Behavior badges */
.behavior-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--bg-elevated);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}
.behavior-badge:hover {
  color: var(--text);
}
/* Trigger section */
.trigger-group {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem;
  margin-bottom: 0.4rem;
  background: var(--bg-elevated);
}
.trigger-condition {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}
.trigger-condition select,
.trigger-condition input[type="text"],
.trigger-condition input[type="number"] {
  font-size: 0.75rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.trigger-condition select {
  max-width: 160px;
}
.trigger-condition input[type="text"],
.trigger-condition input[type="number"] {
  flex: 1;
  min-width: 80px;
}

#ts-admin-summary {
  max-height: 200px;
  overflow-y: auto;
}

.ts-project-search-input {
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-family: var(--font);
}
.ts-project-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.ts-context-menu {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0.25rem 0;
  min-width: 140px;
}
.ts-context-menu button {
  display: block;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font);
  color: var(--text);
}
.ts-context-menu button:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}
.ts-context-menu button.danger {
  color: var(--danger, #ef4444);
}

.ts-admin-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 0.5rem;
}
.ts-admin-week-table th,
.ts-admin-week-table td {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  text-align: center;
}
.ts-admin-week-table th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 0.72rem;
}
.ts-admin-week-table td:first-child {
  text-align: left;
  font-weight: 500;
}
.ts-admin-week-table .today-col {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.ts-admin-week-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
.ts-admin-week-nav button {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: var(--font);
}
.ts-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-success, #22c55e);
}
.ts-live-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success, #22c55e);
  animation: ts-live-dot 1.5s ease-in-out infinite;
}
@keyframes ts-live-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.role-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.role-badge-admin { background: var(--accent); color: #fff; }
.role-badge-manager { background: #3b82f6; color: #fff; }
.role-badge-member { background: var(--border); color: var(--muted); }
.role-badge-limited { background: #f59e0b; color: #000; }

.twofa-badge {
  display: inline-block;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.65rem;
  margin-left: 0.3rem;
}
.twofa-badge-enabled { color: #10b981; }
.twofa-badge-disabled { color: var(--muted); }

/* ── Contacts tab styles ────────────────────────────────────────────────── */

.admin-contacts-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin-contacts-filter {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.admin-contacts-filter-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  border-right: 1px solid var(--border);
}
.admin-contacts-filter-btn:last-child { border-right: none; }
.admin-contacts-filter-btn.active {
  background: var(--accent);
  color: #fff;
}
#admin-contacts-search {
  flex: 1;
  min-width: 150px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}
.admin-contacts-list {
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.contact-row:last-child { border-bottom: none; }
.contact-row:hover { background: var(--bg-elevated); }
.contact-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
  overflow: hidden;
}
.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.contact-info { flex: 1; min-width: 0; }
.contact-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-meta {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-row-company {
  font-style: italic;
  color: var(--muted);
}
.contact-type-badge {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  background: #2ea04322;
  color: #2ea043;
  border: 1px solid #2ea04344;
  margin-right: 0.3rem;
}
.contact-actions {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}
.contact-actions .btn { padding: 0.15rem 0.35rem; font-size: 0.8rem; }

/* Contact detail form */
.admin-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-form-section label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.contact-form-section input,
.contact-form-section select,
.contact-form-section textarea {
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
}
.contact-form-section textarea {
  resize: vertical;
  min-height: 60px;
}

/* Admin contacts — dark mode for controls outside .contact-form-section */
#admin-contacts-search,
#admin-contacts-type-filter,
#admin-contacts-import-file {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ── Customize Projects tab — multi-column layout ─────────────────────────── */
#admin-tab-customize {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.admin-customize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
}
@media (max-width: 900px) {
  .admin-customize-grid { grid-template-columns: 1fr; }
}
.admin-customize-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.admin-customize-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-customize-col-title {
  font-weight: 600;
  font-size: 0.85rem;
}
.admin-customize-search {
  width: 100%;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.admin-customize-search:focus {
  border-bottom-color: var(--accent);
}
.admin-customize-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 0.85rem;
}
.admin-customize-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  cursor: default;
  transition: background 0.12s;
}
.admin-customize-row:last-child { border-bottom: none; }
.admin-customize-row:hover { background: var(--hover); }
.admin-customize-row-info { flex: 1; min-width: 0; }
.admin-customize-row-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-customize-row-meta {
  font-size: 0.72rem;
  color: var(--muted);
}
.admin-customize-row-actions {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.admin-customize-row:hover .admin-customize-row-actions { opacity: 1; }
@media (hover: none) {
  .admin-customize-row-actions { opacity: 0.7; }
  .admin-customize-row:active .admin-customize-row-actions { opacity: 1; }
}
.admin-customize-row-actions .btn {
  padding: 0.1rem 0.3rem;
  font-size: 0.75rem;
  min-width: 1.4rem;
  min-height: 1.4rem;
}
@media (hover: none) {
  .admin-customize-row-actions .btn {
    padding: 0.4rem 0.5rem;
    min-width: 2rem;
    min-height: 2rem;
  }
}
.admin-customize-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-customize-badge {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 500;
  background: var(--bg-elevated);
  color: var(--muted);
  border: 1px solid var(--border);
}
.admin-customize-form {
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.admin-customize-form-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.admin-customize-input,
.admin-customize-select {
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  flex: 1;
  min-width: 0;
}
.admin-customize-input:focus,
.admin-customize-select:focus {
  outline: none;
  border-color: var(--accent);
}
.admin-customize-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-customize-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.admin-customize-checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
}
.admin-customize-form-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.15rem;
}
.admin-customize-empty {
  padding: 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.admin-customize-reorder-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.1rem;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.12s;
}
.admin-customize-reorder-btn:hover { opacity: 1; color: var(--text); }

/* ── Icon Grid (Event Note Types picker) ──────────────────────────────── */
.automation-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  max-height: 120px;
  overflow-y: auto;
}
.automation-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  transition: border-color 0.15s, background 0.15s;
}
.automation-icon-btn:hover {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.05);
}
.automation-icon-btn.selected {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
}
.automation-icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ── Stage drag handle ─────────────────────────────────────────────────── */
.admin-customize-drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0 0.2rem;
  opacity: 0.4;
  transition: opacity 0.12s;
  user-select: none;
  flex-shrink: 0;
}
.admin-customize-row:hover .admin-customize-drag-handle {
  opacity: 1;
}
.admin-customize-drag-handle:active {
  cursor: grabbing;
}

/* Stages list while a search filter is active. The Sortable onEnd handler
   reads ids out of the rendered DOM, which under a filter holds only the
   matching rows — posting that would renumber sort_order for a subset and
   scramble the pipeline. Hide the handles so the action is unavailable. */
#admin-stages-list.stages-filtered .admin-customize-drag-handle {
  display: none;
}
#admin-stages-list.stages-filtered .admin-customize-row {
  padding-left: 0.4rem;
}

/* ── History category accent style ────────────────────────────────────── */
.opp-preview-history-item--accent {
  border-left: 3px solid var(--cat-accent-color, #2563eb);
  padding-left: calc(0.75rem - 3px);
  background: color-mix(in srgb, var(--cat-accent-color, #2563eb) 8%, transparent);
}
.opp-preview-history-item--accent .opp-preview-history-type-icon svg {
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--cat-accent-color, #2563eb) 35%, transparent));
}

/* ── Task label picker in task edit modal ──────────────────────────────── */
.task-edit-labels-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 100px;
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.task-edit-labels-grid label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.task-edit-labels-grid label:hover {
  background: var(--surface);
}
.task-edit-labels-grid input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

/* ── Task preview/edit modal sizing ────────────────────────────────────── */
#task-preview-modal .modal-card {
  width: min(520px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
}
#task-preview-modal .modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}
#tasks-list-modal .modal-card {
  width: min(520px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
}
.tasks-list-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}

/* Task modals: full-screen on mobile */
@media (max-width: 600px) {
  #task-preview-modal,
  #tasks-list-modal {
    padding: 0;
  }
  #task-preview-modal .modal-card,
  #tasks-list-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  .task-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Create Project modal mobile: full-screen ─────────────────────────── */
@media (max-width: 600px) {
  #create-opportunity-modal {
    padding: 0;
  }
  #create-opportunity-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  .field-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Project Note (quick note) modal mobile: full-screen ──────────────── */
@media (max-width: 600px) {
  #quick-note-modal {
    padding: 0;
  }
  #quick-note-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  #quick-note-modal .deal-edit-note-fieldset {
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--border);
  }
  #quick-note-modal .note-editor {
    min-height: 100px;
  }
}

/* ── Task edit user picker ─────────────────────────────────────────────── */
.task-edit-user-select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

/* ── Branding image upload widgets ────────────────────────────────────────── */
.branding-image-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.branding-image-preview {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.branding-image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.branding-image-preview-empty {
  background: var(--surface-2);
}
.branding-image-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.branding-image-name {
  font-size: 0.72rem;
  color: var(--muted);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contact history (search modal preview) */
.admin-contact-history-list {
  max-height: 300px;
  overflow-y: auto;
}
.contact-history-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-history-item:last-child { border-bottom: none; }
.contact-history-meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.contact-history-content {
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* Search modal contacts tab */
.search-popup-contact-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.search-popup-contact-row:last-child { border-bottom: none; }
.search-popup-contact-row:hover { background: var(--bg-elevated); }
.search-popup-contact-info { flex: 1; min-width: 0; }
.search-popup-contact-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-popup-contact-meta {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Import modal */
#admin-contacts-import-modal .modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: -1;
}

/* Contact detail fields in search preview */
.contact-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.contact-detail-field {
  font-size: 0.85rem;
  display: flex;
  gap: 0.5rem;
}
.contact-detail-label {
  color: var(--muted);
  min-width: 80px;
  flex-shrink: 0;
}

/* Note toolbar overflow menu */
.note-format-overflow-btn {
  display: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
}
.note-format-overflow-dropdown {
  position: fixed;
  z-index: 99999;
  display: none;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  min-width: 140px;
  max-width: 200px;
}
.note-format-overflow-dropdown.open {
  display: flex;
}
.note-format-overflow-dropdown .note-format-btn,
.note-format-overflow-dropdown .note-backdate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  padding: 0.3rem;
  flex-shrink: 0;
}
/* Mobile: show overflow button, hide overflow items from toolbar */
@media (max-width: 600px) {
  .note-format-overflow-btn { display: inline-flex; }
  .note-format-toolbar [data-overflow] { display: none !important; }
}

/* Follow-up Due Date + Stage inline with title */
.opp-preview-due-date-head,
.opp-preview-stage-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (max-width: 600px) {
  .opp-preview-stage-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .opp-preview-stage-select {
    width: 100%;
  }
}
.opp-preview-due-date-wrap {
  display: flex;
  align-items: center;
}
.opp-preview-due-date-display {
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color 0.15s;
}
.opp-preview-due-date-display.opp-preview-field-overdue {
  border-color: rgba(220, 38, 38, 0.8);
  background: rgba(220, 38, 38, 0.15);
  color: #ef4444;
}
.opp-preview-due-date-display:hover {
  border-color: var(--accent);
}
.opp-preview-due-date-input {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius, 6px);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.opp-preview-due-date-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
@media (prefers-color-scheme: dark) {
  .opp-preview-due-date-input { color-scheme: dark; }
}

/* ── Photo Markup Editor Modal ──────────────────────────────────────────── */
/* ── Photo Report Modal ─────────────────────────────────────────────────── */
.modal-card-photo-report {
  resize: both;
  min-width: 560px;
  min-height: 450px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.photo-report-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}
.photo-report-section {
  margin-bottom: 0.75rem;
}
.photo-report-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}
.photo-report-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.photo-report-field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
}
.photo-report-field input,
.photo-report-field select,
.photo-report-field textarea {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
}
.photo-report-field textarea {
  min-height: 80px;
  resize: vertical;
}
.photo-report-field input:focus,
.photo-report-field select:focus,
.photo-report-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.photo-report-row {
  display: flex;
  gap: 0.5rem;
}
.photo-report-row .photo-report-field {
  flex: 1;
}
.photo-report-photos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.photo-report-photo-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}
.photo-report-photo-thumb {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.photo-report-photo-info {
  flex: 1;
  min-width: 0;
}
.photo-report-photo-name {
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-report-photo-caption {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  font-family: inherit;
}
.photo-report-photo-caption:focus {
  outline: none;
  border-color: var(--accent);
}
.photo-report-section-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.photo-report-collapse-icon {
  font-size: 0.7rem;
  transition: transform 0.15s;
}
.photo-report-summary-editor-wrap {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
  box-sizing: border-box;
}
.photo-report-summary-editor-wrap .note-format-toolbar {
  margin-bottom: 0.25rem;
  justify-content: flex-start;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.photo-report-summary-editor-wrap .note-format-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0.15rem 0.2rem;
}
.photo-report-summary-editor-wrap .note-editor {
  min-height: 80px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 0.25rem;
  resize: both;
}
.photo-report-summary-editor-wrap .note-editor:focus {
  outline: none;
  border-color: var(--accent, #66bb6a);
}
.photo-report-summary-editor-wrap .note-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.photo-report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.photo-report-generate-btn {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.photo-report-generate-btn:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
}
.photo-report-generate-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 600px) {
  #photo-report-modal { padding: 0; }
  #photo-report-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  .photo-report-row { flex-direction: column; gap: 0; }
}

/* ── Invoice / COC Generator Modals ───────────────────────────────────── */
.modal-card-invoice-generator,
.modal-card-coc-generator {
  resize: both;
  min-width: 560px;
  min-height: 460px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.invoice-generator-body,
.coc-generator-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}
.invoice-section,
.coc-section {
  margin-bottom: 0.75rem;
}
.invoice-section-title,
.coc-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}
.invoice-lineitems,
.coc-lineitems {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.invoice-lineitems th,
.coc-lineitems th {
  text-align: left;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.invoice-lineitems td,
.coc-lineitems td {
  padding: 0.25rem 0.4rem;
  vertical-align: middle;
}
.invoice-lineitems input,
.coc-lineitems input {
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text);
}
.invoice-lineitems .amount-col,
.coc-lineitems .amount-col {
  width: 130px;
  text-align: right;
}
.invoice-lineitems .amount-col input,
.coc-lineitems .amount-col input {
  text-align: right;
}
.invoice-lineitems .del-col,
.coc-lineitems .del-col {
  width: 32px;
  text-align: center;
}
.invoice-grand-total {
  text-align: right;
  font-weight: 600;
  padding: 0.4rem 0.4rem;
  margin-top: 0.4rem;
  border-top: 2px solid var(--border);
  font-size: 0.9rem;
}
.invoice-actions,
.coc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.invoice-generate-btn,
.coc-generate-btn {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.invoice-generate-btn:hover,
.coc-generate-btn:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
}
.invoice-generate-btn:disabled,
.coc-generate-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 600px) {
  #invoice-generator-modal,
  #coc-generator-modal { padding: 0; }
  #invoice-generator-modal .modal-card,
  #coc-generator-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
}

/* ── Reports Admin Sub-tabs (Photo Reports / Document Templates) ─────── */
.reports-subtabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.reports-subtab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.reports-subtab:hover {
  color: var(--text);
}
.reports-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.modal-card-photo-markup {
  resize: both;
  min-width: 560px;
  min-height: 420px;
  max-width: 96vw;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.photo-markup-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.photo-markup-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
  min-height: 38px;
}
.photo-markup-toolbar .markup-sep {
  width: 1px;
  height: 1.4rem;
  background: var(--border);
  margin: 0 0.2rem;
  flex-shrink: 0;
}
.photo-markup-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.photo-markup-tool-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}
.photo-markup-tool-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.photo-markup-tool-btn svg {
  width: 16px;
  height: 16px;
}
.photo-markup-color-input {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.photo-markup-color-input::-webkit-color-swatch-wrapper { padding: 1px; }
.photo-markup-color-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.photo-markup-size-slider {
  width: 60px;
  height: 4px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.photo-markup-size-label {
  font-size: 0.7rem;
  color: var(--muted);
  min-width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.photo-markup-footer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  min-height: 38px;
}
.photo-markup-footer-spacer {
  flex: 1;
}
.photo-markup-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.photo-markup-action-btn:hover {
  background: var(--surface);
  border-color: var(--muted);
}
.photo-markup-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.photo-markup-action-btn svg {
  width: 14px;
  height: 14px;
}
.photo-markup-save-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.photo-markup-save-btn:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
  border-color: color-mix(in srgb, var(--accent) 85%, #000);
}
.photo-markup-canvas-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
}
.photo-markup-canvas-wrap canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.photo-markup-canvas-wrap.tool-select { cursor: default; }
.photo-markup-canvas-wrap.tool-pen,
.photo-markup-canvas-wrap.tool-highlighter { cursor: crosshair; }
.photo-markup-canvas-wrap.tool-text { cursor: text; }
.photo-markup-canvas-wrap.tool-move { cursor: grab; }
.photo-markup-canvas-wrap.tool-move:active { cursor: grabbing; }

.photo-markup-text-input {
  position: absolute;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 999px;
  color: #000;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  padding: 4px 12px;
  outline: none;
  min-width: 40px;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.photo-markup-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
}

/* Mobile full-screen */
@media (max-width: 600px) {
  #photo-markup-modal {
    padding: 0;
  }
  #photo-markup-modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    resize: none;
    min-width: 0;
  }
  .photo-markup-toolbar {
    gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .photo-markup-tool-btn {
    width: 1.75rem;
    height: 1.75rem;
  }
  .photo-markup-size-slider { width: 45px; }
}

/* ── Service Feeds (Admin Console → General tab) ─────────────────────── */
.admin-sf-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: 0.4rem;
}
.admin-sf-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface);
}
.admin-sf-card-info {
  flex: 1;
  min-width: 0;
}
.admin-sf-card-name {
  font-weight: 600;
  font-size: 0.85rem;
}
.admin-sf-card-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.admin-sf-card-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.admin-sf-kind-badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-left: 0.4rem;
}
.admin-sf-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
}
.admin-sf-user-chip button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}

/* Service-feed notification card accent stripe */
.notification-drawer-item.service-feed {
  border-left: 3px solid var(--service-feed-accent, #e6a700);
}
.notification-drawer-item.service-feed .notification-drawer-item-icon {
  background: var(--service-feed-accent, #e6a700);
  color: #000;
}


/* ── Admin user profile modal: explicit dark background + zero outer padding ──
   The default .modal-card rule sets padding: 1.25rem 1.5rem, which leaves a
   ~20px empty bar at the bottom of the modal below the footer (and ~20px
   above the header). The body+footer already have their own padding, so the
   outer card padding is redundant. Also force a dark elevated background so
   the modal matches the rest of the dark UI even when --surface resolves to a
   lighter color in some themes. */
#admin-user-profile-modal .modal-card {
  padding: 0;
  background: var(--bg-elevated, #1a1e2a);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ── Generic modal footer (right-aligned action row at the bottom of a
   modal — used by the admin user profile modal for the Edit / Save /
   Cancel buttons. Reusable for any future modal that needs a footer
   action row. */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border, #2a2e3a);
  background: var(--bg-elevated, #1f2128);
  flex-shrink: 0;
}
.modal-footer.hidden { display: none; }

/* ── Kebab menu (admin user profile + reusable) ──────────────────────────── */
.kebab-menu {
  display: inline-block;
  position: relative;
}
.kebab-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background-color: var(--bg-elevated, #1f2128);
  background-image: none; /* prevent any inherited gradient */
  color: var(--text, #e0e0e0);
  border: 1px solid var(--border, #2a2e3a);
  border-radius: var(--radius, 6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 0.3rem;
  z-index: 1000;
}
.kebab-menu-popover.hidden {
  display: none;
}
.kebab-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text, #e0e0e0);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.kebab-menu-item:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}
.kebab-menu-item i {
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--muted, #8b95a8);
}
.kebab-menu-item.danger {
  color: var(--danger, #ef4444);
}
.kebab-menu-item.danger i {
  color: var(--danger, #ef4444);
}
.kebab-menu-divider {
  height: 1px;
  background: var(--border, #2a2e3a);
  margin: 0.3rem 0;
}

/* ── Tabler icon picker (user avatar + mail tab appearance) ── */
.tabler-icon-picker-card {
  width: 720px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.tabler-icon-picker-card .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border, #3a3a3a);
  background: var(--bg-elevated, #2a2a2a);
}
.tabler-icon-picker-body {
  overflow-y: auto;
  padding: 1rem;
  flex: 1;
  min-height: 0;
}
.tabler-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.4rem;
}
.tabler-icon-pick {
  background: var(--bg-elevated, #2a2a2a);
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 6px;
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
  font-size: 1.3rem;
  color: var(--text, #eee);
  aspect-ratio: 1 / 1;
}
.tabler-icon-pick:hover {
  border-color: var(--accent, #4f8cff);
}
.tabler-icon-pick.selected {
  border-color: var(--accent, #4f8cff);
  background: var(--accent, #4f8cff);
  color: #fff;
}
@media (max-width: 720px) {
  .tabler-icon-picker-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ── Avatar chips (users + contacts) ── */
.user-avatar-chip,
.contact-avatar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated, #2a2a2a);
  color: var(--text, #eee);
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}
.user-avatar-chip[data-size="sm"], .contact-avatar-chip[data-size="sm"] { width: 24px; height: 24px; font-size: 0.7rem; }
.user-avatar-chip[data-size="md"], .contact-avatar-chip[data-size="md"] { width: 32px; height: 32px; font-size: 0.85rem; }
.user-avatar-chip[data-size="lg"], .contact-avatar-chip[data-size="lg"] { width: 48px; height: 48px; font-size: 1.2rem; }
.user-avatar-chip img, .contact-avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.user-avatar-chip.user-avatar-icon, .contact-avatar-chip.contact-avatar-icon {
  /* Icon style — accent bg set inline */
  font-size: 1rem;
}