/* ============================================================
   PENSIA · FÆLLES DROPDOWN-UDSEENDE  (/dropdown.css)

   Problemet: knappen på en <select> har bløde kanter (border-radius),
   men selve popup-listen tegnes af browseren og er firkantet med
   skarpe hjørner. De to ting passer ikke sammen visuelt.

   Løsningen: "appearance: base-select" (Chromium 135+, dvs. Chrome og
   Edge) gør select-popup'en til et almindeligt element vi selv kan
   style, så listen får samme radius, skygge og farver som resten af
   fladen. Browsere uden støtte (Safari, Firefox) rammer aldrig
   @supports-blokken og falder umærkeligt tilbage til den native liste,
   præcis som før. Ingen JavaScript, ingen ændring i markup.

   Farverne styres af variabler, så en mørk flade kan overstyre dem
   lokalt (fx --dd-bag på :root).
   ============================================================ */

@supports (appearance: base-select) {

  /* !important fordi flere sider selv sætter "appearance: none" på
     select for at tegne deres egen pil. */
  select, ::picker(select) { appearance: base-select !important; }

  /* ---------- Selve knappen ---------- */
  /* Sidernes egen CSS (padding, ramme, radius, baggrund) gælder stadig;
     her sikrer vi kun at lang tekst afkortes pænt som før. */
  select::selectedcontent {
    display: block; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Samme tynde chevron som chip-dropdowns tegner selv, i stedet for
     browserens fyldte trekant. */
  select::picker-icon {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none" stroke="rgb(120,128,122)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"/></svg>');
    opacity: .8;
    transition: transform .18s ease, opacity .15s ease;
  }
  select:hover::picker-icon { opacity: .85; }
  select:open::picker-icon { transform: rotate(180deg); }

  /* Flader der selv tegner en pil (baggrundsbillede eller ::after på en
     wrapper): skjul browserens indbyggede, så der ikke står to pile. */
  .sel select::picker-icon,
  select.an-chip::picker-icon,
  select.fa-chip::picker-icon { display: none; }

  /* ---------- Popup-listen ---------- */
  ::picker(select) {
    box-sizing: border-box;
    border: 1px solid var(--dd-kant, #e6e0d1);
    border-radius: var(--dd-radius, 14px);
    background: var(--dd-bag, #ffffff);
    color: var(--dd-tekst, #1c2622);
    /* Listen arver ikke knappens skriftstørrelse (en chip-knap kan være
       meget lille), så den får sin egen læsbare og ensartede størrelse. */
    font-family: inherit; font-size: .9rem; font-weight: 500;
    padding: 6px;
    margin-block-start: 6px;
    box-shadow: var(--dd-skygge, 0 2px 6px rgba(28,38,34,.07), 0 22px 48px -18px rgba(28,38,34,.28));
    max-height: min(340px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Blød indtoning, samme timing som resten af app'en. */
    opacity: 0; translate: 0 -4px;
    transition: opacity .14s ease, translate .14s ease,
                overlay .14s allow-discrete, display .14s allow-discrete;
  }
  ::picker(select):popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    ::picker(select):popover-open { opacity: 0; translate: 0 -4px; }
  }

  /* ---------- Valgmulighederne ---------- */
  select option {
    display: flex; align-items: center; gap: 9px;
    min-height: 0;
    padding: 8px 11px;
    border-radius: var(--dd-radius-opt, 9px);
    color: inherit;
    line-height: 1.35;
    cursor: pointer;
    transition: background .12s ease;
  }
  select option:hover,
  select option:focus,
  select option:active { background: var(--dd-hover, #f3efe4); }
  select option:checked { background: var(--dd-valgt, rgba(45,95,74,.10)); font-weight: 600; }
  select option:disabled { opacity: .45; cursor: default; background: none; }

  /* Fluebenet ved det valgte punkt skubbes ud til højre. */
  select option::checkmark {
    order: 1; margin-inline-start: auto; padding-inline-start: 10px;
    color: var(--dd-maerke, #2d5f4a);
  }

  /* Gruppeoverskrifter (<optgroup label="…">). */
  select optgroup {
    padding: 8px 11px 3px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--dd-dim, #5d6660);
  }
  select optgroup option { font-weight: 500; text-transform: none; letter-spacing: 0; }

  select:disabled::picker-icon { opacity: .3; }

  @media (prefers-reduced-motion: reduce) {
    ::picker(select), select option, select::picker-icon { transition: none; }
    ::picker(select) { translate: none; }
  }
}