/**
 * Panel Asisa Vida — the parts of the design that inline styles cannot carry.
 *
 * The screens keep their layout in inline styles, exactly as the design writes
 * them, so a value can be compared against the design side by side. What has
 * to live here is everything a `style` attribute has no syntax for: hover
 * states, focus rings, and the placeholder colour.
 *
 * Each rule below names the element it belongs to and repeats the design's own
 * hover declaration verbatim. Nothing here introduces a colour of its own.
 */

/* ---- Reset ------------------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
}

* {
  box-sizing: border-box;
}

/* `hidden` has to beat the inline `display` the screens set on the elements it
   is toggled on -- an overlay, a sentinel, a spinner. Without this the UA's own
   `[hidden] { display: none }` loses to the style attribute and every one of
   them renders open. The `<noscript>` rule in base.html is more specific still,
   so a collapsed panel with no JavaScript stays open. */
[hidden] {
  display: none !important;
}

a {
  color: var(--brand-accent);
  text-decoration: none;
}

a:hover {
  color: var(--brand-accent-hover);
  text-decoration: underline;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-grey);
  border-radius: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- Sidebar ----------------------------------------------------------- */

/* Nav items are links, so the global anchor hover has to be undone before the
   design's own background wash is applied. */
.nav-item,
.nav-item:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ---- Filter bar -------------------------------------------------------- */

.filter-button:hover {
  border-color: var(--brand-accent-border-soft);
}

.menu-option:hover {
  background: var(--surface-subtle);
}

.menu-option,
.menu-option:hover {
  color: var(--text-body);
  text-decoration: none;
}

/* The search field inherits the card's font; only the placeholder needs a
   colour of its own. */
.search-input::placeholder {
  color: var(--text-muted);
}

/* ---- Tables and lists -------------------------------------------------- */

.table-row:hover {
  background: var(--surface-subtle) !important;
}

.table-row,
.table-row:hover {
  color: var(--text-body);
  text-decoration: none;
}

/* The per-subcase table hovers a shade darker than the conversations table --
   its rows open a drawer rather than a page. */
.subcase-row:hover {
  background: var(--brand-grey-light);
}

.subcase-row,
.subcase-row:hover {
  color: var(--text-body);
  text-decoration: none;
}

.rail-item:hover {
  background: var(--surface-subtle);
}

.rail-item,
.rail-item:hover {
  text-decoration: none;
}

/* The case being read. This is a class rather than inline styles because
   stepping to the next case moves the marker without re-rendering the rail:
   the swap toggles `is-current` on two rows and nothing else changes. */
.rail-item.is-current {
  border-left-color: var(--brand-accent);
  background: var(--surface-subtle);
}

.rail-item.is-current [data-rail-reference],
.rail-item.is-current [data-rail-label] {
  color: var(--brand-accent);
}

.rail-item.is-current [data-rail-label] {
  font-weight: 600;
}

/* ---- Attachment chips and the document viewer -------------------------- */

/* A chip opens the file, so it is a button; these are the declarations that
   undo the browser's own button styling the inline styles cannot reach. */
.attachment-chip:hover {
  border-color: var(--brand-accent-border-soft);
  color: var(--text-body);
}

/* The viewer's ← / → steppers. Unlike the chrome inside the card these sit on
   the backdrop, so they carry their own surface rather than a border alone. */
.viewer-step {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.viewer-step:hover:not(:disabled) {
  border-color: var(--brand-accent-border-soft);
  color: var(--brand-accent);
}

/* At either end of the thread the arrow stays in place: taking it away would
   shift the document sideways on the last step of every walk. */
.viewer-step:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- Detail view ------------------------------------------------------- */

.icon-button:hover {
  border-color: var(--brand-accent-border-soft);
  color: var(--brand-accent);
}

.step-button:hover {
  background: var(--tint-accent);
}

.step-button,
.step-button:hover {
  text-decoration: none;
}

.collapse-header:hover {
  background: var(--surface-subtle);
}

.collapse-header,
.collapse-header:hover {
  color: inherit;
  text-decoration: none;
}

/* ---- Focus ------------------------------------------------------------- */

/* The design focuses inputs with the accent border plus a soft indigo ring. */
input:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-accent-ring);
}

a:focus-visible,
[role="button"]:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* ---- Range picker and tabs --------------------------------------------- */

/* The unselected presets sit on the grey track with no fill of their own, so
   hover has to supply the affordance. The selected one already has one. */
.range-option:hover {
  color: var(--text-strong);
}

.screen-tab:hover {
  color: var(--text-strong);
}

/* ---- Loading -----------------------------------------------------------

   A tab switch costs one round trip to a database in another region, so the
   content is swapped in place behind a skeleton rather than through a page
   load that would blank the shell. `--swap-busy` is set on the chrome while
   the fetch is in flight: the strip stays readable but stops inviting a
   second click. */

[data-swap-busy] {
  opacity: 0.6;
  pointer-events: none;
}

.skeleton-line {
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--brand-grey-light) 25%,
    rgba(208, 212, 240, 0.65) 37%,
    var(--brand-grey-light) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line {
    animation: none;
    background: var(--brand-grey-light);
  }
}

/* Appending the next page is not the same event as replacing the table, so it
   does not get the same placeholder: a skeleton row promises content in the
   shape of a row, and what is loading here is the tail of a list the reader is
   already reading. A ring at the foot says "still coming" without pretending
   to be a row that never arrives. */

.spinner {
  display: inline-block;
  /* The sentinel is a flex row, which would otherwise shrink the ring into an
     ellipse to fit its label. */
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand-grey-light);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: spinner-turn 0.7s linear infinite;
}

@keyframes spinner-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}