/* ==========================================================================
   RECORDS — taking a document or a citizen out of sight, and the citizens' list away
   --------------------------------------------------------------------------
   Prefix .rec-. Design TOKENS only (no hex, no px colours) and LOGICAL properties
   only (never left/right), so both themes, the high-contrast fallback and
   right-to-left come for free. Loaded after app.css and apple.css (the module list
   is in layouts/app.blade.php), so it may rely on every token they define.

   Contents
     1  The step before a deletion: a panel that says what happens and asks why
     2  Where a refusal points: links to what stands in the way
     3  The export menu
   ========================================================================== */


/* ==========================================================================
   1 · THE STEP BEFORE A DELETION
   Opens under the row it is about, or under the page header for the citizen, where
   the eye already is — not a box in the middle of the page. It is the same shape as the
   application page's own inline forms (.apl-panel), kept here so the citizen's file,
   which does not load that area's classes by name, looks the same.
   ========================================================================== */

.rec-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Nothing in a page-level stack needs the extra gap above it: the stack already spaces it. */
.stack > .rec-panel {
  margin-block-start: 0;
}

.rec-panel--danger {
  border-color: var(--color-danger-border);
  border-inline-start: 4px solid var(--color-danger);
}

.rec-panel__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.rec-panel__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}


/* ==========================================================================
   2 · WHERE A REFUSAL POINTS
   A file with a history cannot be deleted; each kind of record that says so is a link to where it
   can be read — to those who may read it. A row of large targets that wraps on a phone.
   ========================================================================== */

.rec-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec-links__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap-target-min);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.rec-links__link:hover {
  color: var(--color-link-hover);
  background: var(--color-surface-hover);
  text-decoration: none;
}


/* ==========================================================================
   3 · THE MENUS
   The export menu and the file's "more" menu are plain dropdowns (.dropdown); what they add is a
   width that fits their words in either language, and room to wrap on a phone.
   ========================================================================== */

.rec-menu {
  min-inline-size: 15rem;
  max-inline-size: min(20rem, calc(100vw - 2 * var(--space-4)));
}

.rec-menu .dropdown__meta {
  margin: 0;
  max-inline-size: 18rem;
}

/* On a phone the page header's buttons wrap into rows of their own, so the button that opens a menu can be at either
   edge — and a menu hung from its button's edge runs off the screen when the button is at the other one. The menu is
   hung from the header instead and is as wide as it: a sheet under the row of buttons, whatever the language. */
@media (max-width: 599px) {
  .page-header:has(.rec-dropdown) {
    position: relative;
  }

  .rec-dropdown {
    position: static;
  }

  .rec-dropdown .rec-menu {
    inset-inline: 0;
    inline-size: auto;
    min-inline-size: 0;
    max-inline-size: none;
  }

  .rec-menu .dropdown__meta {
    max-inline-size: none;
  }
}