/* ── Semantic design tokens ── */
:root {
  --color-base: 248 250 252;
  --color-surface: 255 255 255;
  --color-overlay: 241 245 249;
  --color-muted: 148 163 184;

  --color-on-base: 15 23 42;
  --color-on-surface: 15 23 42;
  --color-on-muted: 100 116 139;
  --color-on-subtle: 71 85 105;

  --color-border: 226 232 240;
  --color-border-muted: 241 245 249;

  --color-success: 5 150 105;
  --color-danger: 220 38 38;
  --color-warning: 217 119 6;
}

.dark {
  --color-base: 2 6 23;
  --color-surface: 15 23 42;
  --color-overlay: 30 41 59;
  --color-muted: 51 65 85;

  --color-on-base: 248 250 252;
  --color-on-surface: 203 213 225;
  --color-on-muted: 148 163 184;
  --color-on-subtle: 100 116 139;

  --color-border: 30 41 59;
  --color-border-muted: 51 65 85;

  --color-success: 52 211 153;
  --color-danger: 248 113 113;
  --color-warning: 251 191 36;
}

/* ── Base styles ── */
body {
  background-color: rgb(var(--color-base));
  color: rgb(var(--color-on-base));
}

html, body {
  max-width: 100%;
  /* `clip` contains horizontal overflow without creating a scroll context,
     so position:sticky on the sidebar still anchors to the viewport. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

/* Remove default focus outlines on non-interactive elements */
*:focus:not(:focus-visible) { outline: none; }
h1, h2, h3, h4, h5, h6, p, div, section { outline: none; }

/* ── Blazor error & reconnect UI ── */
#blazor-error-ui { display: none; }
#blazor-error-ui.visible { display: block; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #10b981; }
.invalid { outline: 1px solid #ef4444; }
.validation-message { color: #ef4444; font-size: 0.875rem; }

#components-reconnect-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
  align-items: center;
  justify-content: center;
}

#components-reconnect-modal::after {
  content: "Reconnecting to server...";
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.125rem;
  padding: 1.5rem 2rem;
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-on-surface));
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--color-border));
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#components-reconnect-modal.components-reconnect-failed::after {
  content: "Connection lost. Please reload the page.";
}

#components-reconnect-modal.components-reconnect-rejected::after {
  content: "Session expired. Please reload the page.";
}

/* ── Modern form inputs (used in modals/creation flows) ── */
.wb-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: rgb(var(--color-on-muted));
  margin-bottom: 0.25rem;
}

.wb-input,
.wb-select,
.wb-textarea {
  display: block;
  width: 100%;
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--color-on-base));
  background-color: rgb(var(--color-overlay));
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: border-color 120ms, box-shadow 120ms;
}

.wb-input::placeholder,
.wb-textarea::placeholder {
  color: rgb(var(--color-on-subtle));
}

.wb-input:focus,
.wb-select:focus,
.wb-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.wb-textarea { resize: vertical; }

.wb-select {
  appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem 1rem;
}

.wb-btn-primary {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  background-color: #334e7a;
  border-radius: 0.375rem;
  transition: background-color 120ms;
}
.wb-btn-primary:hover:not(:disabled) { background-color: #3d5b8e; }
.wb-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.wb-btn-ghost {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  color: rgb(var(--color-on-muted));
  transition: color 120ms;
}
.wb-btn-ghost:hover { color: rgb(var(--color-on-base)); }

/* ── Sidebar nav link styles ── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 300;
  color: rgb(var(--color-on-muted));
  transition: all 150ms;
}

.nav-link:hover {
  background-color: rgb(var(--color-overlay));
  color: rgb(var(--color-on-base));
}

.nav-link.active {
  background-color: #334e7a;
  color: white;
}

/* Mute the primary blue accent in both themes — Tailwind's default blue-600
   is indigo-leaning and glares. Use a hand-picked low-saturation navy
   (~41% sat) so buttons/highlights read as calm in both modes.
   `!important` is required because Tailwind's CDN JIT injects utility
   styles at runtime *after* this stylesheet, winning the cascade. */
.bg-blue-600 { background-color: #334e7a !important; }
.border-blue-600 { border-color: #334e7a !important; }
.text-blue-600 { color: #334e7a !important; }
.hover\:bg-blue-500:hover { background-color: #3d5b8e !important; }
.hover\:bg-blue-700:hover { background-color: #2a3f63 !important; }
.hover\:text-blue-500:hover { color: #3d5b8e !important; }
.hover\:text-blue-700:hover { color: #2a3f63 !important; }

/* Dark-only: lift text/border blues to Tailwind's standard dark-mode link
   tones so links, active tabs, pills, and active-channel rows read cleanly
   on true-dark surfaces. */
.dark .text-blue-300 { color: #bfdbfe !important; }
.dark .text-blue-400 { color: #93c5fd !important; }
.dark .hover\:text-blue-300:hover { color: #dbeafe !important; }
.dark .hover\:text-blue-500:hover { color: #bfdbfe !important; }
.dark .border-blue-400 { border-color: #93c5fd !important; }

.nav-link-sm {
  font-size: 0.9375rem;
  padding: 0.375rem 0.75rem;
  gap: 0.75rem;
}

/* ── Agenda drag-and-drop (Sortable.js) ── */
.wb-drag-handle {
  cursor: grab;
  user-select: none;
}
.wb-drag-handle:active {
  cursor: grabbing;
}
.wb-sortable-ghost {
  opacity: 0.4;
  background-color: rgb(var(--color-overlay));
}
.wb-sortable-drag {
  opacity: 0.9;
}

/* ── Custom scrollbar ── opt-in via `.wb-scrollbar` on a scrollable container.
   Thin, rounded, theme-aware thumb; transparent track. Matches dark + light. */
.wb-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.wb-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.wb-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.wb-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.wb-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.6);
  background-clip: content-box;
}
.wb-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── TipTap item editor ── */
.wb-tiptap-editor {
  min-height: 1.5rem;
}
.wb-tiptap-editor p { margin: 0; }
.wb-tiptap-editor p + p,
.wb-tiptap-editor ul + p,
.wb-tiptap-editor ol + p,
.wb-tiptap-editor h2 + p,
.wb-tiptap-editor h3 + p { margin-top: 0.25rem; }
.wb-tiptap-editor ul,
.wb-tiptap-editor ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}
.wb-tiptap-editor ul { list-style: disc; }
.wb-tiptap-editor ol { list-style: decimal; }
.wb-tiptap-editor h2 { font-size: 1.05rem; font-weight: 600; margin: 0.4rem 0 0.2rem; }
.wb-tiptap-editor h3 { font-size: 0.95rem; font-weight: 600; margin: 0.3rem 0 0.15rem; }
.wb-tiptap-editor blockquote {
  margin: 0.25rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid rgb(var(--color-border));
  color: rgb(var(--color-on-muted));
}
.wb-tiptap-editor code {
  background: rgb(var(--color-overlay));
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}
.wb-tiptap-editor p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: rgb(var(--color-on-subtle));
  float: left;
  pointer-events: none;
  height: 0;
}

.wb-bubble-menu {
  display: flex;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 0.25rem;
  gap: 0.125rem;
}
.wb-bubble-menu button {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  color: rgb(var(--color-on-muted));
  font-size: 0.8rem;
}
.wb-bubble-menu button:hover {
  background: rgb(var(--color-overlay));
  color: rgb(var(--color-on-base));
}
.wb-bubble-menu button.is-active {
  background: #2563eb;
  color: white;
}

/* ── Sage chat markdown ── */
.sage-md p { margin: 0; }
.sage-md p + p { margin-top: 0.4rem; }
.sage-md h1, .sage-md h2, .sage-md h3 { font-weight: 600; margin: 0.5rem 0 0.2rem; }
.sage-md h2 { font-size: 0.95rem; }
.sage-md h3 { font-size: 0.875rem; }
.sage-md ul, .sage-md ol { margin: 0.3rem 0; padding-left: 1.25rem; }
.sage-md ul { list-style: disc; }
.sage-md ol { list-style: decimal; }
.sage-md li { margin-bottom: 0.15rem; }
.sage-md code { background: rgba(0,0,0,0.06); padding: 0.1rem 0.3rem; border-radius: 0.2rem; font-size: 0.85em; }
/* Fenced code (incl. ```csv tables) — overflow-x lets long lines scroll inside the
   bubble instead of pushing it past max-w-[85%]. */
.sage-md pre { background: rgba(0,0,0,0.06); border-radius: 0.3rem; padding: 0.5rem 0.6rem; margin: 0.4rem 0; overflow-x: auto; max-width: 100%; font-size: 0.85em; }
.sage-md pre code { background: transparent; padding: 0; border-radius: 0; font-size: 1em; }
.sage-md em { font-style: italic; }
.sage-md strong { font-weight: 600; }
.sage-md blockquote { border-left: 2px solid #cbd5e1; padding-left: 0.5rem; color: #64748b; margin: 0.3rem 0; }

/* ── Minutes formatting ── */
.wb-minutes h1 {
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.15rem;
  color: rgb(var(--color-on-base));
}
.wb-minutes h1 + h2 {
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  color: rgb(var(--color-on-muted));
  margin: 0 0 0.75rem;
  padding-bottom: 0;
  border-bottom: none;
}
.wb-minutes h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgb(var(--color-on-base));
  margin: 1.75rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgb(var(--color-border));
}
.wb-minutes hr {
  border: none;
  border-top: 1px solid rgb(var(--color-border));
  margin: 1rem 0;
}
.wb-minutes p { margin: 0.35rem 0; line-height: 1.65; }
.wb-minutes ul, .wb-minutes ol { margin: 0.4rem 0; padding-left: 1.5rem; }
.wb-minutes ul { list-style: disc; }
.wb-minutes ol { list-style: decimal; }
.wb-minutes li { margin-bottom: 0.2rem; line-height: 1.55; }
.wb-minutes strong { font-weight: 600; }

/* Minutes callouts (Decision / Action Item). Classes applied by
   print-interop.js _applyCallouts(). Keep light-mode values close to
   the PDF output (MinutesPdfService.cs) for parity; override in dark. */
.wb-callout {
  padding: 0.4rem 0.75rem;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
  border-left-width: 3px;
  border-left-style: solid;
}
.wb-callout-decision { background: #ecfdf5; border-left-color: #10b981; color: #064e3b; }
.wb-callout-action   { background: #eff6ff; border-left-color: #3b82f6; color: #1e3a8a; }
html.dark .wb-callout-decision { background: rgba(16, 185, 129, 0.12); color: #a7f3d0; }
html.dark .wb-callout-action   { background: rgba(59, 130, 246, 0.15); color: #bfdbfe; }
/* In print, restore light-mode callout colors even if .dark is set. */
@media print {
  html.dark .wb-callout-decision { background: #ecfdf5 !important; color: #064e3b !important; }
  html.dark .wb-callout-action   { background: #eff6ff !important; color: #1e3a8a !important; }
}

/* ── Print-only styles for AgendaPrint.razor ── */
@media print {
  /* Force light-mode tokens so printouts remain readable when the app
     is in dark mode. Printing dark-on-dark renders invisible text. */
  :root, html.dark {
    --color-base: 255 255 255 !important;
    --color-surface: 255 255 255 !important;
    --color-on-base: 15 23 42 !important;
    --color-on-muted: 71 85 105 !important;
    --color-border: 203 213 225 !important;
    --color-border-muted: 226 232 240 !important;
    color-scheme: light !important;
  }

  /* Zero the page margins so the browser has nowhere to render its
     default header (date/title) and footer (URL/page number). We add
     the visual margin via body padding instead. */
  @page { margin: 0; }
  body { padding: 1.5cm 2cm !important; background: white !important; color: rgb(15 23 42) !important; }

  /* Hide the action bar (Back / Print buttons) when actually printing. */
  .wb-print-actions { display: none !important; }
  /* Keep links legible in print — no visited/hover colors. */
  a { color: inherit !important; text-decoration: none !important; }
  /* Tighten typography for paper. */
  .wb-print-item { page-break-inside: avoid; }
  section { page-break-inside: auto; }
  section + section { page-break-before: auto; }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.05rem !important; }
}