/* ===========================================================================
   LinAtlas: component layer
   ---------------------------------------------------------------------------
   All values come from the "Referentiel Realizations" mockup
   (inline styles reviewed one by one). When a Linagora design-system token
   has the same value, the token is used; when they differ, the mockup wins.

   Order: base, structure, components, screens, mobile adaptations.
   =========================================================================== */

/* --- Base ---------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--lin-surface-grey);
  color: var(--lin-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lin-red); }
a:hover { color: var(--lin-red-hover); }

input, select, textarea, button { font-family: var(--font-sans); }

/* `type="search"` fields show a native clear icon that duplicates the
   interface's clear button. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

h1, h2, h3, h4 { font-weight: var(--fw-regular); color: var(--lin-ink); margin: 0; }

::selection { background: rgba(196, 45, 67, 0.15); }

@keyframes lin-spin { to { transform: rotate(360deg); } }
@keyframes lin-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes lin-toast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

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

/* --- Structure ----------------------------------------------------------- */

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.app-main-column {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 35px 25px 60px;
}

/* An anchor jump places its target at the very top of the window, meaning
   beneath the header, which remains stuck there: the target block's title used
   to disappear underneath it. The offset equals the header height plus some
   breathing room. */
.app-main [id] { scroll-margin-top: 96px; }

/* Sidebar (wide screens) */

.sidebar {
  width: 264px;
  flex: 0 0 264px;
  background: var(--lin-white);
  border-right: 1px solid var(--lin-border-light);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 25px 0 20px;
}

.sidebar__brand {
  padding: 0 25px 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar__logo { width: 132px; height: auto; }

/* The logo's tint is carried by the SVG file itself: when loaded via <img>,
   it does not inherit the page color. */
.brand-logo { display: block; }

.sidebar__tagline {
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

.sidebar__nav { display: flex; flex-direction: column; padding: 5px 0; }

.sidebar__footer {
  margin-top: auto;
  padding: 20px 25px 0;
  border-top: 1px solid var(--lin-border-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar__session {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

.sidebar__user { display: flex; align-items: center; gap: 10px; }

/* The block leads to the "My account" screen: it remains styled as a block,
   since link coloring would look wrong in a sidebar footer. */
a.sidebar__user { color: inherit; transition: var(--transition); }
a.sidebar__user:hover { color: inherit; }
a.sidebar__user:hover .sidebar__user-name { color: var(--lin-red); }
a.sidebar__user:hover .avatar { background: var(--lin-surface-grey); }

.sidebar__user-name { font-size: var(--fs-14); line-height: var(--lh-20); }

/* The account groups below the user's name. There may be several, and their
   names are unrestricted: without wrapping, the list widened the sidebar. */
.sidebar__user-role {
  font-size: var(--fs-13);
  line-height: 18px;
  color: var(--lin-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 25px;
  border: 0;
  border-left: 3px solid transparent;
  background: var(--lin-white);
  color: var(--lin-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-22);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.nav-item:hover { background: var(--lin-surface-hover); color: var(--lin-ink); }

.nav-item--active,
.nav-item--active:hover {
  border-left-color: var(--lin-red);
  background: var(--lin-surface-hover);
  color: var(--lin-red);
}

.nav-item__icon { font-size: 18px; line-height: 1; }
.nav-item__label { flex: 1 1 auto; min-width: 0; }
.nav-item__count { color: var(--lin-muted); font-size: var(--fs-13); }

.avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-circle);
  background: var(--lin-surface-hover);
  color: var(--lin-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  overflow: hidden;
}

/* `cover` rather than `contain`, as on logo tiles: a landscape photo fitted
   entirely inside the circle would leave two empty bands and a tiny face.
   Cropping the edges is what is expected for a portrait. */
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Collaborator row leading to the realizations they contributed to. It uses
   the same treatment as the session block at the bottom of the sidebar: the
   whole thing remains styled as a block, only the name gets link coloring;
   coloring the entire row as a link would make it look like a heading. */
a.person { color: inherit; transition: var(--transition); }
a.person:hover { color: inherit; }
a.person:hover .person__name { color: var(--lin-red); }
a.person:hover .avatar { background: var(--lin-surface-grey); }

/* Header */

/* Three columns, with two equal side columns: the search bar is centered in
   the header, rather than centered in whatever space the others leave it.
   A single spacer shifted it left by the full width of the "New realization"
   button.

   The 190px minimum preserves symmetry as the window narrows. Without it, the
   right column stopped at the button width and the left one collapsed to zero:
   the bar kept its 620px but ended up flush against the edge. With it, the bar
   gives up pixels and remains centered. The value is the measured button
   width: a longer label would reintroduce the offset without breaking the
   layout. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--lin-white);
  border-bottom: 1px solid var(--lin-border-light);
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(0, 620px) minmax(190px, 1fr);
  align-items: center;
  gap: 15px;
  padding: 13px 25px;
}

/* `nowrap`: without it, an overly narrow side column split "New realization"
   across two lines and made the header grow. The bar gives up space before the
   button breaks. */
.app-header__side { display: flex; align-items: center; gap: 15px; white-space: nowrap; }
.app-header__side--end { justify-content: flex-end; }

.icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
  color: var(--lin-ink);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

/* Nothing distinguished this button from its neighbor under the pointer even
   though it sometimes performs a deletion. Its background matches the
   "copy" button, which already had this rule, making that rule unnecessary.

   The color is repeated because the "Edit" button is a link: the general link
   rule tinted it red on hover, confusing it with the adjacent delete button. */
.icon-button:hover { background: var(--lin-surface-grey); color: var(--lin-ink); }

/* The keyboard indicator matches the one on input fields: without it, tabbing
   through these buttons would provide no visible feedback. The search button
   joins it because it occupies the same place in the header and is traversed
   in the same way. */
.icon-button:focus-visible,
.header-search:focus-visible {
  outline: none;
  border-color: var(--lin-red);
  box-shadow: 0 0 0 0.25rem rgba(196, 45, 67, 0.15);
}

/* Delete action: the color announces what the click will remove. The same red
   as the cross that clears a search field. */
.icon-button--danger:hover { color: var(--lin-red); border-color: var(--lin-red); }

/* The mockup's bar, occupying the middle column. The cursor is the only
   deviation: `cursor: text` promised typing even though a click opens the
   palette, and the pointer itself was announcing a field. */
.header-search {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-surface-grey);
  color: var(--lin-muted);
  font-size: var(--fs-body);
  line-height: 26px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.header-search:hover { border-color: var(--lin-red); }

/* Hidden while the palette is open: use `visibility` rather than `display` so
   it keeps its space and the rest of the header does not move. */
.header-search--effaced { visibility: hidden; }
.header-search__icon { font-size: var(--fs-body); color: var(--lin-ink); }

.header-search__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search__hint {
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
  font-size: var(--fs-13);
  color: var(--lin-muted);
}

/* Footer */

.app-footer {
  border-top: 1px solid var(--lin-border-light);
  background: var(--lin-white);
  padding: 20px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.app-footer__logo { width: 104px; height: auto; }

.app-footer__text {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

/* --- Buttons (Linagora design system) ------------------------------------- */

.btn {
  min-width: 220px;
  padding: 10px 25px 12px;
  text-align: center;
  font: var(--type-button);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  margin: 0;
  display: inline-block;
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
}

.btn--compact { min-width: auto; padding: 8px 25px; font-size: 15px; }
/* Full-width button. The mockup calls for one 44px-high line; in a narrow side
   column, a long label such as "Generate a business reference" overflowed.
   Horizontal margins are tightened so it fits, and line-height is reduced
   from 36px to 24px: if an even longer label still wraps, the pill remains
   readable instead of growing into a rounded block. */
.btn--block {
  width: 100%;
  min-width: auto;
  padding: 10px 16px;
  font-size: 15px;
  line-height: var(--lh-24);
}

.btn--primary {
  color: var(--lin-white);
  background: var(--lin-red);
  border-color: var(--lin-red);
}

.btn--primary:hover {
  background: var(--lin-red-hover);
  border-color: var(--lin-red-hover);
  color: var(--lin-white);
}

.btn--grey {
  color: var(--lin-ink-alt);
  border-color: var(--lin-ink-alt);
  background: transparent;
}

.btn--grey:hover {
  color: var(--lin-white);
  background: var(--lin-ink-alt);
  border-color: var(--lin-ink-alt);
}

.btn--white {
  color: var(--lin-white);
  background: transparent;
  border-color: var(--lin-white);
}

.btn--white:hover {
  color: var(--lin-ink-alt);
  background: var(--lin-white);
  border-color: var(--lin-white);
}

/* Delete action. Subtle at rest so it does not compete with the screen's main
   action, red on hover to announce what the click removes: list trash buttons
   already behave this way, so the application has a single way to show a
   destructive action.

   `inline-flex` because this button has an icon before its label, unlike the
   other variants: shared `inline-block` would make them stick together. */
.btn--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--lin-muted);
  border-color: var(--lin-border-light);
  background: transparent;
}

.btn--danger:hover {
  color: var(--lin-white);
  background: var(--lin-red);
  border-color: var(--lin-red);
}

.btn[disabled], .btn--disabled {
  background: var(--lin-disabled);
  border-color: var(--lin-disabled);
  color: var(--lin-white);
  cursor: default;
  pointer-events: none;
}

/* Smaller secondary pill button (download, copy, export) */
.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--lin-ink-alt);
  border-radius: var(--radius-pill);
  background: var(--lin-white);
  color: var(--lin-ink-alt);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  cursor: pointer;
  transition: var(--transition);
}

.pill-button:hover { background: var(--lin-ink-alt); color: var(--lin-white); }
.pill-button i { font-size: var(--fs-13); }

/* Subtle action link with arrow */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--lin-red);
  font-size: var(--fs-body);
  cursor: pointer;
}

.link-action--small { font-size: 15px; }
.link-action i { font-size: var(--fs-13); }

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--lin-muted);
  font-size: var(--fs-14);
  cursor: pointer;
  align-self: flex-start;
}

.link-back:hover { color: var(--lin-ink); }
.link-back i { font-size: 12px; }

/* --- Cards and panels ----------------------------------------------------- */

.card {
  background: var(--lin-white);
  border: 1px solid var(--lin-border-light);
  border-radius: var(--radius-card);
  padding: 25px;
}

.card--tight { padding: 20px; }
.card--roomy { padding: 30px; }
.card--flush { padding: 0; overflow: hidden; }

a.card, button.card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: var(--transition);
}

a.card:hover, button.card:hover { box-shadow: var(--shadow-card-hover); color: inherit; }

/* Card that leads somewhere without being a link itself: its link is carried
   by the title and extended across the whole surface by an overlay. This lets
   chips remain real links, since nested links do not exist in HTML.

   The two `z-index` values are purposeful: a card's links are stacked in
   document order, and the client thumbnail comes before the title. Without
   them, the overlay would cover it and it could not be clicked. */
.card--linked { position: relative; cursor: pointer; transition: var(--transition); }
.card--linked:hover { box-shadow: var(--shadow-card-hover); }
.card__stretch::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.card--linked a:not(.card__stretch), .card--linked button { position: relative; z-index: 1; }

.panel {
  background: var(--lin-surface-grey);
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  padding: 25px;
}

/* Red dashboard banner */
.banner {
  background: var(--lin-red);
  border-radius: var(--radius-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.banner h2 { font-size: var(--fs-28); line-height: var(--lh-36); color: var(--lin-white); }

.banner p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--lin-white);
  margin: 0;
  max-width: 720px;
  opacity: 0.92;
  text-wrap: pretty;
}

/* --- Statistic tiles ------------------------------------------------------ */

.stat-tile {
  background: var(--lin-white);
  border: 1px solid var(--lin-border-light);
  border-radius: var(--radius-card);
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: inherit;
}

a.stat-tile { transition: var(--transition); }
a.stat-tile:hover { box-shadow: var(--shadow-card-hover); color: inherit; }

.stat-tile__figure {
  font-size: var(--fs-title);
  line-height: 44px;
  color: var(--lin-red);
}

.stat-tile__caption { font-size: var(--fs-body); line-height: var(--lh-22); }

.stat-tile__note {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

/* Compact variant of detailed cards */
.stat-tile--compact { padding: 20px; gap: 3px; }
.stat-tile--compact .stat-tile__figure { font-size: var(--fs-28); line-height: var(--lh-36); }
.stat-tile--compact .stat-tile__caption {
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--lin-muted);
}

/* --- Badges and chips ----------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--lin-white);
  color: var(--lin-ink);
  font-size: var(--fs-13);
  line-height: var(--lh-20);
}

.badge--red { border-color: var(--lin-red); color: var(--lin-red); }
.badge--dark { border-color: var(--lin-footer-bg); background: var(--lin-footer-bg); color: var(--lin-white); }
.badge--muted { border-color: var(--lin-surface-grey); background: var(--lin-surface-grey); color: var(--lin-muted); }

/* Card confidentiality level: pushed to the end of the badge row, where the
   eye finds it consistently from one card to the next. */
.card__confidentiality { margin-left: auto; }

a.badge, button.badge { cursor: pointer; transition: var(--transition); }
a.badge:hover, button.badge:hover { border-color: var(--lin-red); color: var(--lin-red); }

/* Two-action label: the name filters the catalog like the other chips, while
   the arrow opens the page for what it names. Padding is transferred from the
   label to its two halves; otherwise the click would cover only the text and
   miss half the surface. */
.badge--split { padding: 0; gap: 0; overflow: hidden; }

.badge--split > a {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px 4px 12px;
  color: inherit;
  transition: var(--transition);
}

.badge--split > a + a {
  padding: 4px 10px 4px 7px;
  border-left: 1px solid var(--lin-border-subtle);
}

.badge--split > a:hover { background: var(--lin-red); color: var(--lin-white); }
.badge--split:has(a:hover) { border-color: var(--lin-red); }
.badge--split .bi { font-size: 11px; }

/* Hover changed from #30353B to #4A4E52, two dark grays separated by a 1.47
   contrast ratio: an internal service label looked dead even though it was
   clickable. Brand red is already used by the other clickable labels; on a
   solid background it is applied as a fill. */
a.badge--dark:hover { background: var(--lin-red); border-color: var(--lin-red); color: var(--lin-white); }

/* Same reason for the red label, where the general hover case is invisible:
   its border and text are already red. Hover fills it, like the dark label.
   Declared after the general case, which has the same specificity. */
a.badge--red:hover { background: var(--lin-red); border-color: var(--lin-red); color: var(--lin-white); }

/* Clickable option chip: facets, form selectors, categories */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--lin-white);
  color: var(--lin-ink);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  cursor: pointer;
  transition: var(--transition);
}

.chip:hover { border-color: var(--lin-red); color: var(--lin-red); }

.chip--selected,
.chip--selected:hover {
  background: var(--lin-red);
  border-color: var(--lin-red);
  color: var(--lin-white);
}

.chip--small { padding: 5px 13px; font-size: var(--fs-13); }

/* Chip used as a checkbox in forms: the input remains present for semantics
   and keyboard navigation, but is not rendered. */
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(input:checked) {
  background: var(--lin-red);
  border-color: var(--lin-red);
  color: var(--lin-white);
}
.chip:focus-within { box-shadow: 0 0 0 0.25rem rgba(196, 45, 67, 0.15); }
.chip__count { color: var(--lin-muted); }
.chip--selected .chip__count { color: var(--lin-on-dark-dim); }

/* Removable active-filter chip */
.chip--active-filter {
  padding: 5px 13px;
  border-color: var(--lin-red);
  color: var(--lin-red);
  font-size: var(--fs-13);
  gap: 8px;
}

.chip--active-filter:hover { background: var(--lin-red); color: var(--lin-white); }

/* Search example chip on a red background */
.chip--on-red {
  padding: 9px 20px;
  border-color: var(--lin-white);
  background: transparent;
  color: var(--lin-white);
  font-size: 15px;
  line-height: var(--lh-22);
}

.chip--on-red:hover { background: var(--lin-white); color: var(--lin-red); }

/* Example chip on a light background */
.chip--outline-red {
  padding: 9px 20px;
  border-color: var(--lin-red);
  color: var(--lin-red);
  font-size: 15px;
  line-height: var(--lh-22);
}

.chip--outline-red:hover { background: var(--lin-red); color: var(--lin-white); }

/* --- Multiple choice by search -------------------------------------------- */

/* Attribute set by Alpine on elements that must remain hidden before
   initialization: without this rule, selected chips and the suggestion list
   would flash while the page loads. */
[x-cloak] { display: none !important; }

.picker { position: relative; }

.picker__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
  color: var(--lin-muted);
  cursor: text;
}

.picker__field:focus-within { border-color: var(--lin-red); }

.picker__field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--lin-ink);
}

/* Opens the full list for users who prefer browsing to searching. */
.picker__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 0 0 8px;
  border: 0;
  background: none;
  color: var(--lin-muted);
  cursor: pointer;
  font-size: 15px;
}

.picker__toggle:hover { color: var(--lin-red); }

/* The list floats above the form: letting it push the content would move the
   following fields on every keystroke. */
.picker__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
}

.picker__option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: var(--radius-card);
  cursor: pointer;
}

.picker__option.is-active { background: var(--lin-surface-grey); }

.picker__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* The side column is half the width of the main card: a client's name wrapped
   onto two lines while the sector stayed pinned at the top right. Stacked,
   the two are readable. */
.columns__side .picker__line {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.picker__name { font-size: var(--fs-14); color: var(--lin-ink); }

.picker__category {
  flex: 0 0 auto;
  font-size: var(--fs-13);
  color: var(--lin-muted);
}

/* Two lines are enough to identify a technology and keep suggestion height
   constant, so the list does not jump from one keystroke to the next. */
.picker__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

.picker__mark { background: rgba(196, 45, 67, 0.14); color: var(--lin-red); }

/* Marks the current value when the list is open for a single choice. */
.picker__chosen { margin-left: 6px; color: var(--lin-red); }

.picker__empty { margin: 0; padding: 9px 11px; font-size: var(--fs-13); color: var(--lin-muted); }

/* The full checkbox list exists only for browsers without JavaScript, where
   the search field is unavailable. */
.picker__fallback { display: none; }

/* --- Tiles ---------------------------------------------------------------- */

.tile {
  flex: 0 0 auto;
  border-radius: var(--radius-card);
  background: var(--lin-surface-grey);
  border: 1px solid var(--lin-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lin-ink);
  overflow: hidden;
}

.tile img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* Thumbnail leading to the page for what it represents on catalog cards. Use
   brand red, as with clickable labels. */
a.tile { cursor: pointer; transition: var(--transition); }
a.tile:hover { border-color: var(--lin-red); color: var(--lin-red); }

.tile--40 { width: 40px; height: 40px; flex-basis: 40px; font-size: var(--fs-13); }
.tile--44 { width: 44px; height: 44px; flex-basis: 44px; font-size: var(--fs-14); }
.tile--48 { width: 48px; height: 48px; flex-basis: 48px; font-size: 15px; }
.tile--52 { width: 52px; height: 52px; flex-basis: 52px; font-size: var(--fs-body); }
.tile--88 {
  width: 88px; height: 88px; flex-basis: 88px;
  font-size: var(--fs-24);
  background: var(--lin-white);
}

/* --- Country flag --------------------------------------------------------- */

/* Three to two, the aspect ratio of the flags shipped with the repository.
   The frame separates flags with white edges from the white background,
   France's first of all, which would lose its band without it. When a flag is
   missing, the same frame receives the two-letter code and preserves its
   occupied space. */
.flag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 14px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: 2px;
  overflow: hidden;
  background: var(--lin-surface-grey);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--lin-muted);
}

/* `cover` rather than `contain`: a flag runs from edge to edge; a white margin
   around it would make it look like a logo. */
.flag img { display: block; width: 100%; height: 100%; object-fit: cover; }

.flag--30 { width: 30px; height: 20px; font-size: var(--fs-13); }

/* --- Group rights table --------------------------------------------------- */

/* The seven reference sets have the same three actions: only a table aligns
   them well enough to read a column at a glance. The remaining rights lack
   this regularity and use ordinary rows.

   `table-scroll` because three chip columns do not fit on a phone: the table
   scrolls on its own instead of making the page drift sideways. */
.table-scroll { overflow-x: auto; }

.rights-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.rights-grid th,
.rights-grid td {
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
}

.rights-grid thead th {
  color: var(--lin-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--lin-border-light);
  white-space: nowrap;
}

/* Table cell: the column carries the verb, while the cell only has to answer.
   The checkmark remains in place but transparent when unchecked; otherwise
   the row would change height on the first click. */
.chip--tick {
  width: 44px;
  padding: 6px 0;
  justify-content: center;
}

/* A cell that cannot be unchecked makes that clear: without this, baseline
   rights looked like checkable cells, and only the text above said they could
   not change. */
.chip:has(input:disabled) { cursor: default; opacity: 0.7; }

.chip--tick i { font-size: 15px; opacity: 0; }
.chip--tick:has(input:checked) i { opacity: 1; }

/* The first column names the row: it is read, not checked. */
.rights-grid tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--lin-ink);
  white-space: nowrap;
}

.rights-grid tbody tr + tr th,
.rights-grid tbody tr + tr td { border-top: 1px solid var(--lin-border-subtle); }

/* --- Clickable row lists -------------------------------------------------- */

.row-list {
  background: var(--lin-white);
  border: 1px solid var(--lin-border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 18px 25px;
  border: 0;
  border-bottom: 1px solid var(--lin-surface-grey);
  background: var(--lin-white);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: var(--transition);
}

.row:last-child { border-bottom: 0; }
.row:hover { background: var(--lin-surface-grey); color: inherit; }

.row--search { padding: 16px 25px; }
.row--compact { padding: 13px 20px; gap: 15px; }
/* Rows on administration screens: nothing is clickable except the buttons on
   the right. The cursor says so; the hover background remains useful for
   following a row to its buttons without losing track of its neighbor. */
.row--static { cursor: default; }

/* Row currently being edited: the form is in the side panel, and this marker
   identifies which row it targets. */
.row--edited,
.row--static.row--edited:hover {
  background: var(--lin-surface-grey);
  box-shadow: inset 3px 0 0 var(--lin-red);
}

.row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__title { font-size: var(--fs-body); line-height: var(--lh-24); color: var(--lin-ink); }

.row__meta {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rows stay on one line by default, which suits the catalog where row height
   must remain constant. On administration screens, a row carries three pieces
   of information and a long account name used to cut them off: there, two
   lines are better than a truncated sentence. */
.row__meta--wrap {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.row__aside { flex: 0 0 auto; font-size: var(--fs-13); color: var(--lin-muted); }
.row__chevron { flex: 0 0 auto; font-size: 12px; color: var(--lin-muted); }

.row--compact .row__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: var(--lh-22);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Tabs ----------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 25px;
  border-bottom: 1px solid var(--lin-border-light);
  flex-wrap: wrap;
}

.tab {
  padding: 0 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--lin-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-24);
  cursor: pointer;
  transition: var(--transition);
}

.tab:hover { color: var(--lin-red); }
.tab--active { border-bottom-color: var(--lin-red); color: var(--lin-red); }
.tab__count { color: var(--lin-muted); font-size: var(--fs-13); }

/* Second level of the administration bar: a rail, not chips. The keys screen
   already has a filtering row; two rows with the same appearance would not
   show which one navigates. A second underline would not show which controls
   the other either. */
.subtabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  align-self: flex-start;
  padding: 3px;
   /* The rail background matches the page: without this border, it would not
      exist and the tabs would float without anything holding them together. */
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--lin-surface-grey);
}

.subtab {
  padding: 5px 15px;
  border-radius: var(--radius-pill);
  color: var(--lin-muted);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  transition: var(--transition);
}

.subtab:hover { color: var(--lin-red); }

.subtab--active,
.subtab--active:hover {
  background: var(--lin-white);
  color: var(--lin-ink);
  box-shadow: var(--shadow-hairline);
}

/* --- Facets ---------------------------------------------------------------- */

.facets {
  flex: 1 1 250px;
  max-width: 290px;
  min-width: 240px;
  background: var(--lin-white);
  border: 1px solid var(--lin-border-light);
  border-radius: var(--radius-card);
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: sticky;
  top: 95px;
   /* The column scrolls in place instead of lengthening the page. Without this,
      `sticky` served no purpose: the column exceeded the window and scrolled
      with the rest. Expanding "Technology" fully is enough to get ten
      thousand pixels of filters. */
  max-height: calc(100vh - 115px);
  overflow-y: auto;
}

/* Collapsible group. An open `details` behaves like the previous column; when
   closed, it leaves only its title. The vertical grid is recreated with
   margins because `display: flex` on `details` would prevent collapsing. */
.facet-group > * + * { margin-top: 10px; }

.facet-group__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight: var(--fw-medium);
  color: var(--lin-ink);
}

/* A `summary` remains keyboard-selectable and announces its state, so it
   carries the title instead of having a button beside it. The default triangle
   is replaced with the theme chevron, on the right as elsewhere. */
summary.facet-group__label {
  cursor: pointer;
  list-style: none;
  transition: var(--transition);
}

summary.facet-group__label::-webkit-details-marker { display: none; }
summary.facet-group__label:hover { color: var(--lin-red); }

summary.facet-group__label::after {
  content: '\f282';           /* bi-chevron-down */
  font-family: 'bootstrap-icons';
   /* The title is semibold but the icon font has only one weight: without this
      reset, the browser would synthesize a fake bold. */
  font-weight: var(--fw-regular);
  font-size: 11px;
  color: var(--lin-muted);
  transition: var(--transition);
}

.facet-group[open] > summary.facet-group__label::after { transform: rotate(180deg); }

/* Number of values in the group, especially useful when it is closed: without
   it, there is no indication whether it hides three entries or three hundred
   fifty. */
.facet-group__count {
  margin-left: auto;
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  color: var(--lin-muted);
}

.facet-group__items { display: flex; flex-direction: column; gap: 2px; }

.facet-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-pill);
  color: var(--lin-muted);
  font-size: var(--fs-13);
}

.facet-search:focus-within { border-color: var(--lin-red); }

.facet-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--lin-ink);
}

.facet-more {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--lin-red);
  text-align: left;
}

.facet-more:hover { text-decoration: underline; }

.facet-empty { font-size: var(--fs-13); color: var(--lin-muted); }

.facet {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--lin-ink);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
}

.facet:hover { color: var(--lin-red); }

.facet__box {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 3px;
  border: 1px solid var(--lin-border-subtle);
  background: var(--lin-white);
  color: var(--lin-white);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.facet input:checked + .facet__box,
.facet__box.is-checked,
.facet--selected .facet__box {
  background: var(--lin-red);
  border-color: var(--lin-red);
}

.facet__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facet__count { flex: 0 0 auto; color: var(--lin-muted); font-size: var(--fs-13); }

/* --- Proportion bars ------------------------------------------------------ */

.bar-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.bar-row:hover .bar-row__label { color: var(--lin-red); }

.bar-row__head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 15px;
  line-height: var(--lh-22);
  color: var(--lin-ink);
}

.bar-row__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__count { color: var(--lin-muted); font-size: var(--fs-13); flex: 0 0 auto; }

.bar-row__track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--lin-surface-grey);
  overflow: hidden;
}

.bar-row__fill {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--lin-red);
  transition: var(--transition);
}

/* --- Table ---------------------------------------------------------------- */

.table-wrapper {
  background: var(--lin-white);
  border: 1px solid var(--lin-border-light);
  border-radius: var(--radius-card);
  overflow-x: auto;
}

.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }

.data-table thead tr { background: var(--lin-surface-grey); }

.data-table th {
  text-align: left;
  padding: 13px 20px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--lin-muted);
  border-bottom: 1px solid var(--lin-border-subtle);
  white-space: nowrap;
}

.data-table th:last-child { text-align: right; }

.data-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--lin-surface-grey);
}

.data-table tbody tr:hover { background: var(--lin-surface-grey); }
.data-table tbody tr:last-child { border-bottom: 0; }

.data-table td {
  padding: 15px 20px;
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--lin-muted);
}

.data-table td:first-child { font-size: 15px; color: var(--lin-ink); }
.data-table td.is-nowrap { white-space: nowrap; }
.data-table td.is-right { text-align: right; font-size: var(--fs-13); }

/* Flag column: twenty-one pixels of content plus forty pixels of padding. The
   other six columns already filled the available width, and two extra pixels
   caused a scrollbar to appear. */
.data-table th.is-flag, .data-table td.is-flag { padding-left: 10px; padding-right: 10px; }

/* --- Forms ---------------------------------------------------------------- */

.field { margin-bottom: 27px; }
.field:last-child { margin-bottom: 0; }

.field__label {
  display: inline-block;
  color: var(--lin-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-22);
  margin: 0 0 10px;
}

.field__hint,
.form-hint {
  display: block;
  margin: 10px 0 0;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

.field__error {
  color: var(--lin-error);
  font-size: 0.85em;
  margin-top: 5px;
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field input[type="password"],
.field input[type="url"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--lin-ink);
  background: var(--lin-white);
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lin-red);
  box-shadow: 0 0 0 0.25rem rgba(196, 45, 67, 0.15);
}

.field textarea { min-height: 96px; resize: vertical; }

/* File selector. The browser control reserves a fixed width for its button and
   cuts the filename in half as soon as the column gets narrow. It is therefore
   hidden without being removed from the document, and the theme places its own
   button over it. */
.filepick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: var(--lh-24);
  color: var(--lin-ink);
  background: var(--lin-surface-grey);
  border: 1px dashed var(--lin-border-subtle);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: var(--transition);
}

.filepick:hover { border-color: var(--lin-muted); }

.filepick i { flex: 0 0 auto; font-size: var(--fs-13); color: var(--lin-muted); }

.filepick__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The field keeps keyboard focus even though it is no longer visible: without
   this indicator on the zone, it would no longer be clear where focus was. */
.filepick:focus-within {
  border-color: var(--lin-red);
  box-shadow: 0 0 0 0.25rem rgba(196, 45, 67, 0.15);
}

.filepick__current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.filepick__thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  padding: 4px;
  background: var(--lin-white);
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
}

/* Profile photo preview: use the same crop as the avatar where it will appear.
   Showing it in full here and cropped elsewhere would make framing a blind
   choice. */
.filepick__thumb--rond {
  object-fit: cover;
  padding: 0;
  border-radius: var(--radius-circle);
}

/* Value to copy, such as an API key secret: the button sits inside the field
   rather than beside it, so the whole thing reads as one object. */
.copyfield { position: relative; }

.copyfield__value {
  display: block;
  width: 100%;
  padding-right: 52px;
  word-break: break-all;
  background: var(--lin-surface-grey);
}

.copyfield__button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  font-size: 15px;
}

/* File selected but not yet uploaded. Show it explicitly, otherwise the page
   would not change between selection and saving. */
.filepick__pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  color: var(--lin-red);
}

.filepick__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  color: var(--lin-muted);
  cursor: pointer;
}

/* Field placed on an action row rather than in a `.field` block: it takes only
   the width it needs. */
.input--inline { display: inline-block; width: auto; min-width: 152px; }

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--lin-error); }

/* Full-width search field on the Search screen */
.search-field {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
}

.search-field i { font-size: 22px; color: var(--lin-red); }

.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: var(--fs-20);
  line-height: var(--lh-32);
  color: var(--lin-ink);
  background: transparent;
}

/* Catalog toolbar */
.toolbar { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }

.toolbar__search {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
}

.toolbar__search i { font-size: var(--fs-body); color: var(--lin-muted); }

.toolbar__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: var(--fs-body);
  line-height: 26px;
  color: var(--lin-ink);
  background: transparent;
}

.toolbar__select {
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
  color: var(--lin-ink);
  font-size: 15px;
  cursor: pointer;
}

.density-switch {
  display: flex;
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--lin-white);
}

.density-switch a {
  width: 42px;
  height: 42px;
  border: 0;
  background: var(--lin-white);
  color: var(--lin-ink);
  cursor: pointer;
  font-size: var(--fs-body);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.density-switch a:hover { background: var(--lin-surface-grey); }

.density-switch a.is-active,
.density-switch a.is-active:hover { background: var(--lin-red); color: var(--lin-white); }

.clear-input {
  border: 0;
  background: none;
  color: var(--lin-muted);
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  display: flex;
  align-items: center;
}

.clear-input:hover { color: var(--lin-red); }

/* Attached-document row. Its hover background matches the application's lists:
   the row has several buttons on the right, and the indicator lets users
   follow it to them without slipping onto its neighbor. */
.document-row { transition: var(--transition); }
.document-row:hover { background: var(--lin-surface-grey); }

/* File drop zone */
.dropzone {
  border: 1px dashed var(--lin-border-subtle);
  border-radius: var(--radius-card);
  padding: 35px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
  background: var(--lin-surface-grey);
}

.dropzone i { font-size: 26px; color: var(--lin-muted); }
.dropzone__title { font-size: 15px; line-height: var(--lh-24); color: var(--lin-ink); }
.dropzone__hint { font-size: var(--fs-13); line-height: var(--lh-20); color: var(--lin-muted); }

/* Zone hovered by a file being dragged. The dotted border becomes solid: no
   other cue says that the pointer is over the right target, and dropping
   beside it makes the browser open the file. */
.dropzone--hover,
.filepick--hover {
  border-style: solid;
  border-color: var(--lin-red);
  background: rgba(196, 45, 67, 0.04);
}

/* Files selected but not yet uploaded: the checkmark matches the one in an
   image-field preview, where it already conveys the same message. */
.dropzone__files {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dropzone__files li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-ink);
}

.dropzone__files i { font-size: var(--fs-13); color: var(--lin-red); }

.dropzone__files span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Switch (LDAP connector) */
.switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; }

/* The native checkbox is made invisible but remains in the document: it carries
   the state, keyboard focus, and screen-reader announcement; the track and
   knob are only a representation. Same technique as `.chip input`. */
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch__track {
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--lin-border-subtle);
  position: relative;
  transition: var(--transition);
  display: block;
}

.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--lin-white);
  transition: var(--transition);
  display: block;
}

.switch input:checked + .switch__track { background: var(--lin-red); }
.switch input:checked + .switch__track .switch__knob { left: 23px; }
.switch:focus-within .switch__track { box-shadow: 0 0 0 0.25rem rgba(196, 45, 67, 0.15); }

/* Both labels are written in the page and swapped according to state: the text
   follows the click without waiting for saving and remains translatable. */
.switch__label { font-size: var(--fs-14); color: var(--lin-ink); }
.switch__label .is-on { display: none; }
.switch input:checked ~ .switch__label .is-on { display: inline; }
.switch input:checked ~ .switch__label .is-off { display: none; }

/* --- Empty state ---------------------------------------------------------- */

.empty-state {
  background: var(--lin-white);
  border: 1px solid var(--lin-border-light);
  border-radius: var(--radius-card);
  padding: 50px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
}

.empty-state i { font-size: 26px; color: var(--lin-muted); }
.empty-state__title { font-size: var(--fs-20); line-height: 28px; }

.empty-state__text {
  font-size: 15px;
  line-height: var(--lh-24);
  color: var(--lin-muted);
  max-width: 420px;
}

/* --- Notifications -------------------------------------------------------- */

.toast-stack {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
}

.toast {
  padding: 15px 20px;
  background: var(--lin-footer-bg);
  color: var(--lin-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-drawer);
  font-size: 15px;
  line-height: var(--lh-24);
  animation: lin-toast 0.35s ease-out;
}

.toast--error { background: var(--lin-error); }

/* --- Overlays: palette, drawer -------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--scrim-frost);
  backdrop-filter: var(--blur-frost);
}

/* `align-items` is set because a flex container stretches its children by
   default, and the palette used to extend to its maximum height regardless of
   its content, leaving a large empty area below the last suggestions. */
.overlay--palette {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
}
.overlay--drawer { z-index: 60; }

.palette {
  width: 100%;
  max-width: 720px;
  max-height: 70vh;
  background: var(--lin-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-megamenu);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: lin-in 0.3s ease-in-out;
}

.palette__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 25px;
  border-bottom: 1px solid var(--lin-border-light);
}

.palette__head i { font-size: 18px; color: var(--lin-muted); }

.palette__head input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: 18px;
  line-height: 28px;
  color: var(--lin-ink);
}

.palette__escape {
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  background: var(--lin-white);
  color: var(--lin-muted);
  font-size: var(--fs-13);
  padding: 2px 8px;
  cursor: pointer;
}

.palette__body { flex: 1 1 auto; overflow-y: auto; padding: 10px 0; }
.palette__group { display: flex; flex-direction: column; padding: 8px 0; }

.palette__group-label {
  padding: 5px 25px;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

.palette__item {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 11px 25px;
  border: 0;
  background: var(--lin-white);
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.palette__item:hover,
.palette__item.is-active { background: var(--lin-surface-hover); color: inherit; }

.palette__item > i:first-child { flex: 0 0 auto; font-size: var(--fs-body); color: var(--lin-red); }
.palette__item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.palette__item-label,
.palette__item-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__item-label { font-size: 15px; line-height: var(--lh-22); color: var(--lin-ink); }
.palette__item-meta { font-size: var(--fs-13); line-height: var(--lh-20); color: var(--lin-muted); }

.palette__empty {
  padding: 40px 25px;
  text-align: center;
  font-size: 15px;
  line-height: var(--lh-24);
  color: var(--lin-muted);
}

.palette__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 25px;
  border-top: 1px solid var(--lin-border-light);
  background: var(--lin-surface-grey);
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
  flex-wrap: wrap;
}

.drawer {
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: var(--lin-white);
  box-shadow: var(--shadow-drawer);
  padding: 25px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: lin-in 0.3s ease-in-out;
}

.drawer__head {
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.drawer__head img { width: 120px; height: auto; }

.drawer__close {
  border: 0;
  background: none;
  color: var(--lin-ink);
  font-size: 18px;
  cursor: pointer;
}

.drawer .nav-item { padding: 13px 25px; }

/* Bottom navigation bar (mobile) */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--lin-white);
  border-top: 1px solid var(--lin-border-light);
  display: flex;
  justify-content: space-around;
  padding: 8px 5px;
}

.bottom-nav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--lin-ink);
  cursor: pointer;
}

.bottom-nav__item--active { color: var(--lin-red); }
.bottom-nav__item i { font-size: 19px; }

.bottom-nav__item span {
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* --- AI generation indicator ---------------------------------------------- */

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--lin-border-subtle);
  border-top-color: var(--lin-red);
  border-radius: var(--radius-circle);
  animation: lin-spin 0.8s linear infinite;
  display: block;
}

.spinner--small {
  width: 13px;
  height: 13px;
  border-color: rgba(196, 45, 67, 0.25);
  border-top-color: var(--lin-red);
}

.ai-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border: 1px solid var(--lin-red);
  border-radius: var(--radius-pill);
  background: var(--lin-white);
  color: var(--lin-red);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  cursor: pointer;
  transition: var(--transition);
}

.ai-button:hover { background: var(--lin-red); color: var(--lin-white); }
.ai-button:hover .spinner--small { border-top-color: var(--lin-white); }
.ai-button[disabled] { opacity: 0.7; cursor: default; pointer-events: none; }

.ai-loading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px;
  background: var(--lin-white);
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
}

.ai-loading span { font-size: var(--fs-14); line-height: var(--lh-22); color: var(--lin-muted); }

.ai-result {
  font-size: var(--fs-body);
  line-height: 28px;
  margin: 0;
  padding: 20px;
  background: var(--lin-white);
  border: 1px solid var(--lin-border-subtle);
  border-radius: var(--radius-card);
  text-wrap: pretty;
}

/* --- Layout utilities ----------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.stack-5 { gap: 5px; } .stack-8 { gap: 8px; } .stack-10 { gap: 10px; }
.stack-12 { gap: 12px; } .stack-13 { gap: 13px; } .stack-15 { gap: 15px; }
.stack-20 { gap: 20px; } .stack-25 { gap: 25px; } .stack-30 { gap: 30px; }
.stack-35 { gap: 35px; } .stack-40 { gap: 40px; }

.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.cluster-8 { gap: 8px; } .cluster-10 { gap: 10px; } .cluster-12 { gap: 12px; }
.cluster-13 { gap: 13px; } .cluster-15 { gap: 15px; } .cluster-20 { gap: 20px; }
.cluster-25 { gap: 25px; }

.split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.split--bottom { align-items: flex-end; }
.split--top { align-items: flex-start; }

.grid { display: grid; gap: 20px; }
.grid-190 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 25px; }
.grid-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.grid-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }

.columns { display: flex; gap: 25px; align-items: flex-start; flex-wrap: wrap; }
.columns__main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 25px; }
.columns__side { flex: 1 1 300px; min-width: 280px; display: flex; flex-direction: column; gap: 20px; }
.columns__side--sticky { position: sticky; top: 95px; }
.columns__results { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* --- Screen typography ---------------------------------------------------- */

.page-title { font-size: var(--fs-title); line-height: 44px; margin: 0; }
.page-title--long { line-height: 46px; text-wrap: pretty; }

.page-intro {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--lin-muted);
  margin: 0;
  max-width: 820px;
  text-wrap: pretty;
}

.section-title { font-size: var(--fs-28); line-height: var(--lh-36); margin: 0; }
.block-title { font-size: var(--fs-20); line-height: 28px; margin: 0; }

.field-label {
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
}

.field-value { font-size: var(--fs-body); line-height: var(--lh-24); color: var(--lin-ink); }

.body-text { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; text-wrap: pretty; }
.body-text--narrow { max-width: 820px; }

.muted { color: var(--lin-muted); }
.small { font-size: var(--fs-13); line-height: var(--lh-20); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--lin-muted);
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--lin-muted); }
.breadcrumb a:hover { color: var(--lin-red); }
.breadcrumb__current { color: var(--lin-ink); }

/* --- Narrow-screen adaptation (900px breakpoint, as in the mockup) -------- */

.only-narrow { display: none; }

@media (max-width: 899px) {
  .sidebar { display: none; }
  .only-narrow { display: initial; }
  .only-wide { display: none !important; }

  .app-main { padding: 25px 20px 90px; }

  /* The header fits on two rows when the button wraps: the anchor offset
     follows it. */
  .app-main [id] { scroll-margin-top: 150px; }

  /* Three columns do not fit on a phone: the bar would retain only a few dozen
     pixels between the menu and the button. The header therefore returns to a
     single wrapping row, where the bar takes the remaining space and "New
     realization" wraps when necessary. */
  .app-header {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 20px;
  }

  .header-search { flex: 1 1 260px; }
  .app-header__side--end { flex: 1 1 auto; }

  /* Facets are collapsed by default and expanded by the "Filters" button.
     Control is handled in CSS rather than JavaScript: the fragment returned by
     HTMX remains correct even before Alpine initializes. */
  .facets {
    display: none;
    max-width: none;
    min-width: 0;
    flex: 1 1 100%;
    position: static;
    /* Desktop confinement no longer applies here: the column is expanded above
       the results, and the page is what scrolls. */
    max-height: none;
    overflow-y: visible;
  }

  .facets.is-open { display: flex; }

  .columns__side--sticky { position: static; }

  .banner { padding: 25px; }
  .card--roomy { padding: 20px; }

  .page-title { font-size: var(--fs-28); line-height: var(--lh-36); }
  .section-title { font-size: var(--fs-24); line-height: var(--lh-32); }

  .toast-stack { right: 15px; bottom: 85px; left: 15px; max-width: none; }
}

@media (min-width: 900px) {
  .bottom-nav { display: none; }
}

@media print {
  .sidebar, .app-header, .app-footer, .bottom-nav, .toast-stack { display: none; }
  .app-main { max-width: none; padding: 0; }
  body { background: var(--lin-white); }
}