/* Rocket Leads stylesheet, in two layers.

   This first layer is geometry and structure only: sizes, spacing, layout, the
   button and table shapes. It names colours exclusively through --rl-* tokens,
   never as literals, so it is theme-agnostic.

   The second layer, from the marker comment further down, is the theme: it is
   the only place a colour literal is declared. Keeping the split means a
   restyle touches one block, and a stray colour in this one is a bug. */

    :root {
      --pico-font-family: "Manrope", "Segoe UI", "Helvetica Neue", sans-serif;
      --pico-form-element-border-color: var(--rl-border-strong);
      --pico-muted-border-color: var(--rl-border);
      --pico-primary: var(--rl-btn-success);
      --pico-primary-hover: var(--rl-btn-success-hover);
      --pico-border-radius: 0.75rem;
      --pico-typography-spacing-vertical: 1rem;
      --pico-spacing: 0.95rem;
      --pico-background-color: transparent;
      --pico-color: var(--rl-text);
      --pico-card-background-color: var(--rl-surface);
      --pico-card-border-color: var(--rl-border);
      --pico-secondary: var(--rl-btn-secondary);
      --pico-secondary-hover: var(--rl-btn-secondary-hover);
      --pico-table-border-color: var(--rl-table-border);
      --pico-table-row-striped-background-color: var(--rl-table-bg-alt);
      --pico-table-row-stripped-background-color: var(--rl-table-bg-alt);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--rl-text);
    }

    main.container {
      position: relative;
      z-index: 1;
      width: min(95vw, 1760px);
      padding: 0.85rem 0 3rem;
      overflow-x: clip;
    }

    a {
      color: var(--rl-brand);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 0.14em;
    }

    a:hover {
      color: var(--rl-brand-strong);
    }

    h1, h2, h3, h4 {
      margin-top: 0;
      color: var(--rl-text);
      font-family: "Space Grotesk", "Manrope", sans-serif;
      letter-spacing: -0.015em;
    }

    h2 {
      font-size: clamp(1.35rem, 1.8vw, 2rem);
      margin-bottom: 0.4rem;
    }

    h3 {
      font-size: clamp(1.08rem, 1.35vw, 1.4rem);
      margin-bottom: 0.5rem;
      margin-top: 1.25rem;
    }

    p,
    small,
    li,
    td,
    th,
    label,
    input,
    select,
    textarea,
    button {
      font-size: clamp(0.88rem, 0.52vw + 0.72rem, 0.99rem);
    }

    button,
    [role="button"],
    a.btn-sm {
      font-weight: 700;
    }

    [role="button"],
    a.btn-sm {
      text-decoration: none;
    }

    a.btn-sm {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    button:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger),
    [role="button"]:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger),
    a.btn-sm:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger) {
      background: var(--rl-btn-success);
      border-color: var(--rl-btn-success);
      color: var(--rl-btn-success-text);
    }

    button:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger):hover,
    button:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger):focus,
    [role="button"]:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger):hover,
    [role="button"]:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger):focus,
    a.btn-sm:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger):hover,
    a.btn-sm:not(.secondary):not(.outline):not(.contrast):not(.danger):not(.success):not(.action-primary):not(.action-secondary):not(.action-outline):not(.action-danger):focus {
      background: var(--rl-btn-success-hover);
      border-color: var(--rl-btn-success-hover);
      color: var(--rl-btn-success-text);
    }

    button.success,
    [role="button"].success,
    a.btn-sm.success {
      background: var(--rl-btn-success);
      border-color: var(--rl-btn-success);
      color: var(--rl-btn-success-text);
    }

    button.success:hover,
    button.success:focus,
    [role="button"].success:hover,
    [role="button"].success:focus,
    a.btn-sm.success:hover,
    a.btn-sm.success:focus {
      background: var(--rl-btn-success-hover);
      border-color: var(--rl-btn-success-hover);
      color: var(--rl-btn-success-text);
    }

    button.secondary,
    [role="button"].secondary,
    a.btn-sm.secondary {
      background: var(--rl-btn-secondary);
      border-color: var(--rl-btn-secondary);
      color: var(--rl-btn-secondary-text);
    }

    button.secondary:hover,
    button.secondary:focus,
    [role="button"].secondary:hover,
    [role="button"].secondary:focus,
    a.btn-sm.secondary:hover,
    a.btn-sm.secondary:focus {
      background: var(--rl-btn-secondary-hover);
      border-color: var(--rl-btn-secondary-hover);
      color: var(--rl-btn-secondary-text);
    }

    button.danger,
    [role="button"].danger,
    a.btn-sm.danger {
      background: var(--rl-btn-danger);
      border-color: var(--rl-btn-danger);
      color: var(--rl-btn-danger-text);
    }

    button.danger:hover,
    button.danger:focus,
    [role="button"].danger:hover,
    [role="button"].danger:focus,
    a.btn-sm.danger:hover,
    a.btn-sm.danger:focus {
      background: var(--rl-btn-danger-hover);
      border-color: var(--rl-btn-danger-hover);
      color: var(--rl-btn-danger-text);
    }

    button.outline,
    [role="button"].outline,
    a.btn-sm.outline {
      color: var(--rl-brand-strong);
      border-color: var(--rl-border-strong);
      background: transparent;
    }

    button.outline:hover,
    button.outline:focus,
    [role="button"].outline:hover,
    [role="button"].outline:focus,
    a.btn-sm.outline:hover,
    a.btn-sm.outline:focus {
      color: var(--rl-brand-strong);
      border-color: var(--rl-brand);
      background: var(--rl-surface-emphasis);
    }

    .brand-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      border-width: 1px;
      border-style: solid;
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      letter-spacing: 0.01em;
      text-decoration: none;
      white-space: nowrap;
    }

    .brand-chip::before {
      content: "RL";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.7rem;
      height: 1.7rem;
      border-radius: 50%;
      font-size: 0.72rem;
      letter-spacing: 0.045em;
    }

    .breadcrumb {
      margin: 0 0 0.9rem;
      padding: 0.52rem 0.7rem;
      border-radius: 0.65rem;
      border-width: 1px;
      border-style: solid;
      font-size: 0.79rem;
      line-height: 1.35;
    }

    .flash {
      padding: 0.8rem 0.95rem;
      margin-bottom: 0.8rem;
      border-radius: 0.65rem;
      border-width: 1px;
      border-style: solid;
      font-weight: 600;
    }

    .page-shell {
      display: block;
    }

    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.7rem;
      margin-bottom: 1rem;
    }

    .page-title {
      margin: 0;
    }

    .muted {
      color: var(--rl-text-soft);
    }

    .toolbar {
      display: flex;
      gap: 0.55rem;
      align-items: center;
      flex-wrap: wrap;
      margin: 0.15rem 0 1rem;
    }

    .toolbar-spacer {
      flex: 1 1 auto;
      min-width: 0;
    }

    .stack-sm > * + * { margin-top: 0.7rem; }
    .stack-md > * + * { margin-top: 1rem; }

    .panel {
      padding: 0.9rem 1rem;
      border-radius: 0.78rem;
      border: 1px solid var(--rl-border);
      background: var(--rl-surface);
      margin-bottom: 1rem;
    }

    .panel-success {
      border-left: 4px solid var(--rl-success);
    }

    .panel-info {
      border-left: 4px solid var(--rl-info);
    }

    .panel-warning {
      border-left: 4px solid var(--rl-warning);
    }

    .panel-error {
      border-left: 4px solid var(--rl-danger);
    }

    .grid,
    .grid-2,
    .grid-3,
    .grid-auto {
      display: grid;
      gap: 0.9rem;
    }

    .grid-auto {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    }

    .grid-auto > * {
      min-width: 0;
    }

    form {
      margin-bottom: 1rem;
    }

    .form-grid-2,
    .form-grid-3 {
      display: grid;
      gap: 0.85rem;
    }

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

    .filter-bar {
      display: flex;
      gap: 0.58rem;
      align-items: end;
      flex-wrap: wrap;
      margin-bottom: 1rem;
      padding: 0.85rem;
      border-width: 1px;
      border-style: solid;
      border-radius: 0.75rem;
    }

    .filter-bar input,
    .filter-bar select,
    .filter-bar label {
      margin-bottom: 0;
    }

    .filter-bar label {
      font-size: 0.84rem;
      color: var(--rl-text-soft);
    }

    .checkbox-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem 1rem;
      align-items: center;
    }

    .checkbox-row label,
    .option-inline {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      width: auto;
      margin: 0;
      font-size: 0.85rem;
      color: var(--rl-text);
      white-space: nowrap;
    }

    .table-wrap {
      margin-bottom: 1rem;
      overflow-x: auto;
      border: 1px solid var(--rl-table-border);
      border-radius: 0.86rem;
      background: var(--rl-table-bg);
    }

    .table-wrap table {
      width: 100%;
      margin: 0;
      border-collapse: collapse;
      min-width: 100%;
      background: var(--rl-table-bg);
    }

    .table-wrap.is-wide table {
      min-width: 40rem;
    }

    main.container table:not(.lead-table) {
      color: var(--rl-table-text);
      border-color: var(--rl-table-border);
    }

    main.container table:not(.lead-table) th,
    main.container table:not(.lead-table) td {
      color: var(--rl-table-text);
      border-color: var(--rl-table-border);
    }

    .table-wrap table th,
    .table-wrap table td {
      padding: 0.65rem 0.72rem;
      border-bottom: 1px solid var(--rl-table-border);
      vertical-align: top;
      color: var(--rl-table-text);
      background: var(--rl-table-bg);
    }

    .table-wrap table th {
      background: var(--rl-table-head);
      font-family: "Space Grotesk", sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.055em;
      text-transform: uppercase;
      font-weight: 700;
      white-space: nowrap;
    }

    .table-wrap table tbody tr:nth-child(even) td {
      background: var(--rl-table-bg-alt);
    }

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

    .table-wrap table small {
      color: var(--rl-table-muted);
    }

    /* Row actions stay on one line. With `wrap` the cell's min-content width is
       just the widest single button, so table layout is free to squeeze the
       Actions column until the buttons stack; `nowrap` makes min-content the sum
       of them, and .table-wrap already scrolls horizontally if the row runs out
       of room. */
    .actions {
      white-space: nowrap;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 0.35rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0.2rem 0.45rem;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 1px solid transparent;
    }

    .btn-sm {
      font-size: 0.76rem;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      font-weight: 700;
      padding: 0.4rem 0.68rem;
      border-radius: 0.55rem;
      margin-bottom: 0;
    }

    .text-prewrap {
      white-space: pre-wrap;
    }

    .numeric {
      font-variant-numeric: tabular-nums;
    }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.42rem;
      margin: 1rem 0;
    }

    .pagination-info {
      font-size: 0.84rem;
      color: var(--rl-text);
      margin: 0 0.3rem;
      padding: 0.2rem 0.32rem;
    }

    details {
      border-width: 1px;
      border-style: solid;
      border-radius: 0.72rem;
      padding: 0.65rem 0.78rem;
      margin-bottom: 0.78rem;
    }

    details > summary {
      cursor: pointer;
      font-weight: 700;
      color: var(--rl-text);
    }

    details > summary + * {
      margin-top: 0.7rem;
    }

    @media (min-width: 720px) {
      .grid-2,
      .form-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .grid-3,
      .form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 960px) {
      main.container {
        width: min(97vw, 1760px);
      }

      .table-wrap table {
        min-width: 100%;
      }

      .table-wrap.is-wide table {
        min-width: 34rem;
      }
    }

    @media (max-width: 720px) {
      .filter-bar {
        padding: 0.72rem;
      }

      .toolbar a[role="button"],
      .toolbar button,
      .filter-bar a[role="button"],
      .filter-bar button {
        flex: 1 1 auto;
      }

      .table-wrap table {
        min-width: 100%;
      }

      .table-wrap.is-wide table {
        min-width: 30rem;
      }

      .page-header {
        margin-bottom: 0.8rem;
      }
    }

    @media (min-width: 1460px) {
      .table-wrap table {
        min-width: 100%;
      }

      .table-wrap.is-wide table {
        min-width: 48rem;
      }
    }

/* Rocket Leads app shell and shared design system */
:root {
  color-scheme: light;
  --rl-bg-base: #f4f7fb;
  --rl-bg-soft: #e9eef5;
  --rl-surface: #ffffff;
  --rl-surface-soft: #f8fafc;
  --rl-surface-emphasis: #edf3f8;
  --rl-border: #d8e0ea;
  --rl-border-strong: #bac7d5;
  --rl-text: #111827;
  --rl-text-soft: #3d4854;
  --rl-text-placeholder: #55606f;
  --rl-brand: #1f6f78;
  --rl-brand-strong: #144e57;
  --rl-success: #287a53;
  --rl-info: #2366a8;
  --rl-warning: #8a5512;
  --rl-danger: #b13d3d;
  --rl-btn-success: #1f6f78;
  --rl-btn-success-hover: #185c64;
  --rl-btn-success-text: #ffffff;
  --rl-btn-secondary: #e7eef5;
  --rl-btn-secondary-hover: #d7e2ec;
  --rl-btn-secondary-text: #1f3344;
  --rl-btn-danger: #b13d3d;
  --rl-btn-danger-hover: #923232;
  --rl-btn-danger-text: #ffffff;
  --rl-shadow: 0 16px 38px rgba(30, 47, 65, 0.12);
  --rl-table-bg: #ffffff;
  --rl-table-bg-alt: #f8fafc;
  --rl-table-head: #edf3f8;
  --rl-table-border: #d8e0ea;
  --rl-table-text: #1f2b3a;
  --rl-table-muted: #41505f;
  --rl-table-link: #1f6f78;
  /* Tour guidato. Lo scrim deriva dal quasi-nero della palette invece di essere
     un literal per conto suo — il vecchio era #07050d, orfano di un tema
     cancellato. Se arriva un tema scuro si ridefinisce qui con il resto. */
  --rl-tour-scrim: rgba(17, 24, 39, 0.74);
  --rl-tour-scrim: color-mix(in srgb, var(--rl-text) 74%, transparent);
  --rl-tour-ring: var(--rl-brand);
  --rl-tour-surface: var(--rl-surface);
  --pico-primary: var(--rl-btn-success);
  --pico-primary-hover: var(--rl-btn-success-hover);
  --pico-primary-focus: rgba(31, 111, 120, 0.2);
  --pico-secondary: var(--rl-btn-secondary);
  --pico-secondary-hover: var(--rl-btn-secondary-hover);
  --pico-form-element-focus-color: rgba(31, 111, 120, 0.18);
  --pico-card-background-color: var(--rl-surface);
  --pico-card-border-color: var(--rl-border);
  --pico-background-color: transparent;
  --pico-border-radius: 0.5rem;
  --pico-typography-spacing-vertical: 0.9rem;
}

/* Pico declares its colour tokens on `:root:not([data-theme=dark])` (0,2,0), which
   outranks the plain `:root` above — the `--pico-*` colours declared there are inert.
   Tokens that must actually reach Pico's own painting belong here instead. The first three
   are what it fills a checkbox with, checked and unchecked. */
:root:not([data-theme="dark"]) {
  /* Pico's base text colour, which every bare <label> inherits. On the plain `:root` it
     lost to Pico's own dark block whenever the OS asked for dark mode, and the form labels
     came out at #c2c7d0 — 1.70:1 on white, paler than the placeholder inside the field. */
  --pico-color: var(--rl-text);
  --pico-primary-background: var(--rl-btn-success);
  --pico-form-element-background-color: var(--rl-surface);
  --pico-form-element-border-color: var(--rl-border-strong);
  /* Form-hint <small>, h4-h6 and placeholders. */
  --pico-muted-color: var(--rl-text-soft);
  --pico-h4-color: var(--rl-text);
  --pico-h5-color: var(--rl-text);
  --pico-h6-color: var(--rl-text);
  --pico-form-element-placeholder-color: var(--rl-text-placeholder);
}

html {
  background: var(--rl-bg-base);
}

body {
  color: var(--rl-text);
  background: linear-gradient(180deg, var(--rl-bg-base) 0%, #eef3f8 100%);
}

h1,
h2,
h3,
h4,
.brand-chip,
.badge,
.btn-sm,
button,
[role="button"] {
  letter-spacing: 0;
}

h2 {
  font-size: 1.7rem;
}

h3 {
  font-size: 1.22rem;
}

p,
small,
li,
td,
th,
label,
input,
select,
textarea,
button {
  font-size: 0.95rem;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-180%);
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  background: #ffffff;
  color: var(--rl-brand-strong);
  box-shadow: var(--rl-shadow);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Reaches a screen reader and nothing else. Used by the live regions that
   announce what a chip control just did, since adding or removing a chip
   changes the page without moving focus and would otherwise be silent. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100vh;
  padding: 0.85rem 0.6rem;
  border-right: 1px solid var(--rl-border);
  background: #10212f;
  color: #f7fafc;
}

.brand-chip {
  width: 100%;
  justify-content: flex-start;
  padding: 0.58rem 0.62rem;
  border-radius: 0.5rem;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: none;
}

.brand-chip::before {
  color: #10212f;
  background: #8fd6c8;
  box-shadow: none;
}

.app-nav {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  max-width: 100%;
}

.app-nav-link {
  display: flex;
  align-items: center;
  min-height: 2.15rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.5rem;
  color: #cfe0ea;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.app-nav-link:hover,
.app-nav-link:focus {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.app-nav-link[aria-current="page"] {
  background: #8fd6c8;
  color: #10212f;
}

/* Il comando del tour e' un <button> vestito da .app-nav-link, quindi gli serve
   la stessa fuga dalla regola bare-`button` di questo file, che con nove :not()
   incatenati sta a specificita' (0,9,1) e vincerebbe su qualunque selettore sano. */
.app-nav-button {
  width: 100%;
  font: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.app-nav-button:hover,
.app-nav-button:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.app-sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.app-main {
  min-width: 0;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0.8rem 24px;
  border-bottom: 1px solid var(--rl-border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}

.app-topbar-label {
  margin: 0 0 0.1rem;
  color: var(--rl-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.app-topbar strong {
  display: block;
  color: var(--rl-text);
  font-size: 1.05rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* The workspace column already provides the outer frame: the content area takes
   all the width the shell gives it, with a flat 24px gutter on every side. */
main.container.app-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px;
  overflow-x: clip;
}

/* Full-bleed content must not turn paragraphs into single long lines: prose
   keeps a readable measure while tables and grids use the extra width. */
.page-header p,
.empty-state p,
.panel > p.muted {
  max-width: 78ch;
}

form.panel input:not([type="checkbox"]):not([type="radio"]),
form.panel select,
form.panel textarea {
  max-width: 46rem;
}

.page-shell {
  animation: none;
}

.breadcrumb {
  border-color: var(--rl-border);
  background: transparent;
  color: var(--rl-text-soft);
}

.breadcrumb a {
  color: var(--rl-brand);
}

.flash {
  border-color: rgba(40, 122, 83, 0.28);
  background: #e7f5ed;
  color: #1e5c3e;
}

.flash-error {
  border-color: rgba(177, 61, 61, 0.28);
  background: #fdecec;
  color: #8e3030;
}

.panel,
details,
.filter-bar,
.table-wrap {
  border-radius: 0.5rem;
  border-color: var(--rl-border);
  background: var(--rl-surface);
  box-shadow: 0 10px 24px rgba(31, 47, 65, 0.08);
}

.panel-muted,
details[open],
.filter-bar {
  background: var(--rl-surface-soft);
}

.panel-success {
  border-left: 4px solid var(--rl-success);
  background: #effaf3;
}

.panel-info {
  border-left: 4px solid var(--rl-info);
  background: #eef6fd;
}

.panel-warning {
  border-left: 4px solid var(--rl-warning);
  background: #fff7e8;
}

.panel-error {
  border-left: 4px solid var(--rl-danger);
  background: #fdecec;
}

.table-wrap table th,
.table-wrap table td,
main.container table:not(.lead-table) th,
main.container table:not(.lead-table) td {
  color: var(--rl-table-text);
  border-color: var(--rl-table-border);
}

.table-wrap table th {
  background: var(--rl-table-head);
  color: #354253;
}

.table-wrap table td,
.table-wrap table tbody tr:nth-child(even) td {
  background: var(--rl-table-bg);
}

.table-wrap table tbody tr:hover td {
  background: #f0f5f9;
}

/* A badge label is one indivisible token. Left wrappable, its min-content width
   is only the longest single word ("Message" out of "Message ready"), so auto
   table layout is free to squeeze the column until the pill breaks over two
   lines; `nowrap` makes min-content the whole label. Same reasoning as .actions
   above, and .table-wrap already scrolls if a row runs out of room. */
.badge {
  border-radius: 999px;
  font-size: 0.73rem;
  text-transform: none;
  white-space: nowrap;
}

.badge-green {
  background: #e4f4ea;
  border-color: #b8dec7;
  color: #246848;
}

.badge-blue {
  background: #e8f2fb;
  border-color: #b9d7f1;
  color: #225d96;
}

.badge-gray {
  background: #edf1f5;
  border-color: #d4dde6;
  color: #3f4a58;
}

.badge-orange {
  background: #fff3df;
  border-color: #eed29d;
  color: #8a5512;
}

.badge-red {
  background: #fae8e8;
  border-color: #efb9b9;
  color: #9a3333;
}

button.secondary,
[role="button"].secondary,
a.btn-sm.secondary {
  background: var(--rl-btn-secondary);
  border-color: var(--rl-btn-secondary);
  color: var(--rl-btn-secondary-text);
}

button.outline,
[role="button"].outline,
a.btn-sm.outline {
  color: var(--rl-brand-strong);
  border-color: var(--rl-border-strong);
  background: transparent;
}

/* Icon-only row actions. Square box, so the glyph sits centred instead of
   inheriting .btn-sm's wider text padding. No colour of its own: the fill comes
   from .btn-sm and the glyph strokes in `currentColor`, so `.danger` keeps
   working untouched. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  /* The button variants set `border-color` but never a width or style, so a
     <button> renders Pico's 1px border while an <a class="btn-sm"> renders none.
     With text labels the two were different widths anyway; as adjacent squares
     the 2px gap reads as misalignment. Declaring the border here squares both,
     and the <a>'s border-color already matches its own background. */
  border-width: 1px;
  border-style: solid;
}

.btn-icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* Checkboxes and radios are excluded on purpose: Pico draws them with
   `appearance: none` and signals `:checked` through `background-color` plus a white
   tick image, so a blanket white fill here would paint white-on-white. */
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
  color: var(--rl-text);
  background-color: #ffffff;
  border-color: var(--rl-border-strong);
}

input::placeholder,
textarea::placeholder {
  color: var(--rl-text-placeholder);
}

.metric-card {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--rl-border);
  border-radius: 0.5rem;
  background: #ffffff;
}

.metric-card small {
  color: var(--rl-text-soft);
  font-weight: 700;
}

.metric-value {
  margin: 0.25rem 0 0;
  color: var(--rl-brand-strong);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.empty-state {
  padding: 1.1rem;
  border: 1px dashed var(--rl-border-strong);
  border-radius: 0.5rem;
  background: var(--rl-surface-soft);
  color: var(--rl-text-soft);
}

.eyebrow {
  margin: 0 0 0.2rem;
  color: var(--rl-brand);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.compact {
  margin: 0;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.section-heading h3 {
  margin: 0 0 0.15rem;
}

.dashboard-metrics {
  margin-bottom: 1rem;
}

.health-row progress {
  height: 0.55rem;
  margin: 0.32rem 0 0.1rem;
}

.workspace-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.workspace-hero .muted {
  margin-bottom: 0;
}

.workspace-section {
  scroll-margin-top: 5.5rem;
  margin-bottom: 1.2rem;
}

.workspace-filters {
  margin-top: 0.9rem;
}

.workspace-secondary-actions {
  justify-content: flex-end;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rl-border);
}

.date-dim {
  color: var(--rl-text-soft);
  font-size: 0.74rem;
}

.result-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.result-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.result-filter-group .is-active {
  border-color: rgba(31, 111, 120, 0.35);
  background: #e8f6f3;
  color: var(--rl-brand-strong);
}

.selected-count {
  color: var(--rl-brand-strong);
}

.search-result-new td {
  background: #f7fbff;
}

.search-result-in-db td {
  background: #f7faf8;
}

.search-result-outdated td {
  background: #fff8ec;
}

.outreach-review-page {
  min-width: 0;
}

.runs-stack {
  display: grid;
  gap: 1rem;
}

.run-panel {
  padding: 0.85rem;
  border: 1px solid var(--rl-border);
  border-radius: 0.5rem;
  background: var(--rl-surface);
}

.run-panel summary {
  cursor: pointer;
  list-style: none;
}

.run-panel summary::-webkit-details-marker {
  display: none;
}

.run-summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.run-title {
  margin: 0;
}

.run-meta {
  margin: 0.3rem 0 0;
  color: var(--rl-text-soft);
}

.run-content {
  margin-top: 0.9rem;
}

.run-summary-main {
  min-width: 0;
}

.run-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* --- Level 2: one accordion per lead ------------------------------------- */

.lead-list {
  display: grid;
  gap: 0.35rem;
}

.lead-panel {
  padding: 0;
  border: 1px solid var(--rl-border);
  border-radius: 0.4rem;
  background: var(--rl-surface-soft);
}

.lead-panel[open] {
  border-color: var(--rl-border-strong);
  box-shadow: var(--rl-shadow);
}

/* Every lead is its own grid, so the tracks must be fixed rather than
   content-sized: only identical track sizes keep the columns aligned from one
   row to the next. Solo the last one absorbs the leftover width. */
.lead-panel > summary {
  display: grid;
  grid-template-columns: 1rem 13rem 15rem 5.5rem 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
  color: var(--rl-text);
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 0;
}

/* Pico paints its own right-aligned chevron via ::after; the lead rows carry a
   left caret instead, so both of its markers have to go. */
.lead-panel > summary::-webkit-details-marker,
.lead-context > summary::-webkit-details-marker,
.lead-panel > summary::after,
.lead-context > summary::after {
  display: none;
}

.lead-panel > summary:hover {
  background: var(--rl-surface-emphasis, rgba(0, 0, 0, 0.03));
  border-radius: 0.4rem;
}

.lead-caret {
  display: inline-block;
  color: var(--rl-text-soft);
  font-weight: 800;
  transition: transform 0.15s ease;
}

details[open] > summary > .lead-caret {
  transform: rotate(90deg);
}

.lead-name,
.lead-company,
.lead-preview {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Pico styles `details > summary` with a higher specificity than this file can
   reach without over-qualifying, so the row's colours are set per span. */
.lead-name {
  color: var(--rl-text);
  font-weight: 700;
}

.lead-company,
.lead-preview {
  color: var(--rl-text-soft);
  font-weight: 400;
}

.lead-preview {
  font-size: 0.85rem;
}

/* Grid items stretch by default; badges and flags must keep their own width. */
.lead-panel > summary > .badge,
.lead-flag {
  justify-self: start;
}

.lead-flag {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.lead-flag.ok {
  color: #246848;
}

.lead-flag.warn {
  color: #8a5512;
}

.lead-body {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 0.2rem 0.75rem 0.85rem 1.6rem;
  border-top: 1px solid var(--rl-border);
}

.lead-headline {
  max-width: 78ch;
  margin: 0.6rem 0 0;
}

.lead-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.35rem 1.5rem;
  width: 100%;
  max-width: 78ch;
  margin: 0;
}

.lead-facts div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
}

.lead-facts dt {
  color: var(--rl-text-soft);
  font-weight: 700;
  font-size: 0.85rem;
}

.lead-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--rl-text);
}

.lead-message-form {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  width: 100%;
  max-width: 78ch;
  margin: 0;
}

.lead-message-fields {
  display: grid;
  gap: 0.5rem;
}

.lead-message-form textarea {
  margin-bottom: 0;
}

/* Pico stretches bare <button> to the full form width. */
.lead-actions button {
  width: auto;
}

.lead-log {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.lead-log-chip {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rl-border);
  border-radius: 999px;
  font-size: 0.75rem;
}

.lead-log-chip.ok {
  border-color: #b8dec7;
  background: #e4f4ea;
  color: #246848;
}

.lead-log-chip.warn {
  border-color: #eed29d;
  background: #fff3df;
  color: #8a5512;
}

/* --- Level 3: research context, closed by default ------------------------ */

.lead-context {
  width: 100%;
  max-width: 78ch;
}

.lead-context > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
}

.lead-context-label {
  color: var(--rl-brand-strong);
  font-weight: 700;
}

.lead-context-body {
  padding: 0.2rem 0 0 1.3rem;
}

.lead-context-body h4 {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.85rem;
  color: var(--rl-text-soft);
}

.prose {
  max-width: 78ch;
  margin: 0;
  color: var(--rl-text);
}

.source-list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.source-list li {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.85rem;
}

.lead-actions,
.run-download-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Outreach settings form, shared by /ui/settings and a research's Settings
   section.

   The accordion, the rail and the field sizing all come from the builder layer
   in `linkedin_search.css` under `[data-builder]` — including the rule that
   gives every input, select and textarea in a `.builder-row-body` one starting
   height. What is left here is what that layer has no equivalent for: a field
   label carrying an override/inherited marker beside it, the template reading
   as email text, and the rail's key/value digest.

   No `display` on `.outreach-setting` itself: the builder layer already makes
   every row-body label a flex column, and setting it here would fight it. */
.outreach-setting-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}

[data-outreach-settings] textarea[name="EMAIL_TEMPLATE"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.outreach-rail-digest {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.outreach-rail-digest dt {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--rl-text-soft);
}

/* A model id has no spaces to break on and the rail is 19rem wide. */
.outreach-rail-digest dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.download-csv-btn {
  background: var(--rl-btn-success);
  border-color: var(--rl-btn-success);
  color: var(--rl-btn-success-text);
}

@media (max-width: 1040px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .app-nav {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }

  .app-nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .app-sidebar-footer {
    display: none;
  }

  .workspace-hero {
    flex-direction: column;
  }

  .lead-panel > summary {
    grid-template-columns: 1rem minmax(0, 1fr) 5.5rem 5.5rem;
  }

  .lead-company,
  .lead-preview {
    display: none;
  }
}

@media (max-width: 720px) {
  .lead-panel > summary {
    grid-template-columns: 1rem minmax(0, 1fr) 5.5rem;
  }

  .lead-flag {
    display: none;
  }

  .lead-body {
    padding-left: 0.75rem;
  }

  .lead-facts div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

@media (max-width: 720px) {
  /* On phones 24px of gutter costs too much of the usable line length. */
  main.container.app-content {
    padding: 16px;
  }

  .app-topbar {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    padding: 0.8rem 16px;
  }

  .topbar-actions,
  .topbar-actions a[role="button"] {
    width: 100%;
  }

  .topbar-actions a[role="button"] {
    justify-content: center;
  }
}

/* Status filter tabs ------------------------------------------------------- */

.status-tabs {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.25rem;
  border: 1px solid var(--rl-border);
  border-radius: 0.7rem;
  background: var(--rl-surface-soft);
}

.status-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  color: var(--rl-text-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.status-tab:hover {
  background: var(--rl-surface);
  color: var(--rl-text);
}

.status-tab.is-current {
  background: var(--rl-brand);
  color: #ffffff;
}

.status-tab:focus-visible {
  outline: 2px solid var(--rl-brand-strong);
  outline-offset: 2px;
}

.status-tab-count {
  padding: 0 0.35rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.status-tab:not(.is-current) .status-tab-count {
  background: var(--rl-surface-emphasis);
}

@media (max-width: 720px) {
  .status-tabs {
    display: flex;
    width: 100%;
  }

  .status-tab {
    flex: 1;
    justify-content: center;
  }
}

/* Confirmation dialogs (SweetAlert2) --------------------------------------- */

.swal2-container {
  backdrop-filter: blur(2px);
}

.rl-swal {
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  background: var(--rl-surface);
  color: var(--rl-text);
  box-shadow: var(--rl-shadow);
  font-family: var(--pico-font-family);
}

.rl-swal .swal2-title {
  font-family: "Space Grotesk", var(--pico-font-family);
  font-size: 1.28rem;
  color: var(--rl-text);
}

.rl-swal .swal2-html-container {
  margin: 0.6rem 1.4rem 0;
  color: var(--rl-text-soft);
  font-size: 0.95rem;
  text-align: left;
}

.rl-swal-lead {
  margin: 0 0 0.35rem;
  font-weight: 600;
  color: var(--rl-text);
}

.rl-swal-impact {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
}

.rl-swal-impact li {
  margin-bottom: 0.15rem;
}

.rl-swal-note {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--rl-text-soft);
  opacity: 0.85;
}

.rl-swal-question {
  margin: 0;
  color: var(--rl-text);
}

.rl-swal .swal2-input.rl-swal-input {
  margin: 0.9rem 1.4rem 0.2rem;
  width: calc(100% - 2.8rem);
  border: 1px solid var(--rl-border-strong);
  border-radius: 0.6rem;
  background: var(--rl-bg-soft);
  color: var(--rl-text);
  box-shadow: none;
  font-size: 0.95rem;
}

.rl-swal .swal2-validation-message {
  border-radius: 0.5rem;
  background: var(--rl-surface-soft);
  color: var(--rl-text);
}

.rl-swal-btn {
  margin: 0 0.3rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: var(--rl-btn-secondary);
  color: var(--rl-btn-secondary-text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.rl-swal-btn:hover {
  background: var(--rl-btn-secondary-hover);
}

.rl-swal-btn-cancel {
  border-color: var(--rl-border-strong);
  background: transparent;
  color: var(--rl-text-soft);
}

.rl-swal-btn-cancel:hover {
  background: var(--rl-surface-soft);
  color: var(--rl-text);
}

.rl-swal-btn-danger {
  background: var(--rl-btn-danger);
  color: var(--rl-btn-danger-text);
}

.rl-swal-btn-danger:hover {
  background: var(--rl-btn-danger-hover);
}

.rl-swal-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.rl-swal-btn:focus-visible {
  outline: 2px solid var(--rl-brand-strong);
  outline-offset: 2px;
}