/* =================================================================
   InventTasks — task management styles
   Design system tokens (see DESIGN.md) layered over Obsidian variables
   for dark/light mode parity.

   Tokens declared on :root so they're also available to popovers
   that are appended directly to document.body (outside .inventtasks-root).
================================================================== */

:root,
.inventtasks-root {
  --it-brand: #0091FF;
  --it-brand-hover: #0073CC;
  --it-brand-active: #005FA3;
  --it-purple: #6647F0;
  --it-magenta: #FF02F0;
  --it-orange: #ED5F00;
  --it-lavender: #EFEDFD;

  --it-text: var(--text-normal);
  --it-text-muted: var(--text-muted);
  --it-text-faint: var(--text-faint);
  --it-bg: var(--background-primary);
  --it-bg-alt: var(--background-secondary);
  --it-bg-hover: var(--background-modifier-hover);
  --it-border: var(--background-modifier-border);
  --it-shadow-1: rgba(13, 21, 48, 0.04) 0px 4px 4px 0px;
  --it-shadow-2: rgba(18, 43, 165, 0.04) 0 1px 1px -0.5px,
                 rgba(18, 43, 165, 0.04) 0 3px 3px -1.5px,
                 rgba(18, 43, 165, 0.04) 0 6px 6px -3px,
                 rgba(18, 43, 165, 0.04) 0 12px 12px -6px;
  --it-radius-sm: 6px;
  --it-radius-md: 8px;
  --it-radius-lg: 12px;
  --it-radius-pill: 999px;

  --it-font-h: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --it-font-b: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --it-font-m: "Sometype Mono", "Courier New", monospace;
}

.inventtasks-root {
  font-family: var(--it-font-b);
  color: var(--it-text);
  background: var(--it-bg);
}

/* ----- Override Obsidian default button hover effects (transform / box-shadow) ----- */
.inventtasks-root button,
.it-popover button,
.it-task-modal button,
.it-config-modal button {
  transform: none !important;
}
.inventtasks-root button:hover,
.inventtasks-root button:focus,
.inventtasks-root button:active,
.it-popover button:hover,
.it-popover button:focus,
.it-popover button:active,
.it-task-modal button:hover,
.it-task-modal button:focus,
.it-task-modal button:active,
.it-config-modal button:hover,
.it-config-modal button:focus,
.it-config-modal button:active {
  transform: none !important;
}
/* Kill outer glow on our buttons so hover doesn't "grow" them */
.inventtasks-root .it-icon-btn,
.inventtasks-root .it-secondary-btn,
.inventtasks-root .it-btn-ghost,
.inventtasks-root .it-btn-ghost-mini,
.inventtasks-root .it-chip,
.inventtasks-root .it-view-tab,
.inventtasks-root .it-tree-row,
.inventtasks-root .it-row,
.inventtasks-root .it-card,
.inventtasks-sidebar-leaf .it-icon-btn,
.inventtasks-sidebar-leaf .it-tree-row,
.it-popover .it-popover-item,
.it-config-modal .it-config-tab,
.it-config-modal button {
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.inventtasks-root .it-icon-btn:hover,
.inventtasks-root .it-secondary-btn:hover,
.inventtasks-root .it-btn-ghost:hover,
.inventtasks-root .it-btn-ghost-mini:hover,
.inventtasks-root .it-chip:hover,
.inventtasks-root .it-view-tab:hover,
.inventtasks-root .it-tree-row:hover,
.inventtasks-root .it-row:hover,
.inventtasks-root .it-card:hover,
.inventtasks-sidebar-leaf .it-icon-btn:hover,
.inventtasks-sidebar-leaf .it-tree-row:hover,
.it-popover .it-popover-item:hover,
.it-config-modal .it-config-tab:hover {
  box-shadow: none;
}
/* Kill Obsidian's default transform/box-shadow on docked sidebar buttons */
.inventtasks-sidebar-leaf button {
  transform: none !important;
}

/* ----- Flat icon controls (global) -----
   Obsidian styles plain <button> with --input-height, --input-shadow and a hover
   fill. Across the plugin we want icon-only controls: no fill, no shadow — just
   the glyph (hover brightens the icon). Scoped to every surface we render on. */
.inventtasks-root .it-icon-btn,
.inventtasks-sidebar-leaf .it-icon-btn,
.it-popover .it-icon-btn,
.modal .it-icon-btn,
.setting-item .it-icon-btn,
.it-task-modal .it-icon-btn,
.it-config-modal .it-icon-btn,
.it-filter-modal .it-icon-btn,
.it-export-modal .it-icon-btn,
.it-import-modal .it-icon-btn,
.it-trash-modal .it-icon-btn,
.it-cal-day-modal .it-icon-btn,
.it-tpl-modal .it-icon-btn,
.it-tpl-manager .it-icon-btn,
.it-activity-modal .it-icon-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-height: 0;
  line-height: 1;
}
.inventtasks-root .it-icon-btn:hover,
.inventtasks-root .it-icon-btn:focus,
.inventtasks-root .it-icon-btn:active,
.inventtasks-sidebar-leaf .it-icon-btn:hover,
.inventtasks-sidebar-leaf .it-icon-btn:focus,
.inventtasks-sidebar-leaf .it-icon-btn:active,
.it-popover .it-icon-btn:hover,
.it-popover .it-icon-btn:focus,
.it-popover .it-icon-btn:active,
.modal .it-icon-btn:hover,
.modal .it-icon-btn:focus,
.modal .it-icon-btn:active,
.setting-item .it-icon-btn:hover,
.setting-item .it-icon-btn:focus,
.setting-item .it-icon-btn:active,
.it-task-modal .it-icon-btn:hover,
.it-task-modal .it-icon-btn:focus,
.it-task-modal .it-icon-btn:active,
.it-config-modal .it-icon-btn:hover,
.it-config-modal .it-icon-btn:focus,
.it-config-modal .it-icon-btn:active,
.it-filter-modal .it-icon-btn:hover,
.it-filter-modal .it-icon-btn:focus,
.it-filter-modal .it-icon-btn:active,
.it-export-modal .it-icon-btn:hover,
.it-export-modal .it-icon-btn:focus,
.it-export-modal .it-icon-btn:active,
.it-import-modal .it-icon-btn:hover,
.it-import-modal .it-icon-btn:focus,
.it-import-modal .it-icon-btn:active,
.it-trash-modal .it-icon-btn:hover,
.it-trash-modal .it-icon-btn:focus,
.it-trash-modal .it-icon-btn:active,
.it-cal-day-modal .it-icon-btn:hover,
.it-cal-day-modal .it-icon-btn:focus,
.it-cal-day-modal .it-icon-btn:active,
.it-tpl-modal .it-icon-btn:hover,
.it-tpl-modal .it-icon-btn:focus,
.it-tpl-modal .it-icon-btn:active,
.it-tpl-manager .it-icon-btn:hover,
.it-tpl-manager .it-icon-btn:focus,
.it-tpl-manager .it-icon-btn:active,
.it-activity-modal .it-icon-btn:hover,
.it-activity-modal .it-icon-btn:focus,
.it-activity-modal .it-icon-btn:active {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Tree expand chevrons — same flat treatment (scoped under the row for specificity). */
.inventtasks-root .it-tree-row .it-tree-expand,
.inventtasks-sidebar-leaf .it-tree-row .it-tree-expand,
.it-sidebar-wrap .it-tree-row .it-tree-expand {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-height: 0;
}
.inventtasks-root .it-tree-row .it-tree-expand:hover,
.inventtasks-root .it-tree-row .it-tree-expand:focus,
.inventtasks-root .it-tree-row .it-tree-expand:active,
.inventtasks-sidebar-leaf .it-tree-row .it-tree-expand:hover,
.inventtasks-sidebar-leaf .it-tree-row .it-tree-expand:focus,
.inventtasks-sidebar-leaf .it-tree-row .it-tree-expand:active,
.it-sidebar-wrap .it-tree-row .it-tree-expand:hover,
.it-sidebar-wrap .it-tree-row .it-tree-expand:focus,
.it-sidebar-wrap .it-tree-row .it-tree-expand:active {
  background: transparent !important;
  box-shadow: none !important;
}
/* Explorer row actions: pin icon buttons to a compact box so Obsidian's input
   height never stretches Space/folder/list rows (embedded + docked, all platforms). */
.inventtasks-sidebar-leaf .it-tree-actions .it-icon-btn,
.it-sidebar-wrap .it-tree-actions .it-icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  align-self: center;
}
.inventtasks-sidebar-leaf .it-tree-actions .it-icon-btn .svg-icon,
.it-sidebar-wrap .it-tree-actions .it-icon-btn .svg-icon {
  width: 15px;
  height: 15px;
}
/* Ghost text buttons (modal footers): no Obsidian chrome — label only, color on hover. */
.inventtasks-root .it-btn-ghost,
.inventtasks-root .it-btn-ghost-mini,
.modal .it-btn-ghost,
.modal .it-btn-ghost-mini,
.it-task-modal .it-btn-ghost,
.it-config-modal .it-btn-ghost,
.it-filter-modal .it-btn-ghost,
.it-export-modal .it-btn-ghost,
.it-import-modal .it-btn-ghost,
.it-trash-modal .it-btn-ghost,
.it-tpl-modal .it-btn-ghost,
.it-tpl-manager .it-btn-ghost {
  box-shadow: none !important;
}
.inventtasks-root .it-btn-ghost:hover,
.inventtasks-root .it-btn-ghost-mini:hover,
.modal .it-btn-ghost:hover,
.modal .it-btn-ghost-mini:hover,
.it-task-modal .it-btn-ghost:hover,
.it-config-modal .it-btn-ghost:hover,
.it-filter-modal .it-btn-ghost:hover,
.it-export-modal .it-btn-ghost:hover,
.it-import-modal .it-btn-ghost:hover,
.it-trash-modal .it-btn-ghost:hover,
.it-tpl-modal .it-btn-ghost:hover,
.it-tpl-manager .it-btn-ghost:hover {
  background: transparent !important;
  box-shadow: none !important;
}
/* Segmented / zoom controls — flat, no Obsidian button chrome. */
.inventtasks-root .it-tg-zoom-btn,
.inventtasks-root .it-tri-state-btn,
.inventtasks-root .it-cal-period-tab,
.it-popover .it-tri-state-btn,
.it-config-modal .it-tri-state-btn,
.it-filter-modal .it-tri-state-btn,
.it-fields-customizer .it-tri-state-btn {
  box-shadow: none !important;
  min-height: 0;
}
.inventtasks-root .it-btn-secondary,
.modal .it-btn-secondary {
  box-shadow: none !important;
}

.inventtasks-content {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* ----- Layout ----- */
.it-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 100%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.it-layout.is-mobile,
.it-layout.sidebar-docked {
  grid-template-columns: 1fr;
}
.it-sidebar-wrap {
  border-right: 1px solid var(--it-border);
  background: var(--it-bg-alt);
  overflow: hidden auto;
  height: 100%;
}
.it-layout.is-mobile .it-sidebar-wrap {
  position: absolute;
  inset: 0 30% 0 0;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform .18s ease;
  box-shadow: var(--it-shadow-2);
}
.it-layout.is-mobile.sidebar-open .it-sidebar-wrap {
  transform: translateX(0);
}
.it-mobile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 40;
}
.it-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.it-main-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 16px 20px;
}

/* ----- Topbar ----- */
.it-topbar-nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.it-topbar-nav .it-icon-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.it-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  /* No bottom border here — the views bar directly below carries the single
     header separator, so topbar + views bar read as one block. */
  background: var(--it-bg);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-wrap: wrap;
}
.it-topbar-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--it-font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--it-text);
  /* Shrink + truncate before forcing the controls to wrap. */
  min-width: 0;
  overflow: hidden;
}
.it-topbar-breadcrumb > span:not(.it-breadcrumb-icon) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-breadcrumb-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.it-breadcrumb-icon .svg-icon { width: 16px; height: 16px; }
/* View tabs are colored chips in the same family as the saved-view chips:
   type-color tint + soft border + strong icon. The active one gets a bold
   border (not a filled/dark background). --chip-color is set per tab in JS.
   Scoped under .it-view-tabs (0,2,0) so the tint beats Obsidian's default
   `button:not(.clickable-icon)` background (0,1,1) at rest. */
.it-view-tabs {
  display: flex;
  gap: 5px;
}
.it-view-tabs .it-view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;
  color: var(--chip-color, var(--it-text));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--it-brand)) 30%, transparent);
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 18%, transparent);
}
.it-view-tabs .it-view-tab:hover {
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 26%, transparent);
}
/* Selected = bold, saturated border (no background swap). */
.it-view-tabs .it-view-tab.is-active {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--chip-color, var(--it-brand)) 80%, transparent);
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 18%, transparent);
  box-shadow: none;
  width: 32px;
  height: 32px;
}
.it-view-tab-icon { display: inline-flex; color: var(--chip-color, currentColor); }
.it-view-tab-icon .svg-icon { width: 15px; height: 15px; }

/* Compact view-switcher dropdown trigger (replaces the row of 6 tabs). */
.it-view-tab-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 9px;
  border-radius: calc(var(--it-radius-md) - 2px);
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--it-brand)) 35%, var(--it-border));
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 12%, transparent);
  color: var(--it-text);
  font-family: var(--it-font-h);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  min-width: 0;
}
.it-view-tab-trigger:hover {
  border-color: color-mix(in srgb, var(--chip-color, var(--it-brand)) 70%, var(--it-border));
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 18%, transparent);
}
/* Beat Obsidian's `button:not(.clickable-icon)` background in the compact view
   trigger. The plain `.it-view-tab-trigger` selector is too weak there. */
.it-topbar .it-view-tab-trigger {
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 12%, transparent) !important;
}
.it-topbar .it-view-tab-trigger:hover,
.it-topbar .it-view-tab-trigger:focus {
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 18%, transparent) !important;
}
.it-view-tab-trigger .it-view-tab-icon {
  display: inline-flex;
  color: var(--chip-color, var(--it-brand));
}
.it-view-tab-trigger .it-view-tab-icon .svg-icon { width: 16px; height: 16px; }
.it-view-tab-name {
  line-height: 1;
  min-width: 0;
}
.it-view-tab-caret {
  display: inline-flex;
  color: var(--it-text-muted);
  margin-left: 1px;
}
.it-view-tab-caret .svg-icon { width: 14px; height: 14px; }
/* Rows inside the view-picker dropdown */
.it-view-pick-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.it-view-pick-icon .svg-icon { width: 15px; height: 15px; }

/* View color scheme preview + pickers in settings */
.it-scheme-preview {
  display: flex;
  gap: 10px;
  margin: -4px 0 12px 0;
  flex-wrap: wrap;
}
.it-scheme-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.it-scheme-picker {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--it-border);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  box-sizing: border-box;
}
.it-scheme-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.it-scheme-picker::-webkit-color-swatch { border: none; border-radius: 3px; }
.it-scheme-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--it-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.it-flex-grow { flex: 1; }
.it-topbar-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Keep natural size so when the row can't fit, the whole group wraps to the
     next line (detected by the topbar's ResizeObserver, which collapses labels
     to icons first). As a last resort at very narrow widths the controls wrap
     internally rather than clip. */
  flex-shrink: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}
/* Compact mode (set by the topbar overflow observer): drop the control labels
   to icons, but keep Group/Sort values (.it-ctl-value) so you still see what
   you're grouping/sorting by. */
.it-topbar.is-compact .it-topbar-controls .it-secondary-btn span:not(.it-btn-ic):not(.it-ctl-value) {
  display: none;
}
/* Search — pill wrapper with a leading glyph; the input itself is borderless. */
.it-search-wrap {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 9px;
  border-radius: var(--it-radius-pill);
  border: 1px solid var(--it-border);
  background: var(--it-bg);
  overflow: hidden;   /* clip any inner input ring so nothing spills past the pill */
  transition: border-color .12s ease, box-shadow .12s ease;
}
.it-search-wrap:focus-within {
  border-color: var(--it-brand);
  box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.12);
}
.it-search-ic { display: inline-flex; flex: 0 0 auto; color: var(--it-text-faint); }
.it-search-ic .svg-icon { width: 14px; height: 14px; }
/* Scoped under .it-search-wrap (0,3,0) so it beats Obsidian's
   `input[type=text]:focus` border/box-shadow (0,2,1) — otherwise the input
   draws its own ring that spills outside the pill wrapper. */
.it-search-wrap .it-search,
.it-search-wrap .it-search:focus,
.it-search-wrap .it-search:hover,
.it-search-wrap .it-search:active {
  border: none; background: transparent; box-shadow: none; outline: none;
  padding: 0; min-width: 80px; max-width: 100px;
  font-family: var(--it-font-h); font-size: 12.5px; color: var(--it-text);
}

/* ----- Buttons ----- */
.it-btn-primary {
  background: var(--it-brand);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: var(--it-radius-md);
  font-family: var(--it-font-b);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--it-shadow-1);
}
.it-btn-primary:hover { background: var(--it-brand-hover); }
.it-btn-primary:active { background: var(--it-brand-active); }

.it-btn-danger {
  background: var(--it-danger, #e53935);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: var(--it-radius-md);
  font-family: var(--it-font-b);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.it-btn-danger:hover { background: #c62828; }

.it-btn-secondary, .it-secondary-btn {
  background: transparent;
  color: var(--it-text);
  border: 1px solid var(--it-border);
  padding: 6px 12px;
  border-radius: var(--it-radius-md);
  font-family: var(--it-font-h);
  font-size: 13px;
  cursor: pointer;
}
.it-btn-secondary:hover, .it-secondary-btn:hover {
  background: var(--it-bg-hover);
}
/* Topbar control buttons (Group / Sort / Filter / Show closed) — pill chips in
   the same family as the views-bar actions: icon + label, soft border, brand
   hover. (.it-btn-secondary keeps its plain rectangle for modal use.) */
.it-secondary-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px;
  border-radius: var(--it-radius-pill);
  border: 1px solid var(--it-border);
  background: transparent;
  color: var(--it-text-muted);
  font-family: var(--it-font-h); font-size: 12.5px; font-weight: 500;
  white-space: nowrap;
}
.it-secondary-btn:hover {
  color: var(--it-brand);
  border-color: color-mix(in srgb, var(--it-brand) 45%, transparent);
  background: color-mix(in srgb, var(--it-brand) 8%, transparent);
}
.it-secondary-btn.is-active {
  color: var(--it-brand);
  border-color: var(--it-brand);
  background: color-mix(in srgb, var(--it-brand) 12%, transparent);
}
.it-btn-ic { display: inline-flex; flex: 0 0 auto; }
.it-btn-ic .svg-icon { width: 14px; height: 14px; }

.it-btn-ghost, .it-btn-ghost-mini {
  background: transparent;
  border: none;
  color: var(--it-text-muted);
  cursor: pointer;
  font-family: var(--it-font-h);
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--it-radius-sm);
}
.it-btn-ghost:hover, .it-btn-ghost-mini:hover {
  color: var(--it-brand);
}

.it-icon-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px;
  border-radius: var(--it-radius-sm);
  color: var(--it-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  line-height: 1;
}
.it-icon-btn:hover,
.it-icon-btn:focus,
.it-icon-btn:active {
  background: transparent;
  box-shadow: none;
  color: var(--it-text);
}
.it-icon-btn .svg-icon { width: 16px; height: 16px; }
.it-icon-btn-mini { padding: 3px; }
.it-icon-btn-mini .svg-icon { width: 13px; height: 13px; }
.it-icon-btn.it-danger:hover { color: var(--it-orange); }

/* ----- Sidebar ----- */
.it-sidebar { padding: 4px 2px; }

/* ----- Docked sidebar (in Obsidian's left/right workspace leaf) -----
   Sizing is shared with the embedded sidebar above. Only context-specific
   tweaks (Obsidian's view-content reset, panel background, hover/active
   colors that must use Obsidian native vars) live here. */
.inventtasks-sidebar-leaf .view-content {
  padding: 0;
  overflow: hidden auto;
}
.it-sidebar-docked {
  height: 100%;
  width: 100%;
  overflow: hidden auto;
  background: var(--background-secondary);
}
/* Explicit hover/active for docked context (Obsidian's sidebar shadows them) */
.it-sidebar-docked .it-tree-row:hover {
  background: var(--background-modifier-hover);
}
.it-sidebar-docked .it-tree-row.is-active {
  background: var(--background-modifier-active-hover, var(--it-lavender));
  color: var(--it-purple);
}
.theme-dark .it-sidebar-docked .it-tree-row.is-active {
  background: rgba(102,71,240,.22);
  color: #cdb8ff;
}
.it-sidebar-docked .it-icon-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-normal);
}
.it-sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 2px 6px 6px 6px;
}
.it-sidebar-header-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.it-sidebar-header-shortcuts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 2px;
}
.it-sidebar-shortcut-btn {
  width: 27px;
  height: 27px;
  color: var(--text-muted);
}
.it-sidebar-shortcut-btn.is-active {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.it-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-family: var(--it-font-h);
  font-weight: 600;
  font-size: 14px;
}
.it-sidebar-title-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.12s ease;
}
.it-sidebar-title-clickable:hover { background: var(--background-modifier-hover); }
.it-sidebar-emoji { font-size: 16px; }
.it-sidebar-section {
  margin-bottom: 2px;
  padding-left: 6px;
}
.it-sidebar-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
}
.it-sidebar-section-actions { display: flex; align-items: center; gap: 2px; }
.it-sidebar-section-title {
  font-family: var(--it-font-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--it-text-faint);
  padding: 2px 6px;
}
.it-sidebar-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--it-text-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.it-sidebar-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.it-tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  min-height: 20px;
  border-radius: var(--it-radius-sm);
  cursor: pointer;
  position: relative;
}
.workspace-leaf-content[data-type="inventtasks-sidebar"] .it-sidebar-docked .it-tree-row {
  min-height: 30px;
}
/* "Inside the InventTasks view (default)" — the embedded explorer drawer. Match
   the docked navigator's even row rhythm (above): the base row is only 20px and
   rows that carry action buttons (Spaces / folder / list) were stretching taller
   than the button-less Global rows, so the two sections looked misaligned. Give
   every embedded row the same 30px min-height and pin the row action buttons (＋ /
   ⋯ / reorder) to a compact centered box so a tall native <button> (Obsidian
   inflates button height, especially on mobile) can't out-grow the row. Result:
   Global and Spaces line up identically — and the same as the docked sidebar. */
.it-sidebar-wrap .it-tree-row {
  min-height: 30px;
}
.it-sidebar-section {
  padding-left: 6px;
}
.it-sidebar-section > .it-sidebar-section-title {
  padding-left: 12px;
  padding-bottom: 4px;
}
.it-sidebar-section > .it-tree-row.it-tree-nav {
  padding-left: 26px;
}
.it-tree-row:hover { background: var(--it-bg-hover); }
.it-tree-row.is-active,
.it-doc-page-row.is-active {
  background: var(--it-lavender);
  color: var(--it-purple);
}
.theme-dark .it-tree-row.is-active,
.theme-dark .it-doc-page-row.is-active { background: rgba(102,71,240,.18); color: #cdb8ff; }

/* ===== Custom active-row accent =====
   When the user picks an "Active row color" in Workspace settings, the plugin
   sets --inventtasks-active-color on <body>. The background tint is derived
   from that accent via color-mix.
   The text color is configurable separately:
     - default mode → --inventtasks-active-text-color is NOT set, so the var()
       below falls back to the accent (current behaviour).
     - custom mode → the var holds a hex value chosen by the user.
     - "inherit" mode → handled by the separate rule further down (the literal
       `inherit` keyword can't travel through a custom property — see main.ts). */
body[style*="--inventtasks-active-color"] .it-tree-row.is-active,
body[style*="--inventtasks-active-color"] .it-sidebar-docked .it-tree-row.is-active,
body[style*="--inventtasks-active-color"].theme-dark .it-tree-row.is-active,
body[style*="--inventtasks-active-color"].theme-dark .it-sidebar-docked .it-tree-row.is-active,
body[style*="--inventtasks-active-color"] .it-doc-page-row.is-active,
body[style*="--inventtasks-active-color"].theme-dark .it-doc-page-row.is-active {
  background: color-mix(in srgb, var(--inventtasks-active-color) 18%, transparent);
  color: var(--inventtasks-active-text-color, var(--inventtasks-active-color));
}

/* "Same as inactive rows" text mode — applies a literal `color: inherit` so
   the active row picks up its parent's color instead of being tinted with the
   accent. The class is toggled on <body> from main.ts::applyActiveColor. */
body.inventtasks-active-text-inherit[style*="--inventtasks-active-color"] .it-tree-row.is-active,
body.inventtasks-active-text-inherit[style*="--inventtasks-active-color"] .it-sidebar-docked .it-tree-row.is-active,
body.inventtasks-active-text-inherit[style*="--inventtasks-active-color"] .it-doc-page-row.is-active {
  color: inherit;
}

/* "Same as item color" text mode — read --node-color which each tree row sets
   to its own list/folder/space color. Nav rows (Today/Everything/Favorites)
   don't define --node-color, so we fall back to the accent for them. */
body.inventtasks-active-text-node[style*="--inventtasks-active-color"] .it-tree-row.is-active,
body.inventtasks-active-text-node[style*="--inventtasks-active-color"] .it-sidebar-docked .it-tree-row.is-active,
body.inventtasks-active-text-node[style*="--inventtasks-active-color"] .it-doc-page-row.is-active {
  color: var(--node-color, var(--inventtasks-active-color));
}

.it-tree-expand {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0; cursor: pointer; color: var(--it-text-faint);
}
/* No background on the expand chevron. Obsidian's `button:not(.clickable-icon)`
   fill beats a plain `.it-tree-expand` rule (0,1,1 at rest, 0,2,1 on hover),
   so we scope under `.it-tree-row` (0,2,0 / 0,3,0) to win in both contexts
   (embedded + docked sidebar). The row highlights on hover; the chevron only
   brightens its color. */
.it-tree-row .it-tree-expand,
.it-tree-row .it-tree-expand:hover,
.it-tree-row .it-tree-expand:focus,
.it-tree-row .it-tree-expand:active {
  background: transparent;
  box-shadow: none;
}
.it-tree-row .it-tree-expand:hover { color: var(--it-text-muted); }
.it-tree-expand .svg-icon { width: 14px; height: 14px; }
.it-tree-name {
  display: flex; align-items: center; gap: 6px;
  flex: 1;
  min-width: 0;
}
.it-tree-emoji { font-size: 16px; line-height: 1; }
.it-tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--it-font-h);
  font-size: 14px;
}
.it-tree-space .it-tree-label { font-weight: 600; }
.it-tree-folder { padding-left: 20px; }
.it-tree-list { padding-left: 20px; }
.it-tree-list-in-folder { padding-left: 32px; }

.it-tree-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.it-tree-count {
  font-family: var(--it-font-m);
  font-size: 10px;
  color: var(--it-text-faint);
  background: var(--it-bg-alt);
  padding: 1px 6px;
  border-radius: var(--it-radius-pill);
}
.it-tree-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.it-tree-row:hover .it-tree-actions {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Favorites ===== */
/* Header inside Global section — same baseline as Today/Everything, with a bookmark icon */
.it-tree-favorites-header .it-tree-emoji { color: #ed9702}
.it-tree-favorites-toggle { cursor: pointer; }
.it-tree-favorites-toggle:hover { filter: brightness(1.1); }
.it-tree-favorites-header .it-tree-count {
  margin-left: auto;
  margin-right: 4px;
}
.it-favorites-children {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 0;
}
.it-sidebar-section > .it-favorites-children .it-tree-row.it-tree-favorite-row {
  /* Override the global section's nav-row padding so favorite-list rows sit
     flush with the dashed guide line instead of the deeper nav indent. */
  padding-left: 8px;
}
.it-tree-favorite-row .it-icon-btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
/* Collapse the up/down buttons out of layout when the row isn't hovered, so
   the list name can use the full available width and only gets clipped once
   the user is actually targeting the row. */
.it-tree-actions-reorder { display: none; }
.it-tree-row:hover .it-tree-actions-reorder { display: inline-flex; }

/* ----- Chips -----
   The chip helpers (see ui/components.ts → applyChipStyle) add these modifier
   classes based on the user's per-element "Label styles" settings (per
   workspace/space/folder/list):
     .it-cs-bd       : colored border in the chip's color
     .it-cs-bd-bold  : heavier, more saturated border (overrides .it-cs-bd)
     .it-cs-bg       : tinted background using the chip's color
   The default appearance (no modifier classes) is a soft 30% border with no
   background — matches the look of chips that don't go through the new
   styling system (mini, toggle, add, etc).
*/
.it-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--it-radius-pill);
  font-family: var(--it-font-b);
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-color, var(--it-text));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--it-text)) 30%, transparent);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Border on/off and bold variant. Default `.it-chip` already shows a soft
   border, so the explicit `.it-cs-bd` class is essentially a no-op (kept for
   symmetry / future tuning). `.it-cs-bd-bold` overrides width + saturation. */
.it-chip.it-cs-bd-off {
  border-color: transparent;
}
.it-chip.it-cs-bd-bold {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--chip-color, var(--it-text)) 65%, transparent);
}
.it-chip.it-cs-bg {
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 18%, transparent);
}
.it-chip:hover {
  /* Boost the background slightly on hover so the chip signals affordance,
     even when the user has disabled the tinted background style. */
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 12%, transparent);
}
.it-chip.it-cs-bg:hover {
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 28%, transparent);
}
.it-chip-tag {
  color: var(--chip-color, var(--it-text-muted));
}
.it-chip-tag.is-active {
  /* Selection cue for picker chips. We do NOT override background or
     border-color so the chip's underlying chip-style (border / bold border /
     background) remains visible — the ring sits on top as a "selected" mark. */
  box-shadow:
    0 0 0 1px var(--background-primary),
    0 0 0 3px color-mix(in srgb, var(--chip-color, var(--it-brand)) 70%, transparent);
}
.it-chip-priority .it-chip-label { color: var(--chip-color); }
.it-chip-empty { color: var(--it-text-faint); border-style: dashed; }
.it-chip-date.it-chip-overdue {
  color: var(--it-danger, #e53935);
  font-weight: 600;
  background: transparent;
  border-color: var(--it-border);
}
.it-chip-add {
  color: var(--it-text-muted);
  background: var(--it-bg-alt);
  border: 1px dashed var(--it-border);
}

/* ----- Label styles tab (config modal) -----
   Each chip kind is rendered as its own card so the three toggles (Border /
   Bold border / Background) are clearly attributed to that kind. Cards are
   separated by a margin + a soft shadow.
*/
.it-chip-style-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.it-chip-style-card {
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  padding: 12px 14px;
  box-shadow: var(--it-shadow-1);
}
.it-chip-style-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--it-border);
  margin-bottom: 10px;
}
.it-chip-style-card-title {
  font-family: var(--it-font-h);
  font-size: 15px;
  font-weight: 700;
  color: var(--it-text);
}
.it-chip-style-preview-wrap {
  display: flex;
  align-items: center;
}
.it-chip-style-preview {
  pointer-events: none;
}
.it-chip-style-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.it-chip-style-prop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--it-border);
}
.it-chip-style-prop:first-child { border-top: none; }
.it-chip-style-prop-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.it-chip-style-prop-name {
  font-family: var(--it-font-h);
  font-size: 13px;
  font-weight: 600;
  color: var(--it-text);
}
.it-chip-style-prop-desc {
  font-size: 11px;
  color: var(--it-text-muted);
}
@media (max-width: 720px) {
  .it-chip-style-prop {
    flex-direction: column;
    align-items: stretch;
  }
}
.it-tag-remove {
  margin-left: 4px;
  color: var(--it-text-faint);
  cursor: pointer;
}
.it-tag-remove:hover { color: var(--it-orange); }

.it-priority-flag { display: inline-flex; }

/* ----- Feature row (Features tab) ----- */
.it-feature-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--it-border);
}
.it-feature-row:last-child { border-bottom: none; }
.it-feature-info {
  flex: 1;
  min-width: 0;
}
.it-feature-name {
  font-family: var(--it-font-h);
  font-size: 14px;
  font-weight: 600;
  color: var(--it-text);
}
.it-feature-desc {
  font-size: 12px;
  color: var(--it-text-muted);
  margin-top: 2px;
}
.it-feature-controls {
  flex-shrink: 0;
}

/* ----- Direction row inside group/sort popover ----- */
.it-popover-dir-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
}
.it-popover-dir-label {
  font-family: var(--it-font-m);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--it-text-faint);
}

/* ----- Type picker trigger (config modal "Default task type") ----- */
.it-type-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.it-iconish-trigger {
  display: inline-flex;
  align-items: center;
}
.it-iconish-trigger .svg-icon {
  width: 14px;
  height: 14px;
}

/* ----- Unified pickers (color + icon) ----- */
.it-color-picker,
.it-icon-picker {
  padding: 6px;
  min-width: 260px;
}
.it-icon-picker { width: 340px; max-width: 90vw; }
.it-color-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 4px 0;
}
.it-color-picker-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, border-color .12s ease;
}
.it-color-picker-swatch:hover { transform: scale(1.12); }
.it-color-picker-swatch.is-active {
  border-color: var(--it-text);
  box-shadow: 0 0 0 2px var(--it-bg);
}
.it-color-picker-input-row,
.it-icon-picker-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--it-border);
}
.it-color-picker-preview,
.it-icon-picker-preview {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--it-border);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.it-color-picker-input,
.it-icon-picker-input {
  flex: 1;
  min-width: 0;
}
.it-icon-btn.it-just-copied {
  background: rgba(76, 175, 80, 0.18);
  color: #2e7d32;
}

/* Icon picker — tabs + grid */
.it-icon-picker-tabs {
  display: flex;
  gap: 2px;
  background: var(--it-bg-alt);
  border-radius: var(--it-radius-md);
  padding: 3px;
  margin-bottom: 6px;
}
.it-picker-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--it-font-h);
  font-weight: 500;
  color: var(--it-text-muted);
  border-radius: var(--it-radius-sm);
  cursor: pointer;
}
.it-picker-tab:hover { color: var(--it-text); }
.it-picker-tab.is-active {
  background: var(--it-bg);
  color: var(--it-brand);
  box-shadow: var(--it-shadow-1);
}
.it-icon-picker-body {
  display: flex;
  flex-direction: column;
}
.it-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}
.it-icon-picker-cell {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--it-radius-sm);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}
.it-icon-picker-cell:hover {
  background: var(--it-bg-hover);
  border-color: var(--it-border);
}
.it-icon-picker-cell.is-active {
  background: var(--it-lavender);
  border-color: var(--it-purple);
}
.it-icon-picker-cell .svg-icon {
  width: 16px;
  height: 16px;
}

/* "Browse all" / "Quick picks" toggle button inside the input row. */
.it-icon-picker-browse {
  flex-shrink: 0;
}

/* The picker swaps between a small curated grid ("quick") and a tall
   categorised view ("all"). In "all" mode we host categories + sections
   inside a scrollable container so the popover doesn't blow up. */
.it-icon-picker-grid-host {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
  margin-top: 6px;
  padding-right: 2px;
}
.it-icon-picker-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0 6px;
}
.it-icon-picker-cat {
  background: transparent;
  border: 1px solid var(--it-border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--it-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.it-icon-picker-cat:hover { background: var(--it-bg-hover); color: var(--it-text); }
.it-icon-picker-cat.is-active {
  background: var(--it-brand);
  border-color: var(--it-brand);
  color: #fff;
}
.it-icon-picker-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}
.it-icon-picker-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--it-text-muted);
  padding: 6px 2px 2px;
}
.it-icon-picker-empty,
.it-icon-picker-loading,
.it-icon-picker-hint {
  padding: 10px;
  font-size: 12px;
  color: var(--it-text-muted);
  text-align: center;
}
.it-icon-picker-hint {
  border-top: 1px dashed var(--it-border);
  margin-top: 6px;
  padding: 6px 4px 0;
  font-size: 11px;
}

/* Setting-row triggers */
.it-icon-row-trigger,
.it-color-row-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  min-width: 140px;
}
.it-icon-row-preview {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.it-icon-row-preview .svg-icon { width: 16px; height: 16px; }
.it-icon-row-label,
.it-color-row-label {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-muted);
}
.it-color-row-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--it-border);
  display: inline-block;
  flex-shrink: 0;
}

/* Task-types editor: standalone icon trigger button (next to swatch) */
.it-icon-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--it-radius-sm);
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
}
.it-icon-trigger:hover { background: var(--it-bg-hover); }
.it-icon-trigger .svg-icon { width: 16px; height: 16px; }

/* ----- Empty pseudo-row in palette editors ----- */
.it-cfg-empty-row {
  background: var(--it-bg-alt);
  border: 1px dashed var(--it-border);
  border-radius: var(--it-radius-sm);
  font-style: italic;
}
.it-cfg-swatch-empty {
  background: repeating-linear-gradient(45deg, var(--it-bg-alt), var(--it-bg-alt) 3px, var(--it-border) 3px, var(--it-border) 5px);
}
.it-cfg-empty-label {
  font-family: var(--it-font-h);
  font-size: 13px;
  color: var(--it-text-muted);
}

/* ----- Tri-state segmented control (Inherit / On / Off) ----- */
.it-tri-state {
  display: inline-flex;
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  padding: 2px;
  gap: 2px;
}
.it-tri-state-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--it-font-h);
  color: var(--it-text-muted);
  border-radius: var(--it-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.it-tri-state-btn:hover {
  color: var(--it-text);
}
.it-tri-state-btn.is-active {
  background: var(--it-bg);
  color: var(--it-text);
  box-shadow: none;
  font-weight: 600;
}

/* ----- Popover / dropdown -----
   Note: .it-popover is appended directly to <body>, so it relies on
   tokens declared at :root scope (see top of file). */
.it-popover {
  background: var(--background-primary, #fff);
  border: 1px solid var(--background-modifier-border, #e8e8e8);
  border-radius: var(--it-radius-md, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16),
              0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 220px;
  padding: 4px;
  color: var(--text-normal, #292d34);
  font-family: var(--it-font-b, Inter, sans-serif);
}
.theme-dark .it-popover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
              0 4px 12px rgba(0, 0, 0, 0.4);
}
.it-popover-menu { display: flex; flex-direction: column; gap: 1px; }
.it-popover-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--it-radius-sm, 6px);
  font-family: var(--it-font-h, sans-serif);
  font-size: 13px;
  color: var(--text-normal, #292d34);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}
.it-popover-item:hover {
  background: var(--background-modifier-hover, rgba(0, 0, 0, 0.06));
  color: var(--text-normal, #292d34);
}
.it-ctx-menu {
  min-width: 200px;
  padding: 3px;
}
.it-ctx-menu .it-popover-menu {
  gap: 0;
}
.it-ctx-menu .it-popover-item {
  gap: 7px;
  min-height: 28px;
  padding: 4px 9px;
  line-height: 1.2;
}
.it-ctx-menu .it-popover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.it-ctx-menu .it-popover-icon .svg-icon {
  width: 14px;
  height: 14px;
}
.it-ctx-menu .it-popover-sep {
  margin: 2px 0;
}
.it-popover-item.is-active {
  background: #EFEDFD;
  color: #6647F0;
}
.theme-dark .it-popover-item.is-active {
  background: rgba(102, 71, 240, 0.28);
  color: #cdb8ff;
}
.it-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.it-popover-icon { font-size: 13px; }
.it-date-popover {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  min-width: 220px;
}
.it-date-popover input { padding: 6px; border-radius: var(--it-radius-sm); border: 1px solid var(--it-border); }

/* ----- Empty state ----- */
.it-empty-state {
  text-align: center;
  padding: 64px 24px;
  max-width: 540px;
  margin: 24px auto;
  background: var(--it-bg-alt);
  border-radius: var(--it-radius-lg);
}
.it-empty-state-emoji { font-size: 48px; margin-bottom: 8px; }
.it-empty-state h2 { font-family: var(--it-font-h); margin: 8px 0 4px; }
.it-empty-state-cta { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.it-empty-state-small {
  padding: 32px;
  text-align: center;
  color: var(--it-text-muted);
}

/* ----- List view ----- */
.it-list-view { display: flex; flex-direction: column; gap: 12px; }
.it-list-wrap {
  /* Scroll container only — visual "card" is drawn per group below. */
  overflow: auto;
}
/* Column tracks are built per-render in list-view.ts (grid-template-columns is
   set inline) so columns follow the user's visible_fields order. */
.it-list-grid {
  display: grid;
  min-width: max-content;
  width: 100%;
}
/* Group header — top of each group's card */
.it-list-grid > .it-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  min-height: 36px;
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  border-top-left-radius: var(--it-radius-lg);
  border-top-right-radius: var(--it-radius-lg);
}
/* Gap between groups — clean space, no borders. A per-group calc summary (when
   present) is the last element of a card, so it too needs the gap after it. */
.it-list-grid > .it-row + .it-group-header,
.it-list-grid > .it-list-col-header + .it-group-header,
.it-list-grid > .it-list-summary + .it-group-header {
  margin-top: 14px;
}
/* Column header sits inside the card — share side borders */
.it-list-grid > .it-list-col-header {
  border-left: 1px solid var(--it-border);
  border-right: 1px solid var(--it-border);
  border-bottom: 1px solid var(--it-border);
}
/* Edge case: empty group → col-header is the bottom of the card */
.it-list-grid > .it-list-col-header:has(+ .it-group-header),
.it-list-grid > .it-list-col-header:has(+ .it-list-summary.is-grand),
.it-list-grid > .it-list-col-header:last-child {
  border-bottom-left-radius: var(--it-radius-lg);
  border-bottom-right-radius: var(--it-radius-lg);
}
/* Last row of each group → bottom of the card (rounded). Also when it's the
   last row before the standalone grand-total bar (grouping without per-group
   summaries, or no grouping at all). */
.it-list-grid > .it-row:has(+ .it-group-header),
.it-list-grid > .it-row:has(+ .it-list-summary.is-grand),
.it-list-grid > .it-row:last-child {
  border-bottom-left-radius: var(--it-radius-lg);
  border-bottom-right-radius: var(--it-radius-lg);
}
.it-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  min-height: 36px;
  background: var(--it-bg-alt);
  border-bottom: 1px solid var(--it-border);
}
.it-group-add-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  border-radius: var(--it-radius-sm);
}
.it-group-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.it-group-label {
  font-family: var(--it-font-h);
  font-weight: 600;
  font-size: 14px;
}
/* Group header chip — used when grouping by a styled field (status /
   priority / tag / context / type / dropdown CF / labels CF). Honors
   the user's Label-style preferences via the .it-cs-* modifier classes
   added by applyChipStyleByKind. */
.it-group-chip {
  cursor: default;
  font-family: var(--it-font-h);
  font-weight: 600;
  font-size: 13px;
  height: 26px;
  padding: 0 12px;
}
.it-group-chip:hover { box-shadow: none; }
.it-group-count {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-faint);
  background: var(--it-bg);
  padding: 2px 8px;
  border-radius: var(--it-radius-pill);
}
.it-group-actions { margin-left: auto; }

.it-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 10px;
  padding: 10px 14px;
  border-left: 1px solid var(--it-border);
  border-right: 1px solid var(--it-border);
  border-bottom: 1px solid var(--it-border);
  background: var(--it-bg);
  cursor: pointer;
  transition: background .12s;
}
.it-row:hover { background: var(--it-bg-hover); }
/* Each cell's grid-column is assigned inline in list-view.ts (named line per
   field) so the visual order follows visible_fields. */
.it-row-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.it-row-check { accent-color: var(--it-brand); }
.it-row-type { font-size: 14px; color: var(--it-text-faint); width: 16px; text-align: center; }
.it-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.it-row-title-edit {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.it-row-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.it-row-labels { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.it-row-context { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.it-row-cf-cell {
  font-family: var(--it-font-m);
  font-size: 12px;
  color: var(--it-text-muted);
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.it-row-cell .it-inline-datetime,
.it-row-cf-cell .it-inline-datetime {
  flex: 0 0 auto;
}
.it-list-col-header {
  background: var(--it-bg);
  border-bottom: 1px solid var(--it-border);
  column-gap: 10px;
  padding: 0 14px;
}
.it-list-col-header-cell {
  font-family: var(--it-font-b);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--it-text-faint);
  padding: 6px 0;
  white-space: nowrap;
}
.it-row-id {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-faint);
  flex: 0 0 auto;
}
.it-row-title-text {
  font-family: var(--it-font-b);
  font-size: 14px;
  color: var(--it-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-row-title-text.is-done {
  text-decoration: line-through;
  color: var(--it-text-faint);
}
.it-row-subtask-badge {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-muted);
  background: var(--it-bg-alt);
  padding: 1px 6px;
  border-radius: var(--it-radius-pill);
}
.it-row-tags {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
.it-tags-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--it-radius-pill);
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  color: var(--it-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.it-tags-more:hover {
  background: var(--it-bg-hover);
  color: var(--it-text);
}
.it-tags-popover {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  max-width: 320px;
}

/* Tag picker popover */
.it-tag-picker {
  min-width: 220px;
  max-width: 280px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.it-tag-picker-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius);
  background: var(--it-bg);
  color: var(--it-text);
  font-size: 13px;
  font-family: var(--it-font-b);
  outline: none;
  box-sizing: border-box;
}
.it-tag-picker-input:focus { box-shadow: 0 0 0 2px var(--it-brand); border-color: transparent; }
.it-tag-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}
.it-tag-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--it-radius);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--it-text);
  font-size: 13px;
  font-family: var(--it-font-b);
  font-weight: 400;
  text-align: left;
  width: 100%;
  transition: background 80ms;
}
.it-tag-picker-item::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color, var(--it-border));
  flex-shrink: 0;
}
.it-tag-picker-item:hover { background: var(--it-bg-hover); }
.it-tag-picker-item.is-active {
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 14%, transparent);
}
.it-tag-picker-add::before { display: none; }
.it-tag-picker-add {
  color: var(--it-brand) !important;
  font-style: italic;
  font-weight: 400;
}
.it-tag-picker-empty {
  font-size: 12px;
  color: var(--it-text-faint);
  padding: 4px 8px;
  font-style: italic;
}
.it-row-list-label {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-muted);
  background: var(--it-bg-alt);
  padding: 2px 8px;
  border-radius: var(--it-radius-pill);
}
/* List / Folder / Space reference chip — icon + name. Used by list + table
   views in place of the plain-text mono labels. Body font, normal color,
   icon picks up the node's configured color. */
.it-list-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--it-font-b);
  font-size: 12px;
  color: var(--it-text);
  background: var(--it-bg-alt);
  padding: 2px 8px;
  border-radius: var(--it-radius-pill);
  max-width: 220px;
  overflow: hidden;
}
.it-list-ref-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}
.it-list-ref-icon .svg-icon { width: 12px; height: 12px; }
.it-list-ref-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-list-view .it-row-labels .it-list-ref {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* Table cells get no background so the chip sits nicely inside the row's bg */
.it-table-meta .it-list-ref {
  background: transparent;
  padding: 0;
}
.it-row-actions {
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.it-row:hover .it-row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* ----- Board view ----- */
.it-board-view {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.it-board {
  display: flex;
  gap: 12px;
  overflow: auto;
  padding: 4px;
  scrollbar-width: thin;
  flex: 1;
  min-height: 0;
}
.it-board-col {
  flex: 0 0 280px;
  background: var(--it-bg-alt);
  border-radius: var(--it-radius-lg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100%;
}
.it-board-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--it-font-h);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 6px;
}
.it-board-col-count {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-faint);
  background: var(--it-bg);
  padding: 1px 8px;
  border-radius: var(--it-radius-pill);
  margin-left: auto;
}
.it-board-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: auto;
  min-height: 40px;
  padding: 4px;
  border-radius: var(--it-radius-md);
  border: 2px dashed transparent;
}
.it-board-col-body.is-drop-target {
  border-color: var(--it-brand);
  background: rgba(0,145,255,.05);
}
.it-board-add {
  background: transparent;
  border: 1px dashed var(--it-border);
  padding: 6px 8px;
  color: var(--it-text-muted);
  border-radius: var(--it-radius-md);
  cursor: pointer;
  font-family: var(--it-font-h);
  font-size: 12px;
}
.it-board-add:hover { color: var(--it-brand); border-color: var(--it-brand); }
.it-board-load-more {
  background: var(--it-bg);
  border: 1px solid var(--it-border);
  padding: 6px 8px;
  color: var(--it-text-muted);
  border-radius: var(--it-radius-md);
  cursor: pointer;
  font-family: var(--it-font-h);
  font-size: 12px;
}
.it-board-load-more:hover { color: var(--it-brand); border-color: var(--it-brand); }

/* ---------- Settings health / diagnostics ---------- */
.it-health-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.it-health-pill {
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-pill);
  padding: 5px 10px;
  color: var(--it-text-muted);
  background: var(--it-bg);
  font-size: 12px;
  font-family: var(--it-font-h);
}
.it-health-pill.is-ok {
  color: var(--it-success, #22c55e);
  border-color: color-mix(in srgb, var(--it-success, #22c55e) 45%, var(--it-border));
}
.it-health-pill.is-warning {
  color: var(--it-danger, #e53935);
  border-color: color-mix(in srgb, var(--it-danger, #e53935) 45%, var(--it-border));
}
.it-health-list {
  margin: 6px 0 12px 18px;
  color: var(--it-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* ---------- Board swimlanes (sub-group rows) ---------- */
/* Lanes stack vertically; the body is the single scroller (both axes), so a
   horizontal scroll moves every lane together → columns stay aligned. Each
   lane is as wide as its columns (≥ viewport) and pins its header to the left. */
.it-board-swimlanes {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px;
}
.it-board-swimlane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  min-width: 100%;
}
.it-board-swimlane-header {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 4px 6px;
  font-family: var(--it-font-h);
  font-weight: 600;
  font-size: 13px;
}
.it-board-swimlane-name { color: var(--it-text); }
.it-board-lane-cols {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
/* In a lane, columns size to content (the page scrolls), not the column's own
   inner scroll — height is driven by the cards. */
.it-board-swimlane .it-board-col { max-height: none; }

/* Small heading inside the Group popover (e.g. "Swimlanes"). */
.it-popover-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--it-text-muted);
  padding: 6px 10px 3px;
}

/* ---------- Multiple Lists ---------- */
.it-lists-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Home-list chip — solid, neutral, not removable. */
.it-chip-home {
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  color: var(--it-text-muted);
}
.it-chip-home-ic { display: inline-flex; }
.it-chip-home-ic .svg-icon { width: 12px; height: 12px; }
.it-chip-list-ref .it-chip-list-ic { display: inline-flex; }
.it-chip-list-ref .it-chip-list-ic .svg-icon { width: 12px; height: 12px; }
/* "Linked from another list" markers in List rows / Board cards. */
.it-row-linked-badge {
  color: var(--it-text-faint);
  font-size: 12px;
  margin-left: 2px;
  cursor: help;
}
.it-card-linked {
  font-size: 11px;
  color: var(--it-text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.it-card {
  background: var(--it-bg);
  border-radius: var(--it-radius-md);
  border: 1px solid var(--it-border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: grab;
  box-shadow: var(--it-shadow-1);
  border-left: 3px solid var(--card-accent, transparent);
}
.it-card.is-dragging { opacity: .55; }
.it-card-cover {
  height: 60px;
  background-size: cover;
  background-position: center;
  border-radius: var(--it-radius-sm);
  margin: -2px -2px 4px;
}
.it-card-top { display: flex; align-items: center; gap: 8px; }
.it-card-id {
  font-family: var(--it-font-m);
  font-size: 10px;
  color: var(--it-text-faint);
}
.it-card-priority {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-left: auto;
}
.it-card-title {
  font-family: var(--it-font-b);
  font-size: 14px;
  font-weight: 500;
  color: var(--it-text);
  line-height: 1.3;
}
.it-card-title.is-done {
  text-decoration: line-through;
  color: var(--it-text-faint);
}
.it-card-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.it-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.it-card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--it-text-muted); }
.it-card-meta-item { font-family: var(--it-font-m); }
.it-card-meta-item.is-overdue { color: var(--it-danger, #e53935); font-weight: 600; }
/* Flex-wrap field area on board cards — intelligently packs chips by width */
.it-card-fields {
  display: flex;
  gap: 4px 6px;
  flex-wrap: wrap;
  align-items: center;
}
/* Compact chip variant for board cards (smaller height + tighter padding) */
.it-card .it-chip {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  max-width: 100%;
}
.it-card .it-priority-flag {
  display: inline-flex;
  align-items: center;
}
.it-card .it-priority-flag svg {
  width: 11px;
  height: 11px;
}

/* ----- Calendar view ----- */
/* The calendar takes the full body height so its scrollable grid area can
   anchor the horizontal scrollbar to the viewport bottom (otherwise the bar
   sits below the fold and the user has to scroll down to find it). */
.it-calendar-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.it-cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  row-gap: 8px;
  margin-bottom: 12px;
  /* Wrap the right cluster (recurring toggle + period tabs) to the next row
     when the toolbar gets narrow — based on real width, not a media query. */
  flex-wrap: wrap;
}
/* Right cluster kept together so it wraps as one unit. */
.it-cal-toolbar-right { display: inline-flex; align-items: center; gap: 10px; }
.it-cal-toolbar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.it-cal-month {
  font-family: var(--it-font-h);
  font-size: 18px;
  font-weight: 600;
  min-width: 200px;
  text-align: center;
}
/* Period switcher (Month / Week / Day) — mirrors the main view-tabs pill group
   so it's visually consistent with the top-level view switcher. */
.it-cal-period-tabs {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  padding: 3px;
  gap: 2px;
}
.it-cal-period-tab {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-family: var(--it-font-h);
  font-size: 13px;
  color: var(--it-text-muted);
  border-radius: calc(var(--it-radius-md) - 2px);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.it-cal-period-tab:hover {
  color: var(--it-brand);
  background: color-mix(in srgb, var(--it-brand) 8%, transparent);
}
.it-cal-period-tab.is-active {
  background: color-mix(in srgb, var(--it-brand) 13%, transparent);
  color: var(--it-brand);
  box-shadow: none;
  font-weight: 600;
}
/* Scrollable grid area. Takes the remaining height under the toolbar so:
   - the horizontal scrollbar sits at the viewport bottom (always visible);
   - vertical content scroll happens inside this wrapper, not on the page.
   The toolbar above stays put and never scrolls out of view. */
.it-cal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 16px;
}
.it-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--it-border);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-lg);
  overflow: hidden;
}
/* Below this width the cells get too cramped to be useful (titles collapse to
   2-3 characters). At that point the scroll wrapper above kicks in instead of
   shrinking further. */
.it-cal-grid.is-month,
.it-cal-grid.is-week {
  min-width: 760px;
}
/* Week view: same 7-column grid as Month, but a single row of taller cells.
   Header row stays auto-sized so it matches Month/Day; only the cell row stretches. */
.it-cal-grid.is-week {
  grid-template-rows: auto minmax(420px, 1fr);
}
/* Day view: a single tall column, consistent header + cell styling. */
.it-cal-grid.is-day {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
}
.it-cal-dayname {
  background: var(--it-bg-alt);
  padding: 8px;
  font-family: var(--it-font-b);
  font-size: 11px;
  color: var(--it-text-muted);
  text-align: center;
}
.it-cal-cell {
  background: var(--it-bg);
  min-height: 100px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 0;
  /* Grid items default to min-width:auto (min-content), so a wide, non-shrinkable
     pill chip (e.g. several linked tasks) would force the cell past its column —
     making the pill, and its translucent drag ghost, bleed into adjacent cells.
     min-width:0 lets the cell shrink to its track; the pill's own overflow:hidden
     then clips the wide content. */
  min-width: 0;
}
.it-cal-cell.is-week-cell { min-height: 420px; }
.it-cal-cell.is-day-cell {
  min-height: 520px;
  padding: 12px 14px;
  gap: 6px;
}
.it-cal-cell.is-other-month { background: var(--it-bg-alt); }
.it-cal-cell.is-other-month .it-cal-cell-day { color: var(--it-text-faint); }
.it-cal-cell.is-today .it-cal-cell-day {
  background: var(--it-brand);
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Keeps the circle inside the cell padding even when the head row is squeezed. */
  overflow: hidden;
}
.it-cal-cell.is-drop-target {
  outline: 2px dashed var(--it-brand);
  outline-offset: -2px;
  background: rgba(0,145,255,0.06);
}
.it-cal-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.it-cal-cell-day {
  font-family: var(--it-font-h);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.it-cal-cell.is-day-cell .it-cal-cell-day { font-size: 14px; }
.it-cal-add-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.it-cal-cell:hover .it-cal-add-btn,
.it-cal-add-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.it-cal-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: color-mix(in srgb, var(--pill-color, var(--it-brand)) 16%, transparent);
  border-left: 3px solid var(--pill-color, var(--it-brand));
  color: var(--it-text);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--it-radius-sm);
  cursor: grab;
  overflow: hidden;
  min-width: 0;
}
.it-cal-cell.is-day-cell .it-cal-pill {
  font-size: 13px;
  padding: 6px 10px;
  gap: 4px;
}
/* Overdue pills keep their configured `--pill-color` (status/priority/context/…)
   instead of a magenta override — the user already has the color they chose.
   To still signal "in the past", drop saturation a touch and dim the body. */
.it-cal-pill.is-overdue {
  background: color-mix(in srgb, var(--pill-color, var(--it-brand)) 8%, transparent);
  opacity: 0.75;
}
/* Virtual (projected) recurring occurrence — read-only, distinct: dashed
   border, slightly muted, plus a repeat badge on the head row. Click still
   opens the underlying real task. */
.it-cal-pill.is-virtual {
  border: 1px dashed color-mix(in srgb, var(--pill-color, var(--it-brand)) 70%, transparent);
  background: color-mix(in srgb, var(--pill-color, var(--it-brand)) 4%, transparent);
  opacity: 0.85;
  cursor: pointer;
}
.it-cal-pill-repeat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--it-text-faint);
  flex-shrink: 0;
}
.it-cal-pill-repeat .svg-icon { width: 12px; height: 12px; }
/* Recurring toggle button in calendar toolbar */
/* Recurring toggle — compact icon-only button with a clear selected state.
   Active uses the app's brand tint (not Obsidian's accent purple), which reads
   well in both light and dark themes via color-mix over the current surface. */
.it-cal-recurring-toggle { flex: 0 0 auto; }
.it-cal-recurring-toggle.is-active {
  color: var(--it-brand);
  background: color-mix(in srgb, var(--it-brand) 16%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--it-brand) 45%, transparent) !important;
}
.it-cal-recurring-toggle.is-active:hover {
  background: color-mix(in srgb, var(--it-brand) 24%, transparent) !important;
}
/* Title row — type icon, optional ID prefix, then the title itself. Lays out
   horizontally and truncates the title with ellipsis so month-cell pills stay
   single-line by default. */
.it-cal-pill-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.it-cal-pill-type {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.it-cal-pill-type-icon {
  width: 12px;
  height: 12px;
}
.it-cal-cell.is-day-cell .it-cal-pill-type-icon {
  width: 14px;
  height: 14px;
}
.it-cal-pill-id {
  flex: 0 0 auto;
  color: var(--it-text-muted);
  font-family: var(--it-font-m);
  font-size: 10px;
}
.it-cal-pill-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Chip strip beneath the title — wraps so a busy task can spill into a second
   row without breaking the cell layout. Chips inherit their look from the
   shared `.it-chip` rules used by List/Board/Table, so colors and spacing stay
   identical across views. */
.it-cal-pill-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}
.it-cal-pill-fields .it-chip {
  font-size: 10px;
  padding: 1px 5px;
  line-height: 1.3;
  min-height: 0;
  height: auto;
}
.it-cal-cell.is-day-cell .it-cal-pill-fields .it-chip {
  font-size: 11px;
  padding: 2px 7px;
}
/* Pills container — mirrors the cell's column layout so spacing stays identical
   to when pills were direct children of the cell. */
.it-cal-pills {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.it-cal-more {
  background: transparent;
  border: none;
  /* Override Obsidian's default button min-height/box so this sits flush at
     text height plus a tiny bit of vertical breathing room. */
  min-height: 0;
  height: auto;
  line-height: 1.2;
  box-shadow: none;
  padding: 1px 4px;
  margin: 0;
  text-align: left;
  font-size: 11px;
  color: var(--it-text-muted);
  font-family: var(--it-font-h);
  cursor: pointer;
  border-radius: var(--it-radius-sm);
  align-self: flex-start;
  transition: background .12s ease, color .12s ease;
}
.it-cal-more:hover {
  background: var(--it-bg-alt);
  color: var(--it-text);
}
.it-cal-more.is-expanded { color: var(--it-brand); }
.it-cal-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--it-text-faint);
  font-size: 13px;
  font-family: var(--it-font-m);
}

/* ----- Calendar: compact "Overview" month -----
   Fits the full month into the viewport width like a phone's native calendar:
   no min-width (columns shrink to fit, never scroll sideways), tiny headers and
   thin colored task bars. The day-name header lives OUTSIDE the scroller so it
   never scrolls away — the user wants the header kept; only the bottom weeks
   scroll. Cell rows stretch to fill the freed height (Google-style full month).
   The whole cell is the tap target (→ day sheet); bars ignore pointer events. */
.it-cal-compact-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  flex: 0 0 auto;
  background: var(--it-border);
}
.it-cal-compact-head .it-cal-dayname {
  padding: 5px 1px;
  font-size: 9px;
  letter-spacing: .02em;
}
/* Fill the height edge-to-edge; no extra bottom gutter (the body already adds
   the mobile safe-area inset). Flex column so the grid below can grow to fill
   the scroller's height deterministically (a definite flex height makes the
   grid's `1fr` rows stretch — more reliable than a percentage min-height). */
.it-cal-scroll.is-compact-scroll {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.it-cal-grid.is-month-compact {
  /* No min-width: the 7 columns fit the screen — no horizontal scroll. The grid
     grows to fill the scroller (flex-grow) and its rows stretch evenly; the
     minmax floor only forces a vertical scroll on very short viewports (then the
     separate day-name header above stays put while the bottom weeks scroll). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(52px, 1fr);
  flex: 1 0 auto;
  border: none;
  border-radius: 0;
}
.it-cal-cell.is-compact-cell {
  min-height: 0;
  padding: 3px 2px 4px;
  gap: 2px;
  cursor: pointer;
  overflow: hidden;
}
/* Fixed-height day row: every date gets the same 14×14 slot so the today
   highlight is just a tint — it must not grow the head and push task bars down. */
.it-cal-cell.is-compact-cell .it-cal-cell-head {
  justify-content: center;
  flex: 0 0 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  align-items: center;
}
.it-cal-cell.is-compact-cell .it-cal-cell-day {
  font-size: 10px;
  line-height: 1;
  gap: 0;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.it-cal-cell.is-compact-cell.is-today .it-cal-cell-day {
  background: var(--it-brand);
  color: #fff;
  border-radius: 50%;
}
.it-cal-cell.is-compact-cell:active { background: var(--it-bg-alt); }
.it-cal-cbars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* Take the cell's remaining height (below the fixed-height day number) so the
     renderer can measure it and fit as many task bars as actually fit — more on
     a roomy desktop cell, fewer on a tight phone cell. Clip the rest. */
  flex: 1 1 auto;
  overflow: hidden;
}
.it-cal-cbar {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 14px;
  padding: 0 3px;
  border-radius: 3px;
  /* Background tint follows the configured calendar color (--pill-color). */
  background: color-mix(in srgb, var(--pill-color, var(--it-brand)) 22%, var(--it-bg));
  border-left: 3px solid var(--pill-color, var(--it-brand));
  /* The day cell handles taps; bars must not swallow them. */
  pointer-events: none;
}
.it-cal-cbar.is-virtual {
  background: color-mix(in srgb, var(--pill-color, var(--it-brand)) 6%, var(--it-bg));
  border-left-style: dashed;
}
.it-cal-cbar.is-overdue { opacity: .7; }
.it-cal-cbar-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* No ellipsis: the "…" eats scarce column width, so the title just clips hard
     at the column edge (per request). */
  text-overflow: clip;
  white-space: nowrap;
  font-size: 9px;
  line-height: 14px;
  color: var(--it-text);
}
.it-cal-cbar-more {
  font-size: 9px;
  line-height: 1.25;
  color: var(--it-text-muted);
  padding-left: 3px;
  pointer-events: none;
}

/* ----- Calendar: per-day sheet opened from the compact overview ----- */
.it-cal-day-modal .it-cal-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  max-height: 60vh;
  overflow: auto;
}
.it-cal-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 12px;
  border-radius: var(--it-radius-md);
  background: var(--it-bg-alt);
  border-left: 4px solid var(--pill-color, var(--it-brand));
  cursor: pointer;
}
.it-cal-day-row:active { background: color-mix(in srgb, var(--pill-color, var(--it-brand)) 14%, var(--it-bg-alt)); }
.it-cal-day-row.is-overdue { opacity: .8; }
.it-cal-day-row.is-virtual { border-left-style: dashed; }
.it-cal-day-row-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}
.it-cal-day-row-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.it-cal-day-row-title {
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.it-cal-day-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.it-cal-day-empty {
  padding: 22px 8px;
  text-align: center;
  color: var(--it-text-faint);
  font-size: 14px;
}
.it-cal-day-actions {
  margin-top: 14px;
  display: flex;
}
.it-cal-day-add {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  background: var(--it-brand);
  color: #fff;
  border: none;
  border-radius: var(--it-radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--it-font-h);
  cursor: pointer;
}
.it-cal-day-add:hover { background: color-mix(in srgb, var(--it-brand) 88%, #000); }
.it-cal-day-add .svg-icon { width: 18px; height: 18px; }

/* ----- Table view ----- */
.it-table-view {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.it-table-wrap {
  overflow: auto;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-lg);
  flex: 1;
  min-height: 0;
}
.it-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--it-font-b);
  font-size: 11px;
  min-width: 720px;
}
.it-table th {
  text-align: left;
  background: var(--it-bg);
  font-family: var(--it-font-b);
  font-size: 10px;
  font-weight: 500;
  color: var(--it-text-faint);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-bottom: 1px solid var(--it-border);
}
.it-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--it-border);
  vertical-align: middle;
  white-space: nowrap;
}
.it-table-row { cursor: pointer; }
.it-table-row:hover td { background: var(--it-bg-hover); }
.it-table-id { font-family: var(--it-font-b); font-size: 11px; color: var(--it-text-faint); }
.it-table-title { font-weight: 500; font-size: 13px; }
.it-table-title-col {
  width: 100%;
  min-width: 280px;
  max-width: 0;
  overflow: hidden;
  text-overflow: clip;
}
.it-table-title.is-done { text-decoration: line-through; color: var(--it-text-faint); }
.it-table-tags { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; overflow: hidden; }
.it-table-add-placeholder {
  display: inline-flex;
  align-items: center;
  height: 22px;
  color: var(--it-text-faint);
  font-family: var(--it-font-b);
  font-size: 11px;
  font-weight: 500;
}
.it-table-date, .it-table-num {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 4px;
  border-radius: var(--it-radius-sm);
  font-family: var(--it-font-b);
  font-size: 11px;
  font-weight: 400;
  color: var(--it-text);
}
.it-table-row:hover .it-table-date, .it-table-row:hover .it-table-num {
  border-color: var(--it-border);
  background: transparent;
}
.it-table-date:focus, .it-table-num:focus {
  border-color: var(--it-brand);
  outline: none;
  background: transparent;
}
.it-table-meta { color: var(--it-text-muted); font-size: 12px; }
.it-table-editable {
  cursor: default;
}
.it-table-editable:hover {
  background: color-mix(in srgb, var(--it-brand) 6%, var(--it-bg-hover));
}
.it-table-cf:has(.it-table-num):hover,
.it-table-cf:has(.it-cf-rating-edit):hover,
.it-table-cf:has(.it-table-progress):hover,
.it-table-cf:has(.it-cf-progress):hover,
.it-table-cf:has(.it-cf-number):hover,
.it-table-cf:has(.it-cf-money):hover {
  background: transparent;
}
.it-row-cf-cell:has(.it-cf-rating-edit):hover,
.it-row-cf-cell:has(.it-table-progress):hover,
.it-row-cf-cell:has(.it-cf-progress):hover {
  background: transparent;
}
.it-table-edit-display {
  font-family: var(--it-font-b);
  font-size: 11px;
  font-weight: 400;
  color: var(--it-text);
}
button.it-table-edit-display {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.it-table-edit-display.is-empty,
.it-table-title-text.is-empty {
  color: var(--it-text-faint);
}
.it-table-title-text {
  display: inline;
  min-width: 0;
}
.it-table-edit-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--it-brand);
  border-radius: var(--it-radius-sm);
  background: var(--it-bg);
  color: var(--it-text);
  font-family: var(--it-font-b);
  font-size: 12px;
  line-height: 1.3;
  padding: 3px 6px;
  outline: none;
}
.it-table-edit-textarea {
  min-width: 220px;
  min-height: 84px;
  resize: vertical;
  white-space: normal;
}
.it-table-edit-popover {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(240px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 8px;
}
.it-table-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.it-table-checkbox {
  accent-color: var(--it-brand);
  cursor: pointer;
}
.it-table-multi-picker .it-popover-item.is-active {
  background: color-mix(in srgb, var(--it-brand) 12%, transparent);
}
.it-table-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 118px;
  min-height: 0;
  height: auto;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--it-text);
  padding: 0;
  font-family: var(--it-font-b);
  font-size: 11px;
}
.it-table-progress-editable {
  cursor: pointer;
}
.it-table-progress:hover,
.it-table-progress:focus,
.it-table-progress:active {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.it-table-progress-track {
  position: relative;
  flex: 1 1 54px;
  min-width: 42px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--it-radius-pill);
  background: transparent;
  border: 0;
}
.it-table-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--it-brand);
}
.it-table-progress-label {
  flex: 0 0 auto;
  min-width: 34px;
  color: var(--it-text-muted);
}
.it-cf-rating-edit {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.it-cf-rating-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--it-text-faint);
  font-size: 13px;
  line-height: 1;
  padding: 2px 1px;
  cursor: pointer;
  min-width: 0;
  height: auto;
}
.it-list-view .it-cf-rating-btn,
.it-table .it-cf-rating-btn {
  font-size: 15px;
}
.it-list-view .it-cf-rating-btn {
  font-size: 20px;
  padding: 1px 2px;
}
.it-cf-rating-btn:hover,
.it-cf-rating-btn:focus,
.it-cf-rating-btn:active {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.it-list-view .it-table-progress,
.it-table .it-table-progress,
.it-list-view button.it-table-progress,
.it-table button.it-table-progress {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  min-height: 0;
}
.it-list-view .it-table-progress-track,
.it-table .it-table-progress-track,
.it-list-view .it-cf-progress-track,
.it-table .it-cf-progress-track {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.it-cf-rating-btn.is-on,
.it-cf-rating-btn:hover {
  color: var(--it-brand);
}
.it-inline-datetime {
  --it-inline-date-width: 100px;
  --it-inline-time-width: 58px;
  --it-inline-datetime-width: 158px;
  height: 22px;
  min-height: 22px;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-sm);
  background: transparent !important;
  background-color: transparent !important;
  color: var(--it-text);
  font-family: var(--it-font-b) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2;
  padding: 1px 4px;
  box-sizing: border-box;
  color-scheme: light dark;
}
.it-inline-kind-date { width: var(--it-inline-date-width); }
.it-inline-kind-time { width: var(--it-inline-time-width); }
.it-inline-kind-datetime { width: var(--it-inline-datetime-width); }
.it-inline-datetime-pair {
  --it-inline-date-width: 100px;
  --it-inline-time-width: 58px;
  --it-inline-datetime-width: 158px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: var(--it-inline-datetime-width);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.it-inline-datetime-pair .it-inline-datetime {
  flex: 0 0 auto;
}
/* Start / Due / datetime-CF pair inside the task modal. Sized to match the
   Date/Time custom-field inputs (`.it-cf-val .it-input`) rather than the dense
   list/table controls — see src/modals/task-modal.ts renderDateTimePair. */
.it-modal-datetime-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-top: 2px;
}
.it-modal-datetime-pair > .it-dtf-host { flex: 0 0 auto; }
.it-mdt {
  font-family: var(--it-font-b);
  font-size: 14px;
  line-height: 1.2;
  color: var(--it-text);
  background: transparent;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-sm);
  padding: 6px 10px;
  box-sizing: border-box;
  color-scheme: light dark;
}
.it-mdt:hover { border-color: var(--it-border); }
.it-mdt:focus {
  border-color: var(--it-brand);
  outline: none;
  background: var(--it-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--it-brand) 16%, transparent);
}
/* In the custom-fields section the pair matches the modal Start/Due controls. */
.it-cf-val .it-mdt { background: transparent; border-color: var(--it-border); }
.it-cf-val .it-mdt:focus { background: transparent; }
.it-mdt-date { width: 150px; }
.it-mdt-time { width: 104px; }
.it-time-12h .it-mdt-time { width: 120px; }
/* Trim a little on phones so the Start/Due pill never overflows a narrow modal. */
.is-mobile .it-mdt-date { width: 124px; }
.is-mobile .it-mdt-time { width: 96px; }
/* Overlay text + leading icon scaled up to match the larger field. */
.it-dtf-host > .it-mdt ~ .it-dtf-overlay {
  font-family: var(--it-font-b);
  font-size: 14px;
}
.it-modal-datetime-pair .it-dtf-icon svg { width: 15px; height: 15px; }
.it-inline-datetime:hover {
  border-color: var(--it-border);
  background: transparent !important;
  background-color: transparent !important;
}
.it-inline-datetime:focus {
  border-color: var(--it-brand);
  outline: none;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--it-brand) 16%, transparent);
}
.it-inline-datetime[type="date"],
.it-inline-datetime[type="time"] {
  border: 1px solid var(--it-border);
  background: transparent !important;
  background-color: transparent !important;
  font-family: var(--it-font-b) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}
.it-inline-datetime[type="date"]::-webkit-date-and-time-value,
.it-inline-datetime[type="time"]::-webkit-date-and-time-value {
  background: transparent !important;
  font-family: var(--it-font-b) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2;
}
.it-inline-datetime[type="date"]::-webkit-datetime-edit,
.it-inline-datetime[type="time"]::-webkit-datetime-edit {
  background: transparent !important;
  font-family: var(--it-font-b) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}
.it-inline-datetime::-webkit-calendar-picker-indicator {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  opacity: 0.72;
}

/* ---- Formatted overlay for native date/time inputs (src/ui/datetime-field.ts) ----
   Native <input type="date|time"> render in the OS locale and ignore our format
   setting, so we rebuild the chrome: a leading calendar/clock icon (which opens
   the native picker) followed by our own formatted value. The native picker
   indicator on the right is hidden; the native editable segments only reappear
   on focus (for typing). Layout is always "icon then value". */
.it-dtf-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* Hide the native value at rest (overlay shows it); reveal it for editing. */
.it-dtf-host > input {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: var(--it-text);
}
.it-dtf-host > input:focus {
  color: var(--it-text) !important;
  -webkit-text-fill-color: var(--it-text) !important;
}
.it-dtf-host > input::-webkit-date-and-time-value,
.it-dtf-host > input::-webkit-datetime-edit {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0;
}
.it-dtf-host > input:focus::-webkit-date-and-time-value,
.it-dtf-host > input:focus::-webkit-datetime-edit {
  color: var(--it-text) !important;
  -webkit-text-fill-color: var(--it-text) !important;
  opacity: 1;
}
/* Drop the native picker indicator — our leading icon replaces it. */
.it-dtf-host > input::-webkit-calendar-picker-indicator { display: none; }
/* Leading calendar/clock icon, sitting in the input's left padding. */
.it-dtf-icon {
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--it-text-muted);
  cursor: pointer;
  z-index: 1;
}
.it-dtf-icon svg { width: 13px; height: 13px; }
.it-dtf-icon:hover { color: var(--it-text); }
.it-dtf-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  /* After the leading icon; no right reserve since the native indicator is gone. */
  left: 21px;
  right: 4px;
  display: flex;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  color: var(--it-text);
}
/* Dense inline cells (list/table, and the modal start/due rows). */
.it-dtf-host > .it-inline-datetime ~ .it-dtf-overlay {
  font-family: var(--it-font-b);
  font-size: 11px;
  font-weight: 400;
}
/* Roomier modal custom-field inputs inherit their own font. */
.it-dtf-host > .it-input ~ .it-dtf-overlay { font: inherit; }
.it-dtf-host > input:focus ~ .it-dtf-overlay { display: none; }
/* The datetime pair lays out two hosts side by side; keep them from stretching. */
.it-inline-datetime-pair > .it-dtf-host { flex: 0 0 auto; }
/* 12-hour times ("02:30 PM") need more room than 24-hour ones. */
.it-time-12h .it-inline-kind-time { width: 82px; }
.it-time-12h .it-inline-datetime-pair,
.it-time-12h.it-inline-datetime-pair { --it-inline-datetime-width: 186px; width: 186px; }
.it-time-12h .it-table.is-fixed .it-inline-datetime.it-inline-kind-time { width: 82px; max-width: 100%; }
.is-mobile .it-table {
  font-size: 11px;
}
.is-mobile .it-table th {
  padding: 4px 6px;
  font-size: 9.5px;
  letter-spacing: 0.35px;
  font-weight: 500;
}
.is-mobile .it-table td {
  padding: 5px 6px;
}
.is-mobile .it-inline-datetime {
  --it-inline-date-width: 90px;
  --it-inline-time-width: 63px;
  --it-inline-datetime-width: 153px;
  height: 22px;
  min-height: 22px;
  font-size: 11px;
  padding: 1px 3px;
}
.is-mobile .it-inline-datetime-pair {
  --it-inline-date-width: 90px;
  --it-inline-time-width: 63px;
  --it-inline-datetime-width: 153px;
}
.is-mobile .it-table-date,
.is-mobile .it-table-num {
  font-family: var(--it-font-b);
  font-size: 11px;
  font-weight: 400;
}
.is-mobile .it-table-edit-display,
.is-mobile .it-table-edit-input {
  font-size: 11px;
}
.is-mobile .it-table-edit-popover {
  min-width: min(280px, calc(100vw - 32px));
}
.is-mobile .it-row-cell .it-inline-datetime,
.is-mobile .it-row-cf-cell .it-inline-datetime {
  font-size: 11px;
}
.is-mobile.it-time-12h .it-task-modal :is(.it-task-fields, .it-cf-val) .it-mdt-time,
.is-mobile.it-time-12h .it-task-modal .it-cf-val .it-inline-kind-time {
  width: calc(8ch + 38px);
  min-width: calc(8ch + 38px);
}
.is-mobile.it-time-12h .it-task-modal .it-cf-val .it-inline-kind-time {
  max-width: calc(8ch + 38px);
}
.is-mobile.it-time-12h :is(.it-row-cell, .it-row-cf-cell, .it-table td) .it-inline-kind-time {
  width: calc(8ch + 32px);
  min-width: calc(8ch + 32px);
}
.is-mobile.it-time-12h :is(.it-row-cell, .it-row-cf-cell, .it-table td) .it-inline-datetime-pair {
  --it-inline-time-width: calc(8ch + 32px);
  --it-inline-datetime-width: calc(var(--it-inline-date-width) + var(--it-inline-time-width) + 3px);
  width: var(--it-inline-datetime-width);
}
.is-mobile .it-row-meta .it-chip-meta {
  font-family: var(--it-font-b);
  font-size: 11px;
  font-weight: 500;
}
.it-table-actions { width: 40px; }
.it-table-grouprow td {
  background: var(--it-bg-alt);
  font-family: var(--it-font-h);
  font-weight: 600;
}
.it-table-group-label { margin-left: 4px; margin-right: 8px; }
.it-table-footer td {
  background: var(--it-bg-alt);
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-muted);
  font-weight: 500;
}

/* ---------- Table: fixed layout (resize / reorder / freeze) ---------- */
.it-table.is-fixed {
  table-layout: fixed;
  min-width: 0;           /* width is set inline (= sum of column widths) so
                             columns shrink/clip predictably (no max-content). */
}
.it-table.is-fixed td,
.it-table.is-fixed th { overflow: hidden; text-overflow: clip; }
.it-table .it-chip,
.it-table .it-list-ref-name,
.it-table .it-cf-location-link,
.it-table .it-chip-link-title {
  text-overflow: clip;
}
.it-table.is-fixed .it-table-title-col { width: auto; min-width: 0; max-width: none; }
.it-table.is-fixed .it-table-date,
.it-table.is-fixed .it-table-num { width: 100%; box-sizing: border-box; max-width: 100%; }
.it-table.is-fixed .it-inline-datetime.it-inline-kind-date { width: var(--it-inline-date-width); max-width: 100%; }
.it-table.is-fixed .it-inline-datetime.it-inline-kind-time { width: var(--it-inline-time-width); max-width: 100%; }
.it-table.is-fixed .it-inline-datetime.it-inline-kind-datetime { width: var(--it-inline-datetime-width); max-width: 100%; }
.it-table.is-fixed .it-inline-datetime-pair { width: var(--it-inline-datetime-width); max-width: 100%; }

.it-table th { position: relative; }
.it-th-label { display: block; overflow: hidden; text-overflow: clip; white-space: nowrap; }

/* Resize grip on the right edge of each header cell. */
.it-col-resize {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; z-index: 4;
}
.it-col-resize:hover { background: color-mix(in srgb, var(--it-brand) 45%, transparent); }
body.it-col-resizing { cursor: col-resize; user-select: none; }

/* Column reorder drag feedback. */
.it-table-colhead-row th[draggable="true"] { cursor: grab; }
.it-table-colhead-row th.is-dragging-col { opacity: 0.5; }
.it-table-colhead-row th.is-col-drop { box-shadow: inset 2px 0 0 0 var(--it-brand); }

/* Selection column. */
.it-table-sel-col { width: 34px; text-align: center; padding-left: 0; padding-right: 0; }
.it-table-rowsel, .it-table-selall { cursor: pointer; accent-color: var(--it-brand); }

/* Frozen columns (sticky on horizontal scroll): select + title. */
.it-table-frozen-sel { position: sticky; left: 0; z-index: 3; background: var(--it-bg); }
.it-table-frozen { position: sticky; left: 34px; z-index: 2; background: var(--it-bg); }
/* `.it-table th { position: relative }` (added for the resize grip) outranks the
   sticky above on header cells — re-assert sticky for frozen headers. Sticky is
   itself a positioning context, so the absolute grip still anchors correctly. */
.it-table th.it-table-frozen-sel { position: sticky; }
.it-table th.it-table-frozen { position: sticky; }
/* Mobile: the title + select columns scroll horizontally with the rest of the
   table instead of staying frozen on the left (desktop keeps them frozen). */
.is-mobile .it-table-frozen,
.is-mobile .it-table-frozen-sel,
.is-mobile .it-table th.it-table-frozen,
.is-mobile .it-table th.it-table-frozen-sel {
  position: static;
}
/* Non-frozen data cells: establish an explicit stacking context at z-index 0
   so that any positioned children (links, chips) cannot outrank the sticky
   frozen columns (z-index 2/3) when the row is hovered. */
.it-table td:not(.it-table-frozen):not(.it-table-frozen-sel) {
  position: relative;
  z-index: 0;
}
.it-table-row:hover .it-table-frozen,
.it-table-row:hover .it-table-frozen-sel {
  /* Paint an opaque background: solid base + the (possibly translucent)
     hover tint on top via background-image so content behind never bleeds
     through the sticky column even when --it-bg-hover is semi-transparent. */
  background-color: var(--it-bg);
  background-image: linear-gradient(var(--it-bg-hover), var(--it-bg-hover));
}

/* Selected rows. */
.it-table-row.is-selected td { background: color-mix(in srgb, var(--it-brand) 14%, var(--it-bg)); }
.it-table-row.is-selected .it-table-frozen,
.it-table-row.is-selected .it-table-frozen-sel { background: color-mix(in srgb, var(--it-brand) 14%, var(--it-bg)); }

/* ---------- Column calculations: Table footer + group summary rows ---------- */
/* Grand footer: sticky to the bottom of the table scroll area. */
.it-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--it-bg-alt);
  border-top: 1px solid var(--it-border);
  text-align: center;
}
.it-table tfoot td.it-table-frozen { left: 34px; z-index: 5; background: var(--it-bg-alt); }
.it-table tfoot td.it-table-frozen-sel { left: 0; z-index: 6; background: var(--it-bg-alt); }
.it-table-footer td.it-calc-clickable { cursor: pointer; }
/* Opaque hover — the footer is sticky, so a translucent hover (the theme's
   --it-bg-hover) would let scrolling rows bleed through it. */
.it-table-footer td.it-calc-clickable:hover,
.it-table-footer td.it-calc-clickable.it-table-frozen:hover { background: color-mix(in srgb, var(--it-brand) 10%, var(--it-bg-alt)); }
/* Faint "Calculate" prompt on hover over an unconfigured footer cell. */
.it-table-footer td.is-empty { color: var(--it-text-faint); }
.it-table-footer td.is-empty:hover::after {
  content: "Calculate";
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--it-text-muted);
}
.it-table-footer td.is-empty:hover .it-calc-sigma { display: none; }

/* Per-group summary row inside the body. */
.it-table-summary-row td {
  background: color-mix(in srgb, var(--it-brand) 5%, var(--it-bg-alt));
  font-family: var(--it-font-m);
  font-size: 12px;
  color: var(--it-text-muted);
  border-bottom: 1px solid var(--it-border);
  text-align: center;
}
.it-table-summary-row .it-table-frozen,
.it-table-summary-row .it-table-frozen-sel { background: color-mix(in srgb, var(--it-brand) 5%, var(--it-bg-alt)); }
/* Title column keeps its Σ / row-label on the left in both footer and summaries. */
.it-table tfoot td.it-table-title-col,
.it-table-summary-row td.it-table-title-col { text-align: left; }

/* Shared calc cell content (footer + summaries, List + Table). */
.it-calc-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--it-text-faint);
  line-height: 1.1;
}
.it-calc-val {
  display: block;
  font-weight: 400;
  color: var(--it-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.it-calc-sigma { color: var(--it-text-faint); font-weight: 400; }

/* ---------- Column calculations: List summary rows ---------- */
/* Per-group summary: continues (and closes) the group's card. */
.it-list-grid > .it-list-summary.is-group {
  border-left: 1px solid var(--it-border);
  border-right: 1px solid var(--it-border);
  border-bottom: 1px solid var(--it-border);
  border-bottom-left-radius: var(--it-radius-lg);
  border-bottom-right-radius: var(--it-radius-lg);
  background: color-mix(in srgb, var(--it-brand) 4%, var(--it-bg-alt));
}
/* Grand total: a standalone card sitting below all groups, after a gap. */
.it-list-grid > .it-list-summary.is-grand {
  margin-top: 14px;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-lg);
  background: color-mix(in srgb, var(--it-brand) 6%, var(--it-bg-alt));
}
.it-list-summary-cell {
  padding: 6px 10px;
  min-width: 0;
  font-family: var(--it-font-m);
  font-size: 12px;
  text-align: center;
}
/* Title column keeps its Σ / row-label on the left (it's wide). */
.it-list-summary-cell.it-list-summary-title { text-align: left; }
.it-list-summary.is-grand .it-list-summary-cell.it-calc-clickable { cursor: pointer; border-radius: var(--it-radius-sm); }
.it-list-summary.is-grand .it-list-summary-cell.it-calc-clickable:hover { background: var(--it-bg-hover); }
.it-list-summary.is-grand .it-list-summary-cell.is-empty { color: var(--it-text-faint); }
.it-list-summary.is-grand .it-list-summary-cell.is-empty:hover::after {
  content: "Calculate";
  font-size: 10px;
  color: var(--it-text-muted);
}
.it-list-summary.is-grand .it-list-summary-cell.is-empty:hover .it-calc-sigma { display: none; }

/* ---------- Column calculations: config popover ---------- */
.it-popover .it-calc-menu { min-width: 220px; max-width: 280px; }
.it-calc-menu-title {
  font-family: var(--it-font-h);
  font-weight: 700;
  font-size: 12px;
  color: var(--it-text);
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--it-border);
  margin-bottom: 6px;
}
.it-calc-opts { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.it-popover .it-calc-opt {
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  border-radius: var(--it-radius-sm);
  font-size: 12px;
  color: var(--it-text);
  cursor: pointer;
}
.it-popover .it-calc-opt:hover { background: var(--it-bg-hover); }
.it-popover .it-calc-opt.is-active {
  background: color-mix(in srgb, var(--it-brand) 16%, transparent);
  color: var(--it-brand);
  font-weight: 600;
}
.it-calc-params { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.it-calc-params .it-input { width: 100%; box-sizing: border-box; }
.it-calc-param-label { font-size: 10px; color: var(--it-text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.it-calc-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--it-border);
}

/* ---------- Table bulk-edit bar ---------- */
.it-bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; margin-bottom: 8px; flex: 0 0 auto;
  border-radius: var(--it-radius-md);
  background: color-mix(in srgb, var(--it-brand) 10%, var(--it-bg));
  border: 1px solid color-mix(in srgb, var(--it-brand) 30%, transparent);
}
.it-bulk-count { font-weight: 700; font-size: 12px; color: var(--it-brand); margin-right: 4px; }
.it-secondary-btn.is-danger:hover {
  color: var(--it-danger, #e53935);
  border-color: color-mix(in srgb, var(--it-danger, #e53935) 50%, transparent);
  background: color-mix(in srgb, var(--it-danger, #e53935) 8%, transparent);
}

/* ----- Task Modal ----- */
.it-task-modal .modal {
  max-width: 880px;
  width: 90vw;
}
.it-task-modal .modal-content { padding: 0; }
.it-task-cover {
  position: relative;
  height: 120px;
  margin-bottom: 12px;
  background-size: cover;
  background-position: center;
  border-radius: var(--it-radius-lg);
}
/* Cover hover controls (Change / Remove) */
.it-task-cover-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .12s ease;
}
.it-task-cover:hover .it-task-cover-actions { opacity: 1; }
.it-cover-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--it-radius-md);
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.it-cover-btn:hover { background: rgba(0,0,0,.72); }
/* Cover source popover */
.it-popover .it-cover-menu { min-width: 240px; max-width: 280px; }
.it-popover .it-cover-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: none; background: transparent; border-radius: var(--it-radius-sm);
  font-size: 13px; color: var(--it-text); cursor: pointer; text-align: left;
}
.it-popover .it-cover-menu-item:hover { background: var(--it-bg-hover); }
.it-cover-menu-item.it-cover-menu-remove { color: var(--it-danger, #e53935); }
.it-cover-menu-ic .svg-icon { width: 15px; height: 15px; }
.it-cover-menu-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--it-text-faint); margin: 8px 4px 4px; }
.it-cover-menu-empty { font-size: 12px; color: var(--it-text-muted); padding: 2px 8px 4px; }
.it-cover-menu-atts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 2px; }
.it-cover-menu-att {
  height: 52px; border: 1px solid var(--it-border); border-radius: var(--it-radius-sm);
  background-size: cover; background-position: center; cursor: pointer; padding: 0;
}
.it-cover-menu-att:hover { border-color: var(--it-brand); }
.it-cover-menu-url { display: flex; gap: 6px; padding: 0 2px; }
.it-cover-menu-url .it-input { flex: 1 1 auto; min-width: 0; }
.it-task-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0px 20px 0;
}
.it-task-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Reserve room for Obsidian's close (×) button at the modal top-right. */
  padding-right: 20px;
}
.it-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-family: var(--it-font-m);
  font-size: 12.5px;
  color: var(--it-text-muted);
  margin-bottom: 0px;
  margin-top: 16px;
}
.it-breadcrumb-sep {
  padding: 0 2px;
  color: var(--it-text-faint);
}
.it-breadcrumb-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.it-breadcrumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}
.it-breadcrumb-icon .svg-icon { width: 14px; height: 14px; }
.it-breadcrumb-name { color: var(--it-text-muted); }
.it-task-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.it-task-id {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-faint);
  background: var(--it-bg-alt);
  padding: 2px 8px;
  border-radius: var(--it-radius-pill);
}
.it-task-id.custom { color: var(--it-purple); background: var(--it-lavender); }
.it-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--it-font-h);
  font-size: 11px;
  font-weight: 500;
  color: var(--type-color, var(--it-text-muted));
  background: var(--it-bg-alt);
  padding: 3px 10px;
  border-radius: var(--it-radius-pill);
  text-transform: capitalize;
  border: 1px solid transparent;
}
.it-type-badge-clickable {
  cursor: pointer;
}
.it-type-badge-clickable:hover {
  border-color: color-mix(in srgb, var(--type-color, var(--it-text-muted)) 50%, transparent);
}
.it-type-icon { font-size: 12px; display: inline-flex; align-items: center; }
.it-iconish { display: inline-flex; align-items: center; line-height: 1; }
.it-iconish-svg .svg-icon { width: 14px; height: 14px; }
.it-row-type-icon { font-size: 14px; line-height: 1; }
.it-row-type-icon.it-iconish-svg .svg-icon { width: 14px; height: 14px; }
.it-card-type-icon { font-size: 13px; line-height: 1; }
.it-card-type-icon.it-iconish-svg .svg-icon { width: 13px; height: 13px; }
.it-type-icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--it-radius-sm);
  background: var(--it-bg);
  border: 1px solid var(--it-border);
  font-size: 14px;
}
.it-type-icon-preview .it-iconish-svg .svg-icon { width: 14px; height: 14px; }
.it-popover-icon.it-iconish-svg .svg-icon { width: 13px; height: 13px; }
.it-task-header-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.it-task-title-input {
  width: calc(100% - 40px);
  margin: 14px 20px 0;
  box-sizing: border-box;
  font-family: var(--it-font-h);
  font-size: 24px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--it-text);
  padding: 4px 0;
}
.it-task-title-input:focus { outline: none; border-bottom: 1px solid var(--it-brand); }

.it-task-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--it-border);
}
.it-fields-bar,
.it-task-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.it-task-field-row {
  align-items: flex-start;
  gap: 14px;
}
.it-task-date-row { gap: 18px; }
.it-task-metric-row { gap: 12px; }
.it-field-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 4px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--it-font-b);
  font-size: 13px;
  color: var(--it-text);
}
.it-field-label {
  font-family: var(--it-font-m);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--it-text-faint);
}
.it-task-fields .it-field-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--it-font-h);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  color: var(--it-text-muted);
}
.it-task-fields .it-field-label .it-cf-type-ic { margin-right: 0; }
.it-task-fields .it-input {
  background: transparent;
  border: 1px solid var(--it-border);
  padding: 6px 10px;
}
.it-task-fields .it-input:focus {
  background: transparent;
  border-color: var(--it-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--it-brand) 16%, transparent);
}
.it-task-fields .it-mdt { background: transparent; }
.it-task-fields .it-mdt:focus { background: transparent; }
.it-task-fields .it-modal-datetime-pair { margin-top: 0; }
.it-task-fields .it-mdt-date { width: 128px; }
.it-task-fields .it-mdt-time { width: 82px; }
.it-time-12h .it-task-fields .it-mdt-time { width: 96px; }
.is-mobile .it-task-fields .it-mdt-date { width: 112px; }
.is-mobile .it-task-fields .it-mdt-time { width: 76px; }
.it-compact-field-group { flex: 0 0 auto; }
.it-compact-number-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
}
.it-compact-number-input {
  width: 66px;
  min-width: 66px;
  max-width: 66px;
}
.it-compact-number-edit .it-input-suffix {
  font-size: 12px;
  color: var(--it-text-muted);
}
.it-input, .it-input-small {
  background: transparent;
  border: none;
  font: inherit;
  color: var(--it-text);
  padding: 2px 4px;
  border-radius: var(--it-radius-sm);
  min-width: 80px;
}
.it-input-small { min-width: 60px; }
.it-input:focus { background: var(--it-bg); outline: none; box-shadow: 0 0 0 2px var(--it-brand); }
.it-input-tag { min-width: 100px; }
.it-input-suffix { color: var(--it-text-faint); font-size: 11px; }

/* Visible-but-subtle horizontal divider between modal sections.
   `--it-border` alone is nearly invisible on the modal background,
   so we layer an explicit theme-aware rgba so the line actually shows. */
.it-section {
  padding: 16px 20px;
  border-bottom: 0px solid rgba(0, 0, 0, 0.10);
}
.theme-dark .it-section { border-bottom-color: rgba(255, 255, 255, 0.10); }
.it-section:last-of-type { border-bottom: none; }
/* Relationships gets more breathing room above to visually separate it
   from the subtasks/fields sections that precede it. */
.it-section-relationships { padding-top: 28px; }
.it-section-title {
  font-family: var(--it-font-h);
  font-size: 13px;
  font-weight: 600;
  color: var(--it-text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.it-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.it-section-title-row .it-section-title { margin-bottom: 0; }

.it-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Each custom field gets its own row — single-column grid so labels and
   inputs line up vertically regardless of value type. */
.it-cf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.it-cf-row { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.it-cf-name { font-family: var(--it-font-h); font-size: 13px; font-weight: 600; color: var(--it-text-muted); margin-bottom: 4px; }
.it-cf-row.is-missing .it-cf-name { color: #F44336; }
.it-cf-val { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.it-cf-val .it-input {
  background: transparent;
  padding: 6px 10px;
  border: 1px solid var(--it-border);
  width: 100%;
}
.it-cf-val .it-input[type="time"] {
  width: auto;
  min-width: 92px;
  max-width: 112px;
}
.it-cf-val .it-input:focus {
  background: transparent;
  border-color: var(--it-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--it-brand) 16%, transparent);
}

.it-labels-multi { display: flex; flex-wrap: wrap; gap: 4px; }
.it-rating { display: inline-flex; gap: 2px; }
.it-rating-star {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #FFC107;
  padding: 2px;
}
.it-progress {
  width: 100%;
  height: 8px;
  background: var(--it-bg-alt);
  border-radius: var(--it-radius-pill);
  position: relative;
}
.it-progress-bar {
  height: 100%;
  background: var(--it-brand);
  border-radius: var(--it-radius-pill);
}
.it-progress-label { font-size: 10px; color: var(--it-text-muted); margin-left: 8px; }

.it-subtasks-list { display: flex; flex-direction: column; gap: 4px; }
.it-subtask-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--it-radius-sm);
  cursor: pointer;
}
.it-subtask-row:hover { background: var(--it-bg-hover); }
.it-subtask-title { flex: 1; font-size: 13px; }
.it-subtask-remove { opacity: 0; flex-shrink: 0; }
.it-subtask-row:hover .it-subtask-remove { opacity: 1; }
.it-linked-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}
.it-linked-type-icon .svg-icon { width: 14px; height: 14px; }
.it-chip-link .it-linked-type-icon { margin-right: 2px; }
.it-empty-row, .it-empty-inline { color: var(--it-text-faint); font-style: italic; font-size: 12px; }

/* ----- Checklist ----- */
.it-checklist-title-row { display: flex; align-items: center; gap: 8px; }
.it-checklist-progress {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-faint);
  padding: 1px 6px;
  border-radius: var(--it-radius-pill);
  background: var(--it-bg-alt);
}
.it-checklist-list { display: flex; flex-direction: column; gap: 4px; }
.it-checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--it-radius-sm);
}
.it-checklist-row:hover { background: var(--it-bg-hover); }
.it-checklist-row.is-done .it-checklist-text {
  text-decoration: line-through;
  color: var(--it-text-faint);
}
.it-checklist-text {
  flex: 1;
  font-size: 13px;
  background: transparent;
  border: none;
  padding: 2px 4px;
  color: var(--it-text);
  font-family: inherit;
}
.it-checklist-text:focus {
  outline: none;
  background: var(--it-bg);
  border-radius: var(--it-radius-sm);
}
.it-checklist-remove { opacity: 0; flex-shrink: 0; }
.it-checklist-row:hover .it-checklist-remove { opacity: 1; }

/* ----- Description (read mode rendered MD) ----- */
.it-task-body-rendered {
  font-size: 14px;
  line-height: 1.55;
  padding: 8px 0 4px 0;
  max-height: 60vh;
  overflow: auto;
}
.it-task-body-rendered img { max-width: 100%; height: auto; }
.it-task-body-rendered pre { overflow: auto; }
.it-desc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

/* ----- Activity timeline ----- */
.it-activity-section .it-activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}
.it-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--it-radius-sm);
  font-size: 12px;
}
.it-activity-row:hover { background: var(--it-bg-hover); }
.it-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--it-text-muted);
  margin-top: 1px;
}
.it-activity-icon .svg-icon { width: 14px; height: 14px; }
.it-activity-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.it-activity-text { color: var(--it-text); }
.it-activity-ts { color: var(--it-text-faint); font-size: 11px; }

/* ----- Comments ----- */
.it-comments-section .it-comment-add { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.it-comments-section .it-comments-list:empty + .it-comment-add { margin-top: 0; }
.it-activity-modal .it-activity-list { max-height: 60vh; }
.it-comment-input { width: 100%; resize: vertical; font-family: var(--it-font-b); font-size: 13px; }
.it-comment-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.it-comments-list { display: flex; flex-direction: column; gap: 10px; }
.it-comment-row {
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  padding: 8px 10px;
  background: var(--it-bg-alt);
}
.it-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.it-comment-ts { font-size: 11px; color: var(--it-text-faint); flex: 1; }
.it-comment-header .it-comment-actions { justify-content: flex-end; }
.it-comment-body {
  font-size: 13px;
  line-height: 1.5;
}
.it-comment-body img { max-width: 100%; height: auto; }
.it-comment-body p:first-child { margin-top: 0; }
.it-comment-body p:last-child { margin-bottom: 0; }

/* ----- Attachments (main module + CF) ----- */
.it-attachments-list, .it-cf-attachment-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.it-attachment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--it-radius-sm);
}
.it-attachment-row:hover { background: var(--it-bg-hover); }
.it-attachment-icon {
  display: inline-flex;
  align-items: center;
  width: 16px; height: 16px;
  color: var(--it-text-muted);
}
.it-attachment-icon .svg-icon { width: 14px; height: 14px; }
.it-attachment-name {
  flex: 1;
  font-size: 13px;
  color: var(--it-text);
  cursor: pointer;
  text-decoration: none;
}
.it-attachment-name:hover { color: var(--it-brand); text-decoration: underline; }
.it-attachment-size, .it-attachment-mime {
  font-size: 11px;
  color: var(--it-text-faint);
  flex-shrink: 0;
}
.it-attachment-add { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ----- Recurring section ----- */
.it-recurring-body { display: flex; flex-direction: column; gap: 8px; }
.it-recurring-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.it-recurring-row .it-field-label { min-width: 80px; font-size: 12px; color: var(--it-text-muted); }
.it-recurring-row .it-input {
  background: transparent;
  border: 1px solid var(--it-border);
  padding: 6px 10px;
}
.it-recurring-row .it-input:focus {
  background: transparent;
  border-color: var(--it-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--it-brand) 16%, transparent);
}
.it-recurring-row .it-input-small { width: 60px; }

/* ----- CF display in views (compact, polymorphic) -----
   Force body font + normal text color so values inside `.it-chip-meta`
   (which uses mono + muted) read like the rest of the pill content. The
   chip's mono+muted style was meant for tiny meta badges like `↳ 3` and
   `⏱ 45m`, not for real field values. */
.it-cf-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--it-font-b);
  font-weight: 500;
  color: var(--it-text);
}
.it-cf-link {
  color: var(--it-brand, var(--interactive-accent));
  text-decoration: none;
  font-family: var(--it-font-b);
}
.it-cf-link:hover { text-decoration: underline; }
.it-cf-progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.it-cf-progress-track {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 6px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
}
.it-cf-progress-fill {
  display: block;
  height: 100%;
  background: var(--it-brand, var(--interactive-accent));
  border-radius: 3px;
}
.it-cf-progress-label { font-size: 11px; color: var(--it-text); font-family: var(--it-font-b); }
.it-list-view .it-row-meta .it-table-num,
.it-list-view .it-row-cf-cell .it-table-num,
.it-table .it-table-num,
.it-table .it-cf-number,
.it-table .it-cf-money,
.it-table .it-cf-rating,
.it-list-view .it-cf-number,
.it-list-view .it-cf-money,
.it-list-view .it-cf-rating {
  background: transparent !important;
  background-color: transparent !important;
}
/* In calendar pills horizontal space is tight — shrink the bar so the
   "100%" label still fits comfortably alongside it. */
.it-cal-cf-chip .it-cf-progress-track { width: 32px; }
/* CF chip label prefix ("Field name:") should match value font/color too.
   align-self: flex-start keeps the label anchored to the first line of the
   value if content ever grows taller than a single line. */
.it-board-cf-label,
.it-cal-cf-label {
  font-family: var(--it-font-b);
  color: var(--it-text);
  font-weight: 500;
  align-self: flex-start;
  flex-shrink: 0;
}
/* Board / calendar CF chips: allow height to flex (align-items: flex-start)
   so the field-name label stays pinned to the top when a value is taller
   than one line. Width-overflow is still clipped/ellipsised by .it-chip. */
.it-board-cf-chip {
  height: auto;
  min-height: 22px;
  /* Center the type icon + name + value on one baseline. */
  align-items: center;
  padding-top: 3px;
  padding-bottom: 3px;
}
.it-cal-cf-chip {
  align-items: center;
}
.it-cf-checkbox.is-checked { color: var(--it-brand); }
.it-cf-checkbox-icon { display: inline-flex; align-items: center; }
.it-cf-checkbox-icon .svg-icon { width: 14px; height: 14px; }
.it-cf-attachment { color: var(--it-text-muted); }
.it-cf-attachment-icon { display: inline-flex; }
.it-cf-attachment-icon .svg-icon { width: 12px; height: 12px; }

/* ----- CF editor in modal: linked types (URL/email/phone/location) ----- */
/* The row shows just the rendered link + edit (✏) + remove (×) buttons.
   Editing happens in a dedicated LinkedValueModal — keeps the cf row compact. */
.it-cf-linked-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.it-cf-linked-edit-btn,
.it-cf-linked-remove-btn { opacity: 0.6; }
.it-cf-linked-display:hover .it-cf-linked-edit-btn,
.it-cf-linked-display:hover .it-cf-linked-remove-btn { opacity: 1; }

/* Shared form layout for LinkedValueModal */
.it-linked-value-modal .it-modal-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.it-linked-value-modal .it-modal-form-label { font-size: 12px; color: var(--it-text-muted); font-weight: 600; }
.it-linked-value-modal .it-input { width: 100%; }

/* Location link — shown in all views as a single-line clickable link.
   Font size inherits from the surrounding cell/chip so it never overpowers
   the task title. The .it-cf-location-coords class is kept for the modal
   detail pane if ever needed but is no longer rendered in views. */
.it-cf-location-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: inherit;
  font-weight: inherit;
}

/* LocationModal coordinate inputs side-by-side */
.it-cf-coords-row { display: flex; gap: 10px; }
.it-cf-coord-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.it-cf-money-edit { display: flex; align-items: center; gap: 4px; }

/* Relationship CF — the wrapping div sits inside `.it-cf-val` which is a
   wrap-flex; force this wrap (and its inner items) to full width so the
   action row anchors to the right of the row, not to the right edge of
   the chip cluster (which shifts with chip count). */
.it-cf-tasks {
  flex: 1 1 100%;
  min-width: 0;
}
.it-cf-tasks .it-rel-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.it-cf-tasks-actions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--it-border);
  display: flex;
  justify-content: flex-end;
}

.it-rel-group { margin-bottom: 12px; }
.it-rel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.it-rel-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.it-rel-title {
  font-family: var(--it-font-h);
  font-size: 13px;
  font-weight: 600;
  color: var(--it-text);
  line-height: 1.25;
  margin-top: 1.5em;
}
.it-rel-add {
  flex-shrink: 0;
  align-self: center;
}
.it-rel-mirror-hint {
  font-family: var(--it-font-m);
  font-size: 11px;
  color: var(--it-text-faint);
  font-style: italic;
  letter-spacing: 0.02em;
}
.it-rel-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.it-chip-link {
  background: var(--it-lavender);
  color: var(--it-purple);
  border-color: transparent;
  max-width: 240px;
  /* Override base .it-chip — title is inside .it-chip-link-title which
     does its own ellipsis. Letting overflow show keeps the × clickable
     when titles are long. */
  overflow: visible;
}
/* When .it-chip-link is rendered inside a view as a CF display (not in
   the modal where users actively manage relationships), tone it down to
   match the muted look of other CF chips — avoids a bright lavender
   block that fights for attention in a dense list/board/calendar. */
.it-cf-display.it-chip-link {
  background: var(--it-bg-alt);
  color: var(--it-text);
  font-weight: normal;
}
.it-list-view .it-cf-display.it-chip-link,
.it-table .it-cf-display.it-chip-link {
  max-width: 180px;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-start;
}
.it-table .it-cf-display.it-chip-link {
  max-width: 160px;
}
.theme-dark .it-cf-display.it-chip-link {
  background: rgba(255, 255, 255, 0.06);
}
.it-chip-link-title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.it-chip-link .it-tag-remove {
  flex-shrink: 0;
}

.it-task-body {
  width: 100%;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  background: var(--it-bg);
  padding: 12px;
  font-family: var(--it-font-b);
  font-size: 13px;
  color: var(--it-text);
  resize: vertical;
  min-height: 200px;
}
.it-task-body:focus { outline: none; border-color: var(--it-brand); box-shadow: 0 0 0 3px rgba(0,145,255,.1); }

.it-task-footer {
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  font-family: var(--it-font-m);
  font-size: 10px;
  color: var(--it-text-faint);
  border-top: 1px solid var(--it-border);
}

/* ----- Modals (create) ----- */
.it-modal-form { display: flex; flex-direction: column; gap: 12px; }
.it-modal-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--it-font-h);
  font-size: 16px;
  border-radius: var(--it-radius-md);
  border: 1px solid var(--it-border);
  background: var(--it-bg);
  color: var(--it-text);
}
.it-modal-input:focus { outline: none; border-color: var(--it-brand); box-shadow: 0 0 0 3px rgba(0,145,255,.1); }

.it-picker-row { display: flex; flex-direction: column; gap: 6px; }
.it-picker-label {
  font-family: var(--it-font-m);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--it-text-muted);
}
.it-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.it-picker-cell {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--it-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--it-radius-md);
  cursor: pointer;
  font-size: 18px;
}
.it-picker-cell:hover { background: var(--it-bg-hover); }
.it-picker-cell.is-active { border-color: var(--it-brand); }
.it-picker-color {
  width: 28px; height: 28px;
  border-radius: var(--it-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.it-picker-color.is-active { border-color: var(--it-text); }

.modal-button-container {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ----- Mobile ----- */
@media (max-width: 700px) {
  .it-topbar { padding: 8px 10px; gap: 6px; }
  .it-topbar-breadcrumb { font-size: 13px; }
  .it-view-tabs { padding: 2px; }
  .it-view-tab { padding: 6px 8px; font-size: 12px; }
  .it-view-tab span:not(.it-view-tab-icon) { display: none; }
  .it-search-wrap { flex: 1; min-width: 110px; }
  .it-search { min-width: 0; flex: 1; }
  .it-secondary-btn { font-size: 12px; height: 28px; padding: 0 9px; }
  /* NB: control labels are collapsed to icons by the topbar's width observer
     (.it-topbar.is-compact), based on the actual content-area width — not a
     media query, which in Obsidian reflects the whole window (incl. side
     panels) and mis-fires. So no @media label-hiding here. */
  .it-main-body { padding: 12px; }
  .it-cal-cell { min-height: 70px; padding: 4px; }
  .it-cal-cell-day { font-size: 11px; }
  .it-cal-toolbar { flex-wrap: wrap; gap: 8px; }
  .it-cal-toolbar-nav { flex: 1 1 100%; justify-content: center; }
  .it-cal-month { min-width: 0; font-size: 15px; flex: 1; }
  .it-cal-period-tabs { flex: 1 1 100%; }
  .it-cal-period-tab { flex: 1; padding: 6px 8px; font-size: 12px; }
  /* Week on mobile: keep the 7-column structure (consistent with Month), but
     shrink cells so the user doesn't need a horizontal scrollbar. */
  .it-cal-grid.is-week { grid-template-rows: auto minmax(220px, 1fr); }
  .it-cal-cell.is-week-cell { min-height: 220px; padding: 4px; }
  .it-cal-cell.is-day-cell { min-height: 360px; padding: 10px; }
  .it-cal-cell.is-day-cell .it-cal-cell-day { font-size: 13px; }
  .it-board-col { flex-basis: 220px; }
  .it-fields-bar { gap: 6px; padding: 12px; }
  .it-cf-grid { grid-template-columns: 1fr; }
  .it-task-title-input {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    font-size: 20px;
    margin: 12px 14px 0;
  }
  .it-section { padding: 12px 14px; }
}

/* =====================================================================
   Mobile (Obsidian Android / iOS). Every rule below is scoped to
   `.is-mobile` / `body.is-mobile`, so the desktop layout is never touched.
   Goals: (1) nothing hidden behind Obsidian's bottom navbar / the OS gesture
   bar, (2) hover-only controls reachable on touch, (3) comfortable tap sizes.
   ===================================================================== */

/* Real bottom inset = whichever is larger: the user's manual offset (kept as a
   floor so older builds never regress) OR the actual Obsidian mobile navbar
   height + the OS safe-area inset (gesture bar / home indicator) + a small gap.
   `--mobile-navbar-height` / `--navbar-height` / `--safe-area-inset-bottom`
   are provided by Obsidian; `env()` is the platform fallback. */
body.is-mobile {
  --it-mobile-safe-bottom: max(
    var(--inventtasks-mobile-bottom, 48px),
    calc(
      max(var(--mobile-navbar-height, 0px), var(--navbar-height, 0px))
      + max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px))
      + 6px
    )
  );
  /* Top inset = the OS status bar (clock / battery / signal). Obsidian exposes
     --safe-area-inset-top; env() is the platform fallback. Used to push the
     embedded explorer drawer below the status bar (it's pinned to the very top
     of the viewport, so without this its header sits under those icons). */
  --it-mobile-safe-top: max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
}

/* Primary lever: every full-height view (list / board / calendar / table /
   gantt / timeline) renders inside .it-main-body, so reserving space here lifts
   their content — and the bottom "+ Add" / footer rows — above the system bar. */
.is-mobile .it-main-body {
  padding-bottom: var(--it-mobile-safe-bottom);
}

/* The embedded sidebar drawer (.it-sidebar-wrap) is pinned to the viewport
   (inset bottom: 0), so its last tree rows need clearance above the system bar.
   The docked navigator (.inventtasks-sidebar-leaf) lives in Obsidian's own
   left/right sidebar, which already reserves room for its bottom tab switcher
   (File explorer / Search / Tags …); adding our offset there only leaves a dead
   gap below the content, so it is intentionally NOT padded here. */
.it-layout.is-mobile .it-sidebar-wrap {
  padding-bottom: var(--it-mobile-safe-bottom);
  /* …and clearance at the TOP: the drawer is absolutely pinned to the viewport
     top (inset: 0 …), so its header (workspace name + Docs / settings icons)
     would otherwise sit under the OS status bar. Only the embedded "Inside the
     InventTasks view" drawer needs this — the docked navigator lives in
     Obsidian's own panel, which already clears the status bar. */
  padding-top: var(--it-mobile-safe-top);
}

/* --- Reveal hover-only controls (no hover on touch → otherwise unreachable). */
.is-mobile .it-row-actions,
.is-mobile .it-tree-actions,
.is-mobile .it-cal-add-btn,
.is-mobile .it-task-cover-actions,
.is-mobile .it-subtask-remove,
.is-mobile .it-checklist-remove,
.is-mobile .it-doc-page-more {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Favorite reorder arrows (↑/↓) are the touch alternative to drag — show them. */
.is-mobile .it-tree-actions-reorder { display: inline-flex !important; }
/* The drag handle relies on HTML5 drag (doesn't work on touch) — hide it. */
.is-mobile .it-drag-handle { display: none !important; }

/* --- Touch targets: keep dropdown / context-menu options comfortably tappable. */
.is-mobile .it-popover-item { min-height: 40px; }
.is-mobile .it-ctx-menu .it-popover-item {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* --- Topbar controls: on narrow screens the controls were getting squeezed
   next to the breadcrumb and overflowing off the right edge instead of
   wrapping. Force them onto their own full-width row (flex-basis:100% in the
   already-wrapping .it-topbar), allow that row to shrink (min-width:0), and let
   the buttons wrap within it. */
.is-mobile .it-topbar-controls {
  flex: 1 1 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 6px;
}

/* --- Task modal header: on mobile, stack the top row vertically and put the
   action icons (cover / activity / open / move / delete) on their OWN row
   ABOVE the id row, both left-aligned. Intentionally different from desktop
   (single row, actions right). `order:-1` lifts the actions above the id row. */
.is-mobile .it-task-header-top {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.is-mobile .it-task-header-actions {
  order: -1;
  flex-basis: auto;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* --- Auto-hide chrome on scroll (mobile only): scrolling down through the
   content slides the topbar + views bar up off the top so .it-main-body gets
   the full screen height; scrolling back up brings them down again. The header
   is collapsed out of the flex column via a negative margin-top on the topbar
   equal to the measured header height (--it-chrome-h, set in JS) — this pulls
   topbar + views bar above .it-main's clipped top edge and lets .it-main-body
   (flex:1) grow from the top. Only margin-top animates → one smooth move. */
/* Drop the topbar's sticky positioning on mobile: sticky(top:0) clamps it to
   the top and ignores the negative margin, so only the (non-sticky) views bar
   was collapsing. .it-main never scrolls on mobile (it's .it-main-body that
   scrolls), so sticky is inert here anyway — relative keeps its z-index but lets
   the margin lift the topbar AND the views bar below it off the top together. */
.is-mobile .it-topbar {
  position: relative;
  transition: margin-top .2s ease;
}
.is-mobile .it-main.it-chrome-hidden .it-topbar {
  margin-top: calc(-1 * var(--it-chrome-h, 0px));
}

/* --- Modals: on mobile the modal overlays Obsidian's navbar (so the navbar
   itself can't hide the modal's buttons); the only genuine overlap is the OS
   home indicator. Pad the scroll content by just that safe-area inset (0 on
   most Android) — enough to clear the indicator without leaving a big empty
   gap. The plugin's footers scroll with the content, so this covers them too. */
.is-mobile .modal .modal-content {
  padding-bottom: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

/* ----- Config modal (Space/Folder/List/Workspace settings) ----- */
.it-config-modal .modal { max-width: 880px; width: 92vw; }
.it-config-modal .modal-content { padding: 16px 20px; }
.it-config-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--it-bg-alt);
  border-radius: var(--it-radius-md);
  padding: 3px;
  margin-bottom: 16px;
}
.it-config-tab {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-family: var(--it-font-h);
  font-size: 13px;
  font-weight: 500;
  color: var(--it-text-muted);
  border-radius: var(--it-radius-sm);
  cursor: pointer;
}
.it-config-tab:hover { background: var(--it-bg-hover); color: var(--it-text); }
.it-config-tab.is-active {
  background: var(--it-bg);
  color: var(--it-brand);
  box-shadow: var(--it-shadow-1);
}
.it-config-body {
  max-height: 60vh;
  overflow: auto;
  padding-right: 8px;
}
.it-config-body h3 {
  font-family: var(--it-font-h);
  font-size: 14px;
  font-weight: 700;
  margin: 14px 0 8px;
  color: var(--it-text);
}
.it-config-body h4 {
  font-family: var(--it-font-h);
  font-size: 12px;
  font-weight: 600;
  margin: 12px 0 6px;
  color: var(--it-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Section heading row + per-section "Reset to inherited" control (sub-levels) */
.it-config-body .it-cfg-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
}
.it-config-body .it-cfg-section-head h3 { margin: 0; }
.it-config-body .it-cfg-reset-btn {
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 3px 9px;
  font-family: var(--it-font-h);
  font-size: 11px;
  font-weight: 500;
  color: var(--it-text-muted);
  background: transparent;
  border: 1px solid var(--it-border);
  border-radius: 999px;
  cursor: pointer;
}
.it-config-body .it-cfg-reset-btn .svg-icon { width: 13px; height: 13px; }
.it-config-body .it-cfg-reset-btn:hover:not(:disabled) {
  color: var(--it-text);
  border-color: var(--it-text-muted);
  background: var(--it-bg-alt);
}
.it-config-body .it-cfg-reset-btn:disabled { opacity: .4; cursor: default; }

/* Whole-level reset zone in the General tab (sub-levels only) */
.it-config-body .it-cfg-danger-zone {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--it-border);
}
.it-config-body .it-cfg-danger-zone h4 {
  color: var(--it-danger, #e53935);
  margin-top: 0;
}
.it-config-body .it-cfg-danger-zone .it-btn-danger {
  background: var(--it-danger, #e53935);
  color: #fff;
  margin-top: 4px;
}
.it-config-body .it-cfg-danger-zone .it-btn-danger:hover:not(:disabled) { background: #c62828; }
.it-config-body .it-cfg-danger-zone .it-btn-danger:disabled {
  opacity: .45;
  cursor: default;
  background: var(--it-danger, #e53935);
}

.it-cfg-list { display: flex; flex-direction: column; gap: 6px; }
.it-cfg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--it-bg-alt);
  border-radius: var(--it-radius-md);
}
.it-cfg-row-block { flex-wrap: wrap; }
.it-cfg-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
/* Reorder arrows in config rows — side-by-side, comfortably sized so they
   match the rest of the row buttons (Edit / Delete / etc) visually. */
.it-cfg-row-moves { display: inline-flex; flex-direction: row; gap: 2px; flex-shrink: 0; }
.it-cfg-row-moves .it-icon-btn {
  padding: 4px 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.it-cfg-row-moves .svg-icon { width: 14px; height: 14px; }
.it-cfg-swatch {
  width: 18px;
  height: 18px;
  border-radius: var(--it-radius-sm);
  flex: 0 0 auto;
  cursor: pointer;
  border: 1px solid var(--it-border);
}
.it-cfg-row-tag {
  font-family: var(--it-font-m);
  font-size: 10px;
  color: var(--it-text-faint);
  margin-left: auto;
}
.it-input-inline {
  background: var(--it-bg);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-sm);
  padding: 4px 8px;
  font-family: var(--it-font-b);
  font-size: 13px;
  color: var(--it-text);
  min-width: 100px;
}
.it-input-inline:focus { border-color: var(--it-brand); outline: none; box-shadow: 0 0 0 2px rgba(0,145,255,0.15); }
.it-input-inline-mini { min-width: 60px; max-width: 110px; font-family: var(--it-font-m); font-size: 11px; }
.it-cfg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Statuses */
.it-cfg-set {
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  padding: 12px;
  margin-bottom: 12px;
}
.it-cfg-set-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.it-cfg-set-name { flex: 1; font-weight: 600; }
.it-cfg-status-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.it-cfg-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--it-bg);
  border-radius: var(--it-radius-sm);
  border: 1px solid var(--it-border);
}
.it-chip-mini {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  background: var(--it-bg-alt);
  color: var(--it-text-muted);
  border: 1px solid var(--it-border);
}
.it-chip-mini.is-active {
  background: var(--it-lavender);
  color: var(--it-purple);
  border-color: var(--it-purple);
}
/* Status-row "Default" / "Set default" toggle — fixed width and centered
   so the chip occupies the same horizontal slot regardless of state. The
   inherited `.it-chip { max-width: 200px; overflow: hidden; text-overflow:
   ellipsis }` was clipping "Set default" to "Set defa…"; override here. */
.it-cfg-status-row .it-chip-mini {
  flex-shrink: 0;
  width: 92px;
  max-width: 92px;
  padding: 0 10px;
  justify-content: center;
  overflow: visible;
  text-overflow: clip;
  font-size: 12px;
}

/* Custom field editor */
.it-cfg-field {
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.it-cfg-field-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.it-cfg-field-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--it-border);
}
.it-cfg-field-body .setting-item {
  padding: 6px 0;
  border-top: none;
}

/* View defaults sub-tabs */
.it-config-subtabs {
  display: flex;
  gap: 4px;
  margin: 12px 0;
}
.it-config-subtab {
  background: var(--it-bg);
  border: 1px solid var(--it-border);
  padding: 5px 12px;
  border-radius: var(--it-radius-pill);
  font-family: var(--it-font-h);
  font-size: 12px;
  font-weight: 500;
  color: var(--it-text-muted);
  cursor: pointer;
}
.it-config-subtab:hover { color: var(--it-text); }
.it-config-subtab.is-active {
  background: var(--it-brand);
  color: #fff;
  border-color: var(--it-brand);
}

.it-cfg-fields-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.it-chip-toggle {
  background: var(--it-bg-alt);
  border: 1px solid var(--it-border);
  color: var(--it-text-muted);
  cursor: pointer;
}
.it-chip-toggle.is-active {
  background: color-mix(in srgb, var(--it-brand) 15%, transparent);
  border-color: var(--it-brand);
  color: var(--it-brand);
}
.it-chip-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.it-cfg-help {
  background: var(--it-lavender);
  color: var(--it-purple);
  padding: 8px 12px;
  border-radius: var(--it-radius-sm);
  font-size: 12px;
  margin: 8px 0;
}
.theme-dark .it-cfg-help { background: rgba(102,71,240,.16); color: #cdb8ff; }
.it-cfg-preview {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px dashed var(--it-border);
  border-radius: var(--it-radius-md);
  background: var(--it-bg-alt);
}
.it-cfg-preview-label {
  font-family: var(--it-font-m);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--it-text-faint);
  margin-bottom: 6px;
}

/* Board card description preview + type icon */
.it-card-type {
  font-size: 13px;
  margin-right: 2px;
}
.it-card-desc-preview {
  font-size: 11px;
  color: var(--it-text-muted);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
}

/* List view meta chips */
.it-chip-meta {
  background: transparent;
  color: var(--it-text-muted);
  border-color: transparent;
  font-family: var(--it-font-m);
  font-size: 11px;
  font-weight: 500;
}

/* Picker rows in config modal */
.it-picker-row-with-input {
  display: flex;
  gap: 8px;
  align-items: center;
}

.it-popover-sep {
  height: 1px;
  background: var(--it-border);
  margin: 4px 0;
}
.it-popover-footer-item {
  color: var(--it-purple);
  font-weight: 500;
}

/* ----- Settings tab ----- */
.workspace-leaf-content[data-type="inventtasks-main"] .view-content {
  padding: 0;
}

/* Helpful for icon span */
.inventtasks-icon { display: inline-flex; }

/* ===== Drag handles ===== */
.it-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  cursor: grab;
  color: var(--it-text-muted);
  transition: opacity 0.15s;
  margin-right: 2px;
}
.it-tree-row:hover .it-drag-handle { opacity: 1; }
.it-drag-handle:active { cursor: grabbing; }
.it-tree-row.is-dragging {
  opacity: 0.4;
  pointer-events: none;
}
.it-tree-row.is-drag-over {
  box-shadow: 0 -2px 0 0 var(--it-brand) inset;
  background: rgba(0,145,255,.06);
}

/* ===== Context menu extras ===== */
.it-ctx-item-danger,
.it-popover .it-popover-item.it-ctx-item-danger {
  color: var(--it-danger, #e53935);
}
.it-ctx-item-danger:hover,
.it-popover .it-popover-item.it-ctx-item-danger:hover {
  background: rgba(229,57,53,.1);
  color: var(--it-danger, #e53935);
}

/* ===== Move modal ===== */
.it-move-modal {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.it-move-modal-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 10px;
  font-size: 13px;
  color: var(--it-text);
  border-bottom: 1px solid var(--it-border);
  background: var(--it-bg-soft, var(--it-bg-hover));
}
.it-move-modal-banner-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.it-move-modal-banner-name {
  font-weight: 600;
  color: var(--it-text);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-move-modal-arrow {
  color: var(--it-text-faint);
  margin: 0 2px;
  font-size: 14px;
}
.it-move-modal-from {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--it-text-muted);
}
.it-move-modal-from .it-move-modal-banner-icon { font-size: 14px; }
.it-move-modal-from-sep {
  color: var(--it-text-faint);
  padding: 0 2px;
}
.it-move-modal-from-name {
  color: var(--it-text-muted);
}
.it-move-modal-section-label {
  padding: 12px 16px 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--it-text-muted);
}
.it-move-modal-search-wrap {
  padding: 0 16px 8px;
}
.it-move-modal-search {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--it-radius);
  border: 1.5px solid var(--it-border);
  background: var(--it-bg-card);
  color: var(--it-text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.it-move-modal-search:focus { border-color: var(--it-brand); }
.it-move-modal-empty {
  padding: 16px;
  text-align: center;
  color: var(--it-text-muted);
  font-size: 13px;
}
.it-move-modal-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 8px;
  max-height: 380px;
  overflow-y: auto;
}
.it-move-modal-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.it-move-modal-group:first-child { margin-top: 0; }
.it-move-modal-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--it-text-muted);
}
.it-move-modal-group-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.it-move-modal-group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-move-modal-subgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 0 10px;
  padding-left: 8px;
  border-left: 1.5px dashed var(--it-border);
}
.it-move-modal-subgroup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--it-text-muted);
}
.it-move-modal-subgroup-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.it-move-modal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--it-radius);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
  overflow: hidden;
}
.it-move-modal-option:hover { background: var(--it-bg-hover); }
.it-move-modal-option.is-selected {
  border-color: var(--it-brand);
  background: rgba(0,145,255,.07);
}
.it-move-modal-option.is-current {
  opacity: 0.45;
  pointer-events: none;
}
.it-move-modal-option-bar {
  width: 4px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
}
.it-move-modal-option-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.it-move-modal-option-header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.it-move-modal-option-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.it-move-modal-option-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.it-move-modal-option-name {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--it-text);
}
.it-move-modal-option-meta {
  font-size: 11px;
  color: var(--it-text-muted);
  margin-top: 2px;
}
.it-move-modal-option-detail {
  font-size: 11px;
  color: var(--it-text-muted);
}
.it-move-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--it-border);
}

/* Mobile: shrink banner text and ensure list area doesn't get cut off
   by the bottom system bar (Obsidian mobile leaves ~56px). */
@media (max-width: 600px) {
  .it-move-modal-banner-name { max-width: 180px; }
  .it-move-modal-list { max-height: 50vh; }
}

/* Live identity preview at the top of Create Space/Folder/List modals —
   shows how the row will look in the sidebar (colored swatch + icon + name). */
.it-create-modal .it-create-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--it-radius);
  border: 1.5px solid var(--it-border);
  background: var(--it-bg-soft, var(--it-bg-hover));
  margin-bottom: 12px;
}
.it-create-preview-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.it-create-preview-swatch .it-create-preview-icon { font-size: 18px; line-height: 1; }
.it-create-preview-swatch .svg-icon { width: 18px; height: 18px; }
.it-create-preview-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--it-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Task picker — picker reused from the move-modal family but rows show
   richer metadata (status pill, priority flag, ID) so the user knows
   *which* task they're linking to. */
.it-task-picker .it-move-modal-list { max-height: 420px; }
.it-task-picker-option {
  align-items: stretch;
  padding-right: 12px;
}
.it-task-picker-check {
  margin: 8px 0 0 4px;
  flex-shrink: 0;
  cursor: pointer;
}
.it-task-picker-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.it-task-picker-id {
  font-family: var(--it-font-m, ui-monospace, monospace);
  font-size: 11px;
  color: var(--it-text-faint);
  background: var(--it-bg-card);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--it-border);
}
.it-task-picker-status {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--chip-color, var(--it-text-faint));
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.it-task-picker-priority {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.it-task-picker-group-count {
  margin-left: auto;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--it-text-faint);
  padding-left: 6px;
}

/* QuickTaskModal — embed the picker inline with the rest of the form fields.
   It uses the same .it-move-modal-* visuals as the standalone move modals but
   is hosted inside a different parent, so we tighten margins/heights. */
.it-quick-task-picker {
  margin-bottom: 12px;
}
.it-quick-task-picker .it-move-modal-list {
  max-height: 200px;
  padding-top: 4px;
}
.it-quick-task-picker .it-move-modal-search-wrap {
  padding: 0 0 6px;
}

/* ===== Custom form fields ===== */
.it-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.it-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--it-text);
  letter-spacing: 0.02em;
}
.it-form-desc {
  font-size: 11.5px;
  color: var(--it-text-muted);
  margin-top: -4px;
}
.it-form-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--it-radius);
  border: 1.5px solid var(--it-border);
  background: var(--it-bg-card);
  color: var(--it-text);
  font-family: var(--it-font-s);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.it-form-input:focus { border-color: var(--it-brand); }
.it-form-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--it-radius);
  border: 1.5px solid var(--it-border);
  background: var(--it-bg-card);
  color: var(--it-text);
  font-family: var(--it-font-s);
  font-size: 13.5px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  transition: border-color 0.15s;
}
.it-form-select:focus { border-color: var(--it-brand); }

/* ===== Custom modal footer ===== */
.it-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--it-border);
}

.it-demo-choice-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.it-demo-choice .setting-item-description {
  margin: 4px 0 0;
  line-height: 1.4;
}
.it-demo-choice button {
  width: 100%;
  text-align: left;
}

/* ---------- Filter builder modal ---------- */
.modal.it-filter-modal { width: min(720px, 94vw); }

.it-filter-logic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.it-filter-conditions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.it-filter-cond {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(120px, 1fr) minmax(140px, 1.6fr) max-content;
  gap: 8px;
  align-items: center;
}

.it-filter-cond .it-filter-field,
.it-filter-cond .it-filter-op {
  min-width: 0;
  width: 100%;
}

.it-filter-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.it-filter-value > .it-input { width: 100%; min-width: 0; }
.it-filter-value > .it-input-small { width: auto; flex: 1 1 60px; }
.it-filter-between-sep { color: var(--text-muted); }

/* Field picker button — looks like the inputs but is clickable, so it can show
   the field's colored type icon (native <select> can't render icons). */
.it-filter-fieldbtn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; text-align: left; }
.it-filter-fieldbtn-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-filter-fieldbtn-caret { display: inline-flex; flex: 0 0 auto; color: var(--it-text-muted); }
.it-filter-fieldbtn-caret .svg-icon { width: 14px; height: 14px; }

.it-filter-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.it-filter-add-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Group tree — each group is a card with its own AND/OR; nested groups indent
   with an accent rail so combinations like (A AND B) OR (C AND D) read clearly. */
.it-filter-tree { display: flex; flex-direction: column; }
.it-filter-group {
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--background-secondary);
}
.it-filter-group.is-root { border: none; padding: 0; background: transparent; }
.it-filter-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.it-filter-group-body { display: flex; flex-direction: column; gap: 8px; }
.it-filter-group .it-filter-group {
  margin-top: 2px;
  border-left: 3px solid var(--interactive-accent);
}

/* Tighter stacking on narrow screens (mobile / small panels) */
@media (max-width: 600px) {
  .it-filter-cond {
    grid-template-columns: 1fr 1fr;
  }
  .it-filter-cond .it-filter-value { grid-column: 1 / -1; }
}

/* ---------- Global search (Cmd+K) ---------- */
.it-search-item { display: flex; align-items: center; gap: 10px; }
.it-search-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex: 0 0 auto; color: var(--it-text-muted); }
.it-search-icon-glyph .svg-icon { width: 16px; height: 16px; }
.it-search-body { min-width: 0; }
.it-search-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-search-sub { font-size: 11px; color: var(--it-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Trash modal ---------- */
.modal.it-trash-modal { width: min(640px, 94vw); }
.it-trash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.it-trash-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.it-trash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--it-border); border-radius: var(--it-radius-md);
}
.it-trash-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--it-text-muted); }
.it-trash-icon .svg-icon { width: 16px; height: 16px; }
.it-trash-info { flex: 1 1 auto; min-width: 0; }
.it-trash-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-trash-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.it-trash-actions .it-btn-secondary { display: inline-flex; align-items: center; gap: 4px; }
.it-trash-actions .svg-icon { width: 14px; height: 14px; }

/* ---------- Saved views bar (built on the app's .it-chip family) ---------- */
.it-views-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px 16px 6px;
  background: var(--it-bg);
}

/* A saved view is an .it-chip themed in its view-type color. The type accent
   shows on the icon + soft border; the name stays normal-text for readability. */
.it-view-chip {
  max-width: 220px;
  padding: 0 7px 0 9px;
  gap: 5px;
  font-weight: 500;
  color: var(--it-text);
  box-sizing: border-box;   /* 2px active border doesn't change the outer size */
}
/* Type-color tint AT REST. Scoped under .it-views-bar (0,2,0) so it beats
   Obsidian's default `button:not(.clickable-icon)` background (0,1,1) —
   otherwise the tint only appeared on hover. Hover keeps the same fill so
   only the chevron reacts (see below). */
.it-views-bar .it-view-chip,
.it-views-bar .it-view-chip:hover {
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 20%, transparent);
}
.it-view-chip-type { display: inline-flex; flex: 0 0 auto; color: var(--chip-color); }
.it-view-chip-type .svg-icon { width: 13px; height: 13px; }
.it-view-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-view-chip-mark { display: inline-flex; flex: 0 0 auto; color: var(--chip-color); opacity: 0.9; }
.it-view-chip-mark .svg-icon { width: 11px; height: 11px; }

/* Active view = the one currently applied: bold, saturated border so the
   selection is obvious. (Default view is marked only by its ★ icon.) */
.it-views-bar .it-view-chip.is-active {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--chip-color, var(--it-brand)) 80%, transparent);
}

/* Delicate trailing chevron — part of the label, always visible, no box. */
.it-view-chip-caret {
  display: inline-flex; flex: 0 0 auto; align-items: center;
  margin-left: 1px; padding: 1px; border-radius: 4px;
  color: var(--it-text-faint);
}
.it-view-chip-caret .svg-icon { width: 12px; height: 12px; }
/* On chip hover, only the chevron reacts — it brightens (no chip-bg change). */
.it-view-chip:hover .it-view-chip-caret { color: var(--it-text); }
.it-view-chip-caret:hover { color: var(--it-text); }

/* Utility chips ("+ Save view" / "Customize") — the dashed "add" affordance. */
.it-views-bar-action { gap: 5px; padding: 0 10px; font-weight: 500; }
.it-views-bar-action .it-view-chip-type { color: inherit; }
.it-views-bar-action .it-view-chip-type .svg-icon { width: 13px; height: 13px; }
/* Compact (set by the views-bar width observer): Save view / Customize / Export
   collapse to icons, freeing room before the saved-view chips wrap to a new
   row. Saved-view chips keep their names. */
.it-views-bar.is-compact .it-views-bar-action span:not(.it-view-chip-type) { display: none; }
.it-views-bar.is-compact .it-views-bar-action { padding: 0 8px; }
.it-views-bar-action:hover {
  color: var(--it-brand);
  border-color: color-mix(in srgb, var(--it-brand) 45%, transparent);
  background: color-mix(in srgb, var(--it-brand) 8%, transparent);
}

.it-view-name-popover { display: flex; gap: 6px; align-items: center; padding: 4px; }
.it-view-name-popover .it-input { min-width: 180px; }

/* ---------- Fields customizer popover ---------- */
.it-fields-customizer { min-width: 260px; max-width: 320px; padding: 6px; }
.it-fields-customizer-title {
  font-family: var(--it-font-h); font-weight: 600; font-size: 12px;
  text-transform: capitalize; color: var(--it-text-muted);
  padding: 4px 6px 8px;
}
.it-fields-options { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 6px; }
.it-fields-opt-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.it-fields-opt-row .it-field-label { flex: 0 0 auto; }
.it-fields-opt-row .it-input { flex: 1 1 auto; min-width: 0; max-width: 170px; }
.it-fields-opt-row .it-tri-state { flex: 0 0 auto; }
.it-fields-customizer-list { display: flex; flex-direction: column; gap: 1px; max-height: 50vh; overflow: auto; }
.it-fields-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: var(--it-radius-sm);
}
.it-fields-row:hover { background: var(--it-bg-hover); }
.it-fields-row input[type="checkbox"] { flex: 0 0 auto; }
.it-fields-label { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-fields-row .it-icon-btn-mini.is-disabled { opacity: 0.3; pointer-events: none; }
.it-fields-customizer-footer { margin-top: 8px; padding: 8px 6px 4px; border-top: 1px solid var(--it-border); }
.it-fields-default-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.it-btn-mini { padding: 3px 8px; font-size: 12px; }

/* ---------- Settings: Workspaces manager ---------- */
.it-ws-block {
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md, 8px);
  padding: 4px 12px 8px;
  margin: 10px 0;
}
.it-ws-block.is-active {
  border-color: var(--interactive-accent);
  background: color-mix(in srgb, var(--interactive-accent) 6%, transparent);
}
.it-ws-icon-prev { display: inline-flex; align-items: center; margin-right: 8px; vertical-align: middle; }
.it-ws-icon-prev .svg-icon { width: 18px; height: 18px; }
.it-ws-head-name { font-weight: 600; }
.it-ws-active-badge {
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 999px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

.it-ws-icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.it-ws-icon-btn .it-ws-icon-prev,
.it-ws-icon-btn .it-ws-icon-prev .svg-icon { width: 16px; height: 16px; }
/* Emoji used as a ribbon icon (non-Lucide) — size it like a ribbon glyph. */
.it-ribbon-emoji { font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Export / Import modals ---------- */
.it-export-modal, .it-import-modal { width: 92vw; max-width: 520px; }
/* Stack the kind options vertically so long descriptions wrap instead of
   forcing the modal to scroll horizontally. */
.it-export-seg { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.it-export-modal .it-export-seg-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  padding: 10px 12px;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  background: var(--it-bg-alt);
  cursor: pointer;
}
.it-export-modal .it-export-seg-btn.is-active {
  border-color: var(--it-brand);
  background: color-mix(in srgb, var(--it-brand) 16%, var(--it-bg-alt));
  box-shadow: inset 0 0 0 1px var(--it-brand);
}
.it-export-modal .it-export-seg-btn.is-active .it-export-seg-title { color: var(--it-brand); }
.it-export-modal .it-export-seg-btn.is-active .it-export-seg-title::after {
  content: "✓";
  margin-left: 6px;
  font-weight: 700;
}
.it-export-seg-title { display: block; width: 100%; font-weight: 600; font-size: 13px; color: var(--it-text); }
.it-export-seg-desc { display: block; width: 100%; font-size: 11px; color: var(--it-text-muted); white-space: normal; line-height: 1.35; }
.it-export-body { margin: 8px 0; }
.it-export-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.it-export-label { min-width: 130px; font-size: 13px; color: var(--it-text-muted); }
.it-export-row .it-input, .it-import-row .it-input { flex: 1 1 auto; }
.it-time-export-check { min-height: 24px; font-size: 13px; color: var(--it-text); }
.it-time-export-hint { margin: -4px 0 8px 24px; }
.it-export-error { color: var(--it-danger, #e53935); font-size: 12px; }
.it-import-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.it-import-info { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--it-border); border-radius: var(--it-radius-md); background: var(--it-bg-alt); }
.it-import-renames { max-height: 220px; overflow: auto; border: 1px solid var(--it-border); border-radius: var(--it-radius-md); padding: 6px 8px; }
.it-import-rename-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; padding: 2px 0; }
.it-import-rename-type {
  text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--it-text-faint); min-width: 46px;
}

/* ---------- Templates: "Start from" picker preview ---------- */
.it-tpl-pick-preview {
  margin: 6px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md);
  background: var(--it-bg-alt);
}
.it-tpl-pick-head { display: flex; align-items: center; gap: 8px; }
.it-tpl-pick-icon .svg-icon, .it-tpl-pick-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.it-tpl-pick-name { font-weight: 600; }
.it-tpl-pick-stats { margin-left: auto; font-size: 11px; color: var(--it-text-muted); }

/* ---------- Templates manager modal ---------- */
.it-tpl-manager { width: 92vw; max-width: 760px; }
.it-tpl-mgr { display: flex; gap: 14px; min-height: 320px; max-height: 60vh; }
.it-tpl-mgr-list {
  flex: 0 0 240px; overflow-y: auto; border: 1px solid var(--it-border);
  border-radius: var(--it-radius-md); padding: 4px;
}
.it-tpl-mgr-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--it-radius-sm); cursor: pointer; }
.it-tpl-mgr-row:hover { background: var(--it-bg-hover); }
.it-tpl-mgr-row.is-active { background: color-mix(in srgb, var(--it-brand) 14%, transparent); }
.it-tpl-mgr-row-ic .svg-icon, .it-tpl-mgr-row-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.it-tpl-mgr-row-meta { min-width: 0; }
.it-tpl-mgr-row-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-tpl-mgr-row-sub { font-size: 11px; color: var(--it-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-tpl-mgr-pane { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.it-tpl-mgr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.it-tpl-mgr-head-ic .svg-icon, .it-tpl-mgr-head-ic { width: 22px; height: 22px; flex: 0 0 auto; }
.it-tpl-mgr-head-name { font-family: var(--it-font-h); font-weight: 700; font-size: 16px; }
.it-tpl-mgr-head-sub { font-size: 12px; color: var(--it-text-muted); }
.it-tpl-mgr-created { font-size: 11px; color: var(--it-text-faint); margin: 4px 0 10px; }
.it-tpl-mgr-tree-title { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--it-text-faint); margin: 6px 0; }
.it-tpl-tree { font-size: 12px; }
.it-tpl-tree-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--it-text); }
.it-tpl-tree-ic .svg-icon, .it-tpl-tree-ic { width: 13px; height: 13px; color: var(--it-text-muted); }
.it-tpl-tree-muted { color: var(--it-text-faint); }
@media (max-width: 600px) {
  .it-tpl-mgr { flex-direction: column; max-height: none; }
  .it-tpl-mgr-list { flex: 0 0 auto; max-height: 200px; }
}

/* ---------- Templates: element selector (Save & Apply) ---------- */
.it-tpl-modal { width: 92vw; max-width: 560px; }
.it-tpl-sel { margin-top: 8px; }
.it-tpl-sel-title { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--it-text-faint); margin: 6px 0 4px; }
.it-tpl-sel-aspects { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0 8px; }
.it-tpl-sel-aspect { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.it-tpl-sel-aspect input { accent-color: var(--it-brand); }
.it-tpl-sel-tree {
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--it-border); border-radius: var(--it-radius-md);
  padding: 6px 8px; background: var(--it-bg-alt);
}
.it-tpl-sel-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; }
.it-tpl-sel-row input { accent-color: var(--it-brand); flex: 0 0 auto; }
.it-tpl-sel-row.is-disabled { opacity: .45; }
.it-tpl-sel-ic .svg-icon, .it-tpl-sel-ic { width: 13px; height: 13px; color: var(--it-text-muted); flex: 0 0 auto; }

.it-tpl-sel-empty { font-size: 12px; color: var(--it-text-faint); padding: 2px 0; }

.it-tpl-sel-group-head { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
.it-tpl-sel-group-head .it-tpl-sel-title { margin: 0; }
.it-tpl-sel-allnone {
  font-size: 10px; padding: 1px 7px; border: 1px solid var(--it-border);
  border-radius: 999px; background: transparent; color: var(--it-text-muted); cursor: pointer;
}
.it-tpl-sel-allnone:hover { color: var(--it-text); border-color: var(--it-text-muted); background: var(--it-bg-alt); }
.it-tpl-sel-aspects { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; }

/* ---------- Global section customizer ---------- */
.it-popover .it-global-customizer { min-width: 220px; }
.it-global-customizer-title { font-family: var(--it-font-h); font-weight: 700; font-size: 12px; color: var(--it-text); padding: 2px 4px 6px; border-bottom: 1px solid var(--it-border); margin-bottom: 4px; }
.it-global-customizer-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px; border-radius: var(--it-radius-sm); }
.it-global-customizer-row:hover { background: var(--it-bg-hover); }
.it-global-customizer-row input { accent-color: var(--it-brand); flex: 0 0 auto; }
.it-global-customizer-ic .svg-icon, .it-global-customizer-ic { width: 15px; height: 15px; color: var(--it-text-muted); flex: 0 0 auto; }
.it-global-customizer-label { flex: 1 1 auto; font-size: 13px; }
.it-global-customizer-moves { display: flex; gap: 2px; flex: 0 0 auto; }

/* =====================================================================
   Time-based views — Gantt + Timeline (shared engine: time-grid.ts)
   ===================================================================== */

.it-gantt-view,
.it-timeline-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ----- Toolbar (zoom + nav), mirrors the calendar toolbar ----- */
.it-tg-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.it-tg-toolbar-nav { display: flex; align-items: center; gap: 8px; }
.it-tg-title { font-weight: 600; font-size: 14px; min-width: 120px; }
.it-tg-toolbar-extras { display: flex; align-items: center; gap: 8px; }
.it-tg-zoom { display: inline-flex; border: 1px solid var(--it-border); border-radius: 8px; overflow: hidden; background: transparent; }
.it-tg-zoom-btn {
  padding: 5px 10px; font-size: 12px; background: transparent;
  border: none; border-right: 1px solid var(--it-border); color: var(--it-text-muted);
  border-radius: 0;
  cursor: pointer;
}
.it-tg-zoom-btn:first-child {
  border-top-left-radius: calc(8px - 1px);
  border-bottom-left-radius: calc(8px - 1px);
}
.it-tg-zoom-btn:last-child {
  border-right: none;
  border-top-right-radius: calc(8px - 1px);
  border-bottom-right-radius: calc(8px - 1px);
}
.it-tg-zoom-btn:hover {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent);
  color: var(--it-brand);
}
.it-tg-zoom-btn.is-active {
  background: color-mix(in srgb, var(--it-brand) 13%, transparent);
  color: var(--it-brand);
  font-weight: 600;
}

/* ----- Frame: rail + scrolling time area ----- */
.it-tg {
  display: flex;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--it-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--it-bg);
}

.it-tg-rail {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--it-border);
  background: var(--it-bg);
}
.it-tg-rail-resize {
  position: relative;
  z-index: 5;
  flex: 0 0 6px;
  width: 6px;
  margin: 0 -3px;
  cursor: col-resize;
}
.it-tg-rail-resize:hover,
body.it-col-resizing .it-tg-rail-resize {
  background: color-mix(in srgb, var(--it-brand) 45%, transparent);
}
.it-tg-rail-measure {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: max-content;
  max-width: none;
  visibility: hidden;
  pointer-events: none;
}
.it-tg-rail-head {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--it-border);
  background: var(--it-bg-alt);
  font: 600 11px/1 var(--font-interface, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--it-text-muted);
}
.it-tg-rail-body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.it-tg-rail-content { position: relative; }

/* Gantt rail rows (one per task / group) */
.it-tg-rail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid var(--it-border);
  cursor: pointer;
  overflow: hidden;
}
.it-tg-rail-row:hover { background: var(--it-bg-hover); }
.it-tg-rail-row.is-group { background: var(--it-bg-alt); cursor: default; font-weight: 600; }
.it-tg-rail-twig { color: var(--it-text-faint); flex: 0 0 auto; }
.it-tg-rail-type { display: inline-flex; flex: 0 0 auto; }
.it-tg-rail-type-icon .svg-icon, .it-tg-rail-type-icon { width: 15px; height: 15px; }
.it-tg-rail-id { font-size: 11px; color: var(--it-text-faint); font-family: var(--font-monospace, monospace); flex: 0 0 auto; }
.it-tg-rail-title { flex: 1 1 auto; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.it-tg-rail-title.is-done { text-decoration: line-through; color: var(--it-text-muted); }
.it-tg-rail-meta { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.it-tg-rail-count { font-size: 11px; color: var(--it-text-muted); margin-left: auto; padding-left: 6px; flex: 0 0 auto; }
.it-tg-rail-unscheduled { color: var(--it-text-faint); flex: 0 0 auto; }
/* Clickable due-date icon for unscheduled tasks — always visible, no box/border */
.it-tg-schedule-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; cursor: pointer; color: var(--it-text-muted);
}
.it-tg-schedule-icon:hover { color: var(--it-brand); }
.it-tg-schedule-icon .svg-icon { width: 14px; height: 14px; }

/* Timeline lane gutters (absolute, aligned to canvas lanes) */
.it-tg-lane-gutter {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 1px solid var(--it-border);
  background: var(--it-bg);
}

/* ----- Scrolling time area ----- */
.it-tg-main { flex: 1; min-width: 0; overflow: auto; position: relative; }

/* Sticky two-tier date header */
.it-tg-axis {
  position: sticky;
  top: 0;
  height: 52px;
  z-index: 3;
  background: var(--it-bg-alt);
  border-bottom: 1px solid var(--it-border);
}
.it-tg-axis-top, .it-tg-axis-bottom { position: relative; height: 26px; }
.it-tg-axis-top { border-bottom: 1px solid var(--it-border); }
.it-tg-axis-cell {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center;
  padding-left: 6px; box-sizing: border-box;
  border-left: 1px solid var(--it-border);
  font-size: 11px; color: var(--it-text-muted);
  white-space: nowrap; overflow: hidden;
}
.it-tg-axis-top .it-tg-axis-cell { font-weight: 600; color: var(--it-text); }
.it-tg-axis-today { position: absolute; bottom: 0; width: 0; height: 0; transform: translateX(-4px);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000; }
.theme-dark .it-tg-axis-today { border-bottom-color: #fff; }

/* Canvas where bars live */
.it-tg-canvas { position: relative; }
.it-tg-grid { position: absolute; top: 0; left: 0; width: 100%; }
.it-tg-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--it-border); opacity: .5; }
.it-tg-weekend { position: absolute; top: 0; bottom: 0; background: var(--it-bg-alt); opacity: .55; }
/* Today line: black on light themes, white on dark — adapts to the theme. */
.it-tg-today-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #000; opacity: .7; z-index: 2; }
.theme-dark .it-tg-today-line { background: #fff; }

/* Gantt row bands (clickable, aligned with rail rows) */
.it-tg-band { position: absolute; left: 0; width: 100%; border-bottom: 1px solid var(--it-border); }
.it-tg-band:hover { background: var(--it-bg-hover); }
.it-tg-band.is-group { background: var(--it-bg-alt); }

/* Timeline lane bands */
.it-tg-lane { position: absolute; left: 0; width: 100%; border-bottom: 1px solid var(--it-border); }
.it-tg-lane:nth-child(odd) { background: color-mix(in srgb, var(--it-bg-alt) 40%, transparent); }

/* ----- Bars ----- */
.it-tg-bar {
  position: absolute;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bar-color, var(--it-brand)) 26%, var(--it-bg));
  border: 1px solid var(--bar-color, var(--it-brand));
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  box-sizing: border-box;
  overflow: visible;
  z-index: 1;
}
.it-tg-bar.is-timeline { height: 22px; }
.it-tg-bar.is-editable { cursor: grab; }
.it-tg-bar.is-dragging { cursor: grabbing; opacity: .85; box-shadow: 0 4px 10px rgba(0,0,0,.18); z-index: 5; }
.it-tg-bar.is-overdue { border-style: solid; box-shadow: inset 0 0 0 1px #F44336; }
.it-tg-bar-progress {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--bar-color, var(--it-brand));
  border-radius: 5px 0 0 5px; opacity: .55; pointer-events: none;
}
.it-tg-bar-label {
  position: relative; z-index: 1;
  font-size: 11px; color: var(--it-text);
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.it-tg-bar-meta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 3px;
  flex: 0 1 55%; min-width: 0; overflow: hidden;
}
.it-tg-bar-meta > * { flex: 0 0 auto; }
/* Bar-level CF values in Timeline bars: one-line compact, no artificial cap —
   the parent .it-tg-bar-meta already constrains total width via flex. */
.it-tg-bar-cf {
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  max-width: none;
}
.it-tg-bar-cf .it-cf-display,
.it-tg-bar-cf .it-cf-link,
.it-tg-bar-cf .it-cf-location-link {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
/* Rail CF columns (Gantt side panel) — each custom field is a direct flex
   sibling of the title so it gets its own "column". Text overflows are
   clipped by the row's overflow:hidden when the rail is narrowed. */
.it-tg-rail-cf-col {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  color: var(--it-text-muted);
  max-width: none;
}
.it-tg-rail-cf-col .it-cf-display,
.it-tg-rail-cf-col .it-cf-link,
.it-tg-rail-cf-col .it-cf-location-link {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
/* Legacy .it-tg-rail-cf kept for backward compat, same constraints */
.it-tg-rail-cf {
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  max-width: none;
}
.it-tg-rail-cf .it-cf-display,
.it-tg-rail-cf .it-cf-link,
.it-tg-rail-cf .it-cf-location-link {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.it-tg-bar-type-icon { display: inline-flex; }
.it-tg-bar-type-icon .svg-icon { width: 12px; height: 12px; }
.it-tg-bar-handle {
  position: absolute; top: 0; bottom: 0; width: 8px; z-index: 2;
  cursor: ew-resize; opacity: 0;
}
.it-tg-bar-handle.is-start { left: 0; }
.it-tg-bar-handle.is-end { right: 0; }
.it-tg-bar:hover .it-tg-bar-handle { opacity: 1; background: color-mix(in srgb, var(--bar-color, var(--it-brand)) 55%, transparent); border-radius: 5px; }

/* Milestones — rotated square diamond, centered on its date */
.it-tg-milestone {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--bar-color, var(--it-brand));
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
  z-index: 2;
}
.it-tg-milestone.is-editable, .it-tg-bar.is-editable { touch-action: none; }
.it-tg-milestone-label {
  position: absolute; font-size: 11px; color: var(--it-text-muted);
  white-space: nowrap; pointer-events: none;
}

/* ----- Dependency arrows (Gantt) ----- */
.it-tg-deps { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 4; }
.it-tg-dep-path { fill: none; stroke: var(--it-text-muted); stroke-width: 1.4; opacity: .8; }
.it-tg-dep-head { fill: none; stroke: var(--it-text-muted); stroke-width: 1.4; }
.it-tg-dep-path.is-violated, .it-tg-dep-head.is-violated { stroke: #F44336; opacity: 1; }

/* ----- Unscheduled tray (Timeline) ----- */
.it-tg-unscheduled { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--it-border); border-radius: 10px; background: var(--it-bg-alt); }
.it-tg-unscheduled-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--it-text-muted); margin-bottom: 8px; }
.it-tg-unscheduled-list { display: flex; flex-wrap: wrap; gap: 6px; }
.it-tg-unscheduled-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 14px; cursor: pointer; max-width: 220px;
  background: color-mix(in srgb, var(--bar-color, var(--it-brand)) 14%, var(--it-bg));
  border: 1px solid color-mix(in srgb, var(--bar-color, var(--it-brand)) 45%, transparent);
}
.it-tg-unscheduled-chip:hover { background: color-mix(in srgb, var(--bar-color, var(--it-brand)) 22%, var(--it-bg)); }
.it-tg-unscheduled-title { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-tg-unscheduled-chip .it-tg-schedule-icon {
  margin-left: 4px;
}

/* ----- Mobile: read + tap; narrower rail, no resize handles ----- */
.it-layout.is-mobile .it-tg-rail { flex-basis: 150px; width: 150px; }
.it-layout.is-mobile .it-tg-rail-head { padding: 0 8px; }
.it-layout.is-mobile .it-tg-rail-row { padding: 0 8px; }
.it-layout.is-mobile .it-tg-bar-handle { display: none; }
.it-layout.is-mobile .it-tg-bar.is-editable, .it-layout.is-mobile .it-tg-milestone.is-editable { cursor: pointer; }

/* Horizontal scroll: unlike desktop (where the title rail stays frozen on the
   left), on mobile the rail scrolls together with the time area. The outer frame
   becomes the horizontal scroller and the main area is sized to its content, so
   the rail + canvas overflow .it-tg horizontally and scroll as one. Vertical
   scroll and the rail vertical-sync stay on .it-tg-main (unchanged). */
.it-layout.is-mobile .it-tg { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.it-layout.is-mobile .it-tg-main { flex: 0 0 auto; overflow-x: hidden; }

/* =====================================================================
   Subtask presentation (nested mode) — List + Table indentation,
   collapse chevron, twig marker; Subtasks-control menu.
   ===================================================================== */

/* Collapse chevron on a parent row (List + Table title cell) */
.it-row-subtask-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 auto;
  color: var(--it-text-muted); cursor: pointer; border-radius: 4px;
}
.it-row-subtask-toggle:hover { color: var(--it-text); background: var(--it-bg-hover); }
.it-row-subtask-toggle .svg-icon { width: 14px; height: 14px; }

/* Twig marker on a childless subtask row */
.it-row-subtask-twig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex: 0 0 auto; color: var(--it-text-faint);
}
.it-row-subtask-twig .svg-icon { width: 13px; height: 13px; }

/* Subtask rows read a touch quieter than their parents */
.it-row.is-subtask .it-row-title-text { color: var(--it-text-muted); }
.it-table-row.is-subtask .it-table-title { color: var(--it-text-muted); }
/* NOTE: never set display:flex on the <td> itself — that drops it out of the
   table layout and the row overflows vertically. The chevron/twig are
   inline-flex spans that align fine inside a normal table cell. */
.it-table-title .it-row-subtask-toggle,
.it-table-title .it-row-subtask-twig { vertical-align: middle; margin-right: 2px; }

/* Subtasks control menu (3 modes with descriptions). The base .it-popover-item
   forces a single-line row (white-space:nowrap, align-items:center) and its
   height collapses to one line — so the label + description would render on one
   line and the description spilled out. Fix: row aligns to the top and is tall
   enough for two lines; the text wrapper + its two lines are plain BLOCK boxes
   so they reliably stack (block height = label + description, unambiguous). */
.it-subtask-opt {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  white-space: normal; max-width: 280px;
  height: auto; min-height: 0;
  padding: 8px 10px;
}
.it-popover-item-ic { display: inline-flex; align-items: center; flex: 0 0 auto; margin-top: 2px; color: var(--it-text-muted); }
.it-popover-item-ic .svg-icon { width: 15px; height: 15px; }
.it-subtask-opt.is-active .it-popover-item-ic { color: var(--it-brand); }
.it-subtask-opt-text { display: block; min-width: 0; flex: 1 1 auto; }
.it-subtask-opt-label { display: block; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: normal; }
.it-subtask-opt-desc { display: block; font-size: 11px; color: var(--it-text-muted); line-height: 1.35; margin-top: 1px; white-space: normal; word-break: break-word; }

/* "New subtask" banner in the quick-create modal (parent context made obvious) */
.it-quick-subtask-banner {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin-bottom: 10px;
  border-radius: var(--it-radius-sm, 6px);
  background: var(--it-bg-alt); border: 1px solid var(--it-border);
  font-size: 12px; color: var(--it-text-muted);
}
.it-quick-subtask-ic { display: inline-flex; align-items: center; color: var(--it-text-muted); }
.it-quick-subtask-ic .svg-icon { width: 14px; height: 14px; }
.it-quick-subtask-parent { font-weight: 600; color: var(--it-text); }

/* Group-header icons (List icon / Task-type icon shown beside the label). */
.it-group-chip-icon { display: inline-flex; align-items: center; margin-right: 4px; vertical-align: middle; font-size: 13px; line-height: 1; flex: 0 0 auto; }
.it-group-chip-icon .svg-icon { width: 13px; height: 13px; }
.it-group-label-wrap { display: inline-flex; align-items: center; gap: 5px; }

/* Field-type icon — colored (inline color set per field/type), shown next to a
   field's label in headers, the task modal, pickers and the Field Manager. */
.it-cf-type-ic { display: inline-flex; align-items: center; vertical-align: middle; flex: 0 0 auto; margin-right: 4px; }
.it-cf-type-ic .svg-icon { width: 13px; height: 13px; }
/* Table column header: icon + label inline via an INNER wrapper (never put
   display:flex on the <th> — it breaks the table layout / header height). */
.it-th-inner { display: flex; align-items: center; min-width: 0; }
.it-th-inner .it-th-label { min-width: 0; }

/* Field Manager: custom-field type picker (button + popover instead of a native
   select, so each option shows its colored type icon). */
.it-cf-type-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; text-align: left; }
.it-cf-type-trigger[disabled] { cursor: default; opacity: 0.8; }
.it-cf-type-trigger-label { flex: 1 1 auto; white-space: nowrap; }
.it-cf-type-trigger-caret { display: inline-flex; color: var(--it-text-muted); }
.it-cf-type-trigger-caret .svg-icon { width: 14px; height: 14px; }

/* ========================================================================== */
/* Docs — doc containers with a page tree + preview pane.                      */
/* The doc chip reuses .it-view-chip (themed by --chip-color = doc color).     */
/* ========================================================================== */
.it-doc-wrap {
  display: flex;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

/* ----- Explorer rail ----- */
.it-doc-explorer {
  flex: 0 0 240px;
  width: 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--background-modifier-border);
  overflow: hidden;
}
.it-doc-explorer-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 4px;
}
.it-doc-explorer-icon { display: inline-flex; flex: 0 0 auto; }
.it-doc-explorer-icon .svg-icon { width: 15px; height: 15px; }
.it-doc-explorer-name {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-doc-tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.it-doc-tree.it-doc-drop-root {
  outline: 2px dashed var(--interactive-accent);
  outline-offset: -4px;
  border-radius: 6px;
}

.it-doc-page-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
  position: relative;
}
.it-doc-page-row:hover { background: var(--it-bg-hover); }
/* Active page row mirrors the sidebar tree's active row exactly (default, dark,
   and the user's custom active-color modes) — see the .it-tree-row.is-active
   rules, which this selector is appended to. */
.it-doc-page-row.is-active { font-weight: 600; }
.it-doc-page-row.is-dragging { opacity: 0.45; }
.it-doc-page-row.it-doc-drop-target {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--interactive-accent);
}
.it-doc-twisty {
  display: inline-flex;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: var(--it-text-muted);
  cursor: pointer;
}
.it-doc-twisty .svg-icon { width: 13px; height: 13px; }
.it-doc-page-icon { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--it-text-muted); }
.it-doc-page-icon .svg-icon { width: 14px; height: 14px; }
.it-doc-page-icon-btn { cursor: pointer; }
.it-doc-page-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-doc-page-more {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--it-text-muted);
  opacity: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px;
}
.it-doc-page-more .svg-icon { width: 14px; height: 14px; }
.it-doc-page-row:hover .it-doc-page-more { opacity: 1; }
.it-doc-page-more:hover { background: var(--background-modifier-hover); color: var(--text-normal); }

/* ----- Page pane ----- */
.it-doc-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.it-doc-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 8px 0;
  margin: 0 0 8px 14px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.it-doc-wrap.explorer-hidden .it-doc-toolbar { margin-left: 0; }
.it-doc-crumb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: wrap;
  font-size: 13px;
}
.it-doc-crumb-sep { color: var(--it-text-faint); }
.it-doc-crumb-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--it-text-muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
}
.it-doc-crumb-seg:not(.is-current):hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.it-doc-crumb-seg.is-current { color: var(--text-normal); font-weight: 600; cursor: default; }
.it-doc-crumb-ic { display: inline-flex; }
.it-doc-crumb-ic .svg-icon { width: 13px; height: 13px; }
/* Doc explorer rail: Add page / Hide explorer — larger tap targets than mini icons. */
.it-doc-explorer-head .it-icon-btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  flex: 0 0 auto;
}
.it-doc-explorer-head .it-icon-btn .svg-icon {
  width: 18px;
  height: 18px;
}
/* Show explorer (toolbar, when rail hidden) — same size as rail actions. */
.it-doc-toolbar > .it-icon-btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  flex: 0 0 auto;
}
.it-doc-toolbar > .it-icon-btn .svg-icon {
  width: 18px;
  height: 18px;
}
/* Page toolbar actions — flat icon controls (no Obsidian button chrome). */
.it-doc-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 8px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: var(--it-radius-sm);
  color: var(--it-text-muted);
  font-family: var(--it-font-h);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 0;
  line-height: 1;
}
.it-doc-tool-btn:hover,
.it-doc-tool-btn:focus,
.it-doc-tool-btn:active {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--it-text);
}
.it-doc-tool-ic { display: inline-flex; flex: 0 0 auto; }
.it-doc-tool-ic .svg-icon { width: 16px; height: 16px; }
.it-doc-tool-label { white-space: nowrap; }
/* Mobile: icon-only Subpage / Edit — labels hidden, comfortable square hit area. */
.is-mobile .it-doc-tool-label { display: none; }
.is-mobile .it-doc-tool-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}
.is-mobile .it-doc-tool-ic .svg-icon { width: 18px; height: 18px; }

.it-doc-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 4px 14px 24px;
  max-width: 860px;
}

/* Mobile: narrower rail; explorer can be hidden via the toggle to reclaim space. */
.is-mobile .it-doc-explorer { flex-basis: 180px; width: 180px; }

/* Docs Manager — workspace-wide doc list with per-row actions. */
.it-docs-manager-row { cursor: default; }
.it-docs-manager-actions { display: flex; gap: 4px; flex: 0 0 auto; align-items: center; }

/* Keyboard shortcuts manager (settings) */
.it-hotkeys { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.it-hotkey-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.it-hotkey-label { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-hotkey-controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.it-hotkey-key {
  min-width: 96px; text-align: center;
  font-family: var(--font-monospace, monospace); font-size: 12px;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  cursor: pointer;
}
.it-hotkey-key:hover { background: var(--background-modifier-hover); }
.it-hotkey-key.is-empty { color: var(--text-faint); font-style: italic; }
.it-hotkey-key.is-recording {
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 25%, transparent);
}

/* =====================================================================
   Flat button surfaces: modals, filters, dropdowns, and headers only.
   Do not apply this to the actual List/Board/Calendar/Table/Gantt/Timeline
   view content (rows, cards, cells, calendar blocks). These selectors target
   controls that Obsidian can restyle as gray native buttons.
   ===================================================================== */

/* Header controls: topbar filters/group/sort and saved-view actions. */
.inventtasks-root .it-topbar .it-secondary-btn,
.inventtasks-root .it-views-bar .it-chip-add,
.inventtasks-root .it-views-bar-action {
  background: transparent !important;
  box-shadow: none !important;
}
.inventtasks-root .it-topbar .it-secondary-btn:hover,
.inventtasks-root .it-topbar .it-secondary-btn:focus,
.inventtasks-root .it-topbar .it-secondary-btn:active,
.inventtasks-root .it-views-bar .it-chip-add:hover,
.inventtasks-root .it-views-bar .it-chip-add:focus,
.inventtasks-root .it-views-bar .it-chip-add:active,
.inventtasks-root .it-views-bar-action:hover,
.inventtasks-root .it-views-bar-action:focus,
.inventtasks-root .it-views-bar-action:active {
  background: transparent !important;
  box-shadow: none !important;
}
.inventtasks-root .it-views-bar .it-chip-add {
  border-color: var(--it-border);
}
.inventtasks-root .it-views-bar .it-chip-add:hover,
.inventtasks-root .it-views-bar-action:hover {
  color: var(--it-brand);
  border-color: color-mix(in srgb, var(--it-brand) 45%, var(--it-border));
}

/* Modal buttons: remove gray native fill/shadow, but keep primary/danger filled.
   IMPORTANT: do not catch .it-chip. Task field labels use the configurable chip
   background system, and must keep their original per-setting styling. */
.modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip),
.it-task-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip),
.it-config-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip),
.it-filter-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip) {
  background: transparent !important;
  box-shadow: none !important;
}
.modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):hover,
.modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):focus,
.modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):active,
.it-task-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):hover,
.it-task-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):focus,
.it-task-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):active,
.it-config-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):hover,
.it-config-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):focus,
.it-config-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):active,
.it-filter-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):hover,
.it-filter-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):focus,
.it-filter-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Secondary/ghost controls in modals and filter builder: transparent surface. */
.modal .it-btn-secondary,
.modal .it-secondary-btn,
.modal .it-btn-ghost,
.modal .it-btn-ghost-mini,
.it-task-modal .it-btn-secondary,
.it-task-modal .it-secondary-btn,
.it-task-modal .it-btn-ghost,
.it-task-modal .it-btn-ghost-mini,
.it-config-modal .it-btn-secondary,
.it-config-modal .it-secondary-btn,
.it-config-modal .it-btn-ghost,
.it-filter-modal .it-btn-secondary,
.it-filter-modal .it-secondary-btn,
.it-filter-modal .it-btn-ghost {
  background: transparent !important;
  box-shadow: none !important;
}

/* Dropdowns/popovers/context menus: transparent rows, active state via text/accent. */
.it-popover button,
.it-popover .it-popover-item,
.it-popover .it-calc-opt,
.it-popover .it-cover-menu-item,
.it-popover .it-cover-menu-att,
.it-popover .it-global-customizer-row button {
  background: transparent !important;
  box-shadow: none !important;
}
.it-popover .it-popover-item:hover,
.it-popover .it-popover-item:focus,
.it-popover .it-calc-opt:hover,
.it-popover .it-cover-menu-item:hover,
.it-popover .it-cover-menu-att:hover,
.it-popover .it-popover-item.it-ctx-item-danger:hover {
  background: transparent !important;
  box-shadow: none !important;
}
.it-popover .it-popover-item.is-active,
.it-popover .it-calc-opt.is-active {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--it-brand);
}

/* Segmented controls used inside filters/customizers/modals: no gray track/card. */
.modal .it-tri-state,
.it-filter-modal .it-tri-state,
.it-config-modal .it-tri-state,
.it-fields-customizer .it-tri-state,
.it-config-tabs,
.it-config-subtabs,
.it-icon-picker-tabs {
  background: transparent !important;
  box-shadow: none !important;
}
.modal .it-tri-state-btn,
.it-filter-modal .it-tri-state-btn,
.it-config-modal .it-tri-state-btn,
.it-fields-customizer .it-tri-state-btn,
.it-config-tab,
.it-config-subtab,
.it-picker-tab {
  background: transparent !important;
  box-shadow: none !important;
}
.modal .it-tri-state-btn.is-active,
.it-filter-modal .it-tri-state-btn.is-active,
.it-config-modal .it-tri-state-btn.is-active,
.it-fields-customizer .it-tri-state-btn.is-active,
.it-config-tab.is-active,
.it-config-subtab.is-active,
.it-picker-tab.is-active {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--it-brand);
  font-weight: 600;
}

/* Filter field picker is a button styled as input: keep outline, no gray fill. */
button.it-filter-fieldbtn.it-input,
.it-filter-modal button.it-filter-fieldbtn {
  background: transparent !important;
  box-shadow: none !important;
}

/* Explicitly restore task-modal field labels/chips: the modal reset above must
   never flatten configurable chip backgrounds (standard + custom fields). */
.it-task-modal .it-chip.it-cs-bg {
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 18%, transparent) !important;
}
.it-task-modal .it-chip.it-cs-bg:hover {
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 28%, transparent) !important;
}
.it-task-modal .it-chip.it-chip-tag.is-active {
  box-shadow:
    0 0 0 1px var(--background-primary),
    0 0 0 3px color-mix(in srgb, var(--chip-color, var(--it-brand)) 70%, transparent);
}

/* The two primary actions called out by the user: keep them visible, but make
   them flatter and lighter than the heavy filled primary button. */
.inventtasks-root .it-new-task-btn,
.it-task-modal .it-add-comment-btn {
  background: transparent !important;
  color: var(--it-brand) !important;
  border: 1px solid color-mix(in srgb, var(--it-brand) 55%, var(--it-border)) !important;
  box-shadow: none !important;
}
.inventtasks-root .it-new-task-btn:hover,
.inventtasks-root .it-new-task-btn:focus,
.inventtasks-root .it-new-task-btn:active,
.it-task-modal .it-add-comment-btn:hover,
.it-task-modal .it-add-comment-btn:focus,
.it-task-modal .it-add-comment-btn:active {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  color: var(--it-brand) !important;
  border-color: var(--it-brand) !important;
  box-shadow: none !important;
}

/* Active states must stay visible. The transparent-surface override above is
   intentionally broad, so re-apply the active highlight after it. */
.inventtasks-root .it-topbar .it-secondary-btn.is-active {
  color: var(--it-brand) !important;
  border-color: var(--it-brand) !important;
  background: color-mix(in srgb, var(--it-brand) 12%, transparent) !important;
}
.inventtasks-root .it-topbar .it-secondary-btn.is-active:hover,
.inventtasks-root .it-topbar .it-secondary-btn.is-active:focus,
.inventtasks-root .it-topbar .it-secondary-btn.is-active:active {
  color: var(--it-brand) !important;
  border-color: var(--it-brand) !important;
  background: color-mix(in srgb, var(--it-brand) 16%, transparent) !important;
}

/* Saved views / docs: active chip uses its own view/doc color, not gray. */
.inventtasks-root .it-views-bar .it-view-chip.is-active,
.inventtasks-root .it-views-bar .it-view-chip.is-active:hover {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--chip-color, var(--it-brand)) 85%, transparent) !important;
  background: color-mix(in srgb, var(--chip-color, var(--it-brand)) 24%, transparent) !important;
  box-shadow: none !important;
}

/* Dropdown/list selections (Group, Sort, Subtasks, calc menu, etc.). */
.it-popover .it-popover-item.is-active,
.it-popover .it-popover-item.is-active:hover,
.it-popover .it-calc-opt.is-active,
.it-popover .it-calc-opt.is-active:hover {
  color: var(--it-brand) !important;
  background: color-mix(in srgb, var(--it-brand) 13%, transparent) !important;
  box-shadow: none !important;
}
.theme-dark .it-popover .it-popover-item.is-active,
.theme-dark .it-popover .it-popover-item.is-active:hover,
.theme-dark .it-popover .it-calc-opt.is-active,
.theme-dark .it-popover .it-calc-opt.is-active:hover {
  background: rgba(102, 71, 240, 0.22) !important;
  color: #cdb8ff !important;
}

/* Segmented controls inside filter/config/customizer modals. */
.modal .it-tri-state-btn.is-active,
.it-filter-modal .it-tri-state-btn.is-active,
.it-config-modal .it-tri-state-btn.is-active,
.it-fields-customizer .it-tri-state-btn.is-active,
.it-config-tab.is-active,
.it-config-subtab.is-active,
.it-picker-tab.is-active {
  color: var(--it-brand) !important;
  background: color-mix(in srgb, var(--it-brand) 13%, transparent) !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* Hover still needs a visible affordance. Resting surfaces are transparent, but
   mouse-over gets a light brand tint instead of Obsidian's gray button fill. */
.inventtasks-root .it-topbar .it-secondary-btn:hover,
.inventtasks-root .it-topbar .it-secondary-btn:focus,
.inventtasks-root .it-views-bar .it-chip-add:hover,
.inventtasks-root .it-views-bar .it-chip-add:focus,
.inventtasks-root .it-views-bar-action:hover,
.inventtasks-root .it-views-bar-action:focus,
.inventtasks-root .it-views-bar .it-view-chip:hover {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  box-shadow: none !important;
}

/* Calendar + Gantt/Timeline period controls. These are view toolbars, not row/card
   content: keep the modern transparent surface, but show hover + active tint. */
.inventtasks-root .it-cal-period-tabs,
.inventtasks-root .it-tg-zoom {
  background: transparent !important;
  box-shadow: none !important;
}
.inventtasks-root .it-cal-period-tab,
.inventtasks-root .it-tg-zoom-btn {
  background: transparent !important;
  box-shadow: none !important;
}
.inventtasks-root .it-tg-zoom-btn {
  border-radius: 0 !important;
}
.inventtasks-root .it-tg-zoom-btn:first-child {
  border-top-left-radius: calc(8px - 1px) !important;
  border-bottom-left-radius: calc(8px - 1px) !important;
}
.inventtasks-root .it-tg-zoom-btn:last-child {
  border-top-right-radius: calc(8px - 1px) !important;
  border-bottom-right-radius: calc(8px - 1px) !important;
}
.inventtasks-root .it-cal-period-tab:hover,
.inventtasks-root .it-cal-period-tab:focus,
.inventtasks-root .it-tg-zoom-btn:hover,
.inventtasks-root .it-tg-zoom-btn:focus {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  color: var(--it-brand) !important;
  box-shadow: none !important;
}
.inventtasks-root .it-cal-period-tab.is-active,
.inventtasks-root .it-cal-period-tab.is-active:hover,
.inventtasks-root .it-tg-zoom-btn.is-active,
.inventtasks-root .it-tg-zoom-btn.is-active:hover {
  background: color-mix(in srgb, var(--it-brand) 13%, transparent) !important;
  color: var(--it-brand) !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* The "Today" buttons are .it-btn-secondary in Calendar and Gantt/Timeline
   toolbars, separate from the period/zoom segmented controls above. */
.inventtasks-root .it-cal-toolbar-nav .it-btn-secondary,
.inventtasks-root .it-tg-toolbar-nav .it-btn-secondary {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--it-border) !important;
  color: var(--it-text-muted) !important;
  border-radius: calc(var(--it-radius-md) - 2px);
}
.inventtasks-root .it-cal-toolbar-nav .it-btn-secondary:hover,
.inventtasks-root .it-cal-toolbar-nav .it-btn-secondary:focus,
.inventtasks-root .it-tg-toolbar-nav .it-btn-secondary:hover,
.inventtasks-root .it-tg-toolbar-nav .it-btn-secondary:focus {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--it-brand) 45%, var(--it-border)) !important;
  color: var(--it-brand) !important;
  box-shadow: none !important;
}

/* Task modal field editors: one visible control frame for built-in fields
   (Start/Due/Estimate/Tracked/Pts), recurring fields, and custom fields.
   This lives near the end of the file on purpose so the generic .it-input
   reset and Obsidian/theme input chrome cannot flatten it back out. */
.it-task-modal :is(.it-task-fields, .it-recurring-row, .it-cf-val)
  :is(input.it-input, textarea.it-input, select.it-input, input.it-mdt) {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--it-text-muted) 36%, var(--it-border)) !important;
  border-radius: var(--it-radius-sm) !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
.it-task-modal :is(.it-task-fields, .it-recurring-row, .it-cf-val)
  :is(input.it-input, textarea.it-input, select.it-input, input.it-mdt):focus {
  background: transparent !important;
  border-color: var(--it-brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--it-brand) 16%, transparent) !important;
}
.it-task-modal :is(.it-task-fields, .it-cf-val) .it-dtf-host > :is(input.it-input, input.it-mdt) {
  padding-left: 26px !important;
}

.it-popover .it-popover-item:hover,
.it-popover .it-popover-item:focus,
.it-popover .it-calc-opt:hover,
.it-popover .it-cover-menu-item:hover,
.it-popover .it-cover-menu-att:hover {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  box-shadow: none !important;
}

.modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):hover,
.modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):focus,
.it-task-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):hover,
.it-task-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-cover-btn):not(.it-chip):focus,
.it-config-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):hover,
.it-config-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):focus,
.it-filter-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):hover,
.it-filter-modal button[class*="it-"]:not(.it-btn-primary):not(.it-btn-danger):not(.it-chip):focus,
.modal .it-tri-state-btn:hover,
.modal .it-tri-state-btn:focus,
.it-filter-modal .it-tri-state-btn:hover,
.it-filter-modal .it-tri-state-btn:focus,
.it-config-modal .it-tri-state-btn:hover,
.it-config-modal .it-tri-state-btn:focus,
.it-fields-customizer .it-tri-state-btn:hover,
.it-fields-customizer .it-tri-state-btn:focus,
.it-config-tab:hover,
.it-config-tab:focus,
.it-config-subtab:hover,
.it-config-subtab:focus,
.it-picker-tab:hover,
.it-picker-tab:focus {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  box-shadow: none !important;
}

/* ============================================================
   Favorites — bottom bar + right-sidebar panel
   (a third & second home for favorites, alongside the left
   sidebar; chips reuse the .it-chip family for visual parity)
   ============================================================ */

/* ----- Bottom favorites bar (last child of .it-main) ----- */
.it-favorites-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border-top: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
}
.it-favorites-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding-right: 4px;
  border-right: 1px solid var(--background-modifier-border);
}
.it-favorites-bar-star { display: inline-flex; }
.it-favorites-bar-star svg { width: 16px; height: 16px; }
.it-favorites-bar-label-text {
  font-family: var(--it-font-h);
  font-size: 11px;
  font-weight: 600;
  color: var(--it-text-muted);
  white-space: nowrap;
}
.it-favorites-bar-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 6px 0;
}
.it-favorites-bar .it-fav-chip {
  flex: 0 0 auto;
  max-width: 150px;
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 16%, transparent);
  border-color: color-mix(in srgb, var(--chip-color, var(--it-text)) 42%, transparent);
}
.it-favorites-bar .it-fav-chip:hover {
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 24%, transparent);
  border-color: color-mix(in srgb, var(--chip-color, var(--it-text)) 58%, transparent);
}
.it-fav-chip-icon { display: inline-flex; align-items: center; }
.it-fav-chip-icon svg { width: 13px; height: 13px; }
.it-fav-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-fav-chip-caret {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  opacity: 0.55;
}
.it-fav-chip-caret svg { width: 12px; height: 12px; }
.it-fav-chip:hover .it-fav-chip-caret { opacity: 1; }
.it-favorites-bar .it-fav-chip.is-active {
  background: color-mix(in srgb, var(--chip-color, var(--it-text)) 30%, transparent);
  border-color: color-mix(in srgb, var(--chip-color, var(--it-text)) 72%, transparent);
}
.it-favorites-bar .it-fav-chip.is-overflow-hidden {
  display: none;
}
.it-favorites-bar-overflow {
  display: none;
  flex: 0 0 auto;
  color: var(--it-text-muted);
}
.it-favorites-bar-overflow.is-visible {
  display: inline-flex;
}
.it-favorites-overflow-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
}
.it-favorites-overflow-item {
  min-width: 0;
}
.it-favorites-overflow-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.it-favorites-overflow-icon svg {
  width: 14px;
  height: 14px;
}
.it-favorites-overflow-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-favorites-bar-hide {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--it-text-faint);
}

/* Mobile: lift the bar above Obsidian's navbar; the bar then provides that
   clearance, so .it-main-body no longer needs to reserve it. */
.is-mobile .it-favorites-bar {
  height: auto;
  padding-bottom: var(--it-mobile-safe-bottom);
}
.is-mobile .it-main.has-fav-bar .it-main-body { padding-bottom: 12px; }

/* ----- Favorites panel (Obsidian right sidebar) ----- */
.inventtasks-favorites-leaf .view-content { padding: 0; }
.it-fav-panel { display: flex; flex-direction: column; height: 100%; }
.it-fav-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--background-modifier-border);
}
.it-fav-panel-header-icon { display: inline-flex; color: var(--it-amber, #f5b800); }
.it-fav-panel-header-icon svg { width: 16px; height: 16px; }
.it-fav-panel-title { font-family: var(--it-font-h); }
.it-fav-panel-list { overflow-y: auto; padding: 6px 4px; }
.it-fav-panel-empty {
  padding: 16px 12px;
  color: var(--it-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ----- Notifications inbox ----- */
.it-notifications {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px;
}
.it-notifications-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 4px 2px 8px;
}
.it-notifications-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: help;
}
.it-notifications-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.it-notifications-title-icon .svg-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}
.it-notifications-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.it-notifications-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--interactive-accent) 14%, transparent);
  color: var(--interactive-accent);
  font-weight: 700;
}
.it-notifications-desc {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--it-text-muted);
  font-size: 12px;
}
.it-notifications-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 6px;
}
.it-notifications-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--it-border) !important;
  border-radius: var(--it-radius-pill);
  background: transparent !important;
  color: var(--it-text-muted);
  font-family: var(--it-font-h);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none !important;
  cursor: pointer;
}
.it-notifications-tab:hover,
.it-notifications-tab:focus {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--it-brand) 45%, transparent) !important;
  color: var(--it-brand);
  box-shadow: none !important;
}
.it-notifications-tab.is-active {
  border-color: var(--it-brand) !important;
  background: color-mix(in srgb, var(--it-brand) 12%, transparent) !important;
  color: var(--it-brand);
}
.it-notifications-tab-count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--background-secondary);
  color: var(--it-text-muted);
  font-size: 11px;
}
.it-notification-row {
  display: grid;
  grid-template-columns: 4px minmax(220px, 1fr) minmax(220px, max-content);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 14px;
  background: var(--background-primary);
  cursor: pointer;
}
.it-notification-row:hover { background: var(--background-secondary); }
.it-notification-row.is-read { opacity: 0.62; }
.it-notification-row.is-reminder {
  --it-reminder-accent: #0091ff;
  border-color: color-mix(in srgb, var(--it-reminder-accent) 48%, var(--background-modifier-border));
  background: color-mix(in srgb, var(--it-reminder-accent) 7%, var(--background-primary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--it-reminder-accent) 22%, transparent);
}
.it-notification-row.is-reminder.is-danger { --it-reminder-accent: #e53935; }
.it-notification-row.is-reminder.is-warning { --it-reminder-accent: #f59e0b; }
.it-notification-row.is-reminder.is-info { --it-reminder-accent: #0091ff; }
.it-notification-row.is-reminder:hover {
  background: color-mix(in srgb, var(--it-reminder-accent) 11%, var(--background-secondary));
}
@media (max-width: 900px) {
  .it-notification-row {
    grid-template-columns: 4px minmax(220px, 1fr);
  }
  .it-notification-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
.it-notification-marker {
  width: 4px;
  min-height: 34px;
  height: 100%;
  border-radius: 999px;
  background: #0091ff;
}
.it-notification-row.is-danger .it-notification-marker { background: #e53935; }
.it-notification-row.is-warning .it-notification-marker { background: #f59e0b; }

/* History tab — cross-workspace log of dispatched notifications */
.it-notification-history-row.is-danger { --it-reminder-accent: #e53935; }
.it-notification-history-row.is-warning { --it-reminder-accent: #f59e0b; }
.it-notification-history-row.is-info { --it-reminder-accent: #0091ff; }
.it-notification-history-row.is-static { cursor: default; }
.it-notification-history-row.is-static:hover { background: var(--background-primary); }
.it-notification-history-group {
  display: block;
}
.it-notification-history-group > summary {
  list-style: none;
}
.it-notification-history-group > summary::-webkit-details-marker {
  display: none;
}
.it-notification-history-row.is-expandable {
  cursor: pointer;
}
.it-notification-ws-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  margin-right: 2px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  background: var(--background-modifier-border);
  color: var(--text-muted);
}
.it-notification-history-channels {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  color: var(--text-muted);
}
.it-notification-history-channels .it-notification-channel-icon { display: inline-flex; }
.it-notification-history-channels .it-notification-channel-icon.is-failed {
  color: #e53935;
}
.it-notification-history-channels .it-notification-channel-icon .svg-icon {
  width: 16px;
  height: 16px;
}
.it-notification-history-caret {
  display: inline-flex;
  color: var(--text-faint);
  transition: transform 120ms ease;
}
.it-notification-history-caret .svg-icon {
  width: 15px;
  height: 15px;
}
.it-notification-history-group[open] .it-notification-history-caret {
  transform: rotate(180deg);
}
.it-notification-history-items {
  display: grid;
  gap: 6px;
  margin: -2px 12px 8px 28px;
  padding: 8px 0 0 12px;
  border-left: 1px solid var(--background-modifier-border);
}
.it-notification-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: var(--text-normal);
  font-size: 12px;
}
.it-notification-history-task-link {
  min-width: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-normal);
  box-shadow: none !important;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.it-notification-history-task-link:hover,
.it-notification-history-task-link:focus {
  color: var(--it-brand);
  text-decoration: underline;
}
.it-notification-history-task-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.it-notification-history-reason {
  color: var(--it-text-muted);
  white-space: nowrap;
}
.it-notifications-history-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.it-history-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.it-history-clear-btn .svg-icon { width: 15px; height: 15px; }
.it-settings-error { color: var(--text-error); font-weight: 500; }

/* Settings scope chips + desktop-only treatment */
.it-settings-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.it-scope-chip {
  font-size: 0.62em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.it-scope-global { background: color-mix(in srgb, #0091ff 18%, transparent); color: #0091ff; }
.it-scope-workspace { background: color-mix(in srgb, #22c55e 22%, transparent); color: #16a34a; }
.it-scope-desktop { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #b45309; }
.it-settings-disabled { opacity: 0.5; pointer-events: none; }
.it-settings-desktop-note { color: #b45309; font-style: italic; }
@media (max-width: 900px) {
  .it-notification-history-channels { grid-column: 2; justify-content: flex-start; }
  .it-notification-history-items {
    margin-left: 24px;
  }
  .it-notification-history-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .it-notification-history-reason {
    white-space: normal;
  }
}

.it-notification-body { min-width: 0; }
.it-notification-title {
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.it-notification-reminder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--it-reminder-accent, #0091ff);
}
.it-notification-reminder-icon .svg-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}
.it-notification-meta {
  margin-top: 3px;
  color: var(--it-text-muted);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.it-notification-submeta {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.it-notification-returned {
  color: #e53935;
  font-weight: 700;
}
.it-notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.it-notification-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0 !important;
  border: 1px solid var(--it-border) !important;
  border-radius: var(--it-radius-pill) !important;
  background: transparent !important;
  color: var(--it-text-muted) !important;
  box-shadow: none !important;
}
.it-notification-icon-btn:hover,
.it-notification-icon-btn:focus {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--it-brand) 45%, transparent) !important;
  color: var(--it-brand) !important;
  box-shadow: none !important;
}
.it-notification-icon-btn.it-danger {
  color: var(--it-danger, #e53935) !important;
  border-color: color-mix(in srgb, var(--it-danger, #e53935) 32%, var(--it-border)) !important;
}
.it-notification-icon-btn.it-danger:hover,
.it-notification-icon-btn.it-danger:focus {
  background: color-mix(in srgb, var(--it-danger, #e53935) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--it-danger, #e53935) 48%, transparent) !important;
  color: var(--it-danger, #e53935) !important;
}
.it-notification-icon-btn .svg-icon {
  width: 15px;
  height: 15px;
}
.it-notification-snooze-popover {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  padding: 4px;
}
.it-notification-snooze-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.it-notification-custom-snooze {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}
.it-notification-custom-snooze span {
  grid-column: 1 / -1;
  color: var(--it-text-muted);
  font-size: 12px;
}
.it-notification-custom-snooze input {
  min-width: 0;
}
.it-notification-snooze-popover button {
  background: transparent !important;
  border: 1px solid var(--it-border) !important;
  border-radius: var(--it-radius-pill) !important;
  color: var(--it-text-muted) !important;
  box-shadow: none !important;
}
.it-notification-snooze-popover button:hover,
.it-notification-snooze-popover button:focus {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--it-brand) 45%, transparent) !important;
  color: var(--it-brand) !important;
  box-shadow: none !important;
}
.it-system-add-btn {
  justify-self: end;
  background: transparent !important;
  box-shadow: none !important;
}
.it-system-add-btn:hover,
.it-system-add-btn:focus {
  background: color-mix(in srgb, var(--it-brand) 8%, transparent) !important;
  box-shadow: none !important;
}
.it-notifications-empty {
  padding: 34px 18px;
  text-align: center;
  border: 1px dashed var(--background-modifier-border);
  border-radius: 16px;
  color: var(--it-text-muted);
}
.it-notifications-empty h3 {
  margin: 0 0 6px;
  color: var(--text-normal);
}
.is-mobile .it-notifications {
  padding: 10px;
  padding-bottom: calc(10px + var(--it-mobile-safe-bottom, 0px));
}
.is-mobile .it-notification-row {
  grid-template-columns: 4px minmax(0, 1fr);
}
.is-mobile .it-notification-actions {
  grid-column: 2;
  justify-content: flex-start;
}

.it-global-system-btn.it-global-system-attention.is-danger {
  background: color-mix(in srgb, #e53935 20%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #e53935 55%, transparent) !important;
}
.it-global-system-btn.it-global-system-attention.is-warning {
  background: color-mix(in srgb, #f59e0b 22%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 55%, transparent) !important;
}
.it-global-system-btn.it-global-system-attention:hover {
  filter: brightness(1.05);
}

.inventtasks-root .it-tree-row.it-tree-nav-attention.is-danger,
.inventtasks-sidebar-leaf .it-tree-row.it-tree-nav-attention.is-danger,
.it-sidebar-docked .it-tree-row.it-tree-nav-attention.is-danger {
  background: color-mix(in srgb, #e53935 18%, transparent) !important;
  box-shadow: inset 3px 0 0 #e53935 !important;
}
.inventtasks-root .it-tree-row.it-tree-nav-attention.is-warning,
.inventtasks-sidebar-leaf .it-tree-row.it-tree-nav-attention.is-warning,
.it-sidebar-docked .it-tree-row.it-tree-nav-attention.is-warning {
  background: color-mix(in srgb, #f59e0b 20%, transparent) !important;
  box-shadow: inset 3px 0 0 #f59e0b !important;
}
.inventtasks-root .it-tree-row.it-tree-nav-attention:hover,
.inventtasks-sidebar-leaf .it-tree-row.it-tree-nav-attention:hover,
.it-sidebar-docked .it-tree-row.it-tree-nav-attention:hover {
  filter: brightness(1.04);
}

/* ===== About → License modal ===== */
.it-license-modal {
  max-width: 720px;
  width: 92vw;
}
.it-license-text {
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.55;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 14px 16px;
  user-select: text;
}

/* ===== Brand: logo + buy-license pill ===== */
:root {
  --it-brand-red: #e12d2d;
}
.it-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.it-logo-mark {
  display: inline-flex;
  color: var(--text-normal);
}
.it-logo-mark img,
.it-logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Discreet purchase pill — small, quiet, disappears once licensed. */
.it-buy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid color-mix(in srgb, var(--it-brand-red) 45%, transparent);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--it-brand-red);
  text-decoration: none !important;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 120ms ease, background 120ms ease;
}
.it-buy-pill:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--it-brand-red) 10%, transparent);
  color: var(--it-brand-red);
}
.it-buy-pill-spark {
  display: inline-flex;
  width: 11px;
  height: 11px;
}
.it-buy-pill-spark svg {
  width: 100%;
  height: 100%;
}
.it-buy-pill.is-compact .it-buy-pill-label {
  font-size: 11px;
}

/* Placement helpers */
.it-task-footer .it-buy-pill {
  margin-left: auto;
}
.it-sidebar-buy {
  display: flex;
  justify-content: center;
  padding: 10px 12px calc(10px + var(--inventtasks-mobile-bottom, 0px));
}
.it-settings-about-logo {
  margin: 4px 0 10px;
}
.it-settings-top-logo {
  display: block;
  margin: 0 0 12px;
}
.it-license-modal .it-logo {
  margin-bottom: 8px;
}
.it-demo-choice-logo {
  margin: 2px 0 10px;
}

/* ── Sync version history modal ───────────────────────────────────────── */
.it-sync-history-modal { max-width: 640px; width: 92vw; }
.it-sync-history-path {
  font-family: var(--font-monospace);
  word-break: break-all;
  margin: 0 0 10px;
}
.it-sync-history-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.it-sync-history-row {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--it-radius-md, 8px);
  padding: 8px 10px;
  background: var(--background-secondary);
}
.it-sync-history-row.is-selected { border-color: var(--interactive-accent); }
.it-sync-history-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.it-sync-history-icon { display: inline-flex; color: var(--text-muted); }
.it-sync-history-icon .svg-icon { width: 16px; height: 16px; }
.it-sync-history-when { font-weight: 600; font-size: 13px; }
.it-sync-history-device {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--background-modifier-hover);
  padding: 1px 6px;
  border-radius: 999px;
}
.it-sync-history-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-on-accent, #fff);
  background: var(--it-purple, #9c27b0);
  padding: 1px 6px;
  border-radius: 999px;
}
.it-sync-history-meta { font-size: 12px; color: var(--text-muted); margin: 2px 0 6px; }
.it-sync-history-actions { display: flex; gap: 8px; }
.it-sync-history-preview {
  margin-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
  padding-top: 10px;
}
.it-sync-history-preview pre {
  font-family: var(--font-monospace);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 30vh;
  overflow: auto;
  background: var(--background-secondary);
  border-radius: var(--it-radius-md, 8px);
  padding: 10px;
  margin: 0;
}
.it-suggest-title { font-size: 14px; }
.it-suggest-sub { font-size: 11px; color: var(--text-muted); font-family: var(--font-monospace); }

/* ── Discreet sync indicator (topbar) ─────────────────────────────────── */
.it-sync-indicator { display: none; }
.it-sync-indicator.is-shown { display: inline-flex; }
.it-sync-indicator .svg-icon { width: 15px; height: 15px; }
.it-sync-indicator.is-idle { color: var(--it-success, #2e9e5b); }
.it-sync-indicator.is-syncing { color: var(--it-brand, #0091ff); }
.it-sync-indicator.is-pending { color: var(--it-text-muted); }
.it-sync-indicator.is-error { color: var(--it-danger, #e53935); }
.it-sync-indicator.is-blocked { color: var(--it-amber, #e6a700); }
.it-sync-indicator.is-syncing .svg-icon { animation: it-sync-spin 0.9s linear infinite; }
@keyframes it-sync-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }