/* ==========================================================================
   NERVE Finance — MODALVINDUET. Fladens ENESTE sted for dialogens udseende.

   Christian, 25-08-2026, med skærmbillede af importruden:

     »kan ikke trykke importer. Boxen med luk, prøv osv står også mærkeligt.
      Denne box passer med tema på siden mens felterne hvor man kan vælge fil,
      eller afvis import ser ud til at have andet layout. Dette har jeg også
      set gøre sig gældende på andre sider«

   Understreg-præfikset følger husets `_rail.html`, `_tal.js` og `_selskab.js`:
   en fil der ikke er en side.
   ⛔ Den ligger med vilje IKKE i `ui/design/` — den mappe er HASH-LÅST af
      ADR-0005 og rettes aldrig. Reglerne nedenfor er derfor KOPIERET derfra,
      ikke flyttet. Prisen for låsen er en dublet; se § »Hvorfor en kopi«.

   ## ⛔ ÉN FEJL, TO SYNLIGE FØLGER — og de så ud som to problemer

   `modal()` skrev knapraden som `<div class="pop"><div class="rk"></div></div>`.
   Men `.pop` er husets POPOVER (`nerve-finance-apple.css:397`):

       .pop { position:fixed; z-index:80; width:280px; egen baggrund; egen skygge }

   **Følge 1 — knapraden:** som holder i en dialog blev rækken en fastlåst
   280 px kasse med sin egen skygge, løsrevet fra vinduet og forskudt. Det er
   den »mærkelige boks« på skærmbilledet.

   **Følge 2 — felterne:** to linjer længere nede (`:403`) står husets ENESTE
   feltstyling, og den er bundet til `.pop`:

       .pop select, .pop input[type=text], … { width:100%; height:28px; … }

   Der findes **ingen `.modal select`-regel**. Felterne stod altså i `.modal`
   og fik browserens native udseende — den grå »Vælg fil«-knap og
   systempilene på rullelisterne.

   ⭐ **`.pop` var sat præcis det forkerte sted: knapraden fik det udseende
   felterne skulle have haft, og felterne fik intet.** Det forklarer begge
   halvdele af skærmbilledet på én gang, og det er derfor rettelsen er ét sted
   og ikke to.

   ## Hvorfor en kopi og ikke en rettelse i grundlaget

   Den rene kur ville være at ændre `:403` til `.pop select, .modal select, …`
   i `nerve-finance-apple.css`. Det er én linje. Men filen er hash-låst af
   ADR-0005, og låsen er ikke en formalitet: den er husets værn mod at
   designsproget driver. Prisen er at reglerne står to steder.

   ⚠ **Derfor er værdierne herunder ORDRET dem fra `:403-406`.** Ændrer nogen
     grundlagets felthøjde, skal denne fil følge med — og
     `tests/ui/test_modalvinduet.py` måler at de to stadig er ens, så
     driften bliver synlig frem for tavs.

   ## Sådan indlæses den

       <link rel="stylesheet" href="../design/nerve-finance-apple.css">
       <link rel="stylesheet" href="_modal.css">
       <link rel="stylesheet" href="minside.css">

   Efter grundlaget (den skal kunne bygge på dets variabler), før sidens egen
   (så en flade stadig kan afvige bevidst).
   ========================================================================== */

/* ── Knapraden ─────────────────────────────────────────────────────────────
   Højrestillet, aldrig ombrudt, altid synlig. Grundlagets `.modal .rk` giver
   allerede flex og gap; det her er holderen omkring den — med en skillelinje,
   så knapperne ikke flyder sammen med indholdet når ruden er lav.
   ⛔ Formen er den samme som `postering.css:214`, som fandt fejlen først
      (24-08-2026) og rettede sin egen flade. Den er flyttet hertil så de
      øvrige ni ikke skal bære hver sin kopi. */
.modal .modalknapper {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.modal .modalknapper .btn,
.modal .modalknapper .smalbtn { white-space: nowrap; }

/* En hjælpetekst i venstre side af knapraden — fx hvorfor en knap er slået
   fra. `margin-right:auto` skubber knapperne til højre og lader teksten stå. */
.modal .modalknapper .venstre {
  margin-right: auto;
  font-size: 11.5px;
  color: var(--txt-3);
  text-align: left;
  max-width: 58%;
}

/* Kroppen ruller, knapraden gør ikke. Uden `min-height:0` kan en flex-boks
   ikke skrumpe under sit indhold, og lange dialoger skubber knapperne ud. */
.modal .modalkrop { min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ⛔ Uden DENNE regel er reglen ovenfor helt virkningsløs, og det er ikke til
   at se på den. `overflow-y:auto` ruller kun når kassen har en højde at rulle
   inden for — og grundlagets `.modal` (`:492`) har hverken `max-height` eller
   en flex-retning, så kroppen vokser bare videre og skubber knapraden ud under
   skærmkanten. Det var netop dét `postering.css:206-210` måtte skrive selv da
   den rettede sin egen flade; her står den ét sted for alle ni.
   ⚠ Værdien er postering-fladens: `calc(100vh - 40px)` = grundlagets 20 px
     luft i top og bund. Bredden røres IKKE — den er grundlagets 580 px/92 %,
     og en flade der vil have en bredere rude, sætter den fortsat selv. */
.modal { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }

/* ── Felterne ──────────────────────────────────────────────────────────────
   ⛔ ORDRET fra `nerve-finance-apple.css:403-406`. Ret ikke værdierne her
      alene — se filhovedet. */
.modal select,
.modal input[type=text],
.modal input[type=number],
.modal input[type=date],
.modal input[type=search] {
  width: 100%;
  height: 28px;
  padding: 0 9px;
  border: none;
  border-radius: 8px;
  background: var(--graa-flade);
  color: var(--txt);
  font: inherit;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.modal select:focus,
.modal input:focus { outline: 2px solid var(--acc); outline-offset: -1px; }

/* ⚠ `input[type=file]` står IKKE i grundlagets liste — den fandtes ikke da
   `:403` blev skrevet. Browserens egen knap kan ikke stiles direkte, men
   feltet omkring den kan, så den ikke stikker ud som et fremmedlegeme.
   ::file-selector-button er standarden (Chrome/Safari/Firefox). */
.modal input[type=file] {
  width: 100%;
  padding: 5px 9px;
  border: none;
  border-radius: 8px;
  background: var(--graa-flade);
  color: var(--txt);
  font: inherit;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.modal input[type=file]::file-selector-button {
  margin-right: 10px;
  height: 22px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: var(--chrome);
  color: var(--txt);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.modal input[type=file]::file-selector-button:hover { background: var(--graa-flade-2, var(--chrome)); }

/* Etiket over et felt. Uden den klæber teksten til feltet ovenfor. */
.modal label { display: block; font-size: 12px; color: var(--txt-2); margin: 2px 0 3px; }

/* ── En slået fra knap skal sige HVORFOR ───────────────────────────────────
   Christian, samme skærmbillede: *»kan ikke trykke importer«*.
   Knappen VAR slået fra med vilje — importen kræver at tørløbet er kørt, så
   man ser hvad der sker før der skrives. Men en knap der ser død ud uden at
   sige hvorfor, er ikke et værn; det er en blindgyde.
   ⛔ `cursor:not-allowed` og en `title` er ikke nok alene (UI-UX-STANDARD
      § 10: farven står aldrig alene) — fladen SKAL desuden skrive grunden i
      `.modalknapper .venstre`. Denne regel gør blot tilstanden synlig. */
.modal .modalknapper .btn:disabled,
.modal .modalknapper .smalbtn:disabled {
  opacity: .45;
  cursor: not-allowed;
}