/* ═══════════════════════════════════════════════════════════════════════════
 * THE SHELL'S GLOBAL STYLES (Violet Rooms; cleanup plan, Task 8h).
 *
 * Violet Security's shell carried these in an inline <style> in base.html.
 * Rewriting base.html for Rooms (7e65b3dc) kept part of it and the client's
 * room (portal/base.html) never had any of it, so the two sides of the same
 * product drew their selects, tables and markdown differently: the room's
 * selects had no chevron and its tables were a size larger than the
 * consultancy's. One file now, loaded by BOTH shells:
 *
 *   trauma/templates/base.html            the consultancy
 *   trauma/templates/portal/base.html     the client's room
 *
 * after violet-system.css, so it wins where they meet. Only what Rooms
 * draws is here; the rules that served Violet Security's screens alone
 * (charts' tooltips, the AI markdown renderer, the sidebar's active-state
 * script) stayed behind.
 *
 * Sections: 1. page rhythm · 2. tables · 3. enhanced selects (Tom Select)
 *           4. markdown (.prose) · 5. the loading bar
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Page rhythm ──────────────────────────────────────────────────────────
   The title starts 20px under the top bar, on every page of the consultancy
   (Nerea, 12-nov-2026: "Salas" sat glued to the bar). It is Violet
   Security's own answer to the same complaint, its GRC rhythm (components.css,
   `data-module="grc"`): bar -> header row 20px, the header row as tall as
   the md button (36px) so the h1 sits at the same height with or without
   actions. components.css's 12px carries !important, so this does too. */
.vs-shell-main .content-area > div {
  padding-top: 1.25rem !important;
}
.vs-shell-main .content-area .page-header-row {
  min-height: 2.25rem;
}

/* ── 2. Tables ───────────────────────────────────────────────────────────────
   Every table inside #content-area has the product's density, whether or
   not it is the generic table component: 11px uppercase headings, 13px
   cells. It lived in project.css, which the client's room does not load, so
   the room's tables were drawn at the browser's 16px. */
#content-area table:not(.fc-scrollgrid):not(.flatpickr-calendar *) thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dm-muted, #6b7280);
  padding: 10px 12px;
  background: var(--dm-bg-alt, #f9fafb);
  border-bottom: 1px solid var(--dm-border, #e5e7eb);
  white-space: nowrap;
}
#content-area table:not(.fc-scrollgrid) tbody td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: middle;
  border-bottom: 1px solid var(--dm-border-light, #f3f4f6);
}
#content-area table:not(.fc-scrollgrid) tbody tr {
  transition: background-color 0.1s ease;
}
#content-area table:not(.fc-scrollgrid) tbody tr:hover {
  background-color: var(--vs-surface-2);
}

/* ── 3. Enhanced selects (Tom Select) ────────────────────────────────────────
   One select (CLAUDE.md): every <select data-select> is enhanced by
   js/select_field.js, and these rules make it look like the product's
   field, at --vs-filter-h inside a filter bar or wherever it carries
   `.vs-filter-control`. */
/* Reset all Tom Select styles */
.ts-wrapper,
.ts-wrapper *,
.ts-wrapper *::before,
.ts-wrapper *::after {
  box-sizing: border-box;
}
.ts-wrapper {
  width: 100%;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control:hover {
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  padding: 0.625rem 2.5rem 0.625rem 1rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  min-height: auto !important;
  height: auto !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
/* The tenant's colour, not Bootstrap blue: every enhanced select in the
   product used to flash #3b82f6 on focus in a white-labelled install. */
.ts-wrapper.single.focus .ts-control {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
  outline: none !important;
}
/* Input for search */
.ts-wrapper .ts-control > input {
  font-size: 0.875rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* ── A FILTER BAR OVERRIDES ALL OF THE ABOVE ──────────────────
 *
 * Everything in this block is !important, so components.css cannot reach
 * it whatever it says (it was inline in base.html until Task 8h; the rules
 * are the same, only the file changed). Which is why the filter row kept
 * drawing the person picker ~50px tall (`padding: .625rem` + `height:
 * auto`) beside 36px date and search boxes, and why editing
 * components.css looked like it did nothing.
 *
 * A first attempt excluded `.vs-filter-control`, on the theory that Tom
 * Select copies the original select's classes onto its wrapper. That
 * missed the control that looked worst: the person picker is
 * `.vs-user-picker` and never carries `.vs-filter-control` at all.
 *
 * So the scope is the ANCESTOR — `.vs-filter`, the filter card itself —
 * which is true for every enhanced control in a filter bar regardless
 * of what classes it carries. Same weapon, later in the same file, so
 * it wins cleanly. Filter metrics live in --vs-filter-h.
 *
 * AND a select that carries `.vs-filter-control` OUTSIDE a filter bar
 * (the delivery board's area picker in the page header, toolbars,
 * bulk-action rows). Tom Select copies that class onto its wrapper, so
 * without these the wrapper drew the filter box and the control drew
 * this file's 42px box inside it, 13px to the right: two boxes. */
.vs-filter .ts-wrapper .ts-control,
.vs-filter .ts-wrapper .ts-control:hover,
.vs-filter .ts-wrapper.single .ts-control,
.vs-filter .ts-wrapper.single .ts-control:hover,
.ts-wrapper.vs-filter-control .ts-control,
.ts-wrapper.vs-filter-control .ts-control:hover {
  height: var(--vs-filter-h) !important;
  min-height: var(--vs-filter-h) !important;
  padding: 0 2rem 0 0.75rem !important;
  font-size: 13px !important;
  line-height: calc(var(--vs-filter-h) - 2px) !important;
  border-radius: var(--vs-filter-radius) !important;
  border-color: var(--vs-filter-border) !important;
  display: flex !important;
  align-items: center !important;
}
/* The wrapper is only a positioning shell. It must not draw a second
   box around the control, nor grow past it. */
.vs-filter .ts-wrapper,
.ts-wrapper.vs-filter-control {
  height: var(--vs-filter-h) !important;
  min-height: var(--vs-filter-h) !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.vs-filter .ts-wrapper .ts-control > input,
.vs-filter .ts-wrapper .ts-control > .item,
.ts-wrapper.vs-filter-control .ts-control > input,
.ts-wrapper.vs-filter-control .ts-control > .item {
  font-size: 13px !important;
  line-height: normal !important;
}

/* Selected text */
.ts-wrapper.single .ts-control .item {
  color: #374151 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: calc(100% - 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The chevron. Every control that opens a list carries it, in a filter bar
   too: violet-system.css used to hide it there (`.vs-filter .ts-control::after`),
   so a closed filter select read as a text box (Task 8h). */
.ts-wrapper.single .ts-control::after {
  content: '' !important;
  border: none !important;
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1rem !important;
  height: 1rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: none !important;
}
/* Dropdown */
.ts-dropdown {
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  margin-top: 4px !important;
  background: #fff !important;
  z-index: 1000 !important;
  padding: 0 !important;
}
.ts-dropdown .ts-dropdown-content {
  max-height: 280px;
  padding: 0.25rem 0;
  overflow-y: auto;
}
.ts-dropdown .option {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  color: #374151 !important;
  background: #fff !important;
  cursor: pointer !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: #f3f4f6 !important;
}
.ts-dropdown .option.selected {
  background-color: color-mix(in srgb, var(--color-primary) 8%, white) !important;
  color: var(--color-primary) !important;
}
.ts-dropdown .no-results {
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  color: #6b7280 !important;
}
.ts-wrapper .ts-control > input::placeholder {
  color: #9ca3af !important;
}

/* ── 4. Markdown (.prose) ────────────────────────────────────────────────────
   Text the consultancy writes in Markdown (a finding's description, a
   service) renders as .prose. Tailwind's typography plugin is not built in,
   so these are the product's own rules. */
.prose { color: var(--vs-ink-2); font-size: 13px; line-height: 1.6; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 700; color: var(--vs-ink); margin: 1.2em 0 .5em; line-height: 1.3; }
.prose h1 { font-size: 1.35em; }
.prose h2 { font-size: 1.2em; }
.prose h3 { font-size: 1.08em; }
.prose h4 { font-size: 1em; }
.prose p { margin: .6em 0; }
.prose ul, .prose ol { margin: .6em 0; padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .25em 0; }
.prose strong { font-weight: 700; color: var(--vs-ink); }
.prose em { font-style: italic; }
.prose code { background: var(--vs-surface-3); color: var(--vs-ink); padding: .1em .35em; border-radius: 4px; font-size: .92em; font-family: ui-monospace, SFMono-Regular, monospace; }
.prose pre { background: #0f172a; color: #e2e8f0; padding: .9em 1em; border-radius: 8px; overflow-x: auto; margin: .8em 0; font-size: .85em; }
.prose pre code { background: transparent; color: inherit; padding: 0; }
.prose blockquote { border-left: 3px solid var(--vs-rule); background: var(--vs-surface-2); padding: .6em 1em; margin: .8em 0; color: var(--vs-ink-2); border-radius: 0 6px 6px 0; }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose table { border-collapse: collapse; margin: .8em 0; width: 100%; font-size: .92em; }
.prose th, .prose td { border: 1px solid var(--vs-rule); padding: .4em .6em; text-align: left; }
.prose th { background: var(--vs-surface-2); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--vs-rule); margin: 1em 0; }

/* ── 5. The loading bar ──────────────────────────────────────────────────────
   #loading-bar (both shells) is an htmx indicator: a 2px rule in the
   brand's colour, drawn across the top only while a request is in flight. */
#loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
  pointer-events: none;
}
#loading-bar.htmx-request { transform: scaleX(1); }