/* public/portal/projekter.css — Projekter-appen (projekter.js): en tabel man kan sortere (klik på en
   overskrift) og filtrere (vælgere og søgning over tabellen). Filtrenes udseende kommer fra
   ../gt-ui/app-side.css. Ingen tal-kort; kun farver fra DESIGN.md. */
.pj-hoved { margin-bottom: 20px; }
.pj-hoved h1 { font-family: Georgia, serif; font-weight: 600; font-size: 32px; line-height: 1.1; }
.pj-meta { color: var(--gt-tekst2); font-size: 13px; margin-top: 4px; }
.pj-kun-mobil { display: none !important; }
#pj .app-filtre .gt-link { align-self: center; }
#pj .app-u { align-self: center; font-size: 13px; color: var(--gt-tekst2); }
#pj .gt-felt-lille select, #pj .gt-felt-lille input { box-sizing: border-box; height: 40px; padding-block: 0; }
#pj .app-soeg input { width: 260px; }

.pj-skelet { height: 52px; margin: 0 0 6px; }
.pj-tabel { width: 100%; padding: 0; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14px; }
.pj-tabel { table-layout: fixed; }
.pj-tabel thead th:first-child { width: 38%; }
.pj-tabel thead th { background: var(--gt-flade2); border-bottom: 1px solid var(--gt-kant); text-align: left; padding: 0; }
.pj-sort { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 16px; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gt-tekst2); }
.pj-sort:hover { color: var(--gt-tekst); }
.pj-sort:focus-visible { outline: 2px solid var(--gt-accent); outline-offset: -2px; }
.pj-pil { font-size: 13px; letter-spacing: 0; opacity: .45; }
th[aria-sort] .pj-sort { color: var(--gt-tekst); }
th[aria-sort] .pj-pil { color: var(--gt-accent); opacity: 1; }
.pj-tabel td { padding: 10px 16px; border-top: 1px solid color-mix(in srgb, var(--gt-kant) 55%, transparent); vertical-align: middle; }
.pj-tabel tbody tr:first-child td { border-top: none; }
.pj-tabel tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--gt-flade2) 45%, var(--gt-flade)); }
.pj-tabel tbody tr:hover td { background: var(--gt-flade2); }
.pj-c-navn { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pj-c-navn > div { min-width: 0; }
.pj-maerke { flex: none; min-width: 40px; height: 32px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: var(--gt-accent); background: var(--gt-accent-svag); border: 1px solid rgba(232, 89, 12, .3); }
.pj-navn { display: block; font-weight: 600; overflow-wrap: anywhere; }
.pj-mobil { display: none; }
.pj-mangler { color: var(--gt-tekst2); }

@media (max-width: 760px) {
  .pj-hoved h1 { font-size: 28px; }
  .pj-kun-mobil { display: flex !important; }
  #pj .app-filtre label:not(.app-soeg) { flex: 1 1 calc(50% - 6px); min-width: 0; }
  #pj .app-soeg input { width: 100%; }
  .pj-tabel thead { display: none; }
  .pj-tabel tbody td.pj-c { display: none; }
  .pj-tabel, .pj-tabel tbody, .pj-tabel tr, .pj-c-navn { display: block; }
  .pj-c-navn { display: flex; padding: 12px 16px; }
  .pj-mobil { display: block; font-size: 12.5px; color: var(--gt-tekst2); margin-top: 2px; }
}