/* Reusable UI components. BEM-lite naming: .block, .block__elem, .block--mod */

/* ─── Button ───────────────────────────────────────────────────────────── */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    text-align: center;
    cursor: pointer;
    transition:
        background var(--motion-fast) var(--easing),
        border-color var(--motion-fast) var(--easing),
        color var(--motion-fast) var(--easing);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* An `<a>` cannot be `:disabled`, so link-buttons that are conditionally
   unavailable (the Create case actions) carry `aria-disabled` instead and must
   look the same as a disabled button. */
.button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Compact size for buttons living inside table rows, where the default
   `--fs-base` control is taller than the row's own line box. */
.button--sm {
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.button--sm .icon {
    width: var(--fs-base);
    height: var(--fs-base);
}

/* Icon-only button: square, so a destructive action can sit in a crowded
   footer without spending a label's worth of width on it. Always pair with an
   `aria-label` — the glyph is the only thing left. */
.button--icon {
    padding: var(--space-2);
    aspect-ratio: 1;
}

.button--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}

.button--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    color: var(--color-primary-fg);
    text-decoration: none;
}

.button--secondary {
    background: var(--color-bg);
    color: var(--color-fg);
    border-color: var(--color-border);
}

.button--secondary:hover:not(:disabled) {
    border-color: var(--color-border-strong);
}

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

.button--ghost:hover:not(:disabled) {
    background: var(--color-surface-muted);
    color: var(--color-fg);
}

.button--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* ─── Form fields ──────────────────────────────────────────────────────── */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.field__hint,
.field__error {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.field__hint  { color: var(--color-fg-subtle); }
.field__error { color: var(--color-danger-fg); }

.field__error--icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.field__error--icon .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Inline label decorations for required / optional fields. */
.field__required {
    color: var(--color-required);
    font-weight: var(--fw-medium);
}

.field__optional {
    color: var(--color-fg-subtle);
    font-weight: var(--fw-regular);
}

.input {
    background: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    transition:
        border-color var(--motion-fast) var(--easing),
        box-shadow var(--motion-fast) var(--easing);
    width: 100%;
}

.input::placeholder {
    color: var(--color-fg-subtle);
}

.input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.15);
}

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

/* ─── Badge ────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.badge--info     { background: var(--color-info-bg);     color: var(--color-info-fg); }
.badge--success  { background: var(--color-success-bg);  color: var(--color-success-fg); }
.badge--warning  { background: var(--color-warning-bg);  color: var(--color-warning-fg); }
.badge--danger   { background: var(--color-danger-bg);   color: var(--color-danger-fg); }
.badge--neutral  { background: var(--color-neutral-bg);  color: var(--color-neutral-fg); }
.badge--accent   { background: var(--color-accent-bg);   color: var(--color-accent-fg); }
/* Semantic aliases used by the vendor import success table to label
   each row as a new vendor or an updated existing one. */
.badge--new      { background: var(--color-success-bg);  color: var(--color-success-fg); }
.badge--update   { background: var(--color-info-bg);     color: var(--color-info-fg); }
/* Used to flag a discontinued product (not seen in the latest scan). */
.badge--muted    { background: var(--color-neutral-bg);  color: var(--color-fg-muted); }

/* ─── Card ─────────────────────────────────────────────────────────────── */

.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.card__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.card__subtitle {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    margin: var(--space-1) 0 0;
}

.card__eyebrow {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.card__value {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

/* ─── Page header ──────────────────────────────────────────────────────── */

.page-title {
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.page-subtitle {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-fg-muted);
    margin: 0;
}

/* ─── Icon (inline SVG) ────────────────────────────────────────────────── */

.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

/* ─── Sidebar nav ──────────────────────────────────────────────────────── */

.nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--nav-item-height);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 110%;
    font-weight: var(--fw-semibold);
    color: var(--color-fg-muted);

    /* Allow `<button class="nav__item">` to look identical to `<a class="nav__item">`. */
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.nav__item .icon {
    width: 16px;
    height: 16px;
}

.nav__item:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.nav__item--active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.nav__label {
    flex: 1;
}

.nav__new-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav__new-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.nav__new-tooltip {
    position: absolute;
    left: calc(100% + var(--space-2));
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-dropdown);
    display: none;
    width: max-content;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-fg);
    color: var(--color-bg);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
}

.nav__item:hover .nav__new-tooltip,
.nav__item:focus .nav__new-tooltip {
    display: block;
}

/* ─── App header alerts ───────────────────────────────────────────────── */

.new-violations-header {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-fg-strong);
}

.new-violations-header__dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.new-violations-header__text {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    color: var(--color-fg-strong);
}

.new-violations-header__button {
    min-height: var(--header-alert-button-height);
    gap: var(--header-alert-button-gap);
    padding: var(--header-alert-button-padding-y) var(--header-alert-button-padding-x);
    border: 0;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    line-height: var(--header-alert-button-line-height);
}

/* ─── Toolbar (search + filters + actions) ─────────────────────────────── */

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.toolbar--filters {
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Every interactive element in the toolbar shares the same height, so search,
   sort, and buttons line up on a single baseline. */
.toolbar .input,
.toolbar .button,
.toolbar__sort,
.toolbar__sort-group,
.toolbar__search {
    height: var(--toolbar-control-height);
}

.toolbar .input,
.toolbar .button {
    padding-top: 0;
    padding-bottom: 0;
}

.toolbar__search {
    flex: 0 1 360px;
    min-width: 240px;
    position: relative;
}

.toolbar__search .icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-fg-subtle);
    pointer-events: none;
}

.toolbar__search .input {
    padding-left: calc(var(--space-3) + var(--icon-size) + var(--space-2));
}

/* Search/filter loading state. Every index toolbar is a `form.toolbar--filters`
   with `hx-get` on the form, so HTMX adds `htmx-request` to the form while a
   filter request is in flight. During that window we swap the static search
   glyph for a spinner so typing (or changing a filter) on a large list reads as
   "working" instead of looking frozen. Pure-CSS, so it covers every search bar
   with no per-page markup. The spinner only appears once the debounced request
   actually fires — i.e. during the server round-trip the user is waiting on. */
.toolbar--filters.htmx-request .toolbar__search .icon {
    opacity: 0;
}

.toolbar--filters.htmx-request .toolbar__search::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--space-3);
    width: var(--icon-size);
    height: var(--icon-size);
    margin-top: calc(var(--icon-size) / -2);
    border: 2px solid var(--color-primary-soft);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner-rotate 0.9s linear infinite;
    pointer-events: none;
}

/* Pushes everything after it to the right edge of the toolbar. */
.toolbar__spacer {
    flex: 1;
}

/* Borderless inline "Sort by: <Name>" control. The native chevron stays. */
.toolbar__sort-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.toolbar__sort-label {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

/* Borderless `<select>` with a tightly-spaced custom chevron.
   `appearance: none` strips the native widget so the chevron sits flush
   against the option text instead of being pushed to the right edge. */
.toolbar__sort {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;

    border: 0;
    padding: 0 20px 0 0;

    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    color: var(--color-fg);
    cursor: pointer;
}

.toolbar__sort:focus {
    outline: none;
}

.toolbar__sort::-ms-expand {
    display: none;
}

/* Labeled filter controls used by index-page toolbars where the label sits
   above a native select, matching the Scans page design. */
.toolbar__filter {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.toolbar__filter--search {
    flex: 0 1 360px;
    min-width: 240px;
}

.toolbar__filter--sm {
    flex-basis: 140px;
}

.toolbar__filter-label {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    color: var(--color-fg-muted);
}

.toolbar__filter .input {
    height: var(--toolbar-control-height);
}

.toolbar__filter .toolbar__search {
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
}

.toolbar__filter--full-row {
    flex: 1 0 100%;
}

.toolbar__search--full {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}

.toolbar__filter select.input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: calc(var(--space-3) + 16px + var(--space-2));
}

.toolbar__filter select.input::-ms-expand {
    display: none;
}

/* ─── Policies page ───────────────────────────────────────────────────── */

/* Pill tab bar. `.pill-tabs` is the shared name (rendered by the `pill_tabs`
   macro in `templates/components/tabs.html`, used by the Violations page);
   `.policy-tabs` is the original name still hand-written by the Policies,
   Policy-categories, Policy-packs, and Management pages. Both resolve to these
   rules, so those pages can migrate to the macro incrementally without a visual
   change. Do not fork the declarations. */
.pill-tabs,
.policy-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.pill-tabs__item,
.policy-tabs__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.pill-tabs__item--active,
.policy-tabs__item--active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.pill-tabs__item:disabled,
.policy-tabs__item:disabled {
    cursor: not-allowed;
}

/* Underline tab bar (`underline_tabs` macro in `templates/components/tabs.html`).
   Visually close to `.section-tabs` below (thin shared baseline, colored
   active underline) but these are ordinary navigation links that switch a
   server-rendered view — not a sticky scroll-spy anchor bar — so it stays a
   separate block rather than reusing `.section-tabs`'s sticky/scroll
   semantics. Used by the Admin panel's organization detail page
   (Users / Merchants / Settings). */
.underline-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.underline-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 0 var(--space-3);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-fg-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 150%;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}

.underline-tabs__item:hover {
    color: var(--color-fg-strong);
}

.underline-tabs__item--active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

.underline-tabs__icon {
    display: inline-flex;
    color: currentColor;
}

.underline-tabs__icon .icon {
    width: var(--fs-base);
    height: var(--fs-base);
}

/* Section tab bar — underlined in-page navigator for a long detail page
   (Merchant detail). Distinct from `.pill-tabs`, which switches server-rendered
   views: this one only scrolls, so it reads as an underline rather than a
   selected pill. Sticks under the app header while the page scrolls. */
.section-tabs {
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
    /* Scrollable so the six tabs stay reachable on a narrow viewport, but the
       scrollbar itself is hidden: on Linux/GTK an always-visible scrollbar
       renders steppers next to the bar that read as a broken control. The bar
       overflows rarely enough that a visible affordance is not worth that. */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.section-tabs::-webkit-scrollbar {
    display: none;
}

.section-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-1);
    /* Sits on top of the bar's own 1px rule so the active underline replaces
       it rather than stacking a second line beneath. */
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-fg-subtle);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--easing);
}

.section-tabs__item:hover {
    color: var(--color-fg);
}

.section-tabs__item--active {
    border-bottom-color: var(--color-fg-strong);
    color: var(--color-fg-strong);
    font-weight: var(--fw-semibold);
}

.section-tabs__icon {
    display: inline-flex;
    color: currentColor;
}

.section-tabs__icon .icon {
    width: var(--fs-base);
    height: var(--fs-base);
}

/* Anchored sections must clear the sticky bar; without this the tab bar covers
   the heading of whatever section was just jumped to. */
[data-section-target] {
    scroll-margin-top: var(--section-tabs-scroll-offset);
}

.policy-filter-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.policy-filter-card__versions {
    flex-basis: 220px;
}

.policy-library-create-menu {
    position: relative;
    display: inline-flex;
}

.policy-library-create-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    width: 340px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.policy-library-create-menu__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.policy-library-create-menu__item:last-child {
    border-bottom: 0;
}

.policy-library-create-menu__item:hover {
    background: var(--color-table-header-bg);
}

.policy-library-create-menu__title {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-library-create-menu__description {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
}

.icon-button:hover:not(:disabled) {
    background: var(--color-surface-muted);
    color: var(--color-fg);
}

.icon-button--danger {
    color: var(--color-danger-fg);
}

.icon-button--danger:hover:not(:disabled) {
    background: var(--color-danger-bg);
}

.policy-library-results,
.policy-library-tree {
    display: grid;
    gap: var(--space-4);
}

.policy-library-create-slot:empty {
    display: none;
}

.policy-library-add-category {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.policy-library-add-category:hover {
    background: var(--color-table-header-bg);
    color: var(--color-primary-hover);
}

.policy-library-composer {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.policy-library-composer__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.policy-library-composer__header .input {
    border-color: transparent;
    background: var(--color-primary-soft);
}

.policy-library-composer__header .input:focus {
    border-color: var(--color-primary);
    background: var(--color-bg);
}

.policy-library-composer__header .input--error,
.policy-library-composer__header .input--error:focus {
    border-color: transparent;
    background: var(--color-bg);
    color: var(--color-fg-subtle);
}

.policy-library-composer__error {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-danger-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.policy-library-composer__error .icon {
    flex: 0 0 auto;
}

.policy-library-composer__footer,
.policy-library-composer-area,
.policy-library-composer-policy {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.policy-library-composer__name,
.policy-library-composer-area > .input,
.policy-library-composer-policy > .input {
    flex: 1 1 auto;
}

.policy-library-composer__areas,
.policy-library-composer-area__policies {
    display: grid;
    gap: var(--space-3);
}

.policy-library-composer-area {
    flex-direction: column;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.policy-library-composer-policy {
    align-items: center;
}

.policy-library-composer-policy__note,
.policy-library-empty {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-library-add-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.policy-library-add-link:hover {
    color: var(--color-primary-hover);
}

.policy-library-category,
.policy-library-area {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}

.policy-library-category__summary,
.policy-library-area__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    cursor: pointer;
    list-style: none;
}

.policy-library-area__summary {
    padding: var(--space-3);
}

.policy-library-category__summary::-webkit-details-marker,
.policy-library-area__summary::-webkit-details-marker {
    display: none;
}

.policy-library-category__chevron,
.policy-library-area__chevron {
    color: var(--color-fg-muted);
    transition: transform 150ms ease;
}

.policy-library-category[open] > .policy-library-category__summary .policy-library-category__chevron,
.policy-library-area[open] > .policy-library-area__summary .policy-library-area__chevron {
    transform: rotate(180deg);
}

.policy-library-category__name-slot,
.policy-library-area__title,
.policy-library-policy-row__name {
    min-width: 0;
    color: var(--color-fg);
    font-weight: var(--fw-semibold);
}

.policy-library-category__meta,
.policy-library-area__meta,
.policy-library-policy-row__meta {
    margin-left: auto;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    white-space: nowrap;
}

.policy-library-category__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.policy-library-category__body {
    display: grid;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4) var(--space-8);
}

.policy-library-area {
    background: var(--color-table-header-bg);
}

.policy-library-area__body {
    display: grid;
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-3) var(--space-8);
}

.policy-library-area__description {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-library-policy-list {
    display: grid;
    gap: var(--space-2);
}

.policy-library-policy-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.policy-library-empty--inline {
    margin: 0;
}

.policy-library-empty-state {
    padding: var(--space-8);
}

.policy-library-name-editor {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.policy-library-name-editor__form {
    display: none;
    align-items: flex-start;
    gap: var(--space-2);
}

.policy-library-name-editor.is-editing .policy-library-name-editor__view {
    display: none;
}

.policy-library-name-editor.is-editing .policy-library-name-editor__form {
    display: inline-flex;
}

.policy-library-delete-modal {
    max-width: 880px;
}

.policy-library-delete-modal__body {
    padding: var(--space-4);
}

.policy-library-delete-modal__prompt {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.policy-library-delete-modal__prompt-icon {
    display: inline-flex;
    color: var(--color-danger-fg);
    flex: 0 0 auto;
    margin-top: var(--space-1);
}

.policy-library-delete-modal__question {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-library-delete-modal__copy {
    margin: var(--space-1) 0 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-library-delete-modal__warning {
    margin: 0;
    color: var(--color-danger-fg);
    font-weight: var(--fw-medium);
}

.policy-library-delete-modal__summary {
    display: flex;
    gap: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-library-delete-modal__preview,
.policy-library-delete-modal__area {
    display: grid;
    gap: var(--space-2);
}

.policy-library-delete-modal__area {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.policy-library-delete-modal__area-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.policy-library-delete-modal__area-chevron {
    display: inline-flex;
    color: var(--color-fg-muted);
}

.policy-library-delete-modal__area-chevron .icon {
    width: 16px;
    height: 16px;
}

.policy-library-delete-modal__area strong {
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-library-delete-modal__area ul,
.policy-library-delete-modal__area p {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-library-delete-modal__area ul {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
}

.policy-library-delete-modal__area li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-library-delete-modal__policy-grip {
    color: var(--color-fg-subtle);
    font-family: var(--font-mono);
    letter-spacing: -0.08em;
}

.policy-library-delete-modal .modal__footer .button {
    flex: 1 1 0;
}

.policy-library-delete-modal__submit {
    flex: 1 1 auto;
    border-color: var(--color-danger-fg);
    background: var(--color-danger-fg);
    color: var(--color-primary-fg);
}

.policy-library-delete-modal__submit:hover:not(:disabled) {
    border-color: var(--color-danger-fg);
    background: var(--color-danger-fg);
    color: var(--color-primary-fg);
}

.policy-area-policy-picker {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.policy-area-policy-picker__list {
    display: grid;
    gap: var(--space-2);
    max-height: 180px;
    overflow-y: auto;
}

.policy-area-policy-picker__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-packs-table__col-name { width: 34%; }
.policy-packs-table__col-version { width: 16%; }
.policy-packs-table__col-updated { width: 22%; }
.policy-packs-table__col-policies { width: 14%; }
.policy-packs-table__col-actions { width: 14%; }

.recipes-table__col-name { width: 26%; }
.recipes-table__col-purpose { width: 16%; }
.recipes-table__col-version { width: 10%; }
.recipes-table__col-updated { width: 18%; }
.recipes-table__col-steps { width: 10%; }
.recipes-table__col-actions { width: 20%; }

.recipes-table__key {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.drawer--wide {
    width: min(760px, 100vw);
}

.recipe-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.recipe-steps__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.recipe-steps__title {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
}

.recipe-steps__table {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.recipe-steps__table--detail {
    overflow: visible;
}

.recipe-steps__row {
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1.45fr) minmax(0, 1.1fr) minmax(0, 1.35fr) var(--space-8);
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.recipe-steps__row + .recipe-steps__row {
    border-top: 1px solid var(--color-border);
}

.recipe-steps__row--head {
    background: var(--color-table-header-bg);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recipe-steps__order {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-variant-numeric: tabular-nums;
}

.recipe-steps__row .input {
    height: var(--toolbar-control-height);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    min-width: 0;
}

.recipe-steps__row select.input {
    padding-right: calc(var(--space-3) + var(--icon-size));
}

.recipe-steps__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-danger-fg);
    cursor: pointer;
}

.recipe-steps__delete:hover {
    background: var(--color-danger-bg);
}

.recipe-steps__delete .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.recipe-steps__add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.policy-pack-row--global {
    background: var(--color-success-bg);
}

.policy-pack-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.policy-pack-default-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-success-fg);
}

.policy-pack-drawer__textarea {
    min-height: 120px;
    resize: vertical;
}

.policy-pack-drawer__selector {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-height: 354px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.policy-pack-drawer__selector--error {
    border-color: var(--color-danger-fg);
}

.policy-pack-drawer__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.policy-pack-drawer__search {
    position: relative;
    display: block;
}

.policy-pack-drawer__search-icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--color-fg-subtle);
    pointer-events: none;
    transform: translateY(-50%);
}

.policy-pack-drawer__search-icon .icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.policy-pack-drawer__search .input {
    height: var(--toolbar-control-height);
    padding-left: calc(var(--space-3) + var(--icon-size) + var(--space-2));
}

.policy-pack-drawer__category-list {
    display: grid;
    gap: var(--space-2);
}

.policy-pack-category {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
}

.policy-pack-category__summary {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
    background: var(--color-table-header-bg);
}

.policy-pack-category__summary::-webkit-details-marker {
    display: none;
}

.policy-pack-category__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.policy-pack-category__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-muted);
    transition: transform var(--motion-fast) var(--easing);
}

.policy-pack-category:not([open]) .policy-pack-category__chevron {
    transform: rotate(-90deg);
}

.policy-pack-category__checkbox {
    flex: 0 0 auto;
    accent-color: var(--color-fg-muted);
}

.policy-pack-category__name {
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-pack-category__count,
.policy-pack-policy-row__id {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.policy-pack-category__body {
    display: grid;
    max-height: 168px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg);
}

.policy-pack-policy-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    cursor: pointer;
}

.policy-pack-policy-row:hover {
    background: var(--color-surface);
}

.policy-pack-policy-row[hidden],
.policy-pack-category[hidden] {
    display: none;
}

.policy-pack-policy-row__name {
    min-width: 0;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-pack-drawer__empty {
    padding: var(--space-5);
}

.policy-pack-detail {
    max-width: 960px;
    margin: 0 auto;
}

.policy-pack-detail__header,
.policy-pack-detail__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.policy-pack-detail__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.policy-pack-detail__actions {
    justify-content: flex-end;
}

.policy-pack-detail__card {
    padding: var(--space-5);
}

.policy-pack-detail__name-row {
    gap: var(--space-2);
}

.policy-pack-detail__name-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
}

.policy-pack-detail__updated {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.policy-pack-detail__selector {
    padding: 0;
    border: 0;
    min-height: 0;
}

.policy-pack-detail__card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.policy-pack-versions {
    display: grid;
    gap: var(--space-3);
}

.policy-pack-version {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
}

.policy-pack-version--current {
    border-color: var(--color-primary-soft);
}

.policy-pack-version__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
}

.policy-pack-version__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-pack-version__date,
.policy-pack-version__label,
.policy-pack-version__group-name {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.policy-pack-version__body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.policy-pack-version__group {
    display: grid;
    gap: var(--space-1);
}

.policy-pack-version__group-name {
    color: var(--color-fg);
    font-weight: var(--fw-semibold);
}

.policy-pack-version__list {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-area-detail {
    max-width: 960px;
    margin: 0 auto;
    gap: var(--space-4);
}

.policy-area-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.policy-area-detail__delete {
    padding: var(--space-2) var(--space-3);
    border-color: var(--color-danger-bg);
    background: var(--color-bg);
    color: var(--color-danger-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
}

.policy-area-detail__delete:hover:not(:disabled) {
    border-color: var(--color-danger-fg);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.policy-area-detail__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
}

.policy-area-detail__card {
    padding: var(--space-4);
}

.policy-area-detail__card > .field + .field {
    margin-top: var(--space-4);
}

.policy-area-detail__name-row {
    gap: var(--space-2);
}

.policy-area-detail__name-control {
    display: block;
}

.policy-area-detail__name-control .input {
    width: 100%;
}

.policy-area-detail__textarea {
    min-height: 72px;
    resize: vertical;
}

.policy-area-detail__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.policy-area-detail__updated {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.policy-area-detail__policy-selector {
    display: grid;
    gap: var(--space-3);
}

.policy-area-detail__search {
    position: relative;
    display: block;
    max-width: 100%;
}

.policy-area-detail__search .input {
    width: 100%;
    padding-left: var(--space-10);
}

.policy-area-detail__search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    display: inline-flex;
    color: var(--color-fg-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.policy-area-detail__search-icon .icon {
    width: 16px;
    height: 16px;
}

.policy-area-detail__policy-list,
.policy-area-detail__versions {
    display: grid;
}

.policy-area-detail__policy-list {
    max-height: 352px;
    overflow-y: auto;
    gap: 0;
    border: 1px solid var(--color-surface-muted);
    border-radius: var(--radius-md);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

.policy-area-detail__policy-list::-webkit-scrollbar {
    width: 6px;
}

.policy-area-detail__policy-list::-webkit-scrollbar-track {
    background: transparent;
}

.policy-area-detail__policy-list::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
}

.policy-area-detail__versions {
    gap: var(--space-2);
}

.policy-area-detail__policy-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--color-surface-muted);
    border-radius: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-area-detail__policy-row:last-of-type {
    border-bottom: 0;
}

.policy-area-detail__policy-row[hidden] {
    display: none;
}

.policy-area-detail__policy-name {
    min-width: 0;
    font-weight: var(--fw-medium);
}

.policy-area-detail__policy-meta {
    color: var(--color-fg-muted);
    white-space: nowrap;
}

.policy-area-detail__card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.policy-area-detail__meta-row .policy-area-detail__card-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

.policy-area-detail-version {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
}

.policy-area-detail-version--current {
    border-color: var(--color-primary-soft);
}

.policy-area-detail-version__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
}

.policy-area-detail-version__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-area-detail-version__date,
.policy-area-detail-version__label {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.policy-area-detail-version__body,
.policy-area-detail-version__summary {
    display: grid;
    gap: var(--space-3);
}

.policy-area-detail-version__body {
    padding: var(--space-4);
}

.policy-area-detail-version__summary p {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-area-detail-version__list {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-detail {
    max-width: 960px;
    margin: 0 auto;
    gap: var(--space-4);
}

.policy-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.policy-detail__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
}

.policy-detail__delete {
    padding: var(--space-2) var(--space-3);
    border-color: var(--color-danger-bg);
    background: var(--color-bg);
    color: var(--color-danger-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
}

.policy-detail__delete:hover:not(:disabled) {
    border-color: var(--color-danger-fg);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.policy-detail__card {
    padding: var(--space-4);
}

.policy-detail__card > .field,
.policy-detail__card > .policy-detail__field-grid {
    margin-bottom: var(--space-4);
}

.policy-detail__field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.policy-detail__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.policy-detail__upload-button {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    cursor: pointer;
}

.policy-detail__upload-button .icon {
    width: 16px;
    height: 16px;
}

.policy-detail__file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.policy-detail__textarea {
    min-height: 180px;
    resize: vertical;
}

.policy-detail__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.policy-detail__updated {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.policy-detail__card-actions {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.policy-detail__versions {
    display: grid;
    gap: var(--space-2);
}

.policy-detail-version {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
}

.policy-detail-version--current {
    border-color: var(--color-primary-soft);
}

.policy-detail-version__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
}

.policy-detail-version__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-detail-version__date {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.policy-detail-version__body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.policy-detail-version__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-detail-version__summary strong {
    color: var(--color-fg);
}

.policy-detail-version__text {
    max-height: 160px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-detail-delete-modal__body {
    align-items: center;
    text-align: center;
}

.policy-detail-delete-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.policy-detail-delete-modal__icon .icon {
    width: 22px;
    height: 22px;
}

.policy-detail-delete-modal__copy {
    display: grid;
    gap: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-detail-delete-modal__copy strong {
    color: var(--color-fg);
    font-size: var(--fs-base);
}

.policy-detail-delete-modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.policy-detail-delete-modal__submit {
    background: var(--color-danger-fg);
    border-color: var(--color-danger-fg);
}

.policy-detail-change-modal__body {
    gap: var(--space-4);
}

@media (max-width: 760px) {
    .policy-detail__header,
    .policy-detail__meta-row,
    .policy-detail__label-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .policy-detail__field-grid,
    .policy-detail-delete-modal__footer {
        grid-template-columns: 1fr;
    }
}

.recipe-detail {
    max-width: 960px;
    margin: 0 auto;
}

.recipe-detail__header,
.recipe-detail__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.recipe-detail__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.recipe-detail__actions {
    justify-content: flex-end;
}

.recipe-detail__card {
    padding: var(--space-5);
}

.recipe-detail__field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.4fr);
    gap: var(--space-4);
    align-items: start;
}

.recipe-detail__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.recipe-detail__card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.recipe-detail__steps {
    margin-top: var(--space-4);
}

.recipe-version {
    display: block;
}

.recipe-version__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
}

.recipe-version__details {
    min-width: 0;
}

.recipe-version__details > summary {
    list-style: none;
    cursor: pointer;
}

.recipe-version__details > summary::-webkit-details-marker {
    display: none;
}

.recipe-version__action {
    padding: var(--space-4) var(--space-4) 0 0;
}

.recipe-version__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.recipe-version__chevron {
    display: inline-flex;
    color: var(--color-fg-muted);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.recipe-version__details[open] .recipe-version__chevron {
    transform: rotate(180deg);
}

.recipe-version__table {
    background: var(--color-bg);
}

.recipe-version__table td,
.recipe-version__table th {
    white-space: normal;
}

.recipe-version__col-step { width: 12%; }
.recipe-version__col-tool { width: 38%; }
.recipe-version__col-depends { width: 22%; }
.recipe-version__col-mode { width: 28%; }

@media (max-width: 720px) {
    .recipe-detail__header,
    .recipe-detail__field-grid {
        grid-template-columns: 1fr;
    }

    .recipe-version__row {
        grid-template-columns: 1fr;
    }

    .recipe-version__action {
        padding: 0 var(--space-4) var(--space-4);
    }

    .recipe-detail__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.policy-pack-save-modal,
.policy-pack-delete-modal {
    max-width: 420px;
}

.policy-pack-save-modal__body,
.policy-pack-delete-modal__body {
    padding: var(--space-5) var(--space-6);
}

.policy-pack-save-option {
    display: grid;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.policy-pack-save-option:hover:not(:disabled),
.policy-pack-save-option:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.policy-pack-save-option:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.policy-pack-save-option__title {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-pack-save-option__text,
.policy-pack-delete-modal__copy,
.policy-pack-delete-modal__hint {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.table__link-button {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.policy-version-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-semibold);
}

.policy-version-badge--current {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.policy-drawer__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.policy-drawer__upload {
    cursor: pointer;
}

.policy-drawer__readonly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.policy-drawer__readonly-label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.policy-drawer__readonly-value {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
}

.policy-drawer__version {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.policy-drawer__textarea {
    min-height: 360px;
    resize: vertical;
}

.policy-drawer__textarea--mono {
    min-height: 220px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.85rem;
    white-space: pre;
    overflow-wrap: normal;
}

.policy-edit-modal {
    max-width: 560px;
}

.policy-edit-modal__body {
    padding: var(--space-5) var(--space-6);
}

.policy-edit-modal__copy {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-edit-modal__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.policy-edit-modal__summary-label {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-edit-modal__summary-value {
    color: var(--color-fg);
    font-weight: var(--fw-semibold);
}

.policy-edit-modal__footer {
    align-items: center;
}

.policy-edit-modal__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.policy-history {
    display: grid;
    gap: var(--space-4);
}

.policy-history__item {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.policy-history__item--current {
    border-color: var(--color-primary);
}

.policy-history__item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.policy-history__version {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
}

.policy-history__meta {
    margin: var(--space-1) 0 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-history__text {
    max-height: 280px;
    margin: 0;
    padding: var(--space-3);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    white-space: pre-wrap;
}

.policy-category-toolbar__search {
    flex: 1 1 420px;
}

.policy-category-toolbar__search .toolbar__search,
.policy-category-modal__search {
    width: 100%;
}

.policy-category-list {
    display: grid;
    gap: var(--space-3);
}

.policy-category-list__empty {
    padding: var(--space-8);
}

.policy-category-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}

.policy-category-card__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    cursor: pointer;
    list-style: none;
}

.policy-category-card__summary::-webkit-details-marker {
    display: none;
}

.policy-category-card__heading,
.policy-category-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.policy-category-card__heading {
    min-width: 0;
}

.policy-category-card__chevron {
    color: var(--color-fg-muted);
    transition: transform 150ms ease;
}

.policy-category-card[open] .policy-category-card__chevron {
    transform: rotate(180deg);
}

.policy-category-card__title,
.policy-category-modal__category {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
}

.policy-category-card__description,
.policy-category-modal__summary p,
.policy-category-card__empty {
    margin: var(--space-1) 0 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-category-card__meta {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    white-space: nowrap;
}

.policy-category-card__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-danger-fg);
    cursor: pointer;
}

.policy-category-card__delete:hover {
    background: var(--color-danger-bg);
}

.policy-category-card__body {
    padding: 0 var(--space-4) var(--space-4);
}

.policy-category-policies {
    display: grid;
    gap: var(--space-2);
    min-height: 48px;
}

.policy-category-policies.is-drag-over {
    outline: 2px dashed var(--color-primary);
    outline-offset: 4px;
}

.policy-category-policy-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto 32px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.policy-category-policy-row.is-dragging {
    opacity: 0.55;
}

.policy-category-policy-row__handle {
    color: var(--color-fg-muted);
    text-align: center;
    cursor: grab;
    user-select: none;
}

.policy-category-policy-row__name {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    font-weight: var(--fw-medium);
    text-align: left;
    cursor: pointer;
}

.policy-category-policy-row__name:hover {
    color: var(--color-primary);
}

.policy-category-policy-row__version,
.policy-category-policy-row__packs {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-category-policy-row__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-danger-fg);
    cursor: pointer;
}

.policy-category-policy-row__delete:hover {
    background: var(--color-danger-bg);
}

.policy-category-card__add {
    display: inline-flex;
    margin-top: var(--space-3);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.policy-category-drawer__textarea {
    min-height: 260px;
    resize: vertical;
}

.policy-category-modal {
    max-width: 880px;
}

.policy-category-modal__summary {
    margin: var(--space-4) var(--space-6) 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.policy-category-modal__body,
.policy-category-delete-modal__body {
    padding: var(--space-5) var(--space-6);
}

.policy-category-modal__table {
    margin-top: var(--space-2);
}

.policy-category-modal__col-check { width: 48px; }
.policy-category-modal__col-name { width: 36%; }
.policy-category-modal__col-version { width: 14%; }
.policy-category-modal__col-category { width: 28%; }
.policy-category-modal__col-packs { width: 14%; }

.policy-category-delete-modal {
    max-width: 520px;
}

.policy-category-delete-modal__copy {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.policy-category-delete-modal__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.policy-category-delete-modal__summary strong {
    min-width: 0;
    color: var(--color-fg);
}

/* ─── Table ────────────────────────────────────────────────────────────── */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table thead {
    background: var(--color-table-header-bg);
}

.table thead th {
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-bold);
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: -0.4px;
    white-space: nowrap;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-fg);
    vertical-align: middle;
}

.table tbody tr:hover td {
    background: var(--color-surface);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Selection checkboxes inside a table. Browser defaults are ~13px and differ per
   platform, which made the header/group boxes look heavier than the row boxes;
   one explicit size keeps a nested selection tree visually aligned. */
.table input[type="checkbox"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--checkbox-accent-color);
    cursor: pointer;
}

.table__cell--right { text-align: right; }
.table__cell--center { text-align: center; }
.table__cell--actions {
    width: 1%;
    white-space: nowrap;
}

.table__cell--actions .button {
    display: flex;
}

/* `table-layout: fixed` honors `<colgroup>` widths instead of auto-sizing
   columns from cell content. Used by the vendor list so the layout stays
   stable across sort modes (otherwise sort=website would surface short
   URLs first and the column would collapse). Long URLs / names are made
   to wrap inside their fixed column. */
.table--fixed {
    table-layout: fixed;
}

.table--fixed td,
.table--fixed th {
    overflow-wrap: anywhere;
}

/* Vendor list column proportions. Tuned against screenshot-1 so the
   layout matches the sort=name baseline regardless of which sort the
   user picks. */
.vendors-table__col-check      { width: 4%; }
.vendors-table__col-vendor     { width: 22%; }
.vendors-table__col-website    { width: 26%; }
.vendors-table__col-id         { width: 12%; }
.vendors-table__col-violations { width: 12%; }
/* Wide enough that the longest status label fits on one line without
   overflowing the cell; the badge is `white-space: nowrap`. */
.vendors-table__col-status     { width: 14%; }
/* Icon-only actions (View details + Start scan), so the column stays narrow. */
.vendors-table__col-actions    { width: 10%; }

/* Account id — short numeric, keep it on one line. */
.vendors-table__id {
    white-space: nowrap;
}

.vendors-table__sub-status {
    display: block;
    margin-top: var(--space-1);
}

.vendors-table__website {
    overflow-wrap: anywhere;
}

/* Merchant name cell: the name, then entity-type flag icons after it. */
.vendors-table__name-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.entity-flags {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* One flag = a soft rounded chip around a muted icon, with a hover tooltip. */
.entity-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-fg-muted);
}

.entity-flag .icon {
    width: 16px;
    height: 16px;
}

.entity-flag__tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-dropdown);
    display: none;
    width: max-content;
    max-width: 220px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-fg);
    color: var(--color-bg);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.entity-flag:hover .entity-flag__tooltip,
.entity-flag:focus-within .entity-flag__tooltip {
    display: block;
}

.vendors-table__row {
    cursor: pointer;
}

.vendors-table__row:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Scans list column proportions. Keeps the action column stable while
   allowing scan and vendor names to wrap within predictable bounds. */
.scans-table__col-check      { width: 4%; }
.scans-table__col-name       { width: 17%; }
.scans-table__col-vendor     { width: 15%; }
.scans-table__col-website    { width: 19%; }
.scans-table__col-date       { width: 10%; }
.scans-table__col-status     { width: 11%; }
.scans-table__col-violations { width: 12%; }
.scans-table__col-actions    { width: 12%; }

/* Scheduled scans (Scans page "Scheduled scans" tab) column proportions. */
.scheduled-scans-table__col-date       { width: 14%; }
.scheduled-scans-table__col-time       { width: 12%; }
.scheduled-scans-table__col-status     { width: 14%; }
.scheduled-scans-table__col-vendors    { width: 14%; }
.scheduled-scans-table__col-violations { width: 14%; }
.scheduled-scans-table__col-report     { width: 14%; }
.scheduled-scans-table__col-actions    { width: 18%; }

/* Scheduled scans group detail table (merchant / website / status / violations only). */
.scheduled-scan-detail-table__col-merchant   { width: 32%; }
.scheduled-scan-detail-table__col-website    { width: 32%; }
.scheduled-scan-detail-table__col-status     { width: 18%; }
.scheduled-scan-detail-table__col-violations { width: 18%; }

/* The "Monthly vendor scan" schedule-info card at the top of the Scheduled
   scans tab — recipe badge, description, and the newest report's date/status. */
.scheduled-scan-schedule-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.scheduled-scan-schedule-card__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.scheduled-scan-schedule-card__hint {
    font-size: var(--fs-sm);
}
.scheduled-scan-schedule-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
}

/* Scheduled scan detail page header: date title + status badge, inline. */
.scheduled-scan-detail-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.scheduled-scans-table__row {
    cursor: pointer;
}
.scheduled-scans-table__row:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.scheduled-scan-detail-table__row {
    cursor: pointer;
}
.scheduled-scan-detail-table__row:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
/* No active website was scanned for this vendor, so there is no scan to open. */
.scheduled-scan-detail-table__row--unlinked {
    cursor: default;
}

/* Stacked date + muted UTC time for a table cell (scans list Date column). */
.cell-datetime {
    display: flex;
    flex-direction: column;
    line-height: var(--lh-xs);
}

.cell-datetime__time {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
    white-space: nowrap;
}

/* Opt-in icon-led variant of the stacked date/time cell (violations list): a
   calendar glyph on the date line, a clock glyph on the time line. Plain
   `.cell-datetime` users (Scans, Leads) are unaffected. */
.cell-datetime__part {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.cell-datetime__part .icon {
    width: var(--fs-sm);
    height: var(--fs-sm);
    flex: 0 0 auto;
    color: var(--color-fg-subtle);
}

.scans-table__row {
    cursor: pointer;
}

.scans-table__row:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Policies list column proportions. Matches the flat taxonomy table
   in the policy-list design while keeping the action link compact. */
.policies-table__col-name     { width: 36%; }
.policies-table__col-version  { width: 14%; }
.policies-table__col-category { width: 20%; }
.policies-table__col-packs    { width: 12%; }
.policies-table__col-actions  { width: 18%; }

.vendor-table-actions,
.case-table-actions,
.violation-table-actions,
.management-table-actions,
.recipe-table-actions,
.vendor-detail-table-actions,
.scan-detail-table-actions,
.scan-table-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2);
    white-space: nowrap;
}

.vendor-table-actions .button,
.case-table-actions .button,
.violation-table-actions .button,
.management-table-actions .button,
.recipe-table-actions .button,
.vendor-detail-table-actions .button,
.scan-detail-table-actions .button {
    flex: 0 0 auto;
}

.scan-table-actions__icon,
.vendor-table-actions__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.scan-table-actions__icon:hover,
.vendor-table-actions__icon:hover {
    border-color: var(--color-border-strong);
    color: var(--color-fg);
    text-decoration: none;
}

.scan-table-actions form {
    display: inline-flex;
    margin: 0;
}

.scan-table-actions__icon .icon,
.vendor-table-actions__icon .icon {
    width: var(--space-4);
    height: var(--space-4);
}

/* Icon-only Delete/Export/Create-case buttons plus the labeled Start-scan
   button, all inline in the selection banner (no more dropdown — see
   services/api-gateway-updated/README.md "Merchants page" bulk actions). */
.vendor-bulk-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.vendor-bulk-actions form {
    display: contents;
}

/* Violations list column proportions. Includes a narrow checkbox
   column for multi-select and a confidence column with color coding. */
.violations-table__col-check       { width: 4%; }
.violations-table__col-violation   { width: 20%; }
.violations-table__col-date        { width: 11%; }
.violations-table__col-url         { width: 16%; }
.violations-table__col-confidence  { width: 10%; }
.violations-table__col-vendor      { width: 13%; }
.violations-table__col-status      { width: 12%; }
.violations-table__col-actions     { width: 14%; }

/* Grouped mode drops the Merchant column (the group header names the merchant),
   so it has its own seven-column proportions and the freed width goes to the
   violation label. The checkbox column is wider than flat mode's 4% because a
   nested row indents its checkbox under the merchant checkbox, and
   `table-layout: fixed` will not widen a column to fit that indent. */
.violations-table__col-group-check       { width: 8%; }
.violations-table__col-group-violation   { width: 27%; }
.violations-table__col-group-date        { width: 12%; }
.violations-table__col-group-url         { width: 16%; }
.violations-table__col-group-confidence  { width: 10%; }
.violations-table__col-group-status      { width: 12%; }
.violations-table__col-group-actions     { width: 15%; }

/* Scanned-page URL cell: a single link that truncates rather than forcing the
   fixed-layout table wider. `.table--fixed` clips the overflow. */
.violations-table__url {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Violations "group by merchant" ──────────────────────────────────────
   Each merchant is one <tbody data-viol-group> holding a full-width header band
   (chevron · select-all-for-this-merchant · merchant name + meta · per-group
   "Create case") followed by its violation rows. One tbody per group is what
   scopes both the collapse and "select every violation of this merchant" without
   walking sibling rows; every `[data-viol-*]` hook keeps working in either mode. */
.violations-table__group > td {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    background: var(--color-table-header-bg);
}

/* The band itself is the mouse click target for the collapse toggle. */
.violations-table__group-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.violations-table__group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.violations-table__group-toggle .icon {
    width: var(--space-4);
    height: var(--space-4);
    transition: transform var(--motion-fast) ease;
}

/* Groups render collapsed, so the chevron points down by default and flips when
   the group is open — the inverse of `.status-config__toggle`, which starts open. */
.violations-table__group-body:not(.violations-table__group-body--collapsed)
.violations-table__group-toggle .icon {
    transform: rotate(180deg);
}

.violations-table__group-body--collapsed .violations-table__row--nested {
    display: none;
}

/* Several <tbody> elements scope `tr:last-child`, so the base
   `.table tbody tr:last-child td { border-bottom: none }` would drop the
   separator before every following group header. Restore it for all but the
   final group, whose bottom edge is the table border. */
.violations-table__group-body:not(:last-of-type) > tr:last-child > td {
    border-bottom: 1px solid var(--color-border);
}

.violations-table__group-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

/* Regular weight, body size: the merchant name labels the band, it is not a
   heading, and bolding it made the group rows shout over their own violations. */
.violations-table__group-name {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-regular);
    color: var(--color-fg-strong);
    text-decoration: none;
}

.violations-table__group-name:hover {
    text-decoration: underline;
}

.violations-table__group-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

/* The violation count is the reason the group exists, so it leads with a dot in
   the danger colour rather than reading as ordinary muted metadata. Uses the
   brighter accent red — `--color-danger-fg` is a badge-on-tint colour and reads
   brown on white. */
.violations-table__group-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-danger-accent);
}

.violations-table__group-count::before {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: currentColor;
}

.violations-table__group-vendor-id {
    white-space: nowrap;
}

/* Always rendered, flush right, and disabled until the group has a selection —
   a button that appears out of nowhere on first click is easy to miss, and its
   absence gives no hint that per-merchant case creation exists at all. */
.violations-table__group-action {
    margin-left: auto;
    flex: 0 0 auto;
}

/* A nested violation row: its checkbox is indented under the merchant header and
   tied to it by a tree connector. The connector is absolutely positioned against
   the cell box, so it spans the row height without a magic row-height constant. */
.table tbody td.violations-table__nested-check {
    position: relative;
    padding-left: var(--violations-nest-indent);
}

.violations-table__tree {
    position: absolute;
    left: var(--violations-tree-left);
    top: 0;
    bottom: 0;
    width: var(--violations-tree-width);
    pointer-events: none;
}

/* The elbow: down from the row top, then a rounded turn towards the checkbox. */
.violations-table__tree::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 0;
    right: 0;
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-bottom-left-radius: var(--radius-sm);
}

/* Trunk carries on past this row when it is not the group's last violation. */
.violations-table__tree--continues::before {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    border-left: 1px solid var(--color-border);
}

/* ─── Filter card ──────────────────────────────────────────────────────────
   The shared index-page filter shell: a bordered card holding a grid of
   labeled filters, then a full-width row with the search box and the page's
   primary actions.

   Column count varies by page (Merchants 3, Scans/Cases 4, ...), so it is a
   custom property set by a `--cols-N` modifier rather than a hard-coded track
   list — that keeps one grid definition and lets the responsive breakpoints
   override every page at once.

   The form keeps its `.toolbar--filters` class purely as the hook for the
   shared search-spinner rule; `display: grid` here overrides `.toolbar`'s flex,
   which relies on this block appearing later in the file — keep it below the
   toolbar block. */
.filter-card {
    display: grid;
    grid-template-columns: repeat(var(--filter-card-columns, 3), minmax(0, 1fr));
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.filter-card--cols-1 { --filter-card-columns: 1; }
.filter-card--cols-2 { --filter-card-columns: 2; }
.filter-card--cols-3 { --filter-card-columns: 3; }
.filter-card--cols-4 { --filter-card-columns: 4; }

/* Search + primary actions share the last full-width row. The search box grows;
   the buttons keep their intrinsic width and sit flush right, baseline-aligned
   with the input (not its label). */
.filter-card__search-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

.filter-card__search-row .toolbar__filter {
    flex: 1 1 auto;
    min-width: 0;
}

.filter-card__search-row .button {
    flex: 0 0 auto;
}

.filter-card__group-by {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: start;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    cursor: pointer;
}

@media (max-width: 1024px) {
    .filter-card {
        --filter-card-columns: 2;
    }
}

@media (max-width: 640px) {
    .filter-card {
        --filter-card-columns: 1;
    }

    /* Stack the actions under the search box rather than squeezing both. */
    .filter-card__search-row {
        flex-wrap: wrap;
    }
}

/* Cases list column proportions. Mirrors the screenshot's compact case
   metadata table with a narrow priority column and stable action area. */
/* The select column takes its width from the other seven, which is why they no
   longer sum to 100 on their own — `table-layout: fixed` will not widen it. */
.cases-table__col-select   { width: 4%; }
.cases-table__col-id       { width: 15%; }
.cases-table__col-vendor   { width: 16%; }
.cases-table__col-status   { width: 13%; }
.cases-table__col-date     { width: 11%; }
.cases-table__col-priority { width: 9%; }
.cases-table__col-assignee { width: 12%; }
.cases-table__col-actions  { width: 20%; }

.cases-table__col-priority {
    min-width: 5rem;
}

.cases-table__row {
    cursor: pointer;
}

.cases-table__row:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Confidence percentage text — color-coded by range. */
.confidence {
    font-weight: var(--fw-semibold);
}
.confidence--high   { color: var(--color-success-fg); }
.confidence--medium { color: var(--color-warning-fg); }
/* Accent red, not the badge foreground: this figure sits on the plain row
   background, where `--color-danger-fg` reads brown rather than red. */
.confidence--low    { color: var(--color-danger-accent); }

/* Selection banner shown above the violations table when rows are
   checked. Holds a count + constraint hint on the left and the
   "Create case" button on the right. */
.selection-banner[hidden] {
    display: none;
}

.selection-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary);
}

.selection-banner__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.selection-banner__info strong {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-primary);
}

.selection-banner__hint {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-primary);
}

/* Inline link inside a table cell — used for the primary identifier
   column (vendor name, scan id, etc.) so it reads as a navigation target. */
.table__link {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.table__link:hover {
    text-decoration: underline;
}

/* Empty state inside a table body. */
.table__empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-fg-muted);
}

/* ─── Pagination footer (Showing X of Y) ───────────────────────────────── */

.pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.pagination-footer__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ─── Auth card (login / register) ─────────────────────────────────────── */

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.auth-card__header {
    margin-bottom: var(--space-6);
}

.auth-card__title {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.auth-card__subtitle {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    margin-top: var(--space-1);
}

.auth-card__alt {
    margin-top: var(--space-6);
    text-align: center;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.auth-card__alt a {
    font-weight: var(--fw-medium);
}

/* ─── Vendor detail: breadcrumb / page actions / section cards ─────────── */

/* Compact "<- Back to X / Current" header strip rendered above the page
   title on detail pages. Uses primary color so it reads as a navigation
   target, with a non-link separator slash and a non-link current label. */
.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-primary);
}

.breadcrumb__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.breadcrumb__separator {
    color: var(--color-primary);
}

.breadcrumb__current {
    color: var(--color-primary);
}

/* Page-title row that holds the title/subtitle on the left and a button
   group on the right (used by the vendor detail header). */
.page-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-actions__buttons {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Merchant detail header: breadcrumb row with the entity-type chip pushed to
   the far edge. The header has no action buttons — they live on the Summary
   card — so the old `.vendor-detail-actions-menu` dropdown block was removed
   along with its markup and its `[data-vendor-detail-actions-*]` handlers. */
.vendor-detail-crumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.entity-chips {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Labelled sibling of the icon-only `.entity-flag` used in the Merchants table:
   the header has room for the word, a table row does not. */
.entity-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.entity-chip .icon {
    width: var(--fs-sm);
    height: var(--fs-sm);
}

/* The header's title column grows to fill the row up to the action buttons
   (which stay `flex-shrink: 0`), so the inline-editable name input can use the
   full available width instead of clipping a long merchant name. `min-width: 0`
   lets the column shrink below the name's intrinsic width so the header never
   overflows horizontally. */
.vendor-detail-heading {
    flex: 1 1 auto;
    min-width: 0;
}

/* Merchant name: a clickable heading swapped for the edit form. The whole
   title is the edit trigger; the pencil is a hover/focus hint that fades in
   (the pointer cursor is the other affordance). Only one mode shows at a time —
   `--editing` is toggled by app.js on click and rendered server-side on a 422.
   The `.page-title` h1 supplies the type; the button inherits it. */
.vendor-detail-name__read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.vendor-detail-name__title {
    min-width: 0;
    /* Long single-token merchant names must wrap rather than overflow the
       header column into the action buttons. */
    overflow-wrap: anywhere;
}

.vendor-detail-name + .page-subtitle {
    cursor: default;
}

/* Hidden until the title is hovered or keyboard-focused, so it reads as a
   plain heading until the user signals intent to interact. */
.vendor-detail-name__edit-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-fg-muted);
    opacity: 0;
    transition: opacity var(--motion-fast) ease;
}

.vendor-detail-name__edit-icon svg {
    width: 30px;
    height: 30px;
}

.vendor-detail-name__read:hover .vendor-detail-name__edit-icon,
.vendor-detail-name__read:focus-visible .vendor-detail-name__edit-icon,
.vendor-detail-name__read:hover .vendor-detail-name__title {
    opacity: 1;
    color: var(--color-primary);
}

.vendor-detail-name--editing .vendor-detail-name__heading {
    display: none;
}

.vendor-detail-name-form {
    display: none;
    gap: var(--space-1);
}

.vendor-detail-name--editing .vendor-detail-name-form {
    display: grid;
}

.vendor-detail-name-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.vendor-detail-name-form__input {
    width: 100%;
    height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--color-fg);
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
    font-weight: var(--fw-semibold);
}

.vendor-detail-name-form__input:focus {
    padding: 0 var(--space-2);
    border-color: var(--color-primary);
    background: var(--color-bg);
}

.vendor-detail-name-form__input.input--error {
    padding: 0 var(--space-2);
    border-color: var(--color-danger-fg);
    background: var(--color-bg);
}

/* "Section card" — a white panel with an optional header row carrying the
   section title on the left and a "View all (N)" link on the right.
   Used three times on the vendor detail page (Recent violations / cases
   / scans). The Summary card and Websites card both reuse the same shell. */
.section-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
}

.section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.section-card__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.section-card__view-all {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* When the body of a section card is a table we don't want the card's
   own padding to double up with the table's cell padding, so the table
   cancels the bottom padding and bleeds to the card edges. */
.section-card--table {
    padding-bottom: 0;
}

.section-card--table .table {
    border: 0;
    border-radius: 0;
    margin: 0 calc(-1 * var(--space-6));
    width: calc(100% + 2 * var(--space-6));
}

.section-card--table .table thead {
    background: transparent;
}

.section-card--table .table thead th:first-child,
.section-card--table .table tbody td:first-child {
    padding-left: var(--space-6);
}

.section-card--table .table thead th:last-child,
.section-card--table .table tbody td:last-child {
    padding-right: var(--space-6);
}

.section-card--table .button[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.vendor-detail-violations-table__col-violation { width: 38%; }
.vendor-detail-violations-table__col-date { width: 16%; }
.vendor-detail-violations-table__col-status { width: 14%; }
.vendor-detail-violations-table__col-actions { width: 32%; }

.vendor-detail-cases-table__col-id { width: 17%; }
.vendor-detail-cases-table__col-date { width: 13%; }
.vendor-detail-cases-table__col-status { width: 14%; }
.vendor-detail-cases-table__col-priority { width: 10%; }
.vendor-detail-cases-table__col-assignee { width: 18%; }
.vendor-detail-cases-table__col-actions { width: 28%; }

/* Scan name replaced the short id here, so the first column needs real room. */
.vendor-detail-scans-table__col-name { width: 26%; }
.vendor-detail-scans-table__col-website { width: 24%; }
.vendor-detail-scans-table__col-date { width: 14%; }
.vendor-detail-scans-table__col-status { width: 16%; }
.vendor-detail-scans-table__col-actions { width: 20%; }

.vendor-detail-reports-table__col-scan { width: 46%; }
.vendor-detail-reports-table__col-date { width: 22%; }
.vendor-detail-reports-table__col-actions { width: 32%; }

/* Inline scan status: a coloured glyph plus plain text, as opposed to the
   filled `.badge` chip. Colours come from the same status variant names, so
   `--success` here and `badge--success` there stay in step. */
.scan-status-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    white-space: nowrap;
}

.scan-status-inline__icon {
    display: inline-flex;
}

.scan-status-inline__icon .icon {
    width: var(--fs-sm);
    height: var(--fs-sm);
}

.scan-status-inline--success .scan-status-inline__icon { color: var(--color-success-fg); }
.scan-status-inline--warning .scan-status-inline__icon { color: var(--color-warning-fg); }
.scan-status-inline--info    .scan-status-inline__icon { color: var(--color-primary); }
.scan-status-inline--danger  .scan-status-inline__icon { color: var(--color-danger-accent); }
.scan-status-inline--neutral .scan-status-inline__icon { color: var(--color-fg-subtle); }

/* Note attachments get a leading label so the chips read as a list rather than
   as loose buttons under the note text. */
.merchant-note-attachments {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.merchant-note-attachments__label {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

/* ── Change merchant status modal ───────────────────────────────────────────
   The header reads as a sentence with the current status badge and the target
   status select inline, so the change is legible before anything is picked. */
.status-change {
    padding: var(--space-4);
}

.status-change__sentence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.status-change__status {
    width: auto;
    min-width: var(--status-change-select-min-width);
}

.status-change__reason-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.status-change__custom-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-fg-subtle);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    cursor: pointer;
}

.status-change__custom-track {
    display: inline-flex;
    align-items: center;
    width: var(--toggle-track-width);
    height: var(--toggle-track-height);
    padding: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    transition: background var(--motion-fast) var(--easing);
}

.status-change__custom-knob {
    width: var(--toggle-knob-size);
    height: var(--toggle-knob-size);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-fast) var(--easing);
}

.status-change__custom-toggle[aria-checked="true"] {
    color: var(--color-fg);
}

.status-change__custom-toggle[aria-checked="true"] .status-change__custom-track {
    background: var(--color-primary);
}

.status-change__custom-toggle[aria-checked="true"] .status-change__custom-knob {
    transform: translateX(calc(var(--toggle-track-width) - var(--toggle-knob-size) - 4px));
}

.status-change__reason [hidden] {
    display: none;
}

/* Two configurable lists per status card (sub-statuses, reasons) need their own
   sub-headings so the card does not read as one undifferentiated list. */
.status-config__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.status-config__section-title {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

.scan-detail-violations-table__col-violation { width: 42%; }
.scan-detail-violations-table__col-date { width: 16%; }
.scan-detail-violations-table__col-status { width: 16%; }
.scan-detail-violations-table__col-actions { width: 26%; }

.scan-detail-steps-table__col-tool { width: 28%; }
.scan-detail-steps-table__col-status { width: 18%; }
.scan-detail-steps-table__col-result { width: 54%; }

/* Error reason card (shown instead of Recent violations when a scan failed). */
.scan-error-reason {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
}

.scan-error-reason__icon {
    display: inline-flex;
    flex: none;
    color: var(--color-danger-fg);
}

.scan-error-reason__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-strong);
}

.scan-error-reason__text--muted {
    color: var(--color-fg-subtle);
}

/* Loading state: the card renders immediately with a spinner while the LLM
   reason is fetched via HTMX, then the body is swapped in. */
.scan-error-reason--loading {
    align-items: center;
}

.scan-error-reason__spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.website-add-link {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.website-table {
    table-layout: fixed;
    overflow: visible;
}

.website-table__col-url { width: 34%; }
.website-table__col-domain { width: 24%; }
.website-table__col-status { width: 18%; }
.website-table__col-primary { width: 14%; }
.website-table__col-actions { width: 10%; }

/* Clickable domain cell (opens the domain-info modal) — link-styled button. */
.website-domain-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.website-domain-link:hover {
    text-decoration: underline;
}

/* Domain hover popover.

   `.table` sets `overflow: hidden` to clip content to its rounded corners —
   which would also clip this popover. Inside a `.section-card--table` the
   table's radius is already zeroed (it bleeds to the card edges), so nothing
   is being clipped for looks here and the table can safely allow overflow.
   Scoped to `.website-table` so no other table's clipping changes. */
.website-table {
    overflow: visible;
}

.domain-cell {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.domain-popover {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: var(--z-dropdown);
    display: none;
    width: max-content;
    max-width: var(--domain-popover-max-width);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    /* A peek, not a control: the click target underneath opens the real modal,
       so nothing in here needs to be reachable with the pointer. */
    pointer-events: none;
}

.domain-cell:hover .domain-popover,
.domain-cell:focus-within .domain-popover {
    display: block;
}

.domain-popover .int-mini-card {
    border: 0;
    padding: 0;
    background: transparent;
}

.website-table thead th {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-bold);
    letter-spacing: -0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.website-table tbody td {
    height: 50px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    overflow: visible;
}

.website-status-form,
.website-primary-form,
.website-row-actions form {
    display: inline-flex;
    margin: 0;
}

.website-status-menu {
    position: relative;
    display: inline-flex;
    width: max-content;
}

.website-status-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    list-style: none;
    cursor: pointer;
}

.website-status-menu__trigger::-webkit-details-marker {
    display: none;
}

.website-status-menu__caret {
    display: inline-flex;
    color: var(--color-success-fg);
    transition: transform var(--motion-fast) var(--easing);
}

.website-status-menu__caret .icon {
    width: var(--space-3);
    height: var(--space-3);
}

.website-status-menu[open] .website-status-menu__caret {
    transform: rotate(180deg);
}

.website-status-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 86px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
}

.website-status-menu__panel form {
    margin: 0;
}

.website-status-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}

.website-status-menu__item:hover:not(:disabled) {
    background: var(--color-surface-muted);
}

.website-status-menu__item--current {
    cursor: default;
}

.website-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
}

.website-status-pill--active {
    background-color: var(--color-success-bg);
    color: var(--color-success-fg);
}

.website-status-pill--inactive {
    background-color: var(--color-surface-muted);
    color: var(--color-fg-muted);
}

.website-status-select {
    min-height: 26px;
    padding: 3px 26px 3px var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.website-status-select--active {
    background-color: var(--color-success-bg);
    color: var(--color-success-fg);
}

.website-status-select--inactive {
    background-color: var(--color-surface-muted);
    color: var(--color-fg-muted);
}

.website-primary-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 28px;
    height: 16px;
    padding: 0;
    border: 2px solid var(--color-fg-muted);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    cursor: pointer;
    transition:
        border-color var(--motion-fast) var(--easing),
        background var(--motion-fast) var(--easing);
}

.website-primary-toggle:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.website-primary-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.website-primary-toggle__knob {
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border-radius: 50%;
    background: var(--color-fg-muted);
    transition: background var(--motion-fast) var(--easing);
}

.website-primary-toggle:hover:not(:disabled) .website-primary-toggle__knob {
    background: var(--color-primary);
}

.website-primary-badge {
    min-width: 30px;
    justify-content: center;
}

.website-inline-row--editing > td {
    background: var(--color-surface-muted);
}

.website-inline-form {
    margin: 0;
}

.website-inline-form__grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 140px auto;
    align-items: start;
    gap: var(--space-3);
}

.website-inline-form__grid--edit {
    grid-template-columns: minmax(260px, 1fr) 140px auto auto;
}

.website-inline-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--space-10);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
}

.website-inline-form__actions,
.website-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.website-row-action {
    width: var(--space-6);
    height: var(--space-6);
    color: var(--color-fg-muted);
}

.website-row-action .icon {
    width: var(--space-4);
    height: var(--space-4);
}

/* Horizontal stat strip used inside the Summary section card.
   Each cell is a small eyebrow label stacked over a value (badge or
   number). Cells share width via flex:1, separated only by gap. */
.summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.summary-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 140px;
    min-width: 120px;
}

.summary-stat--website {
    flex: 2 1 220px;
}

.summary-stat__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.summary-stat__sub-status {
    display: block;
    margin-top: var(--space-1);
}

/* Sub-status chip — soft pill tinted to the parent status, with muted text so
   it stays secondary to the status badge. Shared by the merchants list, the
   Summary card, and the Merchant history timeline. */
.sub-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2) 2px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xxs);
    line-height: var(--lh-xxs);
    font-weight: var(--fw-medium);
    color: var(--color-fg-muted);
    white-space: nowrap;
}

.sub-status-chip--info     { background: var(--color-info-bg); }
.sub-status-chip--success  { background: var(--color-success-bg); }
.sub-status-chip--warning  { background: var(--color-warning-bg); }
.sub-status-chip--danger   { background: var(--color-danger-bg); }
.sub-status-chip--neutral  { background: var(--color-neutral-bg); }

.summary-stat__value {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.summary-stat__value--text {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
}

.summary-stat__value--url {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.summary-stat__value--link {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    text-decoration: none;
}
.summary-stat__value--link:hover {
    text-decoration: underline;
}

/* ── Merchant detail Summary card ────────────────────────────────────────────
   Holds the status pin, the counters, and every merchant-level action. Counter
   type is scaled down from the shared `.summary-stat__value` (24px, tuned for
   the Scan detail page, which shows six numbers and nothing else) because this
   card also carries a status row and an action row. Scoped to `.merchant-summary`
   so the scan/lead summary cards are untouched. */
.merchant-summary__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.merchant-summary__history {
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    cursor: pointer;
}

.merchant-summary__history .icon {
    width: var(--fs-sm);
    height: var(--fs-sm);
}

.merchant-summary .summary-stats {
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.merchant-summary .summary-stat__value {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
}

/* A counter that navigates to the list behind it. Padding + negative margin
   keep the hover surface bigger than the text without shifting the row. */
.summary-stat--link {
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background var(--motion-fast) var(--easing);
}

.summary-stat--link:hover {
    background: var(--color-table-header-bg);
}

/* "2 / 15" — the open count carries the emphasis, the total is context. */
.summary-stat__value--accent {
    color: var(--color-primary);
}

.summary-stat__value--total {
    color: var(--color-fg-subtle);
    font-weight: var(--fw-regular);
}

.merchant-summary__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.merchant-summary__actions-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.merchant-summary__actions-group form {
    margin: 0;
}

.merchant-summary__actions .button .icon {
    width: var(--fs-sm);
    height: var(--fs-sm);
}

/* Destructive, and the only icon-only control in the row — so it reads as an
   outlined danger button rather than borrowing `.button--danger`'s solid fill,
   which would out-shout Start scan. */
.merchant-summary__delete {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-danger-accent);
}

.merchant-summary__delete:hover {
    border-color: var(--color-danger-accent);
    background: var(--color-danger-bg);
}

/* ── Read-only profile blocks (Merchant detail General + Payout cards) ───────
   Rendered by the `components/detail_fields.html` macros. Blocks are separated
   by a rule that bleeds to the card edges, matching the way the card's own
   sections read as one continuous record rather than stacked panels. */
.section-card__header--stacked {
    align-items: flex-start;
}

.section-card__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
}

.detail-block {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border);
}

/* The card header already sits above the first block, so its rule would double
   up with the header's own spacing. */
.detail-block:first-of-type {
    padding-top: var(--space-2);
    border-top: 0;
}

.detail-block:last-child {
    padding-bottom: 0;
}

.detail-block__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

.detail-block__icon {
    display: inline-flex;
    color: var(--color-fg-subtle);
}

.detail-block__icon .icon {
    width: var(--fs-sm);
    height: var(--fs-sm);
}

.detail-block__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-8);
}

.detail-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

/* Label left, value right on one line — the label column is fixed so values
   align down the column regardless of label length.

   Both tracks are `minmax`, and that is load-bearing: the label is allowed to
   shrink and the value is *not* allowed below `--detail-field-value-min`. With a
   rigid label track, a narrow container (the Payout cards: 368px, split in two,
   minus a 132px label and a 16px gap) leaves the value **0px**, and
   `overflow-wrap: anywhere` then breaks the text one character per line into a
   tall vertical ribbon. Squeezing the label is the graceful failure; shredding
   the value is not. */
.detail-field {
    display: grid;
    grid-template-columns:
        minmax(0, var(--detail-field-label-width))
        minmax(var(--detail-field-value-min), 1fr);
    align-items: start;
    gap: var(--space-4);
}

.detail-field__label {
    font-size: var(--fs-xs);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
}

.detail-field__value {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg-strong);
    overflow-wrap: anywhere;
}

.detail-field__value--empty {
    color: var(--color-fg-subtle);
    font-weight: var(--fw-regular);
}

.detail-field__value--link {
    color: var(--color-primary);
    text-decoration: none;
}

.detail-field__value--link:hover {
    text-decoration: underline;
}

/* Email chips. `max-width` + ellipsis because a synced merchant can carry a
   very long address; the full value stays available as the title tooltip. */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
}

.chip {
    display: inline-block;
    max-width: 100%;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verified-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.verified-flag--yes {
    color: var(--color-success-fg);
}

.verified-flag--no {
    color: var(--color-fg-muted);
}

.verified-flag .icon {
    width: var(--fs-sm);
    height: var(--fs-sm);
}

.verified-flag__provider {
    color: var(--color-fg-subtle);
    font-weight: var(--fw-regular);
}

/* One payout card per destination; they wrap to a second row rather than
   stretching, so three accounts read as 2 + 1 instead of three thin columns. */
.payout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--payout-card-min-width), 1fr));
    gap: var(--space-4);
}

.payout-card .detail-block {
    padding: 0;
    border-top: 0;
}

/* One column per payout card. The two-column split belongs to the full-width
   General card; inside a card that can be a third of the row it left each field
   ~143px for a 132px label. Payout carries three short fields, so a single
   column reads better anyway. */
.payout-card .detail-block__columns {
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (max-width: 1024px) {
    .detail-block__columns {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

/* Past the point where a label column and a readable value both fit, stack them
   instead of letting either win. */
@media (max-width: 640px) {
    .detail-field {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

.summary-stat__progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ─── Progress bar ─────────────────────────────────────────────────────── */

.progress-bar {
    width: 100%;
    min-width: 6rem;
    height: 0.5rem;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width var(--motion-base) var(--easing);
}

/* ─── Table cell that wraps long text ──────────────────────────────────── */

.table__cell--wrap {
    white-space: normal;
    word-break: break-word;
    max-width: 32rem;
}

/* ─── Drawer (right-side panel + dim backdrop) ─────────────────────────── */

@keyframes drawer-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes drawer-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: var(--z-modal);
    display: flex;
    justify-content: flex-end;
    animation: drawer-fade-in var(--motion-base) var(--easing);
}

.drawer {
    width: var(--drawer-width);
    max-width: 100vw;
    height: 100%;
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    animation: drawer-slide-in var(--motion-slow) var(--easing);
}

.drawer__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.drawer__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.drawer__close {
    background: transparent;
    border: 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drawer__close:hover {
    color: var(--color-fg);
    background: var(--color-surface);
}

/* Header-level actions sitting beside the close button (the Intelligence
   drawer's Edit pencil), so the footer can stay a single full-width Close. */
.drawer__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.drawer__header-action {
    background: transparent;
    border: 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.drawer__header-action:hover {
    color: var(--color-fg);
    background: var(--color-surface);
}

.drawer__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

.drawer__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
}

.drawer__form--run-scan .drawer__footer .button {
    flex: 1;
    justify-content: center;
}

.drawer-notification {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.drawer-notification p {
    margin: 0;
}

.drawer-notification--validation {
    background: var(--color-notification);
    color: var(--color-notification-fg);
}

.drawer-notification__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-notification-fg);
    color: var(--color-notification);
    flex-shrink: 0;
}

.drawer-notification__icon .icon {
    width: 18px;
    height: 18px;
}

/* ─── Vendor intelligence drawer sections ──────────────────────────────── */

/* Each block of the intelligence drawer (Profile, Contacts, Addresses,
   Websites, Products) is wrapped in `.int-section`. The header row
   carries an icon + title; the section content lives inside `.int-card`.
   These styles only target the intelligence drawer; they don't override
   `.section-card` used by the detail page. */
.int-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.int-section__header {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
}

.int-section__title {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
    margin: 0;
}

/* Soft tinted card (no border) used as a content frame inside each
   intelligence section — matches the design's pale-blue panels. */
.int-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

/* 2-column key/value grid for the Vendor Profile scalar fields. */
.int-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-4);
}

.int-grid__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.int-grid__value {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    color: var(--color-fg);
    margin-top: var(--space-1);
    word-break: break-word;
}

/* Stacked white card used inside Contacts / Addresses / Products
   sections. Sits inside an `.int-card` (or directly inside the section
   when no surrounding tinted frame is desired). */
.int-mini-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.int-mini-card + .int-mini-card {
    margin-top: var(--space-3);
}

/* Discontinued products (not seen in the latest scan) stay visible but
   visually de-emphasized; the row is kept for history, never deleted. */
.int-mini-card--inactive {
    opacity: 0.6;
}

.int-mini-card__title {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
    margin: 0;
}

.int-mini-card__subtitle {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    margin: 0;
}

/* Domain-check key facts under a website mini-card (Intelligence drawer). */
.int-domain {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.int-domain__grid {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    margin: 0;
}

.int-domain__label {
    font-size: var(--fs-xs);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
    white-space: nowrap;
}

.int-domain__value {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    margin: 0;
    overflow-wrap: anywhere;
}

.int-domain__meta {
    margin: var(--space-2) 0 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
}

.int-mini-card__row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.int-mini-card__row a {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.int-mini-card__row a:hover {
    text-decoration: underline;
}

/* Empty state inside an `.int-card` — centered icon + label, used
   whenever a section's collection is empty (or, for the profile,
   when no scalar fields are set). */
.int-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--color-fg-muted);
    text-align: center;
}

.int-empty .icon {
    color: var(--color-fg-subtle);
}

/* Why the section is empty, and what would fill it. Without this an unscanned
   merchant's drawer reads as five identical "no data" boxes with no hint that
   running a scan is the action that populates them. */
.int-empty__hint {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

/* A profile field the card shows but does not own — the primary website /
   contact / address summaries. Styled to sit at input height so the grid does
   not jump between editable and read-only cells, but visibly not an input. */
.int-readonly-value {
    margin: 0;
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    overflow-wrap: anywhere;
}

/* Editable row layout used in the Edit-mode drawer (Contacts /
   Addresses / Websites / Products). Each `.int-edit-row` carries one
   set of inputs plus a [×] button on the right. Row-level
   soft-delete just sets the modifier — JS doesn't remove the node so
   DOM order keeps matching the parallel-array form indices. */
.int-edit-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.int-edit-row {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.int-edit-row__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-3);
}

.int-edit-row__field--span {
    grid-column: 1 / -1;
}

.int-edit-row__primary {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.int-edit-row__delete {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    color: var(--color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.int-edit-row__delete:hover {
    color: var(--color-fg);
    background: var(--color-surface-muted);
}

.int-edit-row--deleted {
    opacity: 0.55;
}

.int-edit-row--deleted .int-edit-row__grid {
    text-decoration: line-through;
    color: var(--color-fg-muted);
}

.int-edit-row--deleted input,
.int-edit-row--deleted textarea,
.int-edit-row--deleted select {
    pointer-events: none;
}

.int-edit-list__actions {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.int-edit-list__add,
.int-edit-list__delete-all {
    background: transparent;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.int-edit-list__add:hover,
.int-edit-list__delete-all:hover {
    color: var(--color-fg);
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
}

.int-edit-list__delete-all {
    border-style: solid;
    color: var(--color-danger-fg);
}

.int-edit-list__delete-all:hover {
    color: var(--color-danger-fg);
    border-color: var(--color-danger-fg);
}

/* ─── Detail page section count + overflow link ───────────────────────── */

/* Small "Showing X of Y" label rendered to the right of the section card
   title (inside `.section-card__header`). Reuses the existing flex layout
   in `.section-card__header`; this just locks the type style. */
.section-card__count {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    font-weight: var(--fw-regular);
}

/* Overflow placeholder shown at the bottom of a section card when the
   total exceeds what we render inline (50 by default). Visible, not
   wired — same convention as the detail page's "View all" link. */
.section-card__more {
    display: block;
    text-align: center;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    border-top: 1px solid var(--color-border);
}

/* ─── Management page ─────────────────────────────────────────────────── */

.management-table__col-email  { width: 28%; }
.management-table__col-name   { width: 18%; }
.management-table__col-role   { width: 12%; }
.management-table__col-status { width: 14%; }
.management-table__col-date   { width: 12%; }
.management-table__col-actions { width: 16%; }

.management-table__row--inactive {
    opacity: 0.55;
}

.management-user-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.management-avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-bg);
    color: var(--color-info-fg);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-semibold);
}

.management-status-text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.management-status-text--danger {
    color: var(--color-danger-fg);
}

.management-user-modal__body {
    padding: var(--space-4);
}

.management-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.management-warning__icon {
    color: var(--color-danger-fg);
    flex: 0 0 auto;
    margin-top: var(--space-1);
}

.management-warning__title {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.management-warning__copy {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.management-placeholder {
    padding: var(--space-5);
}

/* ─── Modal (centered dialog) ──────────────────────────────────────────── */

/* The Import Vendor List modal lives in `#drawer-root` alongside drawers
   and reuses the `[data-drawer-overlay]` / `[data-drawer-close]` close
   convention from `app.js`. The overlay itself is a centered flex
   container; the dialog has a fixed max width and a scrollable body. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    animation: drawer-fade-in var(--motion-base) var(--easing);
}

.modal {
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal--wide {
    max-width: 980px;
}

.modal--sm {
    max-width: 460px;
}

.modal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.modal__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.modal__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.modal__close {
    background: transparent;
    border: 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal__close:hover {
    color: var(--color-fg);
    background: var(--color-surface);
}

/* Underline-style tab strip; mirrors the design's two-tab pattern. */
.modal__tabs {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-6);
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.modal__tab {
    padding: var(--space-3) 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg-muted);
    text-decoration: none;
    /* Reset native <button> chrome so buttons and links render identically as
       tabs; the transparent bottom border is re-established for the underline. */
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.modal__tab:hover {
    color: var(--color-fg);
}

.modal__tab--active,
.modal__tab--active:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Client-side tab panels. The HTML `hidden` attribute must win over author
   `display` rules (e.g. `.stack { display: flex }`), or the inactive tab's
   panel renders alongside the active one. */
[data-modal-tab-panel][hidden] {
    display: none;
}

/* Nearly every modal wraps `.modal__body-wrap` + `.modal__footer` in a
   `<form>` (so the Cancel/submit buttons and every field share one
   submission) — a plain `<form>` is not a flex container, so without this
   rule `flex: 1 1 auto` / `overflow-y: auto` below never actually applied:
   they only take effect on a flex *item*, and the form (an ordinary block
   box) was `.modal`'s real flex item instead. The practical effect was that
   a modal taller than the viewport didn't scroll at all — its footer (every
   Cancel/submit button in the app) rendered past `.modal`'s own
   `overflow: hidden` and was silently clipped, invisible and unreachable,
   with nothing to scroll to reveal it. Making the form itself a flex column
   that fills the remaining space below `.modal__header` restores the
   intended header-fixed / body-scrolls / footer-fixed layout for all of
   them at once, with no per-modal template change. */
.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Wraps the swappable inner content (upload tab / preview / success /
   history). Scrolls when content overflows the dialog. */
.modal__body-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: var(--space-6);
}

/* Footer rendered inside each panel partial so the buttons stay
   context-aware. By default puts secondary on the left and primary
   on the right; `.modal__footer--end` right-aligns everything. */
.modal__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.modal__footer--end {
    justify-content: flex-end;
}

/* ─── Vendor import (upload zone, requirements, preview, success) ──────── */

/* Shared vertical-stack container for every Import-modal panel body. */
.vendor-import {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
}

.vendor-import__upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: calc(-1 * var(--space-6));
    padding: var(--space-6);
}

.vendor-import__empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-fg-muted);
}

.vendor-import__empty p {
    margin: 0;
}

.vendor-import__empty-hint {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-import__scan {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.vendor-import__scan-title {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.vendor-import__scan-hint {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    margin: 0 0 var(--space-2) 0;
}

.vendor-import__scan-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ─── Upload zone (drag/drop + Choose File + loading state) ─────────────── */

.upload-zone {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-10) var(--space-6);
    background: var(--color-bg);
    transition: border-color var(--motion-fast) var(--easing),
                background var(--motion-fast) var(--easing);
}

.upload-zone--dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

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

.upload-zone__idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.upload-zone__icon {
    color: var(--color-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.upload-zone__title {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
    margin: 0;
}

.upload-zone__or {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
    margin: 0;
}

.upload-zone__hint {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
    margin: var(--space-2) 0 0 0;
}

/* Loading overlay — visible while the form has the `htmx-request` class
   (HTMX adds it to elements named in `hx-indicator`). The idle layout
   stays in the DOM but is hidden so the zone height doesn't collapse. */
.upload-zone__progress {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--color-bg);
    border-radius: calc(var(--radius-md) - 2px);
    text-align: center;
}

.upload-zone.htmx-request .upload-zone__idle {
    visibility: hidden;
}

.upload-zone.htmx-request .upload-zone__progress {
    display: flex;
}

.upload-zone__progress-name {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
    margin: 0;
}

.upload-zone__progress-hint {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
    margin: 0;
}

/* CSS-only spinner — animated arc using border tricks. */
.spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color-primary-soft);
    border-top-color: var(--color-primary);
    animation: spinner-rotate 0.9s linear infinite;
}

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

/* ─── Import commit (Approve & Import) in-flight overlay ────────────────── */
/* The commit POST can run for minutes on large files. While it's in flight
   HTMX adds `htmx-request` to the footer form; we reveal a spinner overlay
   that covers the buttons (same bg as the footer) so the action reads as
   "working" instead of "did nothing". The buttons stay in the DOM so the
   idle footer layout is preserved underneath. */
.import-commit {
    position: relative;
}

.import-commit__progress {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg);
    text-align: left;
}

.import-commit.htmx-request .import-commit__progress {
    display: flex;
}

.import-commit__progress .spinner {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.import-commit__progress-name {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.import-commit__progress-hint {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

/* ─── In-button spinner (HTMX in-flight) ───────────────────────────────── */
/* A small spinner inlined inside a button. Hidden until the request that the
   button drives is in flight, then shown so the action reads as "working" and
   the disabled button can't be clicked again (`hx-disabled-elt`). It inherits
   `currentColor`, so it works on any button variant. */
.button__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spinner-rotate 0.9s linear infinite;
    flex: 0 0 auto;
}

/* Button that itself initiates the request (e.g. "Run New Scan" hx-get): HTMX
   adds `htmx-request` to the button. */
.button.htmx-request .button__spinner {
    display: inline-block;
}

/* Submit button inside a form mid-request (e.g. "Start scan"): HTMX adds
   `htmx-request` to the form, not the button. */
.drawer__form--run-scan.htmx-request .button--primary .button__spinner {
    display: inline-block;
}

/* ─── Loading drawer body (instant Run Scan placeholder) ────────────────── */
.drawer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 240px;
    text-align: center;
}

.drawer-loading__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
}

/* ─── File requirements card (pale-blue panel under the upload zone) ───── */

.requirements-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.requirements-card__title {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    margin: 0;
}

.requirements-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.requirements-card__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg-muted);
    margin: 0 0 var(--space-1) 0;
}

.requirements-card__label--required {
    color: var(--color-required);
}

.requirements-card__list {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.requirements-card__list li {
    margin: 0;
}

.requirements-card__hint {
    margin: var(--space-2) 0 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

/* ─── Preview summary header (filename + counts) ───────────────────────── */

.preview-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.preview-summary__file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.preview-summary__icon {
    color: var(--color-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.preview-summary__filename {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
    margin: 0;
    word-break: break-all;
}

.preview-summary__rows {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-subtle);
    margin: 0;
}

.preview-summary__counts {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-6);
}

.preview-summary__count {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-0);
}

.preview-summary__count-value {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: var(--fw-semibold);
}

.preview-summary__count-label {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.preview-summary__count--valid .preview-summary__count-value {
    color: var(--color-success-fg);
}

.preview-summary__count--errors .preview-summary__count-value {
    color: var(--color-danger-fg);
}

/* ─── Preview / success table (compact, scrollable) ────────────────────── */

.preview-table-wrap {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.preview-table-wrap .table {
    border: 0;
    border-radius: 0;
}

.table--compact thead th,
.table--compact tbody td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.table .numeric,
.table th.numeric,
.table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.preview-table__status {
    max-width: 280px;
}

/* Narrow row-number column on the preview table. Tabular numerals so
   row numbers line up vertically and the column hugs the digits. */
.preview-table__row-num {
    width: 1%;
    white-space: nowrap;
    color: var(--color-fg-subtle);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Stacked list of all `field_errors` for a row, replacing the
   single-message status cell. Keeps each error on its own line so
   "missing display_name" and "missing website_url" don't get crammed
   into one long sentence. */
.cell-error-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Inline cell-level highlight for invalid values — the red pill from
   the design (used for "Missing" placeholders or the actual bad value). */
.cell-error {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
}

.cell-error-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-danger-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.cell-error-text .icon {
    width: 16px;
    height: 16px;
}

.cell-valid-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-success-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.cell-valid-text .icon {
    width: 16px;
    height: 16px;
}

/* ─── Callouts (warning / success / danger banners) ────────────────────── */

.callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.callout > div {
    flex: 1;
}

.callout > .icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.callout__title {
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-1) 0;
}

.callout__title + p {
    margin: 0;
}

.callout--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}

.callout--success {
    background: var(--color-success-bg);
    color: var(--color-success-fg);
}

.callout--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

/* Full-width emphasis banner used for "Vendors successfully imported". */
.banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
}

.banner--success {
    background: var(--color-success-bg);
    color: var(--color-success-fg);
}

/* ─── Toast notifications ─────────────────────────────────────────────────
   Triggered server-side by writing the `paypro_flash` cookie via
   `services/flash.set_flash`. Read by `FlashMiddleware`, rendered by
   `templates/components/toast.html` into `#toast-tray`, and animated /
   auto-dismissed by `static/js/app.js`. */

.toast-tray {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: max-content;
    max-width: min(calc(100vw - var(--space-8)), 560px);
    pointer-events: none;
}

.toast-tray:empty {
    display: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--color-fg-inverse);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    animation: toast-slide-in var(--motion-slow) var(--easing) both;
}

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

.toast--leaving {
    animation: toast-slide-out var(--motion-base) var(--easing) forwards;
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Variant palettes — mirror the badge / callout color tokens so the
   toast matches the rest of the design system. */
.toast--success {
    background: #016630;
    color: var(--color-fg-inverse);
}

.toast--error {
    background: var(--color-danger-fg);
    color: var(--color-fg-inverse);
}

.toast--info {
    background: var(--color-info-fg);
    color: var(--color-fg-inverse);
}

.toast__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
}

.toast__icon .icon {
    width: 18px;
    height: 18px;
}

.toast__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast__title {
    margin: 0;
    font-weight: var(--fw-semibold);
    color: var(--color-fg-inverse);
}

.toast__body {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.toast__link {
    color: var(--color-fg-inverse);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
}

.toast__link:hover {
    text-decoration: none;
}

.toast__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast) var(--easing);
}

.toast__close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-fg-inverse);
}

.toast__close .icon {
    width: 16px;
    height: 16px;
}

/* ─── Checklist Select (expanded multi-checkbox picker) ───────────────── */

.checklist-select {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.checklist-select--error {
    border-color: var(--color-danger-fg);
}

.checklist-select__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--toolbar-control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg-subtle);
}

.checklist-select__search .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.checklist-select__search-input {
    border: 0;
    outline: none;
    width: 100%;
    min-width: 0;
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.checklist-select__search-input::placeholder {
    color: var(--color-fg-subtle);
}

.checklist-select__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 132px;
    overflow-y: auto;
    padding-right: var(--space-1);
}

.checklist-select__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 28px;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    cursor: pointer;
}

.checklist-select__option[hidden] {
    display: none;
}

.checklist-select__checkbox {
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.checklist-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checklist-select__empty,
.checklist-select__no-results {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* ─── Searchable Select (single / multi with filter input) ─────────────── */

.ss {
    position: relative;
    display: flex;
    flex-direction: column;
}

.ss__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--toolbar-control-height);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.ss__trigger:hover {
    border-color: var(--color-border-strong);
}

.ss.is-open .ss__trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.ss--error .ss__trigger {
    border-color: var(--color-danger-fg);
}

.ss__display {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ss__placeholder {
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.ss__selected-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.ss__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.ss__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--color-info-bg);
    color: var(--color-info-fg);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    max-width: 180px;
}

.ss__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss__chip-remove {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    font-size: var(--fs-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ss__chip-remove:hover {
    color: var(--color-fg);
}

.ss__caret {
    flex-shrink: 0;
    color: var(--color-fg-muted);
    transition: transform var(--motion-fast) var(--easing);
}

.ss.is-open .ss__caret {
    transform: rotate(180deg);
}

.ss__panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    display: none;
}

.ss.is-open .ss__panel {
    display: flex;
}

.ss__search {
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    outline: none;
    width: 100%;
    background: var(--color-bg);
    color: var(--color-fg);
}

.ss__search::placeholder {
    color: var(--color-fg-subtle);
}

.ss__options {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--space-1);
}

.ss__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
}

.ss__option:hover {
    background: var(--color-surface);
}

.ss__option[hidden] {
    display: none;
}

.ss__option-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss__checkbox,
.ss__radio {
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.ss__no-results {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* ─── Priority pill group ──────────────────────────────────────────────── */

.priority-group {
    display: inline-flex;
    gap: var(--space-2);
    border: 0;
    padding: 0;
    margin: 0;
}

.priority-group__option {
    position: relative;
}

.priority-group__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.priority-group__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
    background: var(--color-bg);
    cursor: pointer;
    transition:
        background var(--motion-fast) var(--easing),
        border-color var(--motion-fast) var(--easing),
        color var(--motion-fast) var(--easing);
}

.priority-group__label:hover {
    border-color: var(--color-border-strong);
}

.priority-group__option input:checked + .priority-group__label {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-fg);
}

.priority-group__option input:focus-visible + .priority-group__label {
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* ─── Danger button variant ────────────────────────────────────────────── */

.button--danger {
    background: var(--color-danger-solid);
    color: #fff;
    border-color: var(--color-danger-solid);
}

.button--danger:hover:not(:disabled) {
    background: var(--color-danger-solid-hover);
    border-color: var(--color-danger-solid-hover);
}

/* ─── Violation detail layout ──────────────────────────────────────────── */

/* Top summary row: Violation Overview (wider) + Merchant + Scan Info as three
   peer cards. `stretch` makes every card match the tallest one's height.
   Collapses to a single column on narrow viewports. */
.vd-summary-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-5);
    align-items: stretch;
}

/* Violation Overview card: header (title + status badge) is the top block and
   the fields/confidence are the bottom block, so the body anchors to the bottom
   of the equal-height card. */
.vd-overview-card {
    display: flex;
    flex-direction: column;
}

.vd-overview-card .vd-overview-body {
    margin-top: auto;
}

@media (max-width: 1024px) {
    .vd-summary-grid {
        grid-template-columns: 1fr;
    }
}

.vd-overview-body {
    display: flex;
    gap: var(--space-5);
}

.vd-overview-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
}

.vd-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.vd-field__label {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
    font-weight: var(--fw-medium);
}

.vd-field__value {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-fg);
}

.vd-field__value--strong {
    font-weight: var(--fw-semibold);
}

/* Outbound link variant (the scanned domain). Applied only when the stored value
   produced a safe href — otherwise the field stays plain text. */
.vd-field__value--link {
    color: var(--color-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.vd-field__value--link:hover {
    text-decoration: underline;
}

.vd-field__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-fg);
    margin: 0;
}

.vd-confidence-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 var(--space-5);
    border-left: 1px solid var(--color-border);
}

.vd-confidence__value {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.vd-confidence__value--high {
    color: var(--color-primary);
}

.vd-confidence__value--medium {
    color: var(--color-warning-fg);
}

.vd-confidence__value--low {
    color: var(--color-fg-muted);
}

.vd-confidence__severity {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

/* Latest disposition commentary on the Overview card (e.g. the auto-dismissal
   note when the violation's website was removed). Sits below the overview body
   as a muted, tinted block so it reads as context, not a field. */
.vd-review-note {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.vd-review-note__label {
    display: block;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    color: var(--color-fg-muted);
}

.vd-review-note__text {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
}

.vd-review-note__meta {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

.vd-sidebar-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.vd-sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    text-decoration: none;
    margin-top: var(--space-2);
}

.vd-sidebar-link:hover {
    text-decoration: underline;
}

.vd-sidebar-link .icon {
    width: 14px;
    height: 14px;
}

/* ─── Evidence section ─────────────────────────────────────────────────── */

.vd-evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.vd-evidence__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.vd-evidence__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-fg);
    margin: 0;
}

.vd-evidence__url {
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--color-fg-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.vd-evidence__image {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.vd-evidence__image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.vd-evidence__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 200px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.vd-evidence__placeholder-label {
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    font-weight: var(--fw-medium);
}

.vd-evidence__placeholder-hint {
    font-size: var(--fs-xs);
    color: var(--color-fg-subtle);
}

/* ─── Add-to-case modal ────────────────────────────────────────────────── */

.case-modal__summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
}

.case-modal__summary-label {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    flex: 1;
}

.case-modal__summary-field {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.case-modal__summary-field-label {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
}

.case-modal__summary-field-value {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.case-modal__search {
    position: relative;
}

.case-modal__search .icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-fg-subtle);
}

.case-modal__search .input {
    padding-left: calc(var(--space-3) + var(--icon-size) + var(--space-2));
}

.case-modal__table {
    border: 0;
    border-radius: 0;
}

.case-modal__table td:first-child,
.case-modal__table th:first-child {
    width: 40px;
}

/* ─── Create Case drawer ───────────────────────────────────────────────── */

.case-vendor-picker {
    position: relative;
}

.case-vendor-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    height: var(--toolbar-control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    text-align: left;
    cursor: pointer;
}

.case-vendor-picker__trigger:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.15);
}

.case-vendor-picker--error .case-vendor-picker__trigger {
    border-color: var(--color-danger-fg);
}

.case-vendor-picker__display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-vendor-picker__display--placeholder {
    color: var(--color-fg-subtle);
}

.case-vendor-picker__panel {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}

.case-vendor-picker__search {
    position: relative;
    display: block;
    margin-bottom: var(--space-3);
}

.case-vendor-picker__search .icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-fg-subtle);
    pointer-events: none;
}

.case-vendor-picker__search .input {
    padding-left: calc(var(--space-3) + var(--icon-size) + var(--space-2));
    border-radius: var(--radius-md);
}

.case-vendor-picker__options {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

.case-vendor-picker__option {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    text-align: left;
    cursor: pointer;
}

.case-vendor-picker__option:hover,
.case-vendor-picker__option[aria-selected="true"] {
    background: var(--color-surface-muted);
}

.case-vendor-picker__empty {
    padding: var(--space-3);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* Two labeled violation sources (Detected / Suspected) stacked in one field;
   a case needs at least one across both. */
.case-violations-group + .case-violations-group {
    margin-top: var(--space-4);
}

.case-violations-group__title {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

.case-violations {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
}

.case-violations--error {
    border-color: var(--color-danger-fg);
}

.case-violations__search {
    position: relative;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.case-violations__search .icon {
    position: absolute;
    top: 50%;
    left: calc(var(--space-3) + var(--space-3));
    transform: translateY(-50%);
    color: var(--color-fg-subtle);
    pointer-events: none;
}

.case-violations__search .input {
    padding-left: calc(var(--space-3) + var(--icon-size) + var(--space-2));
}

.case-violations__list {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
}

.case-violations__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    cursor: pointer;
}

.case-violations__row:hover {
    background: var(--color-surface);
}

.case-violations__row--disabled {
    color: var(--color-fg-subtle);
    cursor: not-allowed;
}

.case-violations__row--disabled:hover {
    background: var(--color-bg);
}

.case-violations__row + .case-violations__row {
    border-top: 1px solid var(--color-border);
}

.case-violations__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-violations__id {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.case-violations__empty {
    padding: var(--space-4);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* ─── Case detail ──────────────────────────────────────────────────────── */

.case-detail-header {
    margin-bottom: calc(-1 * var(--space-2));
}

.case-detail-header__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.case-detail-header .page-title {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
}

.case-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1.32fr);
    gap: var(--space-5);
    align-items: stretch;
}

.case-detail__main,
.case-detail__aside {
    min-width: 0;
}

.case-detail-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.case-detail-card .card__header {
    margin-bottom: var(--space-3);
}

.case-detail-card .card__title {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.case-detail-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    margin: 0;
}

.case-detail-summary__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.case-detail-summary dt,
.case-detail-vendor__label,
.case-status-change__label {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

.case-detail-summary dd {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.case-detail-link-button {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.case-assignee-control {
    position: relative;
    display: inline-flex;
}

.case-assignee-control__picker {
    position: absolute;
    top: calc(100% + var(--space-4));
    left: 0;
    z-index: var(--z-dropdown);
}

.case-assignee-picker {
    width: min(360px, calc(100vw - var(--space-8)));
    max-height: min(340px, calc(100vh - var(--space-8)));
    overflow-y: auto;
    padding: var(--space-3) 0 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}
.case-assignee-picker__search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    margin: 0 var(--space-3) var(--space-3);
    background: var(--color-bg);
}

.case-assignee-picker__search .icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-fg-subtle);
    pointer-events: none;
}

.case-assignee-picker__search .input {
    padding-left: var(--space-8);
    border-radius: var(--radius-pill);
}

.case-assignee-picker__list {
    display: flex;
    flex-direction: column;
}

.case-assignee-picker__row + .case-assignee-picker__row {
    border-top: 1px solid var(--color-border);
}

.case-assignee-picker__button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--color-fg);
    text-align: left;
    cursor: pointer;
}

.case-assignee-picker__button:hover {
    background: var(--color-table-header-bg);
}

.case-assignee-picker__button--unassigned {
    min-height: 48px;
}

.case-assignee-picker .case-detail-assignee__avatar {
    width: var(--space-8);
    height: var(--space-8);
    flex: 0 0 var(--space-8);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.case-assignee-picker__content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
}

.case-assignee-picker__eyebrow {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
}

.case-assignee-picker__name {
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
}

.case-assignee-picker__role,
.case-assignee-picker__empty {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.case-assignee-picker__check {
    color: var(--color-primary);
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
}

/* Shared status popover (cases header + merchants). The `.case-status-menu*`
   rules below stay for the case violations menu, which is not migrated. */
.status-menu {
    position: relative;
    flex-shrink: 0;
}

.status-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    background: transparent;
    /* Chevron colour; the inner badge keeps its own status-variant colours so
       the trigger matches the matching row in the dropdown. */
    color: var(--color-fg-muted);
    cursor: pointer;
}

.status-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    display: none;
    width: 335px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}

.status-menu.is-open .status-menu__panel {
    display: flex;
    flex-direction: column;
    max-height: var(--status-menu-panel-max-height);
    overflow-y: auto;
}

.status-menu__title {
    position: sticky;
    top: 0;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.status-menu__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    color: var(--color-fg);
    cursor: pointer;
}

.status-menu__item + .status-menu__item {
    border-top: 1px solid var(--color-border);
}

.status-menu__item:hover:not(:disabled) {
    background: var(--color-table-header-bg);
}

.status-menu__item:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.status-menu__item--current {
    background: var(--color-primary-soft);
}

.status-menu__item-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-weight: var(--fw-medium);
}

.status-menu__item-description,
.status-menu__check {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

.status-menu__check {
    display: inline-flex;
    color: var(--color-primary);
}

/* Sub-status rows sit under their parent status as siblings. They carry no
   separator between themselves — the next parent's border closes the group. */
.status-menu__sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4) var(--space-2) var(--status-menu-sub-item-indent);
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    cursor: pointer;
}

.status-menu__sub-item:first-of-type {
    padding-top: var(--space-3);
}

.status-menu__sub-item:last-of-type {
    padding-bottom: var(--space-3);
}

.status-menu__sub-item:hover:not(:disabled) {
    background: var(--color-table-header-bg);
}

.status-menu__sub-item:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.status-menu__sub-item--current {
    background: var(--color-primary-soft);
    font-weight: var(--fw-medium);
}

/* A parent row following sub-status rows is no longer an adjacent sibling of
   another `.status-menu__item`, so it needs its own separator. */
.status-menu__sub-item + .status-menu__item {
    border-top: 1px solid var(--color-border);
}

.case-status-menu {
    position: relative;
    flex-shrink: 0;
}

.case-status-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-fg);
    cursor: pointer;
}

.case-status-menu__trigger .badge {
    padding: 0;
    background: transparent;
    color: var(--color-primary);
}

.case-status-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    display: none;
    width: 335px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}

.case-status-menu.is-open .case-status-menu__panel {
    display: flex;
    flex-direction: column;
}

.case-status-menu__title {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.case-status-menu__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    color: var(--color-fg);
    cursor: pointer;
}

.case-status-menu__item + .case-status-menu__item {
    border-top: 1px solid var(--color-border);
}

.case-status-menu__item:hover:not(:disabled) {
    background: var(--color-table-header-bg);
}

.case-status-menu__item:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.case-status-menu__item--current {
    background: var(--color-primary-soft);
}

.case-status-menu__item-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-weight: var(--fw-medium);
}

.case-status-menu__item-description,
.case-status-menu__check {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

.case-status-menu__check {
    display: inline-flex;
    color: var(--color-primary);
}

.case-status-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
}

.case-status-chip--open {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.case-status-chip--in_review {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}

.case-status-chip--pending_review {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}

.case-status-chip--confirmed_issue {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.case-status-chip--resolved,
.case-status-chip--resolved_no_issue,
.case-status-chip--solved_remediated {
    background: var(--color-success-bg);
    color: var(--color-success-fg);
}

.case-status-chip--resolved_action_taken {
    background: var(--color-info-bg);
    color: var(--color-info-fg);
}

.case-status-chip--reopened {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}

.case-status-chip--cleared_until_next_scan,
.case-status-chip--cleared_permanently,
.case-status-chip--false_positive_model_issue {
    background: var(--color-neutral-bg);
    color: var(--color-neutral-fg);
}

.case-detail-vendor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.case-detail-vendor__name {
    display: inline-flex;
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
}

.case-detail-vendor__domain {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* The merchant's site opens in a new tab, so it reads as a link like the
   merchant name above it. Applied only when the value produced a safe href. */
.case-detail-vendor__domain--link {
    color: var(--color-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.case-detail-vendor__domain--link:hover {
    text-decoration: underline;
}

.case-detail-violations,
.case-detail-notes,
.case-add-violations {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.case-add-violations__row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.case-add-violations__row {
    cursor: pointer;
}

.case-add-violations__row:hover {
    border-color: var(--color-border-strong);
}

.case-add-violations__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.case-add-violations__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

.case-add-violations__id {
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.case-add-violations__title {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.case-add-violations__description {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.case-detail-table {
    width: calc(100% + (2 * var(--space-4)));
    margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    border-collapse: collapse;
    table-layout: fixed;
}

.case-detail-table th,
.case-detail-table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    overflow: hidden;
}

.case-detail-table th {
    background: var(--color-table-header-bg);
    color: var(--color-fg-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: -0.4px;
    white-space: nowrap;
}

.case-detail-table th:nth-child(1),
.case-detail-table td:nth-child(1) {
    width: 50%;
}

.case-detail-table th:nth-child(2),
.case-detail-table td:nth-child(2) {
    width: 18%;
}

.case-detail-table th:nth-child(3),
.case-detail-table td:nth-child(3) {
    width: 18%;
}

.case-detail-table th:nth-child(4),
.case-detail-table td:nth-child(4) {
    width: 16%;
    text-align: center;
}

.case-detail-table--notes th:nth-child(1),
.case-detail-table--notes td:nth-child(1) {
    width: 40%;
}

.case-detail-table--notes th:nth-child(3),
.case-detail-table--notes td:nth-child(3) {
    width: 24%;
}

.case-detail-table--violations th:nth-child(1),
.case-detail-table--violations td:nth-child(1) {
    width: 42%;
}

.case-detail-table--violations th:nth-child(2),
.case-detail-table--violations td:nth-child(2) {
    width: 16%;
}

.case-detail-table--violations th:nth-child(3),
.case-detail-table--violations td:nth-child(3) {
    width: 28%;
    overflow: visible;
}

.case-detail-table--violations th:nth-child(4),
.case-detail-table--violations td:nth-child(4) {
    width: 14%;
}

.case-detail-table__title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
    overflow-wrap: anywhere;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.case-detail-table__description {
    display: -webkit-box;
    margin-top: var(--space-1);
    overflow: hidden;
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.case-violation-status-menu {
    display: inline-flex;
}

.case-violation-status-menu__trigger {
    padding: 0;
    background: transparent;
}

.case-violation-status-menu__trigger .case-status-chip {
    gap: var(--space-1);
}

.case-violation-status-menu__panel {
    width: 335px;
}

.case-detail-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    cursor: pointer;
}

.case-detail-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.case-detail-icon-button--danger {
    color: var(--color-danger-fg);
}

.case-detail-icon-button--edit {
    color: var(--color-primary);
}

.case-detail-actions-inline,
.case-detail-assignee {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.case-detail-assignee__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-semibold);
}

.note-composer__field {
    display: grid;
    gap: var(--space-2);
}

.note-composer__label {
    color: var(--color-fg-muted);
}

.note-composer__shell {
    display: flex;
    flex-direction: column;
    overflow: visible;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.note-composer__textarea {
    min-height: 116px;
    width: 100%;
    padding: var(--space-4);
    border: 0;
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    line-height: var(--lh-base);
    resize: vertical;
}

.note-composer__textarea:focus {
    outline: none;
}

.note-composer__attachments {
    display: block;
    border-top: 1px solid var(--color-border);
    padding: var(--space-3);
}

.note-composer__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: var(--space-3);
}

.note-composer__add-tile {
    position: relative;
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    cursor: pointer;
}

.note-composer__tiles:has(.note-composer-tile) .note-composer__add-tile {
    min-height: 152px;
}

.note-composer__file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.note-composer__add-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-bold);
}

.note-composer__add-inline .icon {
    width: 20px;
    height: 20px;
}

.note-composer__info {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-bold);
}

.note-composer__tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--space-2));
    z-index: var(--z-popover);
    display: none;
    width: min(360px, 80vw);
    border-radius: var(--radius-sm);
    background: var(--color-fg);
    color: var(--color-fg-inverse);
    padding: var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    box-shadow: var(--shadow-md);
}

.note-composer__add-tile:hover .note-composer__tooltip,
.note-composer__add-tile:focus-within .note-composer__tooltip {
    display: block;
}

.note-composer-tile {
    position: relative;
    margin: 0;
    overflow: visible;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
}

.note-composer-tile__preview {
    position: relative;
    display: flex;
    height: 86px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-table-header-bg);
    color: var(--color-fg-muted);
}

.note-composer-tile__preview img,
.note-composer-tile__preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.note-composer-tile__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-inverse);
}

.note-composer-tile__remove {
    position: absolute;
    top: calc(-1 * var(--space-3));
    right: calc(-1 * var(--space-3));
    z-index: 1;
    display: inline-flex;
    width: var(--space-8);
    height: var(--space-8);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    font-size: 28px;
    line-height: 1;
    font-weight: var(--fw-bold);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.note-composer-tile__caption {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2);
}

.note-composer-tile__caption strong,
.note-composer-tile__caption span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-composer-tile__caption strong {
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.note-composer-tile__caption span {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.note-attachment-modal[hidden] {
    display: none;
}

.note-attachment-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.note-attachment-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-primary-soft);
    opacity: 0.75;
}

.note-attachment-modal__panel {
    position: relative;
    display: grid;
    width: min(920px, 100%);
    max-height: calc(100vh - 2 * var(--space-6));
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}

.note-attachment-modal__header,
.note-attachment-modal__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.note-attachment-modal__header {
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}

.note-attachment-modal__header h2,
.note-attachment-modal__header p {
    margin: 0;
}

.note-attachment-modal__header h2 {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.note-attachment-modal__header p,
.note-attachment-modal__progress {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.note-attachment-modal__close {
    border: 0;
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
}

.note-attachment-modal__body {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    min-height: 420px;
}

.note-attachment-modal__rail {
    border-right: 1px solid var(--color-border);
    background: var(--color-table-header-bg);
}

.note-attachment-modal__rail-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    padding: var(--space-3);
    color: var(--color-fg);
    text-align: left;
    cursor: pointer;
}

.note-attachment-modal__rail-item.is-active {
    border-left-color: var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary);
}

/* The filename sits in the 1fr track; without min-width:0 a long unbreakable
   name blows the grid track out and overflows past the rail into the preview. */
.note-attachment-modal__rail-item strong {
    min-width: 0;
    overflow: hidden;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.note-attachment-modal__rail-thumb,
.note-attachment-modal__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.note-attachment-modal__preview-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.note-attachment-modal__rail-thumb {
    height: 56px;
}

/* Extension badge shown in a thumbnail for non-image/-video files (e.g. "PDF"). */
.note-file-ext {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}

.note-attachment-modal__rail-thumb img,
.note-attachment-modal__rail-thumb video,
.note-attachment-modal__preview img,
.note-attachment-modal__preview video,
.note-attachment-modal__preview-link img,
.note-attachment-modal__preview-link video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.note-attachment-modal__editor {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-5);
}

.note-attachment-modal__preview {
    height: 240px;
}

.note-attachment-modal__footer {
    border-top: 1px solid var(--color-border);
}

.note-attachment-modal__remove {
    margin-right: auto;
}

.note-attachment-modal__progress {
    margin-right: auto;
}

.merchant-notes {
    padding-bottom: var(--space-5);
}

.merchant-notes__header {
    margin-bottom: var(--space-4);
}

.merchant-notes__add {
    min-height: var(--space-8);
    padding: var(--space-1) var(--space-3);
}

.merchant-notes__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.merchant-note-card {
    position: relative;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.merchant-note-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.merchant-note-card__author {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: var(--space-3);
}

.merchant-note-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-notification-soft);
    color: var(--color-notification);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-bold);
}

.merchant-note-card__meta {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.merchant-note-card__meta strong {
    color: var(--color-fg);
    font-weight: var(--fw-semibold);
}

.merchant-note-card__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.merchant-note-card__actions form {
    margin: 0;
}

.merchant-note-card__text {
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    white-space: pre-wrap;
}

.merchant-note-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.merchant-note-attachments--drawer {
    grid-template-columns: 1fr;
    margin-top: var(--space-2);
}

.merchant-note-attachment {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.merchant-note-attachment__preview {
    position: relative;
    display: flex;
    height: 96px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-surface);
    color: var(--color-fg-muted);
}

.merchant-note-attachment__preview img,
.merchant-note-attachment__preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-note-attachment__file .icon {
    width: var(--space-8);
    height: var(--space-8);
}

.merchant-note-attachment__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-inverse);
}

.merchant-note-attachment__play .icon {
    width: var(--space-8);
    height: var(--space-8);
}

.merchant-note-attachment__caption {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
}

.merchant-note-attachment__caption span,
.merchant-note-attachment__caption small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-note-attachment__caption span {
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.merchant-note-attachment__caption small {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.merchant-note-attachment__delete {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-8);
    width: var(--space-8);
    height: var(--space-8);
    margin: 0;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
}

.merchant-note-attachment__delete .case-detail-icon-button {
    min-width: 100%;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: var(--radius-pill);
}

/* Note attachment chips (read + inline edit) */
.merchant-note-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.merchant-note-chips--editing {
    margin-top: var(--space-2);
}

.merchant-note-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.merchant-note-chip--removed {
    display: none;
}

.merchant-note-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-6);
    height: var(--space-6);
    overflow: hidden;
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
}

.merchant-note-chip__icon .icon {
    width: var(--space-5);
    height: var(--space-5);
}

.merchant-note-chip__icon--pdf {
    color: var(--color-danger-fg);
}

.merchant-note-chip__icon--image {
    background: var(--color-surface);
}

.merchant-note-chip__icon--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-note-chip__name {
    overflow: hidden;
    color: var(--color-notification);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.merchant-note-chip__name:hover {
    text-decoration: underline;
}

.merchant-note-chip__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-fg-muted);
}

.merchant-note-chip__download .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.merchant-note-chip__download:hover {
    color: var(--color-fg);
}

.merchant-note-chip--editable {
    padding-top: var(--space-2);
}

.merchant-note-chip__remove {
    position: absolute;
    top: calc(-1 * var(--space-2));
    right: calc(-1 * var(--space-2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5);
    height: var(--space-5);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.merchant-note-chip__remove:hover {
    color: var(--color-danger-fg);
    border-color: var(--color-danger-fg);
}

.merchant-note-chip__remove .icon {
    width: var(--space-3);
    height: var(--space-3);
}

/* Inline note edit (textarea + editing action row) */
.merchant-note-card__actions--editing {
    gap: var(--space-3);
}

.merchant-note-card__textarea {
    width: 100%;
    min-height: 96px;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    resize: vertical;
}

.merchant-note-card__textarea:focus {
    outline: none;
    border-color: var(--color-notification);
}

.merchant-note-card__error {
    margin-bottom: var(--space-3);
}

.merchant-note-attachments__label {
    margin: var(--space-4) 0 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* Inline edit "Add attachment" control + pending (not-yet-saved) chips */
.merchant-note-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.merchant-note-attach__pending {
    margin-top: 0;
}

.merchant-note-attach__pending:empty {
    display: none;
}

.merchant-note-attach__add {
    cursor: pointer;
}

.merchant-note-chip--pending {
    border-style: dashed;
}

.merchant-note-chip--pending .merchant-note-chip__name {
    color: var(--color-fg);
}

/* Chip body: icon + name. In read mode it is a button that opens the preview. */
.merchant-note-chip__main {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.merchant-note-chip__main--button {
    cursor: pointer;
}

.merchant-note-chip__main--button:hover .merchant-note-chip__name {
    text-decoration: underline;
}

/* Shared attachment media (preview modal + full-view carousel) */
.attachment-media {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.attachment-media--image {
    object-fit: contain;
}

.attachment-media--video {
    width: 100%;
    max-height: 100%;
    background: var(--color-fg-strong);
}

.attachment-media--pdf {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--color-surface);
}

.attachment-media--file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--color-fg-muted);
    text-align: center;
}

.attachment-media__ext {
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
}

.attachment-media__hint {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

/* Only the backdrop closes the modal on click; content sits above it so
   clicking the image, controls, or editable fields never dismisses it. */
.modal-overlay__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Attachment preview modal */
.attachment-preview {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    padding: var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.attachment-preview__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.attachment-preview__toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.attachment-preview__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    cursor: pointer;
    text-decoration: none;
}

.attachment-preview__btn:hover {
    color: var(--color-fg);
    background: var(--color-surface);
}

.attachment-preview__btn--danger:hover {
    color: var(--color-danger-fg);
    border-color: var(--color-danger-fg);
    background: var(--color-danger-bg);
}

.attachment-preview__btn .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.attachment-preview__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.attachment-preview__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.attachment-preview__title-input,
.attachment-preview__description-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    resize: none;
}

.attachment-preview__title-input {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
}

.attachment-preview__description-input {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.attachment-preview__title-input:hover,
.attachment-preview__description-input:hover {
    border-color: var(--color-border);
}

.attachment-preview__title-input:focus,
.attachment-preview__description-input:focus {
    outline: none;
    border-color: var(--color-notification);
    background: var(--color-bg);
}

/* Full-view attachment carousel */
.modal-overlay--full {
    padding: 0;
    background: var(--color-overlay-strong);
}

.attachment-gallery {
    flex-direction: column;
    align-items: stretch;
}

.attachment-gallery__chrome {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* Above the stage (z-index 1), which is full-width and later in the DOM —
       otherwise the stage would swallow clicks on these controls. */
    z-index: 2;
}

.attachment-gallery__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-scrim-surface);
    color: var(--color-fg-inverse);
    cursor: pointer;
    text-decoration: none;
}

.attachment-gallery__btn:hover {
    background: var(--color-scrim-surface-hover);
}

.attachment-gallery__btn--danger:hover {
    background: var(--color-danger-fg);
    color: var(--color-fg-inverse);
}

.attachment-gallery__btn .icon {
    width: var(--space-5);
    height: var(--space-5);
}

.attachment-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-12);
    height: var(--space-12);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-scrim-surface);
    color: var(--color-fg-inverse);
    cursor: pointer;
    /* Above the stage so the arrows stay clickable (see chrome note above). */
    z-index: 2;
}

.attachment-gallery__nav:hover {
    background: var(--color-scrim-surface-hover);
}

.attachment-gallery__nav--prev {
    left: var(--space-5);
}

.attachment-gallery__nav--next {
    right: var(--space-5);
}

.attachment-gallery__stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: var(--space-16);
}

.attachment-gallery__slide {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 100%;
    margin: 0;
}

.attachment-gallery__slide.is-active {
    display: flex;
}

.attachment-gallery__slide .attachment-media {
    max-height: 70vh;
}

.attachment-gallery__slide .attachment-media--pdf {
    width: min(900px, 90vw);
    height: 70vh;
}

.attachment-gallery__footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-8);
    color: var(--color-fg-inverse);
}

.attachment-gallery__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.attachment-gallery__author-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.attachment-gallery__author-meta strong {
    font-weight: var(--fw-semibold);
}

.attachment-gallery__caption {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.attachment-gallery__caption strong {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
}

.attachment-gallery__caption span {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.attachment-gallery__counter {
    color: var(--color-fg-inverse);
    opacity: 0.7;
}

.merchant-notes__empty {
    padding: var(--space-8);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-fg-muted);
}

.merchant-notes__empty h3 {
    margin: 0 0 var(--space-1);
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.merchant-notes__empty p {
    margin: 0;
}

.merchant-note-drawer {
    width: min(480px, 100vw);
}

.merchant-note-drawer__textarea {
    min-height: 220px;
    resize: vertical;
}

.merchant-note-drawer__existing h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
}

.merchant-note-upload {
    min-height: 140px;
}

.merchant-note-previews {
    grid-template-columns: 1fr;
}

.merchant-note-previews video {
    width: 100%;
}

.case-note-drawer {
    width: min(420px, 100vw);
}

.case-note-drawer__textarea {
    min-height: 260px;
    resize: vertical;
}

.case-note-upload {
    position: relative;
    display: flex;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
    color: var(--color-fg-muted);
    cursor: pointer;
    text-align: center;
}

.case-note-upload:hover {
    border-color: var(--color-border-strong);
}

.case-note-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.case-note-upload__placeholder,
.case-note-upload__files {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.case-note-upload__files {
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.case-note-previews {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.case-note-preview {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.case-note-preview__image,
.case-note-preview__placeholder {
    display: flex;
    width: 100%;
    min-height: 180px;
    max-height: 260px;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    color: var(--color-fg-muted);
}

.case-note-preview__caption {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

.case-history {
    display: flex;
    flex-direction: column;
    margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
}

.case-history__event {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.case-detail-card--history {
    height: 100%;
    min-height: 0;
}

.case-history__meta-row,
.case-history__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-muted);
}

.case-history__meta-row strong {
    color: var(--color-fg);
    font-weight: var(--fw-semibold);
}

.case-history__note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
}

.case-history__summary {
    margin: 0;
    color: var(--color-fg);
}

.case-add-violations__search {
    position: relative;
    display: block;
}

.case-add-violations__search .icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-fg-subtle);
    pointer-events: none;
}

.case-add-violations__search .input {
    padding-left: var(--space-8);
}

.case-status-change__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.case-status-change__summary > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.form-error {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

@media (max-width: 1024px) {
    .case-detail {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .case-detail-card--history {
        height: auto;
    }

    .case-detail-summary,
    .case-status-change__summary {
        grid-template-columns: 1fr;
    }

    .case-detail-header__title-row,
    .case-detail-vendor {
        flex-direction: column;
    }

    .case-detail-vendor {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.priority-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.priority-dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.priority-dot--1,
.priority-dot--2 { color: var(--color-success-fg); }
.priority-dot--3 { color: #b45309; }
.priority-dot--4,
.priority-dot--5 { color: var(--color-danger-fg); }

/* ─── Vendor report ────────────────────────────────────────────────────── */

.vendor-detail-actions-menu__item {
    text-decoration: none;
}

.vendor-detail-actions-menu__item:hover {
    text-decoration: none;
}

.vendor-report-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    max-width: 1080px;
}

.vendor-report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.vendor-report {
    --report-blue: #3b82f6;
    --report-red: #ef4444;
    --report-orange: #f59e0b;
    --report-purple: #8b5cf6;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 1080px;
    width: 100%;
}

.vendor-report-hero,
.vendor-report-card,
.vendor-report-kpi {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.vendor-report-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6);
}

.vendor-report-hero__main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
}

.vendor-report-hero__logo {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    flex: 0 0 auto;
}

.vendor-report-hero__title {
    margin: 0;
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    color: var(--color-fg);
}

.vendor-report-hero__link {
    display: inline-flex;
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm);
}

.vendor-report-hero__meta .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.vendor-report-hero__assessment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    text-align: center;
    flex: 0 0 auto;
}

.vendor-report-hero__assessment strong {
    color: var(--color-fg);
}

.vendor-report-hero__assessment-icon {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.vendor-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.vendor-report-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-5);
}

.vendor-report-kpi__icon {
    width: var(--space-10);
    height: var(--space-10);
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.vendor-report-kpi__icon .icon {
    width: var(--space-5);
    height: var(--space-5);
}

.vendor-report-kpi__trend,
.vendor-report-kpi__badge {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
}

.vendor-report-kpi__trend .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.vendor-report-kpi__trend--up {
    color: var(--color-success-fg);
}

.vendor-report-kpi__trend--down {
    color: #ea580c;
}

.vendor-report-kpi__trend--purple {
    color: #9333ea;
}

.vendor-report-kpi__icon--blue { background: var(--color-info-bg); color: var(--color-info-fg); }
.vendor-report-kpi__icon--orange { background: #ffedd5; color: #c2410c; }
.vendor-report-kpi__icon--red { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.vendor-report-kpi__icon--purple { background: #f3e8ff; color: #7e22ce; }

.vendor-report-kpi__label,
.vendor-report-kpi__hint {
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-kpi strong {
    color: var(--color-fg);
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
}

.vendor-report-grid {
    display: grid;
    gap: var(--space-5);
}

.vendor-report-grid--profile {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2fr);
}

.vendor-report-grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vendor-report-grid--summary {
    align-items: stretch;
}

.vendor-report-card {
    padding: var(--space-5);
}

.vendor-report-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.vendor-report-card__header h2 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-fg);
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
}

.vendor-report-card__header .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.vendor-report-card h3 {
    margin: 0 0 var(--space-3);
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.vendor-report-card--placeholder {
    min-height: 330px;
}

.vendor-report-placeholder {
    min-height: 255px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: var(--color-fg-subtle);
    background: var(--color-surface);
}

.vendor-report-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.vendor-report-profile-grid > div {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.vendor-report-profile-grid span,
.vendor-report-list__item span,
.vendor-report-empty,
.vendor-report-domain-row span,
.vendor-report-domain-meta span {
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-profile-grid strong,
.vendor-report-list__item strong {
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.vendor-report-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.vendor-report-list--accent .vendor-report-list__item {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-soft);
}

.vendor-report-change-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.vendor-report-change-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.vendor-report-change-field span {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
}

.vendor-report-change-field strong {
    overflow-wrap: anywhere;
}

.vendor-report-domains {
    margin-bottom: var(--space-5);
}

.vendor-report-domains h3,
.vendor-report-table-block h3 {
    margin-bottom: var(--space-3);
}

.vendor-report-domain-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) repeat(2, minmax(160px, 0.8fr));
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.vendor-report-domain-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.vendor-report-domain-card + .vendor-report-domain-card {
    margin-top: var(--space-3);
}

.vendor-report-domain-card strong {
    color: var(--color-fg);
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
}

.vendor-report-domain-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-8);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.vendor-report-domain-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.vendor-report-domain-meta b {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-table th,
.vendor-report-table td {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.vendor-report-table th {
    color: var(--color-fg-muted);
    font-weight: var(--fw-semibold);
}

.vendor-report-risk {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.4fr);
    gap: var(--space-8);
    align-items: center;
}

.vendor-report-pie {
    width: 180px;
    height: 180px;
    margin: var(--space-3) auto;
    border-radius: 50%;
}

.vendor-report-risk__empty-chart {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-3) auto;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-fg-muted);
    text-align: center;
}

.vendor-report-risk__empty-chart strong {
    color: var(--color-fg);
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
}

.vendor-report-risk__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    justify-content: center;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
}

.vendor-report-risk__legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.vendor-report-risk__legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.vendor-report-confidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.vendor-report-confidence__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.vendor-report-confidence__row > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
}

.vendor-report-confidence__row span {
    color: var(--color-fg-subtle);
}

.vendor-report-confidence__bar {
    display: block;
    height: 12px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--color-border);
}

.vendor-report-confidence__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.vendor-report-confidence__row--high { color: var(--report-red); }
.vendor-report-confidence__row--medium { color: var(--report-orange); }
.vendor-report-confidence__row--low { color: #eab308; }

.vendor-report-confidence__row--high .vendor-report-confidence__bar i {
    background: var(--report-red);
}

.vendor-report-confidence__row--medium .vendor-report-confidence__bar i {
    background: var(--report-orange);
}

.vendor-report-confidence__row--low .vendor-report-confidence__bar i {
    background: #eab308;
}

.vendor-report-critical,
.vendor-report-violation-details,
.vendor-report-history,
.vendor-report-status-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.vendor-report-critical__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.5fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--color-danger-bg);
    border-left: 4px solid var(--color-danger-fg);
    border-radius: var(--radius-md);
    background: #fff1f2;
    color: var(--color-fg);
    text-decoration: none;
}

.vendor-report-critical__item:hover {
    text-decoration: none;
    border-color: var(--color-danger-fg);
}

.vendor-report-critical__item span:not(.badge) {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
}

.vendor-report-critical__item b {
    color: var(--color-danger-fg);
}

.vendor-report-violation {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.vendor-report-violation > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.vendor-report-violation > header > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.vendor-report-violation p {
    margin: var(--space-3) 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-evidence__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.vendor-report-artifact {
    display: grid;
    min-height: 72px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-fg-muted);
}

.vendor-report-evidence__image {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.vendor-report-evidence__image img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.vendor-report-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.vendor-report-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--space-3);
}

.vendor-report-timeline__item::before {
    content: '';
    position: absolute;
    top: calc(var(--space-4) + 7px);
    bottom: calc(-1 * (var(--space-4) + var(--space-4) + 7px));
    left: 7px;
    border-left: 1px solid var(--color-border-strong);
    z-index: 0;
}

.vendor-report-timeline__item:last-child::before {
    display: none;
}

.vendor-report-timeline__dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: var(--space-4);
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.vendor-report-timeline__body {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.vendor-report-timeline__body header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.vendor-report-timeline__body header > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.vendor-report-timeline__body p {
    margin: var(--space-2) 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.vendor-report-timeline__body time {
    color: var(--color-fg-subtle);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    white-space: nowrap;
}

.vendor-report-timeline__violations {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.vendor-report-timeline__violation {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: #fff5f5;
    color: var(--color-fg);
    text-decoration: none;
}

.vendor-report-timeline__violation:hover {
    text-decoration: none;
    border-color: var(--color-danger-fg);
}

.vendor-report-timeline__violation-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
}

.vendor-report-timeline__violation-header {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.vendor-report-timeline__violation-header strong {
    color: var(--color-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-sm);
}

.vendor-report-timeline__violation-header .badge {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.vendor-report-timeline__violation-confidence {
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.vendor-report-timeline__violation small {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.vendor-report-timeline__violation-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--color-danger-fg);
}

.vendor-report-policy-table td:first-child {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.vendor-report-scan-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
}

.vendor-report-scan-summary strong {
    color: var(--color-fg);
}

.vendor-report-case-summary {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
}

.vendor-report-donut {
    width: 150px;
    height: 150px;
    justify-self: center;
    border-radius: 50%;
    position: relative;
}

.vendor-report-donut::after {
    content: '';
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: var(--color-bg);
}

.vendor-report-donut-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.vendor-report-donut-legend > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.vendor-report-donut-legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.vendor-report-donut-legend strong {
    color: var(--color-fg);
}

.vendor-report-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.vendor-report-dot--blue { background: var(--report-blue); }
.vendor-report-dot--yellow { background: #fde68a; }
.vendor-report-dot--red { background: var(--report-red); }
.vendor-report-dot--purple { background: var(--report-purple); }
.vendor-report-dot--green { background: #22c55e; }
.vendor-report-dot--orange { background: var(--report-orange); }

.vendor-report-scan-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.vendor-report-scan-summary > div {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
}

.vendor-report-scan-summary strong {
    font-size: var(--fs-2xl);
}

.vendor-report-scan-summary > div:first-child {
    background: var(--color-primary-soft);
}

.vendor-report-scan-summary > div:last-child {
    background: #fff7ed;
    border-color: #fed7aa;
}

.vendor-report-scan-summary > div:first-child span,
.vendor-report-scan-summary > div:first-child strong {
    color: var(--color-info-fg);
}

.vendor-report-scan-summary > div:last-child span,
.vendor-report-scan-summary > div:last-child strong {
    color: #c2410c;
}

.vendor-report-scan-bars {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    align-items: center;
    margin-top: var(--space-6);
}

.vendor-report-scan-bars__row {
    display: contents;
}

.vendor-report-scan-bars__row > span {
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm);
    text-align: right;
}

.vendor-report-scan-bars__row > i {
    display: block;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    position: relative;
}

.vendor-report-scan-bars__row > i::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    border-bottom: 1px solid var(--color-border-strong);
}

.vendor-report-scan-bars__row b {
    display: block;
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--report-blue);
}

.vendor-report-scan-bars__row strong {
    color: var(--color-fg);
    font-size: var(--fs-sm);
}

.vendor-report-scan-bars__axis {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: var(--color-fg-subtle);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.vendor-report-scan-bars__axis span {
    text-align: left;
}

.vendor-report-scan-bars__axis span:last-child {
    text-align: right;
}

.vendor-report-history__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    text-decoration: none;
}

.vendor-report-history__item:hover {
    text-decoration: none;
    border-color: var(--color-border-strong);
}

.vendor-report-history__item > span:first-child {
    width: var(--space-8);
    height: var(--space-8);
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-success-bg);
    color: var(--color-success-fg);
}

.vendor-report-history__item strong {
    display: flex;
    flex-direction: column;
}

.vendor-report-history__item small,
.vendor-report-history__item time {
    color: var(--color-fg-subtle);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.vendor-report-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm);
    text-align: center;
    padding: var(--space-5);
}

.vendor-report-footer strong {
    color: var(--color-fg);
}

.vendor-report-pdf {
    margin: 0;
    padding: 24px;
    background: #f9fafb;
    color: var(--color-fg);
    font-family: var(--font-sans);
}

.vendor-report-pdf .vendor-report {
    max-width: none;
}

.vendor-report-pdf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    break-inside: avoid;
    page-break-inside: avoid;
}

.vendor-report-pdf-header__logo {
    display: block;
    width: 180px;
    max-height: 42px;
    object-fit: contain;
}

.vendor-report-pdf-header__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    text-align: right;
}

.vendor-report-pdf-header__meta strong {
    color: var(--color-fg);
    font-size: var(--fs-md);
    line-height: var(--lh-md);
}

.vendor-report-pdf .vendor-report-card--trust-posture {
    display: none;
}

.vendor-report-pdf .vendor-report-grid--profile {
    grid-template-columns: 1fr;
}

.vendor-report-pdf .vendor-report-card--risk-overview {
    break-inside: avoid;
    page-break-inside: avoid;
}

.vendor-report-pdf .vendor-report-risk {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-4);
}

.vendor-report-pdf .vendor-report-pie,
.vendor-report-pdf .vendor-report-risk__empty-chart {
    width: 140px;
    height: 140px;
    min-height: 140px;
    margin-inline: auto;
}

@media print {
    .vendor-report-toolbar,
    .breadcrumb,
    .app__sidebar,
    .app__header {
        display: none;
    }

    .app {
        display: block;
    }

    .app__content {
        max-width: none;
        padding: 0;
    }

    .vendor-report-card--page-break {
        break-before: auto;
    }

    .vendor-report-card,
    .vendor-report-hero,
    .vendor-report-kpi,
    .vendor-report-kpis,
    .vendor-report-grid {
        break-before: auto;
        break-after: auto;
        break-inside: auto;
        page-break-before: auto;
        page-break-after: auto;
        page-break-inside: auto;
    }

    .vendor-report-card--risk-overview {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 960px) {
    .vendor-report-toolbar,
    .vendor-report-hero,
    .vendor-report-violation > header {
        flex-direction: column;
        align-items: stretch;
    }

    .vendor-report-kpis,
    .vendor-report-grid--profile,
    .vendor-report-grid--split,
    .vendor-report-risk,
    .vendor-report-domain-meta,
    .vendor-report-profile-grid,
    .vendor-report-case-summary {
        grid-template-columns: 1fr;
    }

    .vendor-report-domain-row,
    .vendor-report-critical__item,
    .vendor-report-history__item {
        grid-template-columns: 1fr;
    }

    .vendor-report-scan-bars {
        grid-template-columns: 72px minmax(0, 1fr) auto;
    }
}

.vendor-report-pdf .vendor-report-hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.vendor-report-pdf .vendor-report-hero__main {
    align-items: flex-start;
    flex: 1 1 auto;
}

.vendor-report-pdf .vendor-report-hero__assessment {
    flex: 0 0 220px;
}

.vendor-report-pdf .vendor-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.vendor-report-pdf .vendor-report-kpi {
    padding: var(--space-5);
}

/* Policy guideline document (create drawer + detail page + library row) */
.policy-guideline {
    display: block;
    margin-bottom: var(--space-4);
}

.policy-guideline__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-primary);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.policy-guideline__add:hover {
    background: var(--color-table-header-bg);
    color: var(--color-primary-hover);
}

.policy-guideline__file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.policy-guideline__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-danger-fg);
}

.policy-guideline__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-medium);
}

.policy-guideline__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg-strong);
    text-decoration: none;
}

.policy-guideline__link:hover {
    color: var(--color-primary);
}

.policy-guideline__link .icon {
    flex: 0 0 auto;
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-fg-muted);
}

.policy-guideline__remove {
    flex: 0 0 auto;
}

.policy-library-policy-row__guideline {
    color: var(--color-fg-muted);
}

a.policy-library-policy-row__guideline:hover {
    color: var(--color-primary);
}

.policy-library-policy-row__guideline--add {
    color: var(--color-fg-subtle);
    opacity: 0.6;
    cursor: pointer;
}

.policy-library-policy-row__guideline--add:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* ─── Merchant history drawer (timeline) ───────────────────────────────────
   A vertical activity timeline rendered inside the shared `.drawer` shell.
   All values reference tokens. Client-side show-only/sort/search hooks are
   `[data-mh-*]` (see static/js/app.js). */

.mh-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
}

.mh-toolbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* "Show only" / "Sort" triggers */
.mh-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
}

.mh-control .icon {
    width: 16px;
    height: 16px;
}

.mh-control--muted {
    color: var(--color-fg-muted);
}

.mh-control__value {
    color: var(--color-fg);
    font-weight: var(--fw-medium);
}

/* "Show only" popover */
.mh-showonly {
    position: relative;
}

.mh-popover {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 20;
    min-width: 180px;
    padding: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mh-popover[hidden] {
    display: none;
}

.mh-popover__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--color-fg);
    cursor: pointer;
}

.mh-popover__option:hover {
    background: var(--color-surface);
}

.mh-popover__option .icon {
    width: 14px;
    height: 14px;
    color: var(--color-fg-muted);
}

/* Search */
.mh-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.mh-search .icon {
    width: 16px;
    height: 16px;
    color: var(--color-fg-subtle);
    flex: 0 0 auto;
}

.mh-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
}

.mh-search__input:focus {
    outline: none;
}

/* Timeline */
.mh-timeline {
    display: flex;
    flex-direction: column;
}

.mh-item {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--space-3);
    padding-bottom: var(--space-6);
}

/* A short 24px stub below each node (centred under the 32px node column),
   rather than a continuous connecting rail. */
.mh-item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    height: 24px;
    width: 2px;
    background: var(--color-border);
}

.mh-item.is-hidden {
    display: none;
}

.mh-item__node {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-bg);
    color: var(--color-neutral-fg);
}

.mh-item__node .icon {
    width: 16px;
    height: 16px;
}

.mh-item__node--info     { background: var(--color-info-bg);     color: var(--color-info-fg); }
.mh-item__node--success  { background: var(--color-success-bg);  color: var(--color-success-fg); }
.mh-item__node--warning  { background: var(--color-warning-bg);  color: var(--color-warning-fg); }
.mh-item__node--danger   { background: var(--color-danger-bg);   color: var(--color-danger-fg); }
.mh-item__node--neutral  { background: var(--color-neutral-bg);  color: var(--color-neutral-fg); }
.mh-item__node--primary  { background: var(--color-primary-soft); color: var(--color-primary); }
.mh-item__node--dark     { background: var(--color-fg-strong);   color: var(--color-fg-inverse); }

.mh-item__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-1);
    min-width: 0;
}

.mh-item__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.mh-item__time {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
    white-space: nowrap;
}

.mh-item__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mh-item__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
    text-align: right;
}

.mh-source-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-neutral-bg);
    color: var(--color-neutral-fg);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.mh-source-chip .icon {
    width: 12px;
    height: 12px;
}

/* Bodies */
.mh-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-table-header-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.mh-card--danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-bg);
}

.mh-subtitle {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.mh-text {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-fg-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.mh-actor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    flex-wrap: wrap;
}

.mh-avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-info-bg);
    color: var(--color-info-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    flex: 0 0 auto;
}

/* Field diff (old → new) */
.mh-field__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.mh-diff {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}

.mh-diff__old {
    text-decoration: line-through;
    color: var(--color-fg-subtle);
    overflow-wrap: anywhere;
}

.mh-diff__new {
    color: var(--color-success-fg);
    font-weight: var(--fw-medium);
    overflow-wrap: anywhere;
}

.mh-diff__arrow {
    color: var(--color-fg-subtle);
}

/* Key/value table (placeholder signup form) */
.mh-kv {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
}

.mh-kv__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.mh-kv__value {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    text-align: right;
    overflow-wrap: anywhere;
}

/* A value cell holding several URLs (the policy pages a scan captured) stacks
   them under one label rather than repeating the label per row. */
.mh-kv__value--links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.mh-kv__value--links a {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.mh-kv__value--links a:hover {
    text-decoration: underline;
}

/* Status change pills */
.mh-status-change {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
}

/* Attachments */
.mh-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mh-attachments__label {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
    width: 100%;
}

.mh-attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: var(--fs-xs);
    color: var(--color-primary);
    text-decoration: none;
}

.mh-attachment:hover {
    border-color: var(--color-primary);
}

.mh-attachment .icon {
    width: 14px;
    height: 14px;
}

/* Inline links ("View case →") */
.mh-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.mh-link:hover {
    text-decoration: underline;
}

.mh-link .icon {
    width: 14px;
    height: 14px;
}

/* Empty / no-results states */
.mh-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
}

/* ─── Management → Statuses tab (configurable sub-statuses) ─────────────────── */

.status-config__group-head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

/* Leading chevron that collapses / expands a status group. Expanded by
   default; the base `chevron_down` icon is rotated to point up (^) while
   open and rotates back down (v) when the group is collapsed. */
.status-config__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.status-config__toggle .icon {
    width: var(--space-4);
    height: var(--space-4);
    transform: rotate(180deg);
    transition: transform var(--motion-fast) ease;
}

.status-config__group--collapsed .status-config__toggle .icon {
    transform: rotate(0deg);
}

.status-config__group--collapsed .status-config__group-header {
    margin-bottom: 0;
}

.status-config__group--collapsed .status-config__body {
    display: none;
}

.status-config__group-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.status-config__count {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-fg-muted);
}

.status-config__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.status-config__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.status-config__row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.status-config__row-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.status-config__row-desc {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
    overflow-wrap: anywhere;
}

.status-config__row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
}

.status-config__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7);
    height: var(--space-7);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
}

.status-config__action:hover {
    background: var(--color-table-header-bg);
    color: var(--color-fg-strong);
}

.status-config__action--danger {
    color: var(--color-danger-fg);
}

.status-config__action--danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

.status-config__action .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.status-config__empty {
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
}

/* ─── Management → Violation library (custom violations) ─────────────────────── */

.violation-library__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.violation-library__intro .page-subtitle {
    margin: 0;
}

.violation-library__row-aside {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.violation-library__policy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
    white-space: nowrap;
}

.violation-library__policy .icon {
    width: var(--space-4);
    height: var(--space-4);
}

/* ─── KYC drawer ───────────────────────────────────────────────────────── */

.kyc-drawer {
    width: min(560px, 100vw);
}

.kyc-drawer__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Pill tab toggle (Checklists / Notes). */
.kyc-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.kyc-tabs__tab {
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-fg-muted);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.kyc-tabs__tab--active {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}

[data-kyc-tab-panel][hidden] {
    display: none;
}

/* Checklist */
.kyc-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.kyc-checklist__section-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-none);
    letter-spacing: 0;
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

.kyc-checklist__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kyc-checklist__empty {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.kyc-item:hover {
    background: var(--color-table-header-bg);
}

.kyc-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.kyc-item__check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    cursor: pointer;
}

.kyc-item__check input[type="checkbox"] {
    width: var(--space-4);
    height: var(--space-4);
    accent-color: var(--color-fg-muted);
    flex-shrink: 0;
}

.kyc-item__label {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-none);
    letter-spacing: 0;
    font-weight: var(--fw-regular);
    color: var(--color-fg);
}

/* "+ Add note" only shows on hover of the row (until a note exists). */
.kyc-item__add-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    font: inherit;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    cursor: pointer;
    opacity: 0;
    flex-shrink: 0;
}

.kyc-item:hover .kyc-item__add-note,
.kyc-item__add-note:focus-visible {
    opacity: 1;
}

.kyc-item__add-note .icon {
    width: var(--space-3);
    height: var(--space-3);
}

.kyc-item__note {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-1) 0 var(--space-2) var(--space-6);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.kyc-item__note-text {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    white-space: pre-wrap;
}

.kyc-item__note-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.kyc-item__note-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-notification);
    cursor: pointer;
}

.kyc-item__note-action--danger {
    color: var(--color-danger-fg);
}

.kyc-item__note-action .icon {
    width: var(--space-4);
    height: var(--space-4);
}

.kyc-item__note-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-2) var(--space-6);
}

.kyc-item__note-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    resize: vertical;
}

.kyc-item__note-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.kyc-item__note-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* KYC notes tab */
.kyc-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.kyc-notes__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.kyc-notes__title {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.kyc-note-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.kyc-note-composer__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* KYC admin config (Management → KYC checklists) */
.kyc-config__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.kyc-config__section-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ─── Leads module (/leads) ────────────────────────────────────────────────
   A lead is a quick scan of a raw URL with no merchant behind it. The list and
   detail reuse the scans/violations table + section-card shells; only column
   proportions and a couple of lead-specific blocks live here. */

/* Sidebar: separates the merchant-review modules from the Leads group. */
.nav__separator {
    display: block;
    height: 1px;
    margin: var(--space-1) var(--space-3);
    background: var(--color-border);
}

.leads-table__col-check      { width: 5%; }
.leads-table__col-website    { width: 37%; }
.leads-table__col-date       { width: 15%; }
.leads-table__col-status     { width: 14%; }
.leads-table__col-violations { width: 15%; }
.leads-table__col-actions    { width: 14%; }

/* Long URLs wrap instead of stretching the fixed table. */
.leads-table__website a,
.leads-table__website span {
    overflow-wrap: anywhere;
}

.lead-violations-table__col-violation  { width: 46%; }
.lead-violations-table__col-status     { width: 16%; }
.lead-violations-table__col-confidence { width: 16%; }
.lead-violations-table__col-actions    { width: 22%; }

/* Muted qualifier under a summary stat, e.g. "+3 to review" beneath the
   violation count — the enhanced-review flags are deliberately NOT folded into
   the violation number. */
.summary-stat__note {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

.lead-violation__name {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
    margin: 0;
}

.lead-violation__section-title {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-muted);
    margin: 0;
}

/* A drawer footer with a single action stretches it full width (the two-button
   footer keeps its space-between layout). */
.drawer__footer--single .button {
    flex: 1;
    justify-content: center;
}

/* ─── Captured document cards (shared) ─────────────────────────────────────
   Used by the Merchant Intelligence drawer's "Legal & Policy Documents" list and
   the lead detail page's "Website policies detected" grid, via the
   `components/documents.html::document_card` macro. */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}

.doc-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* `--color-bg`, not `--color-surface`: the latter is the sidebar / auth
       backdrop (#f0f5ff) and tinted every document card pale blue inside an
       already-white `.section-card`. A card sits on the same white ground as
       the `.section-card` that holds it and is separated by its border. */
    background: var(--color-bg);
    min-width: 0;
}

.doc-card--inactive {
    opacity: 0.6;
}

/* The card's icon + title become the preview trigger wherever a `preview_base`
   is passed. A reset button rather than a link: it opens a modal, it does not
   navigate, so it must not be middle-clickable into a dead tab. */
.doc-card__identity--button {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.doc-card__identity--button:hover .doc-card__title,
.doc-card__identity--button:focus-visible .doc-card__title {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Full-viewport variant of `.attachment-preview`, used by the captured-document
   preview. A note attachment is usually one image, which the compact panel
   (560px wide over a fixed 320px stage) suits; a captured policy is a multi-page
   PDF, and at that size the browser's own PDF viewer has room for a page
   thumbnail rather than readable text. Scoped to a modifier so the note, KYC and
   alert previews are unaffected.

   Paired with `.modal-overlay--full`, which drops the overlay's `--space-6`
   padding so the panel really does reach the edges. */
.attachment-preview--full {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    gap: var(--space-3);
}

/* The stage takes every pixel the toolbar and meta line leave. `min-height: 0`
   is what lets it actually shrink inside the flex column — without it the
   iframe's intrinsic height wins and the meta line is pushed off-screen. */
.attachment-preview--full .attachment-preview__stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border-radius: var(--radius-md);
}

/* Preview modal: title on the left of the toolbar, capture meta under the stage.
   Everything else reuses `.attachment-preview*` from the note preview. */
.doc-preview__title {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--doc-preview-title-max-width);
}

.doc-preview__meta {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    overflow-wrap: anywhere;
}

.doc-preview__meta a {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.doc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.doc-card__identity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.doc-card__icon {
    display: inline-flex;
    color: var(--color-danger-fg);
}

.doc-card__title {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-card__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.doc-card__meta {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    margin: 0;
    min-width: 0;
}

/* The source URL is a single truncated line, never a wrapped block.
   `overflow-wrap: anywhere` used to break it mid-word, so a real product URL
   rendered as "…/products/workflowserve" / "r/eula/" across two ragged lines
   and the card grew to fit it. The full URL stays reachable via the link's
   `title` and the link itself. */
.doc-card__meta--source {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 0;
}

.doc-card__meta--source a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.doc-card__meta a {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.doc-card__meta a:hover {
    text-decoration: underline;
}

/* ─── Alerts page ──────────────────────────────────────────────────────────
   A feed of cards rather than a table: each alert carries a variable-height
   note thread, which a fixed-column table cannot hold. */

.alerts-list {
    max-width: var(--container-max);
}

.alert-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.alert-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.alert-card__event {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

.alert-card__merchant {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.alert-card__merchant:hover {
    text-decoration: underline;
}

.alert-card__meta {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

/* The actions (add note + status chip) are pinned top-right of the body, so the
   fields column keeps the full width for a long product name or description. */
.alert-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    /* Reserve the actions' lane so a long value never runs under the chip. */
    padding-right: var(--space-16);
    background: var(--color-table-header-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.alert-card__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.alert-card__field {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    min-width: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
}

.alert-card__field-label {
    flex: none;
    color: var(--color-fg-muted);
}

.alert-card__field-value {
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

.alert-card__field-value--link {
    color: var(--color-primary);
    text-decoration: none;
}

.alert-card__field-value--link:hover {
    text-decoration: underline;
}

/* One line with an ellipsis, matching the mock. The full text stays in the DOM
   as the element's `title`, so nothing is actually lost. */
.alert-card__description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-fg);
}

.alert-card__flag {
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-neutral-bg);
    color: var(--color-fg-muted);
    font-size: var(--fs-xxs);
    line-height: var(--lh-xxs);
}

.alert-card__actions {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.alerts-empty {
    padding: var(--space-8);
    text-align: center;
}

.alerts-empty__title {
    margin: 0 0 var(--space-1);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

.alerts-empty__hint {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-fg-subtle);
}

/* ─── Alert notes ──────────────────────────────────────────────────────── */

.alert-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.alert-note {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.alert-note__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg);
    white-space: pre-wrap;
}

.alert-note__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.alert-note__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.alert-note__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-notification-soft);
    color: var(--color-notification);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-semibold);
}

.alert-note__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

.alert-note__meta strong {
    color: var(--color-fg-muted);
    font-weight: var(--fw-semibold);
}

.alert-note__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.alert-note__textarea,
.alert-composer__textarea {
    width: 100%;
    resize: vertical;
}

.alert-note__edit-actions,
.alert-composer__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.alert-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ─── Period picker ────────────────────────────────────────────────────────
   Presets resolve server-side; only an explicit range submits dates. The panel
   lives inside the auto-submitting filter form, so its JS stops propagation —
   see `bindPeriodPicker` in app.js. */

.period-picker {
    position: relative;
}

.period-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    background: var(--color-bg);
    cursor: pointer;
}

.period-picker__panel {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-1));
    right: 0;
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3);
    /* Sized by its content (preset column + two 7-day grids) and right-aligned
       to the trigger. A fixed cap would clip the second month rather than shrink
       it — the grids do not compress below 7 cells. */
    width: max-content;
    max-width: calc(100vw - var(--space-8));
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.period-picker__panel[hidden] {
    display: none;
}

.period-picker__presets {
    flex: none;
    width: var(--period-preset-width);
    margin: 0;
    padding: 0;
    list-style: none;
    border-right: 1px solid var(--color-border);
}

.period-picker__preset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--color-fg);
    text-align: left;
    cursor: pointer;
}

.period-picker__preset:hover {
    background: var(--color-surface);
}

.period-picker__preset--active {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

/* Present on every row, revealed only on the active one — the panel is never
   re-rendered, so the tick has to follow a class the JS can toggle. */
.period-picker__preset-check {
    display: inline-flex;
    color: var(--color-primary);
    visibility: hidden;
}

.period-picker__preset--active .period-picker__preset-check {
    visibility: visible;
}

.period-picker__calendars {
    display: flex;
    gap: var(--space-4);
}

.period-picker__month {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.period-picker__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

.period-picker__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--calendar-cell-size);
    height: var(--calendar-cell-size);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
    cursor: pointer;
}

.period-picker__nav-button:hover {
    background: var(--color-surface);
    color: var(--color-fg-strong);
}

.period-picker__nav-button--hidden {
    visibility: hidden;
}

.period-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, var(--calendar-cell-size));
    gap: 2px;
}

.period-picker__weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--calendar-cell-size);
    font-size: var(--fs-xs);
    color: var(--color-fg-subtle);
}

.period-picker__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--calendar-cell-size);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--color-fg);
    cursor: pointer;
}

.period-picker__day:hover {
    background: var(--color-surface);
}

.period-picker__day--muted {
    color: var(--color-fg-subtle);
    opacity: 0.5;
}

.period-picker__day--today {
    font-weight: var(--fw-semibold);
}

.period-picker__day--in-range,
.period-picker__day--in-range:hover {
    background: var(--color-primary-soft);
    border-radius: 0;
}

/* The `:hover` variants are load-bearing, not decoration: `:hover` is a more
   specific selector than a plain class, so without them the day under the
   cursor — which is exactly the day just picked — kept the hover background and
   rendered white-on-near-white. */
.period-picker__day--start,
.period-picker__day--end,
.period-picker__day--start:hover,
.period-picker__day--end:hover {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}

@media (max-width: 1024px) {
    /* The two calendars stack before the panel would overflow a narrow
       viewport; the preset column keeps its own row above them. */
    .period-picker__panel {
        flex-direction: column;
    }

    .period-picker__presets {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .period-picker__calendars {
        flex-direction: column;
    }
}

/* ─── Password reveal ──────────────────────────────────────────────────────
   A toggle inside the input's own box, so the field keeps the standard `.input`
   metrics and the control cannot drift out of alignment with it. */

.input-reveal {
    position: relative;
    display: block;
}

.input-reveal .input {
    width: 100%;
    /* Room for the toggle, so a long value never runs under it. */
    padding-right: var(--space-10);
}

.input-reveal__toggle {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-fg-subtle);
    cursor: pointer;
}

.input-reveal__toggle:hover {
    color: var(--color-fg-strong);
}

/* ─── Account-state notice (user drawer) ───────────────────────────────────
   The sentence explaining an account's state and the action that clears it,
   kept together at the foot of the drawer body. `margin-top: auto` pins it
   below the fields however few there are. */

.account-notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: auto;
    padding: var(--space-4);
    background: var(--color-table-header-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.account-notice--danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-bg);
}

.account-notice__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-strong);
}

/* Footer for the user drawer: destructive and state actions keep their natural
   width on the left, the primary action takes whatever is left. Without the
   grow the four controls wrapped onto two rows in a 480px drawer. */
.drawer__footer--user {
    justify-content: flex-start;
}

.drawer__footer-grow {
    flex: 1;
}

/* Danger glyph on the secondary shell. Declared here, after `.button--secondary`,
   because that rule sets its own `color` — earlier in the file it would lose the
   cascade and the trash would render in the ordinary foreground colour. */
.button--icon-danger {
    color: var(--color-danger-accent);
}

.button--icon-danger:hover:not(:disabled) {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-accent);
    color: var(--color-danger-accent);
}

/* ─── Bulk selection bar (Cases list) ──────────────────────────────────────
   A band above the table carrying the select-all control and the actions a
   multi-row selection unlocks. Distinct from `.selection-banner` (the tinted
   "N selected" banner on Vendors/Scans/Violations, which hosts a dropdown
   menu): this one keeps its actions on the surface, as inline buttons that open
   a picker popover. */

.bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-table-header-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.bulk-bar__select {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
    cursor: pointer;
}

.bulk-bar__select input[type="checkbox"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    accent-color: var(--checkbox-accent-color);
}

.bulk-bar__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.bulk-bar__actions[hidden] {
    display: none;
}

.bulk-bar__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    cursor: pointer;
}

.bulk-bar__action:hover {
    text-decoration: underline;
}

.bulk-bar__action .icon {
    width: var(--fs-base);
    height: var(--fs-base);
}

.bulk-bar__dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: currentColor;
}

/* The popover hangs off the actions group, right-aligned so it stays inside the
   table card however wide the picker's rows are. */
.bulk-bar__popover {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-2));
    right: 0;
}

.bulk-bar__popover:empty {
    display: none;
}

.bulk-bar__popover .case-assignee-picker {
    width: var(--drawer-width);
    max-width: calc(100vw - var(--space-8));
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Priority rows have no avatar, so the button's leading dot stands in for one
   and needs the same fixed lane to keep the labels aligned. */
.case-priority-picker .priority-dot {
    min-width: var(--space-8);
}

.table__cell--select {
    width: 1%;
    white-space: nowrap;
}

.table__cell--select input[type="checkbox"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    accent-color: var(--checkbox-accent-color);
}

/* ─── Organizations: sidebar org box, admin panel table/detail, branding
   forms ────────────────────────────────────────────────────────────────── */
/* templates/base.html (static org box), templates/pages/organizations.html,
   templates/pages/organization_detail.html,
   templates/partials/organizations/*, templates/partials/organization_detail/*,
   templates/partials/management/_organization.html. See README
   "Organizations page". */

.org-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-fg-inverse);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

.org-icon-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The color modifier below is applied unconditionally by every template
   (only the img-vs-initials content is conditional), so a logo with alpha
   transparency would otherwise show the tinted background through it. Kill
   the background whenever an <img> is actually present — logo takes
   priority over the color chip. */
.org-icon-chip:has(img) {
    background: none;
}

.org-icon-chip--blue   { background: var(--color-org-blue); }
.org-icon-chip--purple { background: var(--color-org-purple); }
.org-icon-chip--teal   { background: var(--color-org-teal); }
.org-icon-chip--green  { background: var(--color-org-green); }
.org-icon-chip--orange { background: var(--color-org-orange); }
.org-icon-chip--red    { background: var(--color-org-red); }
.org-icon-chip--pink   { background: var(--color-org-pink); }
.org-icon-chip--indigo { background: var(--color-org-indigo); }

/* ─── Sidebar org box (static — one org per user, migration 0071) ───────── */

.org-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 var(--space-2) var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-org-box-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
}

a.org-box:hover {
    border-color: var(--color-primary);
}

.org-box__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
}

.org-box__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-sm);
    line-height: 17.5px;
    font-weight: var(--fw-semibold);
    color: var(--color-org-name-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Organizations page: admin-panel table ─────────────────────────────── */

.organizations-table__col-org     { width: 34%; }
.organizations-table__col-date    { width: 14%; }
.organizations-table__col-count   { width: 10%; }
.organizations-table__col-actions { width: 8%; }

.organizations-table__org-cell {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-fg);
}

.organizations-table__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
}

.organizations-table__org-name {
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.organizations-table .icon-button {
    width: 40px;
    height: 32px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.organizations-table .icon-button:hover:not(:disabled) {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
}

/* The default 20px `.icon` doesn't fit this button's content box (40px wide
   minus its own 12px/1px padding+border leaves ~14px) without overflowing. */
.organizations-table .icon-button .icon {
    width: 16px;
    height: 16px;
}

/* An inline-flex `<span>` inside a plain `<td>` — not `display: flex` on the
   `<td>` itself. A table cell blockified into a flex container stops
   respecting `vertical-align` the way its plain sibling cells do, which is
   what threw this column out of line with Users/Merchants/Actions in the
   same row. */
.organizations-table__date-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg-muted);
}

.organizations-table__date-cell .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ─── Platform-admin banner ──────────────────────────────────────────────
   A full-width strip directly under the app header — `{% block top_banner %}`
   sits between `</header>` and `.app__content` in `base.html`, as a sibling
   of both, so it spans `.app__main`'s full width rather than being capped/
   centered like `.app__content`. Only `/organizations` overrides the block;
   `organization_detail.html` does not, so it never appears on a single org's
   detail page. */

.platform-admin-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    background: var(--color-admin-banner-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-admin-banner-fg);
    font-size: var(--fs-sm);
    line-height: 16px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.platform-admin-banner .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ─── Organization detail page ──────────────────────────────────────────── */

.organization-detail__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Scoped overrides — this header's title/subtitle sizes are smaller than the
   shared `.page-title`/`.page-subtitle` used elsewhere (e.g. `.case-detail-header
   .page-title` above follows the same scoped-override pattern), so this page
   doesn't quietly resize every other page's header. */
.organization-detail__header .page-title {
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
}

.organization-detail__header .page-subtitle {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--fw-regular);
    color: var(--color-org-detail-subtitle);
}

/* The status badge sits in the *same row* as the subtitle ("Created … by …
   · slug"), not centered against the whole icon+title+subtitle block —
   centering against the block put it level with the title instead. */
.organization-detail__subtitle-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.organization-detail__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xl);
}

.organization-detail-settings {
    max-width: 640px;
}

/* Plain — no card, no tinted box. `button--danger`'s solid red fill already
   carries the "this is destructive" weight; wrapping it in a red-bordered
   panel on top of that read as a second, louder warning stacked on the
   first. `align-items: flex-start` is load-bearing: a bare `.stack` defaults
   to `align-items: stretch`, which would stretch the button to the card's
   full width instead of sizing it to its own label. */
.org-danger-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.org-danger-zone__copy {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

/* The label must never wrap — inside a narrower flex ancestor a shrinking
   button used to break "Delete organization" across two lines. */
.org-danger-zone__button {
    white-space: nowrap;
}

/* ─── Domain-locked email input (local-part + fixed suffix) ─────────────── */
/* templates/partials/management/_drawer_user.html, shared by Management's
   own user drawer and the Admin panel's (same template, parameterized). */

.email-domain-lock {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.email-domain-lock__local {
    flex: 1 1 auto;
    min-width: 0;
}

.email-domain-lock__suffix {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    white-space: nowrap;
}

/* ─── Logo upload widget (branding forms) ───────────────────────────────── */

.org-logo-upload {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.org-logo-upload__preview {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xl);
    flex-shrink: 0;
}

.org-logo-upload__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.org-logo-upload__actions .field__hint {
    flex-basis: 100%;
    margin: 0;
}

.org-logo-upload__remove {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-danger-accent);
    cursor: pointer;
}

/* Hidden (not just visually) while there is nothing to remove — an org with
   no logo (initials fallback) renders only the "Upload logo" trigger; the
   pair only appears once a logo actually exists, or a new one is picked in
   this same form session (`app.js`'s `data-org-logo-input` change handler
   reveals it and relabels the trigger to "Change logo"). */
.org-logo-upload__remove--hidden {
    display: none;
}

.org-logo-upload__remove .icon {
    width: 14px;
    height: 14px;
}

/* ─── Icon-color swatch picker ──────────────────────────────────────────── */

.org-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.org-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.org-color-swatch--blue   { background: var(--color-org-blue); }
.org-color-swatch--purple { background: var(--color-org-purple); }
.org-color-swatch--teal   { background: var(--color-org-teal); }
.org-color-swatch--green  { background: var(--color-org-green); }
.org-color-swatch--orange { background: var(--color-org-orange); }
.org-color-swatch--red    { background: var(--color-org-red); }
.org-color-swatch--pink   { background: var(--color-org-pink); }
.org-color-swatch--indigo { background: var(--color-org-indigo); }

.org-color-swatch[aria-pressed="true"] {
    border-color: var(--color-fg);
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-fg);
}

/* ─── Create-organization modal + Organization/Settings tab branding forms ── */

.org-create-card {
    padding: var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.org-create-card__title {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.org-create-card__subtitle {
    margin: var(--space-1) 0 var(--space-6);
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
}

.org-create-card__footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Scoped smaller hint text for this card only — the shared `.field__hint` is
   --fs-sm/--lh-sm everywhere else, but the branding form's helper copy
   ("PNG, JPG, or SVG · max 2 MB", the allowed-domain note) reads as a lighter
   caption in the design at the same size as the header subtitle above. */
.org-create-card .field__hint {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.org-create-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-info-bg);
    border-radius: var(--radius-md);
    color: var(--color-info-fg);
}

.org-create-info .icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.org-create-info p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.org-create-success {
    max-width: 420px;
    margin: var(--space-8) auto;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.org-create-success__icon {
    color: var(--color-success-fg);
}

.org-create-success__icon .icon {
    width: 40px;
    height: 40px;
}

.org-create-success__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.org-create-success__body {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-fg-muted);
}

/* ─── Global header actions ("Quick add", user avatar) ────────────────────
   templates/partials/_header_actions.html, included from every page via
   `base.html`'s `<header class="app__header">` — not Dashboard-scoped, even
   though it was introduced alongside the Dashboard page below. */

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

/* Generic dropdown-menu mechanics ("Quick add", user avatar). Positioning
   mirrors `.status-menu__panel`; visibility is keyed purely on `.is-open`
   (app.js sets `hidden` on the panel too, redundant with this but matching
   the same belt-and-suspenders pattern `.scan-bulk-menu` uses). */
.menu {
    position: relative;
}

.menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    display: none;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
}

.menu.is-open .menu__panel {
    display: flex;
}

.quick-add-menu__panel {
    width: 288px;
    padding: var(--space-2);
    gap: var(--space-1);
}

.quick-add-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    text-decoration: none;
    /* No `href` (HTMX-driven, `hx-get` intercepts the click) — without this
       an anchor with no `href` doesn't get the browser's default pointer
       cursor. */
    cursor: pointer;
}

.quick-add-menu__item:hover {
    background: var(--color-table-header-bg);
}

.quick-add-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.quick-add-menu__icon .icon {
    width: 16px;
    height: 16px;
}

.quick-add-menu__icon--info    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.quick-add-menu__icon--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.quick-add-menu__icon--accent  { background: var(--color-accent-bg);  color: var(--color-accent-fg); }
.quick-add-menu__icon--danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.quick-add-menu__icon--pink    { background: var(--color-pink-bg);    color: var(--color-pink-fg); }

.quick-add-menu__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-sm);
    line-height: var(--lh-xs);
}

.quick-add-menu__item-text strong {
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.quick-add-menu__item-text span {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
}

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
}

.user-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

.user-menu__avatar--lg {
    width: 40px;
    height: 40px;
    font-size: var(--fs-sm);
}

.user-menu__panel {
    width: 240px;
    padding: var(--space-4);
    gap: var(--space-3);
}

.user-menu__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.user-menu__identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-menu__identity-text strong {
    font-size: var(--fs-sm);
    color: var(--color-fg);
}

.user-menu__identity-text span {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
}

.user-menu__email {
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    overflow-wrap: anywhere;
}

.user-menu__logout-form {
    margin: 0;
}

.user-menu__logout-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-1) 0;
    border: 0;
    background: transparent;
    color: var(--color-danger-accent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.user-menu__logout-button .icon {
    width: 16px;
    height: 16px;
}

/* ─── Dashboard (`/`) ──────────────────────────────────────────────────────
   templates/pages/home.html, templates/partials/dashboard/*,
   templates/components/{stat_card,priority_bar,empty_state,trend_chart}.html.
   See README "Dashboard page". */

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stat card icon chip (Dashboard KPI strip). Optional — `stat_card()` renders
   exactly as before when `icon_name` is omitted (the Merchants page KPIs). */
.stat-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.stat-card__icon .icon {
    width: 16px;
    height: 16px;
}

.stat-card__icon--info    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.stat-card__icon--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.stat-card__icon--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.stat-card__icon--danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.stat-card__icon--accent  { background: var(--color-accent-bg);  color: var(--color-accent-fg); }
.stat-card__icon--neutral { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }

.stat-card__value--empty {
    color: var(--color-fg-subtle);
}

.stat-card__empty-label {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    color: var(--color-fg-subtle);
}

/* Two-column widget rows (New products + Failed scans; Recent activity +
   Monthly trend). Stacks on narrow viewports, matching `.grid--cards-4`. */
.dashboard-grid--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 960px) {
    .dashboard-grid--2col {
        grid-template-columns: 1fr;
    }
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dashboard-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.dashboard-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.dashboard-card__title .icon {
    width: 18px;
    height: 18px;
    color: var(--color-fg-muted);
}

/* Wraps the title's icon+text when the whole heading is a link (Failed
   Scans → `/scans?status=failed`) — resets link defaults and keeps the same
   flex layout `.dashboard-card__title` has when it isn't a link. */
.dashboard-card__title-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

.dashboard-card__title-link:hover {
    color: var(--color-primary);
}

.dashboard-card__link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-card__link:hover {
    text-decoration: underline;
}

/* Solid-fill count badge (Failed Scans header) — distinct from `.badge`,
   which is always a soft bg/fg pair; this one wants a small, high-contrast
   circle like the sidebar's new-violations dot, just with a number in it. */
.dashboard-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-danger-solid);
    color: var(--color-fg-inverse);
    font-size: var(--fs-xxs);
    font-weight: var(--fw-semibold);
}

/* "New violations awaiting review" rows. */
.dashboard-violations {
    display: flex;
    flex-direction: column;
}

.dashboard-violation-row {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 0.6fr 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.dashboard-violation-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.dashboard-violation-row__merchant {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dashboard-violation-row__url {
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.dashboard-violation-row__url:hover {
    text-decoration: underline;
}

.dashboard-violation-row__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--color-fg);
}

.dashboard-violation-row__label span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-violation-row__label .text-muted {
    font-size: var(--fs-xs);
}

.dashboard-violation-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* "New products" rows. */
.dashboard-products {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dashboard-product-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dashboard-product-row__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-fg);
}

.dashboard-product-row__header a {
    color: var(--color-primary);
    text-decoration: none;
}

.dashboard-product-row__header a:hover {
    text-decoration: underline;
}

.dashboard-product-row__meta {
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.dashboard-product-row__box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-table-header-bg);
}

.dashboard-product-row__fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--color-fg);
}

.dashboard-product-row__fields p {
    margin: 0;
}

.dashboard-product-row__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-product-row__status {
    flex-shrink: 0;
}

/* "Failed Scans" rows. */
.dashboard-failed-scans {
    display: flex;
    flex-direction: column;
}

.dashboard-failed-scan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.dashboard-failed-scan-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.dashboard-failed-scan-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: var(--fs-sm);
}

.dashboard-failed-scan-row__id {
    font-weight: var(--fw-medium);
    color: var(--color-fg);
    text-decoration: none;
}

.dashboard-failed-scan-row__id:hover {
    text-decoration: underline;
}

/* Compact the reused `.scan-error-reason` (built for a full-width card on
   the scan detail page) to fit a narrow row: no padding/background, smaller
   icon and text. Scoped to the stable `__info` ancestor rather than added
   directly to `.scan-error-reason`, because HTMX's `outerHTML` swap replaces
   the loading placeholder with the bare `_error_reason_body.html` markup —
   any class put on that element itself would be lost after the swap. */
.dashboard-failed-scan-row__info .scan-error-reason {
    padding: 0;
    background: transparent;
    gap: var(--space-2);
}

.dashboard-failed-scan-row__info .scan-error-reason__icon .icon {
    width: 14px;
    height: 14px;
}

.dashboard-failed-scan-row__info .scan-error-reason__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
}

.dashboard-failed-scan-row__info .scan-error-reason__spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.dashboard-failed-scan-row__retry {
    margin: 0;
    flex-shrink: 0;
}

/* Open Cases Queue table — reuses `.table`/`.table--fixed`; only the
   priority-bar cell needs a rule of its own. */
.dashboard-cases-table td {
    vertical-align: middle;
}

/* Priority bar — 5 segments, filled up to the case's priority (1-5). */
.priority-bar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.priority-bar__segment {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.priority-bar__segment--filled {
    background: var(--color-danger-accent);
}

/* Recent activity rows. */
.dashboard-activity {
    display: flex;
    flex-direction: column;
}

.dashboard-activity-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.dashboard-activity-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.dashboard-activity-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.dashboard-activity-row__icon .icon {
    width: 16px;
    height: 16px;
}

.dashboard-activity-row__icon--info     { background: var(--color-info-bg);     color: var(--color-info-fg); }
.dashboard-activity-row__icon--success  { background: var(--color-success-bg);  color: var(--color-success-fg); }
.dashboard-activity-row__icon--warning  { background: var(--color-warning-bg);  color: var(--color-warning-fg); }
.dashboard-activity-row__icon--danger   { background: var(--color-danger-bg);   color: var(--color-danger-fg); }
.dashboard-activity-row__icon--neutral  { background: var(--color-neutral-bg);  color: var(--color-neutral-fg); }
.dashboard-activity-row__icon--primary  { background: var(--color-primary-soft); color: var(--color-primary); }
.dashboard-activity-row__icon--dark     { background: var(--color-fg-strong);   color: var(--color-bg); }

.dashboard-activity-row__body {
    flex: 1;
    min-width: 0;
}

.dashboard-activity-row__title {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg);
}

.dashboard-activity-row__vendor {
    margin: 2px 0 0;
    font-size: var(--fs-xs);
}

.dashboard-activity-row__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    flex-shrink: 0;
}

.dashboard-activity-row__time {
    font-size: var(--fs-xs);
    color: var(--color-fg-subtle);
    white-space: nowrap;
}

/* Monthly trend chart — plain inline SVG, no charting library (see
   templates/components/trend_chart.html). */
.dashboard-trend {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.trend-chart {
    width: 100%;
    height: auto;
}

.trend-chart__gridline {
    stroke: var(--color-border);
    stroke-width: 1;
}

.trend-chart__axis-label {
    fill: var(--color-fg-subtle);
    font-family: var(--font-sans);
    font-size: 9px;
}

.trend-chart__month-label {
    fill: var(--color-fg-subtle);
    font-family: var(--font-sans);
    font-size: 9px;
}

.trend-chart__line {
    fill: none;
    stroke-width: 2;
}

.trend-chart__line--violations { stroke: var(--color-danger-accent); }
.trend-chart__line--cases      { stroke: var(--color-primary); }

.trend-chart__dot--violations { fill: var(--color-danger-accent); }
.trend-chart__dot--cases      { fill: var(--color-primary); }

.trend-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.trend-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
}

.trend-chart-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
}

.trend-chart-legend__dot--violations { background: var(--color-danger-accent); }
.trend-chart-legend__dot--cases      { background: var(--color-primary); }

.trend-chart-legend--muted .trend-chart-legend__dot {
    background: var(--color-border-strong);
}

/* ─── Empty state (icon + heading + subtext + optional action) ────────────
   New shared component — see templates/components/empty_state.html for why
   this didn't already exist. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-fg-subtle);
}

.empty-state__icon .icon {
    width: 20px;
    height: 20px;
}

.empty-state__heading {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}

.empty-state__subtext {
    margin: 0;
    max-width: 320px;
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
}

.empty-state__action {
    margin-top: var(--space-2);
}