/* styles.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sidebar-width: 240px;
  --detail-width: 420px;
  --font: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Brand + functional palette — source of truth. The theme variables
     below derive from these so every existing call site (~800 across the
     app) picks up the palette without being individually rewritten. ── */
  --color-primary: #1C96E8;       /* Sky Blue (was Marquee Violet) */
  --color-secondary-1: #FF6B4A;   /* Afterglow Coral */
  --color-secondary-2: #0EA5A0;   /* Riser Teal */
  --color-ink: #18161E;           /* Backstage Ink */
  --color-border: #D9D7E2;        /* Soundcheck Grey */
  --color-bg: #FAF9FC;            /* Marquee White */
  --color-success: #1F9D55;
  --color-warning: #F5A623;
  --color-danger: #E5484D;
  --color-danger-bg: #FBE7E8;
  --color-danger-border: #F0A3A6;
  --color-info: #64748B;
  /* Darker variants for small text sitting directly on that color's own
     light -bg tint (status chips/badges) — checked against WCAG AA: the
     base brand colors alone read around 3:1-4.2:1 there, below the 4.5:1
     needed for text that size; these clear 4.5:1 while staying the same hue. */
  --color-success-text: #197E44;
  --color-warning-text: #936415;
  --color-danger-text: #BC3B3F;
  --color-info-text: #606F85;

  --text: var(--color-ink);
  --text-secondary: #6b7280;
  --text-placeholder: #9ca3af;
  --border: var(--color-border);
  --border-light: #f3f4f6;
  --bg: var(--color-bg);
  --bg-sidebar: #f9fafb;
  --bg-hover: #f3f4f6;
  --bg-active: #e9ecf0;
  --accent-amber: var(--color-warning);
  --accent-amber-bg: #FEF2E0;
  --accent-amber-border: #F8C978;
  --accent-blue: var(--color-primary);
  --accent-blue-bg: #E8F4FD;
  --accent-blue-border: #A5D3F6;
  --accent-green: var(--color-success);
  --accent-green-bg: #E6F6EB;
  --accent-green-border: #8FD2A8;
  --accent-grey: var(--color-info);
  --accent-grey-bg: #EEF1F4;
  --accent-grey-border: #C3CBD6;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}

html, body { height: 100%; font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg); }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: var(--text); }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── App Layout ────────────────────────────────────────────────────────── */

#app { display: flex; height: 100vh; overflow: hidden; }

#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: width 250ms ease, min-width 250ms ease;
}

#sidebar-hamburger {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#sidebar-hamburger:hover { color: var(--text); }

/* Manual collapse toggle, shown inline in the header while it's expanded
   (Backstage only — see #sidebar-collapse-btn's hidden/visible toggling in
   app.js) — the sidebar no longer auto-collapses on entering Backstage, so
   this plus the hamburger above are the only ways in/out of the collapsed
   state now. */
#sidebar-collapse-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}
#sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text); }

#app.dashboard-sidebar-collapsed #sidebar {
  width: 56px;
  min-width: 56px;
}

#app.dashboard-sidebar-collapsed #sidebar.sidebar--hover-open {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  z-index: 20;
  box-shadow: 2px 0 12px rgba(0,0,0,0.08);
}

#app.dashboard-sidebar-collapsed #sidebar-hamburger {
  display: flex;
}

#app.dashboard-sidebar-collapsed #sidebar.sidebar--hover-open #sidebar-hamburger {
  display: none;
}

/* Hide all sidebar content when collapsed — only hamburger remains */
#app.dashboard-sidebar-collapsed #sidebar-header,
#app.dashboard-sidebar-collapsed #teams-list,
#app.dashboard-sidebar-collapsed #sidebar-footer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease;
}

/* Restore content when sidebar is hover-opened */
#app.dashboard-sidebar-collapsed #sidebar.sidebar--hover-open #sidebar-header,
#app.dashboard-sidebar-collapsed #sidebar.sidebar--hover-open #teams-list,
#app.dashboard-sidebar-collapsed #sidebar.sidebar--hover-open #sidebar-footer {
  opacity: 1;
  visibility: visible;
}

#sidebar-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 12px 10px;
  border-bottom: 1px solid var(--border);
}

#teams-list { flex: 1; overflow-y: auto; padding: 6px 0; }

/* ── Sidebar: Team picker + Projects ───────────────────────────────────── */

.team-picker-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.team-picker-btn:hover { background: var(--bg-hover); }

.team-picker-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.team-picker-chevron {
  font-size: 10px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.team-options-btn {
  width: 22px; height: 22px;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.team-options-btn:hover { background: var(--bg-active); color: var(--text); }

/* ── Team (artist) picker popover ─────────────────────────────────────── */

.team-picker-popover {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  width: 260px;
  max-width: calc(100vw - 16px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.team-picker-header-row {
  display: flex;
  gap: 4px;
}
.team-picker-add-item {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-blue);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-picker-add-item:hover { background: var(--bg-hover); }
.team-picker-stage-toggle {
  flex-shrink: 0;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.team-picker-stage-toggle:hover { background: var(--bg-hover); }
.team-picker-search {
  margin: 4px 0 6px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.team-picker-search::placeholder { color: var(--text-placeholder); }
.team-picker-list {
  max-height: 260px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
.team-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
}
.team-picker-item:hover { background: var(--bg-hover); }
.team-picker-item.active { font-weight: 600; }
.team-picker-item-check {
  width: 14px;
  flex-shrink: 0;
  color: var(--text);
  font-size: 11px;
}
.team-picker-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .project-menu-btn defaults to opacity:0, revealed only on .project-item
   hover (the sidebar's own project rows) — always show it here instead,
   since these popover rows aren't that hover context. */
.team-picker-item .project-menu-btn { opacity: 1; }
.team-picker-empty {
  padding: 8px;
  font-size: 12px;
  color: var(--text-placeholder);
  text-align: center;
}

.sidebar-empty-state {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.sidebar-add-project-btn {
  display: flex;
  align-items: center;
  width: calc(100% - 8px);
  margin: 4px 4px 0;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sidebar-add-project-btn:hover { background: var(--bg-hover); color: var(--text); }

.project-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 1px 4px;
  /* Reserved at full width always (transparent when idle) so the active
     state's accent stripe never shifts the row's content on selection. */
  border-left: 2px solid transparent;
}
.project-item:hover { background: var(--bg-hover); }
.project-item.active { background: var(--bg-active); border-left-color: var(--color-primary); }
.project-item:hover .project-menu-btn { opacity: 1; }
.project-item--guest-locked { opacity: 0.4; cursor: not-allowed; }
.project-item--guest-locked:hover { background: none; }

.project-icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-secondary); display: flex; align-items: center; }
.project-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-menu-btn {
  font-size: 14px;
  color: var(--text-secondary);
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  opacity: 0;
  flex-shrink: 0;
}
.project-menu-btn:hover { background: var(--bg-active); }

/* ── Main Area ─────────────────────────────────────────────────────────── */

#main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#main-header {
  display: flex;
  flex-direction: column;
  padding: 12px 20px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* The detail panel is position:fixed and doesn't shrink #main-header's own
   box, so this row would otherwise sit underneath it. Same reserved-width
   pattern already used for #board-view — pushes everything left, clear of
   the panel — which is what actually fixes the "squished" crowding on a
   narrower (e.g. 14") screen, by giving each row its own line instead of
   everything competing for one shrinking row. */
#app.detail-panel-open #main-header {
  padding-right: max(380px, 45vw);
}

#header-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

/* Sits above #view-tabs (also right-aligned, in the row below) instead of
   the sidebar footer — full-width/dark-pill sidebar look doesn't apply once
   it's inline next to the project title, so cancel the width and shrink
   the padding to match the other header buttons. */
#header-row-1 #dashboard-btn {
  width: auto;
  padding: 6px 14px;
}

#header-row-2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 0;
}

#dashboard-header-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* While a personal project is open in Backstage, the Overview/Calendar/
   Templates/My Socials tabs collapse into a small » indicator — hovering
   reveals them (closes again on mouse-out); clicking one navigates away
   and un-collapses this for good (dashboard.js's tab click handler removes
   the class). Pure CSS :hover — .dash-tab-btn are normal flex-item
   children, so revealing them just grows this row in place, no absolute-
   overlay flicker risk. */
/* Private project open (Backstage menu open): no Backstage tabs at all —
   the ☰ menu decides (closing it brings Overview + tabs back). */
#dashboard-header-tabs.dash-tabs-collapsed { display: none !important; }

#header-row-2-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#project-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.project-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-title-menu-btn {
  width: 22px; height: 22px;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.project-title-menu-btn:hover { background: var(--bg-active); color: var(--text); }

#add-show-btn, #add-tour-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
}
#add-show-btn:hover, #add-tour-btn:hover { background: var(--bg-hover); border-color: var(--text-secondary); }

#view-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 0;
}

.view-tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color 0.1s, border-color 0.1s;
}
.view-tab:hover { color: var(--text); }
.view-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Email — grouped with the view tabs (same padding/rhythm) but not one
   itself: deliberately a separate class from .view-tab so it's excluded
   from the generic "[data-view] tab switch" click handler, and always
   visible regardless of which view (List/Board/Calendar) is active. */
#view-tabs-divider { width: 1px; height: 16px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
#email-header-btn {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color 0.1s, border-color 0.1s;
}
#email-header-btn:hover { color: var(--text); }

/* A toggle, not a route — bordered pill instead of the bare-underline tab
   style. Sits in #header-row-1 now (next to Add Tour/Add Show), spaced by
   that row's own flex gap. */
#past-shows-toggle-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#past-shows-toggle-btn:hover { color: var(--text); border-color: var(--text-secondary); }
#past-shows-toggle-btn.active {
  color: var(--accent-blue);
  border-color: var(--accent-blue-border);
  background: var(--accent-blue-bg);
}

/* ── Past Shows: year picker ───────────────────────────────────────────── */

.past-shows-year-bar { padding: 16px 20px 0; }
.past-shows-year-trigger {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.past-shows-year-trigger:hover { background: var(--bg-hover); border-color: var(--text-secondary); }

.past-shows-year-popup {
  position: fixed;
  z-index: 1000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 100px;
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.past-shows-year-item {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.past-shows-year-item:hover { background: var(--bg-hover); }
.past-shows-year-item.active { color: var(--color-primary); font-weight: 600; }

#main-content { flex: 1; overflow-y: auto; }

.hidden { display: none !important; }

/* ── List View: Empty State ────────────────────────────────────────────── */

#list-view, #board-view { min-height: 100%; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 60px 20px;
  color: var(--text-secondary);
  gap: 8px;
}
.empty-state p { font-size: 13px; }

/* ── List View: Sections ───────────────────────────────────────────────── */

.section-block { margin-bottom: 4px; }

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  cursor: pointer;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.section-chevron {
  font-size: 10px;
  color: var(--text-secondary);
  width: 14px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.section-chevron.open { transform: rotate(90deg); }

/* .section-color-dot removed (dots no longer shown in section headers) */

.section-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.color-amber .section-name { color: #92400e; }
.color-blue .section-name { color: #1679C4; }
.color-green .section-name { color: #065f46; }
.color-grey .section-name { color: #4b5563; }

.section-count {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
}

.section-menu-btn {
  font-size: 14px;
  color: var(--text-secondary);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.section-menu-btn:hover { background: var(--bg-hover); color: var(--text); }

.section-tasks { }

/* ── List View: Tours ──────────────────────────────────────────────────── */

.tour-block { margin-bottom: 4px; }

.tour-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  cursor: pointer;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 11;
  font-weight: 600;
}
.tour-header:hover { background: var(--bg-hover); }
.tour-header.active { background: var(--bg-hover); }

.tour-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}

.tour-sections { padding-left: 16px; }

/* ── Detail: Tour Overview ─────────────────────────────────────────────── */

.tour-overview-title {
  font-size: 15px;
  font-weight: 600;
  padding: 4px 0;
  margin-bottom: 14px;
  color: var(--text);
}

.tour-overview-list { display: flex; flex-direction: column; gap: 2px; }

.tour-overview-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.tour-overview-row:hover { background: var(--bg-hover); }

.tour-overview-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  flex-shrink: 0;
  width: 100px;
}

.tour-overview-date { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.tour-overview-name { font-size: 13px; color: var(--text); }
.tour-overview-empty { font-size: 13px; color: var(--text-secondary); padding: 8px 4px; }

/* STATUS / SHOW column headers above the list — same two-column layout as
   the rows below (no vertical dividers, just this row's own underline),
   .tour-overview-status already reads as a header style as-is. */
.tour-overview-header { cursor: default; }
.tour-overview-header:hover { background: none; }
.tour-overview-header .tour-overview-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* Tour planning notes — full-width, no inline label (the "Notes" tab
   itself is the label). */
.detail-tour-notes-field { border-bottom: none; }

/* ── List Column Header ────────────────────────────────────────────────── */

/* ── Quick "Add Show" entry row ────────────────────────────────────────── */

.quick-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}
.quick-add-mode-toggle { display: flex; gap: 4px; flex-shrink: 0; }
.quick-add-mode-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg);
  white-space: nowrap;
}
.quick-add-mode-btn:hover { border-color: var(--text-secondary); }
.quick-add-mode-btn.active { background: var(--bg-active); border-color: var(--text-secondary); color: var(--text); font-weight: 500; }

.quick-add-tour-select {
  flex: 0 0 130px;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.quick-add-tour-select:hover { border-color: var(--text-secondary); }

.quick-add-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.quick-add-input::placeholder { color: var(--text-placeholder); }
.quick-add-name { flex: 2; }

.quick-add-submit-btn {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--text);
  color: #fff;
  cursor: pointer;
}
.quick-add-submit-btn:hover { filter: brightness(1.1); }

.quick-add-close-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.quick-add-close-btn:hover { background: var(--bg-hover); color: var(--text); }

.quick-add-paste-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.quick-add-paste-btn:hover { border-color: var(--text-secondary); background: var(--bg-hover); }

.quick-add-offer-popover {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  width: 340px;
  z-index: 1000;
}
.quick-add-offer-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.quick-add-offer-textarea {
  width: 100%;
  min-height: 120px;
  font-size: 12px;
  font-family: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}
.quick-add-offer-textarea::placeholder { color: var(--text-placeholder); }
.quick-add-offer-textarea:disabled { opacity: 0.6; }
.quick-add-offer-dropzone {
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
}
.quick-add-offer-dropzone:hover { border-color: var(--text-secondary); color: var(--text); }
.quick-add-offer-dropzone--active { border-color: var(--text); background: var(--bg-hover); color: var(--text); }
.quick-add-offer-dropzone--disabled { opacity: 0.5; pointer-events: none; }
.quick-add-offer-status {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.quick-add-offer-status--error { color: var(--color-warning); }
.quick-add-offer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.quick-add-offer-cancel-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.quick-add-offer-cancel-btn:hover { background: var(--bg-hover); color: var(--text); }
.quick-add-offer-cancel-btn:disabled, .quick-add-offer-import-btn:disabled { opacity: 0.6; cursor: default; }
.quick-add-offer-import-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--text);
  color: #fff;
  cursor: pointer;
}
.quick-add-offer-import-btn:hover { filter: brightness(1.1); }

.list-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 20px 5px 85px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 11;
  user-select: none;
}

.list-col-header .col-h {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: grab;
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.list-col-header .col-h:hover { background: var(--bg-hover); }
.list-col-header .col-h:active { cursor: grabbing; }
.list-col-header .col-h.dragging { opacity: 0.35; }
.list-col-header .col-h.drag-over {
  background: var(--accent-blue-bg);
  border-color: var(--accent-blue-border);
}

.col-drag-handle {
  font-size: 11px;
  color: var(--text-placeholder);
  opacity: 0;
  line-height: 1;
}
.list-col-header .col-h:hover .col-drag-handle { opacity: 1; }

.list-col-header .col-h-name { flex: 2 1 0; min-width: 0; }
.list-col-header .col-h-date { width: 120px; flex-shrink: 0; }
.list-col-header .col-h-notes { flex: 1 1 0; min-width: 0; }
.list-col-header .col-h-spacer { width: 20px; flex-shrink: 0; }

/* ── Task Rows ─────────────────────────────────────────────────────────── */

.task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px 6px 62px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  position: relative;
  min-height: 36px;
}
.task-row:hover { background: var(--bg-hover); }
.task-row.active { background: var(--bg-active); }
.task-row:hover .task-menu-btn { opacity: 1; }

.task-row-left-border {
  position: absolute;
  left: 20px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  opacity: 0;
}
.task-row:hover .task-row-left-border,
.task-row.active .task-row-left-border { opacity: 1; }
.color-amber .task-row-left-border { background: var(--accent-amber); }
.color-blue .task-row-left-border { background: var(--accent-blue); }
.color-green .task-row-left-border { background: var(--accent-green); }
.color-grey .task-row-left-border { background: var(--accent-grey); }

.task-checkbox {
  width: 15px; height: 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.1s, background 0.1s;
}
.task-checkbox:hover { border-color: var(--text-secondary); }
.task-checkbox.checked { border-color: var(--accent-green); background: var(--accent-green); }
.task-checkbox.checked::after {
  content: '';
  width: 7px; height: 4px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

/* ── Task column wrappers ── */
.task-col-name {
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}

.task-col-date {
  width: 120px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.task-col-notes {
  flex: 1 1 0;
  min-width: 0;
  cursor: text;
  padding: 2px 0;
}

.task-note-text {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: 1.4;
}
.task-note-text.placeholder { color: var(--text-placeholder); font-style: italic; }

.task-notes-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  color: var(--text);
  padding: 0;
}

.task-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-title.done { text-decoration: line-through; color: var(--text-secondary); }
.task-title.placeholder { color: var(--text-placeholder); font-style: italic; }

.task-title-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  padding: 0;
}

.task-menu-btn {
  font-size: 14px;
  color: var(--text-secondary);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  opacity: 0;
  flex-shrink: 0;
}
.task-menu-btn:hover { background: var(--bg-active); color: var(--text); }


/* ── Board View ────────────────────────────────────────────────────────── */

#board-view {
  display: flex;
  gap: 16px;
  padding: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  align-items: flex-start;
  scroll-snap-type: x mandatory;
}

/* The detail panel is position:fixed and doesn't shrink #board-view's own box,
   so columns that fit within the panel-obstructed width would otherwise sit
   underneath it with no overflow to scroll through. Reserve that width as
   trailing padding so the board always has room to scroll the last column(s)
   clear of the panel. */
#app.detail-panel-open #board-view {
  padding-right: max(380px, 45vw);
}

/* Admin's button grid can live in either #list-view or #board-view (both
   render the exact same grid for tmpl_admin projects) — same reserved-width
   reflow pattern as #board-view above, so the grid narrows and naturally
   wraps to fewer per row via flex-wrap once the panel opens, rather than
   sitting underneath it. */
#app.detail-panel-open #list-view {
  padding-right: max(380px, 45vw);
}

/* Same reflow pattern for Finance — per-Team (#finance-view) and Backstage
   Agency/Artist (rendered inside #dashboard-view) both need to push clear
   of the panel when an invoice opens in it. */
#app.detail-panel-open #finance-view,
#app.detail-panel-open #dashboard-view {
  padding-right: max(380px, 45vw);
}

.admin-section-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
}

/* List view: one full-width row per section, stacked top to bottom — a real
   list, not a grid (Board view keeps the wrapping grid above). */
.admin-section-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}
.admin-section-list .admin-section-btn {
  width: 100%;
  flex: none;
}

.admin-section-btn {
  flex: 0 1 calc(33.333% - 11px);
  min-width: 220px;
  padding: 20px 16px 20px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  /* Reserved at full width always (transparent when idle) so the active
     state's accent stripe never shifts the row's content on selection. */
  border-left-width: 3px;
  border-left-color: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.admin-section-btn:hover { background: var(--bg-hover); border-color: var(--text-secondary); }
/* Whichever pitch/admin button is currently open reads as a clearly
   "selected" card: a bold accent stripe down the left edge (not just a
   tint, so it's legible at a glance) plus a soft lift shadow. */
.admin-section-btn.active {
  border-color: var(--accent-blue);
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.25);
}
.admin-section-btn:disabled { opacity: 0.5; cursor: default; }

/* Admin project's Band-only "Contract" button + its inline template picker */
.admin-contract-btn { border-color: var(--accent-green); color: var(--accent-green); }
.admin-contract-btn:hover { background: var(--accent-green-bg); }

/* Pitch grid: inline create-new-pitch / rename-in-place input, same box as
   the buttons it swaps in for so nothing shifts around it. The fixed
   "{Band Name} | Pitch |" prefix (when given) sits inside the same box as
   plain, non-editable text — only the input itself is ever typed into. */
.admin-pitch-inline-wrap {
  flex: 0 1 calc(33.333% - 11px);
  min-width: 220px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius);
  background: var(--bg);
}
.admin-section-list .admin-pitch-inline-wrap { width: 100%; flex: none; }
.admin-pitch-inline-prefix {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.admin-pitch-inline-input {
  flex: 1 1 auto;
  min-width: 60px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  border: none;
}
.admin-pitch-inline-input:focus { outline: none; }

/* Pitch grid: one bar per pitch (same box as any other admin-section-btn),
   with the "⋮" options trigger sitting inside its own right edge — same
   inline pattern as the sidebar's .project-item/.project-menu-btn, not a
   second separate box next to it. */
.admin-pitch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.admin-pitch-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-pitch-menu-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-size: 14px;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.admin-pitch-menu-btn:hover { background: var(--bg-active); color: var(--text); }
.admin-contract-picker {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-contract-picker-item {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
}
.admin-contract-picker-item:last-child { border-bottom: none; }
.admin-contract-picker-item:hover { background: var(--bg-hover); }
.admin-contract-picker-item.active { color: var(--accent-blue); font-weight: 600; background: var(--accent-blue-bg); }
.admin-contract-picker-empty { padding: 14px; font-size: 12px; color: var(--text-placeholder); font-style: italic; }

/* Contracts project: grouped Year → Tour/Shows */
.contracts-year-block { margin-bottom: 28px; }
.contracts-year-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.contracts-group-block { margin-bottom: 16px; }
.contracts-group-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.contracts-cards-row { display: flex; flex-wrap: wrap; gap: 10px; }
.contracts-cards-row .admin-section-btn { flex: 0 1 220px; min-width: 180px; padding: 16px 18px; }

.board-column {
  min-width: 260px;
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  scroll-snap-align: start;
}

/* Once a project has tours: a vertically-stacked "Shows" group (standalone
   one-off shows) plus one group per tour, each a collapsible bar spanning
   its own row of Planning/Optioned/Confirmed/Settlement columns — with Past
   Shows sitting outside all of that, on its own, independently collapsible. */
.board-view-wrap { display: flex; align-items: flex-start; gap: 16px; }
.board-groups-stack { display: flex; flex-direction: column; gap: 16px; }

.board-group-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.board-group-bar:hover { background: var(--bg-hover); }

.board-group-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
.board-group-count { font-size: 11px; color: var(--text-secondary); }

.board-group-columns { display: flex; gap: 16px; }

.board-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.board-col-title {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.color-amber .board-col-title { color: #92400e; }
.color-blue .board-col-title { color: #1679C4; }
.color-green .board-col-title { color: #065f46; }
.color-grey .board-col-title { color: #4b5563; }

.board-col-count { font-size: 11px; color: var(--text-secondary); }

.board-tasks { padding: 8px; display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius-sm); transition: background 0.1s, box-shadow 0.1s; }
.board-tasks.drag-over { background: var(--bg-hover); box-shadow: inset 0 0 0 2px var(--accent-blue-border); }

.board-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.board-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.board-card[draggable="true"]:active { cursor: grabbing; }
.color-amber .board-card { border-left-color: var(--accent-amber); }
.color-blue .board-card { border-left-color: var(--accent-blue); }
.color-green .board-card { border-left-color: var(--accent-green); }
.color-grey .board-card { border-left-color: var(--accent-grey); }
.board-card.active { background: var(--bg-active); }

.board-card-title { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.board-card-date { font-size: 11px; color: var(--text-secondary); }

/* ── Confirmed + Advance tile pills (board card / list row) ─────────────── */

.tile-pill-row { display: inline-flex; align-items: center; gap: 4px; }
.board-card .tile-pill-row { display: flex; margin-top: 6px; }
.task-col-name .tile-pill-row { margin-left: 8px; }

.tile-pill {
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg);
  color: var(--text-secondary);
}
.tile-pill.confirmed { background: var(--accent-green-bg); border-color: var(--accent-green); color: #065f46; }
.tile-pill.advance-default { background: var(--bg); border-color: var(--border); color: var(--text-secondary); }
.tile-pill.advance-soon { background: var(--accent-amber-bg); border-color: var(--accent-amber); color: #92400e; }
.tile-pill.advance-done { background: var(--accent-green-bg); border-color: var(--accent-green); color: #065f46; }

.board-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  border-top: 1px solid var(--border);
}
.board-add-btn:hover { background: var(--bg-hover); color: var(--text); }

/* ── Detail Panel ──────────────────────────────────────────────────────── */

#detail-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  min-width: 380px;
  z-index: 200;
  background: var(--bg);
  box-shadow: -6px 0 32px rgba(0,0,0,0.12), -1px 0 0 var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#detail-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  position: relative;
  padding-bottom: 16px;
}

.detail-nav-arrow {
  display: none !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.detail-nav-arrow:hover:not(:disabled) { opacity: 1; background: var(--bg-hover); }
.detail-nav-arrow:disabled { opacity: 0.15; cursor: not-allowed; }
/* Both sit fully inside the panel's own box (not straddling its edge) so
   they're never visually clipped or overlapped by whatever renders behind
   the panel (calendar, board, list). */
.detail-nav-arrow--prev { left: 16px; }
.detail-nav-arrow--next { right: 16px; }

#detail-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 0 16px;
}

#detail-bottom .comment-section {
  margin-top: 0;
  border-top: none;
  padding-top: 10px;
}

#detail-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 10px 12px 0 0;
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  background: var(--bg);
}
#detail-close:hover { background: var(--bg-hover); color: var(--text); }

#detail-content { padding: 16px 20px 0; }

/* ── Detail: Title ─────────────────────────────────────────────────────── */

.detail-title-input {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  border: none;
  outline: none;
  padding: 4px 0;
  margin-bottom: 14px;
  background: transparent;
  resize: none;
  line-height: 1.4;
  color: var(--text);
}
.detail-title-input::placeholder { color: var(--text-placeholder); font-style: italic; font-weight: 400; }

/* ── Detail: Dates ─────────────────────────────────────────────────────── */

.detail-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* Date:/Tour:/Status: labels share one fixed width so the date pill, tour
   dropdown and status pills all start at the same left edge. */
.detail-dates label { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; min-width: 42px; }

.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.1s, background 0.1s;
}
.date-pill:hover { border-color: var(--text-secondary); background: var(--bg-hover); }
.date-pill.has-date { color: var(--text); }
.date-pill.empty { color: var(--text-secondary); }
.date-pill .pill-icon { font-size: 11px; }
.date-arrow { color: var(--text-secondary); font-size: 12px; }

/* ── Detail: Tour Selector ────────────────────────────────────────────── */

.detail-tour-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.detail-tour-selector label { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; min-width: 42px; }
.detail-tour-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

/* ── Detail: Section Selector ──────────────────────────────────────────── */

.detail-section-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.detail-section-selector label { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; min-width: 44px; }

.section-pill {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  background: var(--bg);
  color: var(--text-secondary);
  transition: all 0.1s;
}
.section-pill:hover { border-color: var(--text-secondary); color: var(--text); }
.section-pill.active.color-amber { background: var(--accent-amber-bg); border-color: var(--accent-amber); color: #92400e; }
.section-pill.active.color-blue { background: var(--accent-blue-bg); border-color: var(--accent-blue); color: #1679C4; }
.section-pill.active.color-green { background: var(--accent-green-bg); border-color: var(--accent-green); color: #065f46; }
.section-pill.active.color-grey { background: var(--accent-grey-bg); border-color: var(--accent-grey); color: #4b5563; }

/* Advance pseudo-stage pill (Confirmed → Advance → Settlement) — not a real
   section, always colored (not gated by .active) since its own
   done/soon/default state carries the meaning, not whether it's "current". */
.section-pill.advance-pill.advance-default { background: var(--bg); border-color: var(--border); color: var(--text-secondary); }
.section-pill.advance-pill.advance-soon { background: var(--accent-amber-bg); border-color: var(--accent-amber); color: #92400e; }
.section-pill.advance-pill.advance-done { background: var(--accent-green-bg); border-color: var(--accent-green); color: #065f46; }

.section-pill-arrow {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── Detail: Checklist ─────────────────────────────────────────────────── */

.detail-checklist {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.checklist-checkbox {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  transition: all 0.1s;
}
.checklist-checkbox.checked { border-color: var(--accent-green); background: var(--accent-green); }
.checklist-checkbox.checked::after {
  content: '';
  width: 6px; height: 3px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

/* Advance tab's own "done" checkbox — sits left of the "Advance" label,
   same visual language as .checklist-checkbox. */
.detail-ts-tab-advance-check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.1s;
}
.detail-ts-tab-advance-check.checked { border-color: var(--accent-green); background: var(--accent-green); }
.detail-ts-tab-advance-check.checked::after {
  content: '';
  width: 6px; height: 3px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
}
.detail-ts-tab.active .detail-ts-tab-advance-check:not(.checked) { border-color: rgba(255,255,255,0.6); }
.checklist-label { font-size: 11px; color: var(--text-secondary); }
.checklist-item:hover .checklist-label { color: var(--text); }

/* ── Detail: Sections (Notes / Advance) — tab bar + panels ───────────────── */

.detail-ts-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.detail-ts-tab {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  max-width: 180px;
  overflow: hidden;
}

.detail-ts-tab:hover { background: var(--bg-hover); color: var(--text); }
.detail-ts-tab.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.detail-ts-tab.active .detail-ts-drag-handle,
.detail-ts-tab.active .detail-rename-btn--heading,
.detail-ts-tab.active .detail-inline-delete-btn { color: rgba(255,255,255,0.75); }

.detail-ts-tab-title { display: flex; align-items: center; gap: 3px; overflow: hidden; min-width: 0; }
.detail-ts-tab-title .detail-heading-title-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.detail-ts-tab-add {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.detail-ts-tab-add:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-secondary); }

.detail-ts-panel { margin-bottom: 6px; }
.detail-ts-panel:not(.active) { display: none; }

/* "View" dropdown — sits inline at the start of the Advance sub-tab row
   (left of Overview), narrowing which sub-tabs show. */
.detail-tm-visibility-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 0 0;
  padding-right: 8px;
  border-right: 1px solid var(--border);
}
.detail-tm-visibility-label { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.detail-tm-visibility-trigger {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.detail-tm-visibility-trigger:hover { border-color: var(--text-secondary); }

.detail-tm-visibility-popup {
  position: fixed;
  z-index: 1000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 4px;
  animation: fadeIn 0.08s ease;
}
.detail-tm-visibility-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.detail-tm-visibility-row:hover { background: var(--bg-hover); }
.detail-tm-visibility-row-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-tm-visibility-check {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #fff;
}
.detail-tm-visibility-row.checked .detail-tm-visibility-check {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}
.detail-tm-visibility-divider { height: 1px; background: var(--border); margin: 3px 0; }

/* Hidden via the "View" dropdown — the tab (and so its panel, which only
   ever shows when its tab is .active) simply never renders into the row. */
.detail-tm-tab--hidden { display: none; }

/* Named TMs rendered as a second row of tabs (e.g. Advance) instead of
   stacking as collapsible sections — reuses .detail-ts-tabs/.detail-ts-tab
   directly for an identical folder-tab look, just slightly smaller/lighter
   so it visually reads as a sub-level under the Overview/Advance switcher. */
.detail-tm-tabs {
  margin-top: 2px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  /* Always exactly one row, never scrolls — tabs shrink individually
     (labels ellipsis-truncate via .detail-heading-title-text) so the
     whole set always fits the row width, whatever size that leaves each one. */
  flex-wrap: nowrap;
}
/* Plain flex-shrink distributes the squeeze proportionally to each tab's
   own width, which crushes short labels ("Overview") just as hard as long
   ones ("Accommodation") even though they'd easily fit on their own — an
   explicit min-width floor protects the short ones (letting shrink
   concentrate on the longer labels instead) without ever overflowing the row. */
.detail-tm-tab { font-size: 10.5px; padding: 3px 6px; max-width: 120px; min-width: 70px; flex-shrink: 1; justify-content: center; }

/* Below this width, even the min-width floor above no longer fits on one
   row — rather than let tabs overflow/clip (unreadable), switch to an
   evenly-distributed wrapping grid: same number of columns in every row,
   each sized to fill its share, growing to as many rows as it takes. */
@media (max-width: 1400px) {
  .detail-tm-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 4px;
  }
  .detail-tm-tab { max-width: none; min-width: 0; width: 100%; }
}
.detail-tm-tab-suffix { font-size: 10px; opacity: 0.85; }
.detail-tm-tab-panels { margin-bottom: 6px; }
.detail-tm-tab-panel:not(.active) { display: none; }

/* Guest roles: whole tab is inert — no inputs, add/delete/drag controls, or
   save actions reachable, without needing per-field readonly wiring. */
.detail-ts-panel--readonly {
  pointer-events: none;
  opacity: 0.72;
}

.detail-ts-locked {
  padding: 32px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.detail-ts-panel-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 14px;
  margin-bottom: 4px;
}

/* ── Detail: Task Modules (TM) — collapsible sub-groups within a TS ──────── */

.detail-module-group {
  margin-bottom: 4px;
  margin-left: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--border-light);
}

.detail-module-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  padding: 5px 0 3px;
  margin-top: 8px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-light);
}
.detail-module-group.collapsed > :not(.detail-module-heading) { display: none; }
.detail-tm-header-suffix { font-weight: 400; color: var(--text-secondary); }

.tm-expand-all-btn {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  padding: 0;
  flex-shrink: 0;
}
.tm-expand-all-btn:hover { opacity: 0.7; }

.detail-mark-complete-btn {
  display: block;
  margin: 10px 0 4px;
  padding: 7px 14px;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.detail-mark-complete-btn:hover { opacity: 0.85; }

.detail-field--checkbox-date { padding: 4px 0; gap: 20px; flex-wrap: wrap; }
.detail-checkbox-date-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
}
.detail-checkbox-date-wrap[hidden] { display: none; }
.detail-checkbox-group-value,
.detail-field-value.detail-checkbox-group-value { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Dropdown + Notes side by side, same row layout as every other
   dropdown-with-notes field — wider than the default 130px since Deal's own
   option labels ("Percentage of door") run longer than most. */
.detail-deal-type-select { flex: 0 0 170px; }
.detail-checkbox-date-wrap input[type="checkbox"] { cursor: pointer; }
.detail-checkbox-date-label { color: var(--text); }
.detail-checkbox-date-value { color: var(--text-secondary); font-size: 11px; }

/* Heading right-side control group (Expand All + optional delete) */
.detail-heading-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Detail: Fields ────────────────────────────────────────────────────── */

.detail-field {
  display: flex;
  align-items: flex-start;
  min-height: 36px;
  border-bottom: 1px solid var(--border-light);
  padding: 11px 0;
}
.detail-field:last-child { border-bottom: none; }

/* TL handle is hidden (width:0) — label text starts at natural left edge */
.detail-module-group .detail-field { padding-left: 41px; }
.detail-ts-panel > .detail-field { padding-left: 4px; }

/* TL cross-TM drop indicators */
.tl-drop-before { border-top: 2px solid var(--accent-blue) !important; }
.tl-drop-after  { border-bottom: 2px solid var(--accent-blue) !important; }
.tl-drop-target { outline: 2px solid var(--accent-blue); outline-offset: -1px; border-radius: 3px; }

/* TS drag handle — hidden at rest, appears on tab hover */
.detail-ts-drag-handle { flex-shrink: 0; color: var(--text-placeholder); cursor: grab; padding: 0 3px; font-size: 12px; line-height: 1; user-select: none; opacity: 0; transition: opacity 0.1s; }
.detail-ts-tab:hover .detail-ts-drag-handle { opacity: 1; }
.detail-ts-drag-handle:active { cursor: grabbing; }
.ts-dragging { opacity: 0.45; }

/* TL drag handle — zero-width (invisible, no layout space); drag initiated from whole row */
.detail-tl-drag-handle { flex-shrink: 0; width: 0; overflow: hidden; padding: 0; color: transparent; font-size: 10px; line-height: 1; user-select: none; }
.tl-dragging { opacity: 0.45; cursor: grabbing !important; }

/* TL row: blue left-border accent + grab cursor on hover (#4 + #5) */
.detail-field:hover { box-shadow: inset 3px 0 0 var(--accent-blue); cursor: grab; }
.detail-field:hover .detail-field-value { cursor: default; }
.detail-field:hover .detail-field-value select,
.detail-field:hover .detail-field-value input,
.detail-field:hover .detail-field-value textarea,
.detail-field:hover .detail-field-value button,
.detail-field:hover .detail-field-value a { cursor: pointer; }
.detail-field:hover .detail-rename-btn { cursor: pointer; }

.detail-field-label {
  width: 120px;
  min-width: 120px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-secondary);
  padding-top: 2px;
  padding-right: 12px;
  flex-shrink: 0;
  line-height: 1.4;
}

.detail-field-value {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-height: 28px;
  padding: 4px 4px;
  border-radius: var(--radius-sm);
}
.detail-field-value:hover { background: var(--bg-hover); }
/* A dropdown/time-picker paired with a growing multi-line Notes box must stay
   pinned to the top (level with the Notes box's first line) instead of
   vertically centering against however tall Notes has grown. */
.detail-field-value:has(> textarea.detail-dropdown-with-notes-input) { align-items: flex-start; }
.detail-field-value.readonly { cursor: default; }
.detail-field-value.readonly:hover { background: none; }

/* Dropdown + Notes read like two separate columns, each with its own
   hover/focus feedback — not one merged highlighted block across both. */
.detail-field-value:has(> textarea.detail-dropdown-with-notes-input):hover { background: none; }
.detail-field-value > textarea.detail-dropdown-with-notes-input {
  border-left: 1px solid var(--border);
  padding-left: 10px !important;
  margin-left: 2px;
}
.detail-field-value > textarea.detail-dropdown-with-notes-input:hover,
.detail-field-value > textarea.detail-dropdown-with-notes-input:focus {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}
.detail-field-value > .detail-time-picker-trigger:hover,
.detail-field-value > select.detail-dropdown-with-notes-select:hover,
.detail-field-value > select.detail-time-select:hover,
.detail-field-value > select.detail-deal-type-select:hover {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

/* min-width:0 stops flexbox's default "never shrink below content" rule
   from letting a select's own text (e.g. "2 x 45 min") push it past its
   flex-basis and throw off alignment with every other row's Notes column. */
.detail-dropdown-with-notes-select { flex: 0 0 130px; min-width: 0; }
.detail-dropdown-with-notes-input { flex: 1; }
/* Schedule/Show Time Notes are multi-line but start compact (one line) and
   grow with content via JS, rather than always reserving the standard
   textarea's full 48px — overrides that floor down close to a single line. */
.detail-field-textarea.detail-dropdown-with-notes-input,
.detail-field-textarea.detail-showtime-lineup-notes-input { min-height: 20px; }
/* Wide enough for the longest non-time label ("After Soundcheck", "At
   artist expense") without truncating — plain "HH:MM" values just leave
   the trigger with extra empty space. */
.detail-time-select { flex: 0 0 160px; min-width: 0; }

.detail-field-text { line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.detail-field-text.placeholder { color: var(--text-placeholder); font-style: italic; }

.detail-field-input,
.detail-field-textarea,
.detail-field-select {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  padding: 0;
  line-height: 1.4;
  width: 100%;
  color: var(--text);
  resize: none;
}
.detail-field-textarea { min-height: 48px; overflow: hidden; }

/* ── Rich textarea (Bold/Italic/Lists/Link) ───────────────────────────── */

.detail-rich-value { align-items: stretch; }
/* A rich-textarea field with no label (the Admin free-text canvas) has
   nothing to reserve the label column's width for — collapse it and the
   row's own left padding so the toolbar/editor span the full pane width,
   flush with the tabs row above instead of sitting indented past a blank
   label. */
.detail-field--rich:has(.detail-field-label:empty) { padding-left: 0; }
.detail-field--rich:has(.detail-field-label:empty) .detail-field-value { padding-left: 0; }
.detail-field--rich .detail-field-label:empty { display: none; }
/* A sole-content rich field (Tour Notes, Advance Notes, Admin free-text
   canvas — no sibling fields in its panel/tab) gets a tall editable area
   instead of the compact default, so it fills the panel instead of leaving
   a large dead gap above the Add Section/Add Label row below it. */
.detail-field--rich:has(.detail-field-label:empty) .detail-rich-editor {
  min-height: 320px;
}
.detail-rich-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.detail-rich-toolbar {
  display: flex;
  gap: 4px;
}
.detail-rich-toolbar-btn {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.detail-rich-toolbar-btn:hover { background: var(--bg-hover); }
.detail-rich-toolbar-btn[title="Italic"] { font-style: italic; }
.detail-rich-editor {
  min-height: 60px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.detail-rich-editor:focus { outline: none; border-color: var(--accent-blue); }
.detail-rich-editor ul, .detail-rich-editor ol { margin: 4px 0; padding-left: 20px; }
.detail-rich-editor a { color: var(--accent-blue); }
/* Pasted/inserted images default to a small, consistent circular avatar
   size — regardless of the source image's native resolution. The full
   pasted image data (in the img's src) is untouched, this only constrains
   display; an inline style (from a future manual-resize feature) would
   still override this class-level default via normal CSS cascade. */
.detail-rich-editor img {
  width: 115px;
  height: 115px;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  margin: 4px 0;
}
.detail-rich-image-uploading {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-sidebar);
  color: var(--text-secondary);
  font-size: 11px;
  font-style: italic;
}
.detail-field-select { cursor: pointer; }

.detail-time-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font-family: inherit;
}
.detail-time-picker-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-time-picker-trigger-chevron { flex-shrink: 0; font-size: 9px; color: var(--text-placeholder); }

/* ── Detail: Toggle (Provided/Not Provided) ────────────────────────────── */

.detail-toggle {
  display: flex;
  gap: 4px;
}
.detail-toggle-btn {
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg);
}
.detail-toggle-btn:hover { border-color: var(--text-secondary); }
.detail-toggle-btn.active { background: var(--bg-active); border-color: var(--text-secondary); color: var(--text); font-weight: 500; }


/* Sync switch on cross-task-linked fields (e.g. Band Booking ↔ Admin) — a plain
   on/off switch; the on/off state itself communicates manual vs. synced, no label needed. */
.detail-sync-switch {
  flex-shrink: 0;
  margin-left: 8px;
  width: 30px;
  height: 17px;
  padding: 2px;
  border: none;
  border-radius: 20px;
  background: var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.detail-sync-switch:hover { background: var(--text-placeholder); }
.detail-sync-switch.on { background: var(--accent-blue); }
.detail-sync-switch.on:hover { background: var(--accent-blue); }
.detail-sync-switch.on.drifted { background: var(--accent-amber); }
.detail-sync-switch.on.drifted:hover { background: var(--accent-amber); }
.detail-sync-switch-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.15s;
}
.detail-sync-switch.on .detail-sync-switch-thumb { transform: translateX(13px); }

/* ── Detail: Link Field ────────────────────────────────────────────────── */

.detail-link-add {
  font-size: 11px;
  color: var(--accent-blue);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.detail-link-add:hover { background: var(--accent-blue-bg); }

.detail-link-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.detail-link-remove {
  font-size: 10px;
  color: var(--text-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.detail-link-remove:hover { background: var(--bg-hover); color: var(--color-danger-text); }

/* ── Sub-section headers ───────────────────────────────────────────────── */

.detail-subsection {
  margin-top: 10px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Context Menu ──────────────────────────────────────────────────────── */

.context-menu {
  position: fixed;
  z-index: 1000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  padding: 4px;
  animation: fadeIn 0.08s ease;
}

@keyframes fadeIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.context-menu-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.context-menu-item:hover { background: var(--bg-hover); }
.context-menu-item.danger { color: var(--color-danger-text); }
.context-menu-item.danger:hover { background: var(--color-danger-bg); }

.context-menu-item--removable {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.context-menu-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-menu-item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-placeholder);
  font-size: 11px;
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  line-height: 1;
  cursor: pointer;
}
.context-menu-item-remove:hover { color: #d04; background: var(--bg-hover); }

.context-menu-divider { height: 1px; background: var(--border); margin: 3px 0; }

/* ── Calendar Popup ────────────────────────────────────────────────────── */

.calendar-popup {
  position: fixed;
  z-index: 1000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  width: 240px;
  animation: fadeIn 0.08s ease;
  user-select: none;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-nav {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.cal-nav:hover { background: var(--bg-hover); color: var(--text); }
.cal-title { font-size: 12px; font-weight: 600; }

.cal-day-names {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-day-names span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  padding: 2px 0;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
}
.cal-cell:not(.blank):hover { background: var(--bg-hover); }
.cal-cell.blank { cursor: default; }
.cal-cell.today { font-weight: 600; }
.cal-cell.selected { background: var(--text); color: white; border-radius: var(--radius-sm); }
.cal-cell.in-range { background: var(--bg-active); border-radius: 0; }
.cal-cell.range-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cal-cell.range-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cal-cell.range-start.range-end { border-radius: var(--radius-sm); }
.cal-cell.hover { background: var(--bg-hover); }

.cal-footer { margin-top: 8px; text-align: center; }
.cal-clear { font-size: 11px; color: var(--text-secondary); padding: 4px 8px; border-radius: var(--radius-sm); }
.cal-clear:hover { background: var(--bg-hover); color: var(--color-danger-text); }

/* ── Month-only picker (Calendar.open with mode:'month') ─────────────────── */
.cal-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cal-month-cell {
  padding: 8px 0;
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  background: none;
  border: none;
  font-family: inherit;
}
.cal-month-cell:hover { background: var(--bg-hover); }
.cal-month-cell.selected { background: var(--text); color: #fff; }

/* ── Saved Indicator ───────────────────────────────────────────────────── */

#saved-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 280px;
  background: var(--text);
  color: white;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 2000;
}
#saved-indicator.visible { opacity: 1; }

/* ── Image Upload field ────────────────────────────────────────────────── */

.detail-image-upload-input-hidden { display: none; }

.detail-image-upload-value { flex-wrap: wrap; gap: 8px; }

.detail-image-upload-btn {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.detail-image-upload-btn:hover { background: var(--bg-hover); }
.detail-image-upload-remove { color: var(--color-danger-text); }

.detail-image-upload-preview-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.detail-image-upload-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.detail-image-upload-loading {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: var(--bg-sidebar);
  color: var(--text-secondary);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}
.detail-image-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Pitch button ───────────────────────────────────────────────────────── */

/* Extra breathing room above the Open Mail/Copy row — it reads as an
   action, not just another field, so it wants more separation from
   whatever field sits directly above it than the standard 8px. */
.detail-pitch-button-row { padding-top: 24px; }
.detail-pitch-button-row .detail-field-value { justify-content: flex-end; }

.detail-pitch-email-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent-blue);
  color: #fff;
  cursor: pointer;
}
.detail-pitch-email-btn:hover { opacity: 0.9; }
.detail-pitch-email-btn:disabled { opacity: 0.6; cursor: default; }
.detail-ticket-search-status {
  font-size: 11px;
  color: var(--text-secondary);
  align-self: center;
}

.detail-pitch-copy-btn {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.detail-pitch-copy-btn:hover { background: var(--bg-hover); opacity: 1; }

/* ── Drag and Drop ─────────────────────────────────────────────────────── */

.dragging { opacity: 0.35; }

.drag-drop-indicator {
  height: 2px;
  background: var(--accent-blue);
  border-radius: 1px;
  pointer-events: none;
  margin: 0;
}

.section-drag-handle {
  font-size: 13px;
  color: var(--text-placeholder);
  cursor: grab;
  margin-right: 2px;
  user-select: none;
  flex-shrink: 0;
}
.section-drag-handle:hover { color: var(--text-secondary); }

.task-row { cursor: default; }
.task-row[draggable="true"]:hover { cursor: grab; }
.task-row[draggable="true"]:active { cursor: grabbing; }

/* ── Comment pane — third panel (right of detail panel) ─────────────────── */

#comment-pane {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 195;
  transition: width 0.2s ease;
}
#app.comment-pane-open #comment-pane {
  width: 300px;
  min-width: 260px;
}
#app.comment-pane-open #detail-panel {
  right: 300px;
  transition: right 0.2s ease, width 0.2s ease;
}
/* (Menu no longer narrows when comments open — it stays put.) */
/* Notification clicked: slide notif column left beside panel, hide todo column.
   This always fires together with DetailPanel.render(), which sets
   .detail-panel-open on #app — so #dashboard-view already gets
   padding-right: max(380px, 45vw) from the #app.detail-panel-open
   #dashboard-view rule above. Adding a max-width calc for the same
   reservation here subtracted it a second time and collapsed this column
   to a few px — found by actually clicking a notification card rather
   than opening a task panel some other way. No max-width needed: the
   single remaining column just fills whatever width #dashboard-view's
   own padding already left it. */
#app.notif-preview-open .overview-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
#app.notif-preview-open .overview-col--notif {
  order: -1;
  max-height: none;
  min-width: 0;
}
#app.notif-preview-open .overview-col--todo {
  display: none;
}

/* Todo clicked: show todo column beside panel, hide notif column. Same
   DetailPanel.render()-sets-.detail-panel-open reasoning as notif-preview-open
   above — no max-width calc needed here either. */
#app.todo-panel-open .overview-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
#app.todo-panel-open .overview-col--todo {
  max-height: none;
  min-width: 0;
}
#app.todo-panel-open .overview-col--notif {
  display: none;
}

/* Regular task opened from Backstage Overview (#detail-panel, e.g. clicking
   a show from the Calendar or anywhere else that lands here) — same
   single-column collapse as notif-preview-open/todo-panel-open above, same
   fix: no max-width calc, #dashboard-view's own padding-right already
   reserves the space. :not()-scoped so it only applies when neither of
   those two more specific states is already handling it (they all behave
   identically now, but keeping them as separate rules since each toggles
   different column visibility/order). */
#app.detail-panel-open:not(.notif-preview-open):not(.todo-panel-open) .overview-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
#app.detail-panel-open:not(.notif-preview-open):not(.todo-panel-open) .overview-col--todo {
  max-height: none;
  min-width: 0;
}
#app.detail-panel-open:not(.notif-preview-open):not(.todo-panel-open) .overview-col--notif {
  display: none;
}

/* The comment pane (#comment-pane) adds its own 300px beside the detail
   panel (see #app.comment-pane-open #detail-panel's right:300px above) —
   width #dashboard-view's padding-right doesn't know about, since that
   padding only accounts for the detail panel itself. Unlike the detail
   panel's own width, nothing else already reserves this, so it's a single
   (not double) subtraction on top of whichever single-column rule above
   already applied. Covers all three panel states at once since they all
   share the same .detail-panel-open base class. */
#app.detail-panel-open.comment-pane-open .overview-columns {
  max-width: calc(100% - 300px);
}

.comment-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.comment-pane-close {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.comment-pane-close:hover { background: var(--bg-hover); color: var(--text); }
.comment-pane-thread {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comment-pane-thread .comment-input-wrap {
  flex-shrink: 0;
}

/* ── Comments (inline — always visible in detail panel) ─────────────────── */

.comment-section {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.comment-section-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0 8px;
}
.comment-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comment-load-all-link {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
}
.comment-load-all-link:hover { opacity: 0.75; }
.comment-thread-fixed {
  height: 220px;
  overflow-y: auto;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* keep .comment-thread for any legacy references */
.comment-thread {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-bubble-wrap {
  display: flex;
  justify-content: flex-start;
  padding: 0 4px;
}
.comment-bubble-wrap.mine { justify-content: flex-end; }

.comment-bubble {
  max-width: 88%;
  background: var(--bg-hover);
  border-radius: 12px 12px 12px 3px;
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  transition: box-shadow 0.3s ease;
}
.comment-bubble-wrap.highlight .comment-bubble {
  box-shadow: 0 0 0 2px var(--accent-blue-border, #93c5fd);
}
.comment-bubble.mine {
  background: var(--accent-blue-bg);
  border-radius: 12px 12px 3px 12px;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.comment-sender {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.comment-bubble.mine .comment-sender { color: #1679C4; }
.comment-ts {
  font-size: 10px;
  color: var(--text-placeholder);
}

.comment-body {
  color: var(--text);
  white-space: pre-wrap;
}

.comment-img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-sm);
  margin-top: 5px;
  object-fit: cover;
}

.comment-file-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent-blue);
  text-decoration: none;
  word-break: break-all;
}
.comment-file-link:hover { text-decoration: underline; }

.comment-input-wrap {
  position: relative;
  border-top: 1px solid var(--border-light);
  padding: 8px 0 4px;
}

.comment-pending-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 6px;
}
.comment-pending-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.comment-pending-thumb {
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.comment-pending-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-pending-rm {
  font-size: 9px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
.comment-pending-rm:hover { color: var(--color-danger-text); }

.comment-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.comment-attach-btn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-secondary);
}
.comment-attach-btn:hover { background: var(--bg-hover); }

.comment-input {
  flex: 1;
  min-height: 30px;
  max-height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  resize: none;
  line-height: 1.4;
  overflow-y: auto;
}
.comment-input:focus { border-color: var(--accent-blue); }

.comment-send-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.comment-send-btn:hover { opacity: 0.85; }

/* ── Task Type Choice Modal ────────────────────────────────────────────── */

.task-type-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
  animation: fadeIn 0.08s ease;
}

.task-type-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  min-width: 300px;
  max-width: 360px;
  width: 100%;
}

.task-type-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.task-type-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-type-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.1s, background 0.1s;
}
.task-type-btn:hover { background: var(--bg-hover); border-color: var(--text-secondary); }
.task-type-btn--template:hover { border-color: var(--accent-blue); background: var(--accent-blue-bg); }

.task-type-btn-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.task-type-btn-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Blank task notes ──────────────────────────────────────────────────── */

.blank-notes-wrap {
  margin-top: 14px;
  margin-bottom: 14px;
}

.blank-notes-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Rich-text editor container */
.blank-notes-editor-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: border-color 0.15s;
}
.blank-notes-editor-wrap:focus-within { border-color: var(--accent-blue); }

/* Contenteditable area */
.blank-notes-content {
  min-height: 220px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  outline: none;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
}
.blank-notes-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-placeholder);
  font-style: italic;
  pointer-events: none;
}
/* Rich text formatting within editor */
.blank-notes-content b, .blank-notes-content strong { font-weight: 700; }
.blank-notes-content i, .blank-notes-content em { font-style: italic; }
.blank-notes-content u { text-decoration: underline; }
.blank-notes-content s { text-decoration: line-through; }
.blank-notes-content code {
  background: var(--bg-hover); border-radius: 3px;
  padding: 1px 4px; font-family: monospace; font-size: 12px;
}
.blank-notes-content pre {
  background: var(--bg-hover); border-radius: 5px;
  padding: 10px 12px; font-family: monospace; font-size: 12px;
  margin: 6px 0; overflow-x: auto; white-space: pre;
}
.blank-notes-content ul { list-style: disc; padding-left: 20px; margin: 4px 0; }
.blank-notes-content ol { list-style: decimal; padding-left: 20px; margin: 4px 0; }
.blank-notes-content a { color: var(--accent-blue); text-decoration: underline; }
.blank-notes-content a:hover { opacity: 0.8; }

/* Formatting toolbar */
.blank-notes-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-sidebar, #f8f9fa);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-wrap: wrap;
}
.blank-notes-tb-btn {
  background: none;
  border: none;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  transition: background 0.1s, color 0.1s;
}
.blank-notes-tb-btn:hover { background: var(--bg-hover); color: var(--text); }
.blank-notes-tb-btn.tb-bold { font-weight: 700; }
.blank-notes-tb-btn.tb-italic { font-style: italic; }
.blank-notes-tb-btn.tb-underline { text-decoration: underline; }
.blank-notes-tb-btn.tb-strike { text-decoration: line-through; }
.blank-notes-tb-sep {
  width: 1px; height: 16px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* ── Sidebar Footer (gear/settings) ───────────────────────────────────── */

#sidebar-footer {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-preview-role {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
}
.sidebar-preview-role label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-placeholder);
  white-space: nowrap;
}
.sidebar-preview-role select {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  padding: 3px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

#data-controls {
  display: flex;
  gap: 4px;
}

.sidebar-data-btn {
  flex: 1;
  padding: 5px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.sidebar-data-btn--export {
  border: 1px solid var(--accent-blue);
  background: none;
  color: var(--accent-blue);
}
.sidebar-data-btn--export:hover {
  background: var(--accent-blue);
  color: #fff;
}
.sidebar-data-btn--import {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
}
.sidebar-data-btn--import:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: var(--bg-hover);
}

.sidebar-dashboard-btn {
  width: 100%;
  padding: 7px 10px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.02em;
  border: none;
  transition: opacity 0.1s;
}
.sidebar-dashboard-btn:hover { opacity: 0.82; }
.sidebar-dashboard-btn.active { opacity: 0.65; }

/* ── Shared button variants (used in dashboard) ────────────────────────── */

.dash-btn-primary {
  padding: 7px 14px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.dash-btn-primary:hover { opacity: 0.82; }

.dash-btn-secondary {
  padding: 7px 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.dash-btn-secondary:hover { background: var(--bg-hover); }

.dash-btn-danger {
  padding: 7px 14px;
  background: var(--bg);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.dash-btn-danger:hover { background: var(--color-danger-bg); }

/* ── Finance / Invoices ───────────────────────────────────────────────── */

#finance-view { min-height: 100%; padding: 36px 44px; }

.finance-team-select {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

/* Due-date overview: summary line + 5 bucket bars */
.finance-overview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.finance-overview-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}
.finance-summary-sep { color: var(--text-placeholder); font-weight: 400; }
.finance-summary-item--late { color: var(--color-danger-text); }
.finance-bucket-cols {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.finance-bucket-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.finance-bucket-barwrap {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 8px;
}
.finance-bucket-bar {
  width: 60%;
  min-width: 18px;
  background: var(--accent-blue);
  border-radius: 3px 3px 0 0;
}
.finance-bucket-col--overdue .finance-bucket-bar { background: var(--color-danger); }
.finance-bucket-amt { font-size: 12px; font-weight: 700; color: var(--text); }
.finance-bucket-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.finance-bucket-range { font-size: 10px; color: var(--text-placeholder); }

/* Backstage "All bands" — one overview card per team, stacked */
.finance-band-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.finance-band-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.finance-band-card--clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.finance-band-card--clickable:hover { border-color: var(--accent-blue); background: var(--bg-hover); }
.finance-band-card--clickable:hover .finance-band-card-title { color: var(--accent-blue); }
.finance-band-card .finance-overview { border: none; padding: 0; margin-bottom: 0; }

/* Invoice table */
.finance-table-wrap { overflow-x: auto; }
.finance-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.finance-table-th {
  text-align: left;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}
.finance-table-th:hover { color: var(--text); }
.finance-table-th--active { color: var(--accent-blue); }
.finance-table-row { cursor: pointer; }
.finance-table-row:hover { background: var(--bg-hover); }
.finance-table-td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); color: var(--text); white-space: nowrap; }
.finance-table-empty { padding: 24px 10px; text-align: center; color: var(--text-placeholder); font-style: italic; }

.finance-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.finance-status-badge--draft { background: var(--accent-grey-bg); color: var(--color-info-text); }
.finance-status-badge--posted { background: var(--accent-blue-bg); color: var(--accent-blue); }
.finance-status-badge--paid { background: var(--accent-green-bg); color: var(--color-success-text); }
.finance-status-badge--overdue { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* Invoice detail/edit form */
.finance-form-outer { max-width: 420px; }
.finance-form { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); }
.finance-form-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.finance-form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.finance-form-label { width: 110px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.finance-form-input {
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.finance-form-input:disabled { background: var(--bg-sidebar); color: var(--text-secondary); }
.finance-form-btn-row { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.finance-form-cancel-btn {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.finance-form-cancel-btn:hover { background: var(--bg-hover); color: var(--text); }
.finance-form-static { flex: 1; font-size: 12px; color: var(--text); padding: 6px 0; }
.finance-table-th--nosort { cursor: default; }
.finance-table-th--nosort:hover { color: var(--text-secondary); }

/* Backstage Finances: Artist / Agency mode toggle */
.finance-mode-toggle { display: flex; gap: 4px; margin-left: 12px; }
.finance-mode-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
}
.finance-mode-btn:hover { color: var(--text); }
.finance-mode-btn--active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

/* Agency view: bar chart + totals panel side by side */
.finance-agency-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.finance-agency-bars { flex: 1; min-width: 0; }
.finance-agency-bars .finance-overview { margin-bottom: 0; height: 100%; }
.finance-bucket-col--clickable { cursor: pointer; border-radius: var(--radius-sm); }
.finance-bucket-col--clickable:hover { background: var(--bg-hover); }

.finance-agency-totals {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.finance-agency-total-value { font-size: 15px; font-weight: 700; color: var(--text); }
.finance-agency-total-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* Agency view: period filter bar, above the unified table */
.finance-filter-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.finance-filter-mode { flex: none; width: 180px; }
.finance-filter-sub { flex: none; width: 180px; }

/* Sidebar's per-Team "Finance" row */
.finance-row .project-icon { color: var(--accent-green); }

/* ── Backstage: Agency Admin tab ─────────────────────────────────────── */

.agency-admin-wrap { max-width: none; } /* override .dash-wrap's 680px cap */
.agency-admin-section { margin-bottom: 32px; }
.agency-admin-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.agency-admin-section-title { font-size: 15px; font-weight: 700; color: var(--text); }
.agency-admin-hint { font-size: 12px; color: var(--text-secondary); margin: 4px 0 14px; }
.agency-admin-template-form {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 12px;
  margin-bottom: 8px;
  max-width: 560px;
}
.agency-admin-template-body-row { align-items: flex-start; }
.agency-admin-template-body { min-height: 160px; resize: vertical; font-family: inherit; line-height: 1.5; }
.agency-admin-invoicing-form { max-width: 420px; }

/* Agency Logo */
.agency-admin-logo-wrap { display: flex; align-items: center; gap: 14px; }
.agency-admin-logo-preview {
  width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg);
}
.agency-admin-logo-loading { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-secondary); }
.agency-admin-logo-actions { display: flex; gap: 8px; }
.agency-admin-logo-input-hidden { display: none; }
.agency-admin-logo-btn {
  font-size: 12px; font-weight: 600; padding: 7px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); cursor: pointer;
}
.agency-admin-logo-btn:hover { background: var(--bg-hover); border-color: var(--text-secondary); }
.agency-admin-logo-btn:disabled { opacity: 0.6; cursor: default; }

/* Contract Templates: upload flow */
.agency-admin-upload-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 16px; flex-wrap: wrap; }
.agency-admin-upload-hint { margin: 0; }
.agency-admin-upload-error {
  font-size: 12px; color: var(--color-warning); background: var(--accent-amber-bg);
  border: 1px solid var(--accent-amber-border); border-radius: var(--radius-sm);
  padding: 8px 10px; margin: 8px 0;
}
.agency-admin-uploaded-body-wrap { margin-top: 8px; }
.agency-admin-pdf-note { font-size: 11px; color: var(--text-secondary); font-style: italic; margin: 0 0 10px; }
.agency-admin-uploaded-body {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; max-height: 420px; overflow-y: auto;
  font-size: 13px; line-height: 1.6; background: var(--bg);
}
.agency-admin-uploaded-body h1, .agency-admin-uploaded-body h2, .agency-admin-uploaded-body h3,
.agency-admin-uploaded-body h4, .agency-admin-uploaded-body h5, .agency-admin-uploaded-body h6 {
  margin: 1em 0 0.4em; font-weight: 700;
}
.agency-admin-uploaded-body ul, .agency-admin-uploaded-body ol { padding-left: 1.4em; margin: 0.4em 0; }
.agency-admin-uploaded-body p { margin: 0.6em 0; }
.agency-admin-uploaded-body-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── Dashboard: Settings screen ───────────────────────────────────────── */

#dashboard-view {
  min-height: 100%;
  padding: 36px 44px;
}

.dash-wrap {
  max-width: 680px;
}
.finance-wrap { max-width: none; } /* override .dash-wrap's 680px cap — Finance uses the full width */

.dash-template-list-wrap {
  max-width: min(460px, calc(55vw - 285px));
  min-width: 340px;
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

.dash-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.dash-empty {
  color: var(--text-secondary);
  font-style: italic;
  padding: 12px 0;
  font-size: 13px;
}
.detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 40px 20px;
}

/* ── Dashboard: Template list ─────────────────────────────────────────── */

.dash-template-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-template-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.1s;
}
.dash-template-row:hover { border-color: var(--text-secondary); }
.dash-template-row--active {
  border-color: var(--text-secondary);
  box-shadow: inset 3px 0 0 var(--accent-blue);
}

.dash-template-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.dash-template-meta {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.dash-template-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Dashboard: Back button ───────────────────────────────────────────── */

.dash-back-btn {
  display: inline-block;
  font-size: 12px;
  color: var(--accent-blue);
  padding: 0;
  margin-bottom: 20px;
  cursor: pointer;
  background: none;
  border: none;
}
.dash-back-btn:hover { text-decoration: underline; }

/* ── Template editor ──────────────────────────────────────────────────── */

.editor-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.editor-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.editor-name-input {
  flex: 1;
  max-width: 340px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  color: var(--text);
}
.editor-name-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--accent-blue-bg); }

.editor-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* ── TS card ──────────────────────────────────────────────────────────── */

.editor-ts-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.editor-ts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.editor-ts-name {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.editor-ts-name:focus { background: var(--bg); box-shadow: 0 0 0 2px var(--accent-blue-border); }
.editor-ts-name::placeholder { color: var(--text-placeholder); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ── TS tabs ──────────────────────────────────────────────────────────── */

.editor-ts-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.editor-ts-tab {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-ts-tab:hover { background: var(--bg-hover); color: var(--text); }
.editor-ts-tab.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

.editor-ts-tab-add {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.editor-ts-tab-add:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-secondary); }

/* ── TM card ──────────────────────────────────────────────────────────── */

.editor-tm-list {
  padding: 10px 10px 10px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor-tm-card {
  border: 1px solid var(--border-light);
  border-left: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.editor-tm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
}

.editor-tm-name {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.editor-tm-name:focus { background: var(--bg-hover); }
.editor-tm-name::placeholder { color: var(--text-placeholder); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ── TL rows ──────────────────────────────────────────────────────────── */

.editor-tl-list {
  padding: 8px 10px 6px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.editor-tl-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editor-tl-main {
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-tl-name {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text);
  outline: none;
  background: var(--bg);
}
.editor-tl-name:focus { border-color: var(--accent-blue); }
.editor-tl-name::placeholder { color: var(--text-placeholder); }

.editor-tl-type {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  cursor: pointer;
  min-width: 140px;
}

/* ── Field type custom dropdown ──────────────────────────────────────── */

.editor-tl-type-wrap { position: relative; }

.editor-tl-type-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 20px 5px 6px;
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  cursor: pointer;
  min-width: 140px;
  text-align: left;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-tl-type-btn::after {
  content: '▾';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 10px;
  pointer-events: none;
}
.editor-tl-type-btn:hover { border-color: var(--text-secondary); }

.editor-tl-type-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 300;
  display: flex;
  flex-direction: row;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  overflow: hidden;
}
.editor-tl-type-panel.hidden { display: none; }

.editor-tl-type-list { padding: 4px 0; min-width: 160px; }

.editor-tl-type-item {
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.editor-tl-type-item:hover { background: var(--bg-hover); }
.editor-tl-type-item.selected { color: var(--accent-blue); font-weight: 500; }

.editor-tl-type-preview {
  border-left: 1px solid var(--border);
  padding: 12px 14px;
  min-width: 180px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--bg-sidebar);
}

/* ── Preview dropdown open list ──────────────────────────────────────── */

.preview-dropdown-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 12px;
  min-width: 80px;
}
.preview-dd-item { padding: 3px 8px; color: var(--text-secondary); }
.preview-dd-item.selected { background: var(--bg-hover); color: var(--text); }

/* ── Demo preview interactive elements ───────────────────────────────────── */

.demo-preview-select {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  max-width: 160px;
}
.demo-preview-input {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
.demo-preview-textarea {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
.demo-preview-date {
  font-size: 12px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.demo-preview-link {
  font-size: 12px;
  color: var(--accent-blue);
  text-decoration: underline;
  cursor: pointer;
}
.demo-preview-link-add {
  font-size: 12px;
  color: var(--accent-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.demo-preview-link-add:hover { text-decoration: underline; }
.demo-preview-reminder-input {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  font-size: 12px;
  color: var(--text);
}
.demo-preview-reminder-input::placeholder { color: var(--text-placeholder); }

/* ── Controls ─────────────────────────────────────────────────────────── */

.editor-controls {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.editor-reorder-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
}
.editor-reorder-btn:hover { background: var(--bg-hover); color: var(--text); }

.editor-remove-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
}
.editor-remove-btn:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }

.editor-duplicate-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
}
.editor-duplicate-btn:hover { background: var(--bg-hover); color: var(--accent-blue); }

/* ── Add buttons ──────────────────────────────────────────────────────── */

.editor-add-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  margin-top: 2px;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.editor-add-btn:hover { color: var(--text); border-color: var(--text-secondary); background: var(--bg-hover); }

.editor-add-btn--sm {
  padding: 5px 10px;
  font-size: 11px;
}

.editor-add-btn--xs {
  padding: 4px 8px;
  font-size: 11px;
}

/* ── Sub-options (toggle opts, auto source) ───────────────────────────── */

.editor-sub-opts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 20px;
  margin-top: 2px;
  padding: 8px 12px;
  background: var(--bg-sidebar);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.editor-sub-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.editor-hide-label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 0 6px;
  cursor: pointer;
}

.editor-opt-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-mini-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  outline: none;
}
.editor-mini-input:focus { border-color: var(--accent-blue); }
.editor-mini-input::placeholder { color: var(--text-placeholder); }

.editor-default-value-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  resize: vertical;
}
.editor-default-value-input:focus { border-color: var(--accent-blue); }
.editor-default-value-input::placeholder { color: var(--text-placeholder); }

/* ── Project Sections editor ──────────────────────────────────────────── */

.editor-section-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.editor-ps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.editor-ps-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-ps-name {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  background: var(--bg);
}
.editor-ps-name:focus { border-color: var(--accent-blue); }
.editor-ps-name::placeholder { color: var(--text-placeholder); }

/* ── Task Features editor ─────────────────────────────────────────────── */

.editor-tf-block { margin-bottom: 8px; }
.editor-tf-feature {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.editor-tf-toggle-row { display: flex; align-items: center; gap: 8px; }
.editor-tf-label { font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.editor-tf-desc { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }
.editor-tf-items { margin-top: 12px; padding-left: 24px; }
.editor-tf-item-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

/* ── Editor actions bar ───────────────────────────────────────────────── */

.editor-actions {
  display: flex;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.editor-actions--top {
  padding-top: 0;
  padding-bottom: 16px;
  border-top: none;
  border-bottom: 1px solid var(--border);
  margin-top: 0;
  margin-bottom: 4px;
}
.editor-actions--panel {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}

/* ── Inline template edit controls ───────────────────────────────────────── */

.detail-inline-add-btn {
  background: none;
  border: 1px dashed var(--border-light);
  color: var(--accent-blue);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin: 3px 4px 3px 0;
  opacity: 0.65;
  font-family: inherit;
}
.detail-inline-add-btn:hover { opacity: 1; border-color: var(--accent-blue); }

.detail-inline-add-btn--small {
  font-size: 10px;
  padding: 2px 6px;
}

.detail-inline-delete-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
  opacity: 0;
  flex-shrink: 0;
  font-family: inherit;
}

.detail-showtime-back-btn {
  display: block;
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 11px;
  cursor: pointer;
  padding: 0 0 4px;
  font-family: inherit;
}
.detail-showtime-back-btn:hover { text-decoration: underline; }
.detail-showtime-lineup-col { display: flex; flex-direction: column; flex: 1; gap: 6px; }
.detail-showtime-lineup-row { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; }
.detail-showtime-lineup-input { flex: 2 1 0; min-width: 0; }
.detail-showtime-lineup-notes-input { flex: 1 1 0; min-width: 0; width: auto; }
.detail-ts-tab:hover .detail-inline-delete-btn,
.detail-module-heading:hover .detail-inline-delete-btn {
  opacity: 0.45;
}
.detail-ts-tab .detail-inline-delete-btn:hover,
.detail-module-heading .detail-inline-delete-btn:hover {
  opacity: 1;
  color: #d04;
}

/* Delete button on field rows */
.detail-field--editable {
  padding-right: 22px;
  position: relative;
}
.detail-field-delete-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.detail-field--editable:hover .detail-field-delete-btn { opacity: 0.4; }
.detail-field--editable .detail-field-delete-btn:hover  { opacity: 1; color: #d04; }

/* Pitch-import "needs review" state — a field the AI extraction filled in
   that the user hasn't explicitly confirmed yet (quickadd.js's offer-paste
   flow; see DataLayer.applyExtractedFields/confirmTaskField). */
.detail-field--unconfirmed { background: var(--accent-amber-bg); border-radius: var(--radius-sm); }
.detail-field-confirm-btn {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  margin-right: 20px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-amber-border);
  background: var(--bg);
  color: #92400e;
  cursor: pointer;
  white-space: nowrap;
}
.detail-field-confirm-btn:hover { background: var(--accent-amber-border); }

/* Pitch-import conflict — the field already had a value and the AI found a
   different one (see DataLayer.applyExtractedFields/acceptSuggestedField/
   dismissSuggestedField). Distinct blue tint from the amber "unconfirmed"
   state above since it's a different situation: a choice, not a review. */
.detail-field-suggestion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  margin: -1px 0 0;
  background: var(--accent-blue-bg);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.detail-field-suggestion-label { color: var(--text-secondary); flex-shrink: 0; }
.detail-field-suggestion-value { color: var(--text); font-weight: 500; word-break: break-word; }
.detail-field-suggestion-btn {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-blue-border);
  background: var(--bg);
  color: var(--accent-blue);
  cursor: pointer;
  white-space: nowrap;
}
.detail-field-suggestion-use { margin-left: auto; }
.detail-field-suggestion-dismiss { margin-left: 4px; border-color: var(--border); color: var(--text-secondary); }
.detail-field-suggestion-btn:hover { filter: brightness(0.97); }

/* Address field's "Open in Maps" link — plain, no API cost. */
.detail-field-maps-link {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  margin-right: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Rename controls ──────────────────────────────────────────────────────── */

.detail-label-wrap { display: inline-flex; align-items: center; gap: 3px; }
.detail-label-text { }
.detail-heading-title-text { display: inline-flex; align-items: center; gap: 3px; }
.detail-heading-title-text .detail-rename-btn--heading { opacity: 0; }
.detail-ts-tab:hover .detail-rename-btn--heading,
.detail-module-heading:hover .detail-rename-btn--heading { opacity: 0.45; }

.detail-rename-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 10px;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  line-height: 1;
  opacity: 0;
  font-family: inherit;
  flex-shrink: 0;
}
.detail-field-label:hover .detail-rename-btn,
.detail-label-wrap:hover .detail-rename-btn { opacity: 0.5; }
.detail-rename-btn:hover { opacity: 1 !important; color: var(--accent-blue); }

.detail-rename-input {
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  outline: none;
  min-width: 80px;
  max-width: 180px;
}

/* ── Field type picker ────────────────────────────────────────────────────── */

.detail-type-picker {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 6px 0;
  min-width: 170px;
  z-index: 9999;
}
.detail-type-picker-label {
  font-size: 10px;
  color: var(--text-secondary);
  padding: 2px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.detail-type-picker-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.detail-type-picker-item:hover { background: var(--bg-secondary); }

/* ── Time picker popup (AM/PM segmented control + filtered time list) ────── */

.detail-time-picker-popup {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 6px;
  min-width: 160px;
  max-width: 260px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.detail-time-picker-hint {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 2px 8px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.detail-time-picker-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.detail-time-picker-item:hover { background: var(--bg-secondary); }
.detail-time-picker-item.selected { background: var(--accent-blue-bg); color: var(--accent-blue); font-weight: 500; }
.detail-time-picker-divider { height: 1px; background: var(--border); margin: 4px 2px; }
.detail-time-picker-ampm { display: flex; gap: 4px; padding: 2px 2px 6px; }
.detail-time-picker-list { max-height: 220px; overflow-y: auto; }
.detail-ampm-btn {
  flex: 1;
  padding: 4px 0;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg);
}
.detail-ampm-btn:hover { border-color: var(--text-secondary); }
.detail-ampm-btn.active { background: var(--bg-active); border-color: var(--text-secondary); color: var(--text); font-weight: 500; }

/* ── Toggle options step ──────────────────────────────────────────────────── */

.detail-toggle-opts-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.detail-toggle-opt-row { display: flex; align-items: center; gap: 4px; }
.detail-toggle-opt-input { flex: 1; padding: 4px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); }
.detail-toggle-opt-rm { flex-shrink: 0; padding: 2px 6px; font-size: 11px; border: none; background: none; color: var(--text-placeholder); cursor: pointer; border-radius: var(--radius-sm); }
.detail-toggle-opt-rm:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
.detail-toggle-opts-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.detail-type-picker-confirm { padding: 5px 12px; font-size: 12px; font-family: inherit; border: none; border-radius: var(--radius-sm); background: var(--accent-blue); color: #fff; cursor: pointer; }
.detail-type-picker-confirm:hover { opacity: 0.88; }

/* ── TM drag handle ──────────────────────────────────────────────────────── */

/* TM drag handle — dots hidden by default; grab cursor on whole TM heading hover */
.detail-tm-drag-handle { flex-shrink: 0; color: transparent; cursor: grab; padding: 0 4px; font-size: 13px; line-height: 1; user-select: none; }
.detail-module-heading { cursor: grab; }
.detail-module-heading .section-chevron,
.detail-module-heading .detail-module-heading-title,
.detail-module-heading .detail-heading-right,
.detail-module-heading button { cursor: pointer; }
.tm-dragging { opacity: 0.45; cursor: grabbing !important; }

/* ── Per-TS add controls bar ─────────────────────────────────────────────── */

.detail-ts-controls { display: flex; gap: 6px; padding: 6px 8px 2px; border-top: 1px solid var(--border); margin-top: 4px; flex-wrap: wrap; }
.detail-ts-controls--blank { border-top: none; padding-top: 12px; margin-top: 8px; }
.detail-ts-ctrl-btn { padding: 4px 10px; font-size: 11px; font-family: inherit; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: none; color: var(--text-secondary); cursor: pointer; }
.detail-ts-ctrl-btn:hover { border-color: var(--text-secondary); color: var(--text); background: var(--bg-hover); }

/* ── Auto-linked URLs in textarea display mode ────────────────────────────── */

.detail-field-link {
  color: var(--accent-blue);
  text-decoration: underline;
  word-break: break-all;
  cursor: pointer;
}
.detail-field-link:hover { opacity: 0.8; }

/* ── Link hover popover (Google Docs style) ───────────────────────────────── */

.detail-link-popover {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 8px 10px;
  min-width: 200px;
  max-width: 340px;
  z-index: 9999;
}
.detail-link-popover-url {
  font-size: 11px;
  color: var(--text-secondary);
  word-break: break-all;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.4;
}
.detail-link-popover-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.detail-link-popover-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-family: inherit;
  color: var(--accent-blue);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.detail-link-popover-btn:hover { background: var(--bg-secondary); }
.detail-link-popover-btn--danger { color: var(--color-danger-text); }
.detail-link-popover-btn--danger:hover { background: var(--color-danger-bg); }

/* ── Date field ───────────────────────────────────────────────────────────── */

.detail-date-field-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  padding: 0;
  text-align: left;
  font-family: inherit;
}
.detail-date-field-btn.empty { color: var(--accent-blue); }
.detail-date-field-btn.has-date { color: var(--text); }

/* ── Comment unread pulse ─────────────────────────────────────────────────── */

@keyframes comment-pulse {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.5; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

.comment-unread-pulse {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-blue);
  animation: comment-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── Dashboard tabs ───────────────────────────────────────────────────────── */

.dash-tab-bar {
  display: flex;
  gap: 4px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.dash-tab-btn {
  position: relative;
  padding: 5px 14px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.dash-tab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.dash-tab-btn:hover { background: var(--bg-hover); color: var(--text); }
.dash-tab-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

/* ── Dashboard To Do list ─────────────────────────────────────────────────── */

.todo-empty {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

.todo-section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 16px 0 6px;
}

/* Priority section headings */
.todo-prio-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  padding: 14px 0 5px;
  border-top: 1px solid var(--border-light);
  margin-top: 2px;
}
.todo-prio-header:first-of-type { border-top: none; padding-top: 2px; }
.todo-prio-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.todo-prio-count {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-placeholder);
  margin-left: 1px;
}
.todo-prio-list { min-height: 30px; }

.todo-list { display: flex; flex-direction: column; gap: 2px; }

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
}

.todo-item:hover { background: var(--bg-hover); border-color: #d1d5db; }
.todo-item.active { background: #eff6ff; border-color: #93c5fd; }
.todo-item.active:hover { background: #dbeafe; border-color: #60a5fa; }
.todo-item.done { opacity: 0.5; }

.todo-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  position: relative;
}

.todo-checkbox:hover { border-color: var(--accent-blue); }

.todo-checkbox.checked {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.todo-checkbox.checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.todo-body {
  flex: 1;
  min-width: 0;
}

.todo-task-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.todo-project {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.todo-note {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.todo-item.done .todo-note { text-decoration: line-through; }

.todo-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.todo-age {
  font-size: 11px;
  color: var(--text-placeholder);
}

.todo-attribution {
  font-size: 11px;
  color: var(--text-placeholder);
  flex: 1;
}

.todo-check-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-self: flex-end;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.todo-check-btn:hover {
  border-color: #22c55e;
  color: #22c55e;
}
.todo-check-btn.checked {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

/* ── Task Reminder — sent (greyed preview) ────────────────────────────────── */

.task-note-sent {
  color: var(--text-placeholder);
  font-style: italic;
  font-size: 12px;
  cursor: text;
}

/* ── Comment count link (replaces bubble history in task pane) ────────────── */

.comment-count-link {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-blue);
  background: none;
  border: none;
  padding: 0 0 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.comment-count-link:hover { opacity: 0.75; }

/* ── Task Reminder field in detail panel ──────────────────────────────────── */

.detail-task-reminder {
  margin: 0 0 8px;
  padding: 7px 10px;
  background: var(--bg-hover);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: text;
  min-height: 34px;
  display: flex;
  align-items: center;
}
.detail-task-reminder--editing {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.detail-reminder-placeholder {
  font-size: 12px;
  color: var(--text-placeholder);
  cursor: text;
}

.detail-reminder-sent {
  font-size: 12px;
  color: var(--text-secondary);
  cursor: text;
}
.detail-reminder-sent-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-placeholder);
  margin-right: 4px;
}
.task-note-sent-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-placeholder);
  margin-right: 3px;
}

.detail-reminder-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  padding: 0;
}

/* ── Dashboard template sections ──────────────────────────────────────────── */

.dash-template-section {
  margin-bottom: 28px;
}

.dash-template-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-section-toggle-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: #222;
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s;
}
.dash-section-toggle-btn:hover { background: #000; }

.dash-show-hidden-btn {
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: inherit;
  color: var(--accent-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding-left: 0;
}
.dash-show-hidden-btn:hover { text-decoration: underline; }

.dash-hidden-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-placeholder);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}

.dash-template-row--faded { opacity: 0.55; }
.dash-template-row--faded:hover { opacity: 1; }

/* ── Template preview panel badge ─────────────────────────────────────────── */

.tmpl-preview-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 14px;
  border: 1px solid;
}
.tmpl-preview-badge--preview {
  color: var(--color-success-text);
  background: var(--accent-green-bg);
  border-color: var(--accent-green-border);
}
.tmpl-preview-badge--edit {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}
/* fallback for badge without modifier */
.tmpl-preview-badge:not(.tmpl-preview-badge--preview):not(.tmpl-preview-badge--edit) {
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-color: var(--border);
}

/* ── Editor two-column layout ─────────────────────────────────────────────── */

.editor-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.editor-col {
  flex: 1;
  min-width: 320px;
}

.editor-preview-col {
  width: 340px;
  min-width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.editor-preview-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.editor-preview-task-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  padding: 4px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

/* ── News Feeds tab ──────────────────────────────────────────────────────── */

/* Search bar */
.news-search-row    { margin-bottom: 20px; }
.news-search-input  {
  width: 100%; max-width: 400px;
  padding: 7px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; font-family: inherit;
  background: var(--bg); color: var(--text);
  box-sizing: border-box;
}
.news-search-input:focus { outline: none; border-color: var(--accent-blue); }

/* Feed category sections */
.news-cat-section { margin-bottom: 28px; }
.news-cat-title   {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary); margin-bottom: 10px;
}
.news-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

/* Feed cards */
.news-feed-card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 0.15s;
}
.news-feed-card:hover    { border-color: var(--text-secondary); }
.news-feed-card.following { border-color: var(--accent-blue-border); background: var(--accent-blue-bg); }
.news-feed-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.news-feed-site { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.news-feed-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.news-follow-btn {
  padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: none;
  color: var(--text-secondary); font-size: 12px; font-family: inherit; cursor: pointer;
  align-self: flex-start;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.news-follow-btn:hover     { background: var(--text); color: var(--bg); border-color: var(--text); }
.news-follow-btn.following { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.news-follow-btn.following:hover { opacity: 0.82; }

/* My Feeds header controls */
.news-header-actions { display: flex; align-items: center; gap: 8px; }

.news-group-toggle {
  display: flex;
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.news-group-btn {
  padding: 5px 12px; font-size: 12px; font-family: inherit;
  border: none; background: none; color: var(--text-secondary); cursor: pointer;
}
.news-group-btn + .news-group-btn { border-left: 1px solid var(--border); }
.news-group-btn:hover  { background: var(--bg-hover); color: var(--text); }
.news-group-btn.active { background: var(--accent-blue); color: #fff; }

.news-refresh-btn {
  padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: none;
  color: var(--text-secondary); font-size: 12px; font-family: inherit; cursor: pointer;
}
.news-refresh-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Loading + status */
.news-loading    { color: var(--text-secondary); font-size: 13px; padding: 24px 0; }
.news-status-bar { font-size: 11px; color: var(--text-secondary); margin-bottom: 16px; }

/* By-source grouping */
.news-source-section { margin-bottom: 24px; }
.news-source-header  {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

/* Error states */
.news-feed-error {
  font-size: 12px; color: var(--text-secondary);
  padding: 8px 0; font-style: italic;
}
.news-feed-error--banner {
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--accent-amber-bg);
  border: 1px solid var(--accent-amber-border);
  border-radius: var(--radius-sm);
  font-style: normal; color: var(--text);
}

/* Headline list */
.news-headline-list { display: flex; flex-direction: column; }
.news-headline-row  {
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.news-headline-row:last-child { border-bottom: none; }
.news-headline-row:hover      { background: var(--bg-hover); }
.news-headline-title {
  display: block; margin-bottom: 3px;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--text); text-decoration: none;
}
.news-headline-title:hover { color: var(--accent-blue); }
.news-headline-meta   { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.news-headline-source { font-weight: 500; }
.news-headline-sep    { opacity: 0.4; }

/* Hover excerpt popover */
.news-headline-popover {
  position: fixed; z-index: 9999;
  max-width: 280px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  font-size: 12px; line-height: 1.55; color: var(--text-secondary);
  pointer-events: auto;
}

/* ── News source card grid ───────────────────────────────────────────────── */

.news-wrap { max-width: none; } /* override .dash-wrap's 680px cap */

.news-source-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.news-source-card {
  display: flex;
  flex-direction: column;
  height: 360px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.news-source-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.news-source-favicon {
  width: 16px; height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: contain;
}
.news-source-card-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-source-card-site {
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.news-source-card-site:hover { background: var(--bg-hover); color: var(--accent-blue); }

.news-source-card-articles {
  flex: 1;
  overflow-y: scroll;
  scrollbar-width: none;
}
.news-source-card-articles::-webkit-scrollbar { width: 4px; }
.news-source-card-articles::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background 0.15s;
}
.news-source-card-articles:hover { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.news-source-card-articles:hover::-webkit-scrollbar-thumb { background: var(--border); }

.news-article-row {
  display: flex;
  gap: 9px;
  padding: 9px 11px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
  align-items: flex-start;
}
.news-article-row:last-child { border-bottom: none; }
.news-article-row:hover { background: var(--bg-hover); }

.news-article-thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--border-light);
}
.news-article-thumb--favicon {
  object-fit: contain;
  padding: 10px;
  background: var(--bg-hover);
}

.news-article-body { flex: 1; min-width: 0; }
.news-article-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-article-meta {
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.news-article-excerpt {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── News: empty state ───────────────────────────────────────────────────── */

.news-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 64px;
  text-align: center;
  min-height: 420px;
}
.news-empty-icon {
  color: var(--text-secondary);
  opacity: 0.35;
  margin-bottom: 28px;
  line-height: 0;
}
.news-empty-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.news-empty-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 36px;
  max-width: 340px;
  line-height: 1.65;
}
.news-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 32px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.news-empty-cta:hover {
  opacity: 0.82;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.news-empty-cta:active {
  opacity: 1;
  transform: translateY(0);
}

/* ── News: two-panel Discover layout ─────────────────────────────────────── */

.news-discover-layout {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 520px;
  max-height: calc(100vh - 200px);
  margin-top: 6px;
}

/* Left panel — category menu */
.news-cat-menu {
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 6px 0;
  background: var(--bg);
}
.news-cat-menu-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 10px 9px 13px;
  cursor: pointer;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
}
.news-cat-menu-item:hover,
.news-cat-menu-item.active {
  background: var(--accent-blue-bg);
  border-left-color: var(--accent-blue);
  color: var(--accent-blue);
}
.news-cat-menu-name {
  flex: 1;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-cat-menu-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
  line-height: 1.6;
}
.news-cat-menu-item:hover .news-cat-menu-badge,
.news-cat-menu-item.active .news-cat-menu-badge {
  background: rgba(59,130,246,0.15);
  color: var(--accent-blue);
}
.news-cat-menu-check {
  font-size: 10px;
  color: var(--accent-green);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.news-cat-menu-chevron {
  font-size: 15px;
  color: var(--text-secondary);
  opacity: 0.35;
  flex-shrink: 0;
  line-height: 1;
}
.news-cat-menu-item:hover .news-cat-menu-chevron,
.news-cat-menu-item.active .news-cat-menu-chevron {
  opacity: 0.8;
  color: var(--accent-blue);
}
.news-cat-menu-search-icon { font-size: 12px; flex-shrink: 0; }
.news-cat-menu-search {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 10px;
}

/* Right panel */
.news-cat-panel {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  min-width: 0;
}
@keyframes news-panel-fadein {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.news-cat-panel-content {
  animation: news-panel-fadein 0.15s ease both;
}
.news-cat-panel-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 14px;
}

/* 3-column discover grid */
.news-discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.news-discover-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  gap: 8px;
  background: var(--bg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.news-discover-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border-color: var(--text-secondary);
}
.news-discover-card.following {
  border-color: var(--accent-blue-border);
  background: var(--accent-blue-bg);
}
.news-discover-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.news-discover-favicon {
  width: 16px; height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: contain;
}
.news-discover-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-discover-desc {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-discover-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto;
}
.news-discover-site {
  font-size: 10px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}

/* Search inside right panel */
.news-search-results { margin-bottom: 8px; }
.news-search-loading { font-size: 13px; color: var(--text-secondary); padding: 16px 0; }
.news-panel-search-input { max-width: none; }
.news-search-row { margin-bottom: 16px; display: flex; }
.news-search-wrap { position: relative; flex: 1; }
.news-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 13px; padding: 2px 4px; line-height: 1;
}
.news-search-clear:hover { color: var(--text); }
.news-search-input { padding-right: 32px; }

/* ── Document / PDF inline preview modal ─────────────────────────────────── */

.doc-preview-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.doc-preview-modal {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.28);
  width: 80vw; height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.doc-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.doc-preview-title {
  flex: 1;
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-preview-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.doc-preview-open-btn {
  font-size: 12px; color: var(--accent-blue); text-decoration: none;
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.doc-preview-open-btn:hover { background: var(--accent-blue-bg); }
.doc-preview-close {
  background: none; border: none; font-size: 15px; line-height: 1;
  color: var(--text-secondary); cursor: pointer; padding: 3px 7px; border-radius: var(--radius-sm);
}
.doc-preview-close:hover { background: var(--bg-hover); color: var(--text); }
.doc-preview-body { flex: 1; position: relative; overflow: hidden; }

/* ── Send assets: milestone row + composer modal ─────────────────────────── */

.detail-send-assets { margin-top: 2px; }
.send-assets-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.send-assets-label {
  font-size: 11px; font-weight: 600; color: var(--accent-blue);
  cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm);
}
.send-assets-label:hover { background: var(--accent-blue-bg); }
.send-asset-item { display: flex; align-items: center; gap: 5px; }
.send-asset-check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  position: relative;
}
.send-asset-check.sent { border-color: var(--text-secondary); background: var(--bg-hover); }
.send-asset-check.sent::after {
  content: '';
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: rotate(-45deg) translateY(-1px);
}
.send-asset-check.downloaded { border-color: var(--accent-green); background: var(--accent-green); }
.send-asset-check.downloaded::after {
  content: '';
  width: 7px; height: 4px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
  box-shadow: 3px 0 0 -0.5px white;
}
.send-asset-label { font-size: 11px; color: var(--text-secondary); }

/* Send Contract — sibling row below Send assets, same check mechanism */
.detail-send-contract { margin-top: 6px; }
.send-contract-row { display: flex; align-items: center; gap: 8px; }
.send-contract-reference {
  font-size: 11px; color: var(--accent-blue); cursor: pointer;
  padding: 2px 4px; border-radius: var(--radius-sm);
}
.send-contract-reference:hover { background: var(--accent-blue-bg); }
.send-contract-menu-btn {
  margin-left: auto; width: 20px; height: 20px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--text-secondary);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.send-contract-menu-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Shared contract-document viewer/editor (Part 2) — used by the Contracts
   project's own pane and the Send Contract viewer overlay alike. */
.contract-document-wrap { max-width: 640px; }
.contract-document-empty { color: var(--text-secondary); font-style: italic; }
.contract-document-actions { display: flex; gap: 8px; margin-top: 14px; }
.contract-document-edit-wrap .detail-rich-value { min-height: 240px; }
.contract-viewer-panel { max-width: 680px; }

/* Gmail-style composer — floats centered within the positioned overlay
   (the board/list area, not the full viewport), dimmed backdrop behind it. */
.send-assets-overlay {
  z-index: 500;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.gmail-compose-panel {
  width: 700px; max-width: calc(100% - 48px);
  height: 820px; max-height: calc(100% - 64px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.28);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.gmail-compose-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
  flex-shrink: 0;
}
.gmail-compose-close {
  background: none; border: none; font-size: 15px; line-height: 1;
  color: var(--text-secondary); cursor: pointer; padding: 3px 7px; border-radius: var(--radius-sm);
}
.gmail-compose-close:hover { background: var(--bg-hover); color: var(--text); }

.gmail-compose-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gmail-compose-row-label { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; min-width: 28px; }
.gmail-compose-to-row { align-items: flex-start; }
.gmail-compose-recipients { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gmail-compose-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 10px;
  border-radius: 14px;
  background: var(--bg-hover);
  font-size: 12px; color: var(--text);
}
.gmail-compose-chip-x { cursor: pointer; color: var(--text-secondary); font-size: 10px; }
.gmail-compose-chip-x:hover { color: var(--text); }
.gmail-compose-recipient-input {
  border: none; outline: none; background: none;
  font-size: 13px; color: var(--text);
  flex: 1; min-width: 80px; padding: 3px 0;
}
.gmail-compose-ccbcc-toggle { display: flex; gap: 8px; flex-shrink: 0; align-self: flex-start; padding-top: 4px; }
.gmail-compose-ccbcc-toggle span { font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.gmail-compose-ccbcc-toggle span:hover { color: var(--text); }
.gmail-compose-plain-input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 13px; color: var(--text); padding: 3px 0;
}
.gmail-compose-subject-input { font-size: 13px; }

.gmail-compose-body-wrap { flex: 1; overflow-y: auto; padding: 10px 16px; min-height: 0; }
/* Strip the base .detail-field row chrome (11px top/bottom padding,
   min-height, flex-row-with-label layout) — this field has no label and
   should just be the full content area, no residual padding zone outside
   the editor's own box for the browser's caret-hit-testing to land in. */
#send-assets-overlay .gmail-compose-rich-field {
  border-bottom: none;
  padding: 0;
  min-height: 0;
  display: block;
}
#send-assets-overlay .gmail-compose-rich-field .detail-rich-value {
  padding: 0;
  min-height: 0;
}
/* .detail-field-value:hover's grey highlight (meant for clickable rows
   elsewhere in the detail panel) otherwise sits there the whole time the
   cursor is over the body while typing — wrong for a plain white compose
   area, like Gmail's. */
#send-assets-overlay .gmail-compose-rich-field .detail-rich-value:hover { background: none; }
/* A bounded min-height (not flex:1 stretching the contenteditable itself
   to fill a very tall container) — letting a short contenteditable <div>
   get stretched to fill 300px+ of empty space produces a stray tall-caret
   rendering artifact in Chromium. The *wrapper* (.gmail-compose-body-wrap
   above) handles "fill remaining space" via its own flex:1 + scroll. */
/* #send-assets-overlay (an ID) beats the older, higher-specificity
   :has(.detail-field-label:empty) rule that otherwise forces 320px here
   too (this field also has an empty label) — a 320px-tall, mostly-empty
   contenteditable is also what was producing the stray second caret mark
   near its bottom edge, a Chromium rendering quirk for very tall
   near-empty editable blocks. */
#send-assets-overlay .gmail-compose-rich-field .detail-rich-editor { min-height: 60px; border: none; padding: 4px 0; }
.gmail-compose-body-wrap .detail-rich-col { display: flex; flex-direction: column; }

.gmail-compose-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.gmail-compose-footer .detail-rich-toolbar { gap: 4px; }
.gmail-compose-attachments { padding: 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.gmail-compose-attachments:empty { display: none; }
.gmail-compose-attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  background: var(--bg-hover);
  font-size: 11px; color: var(--text);
}
.gmail-compose-send-group { position: relative; display: flex; }
.gmail-compose-send-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 20px 0 0 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gmail-compose-send-btn:hover { opacity: 0.92; }
.gmail-compose-send-btn:disabled, .gmail-compose-send-caret:disabled { opacity: 0.6; cursor: not-allowed; }
.gmail-compose-error {
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-amber-bg);
  border: 1px solid var(--accent-amber-border);
  color: #92400e;
  font-size: 12px;
}
.gmail-compose-send-caret {
  padding: 8px 10px;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.25);
  border-radius: 0 20px 20px 0;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.gmail-compose-send-caret:hover { opacity: 0.92; }
.gmail-compose-send-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 10;
}
.gmail-compose-send-menu-item { padding: 9px 14px; font-size: 12px; color: var(--text); cursor: pointer; }
.gmail-compose-send-menu-item:hover { background: var(--bg-hover); }
.doc-preview-frame { width: 100%; height: 100%; border: none; display: block; }
.doc-preview-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px; text-align: center;
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}
.doc-preview-fallback a { color: var(--accent-blue); }

/* Preview eye-button on link fields */
.detail-link-preview-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; line-height: 1;
  padding: 1px 4px; border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity 0.1s;
}
.detail-link-preview-btn:hover { opacity: 1; background: var(--bg-hover); }

.detail-link-copy-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; line-height: 1;
  padding: 1px 4px; border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity 0.1s;
}
.detail-link-copy-btn:hover { opacity: 1; background: var(--bg-hover); }

/* Template demo — terminology annotation labels */
.tmpl-terminology-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  opacity: 0.55;
  margin-top: 8px;
  margin-bottom: 1px;
}

/* ── My Socials tab ──────────────────────────────────────────────────────── */

.socials-wrap { max-width: none; }

.socials-section { margin-bottom: 24px; }

.socials-setup-heading { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 20px; }
.socials-status { font-size: 12px; min-height: 18px; margin-bottom: 4px; color: transparent; }
.socials-status--error { color: var(--color-danger-text); }
.socials-helper { font-size: 12px; color: var(--text-secondary); margin: 0; }

.socials-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.socials-yt-title-row { display: flex; align-items: center; gap: 10px; }
.socials-section-name { font-size: 16px; font-weight: 600; color: var(--text); }
.socials-error { font-size: 13px; color: var(--text-secondary); padding: 16px 0; margin: 0; }

/* Bundle Social inbox — comments + DMs, expand-in-place with a reply box */
.socials-connect-prompt {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 0;
}
.socials-connect-icons { display: flex; gap: 8px; margin-bottom: 16px; line-height: 0; }
/* My Socials — platform rows */
.socials-platform-row { padding: 20px 0 24px; border-bottom: 1px solid var(--border); }
.socials-platform-row:first-child { padding-top: 4px; }
.socials-platform-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.socials-platform-icon { display: flex; line-height: 0; }
.socials-platform-name { font-size: 14px; font-weight: 600; color: var(--text); }
.socials-unread-badge {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.socials-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.socials-thumbs .socials-status { margin: 0; }
.socials-thumb {
  position: relative; flex: 0 0 auto; width: 90px; height: 90px;
  padding: 0; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-sidebar); cursor: pointer; overflow: visible;
}
.socials-thumb--video { width: 118px; height: 66px; }
.socials-thumb:hover { border-color: var(--text-secondary); }
.socials-thumb--active { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.socials-thumb-visual {
  width: 100%; height: 100%; border-radius: 11px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover; box-sizing: border-box;
}
.socials-thumb-visual--instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); }
.socials-thumb-visual--facebook { background: #1877F2; }
.socials-thumb-visual--youtube { background: #FF0000; }
.socials-thumb-visual--mini { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.socials-thumb-visual--large { width: 100%; height: auto; max-height: 320px; border-radius: 12px; margin-bottom: 14px; min-height: 120px; }
img.socials-thumb-visual { display: block; }
.socials-thumb-caption {
  padding: 8px; color: #fff; font-size: 10px; line-height: 1.3; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.socials-thumb-visual--mini .socials-thumb-caption { display: none; }
.socials-thumb-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.socials-thumb-dot {
  position: absolute; top: -4px; right: -4px; width: 12px; height: 12px;
  border-radius: 50%; background: #e5484d; border: 2px solid var(--bg);
}
.socials-older { padding-top: 24px; }
.socials-older-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.socials-older-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.socials-older-row:hover .socials-older-view { text-decoration: underline; }
.socials-older-main { flex: 1; min-width: 0; }
.socials-older-author { font-size: 12px; font-weight: 600; color: var(--text); }
.socials-older-preview { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.socials-older-view { font-size: 12px; color: var(--accent-blue); flex-shrink: 0; }
/* Post detail in side pane */
.socials-post-pane { padding: 20px 24px 32px; }
.socials-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.socials-post-platform { font-size: 14px; font-weight: 600; color: var(--text); }
.socials-post-date { font-size: 12px; color: var(--text-placeholder); margin-left: auto; }
.socials-post-caption { font-size: 13px; color: var(--text); white-space: pre-wrap; margin-bottom: 10px; }
.socials-post-link { display: inline-block; font-size: 12px; color: var(--accent-blue); margin-bottom: 20px; }
.socials-post-link:hover { text-decoration: underline; }
.socials-post-comments-title {
  font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: 0.04em; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.socials-comment { padding: 14px 0; border-bottom: 1px solid var(--border); }
.socials-comment--reply { margin-left: 20px; padding-left: 12px; border-left: 2px solid var(--border); }
.socials-comment-top { display: flex; align-items: baseline; gap: 8px; }
.socials-comment-author { font-size: 12px; font-weight: 600; color: var(--text); }
.socials-comment-time { font-size: 11px; color: var(--text-placeholder); margin-left: auto; }
.socials-comment-replynote { font-size: 11px; color: var(--text-placeholder); font-style: italic; margin-top: 2px; }
.socials-comment-text { font-size: 13px; color: var(--text); white-space: pre-wrap; margin: 6px 0 8px; }
.socials-comment-foot { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.socials-comment-likes { font-size: 11px; color: var(--text-secondary); }
.socials-comment-reply-btn { font-size: 12px; color: var(--accent-blue); background: none; border: none; padding: 0; cursor: pointer; }
.socials-comment-reply-btn:hover { text-decoration: underline; }
.socials-inbox-reply-sent {
  font-size: 12px; color: var(--text-secondary); background: var(--bg-hover);
  border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 6px;
}
.socials-inbox-reply-pending { font-size: 11px; color: var(--accent-amber); font-style: italic; }
.socials-inbox-reply-row { display: flex; gap: 8px; align-items: flex-end; }
.socials-inbox-reply-input {
  flex: 1; min-height: 44px; font-size: 12px; font-family: inherit;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  resize: vertical; background: var(--bg); color: var(--text);
}
.socials-inbox-reply-input:focus { outline: none; border-color: var(--accent-blue); }

/* ── News search — article list (Google News) + URL validation ───────────── */

.news-search-helper {
  font-size: 12px; color: var(--text-secondary); margin: 6px 0 14px; opacity: 0.65;
}
.news-search-article-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.news-search-article {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  transition: background 0.1s;
}
.news-search-article:hover { background: var(--bg-hover); }
.news-search-article-title {
  display: block; font-size: 13px; font-weight: 500; color: var(--text);
  text-decoration: none; margin-bottom: 6px; line-height: 1.45;
}
.news-search-article-title:hover { text-decoration: underline; color: var(--accent-blue); }
.news-search-article-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-secondary);
}
.news-search-article-favicon { width: 13px; height: 13px; flex-shrink: 0; }
.news-search-article-source { font-weight: 500; color: var(--text); }
.news-search-article-sep { opacity: 0.35; }
.news-search-article-time { opacity: 0.7; }

/* "+ Add" source button */
.news-search-add-btn {
  padding: 2px 7px; font-size: 11px; font-weight: 500; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: none; cursor: pointer;
  color: var(--text-secondary); transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap; line-height: 1.6;
}
.news-search-add-btn:hover:not(:disabled) {
  background: var(--accent-blue-bg); border-color: var(--accent-blue); color: var(--accent-blue);
}
.news-search-add-btn.following {
  background: var(--accent-blue-bg); border-color: var(--accent-blue-border);
  color: var(--accent-blue); cursor: default;
}
.news-search-add-btn--error { border-color: var(--color-danger-border); color: var(--color-danger-text); cursor: default; }

/* Direct URL validation result card */
.news-search-url-result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--accent-blue-border);
  border-radius: var(--radius); background: var(--accent-blue-bg); margin-top: 4px;
}
.news-search-url-result-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.news-search-url-result-name { font-size: 13px; font-weight: 500; color: var(--text); }
.news-search-url-result-site { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.news-search-url-error {
  padding: 14px 16px; font-size: 13px; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-hover); margin-top: 4px; line-height: 1.6;
}

/* ── Overview tab — upcoming-shows stats panel ──────────────────────────── */

/* Wraps the scrollable row plus its two edge arrow buttons. */
.dash-stats-scroll-wrap {
  position: relative;
}
.dash-stats {
  display: flex;
  gap: 10px;
  padding: 8px 16px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  /* Cards keep a fixed, readable width (see .dash-stats-col below) instead
     of shrinking to fit — once they no longer fit the row, it scrolls
     horizontally instead of squashing every card's text. */
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.dash-stats::-webkit-scrollbar { display: none; }
.dash-stats-col {
  /* Grows to fill the row when there's room (e.g. a 14" laptop with the
     pane closed — all 5 cards fit, no scroll needed) but won't shrink
     below 200px (enough for "Advance: X Open | Y Done" to stay on one
     line even with the pill badges' padding) — once the pane opens and
     narrows the row past that floor, cards hold their width and the row
     scrolls instead of squashing them. */
  flex: 1 1 200px;
  min-width: 200px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 11px;
}
.dash-stats-arrow {
  position: absolute; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-secondary); cursor: pointer;
  z-index: 2; transition: opacity 0.15s;
}
.dash-stats-arrow:hover { background: var(--bg-hover); color: var(--text); }
/* Both arrows grouped in the top right corner, not one on each side. */
.dash-stats-arrow--prev { right: 30px; }
.dash-stats-arrow--next { right: 2px; }
.dash-stats-arrow.hidden { display: none; }
.dash-stats-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
/* The Year block (card or, expanded, its toggle) isn't available once a
   task/todo pane is open and competing for space — This Week, This month,
   Next month, and Settlement stay visible. _renderShowStats also force-
   collapses _yearsExpanded back to false whenever a pane is open, so this
   never has to hide a whole row of year columns with nothing else to show
   in their place — just the single collapsed year card, same as always. */
#app.detail-panel-open .dash-stats-col--year,
#app.detail-panel-open .dash-stats-years-toggle {
  display: none;
}
/* Notifications shifting left needs the room more than any of this does —
   hide the whole stats row for that state specifically (overrides the
   cards-1-3-stay-visible default above, which still applies to the
   todo-panel-open/plain-task-open states). Hides the scroll-wrap itself,
   not just .dash-stats inside it — the scroll arrows and years-toggle are
   absolutely-positioned siblings of .dash-stats, not descendants, so they
   wouldn't be hidden by a rule that only targets .dash-stats. */
#app.notif-preview-open .dash-stats-scroll-wrap {
  display: none;
}
/* 2026/2027 stacked vertically — no longer side-by-side, so the card no
   longer needs extra width (removed its flex:1.6 override). */
.dash-stats-year-halves { display: flex; flex-direction: column; gap: 10px; }
.dash-stats-year-half { min-width: 0; }
/* Distinct tint so the year block reads as its own section, separate from
   the other stat cards — same family as the purple "Confirmed shows" pill. */
.dash-stats-col--year {
  background: #F0F8FE;
  border-color: #CDE6FA;
}
/* Newly-revealed year columns cascade in left-to-right right after the
   "Open Years" toggle is clicked (see the click handler, which also FLIPs
   the original 2026/2027 card from its old screen position into this
   one) — together they read as the colored block sliding/growing left
   across the row instead of the layout just snapping into place. */
@keyframes dashYearColEnter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
.dash-stats-col--year-enter {
  animation: dashYearColEnter 1.12s ease-out both;
}
/* Positioned on .dash-stats-scroll-wrap itself (like the scroll arrows),
   grouped with them on the RIGHT — not inside any one year card, so it
   stays put regardless of how far the row is scrolled. */
.dash-stats-years-toggle {
  position: absolute; top: 2px; right: 58px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
  cursor: pointer; z-index: 2;
}
.dash-stats-years-toggle:hover { background: var(--bg-hover); color: var(--text); }
.dash-stats-line {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 4px;
}
/* Extra breathing room above the Advance line, separating it from the
   stats above it within the same month block. */
.dash-stats-line--spaced {
  margin-top: 8px;
}
.dash-stats-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.dash-stats-month-block { margin-bottom: 14px; }
.dash-stats-month-block:last-child { margin-bottom: 0; }
.dash-stats-count-link {
  cursor: pointer;
  /* Keeps "0 Open"/"10 Done" from breaking apart mid-phrase — the
     surrounding plain text (e.g. "Advance: ", " | ") can still wrap
     normally, so the whole line collapses to one when there's room and
     wraps after the label when the card is too narrow (pane open on a
     small screen), without ever splitting a count from its word. */
  white-space: nowrap;
}
.dash-stats-count-link:hover { opacity: 0.8; }
/* Colored pill badges around stat counts — clickable (.dash-stats-count-link)
   or informational, same look either way. Color is semantic: blue = neutral count, green = done, amber =
   needs attention, purple = confirmed/locked-in, grey = inactive/past. */
.dash-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  /* Keeps a single-digit pill ("4") from looking thin/circular — a longer
     one ("4 Open") is already wider than this and is unaffected. */
  min-width: 20px;
}
.dash-pill--blue   { background: #dbeafe; color: #1e40af; }
.dash-pill--green  { background: #d1fae5; color: #065f46; }
.dash-pill--amber  { background: #fef3c7; color: #92400e; }
.dash-pill--purple { background: #E8F4FD; color: #1679C4; }
.dash-pill--grey   { background: #e5e7eb; color: #374151; }
.dash-pill--selected { box-shadow: 0 0 0 2px currentColor; }

/* TO DO column taken over by a stat-card number's shows (dashboard.js
   _renderTodoShowList): artist dropdown + close button in the header. */
.todo-show-artist-select {
  margin-left: auto; padding: 3px 6px; font-size: 11px;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
}
.todo-show-close {
  margin-left: 6px; background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-secondary);
  padding: 0 4px; border-radius: var(--radius-sm);
}
.todo-show-close:hover { background: var(--bg-hover); color: var(--text); }
.todo-show-list { display: flex; flex-direction: column; gap: 6px; }
.todo-show-row {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); cursor: pointer;
}
.todo-show-row:hover { background: var(--bg-hover); }
.todo-show-row.active { border-color: var(--accent-blue); background: #eff6ff; }
.todo-show-title { font-size: 13px; font-weight: 600; color: var(--text); }
.todo-show-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ── Overview tab — two-column layout ───────────────────────────────────── */

.overview-columns {
  display: flex; flex-wrap: wrap; gap: 24px; padding: 8px 24px 24px; align-items: flex-start;
}
.overview-col {
  flex: 1 1 320px; min-width: 320px;
  max-height: calc(100vh - 180px); overflow-y: auto;
  padding-right: 4px;
}
.overview-col-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-secondary);
  padding: 8px 0 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.overview-col-header--with-add { display: flex; align-items: center; }
.todo-col-add-btn {
  margin-left: auto; background: none; border: none; color: var(--text-secondary);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
  border-radius: var(--radius-sm); font-weight: 300;
}
.todo-col-add-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Inline reminder add bar */
.todo-add-bar {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
}
.todo-add-input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 13px; outline: none;
  background: var(--bg); color: var(--text); box-sizing: border-box;
}
.todo-add-input:focus { border-color: var(--accent-blue); }
.todo-add-input::placeholder { color: var(--text-placeholder); }
.todo-add-prio-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Notification items ──────────────────────────────────────────────────── */

.notif-item {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.notif-item:hover { background: var(--bg-hover); border-color: var(--text-secondary); }
.notif-item.active { background: #f3f4f6; border-color: #9ca3af; }
.notif-item.active:hover { background: #e5e7eb; border-color: #6b7280; }
.notif-item--acked { opacity: 0.6; }
.notif-item--acked:hover { opacity: 0.9; }
.notif-item--acked .notif-task-title { color: var(--text-secondary); }
.notif-task-title {
  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px;
}
.notif-project { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.notif-comment-text {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 8px;
}
.notif-footer {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary);
}
.notif-sender { font-weight: 500; color: var(--text); }
.notif-age { flex: 1; }
.notif-nudge {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: #92400e;
  line-height: 1.4;
}
.notif-thumb-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 8px; font-size: 12px; cursor: pointer; flex-shrink: 0;
  filter: grayscale(100%); opacity: 0.55; line-height: 1.4;
  transition: background 0.12s, border-color 0.12s, filter 0.12s, opacity 0.12s;
}
.notif-thumb-btn:hover { background: var(--bg-hover); border-color: #9ca3af; opacity: 0.85; }
.notif-thumb-btn.acked {
  filter: none; opacity: 1;
  background: #fef9c3; border-color: #fde047;
}
.notif-thumb-btn.acked:hover { background: #fef08a; }

/* ── Comment thumbs-up button (in comment pane) ──────────────────────────── */

.comment-ack-row {
  display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 4px;
}
.comment-ack-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 8px; font-size: 12px; cursor: pointer;
  filter: grayscale(100%); opacity: 0.55;
  transition: background 0.12s, border-color 0.12s, filter 0.12s, opacity 0.12s;
}
.comment-ack-btn:hover:not(.acked):not(:disabled) {
  background: var(--bg-hover); border-color: #9ca3af; opacity: 0.8;
}
.comment-ack-btn.acked {
  filter: none; opacity: 1;
  background: #fef9c3; border-color: #fde047; cursor: default;
}
.comment-ack-btn:disabled:not(.acked) { cursor: default; }

/* ── To Do drag handle ──────────────────────────────────────────────────── */

.todo-drag-handle {
  color: transparent; cursor: grab; padding: 0 2px; font-size: 14px;
  line-height: 1; user-select: none; flex-shrink: 0; align-self: center;
  transition: color 0.1s;
}
.todo-item:hover .todo-drag-handle { color: var(--text-placeholder); }
.todo-drag-handle:active { cursor: grabbing; }
.todo-item.dragging { opacity: 0.35; }
.todo-drop-indicator {
  height: 2px; background: var(--accent-blue); border-radius: 2px;
  margin: 1px 0; pointer-events: none;
}

/* ── Completed section toggle ───────────────────────────────────────────── */

.todo-section-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.todo-section-toggle:hover { color: var(--text); }
.todo-toggle-arrow { font-size: 10px; flex-shrink: 0; }

/* ── To Do item priority left-border & hover tint ──────────────────────── */

/* All items get a visible 3px left border; default=grey, priority overrides */
.todo-item { border-left: 4px solid #e5e7eb; }
.todo-item[data-priority="urgent_important"]     { border-left-color: #ef4444; }
.todo-item[data-priority="important_not_urgent"] { border-left-color: #3b82f6; }
.todo-item[data-priority="urgent_not_important"] { border-left-color: #22c55e; }
.todo-item[data-priority="quick_info"]           { border-left-color: #9ca3af; }

.todo-item[data-priority="urgent_important"]:hover     { background: #fef2f2; border-color: #fca5a5; border-left-color: #ef4444; }
.todo-item[data-priority="important_not_urgent"]:hover { background: #eff6ff; border-color: #93c5fd; border-left-color: #3b82f6; }
.todo-item[data-priority="urgent_not_important"]:hover { background: #f0fdf4; border-color: #86efac; border-left-color: #22c55e; }
.todo-item[data-priority="quick_info"]:hover           { background: var(--bg-hover); border-color: var(--border); border-left-color: #9ca3af; }

.todo-item[data-priority="urgent_important"].active,
.todo-item[data-priority="urgent_important"].active:hover     { background: #fef2f2; border-color: #fca5a5; border-left-color: #ef4444; }
.todo-item[data-priority="important_not_urgent"].active,
.todo-item[data-priority="important_not_urgent"].active:hover { background: #eff6ff; border-color: #93c5fd; border-left-color: #3b82f6; }
.todo-item[data-priority="urgent_not_important"].active,
.todo-item[data-priority="urgent_not_important"].active:hover { background: #f0fdf4; border-color: #86efac; border-left-color: #22c55e; }
.todo-item[data-priority="quick_info"].active,
.todo-item[data-priority="quick_info"].active:hover           { background: var(--bg-hover); border-color: #d1d5db; border-left-color: #9ca3af; }

/* ── Compact priority strip ─────────────────────────────────────────────── */

.prio-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 5px;
}
.prio-strip--overlay {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  margin-top: 0;
}
.prio-dot-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.prio-dot-btn::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.prio-dot-btn--urgent-important::before     { background: #ef4444; }
.prio-dot-btn--important-not-urgent::before { background: #3b82f6; }
.prio-dot-btn--urgent-not-important::before { background: #22c55e; }
.prio-dot-btn--quick-info::before           { background: #9ca3af; }
.prio-dot-btn--urgent-important:hover     { background: #fef2f2; border-color: #ef4444; color: #dc2626; }
.prio-dot-btn--important-not-urgent:hover { background: #eff6ff; border-color: #3b82f6; color: #2563eb; }
.prio-dot-btn--urgent-not-important:hover { background: #f0fdf4; border-color: #22c55e; color: #16a34a; }
.prio-dot-btn--quick-info:hover           { background: var(--bg-hover); border-color: #9ca3af; color: var(--text-primary); }

/* task-col-notes needs a positioning context when strip is overlaid */
.task-col-notes { position: relative; }

/* ── Eisenhower matrix pop-up ───────────────────────────────────────────── */

.comment-matrix {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 30;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.14);
}
.comment-matrix.matrix-visible { display: grid; }
.comment-matrix-row { display: contents; }
.matrix-btn {
  padding: 11px 8px; border: none; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; cursor: pointer; text-align: center;
  white-space: pre-line; line-height: 1.35; color: white;
  transition: filter 0.1s, transform 0.08s;
}
.matrix-btn:hover { filter: brightness(1.12); transform: scale(1.02); }
.matrix-btn:active { transform: scale(0.97); }
.matrix-btn--urgent-important     { background: #dc2626; }
.matrix-btn--important-not-urgent { background: #3b82f6; }
.matrix-btn--urgent-not-important { background: #16a34a; }
.matrix-btn--quick-info           { background: #6b7280; }

/* ── Comment priority pills ─────────────────────────────────────────────── */

.comment-prio-pill {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 12px; margin-top: 6px;
}
.prio-pill--urg-imp  { background: #dc2626; color: white; }
.prio-pill--imp-nur  { background: #3b82f6; color: white; }
.prio-pill--urg-nim  { background: #16a34a; color: white; }
.prio-pill--quick    { background: #6b7280; color: white; }

/* ── Overview Calendar column ───────────────────────────────────────────── */

.overview-col--cal { display: flex; flex-direction: column; }

/* Header */
.cal-col-hdr {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 0;
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.cal-nav-row {
  display: flex; align-items: center; gap: 4px; margin-bottom: 8px;
}
.cal-nav-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; padding: 2px 9px; font-size: 16px; line-height: 1;
  color: var(--text-secondary);
}
.cal-nav-btn:hover { background: var(--bg-hover); }
.cal-nav-lbl {
  flex: 1; font-size: 11px; font-weight: 600; color: var(--text);
  text-align: center; padding: 0 4px;
}
.cal-today-btn {
  font-size: 10px; padding: 3px 7px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; background: none; color: var(--text-secondary);
  white-space: nowrap;
}
.cal-today-btn:hover { background: var(--bg-hover); }

/* Google Calendar single-row nav for tab mode */
.cal-nav-row--gcal {
  display: flex; align-items: center; gap: 6px; margin-bottom: 0;
}
.cal-nav-row--gcal .cal-nav-btn {
  font-size: 18px; padding: 2px 8px; border-color: #dadce0; color: #70757a; border-radius: 50%;
}
.cal-nav-row--gcal .cal-nav-btn:hover { background: #f1f3f4; }
.cal-nav-row--gcal .cal-today-btn {
  font-size: 12px; padding: 6px 13px; border-color: #dadce0; color: #3c4043; border-radius: 4px;
}
.cal-nav-row--gcal .cal-today-btn:hover { background: #f1f3f4; }
.cal-nav-row--gcal .cal-nav-lbl {
  flex: 1; text-align: center; font-size: 16px; font-weight: 400; color: #3c4043;
}

.cal-view-tgl { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cal-view-btn {
  flex: 1; font-size: 11px; padding: 4px 6px; border: none; background: none;
  cursor: pointer; color: var(--text-secondary); border-right: 1px solid var(--border);
}
.cal-view-btn:last-child { border-right: none; }
.cal-view-btn:hover:not(.active) { background: var(--bg-hover); }
.cal-view-btn.active { background: var(--accent, #3b82f6); color: white; }
.cal-view-btn.disabled,
.cal-view-btn:disabled {
  cursor: not-allowed; color: var(--text-placeholder); opacity: 0.5;
}
.cal-view-btn.disabled:hover, .cal-view-btn:disabled:hover { background: none; }

/* Body */
.cal-body { flex: 1; overflow-y: auto; }

/* Day view */
.cal-day-wrap { display: flex; flex-direction: column; }
.cal-allday-row {
  display: grid; grid-template-columns: 40px 1fr;
  min-height: 32px; max-height: 160px; border-bottom: 2px solid var(--border);
  background: #f9fafb;
}
/* Caps how tall a single day's stack of chips can grow before scrolling
   internally — without this, a day with many shows pushed every hour row
   below it down the page instead of staying contained. */
.cal-allday-row .cal-time-cell {
  max-height: 160px; overflow-y: auto;
}
.cal-time-row {
  display: grid; grid-template-columns: 40px 1fr;
  min-height: 40px; border-bottom: 1px solid var(--border-light, #f3f4f6);
}
.cal-time-row.cal-now-row { background: #fefce8; }
.cal-time-lbl {
  font-size: 10px; color: var(--text-placeholder); padding: 4px 5px 0 0;
  text-align: right; user-select: none; white-space: nowrap;
}
.cal-time-cell {
  padding: 3px 4px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.cal-time-cell:hover { background: var(--bg-hover); }

/* Week view */
.cal-week-grid { display: flex; flex-direction: column; }
.cal-week-hdr-row {
  display: grid; grid-template-columns: 40px repeat(7, 1fr);
  position: sticky; top: 0; background: var(--bg); z-index: 1;
  border-bottom: 2px solid var(--border);
}
.cal-week-corner { }
.cal-week-day-hdr {
  font-size: 11px; font-weight: 600; text-align: center; padding: 6px 2px;
  color: var(--text-secondary);
}
.cal-week-day-hdr.today { color: var(--accent, #3b82f6); }
.cal-week-allday-row {
  display: grid; grid-template-columns: 40px repeat(7, 1fr);
  min-height: 28px; max-height: 160px; border-bottom: 2px solid var(--border); background: #f9fafb;
}
/* Same per-day scroll cap as the Day view's all-day cell above. */
.cal-week-allday-row .cal-week-cell {
  max-height: 160px; overflow-y: auto;
}
.cal-week-row {
  display: grid; grid-template-columns: 40px repeat(7, 1fr);
  min-height: 40px; border-bottom: 1px solid var(--border-light, #f3f4f6);
}
.cal-week-cell {
  border-left: 1px solid var(--border-light, #f3f4f6);
  padding: 2px 3px; cursor: pointer; min-height: 40px;
  display: flex; flex-direction: column; gap: 2px;
}
.cal-week-cell.today { background: #fefce8; }
.cal-week-cell:hover { background: var(--bg-hover); }

/* Month view — Google Calendar style */
/* Event chips — solid colored pills */
.cal-event-chip {
  background: #1a73e8; border: none; border-radius: 3px;
  padding: 2px 5px; cursor: pointer; overflow: hidden;
  margin-bottom: 1px; transition: opacity 0.1s;
  /* Inside a flex-column cell with a max-height + scroll cap (see
     .cal-allday-row .cal-time-cell), flex children shrink to fit by
     default instead of keeping their content size — which squished every
     chip down to a sliver (just the venue line) rather than making the
     cell actually scroll. flex-shrink:0 keeps each chip its full height so
     overflow is real and the cell scrolls instead of crushing its content. */
  flex-shrink: 0;
}
.cal-event-main { min-width: 0; }
.cal-event-chip:hover { opacity: 0.85; }
.cal-event-chip.color-amber { background: var(--accent-amber); }
.cal-event-chip.color-blue  { background: var(--accent-blue); }
/* Confirmed (green) uses a softer, lighter pastel fill instead of the
   saturated shared --accent-green — needs dark text for contrast, so its
   text-color children are overridden below rather than left white. */
.cal-event-chip.color-green { background: #b9d98a; }
.cal-event-chip.color-green .cal-event-name { color: #24361a; }
.cal-event-chip.color-green .cal-event-location,
.cal-event-chip.color-green .cal-event-sub { color: rgba(36,54,26,0.75); }
.cal-event-chip.color-clear { background: #fff; border: 1px solid #d1d5db; }
.cal-event-chip.color-clear .cal-event-name { color: #1f2937; }
.cal-event-chip.color-clear .cal-event-location,
.cal-event-chip.color-clear .cal-event-sub { color: rgba(31,41,55,0.7); }
/* Planning uses a solid grey fill. */
.cal-event-chip.color-grey { background: var(--accent-grey); }
/* Past show (moved to Past Shows / marked complete) — same green fill as
   Confirmed, plus a diagonal-stripe overlay to mark it as passed. */
.cal-event-chip.cal-chip-past {
  background-image: repeating-linear-gradient(
    45deg, rgba(36,54,26,0.16) 0, rgba(36,54,26,0.16) 4px,
    transparent 4px, transparent 9px
  );
}
.cal-event-name {
  font-size: 11px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: #fff;
}
.cal-event-location {
  font-size: 10px; color: rgba(255,255,255,0.85); line-height: 1.3;
  white-space: normal; overflow-wrap: break-word; margin-top: 1px;
}
.cal-event-sub {
  font-size: 10px; color: rgba(255,255,255,0.8); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cal-event-chip.color-green .cal-event-chip.color-clear 
/* Advance schedule blocks (Get In / Sound Check / Doors / etc.) — deliberately
   smaller and lighter than a full event chip, more like a timeline marker. */
.cal-schedule-block {
  font-size: 10px; font-weight: 500; line-height: 1.3;
  padding: 1px 5px; border-radius: var(--radius-sm); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid transparent; background: var(--bg-hover);
  color: var(--text-secondary);
  opacity: 0; animation: cal-schedule-fadein 0.2s ease forwards;
  transition: opacity 0.12s, background 0.12s;
}
.cal-schedule-block:hover { background: #e5e7eb; }
.cal-schedule-block.color-amber { border-left-color: var(--accent-amber); }
.cal-schedule-block.color-blue  { border-left-color: var(--accent-blue); }
.cal-schedule-block.color-green { border-left-color: var(--accent-green); }
.cal-schedule-block.color-grey  { border-left-color: var(--accent-grey); }

@keyframes cal-schedule-fadein {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Calendar (calendarView.js / dashboard.js — both share OverviewCalendar's Day/Week/Month component) ── */

/* The detail panel is position:fixed and doesn't shrink its container's own
   box (#calendar-view in Project view, #dashboard-view in Dashboard), so the
   (fluid, 1fr-column) grid and its nav row would otherwise reflow wide enough
   to sit underneath the panel with no way to reach them. Reserve that width
   here — but ONLY for the Project-view instance (.cal-tab-wrap--project,
   set by calendarView.js): the Dashboard instance sits inside #dashboard-view,
   which already gets this exact same padding-right from the generic
   #app.detail-panel-open #dashboard-view rule above. Applying it a second
   time here (as a bare .cal-tab-wrap selector, matching both instances) used
   to stack both paddings for the Dashboard Calendar tab specifically,
   squashing its grid down to almost nothing. */
#app.detail-panel-open .cal-tab-wrap--project {
  padding-right: max(380px, 45vw);
}

.cal-notice {
  font-size: 12px; color: var(--text-secondary); background: var(--bg-hover);
  border-radius: var(--radius-sm); padding: 7px 12px; margin-bottom: 12px;
}

.cal-dow-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0;
}
.cal-dow {
  font-size: 11px; font-weight: 500; text-align: center; padding: 8px 4px;
  color: #70757a; text-transform: uppercase; letter-spacing: 0.04em;
  border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
  background: #fff;
}

/* ── Year view: grid of 12 small month calendars ─────────────────────────── */
.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 8px 4px 20px;
}
.cal-year-month {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-sm);
  padding: 8px;
  background: #fff;
}
.cal-year-month-hdr {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 6px;
  cursor: pointer;
}
.cal-year-month-hdr:hover { color: var(--accent-blue); }
.cal-year-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-year-dow {
  font-size: 9px;
  text-align: center;
  color: #70757a;
  padding-bottom: 2px;
}
.cal-year-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-year-day {
  position: relative;
  font-size: 10px;
  text-align: center;
  padding: 3px 0;
  cursor: pointer;
  border-radius: 50%;
}
.cal-year-day:hover { background: var(--bg-hover); }
.cal-year-day-blank { cursor: default; }
.cal-year-day-blank:hover { background: none; }
.cal-year-day-today { background: var(--accent-blue); color: #fff; font-weight: 600; }
.cal-year-day-has-events::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent-blue);
}
.cal-year-day-today.cal-year-day-has-events::after { background: #fff; }

.cal-week { position: relative; }

.cal-week-bg {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #e0e0e0;
}
.cal-day-cell {
  position: relative;
  min-height: 150px; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
  padding: 4px 4px 20px; cursor: pointer; background: #fff;
}
.cal-day-cell:hover { background: #f8f9fa; }
.cal-day-cell.cal-day-other-month { background: #fafafa; }
.cal-day-cell.cal-day-other-month .cal-day-num { color: #bdbdbd; }
.cal-day-num {
  font-size: 12px; font-weight: 400; color: #70757a;
  width: 24px; height: 24px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; margin-bottom: 2px;
}
.cal-day-cell.cal-day-today .cal-day-num { background: #1a73e8; color: #fff; font-weight: 600; }

.cal-events-layer {
  position: absolute; top: 28px; left: 0; right: 0; bottom: 20px;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 40px; gap: 3px 0;
  pointer-events: none;
}
.cal-bar {
  pointer-events: auto;
  margin: 0 2px; padding: 2px 6px; border-radius: var(--radius-sm);
  color: #fff; overflow: hidden;
  cursor: pointer; transition: opacity 0.1s;
  display: flex; flex-direction: column; justify-content: center;
}
.cal-bar:hover { opacity: 0.85; }
.cal-bar.color-amber { background: var(--accent-amber); }
.cal-bar.color-blue  { background: var(--accent-blue); }
/* Softer pastel green with dark text (inherited by .cal-bar-venue/-location/
   -status below, none of which set their own color) instead of the
   saturated shared --accent-green, which reads poorly with white text. */
.cal-bar.color-green { background: #b9d98a; color: #24361a; }
.cal-bar.color-clear { background: #fff; color: #1f2937; border: 1px solid #d1d5db; }
/* Planning uses a solid grey fill. */
.cal-bar.color-grey { background: var(--accent-grey); }
/* Past show (moved to Past Shows / marked complete) — same green fill as
   Confirmed, plus a diagonal-stripe overlay to mark it as passed. */
.cal-bar.cal-bar-past {
  background-image: repeating-linear-gradient(
    45deg, rgba(36,54,26,0.16) 0, rgba(36,54,26,0.16) 4px,
    transparent 4px, transparent 9px
  );
}
.cal-bar-venue {
  font-size: 11px; font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-bar-location {
  font-size: 10px; font-weight: 500; line-height: 1.2; margin-top: 1px;
  opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-bar-status {
  font-size: 9px; font-weight: 500; line-height: 1.2; margin-top: 1px;
  opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cal-more-link {
  position: absolute; bottom: 2px; left: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 10px; font-weight: 600; color: var(--text-secondary);
  pointer-events: auto;
}
.cal-more-link:hover { color: var(--accent-blue); }

.cal-day-popover {
  position: fixed; z-index: 1000;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); min-width: 180px; max-width: 260px; padding: 8px;
}
.cal-day-popover-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.cal-day-popover-item {
  font-size: 12px; color: #fff; padding: 5px 8px; border-radius: var(--radius-sm);
  margin-bottom: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-day-popover-item:last-child { margin-bottom: 0; }
.cal-day-popover-item:hover { opacity: 0.85; }
.cal-day-popover-item.color-amber { background: var(--accent-amber); }
.cal-day-popover-item.color-blue  { background: var(--accent-blue); }
.cal-day-popover-item.color-green { background: #b9d98a; color: #24361a; }
.cal-day-popover-item.color-clear { background: #fff; color: #1f2937; border: 1px solid #d1d5db; }
.cal-day-popover-item.color-grey  { background: var(--accent-grey); }

/* Quick reminder button */
.cal-qr-btn {
  width: 100%; text-align: left; background: none;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 11px; cursor: pointer;
  color: var(--text-placeholder); margin-top: 8px;
}
.cal-qr-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }

/* ── Calendar tab ──────────────────────────────────────────────────────── */

.cal-tab-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 24px 24px;
  gap: 0;
}
.cal-tab-reminder-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-tab-reminder-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.cal-tab-reminder-input:focus { border-color: var(--accent-blue); }
.cal-tab-reminder-input::placeholder { color: var(--text-placeholder); }
.cal-tab-prio-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cal-tab-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}
.cal-tab-grid .cal-col-hdr {
  padding: 10px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
}
.cal-tab-grid .cal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Modal */
.cal-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.cal-modal {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; min-width: 320px; max-width: 400px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.cal-modal-title {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 14px;
}
.cal-modal-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; color: var(--text); background: var(--bg);
  margin-bottom: 10px;
}
.cal-modal-input:focus { outline: none; border-color: var(--accent, #3b82f6); }
.cal-modal-select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 12px; color: var(--text); background: var(--bg);
  margin-bottom: 10px;
}
.cal-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cal-modal-btn {
  padding: 7px 16px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; border: none;
}
.cal-modal-btn--cancel { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border); }
.cal-modal-btn--cancel:hover { background: var(--border); }
.cal-modal-btn--save { background: var(--accent, #3b82f6); color: white; }
.cal-modal-btn--save:hover { opacity: 0.88; }
.cal-modal-prio-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cal-modal-prio-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
  border: 2px solid var(--prio-color, #d1d5db);
  color: var(--prio-color, #6b7280);
  background: transparent;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.cal-modal-prio-btn:hover { background: color-mix(in srgb, var(--prio-color, #d1d5db) 12%, transparent); }
.cal-modal-prio-btn.active { background: var(--prio-color, #d1d5db); color: #fff; }
.socials-thumb-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.socials-thumb-play::after {
  content: ''; margin-left: 2px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
/* Side pane open: stat cards keep their pane-closed width (--dash-card-w,
   set by dashboard.js) and the row scrolls rather than narrowing them. */
#app.detail-panel-open .dash-stats-col:not(.dash-stats-col--year) {
  flex: 0 0 var(--dash-card-w, 200px);
}

/* ── Send pitch (Pitch pane) + Agency Admin pitch sections ── */
.detail-pitch-log { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.detail-pitch-log-row { font-size: 12px; color: var(--text-secondary); }
.detail-pitch-log-row--failed, .detail-pitch-log--error { color: var(--accent-red, #d93025); font-size: 12px; }
.detail-pitch-log-row--replied { color: var(--accent-green, #188038); }
.pitch-compose-from { font-size: 13px; color: var(--text-secondary); padding: 6px 0; }
.pitch-compose-footer-preview { padding: 0 16px 8px; opacity: 0.85; pointer-events: none; }
.agency-admin-pitch-footer { width: 100%; max-width: 520px; font-family: inherit; resize: vertical; }
.agency-admin-pitch-status { font-size: 12px; color: var(--text-secondary); margin-left: 10px; }
.agency-admin-dnc-add { display: flex; gap: 8px; max-width: 620px; margin-bottom: 8px; }
.agency-admin-dnc-add .finance-form-input { flex: 1; }
.agency-admin-dnc-list { max-width: 620px; }
.agency-admin-dnc-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.agency-admin-dnc-email { font-size: 13px; color: var(--text); }
.agency-admin-dnc-meta { flex: 1; font-size: 12px; color: var(--text-placeholder); }
.agency-admin-dnc-remove { font-size: 12px; color: var(--accent-blue); background: none; border: none; cursor: pointer; padding: 0; }
.agency-admin-pitch-fromname { display: block; width: 100%; max-width: 520px; margin-bottom: 14px; }
.agency-admin-wrap .finance-form-label { display: block; margin-bottom: 6px; }
.pitch-compose-image { display: flex; align-items: flex-end; gap: 12px; padding: 12px 16px 0; }
.pitch-compose-image img { max-width: 160px; max-height: 110px; border-radius: 6px; object-fit: cover; }
.pitch-compose-image img.pitch-compose-image--off { opacity: 0.25; }
.pitch-compose-image-toggle { font-size: 12px; color: var(--accent-blue); background: none; border: none; cursor: pointer; padding: 0; }
.pitch-compose-image { flex-shrink: 0; }
.pitch-compose-panel .gmail-compose-body-wrap { flex-shrink: 0; }
.pitch-compose-panel { overflow-y: auto; }
.pitch-compose-image img { width: 100px; height: 100px; max-width: none; max-height: none; border-radius: 50%; }
.pitch-compose-image { padding: 10px 16px; align-items: center; }
.pitch-compose-image-side { display: flex; flex-direction: column; gap: 4px; }
.pitch-compose-image-note { font-size: 12px; color: var(--text-secondary); }
.pitch-compose-image-side { align-items: flex-start; }
.pitch-compose-panel .detail-rich-editor img.pitch-compose-inline-img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; display: block; }
.pitch-compose-image-bar { padding: 6px 16px 0; }
.pitch-compose-internal-row { background: var(--bg-sidebar); }

/* ── Pitching: stage date bubbles, Move, pitch history ── */
.pitch-bubble { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 10px; white-space: nowrap; }
.pitch-bubble--pitched    { background: #e3ecff; color: #2950b8; }
.pitch-bubble--followup_1 { background: #fff1d6; color: #9a5b00; }
.pitch-bubble--followup_2 { background: #ffe1cc; color: #b0450a; }
.pitch-bubble--reply      { background: #dcf3e3; color: #1d7a3e; }
.pitch-bubble-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.detail-section-selector--pitch { align-items: flex-end; }
.pitch-stage-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pitch-bubble-slot { display: block; height: 16px; }
.detail-section-selector--pitch .section-pill-arrow { margin-bottom: 6px; }
.detail-pitch-info { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.pitch-history-row { display: flex; gap: 12px; font-size: 13px; }
.pitch-history-label { width: 110px; flex-shrink: 0; color: var(--text-secondary); font-size: 12px; }
.pitch-history-value { color: var(--text); word-break: break-word; }
.pitch-history-btn { margin-left: auto; width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; font-size: 13px; line-height: 1; }
.pitch-history-btn:hover { color: var(--text); background: var(--bg-hover); }
.pitch-history-btn--empty { opacity: 0.45; }
.detail-tour-selector { display: flex; align-items: center; }
.pitch-history-panel { position: fixed; z-index: 60; width: 0; overflow: hidden; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,0.08); transition: width 0.25s ease; }
.pitch-history-panel.open { width: 320px; }
.pitch-history-inner { width: 320px; box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pitch-history-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.pitch-history-timeline { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.mini-tooltip { position: fixed; z-index: 1000; background: #222; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; pointer-events: none; }
.pitch-detail-grid { display: grid; grid-template-columns: 72px 1fr; column-gap: 12px; }
.pitch-status-block { margin: 18px 0 22px; }
.pitch-status-labels { display: grid; grid-template-rows: 22px 30px; row-gap: 6px; align-items: center; }
.pitch-status-grid { display: grid; grid-template-rows: 22px 30px; row-gap: 6px; column-gap: 6px; justify-content: start; }
.pitch-status-cell { display: flex; align-items: center; justify-content: center; }
.pitch-detail-label { font-size: 12px; color: var(--text-secondary); }
.pitch-detail-fields { row-gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); }
.pitch-detail-value { font-size: 13px; color: var(--text); word-break: break-word; }
.pitch-detail-value--empty { color: var(--text-placeholder); }
.pitch-detail-fields .detail-tour-select { justify-self: start; }
/* Pitch card: title left, compact date/letter column right */
.board-card--pitch { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: start; }
.board-card--pitch > :not(.pitch-mini-col) { grid-column: 1; }
.pitch-mini-col { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 2px; padding-left: 8px; border-left: 1px solid var(--border); }
.pitch-mini-line { display: flex; align-items: center; gap: 5px; line-height: 14px; }
.pitch-mini-date { font-size: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pitch-mini-badge { width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pitch-status-block { margin-bottom: 12px; }
.pitch-move-row { align-items: center; margin-bottom: 20px; }
.pitch-move-row .detail-tour-select { justify-self: start; }

/* ── Backstage: Shows ↔ Pitching slider ── */
.dash-stats-slider-wrap { position: relative; }
.dash-stats-slider { overflow: hidden; }
.dash-stats-track { display: flex; width: 200%; transform: translateX(-50%); transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); align-items: flex-start; }
.dash-stats-track--pitch { transform: translateX(0); }
.dash-stats-panel { flex: 0 0 50%; width: 50%; min-width: 0; }
.dash-stats-panel--pitch { display: flex; gap: 10px; padding: 8px 16px 20px; border-bottom: 1px solid var(--border); margin-bottom: 8px; box-sizing: border-box; }
.dash-stats-col--pitching { flex: 0 0 auto; min-width: 220px; }
.dash-stats-mode-toggle {
  position: absolute; left: -14px; top: 10px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-secondary); cursor: pointer;
}
.dash-stats-mode-toggle:hover { background: var(--bg-hover); color: var(--text); }
.overview-columns--pitch .overview-col--notif { display: none !important; }
.overview-columns--pitch .overview-col--todo { flex: 1 1 auto; max-width: none; }
.dash-pill--pitch-pitched    { background: #e3ecff; color: #2950b8; }
.dash-pill--pitch-followup_1 { background: #fff1d6; color: #9a5b00; }
.dash-pill--pitch-followup_2 { background: #ffe1cc; color: #b0450a; }
.dash-pill--pitch-reply      { background: #dcf3e3; color: #1d7a3e; }
.dash-pill--pitch-success { background: #ede4ff; color: #6a3fc7; }
.pitch-followup-btn { justify-self: start; padding: 6px 12px; font-size: 12px; }
.pitch-followup-btn:disabled { opacity: 0.5; cursor: default; }
.pitch-compose-thread-note { padding: 6px 16px; font-size: 11px; color: var(--text-placeholder); }

/* Tour headings stand out from Shows / Pitching: soft violet bar. */
.board-group--tour > .board-group-bar,
.tour-header { background: #E8F4FD; border-color: #CDE6FA; }
.board-group--tour > .board-group-bar:hover,
.tour-header:hover { background: #DCEFFC; }
.board-group--tour .board-group-name,
.tour-header .tour-name { color: #1679C4; }
.board-group-action { margin-left: auto; font-size: 11px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; }
.board-group-action:hover { color: var(--text); }
.board-group-action:disabled { opacity: 0.6; cursor: default; }
.pitch-detail-reply { color: #1d7a3e; }
/* Shows = soft blue, Pitching = soft teal (tours are violet). */
.board-group--shows > .board-group-bar { background: #e9f1ff; border-color: #c9dbfb; }
.board-group--shows > .board-group-bar:hover { background: #dfeaff; }
.board-group--shows .board-group-name { color: #2950b8; }
.board-group--pitching > .board-group-bar { background: #e4f6f2; border-color: #bfe6dc; }
.board-group--pitching > .board-group-bar:hover { background: #d8f1eb; }
.board-group--pitching .board-group-name { color: #13786b; }
.pitch-detail-reply { display: flex; flex-direction: column; gap: 4px; }
.pitch-detail-fields > .pitch-detail-label:has(+ .pitch-detail-reply) { align-self: start; }
.pitch-reply-meta { font-size: 12px; color: #1d7a3e; font-weight: 600; }
.pitch-reply-message { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.pitch-history-timeline { flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 8px 0; }
.pitch-history-step { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }
.pitch-history-step .pitch-bubble { justify-self: start; }
.pitch-history-when { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pitch-bubble--success { background: #ede4ff; color: #6a3fc7; }
.pitch-history-reply { font-size: 12px; color: var(--text); font-style: italic; padding-left: 120px; }
.pitch-detail-reply { gap: 12px; }
.pitch-reply-item { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid #bfe6c9; }
.pitch-history-reply { padding-left: 0; margin-top: 4px; }
.pitch-reply-btn { margin-top: 4px; }
.pitch-reply-body .detail-rich-editor { min-height: 120px; }
.pitch-reply-quoted { padding: 4px 16px 12px; max-height: 280px; overflow-y: auto; font-size: 13px; color: var(--text-secondary); border-top: 1px dashed var(--border); }
.pitch-reply-btn { align-self: flex-start; }
.pitch-reply-quoted { max-height: 360px; }
/* Reply compose: single Gmail-style scroll */
.pitch-reply-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pitch-reply-scroll .gmail-compose-body-wrap { flex: none; height: auto; overflow: visible; min-height: 0; }
.pitch-reply-scroll .gmail-compose-rich-field,
.pitch-reply-scroll .detail-rich-editor { height: auto !important; max-height: none !important; overflow: visible !important; }
.pitch-reply-scroll .detail-rich-editor { min-height: 140px; border: none; box-shadow: none; outline: none; padding: 12px 16px; }
.pitch-reply-scroll .pitch-reply-quoted { max-height: none; overflow: visible; border-top: none; padding: 0 16px 20px; }
.pitch-reply-scroll .gmail-compose-rich-field,
.pitch-reply-scroll .detail-field,
.pitch-reply-scroll .detail-field-value { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
.pitch-reply-scroll .detail-rich-editor { background: transparent !important; min-height: 120px !important; padding: 14px 16px !important; }
.pitch-convo { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.pitch-convo-msg { padding-left: 10px; border-left: 2px solid #bfe6c9; }
.pitch-convo-msg--you { border-left-color: #c9d6fb; }
.pitch-convo-meta { font-size: 11px; font-weight: 600; color: #1d7a3e; margin-bottom: 3px; }
.pitch-convo-msg--you .pitch-convo-meta { color: #2950b8; }
.pitch-convo-text { font-size: 12px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.pitch-history-inner { max-height: 100%; overflow-y: auto; }
.pitch-history-reply-btn { align-self: flex-start; margin-top: 14px; }

/* ── Backstage → Database (contacts) ── */
.contacts-wrap { padding-bottom: 40px; }
.contacts-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.contacts-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.contacts-search { flex: 1 1 260px; max-width: 380px; padding: 7px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.contacts-filter { padding: 6px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.contacts-count { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.contacts-table-host { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.contacts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.contacts-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; background: var(--bg-sidebar); position: sticky; top: 0; }
.contacts-table th.sorted { color: var(--text); }
.contacts-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.contacts-table tbody tr { cursor: pointer; }
.contacts-table tbody tr:hover { background: var(--bg-hover); }
.contacts-table tbody tr.active { background: #eef2ff; }
.contacts-table tbody tr:last-child td { border-bottom: none; }
.contacts-name { font-weight: 600; }
.contacts-num { text-align: right; font-variant-numeric: tabular-nums; }
.contacts-empty { color: var(--text-placeholder) !important; }
.contacts-type { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #eef0f3; color: #4b5563; }
.contacts-type--festival { background: #e9f1ff; color: #2950b8; }
.contacts-type--venue    { background: #e4f6f2; color: #13786b; }
.contacts-type--club     { background: #E8F4FD; color: #1679C4; }
.contacts-type--promoter { background: #fff1d6; color: #9a5b00; }
.contacts-type--agency   { background: #ffe9e9; color: #b42318; }
.contacts-type--media    { background: #fdeff8; color: #a3236f; }
.contact-pane { padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 14px; }
.contact-pane-name { font-size: 20px; font-weight: 700; border: none; background: transparent; color: var(--text); padding: 4px 0; outline: none; }
.contact-pane-name:focus { border-bottom: 1px solid var(--accent-blue); }
.contact-pane-grid { row-gap: 8px; align-items: center; }
.contact-pane-input { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 13px; font-family: inherit; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); }
.contact-pane-input:hover { border-color: var(--border); }
.contact-pane-input:focus { border-color: var(--accent-blue); outline: none; background: var(--bg); }
.contact-pane-notes { resize: vertical; border-color: var(--border); }
.contact-pane-grid .detail-tour-select { justify-self: start; }
.contact-pane-section { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); padding-top: 12px; border-top: 1px solid var(--border); }
.contact-pitch-row { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.contact-pitch-row:hover { background: var(--bg-hover); }
.contact-pitch-title { font-size: 13px; font-weight: 600; color: var(--text); }
.contact-pitch-meta { font-size: 12px; color: var(--text-secondary); }
.contact-pane-delete { align-self: flex-start; margin-top: 12px; font-size: 12px; color: #b42318; background: none; border: none; cursor: pointer; padding: 0; }
.dash-wrap.contacts-wrap { max-width: none; width: 100%; box-sizing: border-box; padding-left: 44px; padding-right: 44px; }
/* Pitch from contact: artist strip + drop-in blocks */
.pitch-artist-strip { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
.pitch-artist-strip-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.pitch-artist-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab; width: 64px; flex-shrink: 0; }
.pitch-artist-chip:active { cursor: grabbing; }
.pitch-artist-pic { width: 40px; height: 40px; border-radius: 50%; background: #e3e7ee center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #5b6472; border: 2px solid transparent; }
.pitch-artist-chip.in-email .pitch-artist-pic { border-color: #22c55e; }
.pitch-artist-name { font-size: 10px; color: var(--text-secondary); text-align: center; line-height: 1.2; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-rich-editor.drop-target { background: #f3f7ff !important; outline: 2px dashed #9db5f5 !important; }
.pitch-artist-block { position: relative; margin: 6px 0; padding: 6px 28px 6px 0; border-radius: 6px; }
.pitch-artist-block:hover { background: #f6f8fb; }
.pitch-artist-block .pitch-compose-inline-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin-top: 6px; }
.pitch-artist-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; font-size: 13px; line-height: 1; display: none; }
.pitch-artist-block:hover .pitch-artist-remove { display: block; }
.pitch-artist-drop:empty, .pitch-artist-drop { min-height: 4px; }
.contact-pitch-btn { align-self: flex-start; padding: 7px 14px; }
.pitch-artist-block .pitch-compose-inline-img { width: 60px; height: 60px; }
.pitch-artist-block--joined .pitch-sep-top { display: none; }
.pitch-artist-block--joined { margin-top: 0; }
.pitch-artist-block + .pitch-artist-block { margin-top: 0; }
#project-database-btn { font-size: 12px; font-weight: 500; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
#project-database-btn:hover { background: var(--bg-hover); border-color: var(--text-secondary); }
#project-database-btn.active { background: var(--accent-blue, #1C96E8); border-color: transparent; color: #fff; }
#contacts-view { overflow-y: auto; height: 100%; }
#contacts-view .dash-wrap.contacts-wrap { padding-top: 20px; }
/* Pitch photos at half size (100px) everywhere in the compose windows —
   matches what the email sends. Beats the older 200px rule. */
.pitch-compose-panel .detail-rich-editor img.pitch-compose-inline-img,
.pitch-compose-panel .pitch-artist-block img.pitch-compose-inline-img { width: 100px !important; height: 100px !important; }
/* Any photo inside a pitch compose editor stays 100px round, even after the
   editor tidies its HTML (which drops our class). */
.pitch-compose-panel .detail-rich-editor img { width: 100px !important; height: 100px !important; max-width: 100px !important; border-radius: 50%; object-fit: cover; display: block; }
.contact-pitch-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; }
.contact-pitch-artist { font-size: 13px; font-weight: 600; color: var(--text); }
.contact-pitch-date { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.contacts-group-row td { background: var(--bg-sidebar); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 12px; cursor: default; }
.contacts-table tbody tr.contacts-group-row:hover { background: none; }

/* Database — Asana-style list: no box, thin row lines, section headings */
.contacts-table-host { border: none; border-radius: 0; background: transparent; }
.contacts-table th { background: transparent; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); padding: 8px 12px; }
.contacts-table th.sorted { color: var(--text); font-weight: 600; }
.contacts-table td { border-bottom: 1px solid #ececf0; padding: 9px 12px; font-size: 13px; }
.contacts-table tbody tr:hover { background: #f5f5f7; }
.contacts-table tbody tr.active { background: #eef2ff; }
.contacts-name { font-weight: 500; }
.contacts-table td:first-child { font-weight: 500; }
.contacts-group-row td { background: transparent !important; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text); padding: 22px 4px 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
.contacts-table tbody tr.contacts-group-row:hover { background: transparent; }
.contacts-group-caret { display: inline-block; width: 18px; color: var(--text-secondary); font-size: 12px; transition: transform 0.15s; }
.contacts-group-caret.folded { transform: rotate(-90deg); }
.contacts-group-count { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--text-placeholder); }
.contacts-add-row td { color: var(--text-placeholder); font-size: 13px; padding: 8px 12px 8px 30px; border-bottom: none; cursor: pointer; }
.contacts-table tbody tr.contacts-add-row:hover { background: transparent; }
.contacts-add-row:hover td { color: var(--text-secondary); }
.contacts-type { font-weight: 500; }
.contact-pane-grid--notes { grid-template-columns: 1fr; }
.contact-pane-grid--notes > .pitch-detail-label { display: none; }
.contact-pane .contact-pane-section { margin-top: 6px; }
.contact-pane-grid input[type="date"] { max-width: 180px; }
.contact-pane-notes { resize: none !important; overflow: hidden !important; min-height: 90px; }
/* Pitch reminders */
.dash-pill--red { background: #fde2e2; color: #b42318; }
.contact-pane-actions { display: flex; gap: 8px; align-items: center; }
.contact-reminder-btn { font-size: 12px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.contact-reminder-btn:hover { background: var(--bg-hover); }
.contact-reminder-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sidebar); }
.contact-reminder-form .contact-pane-input { border-color: var(--border); background: var(--bg); }
.contact-reminder-date { max-width: 180px; }
.contact-reminder-note { resize: vertical; }
.contact-reminder-form-btns { display: flex; gap: 10px; align-items: center; }
.contact-reminder-cancel { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 12px; }
.contact-reminder-list { display: flex; flex-direction: column; gap: 6px; }
.contact-reminder-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); background: #fff8e6; }
.contact-reminder-row.due { background: #fde2e2; }
.contact-reminder-when { font-weight: 600; color: var(--text); white-space: nowrap; }
.contact-reminder-text { color: var(--text); }
.contact-reminder-done, .pitch-reminder-done { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 11px; color: var(--text-secondary); }
.contact-reminder-done:hover, .pitch-reminder-done:hover { background: #dcf3e3; color: #1d7a3e; border-color: #bfe6c9; }
.pitch-reminder-row { position: relative; padding-right: 44px; }
.pitch-reminder-row .pitch-reminder-done { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.pitch-reminder-row.due .todo-show-meta { color: #b42318; font-weight: 600; }
.contact-reminder-form[hidden] { display: none; }

/* ═══ Dark sidebar ═══════════════════════════════════════════════════════
   The sidebar gets its own dark palette by redefining the colour variables
   inside it — everything in it (project list, team picker + its popover,
   footer controls) follows automatically. */
#sidebar {
  --bg: #23262f;
  --bg-sidebar: #1b1e25;
  --bg-hover: #262a33;
  --bg-active: #2c303b;
  --text: #eceef2;
  --text-secondary: #a3a9b5;
  --text-placeholder: #7d8492;
  --border: #2e323c;
  background: #1b1e25;
  border-right-color: #15171c;
  color: var(--text);
}
#sidebar .project-item { color: #d9dce3; }
#sidebar .project-item:hover { background: #262a33; color: #fff; }
#sidebar .project-item.active { background: #2c303b; color: #fff; border-left-color: #1C96E8; }
#sidebar .project-item svg, #sidebar .project-item .project-icon { color: #8d94a2; opacity: 1; }
#sidebar .team-picker-name { color: #fff; }
#sidebar .team-picker-popover { box-shadow: 0 10px 30px rgba(0,0,0,0.45); border-color: #2e323c; }
#sidebar select { background: #23262f; color: #eceef2; border-color: #353a46; }
#sidebar .sidebar-data-btn--export { border-color: #1C96E8; color: #8CCBF7; }
#sidebar .sidebar-data-btn--export:hover { background: #1C96E8; color: #fff; }
#sidebar .sidebar-data-btn--import { border-color: #353a46; color: #a3a9b5; }
#sidebar .sidebar-data-btn--import:hover { border-color: #1C96E8; color: #8CCBF7; background: #262a33; }
#sidebar #sidebar-footer { border-top-color: #2a2e38; }
/* Collapsed Backstage rail stays dark too, hamburger light. */
#sidebar #sidebar-hamburger { color: #a3a9b5; }
#sidebar #sidebar-hamburger:hover { color: #fff; }

/* ═══ Board group headings: calm, uniform bars + a coloured left strip ═══
   Replaces the pastel fills: every bar white with a hairline border and
   dark bold name; the 4px strip tells Shows / tours / Pitching apart. */
.board-group-bar,
.board-group--shows > .board-group-bar,
.board-group--tour > .board-group-bar,
.board-group--pitching > .board-group-bar {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid #c9ccd3 !important;
}
.board-group-bar:hover,
.board-group--shows > .board-group-bar:hover,
.board-group--tour > .board-group-bar:hover,
.board-group--pitching > .board-group-bar:hover { background: #f7f7f9 !important; }
.board-group--shows > .board-group-bar    { border-left-color: #1C96E8 !important; }
.board-group--tour > .board-group-bar     { border-left-color: #4f5d75 !important; }
.board-group--pitching > .board-group-bar { border-left-color: #14a38b !important; }
.board-group-name,
.board-group--shows .board-group-name,
.board-group--tour .board-group-name,
.board-group--pitching .board-group-name { color: var(--text) !important; }
.board-group-count { color: var(--text-placeholder); }
/* List view tour headers: same treatment. */
.tour-header { background: var(--bg) !important; border-left: 4px solid #4f5d75 !important; border-color: var(--border); }
.tour-header:hover { background: #f7f7f9 !important; }
.tour-header .tour-name { color: var(--text) !important; }

/* "You are here": column of your last action, washed in its own colour. */
.board-column { transition: background 0.35s ease, border-color 0.35s ease; }
.board-column--here.color-grey   { background: #eceef2; border-color: #c9ccd3; }
.board-column--here.color-amber  { background: #fff3d9; border-color: #f2cf86; }
.board-column--here.color-green  { background: #e3f5e9; border-color: #a8dcb9; }
.board-column--here.color-blue   { background: #e7edff; border-color: #b4c5f7; }
.board-column--here.color-purple { background: #efeaff; border-color: #cbbdf7; }
.board-column--here.color-red    { background: #fde8e8; border-color: #f1b4b4; }
.board-column--here.color-teal   { background: #e0f4f0; border-color: #a6ddd2; }
.board-card--here { box-shadow: 0 0 0 2px rgba(28, 150, 232, 0.35), 0 2px 6px rgba(0,0,0,0.06); }
.contact-last-contact { padding: 6px 8px; font-size: 13px; }
.contacts-booked-pill { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 11px; background: #22c55e; color: #fff; font-weight: 700; font-size: 12px; text-align: center; }
/* Booked = purple everywhere (Success / Booked labels); green is Reply. */
.contacts-booked-pill { background: #ede4ff !important; color: #6a3fc7 !important; font-weight: 700; }
.contacts-expand-btn { font-size: 12px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-secondary); cursor: pointer; }
.contacts-expand-btn:hover { color: var(--text); background: var(--bg-hover); }
.contacts-expand-btn[hidden] { display: none; }

/* ── Next edition date finder ── */
.contacts-date-cell { white-space: nowrap; }
.date-badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; vertical-align: 1px; text-decoration: none; }
.date-badge--auto { background: #e3ecff; color: #2950b8; }
.date-badge--auto:hover { text-decoration: underline; }
.date-badge--moved { background: #fff1d6; color: #9a5b00; }
.date-badge--review { background: #fde2e2; color: #b42318; }
.date-review-strip { border: 1px solid #f2cf86; background: #fffaf0; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.date-review-strip[hidden] { display: none; }
.date-review-title { font-size: 13px; font-weight: 700; color: #7a4a00; }
.date-review-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding-top: 10px; border-top: 1px solid #f6e3b8; }
.date-review-row:first-of-type { border-top: none; padding-top: 0; }
.date-review-name { font-size: 13px; font-weight: 600; color: var(--text); }
.date-review-quote { font-size: 12px; font-style: italic; color: var(--text); margin-top: 2px; }
.date-review-reason { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.date-review-btns { display: flex; gap: 6px; }
.date-review-ghost { font-size: 12px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; color: var(--text); }
.date-review-edit { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.date-review-edit[hidden] { display: none; }
.next-date-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 2px 8px 6px; }
.next-date-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #eef0f3; color: #4b5563; }
.next-date-status--auto_confirmed { background: #e3ecff; color: #2950b8; }
.next-date-status--confirmed { background: #ede4ff; color: #6a3fc7; }
.next-date-status--needs_review { background: #fde2e2; color: #b42318; }
.next-date-quote { flex-basis: 100%; font-size: 12px; font-style: italic; color: var(--text); }
.next-date-meta { font-size: 11px; color: var(--text-secondary); }
.next-date-check-btn { font-size: 11px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; color: var(--text); margin-left: auto; }
.next-date-check-btn:disabled { opacity: 0.5; cursor: default; }
.finder-test-input { width: 100%; max-width: 760px; min-height: 140px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.finder-test-summary { font-size: 13px; margin: 10px 0; }
.finder-test-table { border-collapse: collapse; font-size: 12px; width: 100%; max-width: 1100px; }
.finder-test-table td, .finder-test-table th { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.finder-test-table .v-WRONG { color: #b42318; font-weight: 700; }
.finder-test-table .v-correct { color: #1d7a3e; font-weight: 600; }
.finder-test-table .v-review { color: #9a5b00; }
/* Send assets + Send Contract: one block — contract row right underneath,
   same label width so the contract circle sits under the Press kit circle. */
.detail-send-assets:not(.detail-send-contract) { margin-bottom: 8px; padding-bottom: 0; border-bottom: none; }
.detail-send-contract { margin-top: 0; }
.send-assets-row > .send-assets-label { display: inline-block; width: 96px; box-sizing: border-box; flex-shrink: 0; }
.send-contract-row { gap: 16px; }
/* Tour overview: three aligned columns — Status · Date · Show. */
.tour-overview-row { display: grid !important; grid-template-columns: 120px 150px 1fr; align-items: center; column-gap: 16px; padding: 12px 8px; }
.tour-overview-row .tour-overview-status { white-space: nowrap; }
.tour-overview-row .tour-overview-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.tour-overview-header .tour-overview-date { color: var(--text-secondary); }
.tour-overview-row .tour-overview-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-overview-header > span { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em; color: var(--text-secondary) !important; text-transform: uppercase; }

/* Board never jumps sideways when the pane opens/closes: no column
   snapping (it ignored the left padding and slid groups under the menu). */
#board-view { scroll-snap-type: none !important; scroll-padding-left: 20px; }
.board-column { scroll-snap-align: none !important; }
/* Header buttons keep their words on one line; if space runs out the
   view tabs drop to their own line instead of everything squashing. */
#header-row-2 { flex-wrap: wrap; row-gap: 8px; column-gap: 16px; }
#header-row-2 button, #header-row-2-left button, #view-tabs button { white-space: nowrap; }
#header-row-2-left { flex-wrap: wrap; row-gap: 6px; }

/* Board headings: no coloured side strips; tour headings sized like the
   Admin/Pitch buttons, and purple when open (selected). */
.board-group-bar,
.board-group--shows > .board-group-bar,
.board-group--tour > .board-group-bar,
.board-group--pitching > .board-group-bar { border-left: 1px solid var(--border) !important; }
.board-group--tour > .board-group-bar { padding: 16px 16px !important; }
.board-group--tour .board-group-name { font-size: 14px; letter-spacing: 0.02em; }
.board-group--tour.board-group--selected > .board-group-bar {
  border-color: var(--accent-blue) !important; background: var(--accent-blue-bg) !important;
  box-shadow: 0 2px 10px rgba(28, 150, 232, 0.18);
}
.board-group--tour.board-group--selected .board-group-name,
.board-group--tour.board-group--selected .section-chevron { color: var(--accent-blue) !important; }
.board-group-menu-btn { margin-left: auto; width: 26px; height: 24px; border: none; background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; line-height: 1; }
.board-group-menu-btn:hover { background: var(--bg-hover); color: var(--text); }
.tour-header { border-left: 1px solid var(--border) !important; }

/* All board headings (Shows / tours / Pitching) like the Admin & Pitch
   buttons: same size, an invisible left stripe reserved (so nothing shifts),
   turning purple — with a light purple fill — when the heading is open. */
.board-group > .board-group-bar,
.board-group--shows > .board-group-bar,
.board-group--tour > .board-group-bar,
.board-group--pitching > .board-group-bar {
  padding: 16px 16px 16px 14px !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid transparent !important;
  background: var(--bg-sidebar) !important;
}
.board-group .board-group-name { font-size: 14px; letter-spacing: 0.02em; }
.board-group > .board-group-bar:hover { background: var(--bg-hover) !important; border-color: var(--text-secondary) !important; border-left-color: transparent !important; }
.board-group.board-group--selected > .board-group-bar,
.board-group.board-group--selected > .board-group-bar:hover {
  border-color: var(--accent-blue) !important;
  border-left: 3px solid var(--accent-blue) !important;
  background: var(--accent-blue-bg) !important;
  box-shadow: 0 2px 10px rgba(28, 150, 232, 0.18);
}
.board-group.board-group--selected .board-group-name,
.board-group.board-group--selected .section-chevron { color: var(--accent-blue) !important; }
.board-group > .board-group-bar { min-height: 58px; box-sizing: border-box; }
/* Pane open: header stays ONE row — view tabs stay on the right; buttons
   and tabs tighten a little instead of wrapping under "+ Add Tour". */
#header-row-2 { flex-wrap: nowrap !important; }
#header-row-2-left { flex-wrap: nowrap !important; min-width: 0; }
#view-tabs { margin-left: auto; flex-shrink: 0; }
#app.detail-panel-open #header-row-2-left { gap: 6px; }
#app.detail-panel-open #header-row-2-left button:not(.dash-tab-btn) { padding: 4px 8px; font-size: 11px; }
#app.detail-panel-open #view-tabs .view-tab, #app.detail-panel-open #email-header-btn { padding-left: 8px; padding-right: 8px; font-size: 12px; }
/* Narrow screen + pane open: left buttons scroll sideways (no scrollbar)
   instead of sliding under the view tabs, which always stay on the right. */
#header-row-2-left { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
#header-row-2-left::-webkit-scrollbar { display: none; }
#app.detail-panel-open #header-row-2-left { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
/* Month view fits the screen: week rows share the available height (min
   92px each), so a 5- or 6-week month is fully visible without scrolling. */
.cal-body:has(> .cal-week) { display: flex; flex-direction: column; }
.cal-body:has(> .cal-week) > .cal-week { flex: 1 1 0; min-height: 92px; display: flex; flex-direction: column; }
.cal-body:has(> .cal-week) > .cal-week > .cal-week-bg { flex: 1; }
.cal-body:has(> .cal-week) .cal-day-cell { min-height: 0; height: 100%; }
.cal-body:has(> .cal-week) .cal-events-layer { grid-auto-rows: 36px; }
/* Project calendar fills the window height (so the month grid can share it). */
#calendar-view:not(.hidden) { height: calc(100vh - var(--cal-top, 96px)); display: flex; flex-direction: column; overflow: hidden; }
#calendar-view > .cal-tab-wrap { flex: 1; min-height: 0; }
/* Database columns: narrower Email (long addresses get "…", full on hover),
   Location + Date move left, Genres gets the room; Pitches stays put. */
.contacts-table { table-layout: fixed; }
.contacts-table th:nth-child(1) { width: 19%; }  /* Organisation */
.contacts-table th:nth-child(2) { width: 9%; }   /* Type */
.contacts-table th:nth-child(3) { width: 17%; }  /* Email */
.contacts-table th:nth-child(4) { width: 15%; }  /* Location */
.contacts-table th:nth-child(5) { width: 13%; }  /* Date */
.contacts-table th:nth-child(6) { width: auto; } /* Genres */
.contacts-table th:nth-child(7) { width: 80px; } /* Pitches */
.contacts-table td { max-width: none; }
.contacts-table td:nth-child(3), .contacts-table td:nth-child(4), .contacts-table td:nth-child(6) { overflow: hidden; text-overflow: ellipsis; }
.contacts-table th:nth-child(2) { width: 7%; }   /* Type: just the label */
.contacts-table th:nth-child(4) { width: 17%; }  /* Location: room for "United Kingdom" */
.contacts-table th:nth-child(5) { width: 11%; }  /* Date */
/* » overview button on Shows / tour headings (like the Backstage arrows). */
.board-group-overview-btn {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 14px; color: var(--text-secondary); cursor: pointer;
}
.board-group-overview-btn:hover { background: var(--bg-hover); color: var(--text); }
.board-group-overview-btn.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.board-group-overview-btn + .board-group-menu-btn { margin-left: 6px; }
/* Pane open: headings run under the pane, so » sits right after the name
   (always visible) instead of the far right. */
#app.detail-panel-open .board-group-overview-btn { margin-left: 12px; }
#app.detail-panel-open .board-group-overview-btn + .board-group-menu-btn { margin-left: 4px; }
/* » sits ON the heading's right border (half in, half out), like the «
   on the Backstage year card. ⋯ takes the far right inside the heading. */
.board-group > .board-group-bar { position: relative; overflow: visible; }
.board-group-overview-btn { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); margin-left: 0; z-index: 2; }
.board-group-overview-btn + .board-group-menu-btn { margin-left: auto; margin-right: 14px; }
.board-group-bar > .board-group-action { margin-right: 14px; }
.board-group-stack, .board-groups-stack { padding-right: 14px; }
/* Pane open: the right edge is under the pane, so » goes back inline next to the name. */
#app.detail-panel-open .board-group-overview-btn { position: static; transform: none; margin-left: 12px; }
#app.detail-panel-open .board-group-overview-btn + .board-group-menu-btn { margin-left: 4px; margin-right: 0; }
/* Hover = blue too (same look as the selected heading), so it lights up as
   the mouse passes over it — no click needed to see where you are. */
.board-group > .board-group-bar:hover {
  border-color: var(--accent-blue) !important;
  border-left: 3px solid var(--accent-blue) !important;
  background: var(--accent-blue-bg) !important;
  box-shadow: 0 2px 10px rgba(28, 150, 232, 0.18);
}
.board-group > .board-group-bar:hover .board-group-name,
.board-group > .board-group-bar:hover .section-chevron { color: var(--accent-blue) !important; }
.board-group > .board-group-bar { transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }

/* Overview mode (Tour/Shows overview open): all groups closed and the
   heading bars end just left of the side pane, rounded ends visible —
   like Backstage's TO DO list making room for the pane. */
.board-view-wrap:has(.board-groups-stack--overview) { flex: 1 1 auto; min-width: 0; }
.board-groups-stack--overview { min-width: 0 !important; width: 100%; padding-right: 0 !important; }
#app.detail-panel-open #board-view:has(.board-groups-stack--overview) { padding-right: calc(max(380px, 45vw) + 24px); }
.board-groups-stack--overview .board-group > .board-group-bar { animation: bar-tuck 0.3s ease; }
@keyframes bar-tuck { from { transform: scaleX(1.03); transform-origin: left; } to { transform: none; } }
/* Tour overview: read-only rows + reminder bar under the tabs */
.tour-overview-row--static { cursor: default !important; }
.tour-overview-row--static:hover { background: transparent !important; }
.tour-reminder-box { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.tour-reminder-bar { cursor: pointer; }
.tour-reminder-prios { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tour-reminder-list { display: flex; flex-direction: column; gap: 4px; }
.tour-reminder-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg-sidebar); }
.tour-reminder-dot { width: 8px; height: 8px; border-radius: 50%; }
.tour-reminder-text { color: var(--text); }
/* Admin / Pitch buttons: hover = the same blue as selected. */
.admin-section-btn:hover:not(:disabled) {
  border-color: var(--accent-blue); background: var(--accent-blue-bg); color: var(--accent-blue);
  box-shadow: 0 2px 10px rgba(28, 150, 232, 0.2);
}
.admin-section-btn { position: relative; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s; }
.admin-section-menu { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; }
.admin-section-menu:hover { background: var(--bg-hover); color: var(--text); }
/* Pitch "+" tile: neutral grey (was the green Contract style). */
.admin-pitch-add-btn { color: var(--text-secondary); border-style: dashed; }
/* Pitch reordering */
.admin-pitch-row { cursor: grab; }
.admin-pitch-row.dragging { opacity: 0.4; }
.admin-pitch-row.drop-before { box-shadow: 0 -3px 0 0 var(--accent-blue); }
.admin-pitch-row.drop-after { box-shadow: 0 3px 0 0 var(--accent-blue); }
/* Read more: ~N lines, expands in place */
.read-more-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp-lines, 3); overflow: hidden; white-space: pre-wrap; }
.read-more-clamp.read-more-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.read-more-btn { align-self: flex-start; background: none; border: none; padding: 2px 0 0; font-size: 12px; color: var(--accent-blue); cursor: pointer; }
.read-more-btn:hover { text-decoration: underline; }
.read-more-btn[hidden] { display: none; }
.pitch-sent-preview { display: flex; flex-direction: column; }
.pitch-sent-text { font-size: 13px; color: var(--text); line-height: 1.45; }
.pitch-detail-fields > .pitch-detail-label:has(+ .pitch-sent-preview) { align-self: start; }
/* Unread reply bubble (social-app style) */
.board-card { position: relative; }
.card-unread-bubble { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg); z-index: 2; }
.card-unread-bubble--inline { position: static; margin-left: 8px; box-shadow: none; display: inline-block; }
.pitch-reply-item--you { border-left-color: #b5d9f6; }
.pitch-reply-item--you .pitch-reply-meta { color: var(--accent-blue); }
/* Pane date bubbles: date + time underneath */
.pitch-bubble--datetime { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; padding: 4px 9px; border-radius: 9px; }
.pitch-bubble-time { font-size: 9px; font-weight: 600; opacity: 0.8; }
.pitch-status-labels, .pitch-status-grid { grid-template-rows: 34px 30px !important; }
.pitch-detail-grid { grid-template-columns: 100px 1fr; }
.date-pill-month { margin-left: 6px; }
/* Import info (above « Pitch history) */
.detail-dates { display: flex; align-items: center; }
.import-info-btn { margin-left: auto; font-size: 11px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text-secondary); cursor: pointer; }
.import-info-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--accent-blue-bg); }
.import-info-pop { position: fixed; z-index: 1000; width: 420px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.import-info-title { font-size: 13px; font-weight: 700; color: var(--text); }
.import-info-hint { font-size: 12px; color: var(--text-secondary); }
.import-info-text { min-height: 140px; resize: vertical; font-family: inherit; font-size: 12px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.import-info-status { font-size: 12px; color: var(--text-secondary); min-height: 14px; }
.import-info-btns { display: flex; gap: 10px; align-items: center; }
/* Conversation: airier spacing; hovering a message tints it by who wrote it
   (you = blue, promoter = green). */
.pitch-convo { gap: 18px; margin-top: 14px; }
.pitch-convo-msg { padding: 10px 12px; border-left-width: 3px; border-radius: 0 8px 8px 0; transition: background-color 0.15s; }
.pitch-convo-msg--them:hover { background: rgba(34, 160, 80, 0.08); }
.pitch-convo-msg--you:hover { background: rgba(28, 150, 232, 0.08); }
.pitch-convo-meta { margin-bottom: 6px; }
.pitch-convo-text { line-height: 1.55; }
.pitch-convo-link { color: var(--accent-blue); text-decoration: underline; }
/* Empty fields: no "+ add" text — a faint grey box appears on hover. */
.detail-field-text.placeholder, .detail-link-add { display: inline-block; min-width: 100%; min-height: 22px; box-sizing: border-box; border-radius: var(--radius-sm); padding: 2px 6px; }
.detail-field:hover .detail-field-text.placeholder, .detail-field:hover .detail-link-add,
.detail-field-text.placeholder:hover, .detail-link-add:hover { background: rgba(0, 0, 0, 0.05); cursor: text; }
.ticket-search-icon { margin-left: 8px; border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 6px; opacity: 0.6; }
.ticket-search-icon:hover { opacity: 1; background: var(--accent-blue-bg); }
.detail-module-heading .detail-ticket-search-status { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--text-secondary); text-transform: none; }
.detail-module-heading .ticket-search-icon { margin-left: 6px; margin-right: auto; order: 0; }
.detail-module-heading:has(.ticket-search-icon) { justify-content: flex-start; }
.detail-module-heading:has(.ticket-search-icon) > span:not(.section-chevron):not(.detail-ticket-search-status) { flex: 0 0 auto; }
.pitch-notindb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; padding: 10px 12px; border-radius: var(--radius); background: #fff6e0; border: 1px solid #f1d58a; font-size: 12px; color: var(--text); }
.pitch-notindb span { flex: 1 1 200px; }
.pitch-artist-block-body { outline: none; cursor: text; }
.pitch-notindb-pop { position: fixed; z-index: 2000; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); margin: 0; box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.pitch-compose-cc-toggle { margin-left: auto; border: none; background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.pitch-compose-cc-toggle:hover { color: var(--accent-blue); background: var(--accent-blue-bg); }
.gmail-compose-row[hidden] { display: none !important; }
.pitch-compose-discard { margin-left: auto; margin-right: 10px; border: none; background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.pitch-compose-discard:hover { color: #c0392b; background: rgba(192,57,43,0.08); }
/* 🎤 dictation */
.detail-dictate-btn.listening { background: #e53935; color: #fff; border-color: #e53935; animation: dictate-pulse 1.2s ease-in-out infinite; }
@keyframes dictate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.45); } 50% { box-shadow: 0 0 0 6px rgba(229,57,53,0); } }
.detail-dictate-live { font-size: 12px; color: var(--text-secondary); font-style: italic; margin-left: 6px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
/* 🎤 floats at the top-right of the writing area and follows the scroll */
.detail-rich-col { position: relative; }
.detail-dictate-float { position: sticky; top: 8px; height: 0; z-index: 6; display: flex; justify-content: flex-end; align-items: flex-start; gap: 6px; pointer-events: none; }
.detail-dictate-float > * { pointer-events: auto; }
.detail-dictate-float .detail-dictate-btn { width: 34px; height: 34px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.10); margin-right: 6px; cursor: pointer; }
.detail-dictate-float .detail-dictate-btn:hover { border-color: var(--accent-blue); }
.detail-dictate-float .detail-dictate-live { margin: 4px 0 0; padding: 5px 10px; border-radius: 14px; background: #e53935; color: #fff; font-style: normal; font-weight: 600; font-size: 12px; max-width: 280px; box-shadow: 0 2px 8px rgba(229,57,53,0.3); }
.detail-dictate-float .detail-dictate-btn.listening { background: #e53935; color: #fff; border-color: #e53935; }
.detail-dictate-float .detail-dictate-live--error { background: #fff3f2; color: #b3261e; border: 1px solid #f3c1bc; box-shadow: none; white-space: normal; max-width: 340px; }
/* Footer preview in pitch emails — same look as the sent email's footer. */
.pitch-footer-preview { margin: 8px 16px 16px; padding-top: 12px; border-top: 1px solid #ddd; font-size: 12px; color: #666; white-space: pre-wrap; line-height: 1.5; user-select: none; cursor: default; }
/* Set follow-ups */
.pitch-followup-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pitch-followup-set-btn { background: var(--bg) !important; }
.pitch-followup-btn--due { border-color: #e8a317 !important; background: #fff6e0 !important; color: #8a5a00 !important; }
.pitch-followup-plan-info { flex-basis: 100%; font-size: 11px; color: var(--text-secondary); }
.followup-plan-pop { width: 440px; }
.followup-plan-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border); }
.followup-plan-row--off .followup-plan-days, .followup-plan-row--off .followup-plan-text, .followup-plan-row--off .followup-plan-date { opacity: 0.4; pointer-events: none; }
.followup-plan-row--sent { opacity: 0.6; }
.followup-plan-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.followup-plan-days { width: 52px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; background: var(--bg); color: var(--text); }
.followup-plan-date { margin-left: auto; color: var(--accent-blue); font-weight: 600; }
.followup-plan-text { min-height: 60px; }
.followup-plan-clear { margin-left: auto; color: #c0392b; }
.pitch-followup-set-btn { color: var(--text) !important; border: 1px solid var(--border) !important; }
.pitch-followup-set-btn:hover { border-color: var(--accent-blue) !important; color: var(--accent-blue) !important; }
.followup-generate-btn { margin-left: auto; margin-right: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; padding: 4px 10px; border-radius: 14px; cursor: pointer; }
.followup-generate-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--accent-blue-bg); }
.followup-generate-btn--small { margin: 0 0 0 6px; padding: 2px 8px; font-size: 11px; }
.followup-generate-btn:disabled { opacity: 0.4; cursor: default; }
.followup-plan-pop { max-height: calc(100vh - 24px); overflow-y: auto; }
.pitch-mini-line--planned .pitch-mini-date { color: var(--accent-blue); }
.pitch-mini-badge--planned { background: transparent !important; border: 1px dashed var(--accent-blue); color: var(--accent-blue) !important; }
.pitch-mini-line--due .pitch-mini-date { color: #b26b00; font-weight: 700; }
.pitch-mini-line--due .pitch-mini-badge--planned { border-color: #e8a317; color: #b26b00 !important; background: #fff6e0 !important; }
/* ── Contracts: template manager (Agency Admin) ─────────────────────────── */
.ct-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ct-top .agency-admin-hint { flex: 1; margin: 0; }
.ct-list { display: flex; flex-direction: column; gap: 8px; }
.ct-empty { font-size: 13px; color: var(--text-secondary); padding: 10px 0; }
.ct-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.ct-row-left { flex: 1; min-width: 0; }
.ct-row-name { font-weight: 600; font-size: 13px; color: var(--text); }
.ct-row-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.ct-kind { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: #fde8e8; color: #b42318; }
.ct-kind--docx { background: #e6efff; color: #1d4ed8; }
.ct-row-del { border: none; background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.ct-row-del:hover { color: #c0392b; background: rgba(192,57,43,0.08); }
.ct-editor-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(15,18,25,0.45); display: flex; align-items: stretch; justify-content: center; padding: 24px; }
.ct-editor { background: var(--bg); border-radius: 12px; width: min(1180px, 100%); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.ct-editor-hdr { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ct-name-input { flex: 1; font-size: 15px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; background: transparent; color: var(--text); }
.ct-name-input:hover, .ct-name-input:focus { border-color: var(--border); outline: none; }
.ct-editor-body { flex: 1; display: flex; min-height: 0; }
.ct-pages { flex: 1; overflow: auto; background: #eef0f3; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ct-pages--placing .contract-page { cursor: crosshair; }
.contract-page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.12); flex-shrink: 0; }
.contract-page canvas { display: block; }
.ct-side { width: 300px; flex-shrink: 0; border-left: 1px solid var(--border); overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.ct-side-sec { display: flex; flex-direction: column; gap: 6px; }
.ct-side-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.ct-muted { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.ct-group { font-size: 11px; font-weight: 600; color: var(--text); margin-top: 6px; }
.ct-palette { flex-direction: row; flex-wrap: wrap; gap: 5px; }
.ct-palette .ct-side-title, .ct-palette .ct-group { flex-basis: 100%; }
.ct-chip { font-size: 11px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); cursor: pointer; }
.ct-chip:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.ct-chip--used { background: var(--accent-blue-bg); border-color: transparent; }
.ct-chip--on { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.ct-placeholder { flex-basis: 100%; font-size: 11px; font-family: ui-monospace, Menlo, monospace; color: var(--text); }
.ct-word-note { max-width: 560px; font-size: 13px; line-height: 1.5; background: #fff; padding: 16px; border-radius: 8px; color: var(--text); }
.ct-box { position: absolute; border: 1.5px solid var(--accent-blue); background: rgba(28,150,232,0.10); border-radius: 3px; cursor: move; box-sizing: border-box; }
.ct-box--cover { background: rgba(255,255,255,0.85); }
.ct-box--signature, .ct-box--date { border-color: #7c3aed; background: rgba(124,58,237,0.08); }
.ct-box--suggested { border-style: dashed; border-color: #e8a317; background: rgba(232,163,23,0.10); }
.ct-box--sel { box-shadow: 0 0 0 2px rgba(28,150,232,0.35); z-index: 2; }
.ct-box-label { position: absolute; left: 0; top: -15px; font-size: 9.5px; line-height: 14px; padding: 0 5px; border-radius: 3px 3px 0 0; background: var(--accent-blue); color: #fff; white-space: nowrap; pointer-events: none; }
.ct-box--signature .ct-box-label, .ct-box--date .ct-box-label { background: #7c3aed; }
.ct-box--suggested .ct-box-label { background: #e8a317; }
.ct-box-resize { position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--accent-blue); border-radius: 2px; cursor: nwse-resize; }
.ct-box-yes, .ct-box-no { position: absolute; top: -16px; width: 16px; height: 15px; font-size: 10px; line-height: 13px; border: none; border-radius: 3px; cursor: pointer; color: #fff; padding: 0; }
.ct-box-yes { right: 17px; background: #16a34a; }
.ct-box-no { right: 0; background: #dc2626; }
.ct-prop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text); }
.ct-prop select, .ct-prop input { width: 120px; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.ct-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.ct-signers { display: flex; flex-direction: column; gap: 4px; }
.ct-signer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; }
.ct-signer-n { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-blue-bg); color: var(--accent-blue); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ct-mini { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--text-secondary); font-size: 12px; }
.ct-mini + .ct-mini { margin-left: 0; }
.ct-link { border: none; background: transparent; color: var(--accent-blue); font-size: 12px; cursor: pointer; text-align: left; padding: 2px 0; }
.ct-ai-btn { align-self: flex-start; }
.ct-box-yes, .ct-box-no { top: 50%; transform: translateY(-50%); }
.ct-box-yes { right: -38px; } .ct-box-no { right: -20px; }
/* ── Contracts: Contract row on a gig ───────────────────────────────────── */
.cg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.cg-label { min-width: 0; }
.cg-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: #eef0f3; color: var(--text-secondary); white-space: nowrap; }
.cg-pill--draft { background: #eef0f3; color: #4b5563; }
.cg-pill--ready { background: #e6efff; color: #1d4ed8; }
.cg-pill--sent { background: #fff6e0; color: #8a5a00; }
.cg-pill--review { background: #fde8e8; color: #b42318; }
.cg-pill--signed { background: #f1e9ff; color: #6d28d9; }
.cg-pill--card { display: inline-block; margin-top: 6px; font-size: 10px; padding: 1px 7px; }
.cg-main { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 14px; border: none; background: var(--accent-blue); color: #fff; cursor: pointer; }
.cg-main:hover { filter: brightness(0.95); }
.cg-main:disabled { background: #e5e7eb; color: var(--text-secondary); cursor: default; }
.cg-file { border: none; background: transparent; color: var(--accent-blue); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.cg-file:hover { text-decoration: underline; }
.cg-more { border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); border-radius: 12px; width: 28px; height: 24px; cursor: pointer; }
.cg-more:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.cg-err { font-size: 11px; color: #b42318; }
.cg-menu { position: fixed; z-index: 3100; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 4px; display: flex; flex-direction: column; min-width: 220px; }
.cg-menu-item { text-align: left; border: none; background: transparent; padding: 7px 10px; font-size: 12px; color: var(--text); border-radius: 6px; cursor: pointer; }
.cg-menu-item:hover { background: var(--accent-blue-bg); color: var(--accent-blue); }
.cg-ed-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.cg-field { display: flex; flex-direction: column; gap: 3px; }
.cg-field-label { font-size: 11px; color: var(--text-secondary); }
.cg-field-input { font-family: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
textarea.cg-field-input { min-height: 54px; resize: vertical; }
/* ── Contract templates: list + right-hand panel ────────────────────────── */
.ct-row { cursor: pointer; }
.ct-row:hover { border-color: var(--accent-blue); }
.ct-row--open { border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(28,150,232,0.15); }
.ct-thumb { width: 46px; height: 60px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-secondary); }
.ct-thumb .contract-page { box-shadow: none; }
.ct-thumb--word { background: #e6efff; color: #1d4ed8; font-weight: 800; font-size: 18px; }
.ct-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.ct-status--ready { background: #e7f6ec; color: #15803d; }
.ct-status--review { background: #fff6e0; color: #8a5a00; }
.cg-menu-item--danger:hover { background: rgba(192,57,43,0.08); color: #c0392b; }
.ctp { display: flex; flex-direction: column; gap: 16px; padding-bottom: 70px; }
.ctp-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.ctp-name { font-size: 20px; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; margin-left: -8px; background: transparent; color: var(--text); }
.ctp-name:hover, .ctp-name:focus { border-color: var(--border); outline: none; }
.ctp-sec { display: flex; flex-direction: column; gap: 8px; }
.ctp-drop { border: 2px dashed var(--border); border-radius: 10px; padding: 18px; text-align: center; cursor: pointer; background: var(--bg); transition: border-color .15s, background .15s; }
.ctp-drop:hover, .ctp-drop--over { border-color: var(--accent-blue); background: var(--accent-blue-bg); }
.ctp-drop--has { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; border-style: solid; border-width: 1px; }
.ctp-drop-main { font-size: 13px; font-weight: 600; color: var(--text); }
.ctp-drop-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.ctp-drop-file { flex: 1; font-size: 12px; color: var(--text); }
.ctp-drop-replace { font-size: 12px; color: var(--accent-blue); }
.ctp-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; background: #eef0f3; border-radius: 10px; padding: 14px 4px; }
.ctp-pages:empty { display: none; }
.ctp-pages.ct-pages--placing .contract-page { cursor: crosshair; }
.contract-page.ct-drop-target { outline: 2px dashed var(--accent-blue); outline-offset: 2px; }
.ctp-ai-row { display: flex; align-items: center; gap: 10px; }
.ctp-hint { font-size: 12px; color: #1d4ed8; background: var(--accent-blue-bg); padding: 8px 10px; border-radius: 8px; }
.ctp-prop-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ctp-prop-title { font-size: 12px; font-weight: 700; color: var(--text); }
.ctp-prop-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctp-prop-line select, .ctp-prop-line input[type=number] { font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.ctp-prop-line input[type=number] { width: 56px; }
.ctp-prop-box .ct-row-del { align-self: flex-start; padding-left: 0; }
.ctp-placed { display: flex; flex-direction: column; gap: 3px; }
.ctp-placed:empty { display: none; }
.ctp-placed-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 8px; border-radius: 6px; cursor: pointer; color: var(--text); }
.ctp-placed-row:hover { background: var(--accent-blue-bg); }
.ctp-placed-row--sel { background: var(--accent-blue-bg); }
.ctp-placed-row--sug { background: #fff6e0; }
.ctp-placed-name { flex: 1; }
.ctp-placed-page { font-size: 10px; color: var(--text-secondary); }
.ct-mini--yes { color: #15803d; font-weight: 700; }
.ct-group--sub { font-weight: 500; color: var(--text-secondary); font-size: 10.5px; }
.ctp-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--border); margin-top: 4px; }
.ctp-save { position: static; border-top: none; padding: 4px 0 0; }
.ctp-name-row { display: flex; align-items: center; gap: 10px; }
.ctp-name-row .ctp-name { flex: 1; min-width: 0; }
.ctp-fields-hint { font-size: 12.5px; color: var(--text); }
.ctp-found { font-size: 13px; font-weight: 600; color: #8a5a00; }
.ctp-found--busy { color: var(--accent-blue); animation: ctp-pulse 1.4s ease-in-out infinite; }
@keyframes ctp-pulse { 50% { opacity: 0.5; } }
.ctp-add-toggle { align-self: flex-start; font-weight: 600; }
.ct-palette[hidden], .ctp-sec[hidden], .ctp-save[hidden] { display: none !important; }
.ctp-name-row [hidden] { display: none !important; }
/* Word template: text preview */
.ctp-pages.ctw-wrap { display: block; background: transparent; padding: 0; }
.ctw-note { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 8px; }
.ctw-doc { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 22px 26px; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 1.55; color: #111; max-height: 560px; overflow-y: auto; user-select: text; }
.ctw-p { margin: 0 0 6px; white-space: pre-wrap; }
.ctw-p--h { font-size: 16px; font-weight: 700; margin: 10px 0 8px; }
.ctw-p--b { font-weight: 700; }
.ctw-gap { height: 8px; }
.ctw-mark { position: relative; background: rgba(28,150,232,0.16); border-bottom: 2px solid var(--accent-blue); border-radius: 2px; cursor: pointer; padding: 0 1px; }
.ctw-mark--sug { background: rgba(232,163,23,0.20); border-bottom: 2px dashed #e8a317; }
.ctw-mark--sel { outline: 2px solid var(--accent-blue); }
.ctw-mark-label { position: absolute; left: 0; top: -15px; font: 600 9.5px/13px -apple-system, system-ui, sans-serif; background: var(--accent-blue); color: #fff; padding: 0 4px; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.ctw-mark--sug .ctw-mark-label { background: #e8a317; }
.ctw-ph { display: inline-block; font: 600 11px/18px -apple-system, system-ui, sans-serif; background: var(--accent-blue-bg); color: #1d4ed8; padding: 0 6px; border-radius: 4px; }
.ctw-adv { flex-basis: 100%; margin-top: 8px; font-size: 12px; }
.ctw-adv summary { cursor: pointer; color: var(--text-secondary); }
.cg-word-doc { max-width: 640px; width: 100%; max-height: none; }
.ctw-real { margin-bottom: 10px; } .ctw-real summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
/* Agency Admin → Tools usage */
.aa-usage { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text); }
.aa-usage-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.aa-usage-label { min-width: 260px; color: var(--text); }
.aa-usage-value { font-weight: 700; font-size: 15px; }
.aa-usage-note { flex-basis: 100%; font-size: 11.5px; color: var(--text-secondary); }
/* Word layout preview (docx-preview) */
.ctw-docx { border-radius: 8px; overflow: auto; max-height: 640px; background: #eef0f3; }
.ctw-docx .docx-wrapper { background: #eef0f3; padding: 12px; }
.ctw-docx .docx-wrapper > section.docx { box-shadow: 0 2px 10px rgba(0,0,0,0.12); margin-bottom: 12px; }
.ctw-docx section.docx { transform-origin: top left; }
.ctw-hl.ctw-mark { background: rgba(28,150,232,0.18); border-bottom: 2px solid var(--accent-blue); cursor: pointer; position: relative; }
.ctw-hl.ctw-mark--sug { background: rgba(232,163,23,0.25); border-bottom: 2px dashed #e8a317; }
.ctw-hl.ctw-mark--sel { outline: 2px solid var(--accent-blue); }
.ctw-hl[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: -1.35em; font: 600 9.5px/13px -apple-system, system-ui, sans-serif; background: var(--accent-blue); color: #fff; padding: 0 4px; border-radius: 3px; white-space: nowrap; pointer-events: none; z-index: 2; }
.ctw-hl.ctw-mark--sug[data-label]::before { background: #e8a317; }
.ctw-hl.ctw-ph-hl { background: var(--accent-blue-bg); color: #1d4ed8; border-radius: 3px; position: relative; }
.ctw-hl.ctw-ph-hl[data-label]::before { background: #1d4ed8; }
/* Field-name tags only on hover / when selected, so they never cover the contract text. */
.ctw-hl[data-label]::before { display: none; }
.ctw-hl[data-label]:hover::before, .ctw-hl.ctw-mark--sel[data-label]::before { display: block; }
/* Show costing row (under Status) */
.show-costing-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.show-costing-label { min-width: 0; }
.show-costing-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); font-size: 12px; color: var(--text); cursor: pointer; }
.show-costing-chip:hover { border-color: var(--accent-blue); }
.show-costing-n { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-blue); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.show-costing-x { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.show-costing-x:hover { color: #c0392b; }
.show-costing-upload { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.show-costing-upload:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
/* Word: inline ✓ / ✕ questions in the contract + selection popup */
.ctw-ask { display: inline-flex; align-items: center; gap: 2px; margin: 0 3px; padding: 0 2px 0 6px; vertical-align: 1px; border-radius: 10px; background: #e8a317; color: #fff; font: 600 10px/16px -apple-system, system-ui, sans-serif; white-space: nowrap; user-select: none; }
.ctw-ask--done { background: var(--accent-blue); opacity: 0.85; }
.ctw-ask-q { padding-right: 3px; }
.ctw-ask-yes, .ctw-ask-no { border: none; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 16px; padding: 0; cursor: pointer; color: #fff; }
.ctw-ask-yes { background: #16a34a; }
.ctw-ask-no { background: rgba(0,0,0,0.25); }
.ctw-ask-no:hover { background: #dc2626; }
.ctw-ask--done .ctw-ask-no { display: none; }
.ctw-ask--done:hover .ctw-ask-no { display: inline-block; }
.ctw-hl[data-label]::before, .ctw-hl[data-label]:hover::before { display: none; }
.ctw-pop { position: fixed; z-index: 3200; width: 280px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ctw-pop-title { font-size: 13px; font-weight: 700; color: var(--text); }
.ctw-pop-text { font-size: 12px; color: var(--text-secondary); font-style: italic; }
.ctw-pop-select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.ctw-pop-btns { display: flex; gap: 10px; align-items: center; }
.ctp-placed[hidden], .ctp-props[hidden], .ctp-add-toggle[hidden] { display: none !important; }
/* Word: question tags in a right-hand column (never inside the contract text) */
.ctw-docx { position: relative; }
.ctw-ask.ctw-rail { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; background: none; padding: 0; margin: 0; }
.ctw-tag { position: absolute; display: inline-flex; align-items: center; gap: 3px; max-width: 180px; padding: 1px 3px 1px 8px; border-radius: 11px; background: #e8a317; color: #fff; font: 600 11px/18px -apple-system, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.15); z-index: 3; }
.ctw-tag .ctw-ask-q { overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.ctw-tag--done { background: var(--accent-blue); }
.ctw-tag--done .ctw-ask-no { display: none; }
.ctw-tag--done:hover .ctw-ask-no { display: inline-block; }
.ctw-tag .ctw-ask-yes, .ctw-tag .ctw-ask-no { width: 18px; height: 18px; line-height: 18px; font-size: 11px; flex-shrink: 0; }
.ctw-hl.ctw-hl--hover { outline: 2px solid #e8a317; outline-offset: 1px; }
/* Blank boxes: click to say what goes in them */
.ctw-docx [data-ctw-empty] { cursor: pointer; min-height: 1.2em; border-radius: 3px; }
.ctw-docx [data-ctw-empty]:hover { outline: 2px dashed var(--accent-blue); outline-offset: 2px; background: rgba(28,150,232,0.06); }
.ctw-docx [data-ctw-empty]:hover::after { content: '+ Click to choose what goes here'; font: 600 10px/1 -apple-system, system-ui, sans-serif; color: var(--accent-blue); }
.ctw-ask.ctw-slot { display: flex; width: fit-content; margin: 2px 0; padding: 1px 3px 1px 8px; background: var(--accent-blue); border-radius: 10px; font-size: 10.5px; line-height: 17px; }
.ctw-ask.ctw-slot .ctw-ask-no { display: inline-block; margin-left: 4px; }
.ctw-pop-rows { display: flex; flex-direction: column; gap: 6px; }
/* Empty fields share the row with a Notes/Phone box instead of squeezing it. */
.detail-field-text.placeholder, .detail-link-add { min-width: 60px; flex: 1 1 0; }
.detail-field-value:not(:has(.detail-field-textarea, .detail-dropdown-with-notes-input)) > .detail-field-text.placeholder { min-width: 100%; }
/* Gig contract (Word): values editable right in the contract */
.cg-setup { margin: 40px auto; max-width: 420px; text-align: center; font-size: 14px; font-weight: 600; color: var(--accent-blue); animation: ctp-pulse 1.4s ease-in-out infinite; }
.cg-word-doc { max-height: none; }
.cg-val { background: rgba(28,150,232,0.14); border-bottom: 2px solid var(--accent-blue); border-radius: 2px; padding: 0 1px; outline: none; cursor: text; white-space: pre-wrap; }
.cg-val:hover { background: rgba(28,150,232,0.24); }
.cg-val:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-blue); }
.cg-val--empty::before { content: '[' attr(data-label) ']'; color: #b26b00; font-style: italic; }
.cg-val--empty { background: rgba(232,163,23,0.18); border-bottom-color: #e8a317; }
.cg-val--empty:focus::before { content: ''; }
/* Shared Word view: labels, fix bar, popups */
.cg-val { cursor: pointer; }
.cg-val--label { background: var(--accent-blue-bg); color: #1d4ed8; border-bottom: none; border-radius: 4px; padding: 0 5px; font: 600 0.92em/1.4 -apple-system, system-ui, sans-serif; white-space: nowrap; }
.cgw-bar { position: fixed; z-index: 3300; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #1f2937; color: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); font-size: 12px; }
.cgw-select { font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid #4b5563; background: #111827; color: #fff; max-width: 230px; }
.cgw-not { border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.cgw-not:hover { background: #dc2626; }
.cgw-pop { position: fixed; z-index: 3300; width: 290px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cgw-pop-title { font-size: 13px; font-weight: 700; color: var(--text); }
.cgw-pop-sub { font-size: 12px; color: var(--text-secondary); font-style: italic; }
.cgw-pop-rows { display: flex; flex-direction: column; gap: 6px; }
.cgw-pop .cgw-select { background: var(--bg); color: var(--text); border-color: var(--border); max-width: none; font-size: 13px; padding: 6px 8px; }
.cgw-pop-btns { display: flex; gap: 10px; align-items: center; }
.cg-read-again { margin-top: 12px; align-self: flex-start; }
.cg-mark-hint { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #fff6e0; color: #8a5a00; font-size: 12.5px; line-height: 1.45; }
/* Template: a marked detail shows as a clear placeholder block — what will go there */
.cg-val.cg-val--label { display: inline-block; background: #1C96E8; color: #fff; border: none; border-radius: 4px; padding: 0 7px; margin: 1px 1px; font: 600 0.85em/1.55 -apple-system, system-ui, sans-serif; letter-spacing: 0.01em; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.cg-val.cg-val--label::before { content: '⟨'; opacity: 0.7; margin-right: 3px; }
.cg-val.cg-val--label::after { content: '⟩'; opacity: 0.7; margin-left: 3px; }
.cg-val.cg-val--label:hover { background: #0f7cc4; }
.cg-val { text-indent: 0; }
/* Drag a detail to another place */
.cg-val--label[draggable="true"] { cursor: grab; }
.cgw-dragging [data-ctw-i] { outline: 1px dashed rgba(28,150,232,0.35); outline-offset: 2px; }
.cgw-dragging [data-ctw-i].cgw-drop { outline: 2px solid var(--accent-blue); background: rgba(28,150,232,0.08); }
.board-group-action--link { background: transparent !important; border: none !important; color: var(--text-secondary) !important; text-decoration: underline; text-underline-offset: 2px; }
.missing-pitch-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.missing-pitch-info { flex: 1; min-width: 0; }
.missing-pitch-name { font-size: 13px; font-weight: 600; color: var(--text); }
.missing-pitch-meta { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Set follow-ups: centred window that always fits, one follow-up per tab */
.followup-plan-pop { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: 86vh; display: flex; flex-direction: column; gap: 10px; z-index: 3200; box-shadow: 0 24px 60px rgba(0,0,0,0.25); }
.followup-plan-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.followup-plan-tab { border: none; background: transparent; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: flex; gap: 6px; align-items: baseline; }
.followup-plan-tab small { font-weight: 500; font-size: 11px; color: var(--text-secondary); }
.followup-plan-tab.on { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.followup-plan-tab.on small { color: var(--accent-blue); }
.followup-plan-body { flex: 1; min-height: 0; overflow-y: auto; }
.followup-plan-body .followup-plan-row { border-top: none; padding-top: 2px; }
.followup-plan-row[hidden] { display: none !important; }
.followup-plan-text { height: 260px !important; min-height: 160px; max-height: 46vh; resize: vertical; overflow-y: auto; }
.todo-show-pitch-btn { margin-left: auto; margin-right: 8px; font-size: 12px; padding: 6px 14px; }
.todo-show-pitch-btn + .todo-show-artist-select { margin-left: 0; }
.contact-info-pop { width: 420px; }
/* Database contact: edition dates on one line + range calendar */
.contact-range-btn { justify-self: start; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.contact-range-btn:hover { border-color: var(--accent-blue); }
.contact-range-btn--empty { color: var(--text-secondary); font-style: italic; }
.range-pick { position: fixed; z-index: 3300; width: 260px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 10px; }
.range-pick-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.range-pick-head button { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--text-secondary); padding: 0 8px; }
.range-pick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.range-pick-dow { font-size: 10px; text-align: center; color: var(--text-secondary); padding: 2px 0; }
.range-pick-day { border: none; background: transparent; font-size: 12px; padding: 6px 0; border-radius: 6px; cursor: pointer; color: var(--text); }
.range-pick-day:hover { background: var(--accent-blue-bg); }
.range-pick-day.in { background: var(--accent-blue-bg); border-radius: 0; }
.range-pick-day.start, .range-pick-day.end { background: var(--accent-blue); color: #fff; border-radius: 6px; }
.range-pick-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--text-secondary); }
.next-date-info .date-review-row { flex-direction: column; align-items: stretch; gap: 8px; margin: 6px 0; padding: 10px; border-radius: 8px; background: #fff6e0; border: 1px solid #f1d58a; }
.next-date-info .date-review-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.next-date-info .date-review-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.next-date-info .date-review-btns { flex-direction: row !important; align-items: center; }
.next-date-info .date-review-btns button { height: auto !important; padding: 5px 12px !important; font-size: 12px !important; flex: 0 0 auto !important; }
.contacts-last-edition { color: var(--text-secondary); font-style: italic; }
/* Database columns after Genres moved to the panel: Email / Location / Date
   share the room; Pitches is a narrow last column again. */
.contacts-table th:nth-child(1) { width: 21%; }   /* Organisation */
.contacts-table th:nth-child(2) { width: 9%; }    /* Type */
.contacts-table th:nth-child(3) { width: 25%; }   /* Email */
.contacts-table th:nth-child(4) { width: 22%; }   /* Location */
.contacts-table th:nth-child(5) { width: auto; }  /* Date */
.contacts-table th:nth-child(6) { width: 80px; text-align: center; }  /* Pitches */
.contacts-table td:nth-child(6) { text-align: center; }
.contacts-table td:nth-child(5) { overflow: hidden; text-overflow: ellipsis; }
/* Database dates: upcoming green · this year black · older year red */
.date-tone--upcoming { color: #15803d; font-weight: 600; }
.date-tone--current { color: var(--text); }
.date-tone--old { color: #c0392b; font-weight: 600; }
.contacts-last-edition.date-tone--old { color: #c0392b; }
.contacts-last-edition.date-tone--current { color: var(--text); }
.date-badge--closed { background: #fde8e8; color: #b42318; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.contact-closed-warn { margin: 8px 0 14px; padding: 12px 14px; border-radius: 10px; background: #fde8e8; border: 1px solid #f5b5b0; color: #7a1f17; font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
.contact-closed-quote { margin-top: 4px; font-style: italic; font-size: 12px; }
.contact-closed-btns { display: flex; gap: 8px; }
/* Save warnings (storage full / changed in another tab) */
.save-banner { position: fixed; z-index: 5000; left: 50%; top: 12px; transform: translateX(-50%); max-width: min(640px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #b42318; color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.save-banner button { flex-shrink: 0; border: none; background: #fff; color: #b42318; font-weight: 700; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
/* Backstage: a number's list takes the full width (notifications hidden) */
.overview-columns--list .overview-col--notif { display: none !important; }
.overview-columns--list .overview-col--todo { flex: 1 1 auto; max-width: none; }
/* Pitching lists: one compact line per pitch, with planned follow-ups */
.todo-show-row.todo-show-row--compact { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 9px 14px; }
.todo-show-row--compact .todo-show-title { font-size: 14px; }
.todo-show-row--compact .todo-show-meta { margin: 0; font-size: 12.5px; }
.todo-show-fus { display: inline-flex; gap: 6px; margin-left: auto; }
.todo-show-fu { font-size: 11.5px; font-weight: 600; color: var(--accent-blue); background: var(--accent-blue-bg); padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.todo-show-fu--due { color: #8a5a00; background: #fff6e0; }
.todo-show-fu--sent { color: #15803d; background: #e7f6ec; }
/* Pitching lists (revised): names under the festival, follow-ups stacked on the right,
   and the list stays half the screen wide even with the panel closed. */
.overview-columns--list .overview-col--todo { flex: 0 1 50%; max-width: 50%; }
.todo-show-row.todo-show-row--compact { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 16px; }
.todo-show-row--compact .todo-show-title { grid-column: 1; grid-row: 1; font-size: 15px; }
.todo-show-row--compact .todo-show-meta { grid-column: 1; grid-row: 2; margin: 0; font-size: 13px; }
.todo-show-row--compact .todo-show-fus { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
/* Backstage pitch list: the board card's date column on the right */
.todo-show-row--compact .todo-show-mini { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
/* Login (server-backed board) */
.login-overlay { position: fixed; inset: 0; z-index: 6000; background: #111827; display: flex; align-items: center; justify-content: center; }
.login-overlay--loading { background: rgba(17,24,39,0.92); }
.login-card { width: min(360px, calc(100vw - 32px)); background: #fff; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.login-title { font-size: 20px; font-weight: 800; color: #111827; }
.login-sub { font-size: 13px; color: #6b7280; margin-bottom: 4px; }
.login-card input { font-size: 14px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; }
.login-card input:focus { outline: none; border-color: #1C96E8; box-shadow: 0 0 0 3px rgba(28,150,232,0.15); }
.login-card button[type=submit] { margin-top: 4px; padding: 10px; border: none; border-radius: 8px; background: #1C96E8; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.login-forgot { border: none; background: none; color: #6b7280; font-size: 12px; cursor: pointer; }
.login-msg { min-height: 16px; font-size: 12.5px; color: #b42318; }
.save-banner--ok { background: #15803d; }
.save-banner--ok button { color: #15803d; }
.save-banner--warn { background: #b45309; }
.save-banner--warn button { color: #b45309; }
.sidebar-logout-btn { margin-top: 8px; width: 100%; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.7); font-size: 11px; padding: 6px; border-radius: 6px; cursor: pointer; }
.sidebar-logout-btn:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
/* With the side panel open, a list uses all the space up to the panel. */
#app.detail-panel-open .overview-columns--list .overview-col--todo { flex: 1 1 auto; max-width: none; }
/* One size for an open list, panel open or closed — no jump when you open a row. */
.overview-columns--list .overview-col--todo,
#app.detail-panel-open .overview-columns--list .overview-col--todo { flex: 0 0 auto; width: min(900px, 100%); max-width: 100%; }
/* Backstage overview: cards a fixed height (never grow/shrink), and the
   cards + TO DO / NOTIFICATIONS row sit higher → more room for the lists. */
#dashboard-view { padding-top: 14px; }
.dash-stats { padding-top: 14px; padding-bottom: 12px; margin-bottom: 4px; }
.dash-stats > .dash-stats-col, .dash-stats-panel .dash-stats-col { height: 176px; min-height: 176px; max-height: 176px; overflow: hidden; box-sizing: border-box; }
.overview-columns { padding-top: 2px; }
.overview-col-header { padding-top: 4px; padding-bottom: 8px; margin-bottom: 8px; }
.overview-col { max-height: calc(100vh - 150px); }

/* Backstage tabs keep one size — never squeezed when a side panel opens. */
#dashboard-header-tabs { flex-shrink: 0; flex-wrap: nowrap; }
.dash-tab-btn { flex: 0 0 auto; white-space: nowrap; }

/* Unfinished pitch drafts at the top of Backstage → Pitched */
.todo-show-list--drafts { margin-bottom: 8px; }
.todo-show-row--draft { position: relative; border-style: dashed; cursor: pointer; }
.todo-show-draft-tag { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--text-secondary); border: 1px dashed var(--border); border-radius: 10px; padding: 2px 8px; }