/* ==========================================================================
   PendlerLog — "Perronur" til selve appen (alt efter login, auth-sider,
   konto, admin). Bygger oven på pendlerlog.css (farver, skrift, knapper) og
   omskinner Bootstrap, så formularer, grid og tabeller beholder deres
   opførsel men får den fælles visuelle identitet.
   Ingen inline styles i skabelonerne: CSP tillader kun styles fra 'self'.
   ========================================================================== */

.pl-app {
  --bs-body-bg: var(--pl-havre);
  --bs-body-color: var(--pl-kul);
  --bs-body-font-family: var(--pl-brod);
  --bs-secondary-color: var(--pl-tekst-3);
  --bs-border-color: #CFC2A9;
  --bs-link-color-rgb: 154, 65, 40;
  --bs-link-hover-color-rgb: 31, 78, 84;
  --bs-emphasis-color: var(--pl-kul);
  --bs-tertiary-bg: var(--pl-papir);
  min-height: 100vh;
  min-width: 1160px;   /* låst desktop-layout: smallere vindue scroller vandret i stedet for at omlejre */
  display: flex;
  flex-direction: column;
  background: var(--pl-havre);
}
.pl-app :focus-visible { outline: 3px solid var(--pl-signal); outline-offset: 2px; }
.pl-app .text-muted { color: var(--pl-tekst-3) !important; }
.pl-app .text-danger { color: var(--pl-tegl) !important; }
.pl-app code { color: var(--pl-tegl); }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Topbar ---------- */
.pl-appbar { background: var(--pl-tegl); color: var(--pl-havre); padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.pl-appbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.pl-app .pl-appbar__brand, .pl-app .pl-appbar__brand:hover { color: var(--pl-havre); }
.pl-appbar__brand img { width: 44px; height: 44px; display: block; }
.pl-appbar__name { font-family: var(--pl-skilt); font-weight: 800; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; }
.pl-appbar__links { display: flex; align-items: center; gap: 18px; }
.pl-app .pl-appbar__link { color: var(--pl-havre); font-weight: 500; font-size: 15px; }
.pl-app .pl-appbar__link:hover { color: #fff; }
.pl-appbar__links form { margin: 0; }
.pl-appbar__btn { background: transparent; color: var(--pl-havre); border: 2px solid var(--pl-havre); border-radius: 6px; padding: 7px 14px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.pl-app .pl-appbar__btn:hover { background: var(--pl-havre); color: var(--pl-tegl); }

/* Mobilmenu: <details>, så den virker uden JavaScript */
.pl-menu { display: none; }
.pl-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 2px solid var(--pl-havre); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pl-menu summary::-webkit-details-marker { display: none; }
.pl-menu summary span, .pl-menu summary span::before, .pl-menu summary span::after { display: block; width: 18px; height: 2px; background: var(--pl-havre); position: relative; }
.pl-menu summary span::before, .pl-menu summary span::after { content: ""; position: absolute; left: 0; }
.pl-menu summary span::before { top: -6px; }
.pl-menu summary span::after { top: 6px; }
.pl-menu[open] summary { background: var(--pl-havre); }
.pl-menu[open] summary span, .pl-menu[open] summary span::before, .pl-menu[open] summary span::after { background: var(--pl-tegl); }
.pl-menu__panel { position: absolute; right: 12px; top: calc(100% + 8px); z-index: 50; min-width: 240px; background: var(--pl-papir); border: 2px solid var(--pl-kul); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; box-shadow: 0 18px 36px -18px rgba(38,33,29,.6); }
.pl-app .pl-menu__panel a, .pl-menu__panel button { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 6px; color: var(--pl-kul); font-weight: 600; text-decoration: none; background: none; border: 0; font-size: 16px; }
.pl-app .pl-menu__panel a:hover, .pl-menu__panel button:hover { background: var(--pl-havre); color: var(--pl-kul); }
.pl-menu__panel form { margin: 0; border-top: 2px solid var(--pl-havre); margin-top: 4px; padding-top: 4px; }
.pl-menu__who { padding: 8px 14px 4px; font-size: 13px; color: var(--pl-tekst-3); word-break: break-all; }

/* ---------- Indhold ---------- */
/* Fast bredde på desktop (ingen flydende mellemtrin); mobil under 760px har sit eget layout nederst. */
.pl-main { flex: 1 0 auto; width: 1120px; margin: 0 auto; padding: 32px 20px 56px; }
.pl-main--narrow { width: 680px; }
.pl-main--text { width: 800px; }
.pl-page-title { font-family: var(--pl-skilt); font-weight: 800; font-size: 44px; line-height: 1; text-transform: uppercase; margin: 0 0 24px; }
.pl-page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pl-page-head .pl-page-title { margin: 0; }
.pl-sign { font-family: var(--pl-skilt); text-transform: uppercase; letter-spacing: .04em; }

.pl-appfoot { background: var(--pl-kul); color: var(--pl-havre); padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; font-size: 14px; }
.pl-appfoot__brand { display: flex; align-items: center; gap: 10px; font-family: var(--pl-skilt); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.pl-appfoot__brand img { width: 34px; height: 34px; }
.pl-appfoot__links { display: flex; gap: 20px; flex-wrap: wrap; }
.pl-app .pl-appfoot a { color: var(--pl-havre); }

/* ---------- Kort ---------- */
.pl-app .card { --bs-card-bg: var(--pl-papir); --bs-card-border-width: 2px; --bs-card-border-color: var(--pl-kul); --bs-card-border-radius: var(--pl-radius); --bs-card-inner-border-radius: 7px; box-shadow: none !important; }
.pl-app .card-header { background: var(--pl-kul); color: var(--pl-havre); border-bottom: 0; padding: 12px 18px; font-family: var(--pl-skilt); font-weight: 700 !important; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.pl-app .card-title, .pl-card-title { font-family: var(--pl-skilt); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 14px; }
.pl-app .card.border-danger { --bs-card-border-color: var(--pl-tegl); }
.pl-app .card-body { padding: 22px; }

/* ---------- Formularer ---------- */
.pl-app .form-label { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.pl-app .form-control, .pl-app .form-select { border: 2px solid var(--pl-kul); border-radius: 6px; background-color: #fff; color: var(--pl-kul); min-height: 46px; padding: 9px 14px; font-size: 16px; }
.pl-app .form-control::placeholder { color: #8C8278; }
.pl-app .form-control:focus, .pl-app .form-select:focus { border-color: var(--pl-emalje); box-shadow: 0 0 0 3px rgba(224,166,58,.55); }
.pl-app .form-check-input { border: 2px solid var(--pl-kul); width: 1.15em; height: 1.15em; }
.pl-app .form-check-input:checked { background-color: var(--pl-emalje); border-color: var(--pl-emalje); }
.pl-app .form-check-input:focus { box-shadow: 0 0 0 3px rgba(224,166,58,.55); border-color: var(--pl-emalje); }
.pl-app .form-text { color: var(--pl-tekst-3); }
.pl-app textarea.font-monospace { font-size: 14px; }

/* ---------- Knapper (Bootstrap-klasser → Perronur) ---------- */
.pl-app .btn { --bs-btn-border-width: 2px; --bs-btn-border-radius: 6px; --bs-btn-font-weight: 700; font-family: var(--pl-skilt); text-transform: uppercase; letter-spacing: .06em; font-size: 18px; padding: 9px 20px; }
.pl-app .btn-sm { font-size: 15px; padding: 5px 12px; }
.pl-app .btn-lg { font-size: 22px; padding: 12px 28px; }
.pl-app .btn-primary { --bs-btn-bg: var(--pl-emalje); --bs-btn-border-color: var(--pl-emalje); --bs-btn-hover-bg: #163a3f; --bs-btn-hover-border-color: #163a3f; --bs-btn-active-bg: #163a3f; --bs-btn-active-border-color: #163a3f; --bs-btn-disabled-bg: var(--pl-emalje); --bs-btn-disabled-border-color: var(--pl-emalje); }
.pl-app .btn-outline-primary, .pl-app .btn-outline-secondary { --bs-btn-color: var(--pl-kul); --bs-btn-border-color: var(--pl-kul); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--pl-kul); --bs-btn-hover-color: var(--pl-havre); --bs-btn-hover-border-color: var(--pl-kul); --bs-btn-active-bg: var(--pl-kul); --bs-btn-active-color: var(--pl-havre); --bs-btn-active-border-color: var(--pl-kul); }
.pl-app .btn-secondary { --bs-btn-bg: var(--pl-papir); --bs-btn-color: var(--pl-kul); --bs-btn-border-color: var(--pl-kul); --bs-btn-hover-bg: var(--pl-kul); --bs-btn-hover-color: var(--pl-havre); --bs-btn-hover-border-color: var(--pl-kul); --bs-btn-active-bg: var(--pl-kul); --bs-btn-active-color: var(--pl-havre); }
.pl-app .btn-danger { --bs-btn-bg: var(--pl-tegl); --bs-btn-border-color: var(--pl-tegl); --bs-btn-hover-bg: var(--pl-meget); --bs-btn-hover-border-color: var(--pl-meget); --bs-btn-active-bg: var(--pl-meget); }
.pl-app .btn-outline-danger { --bs-btn-color: var(--pl-tegl); --bs-btn-border-color: var(--pl-tegl); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--pl-tegl); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--pl-tegl); --bs-btn-active-bg: var(--pl-tegl); }
.pl-app .btn-link { --bs-btn-color: var(--pl-tegl); --bs-btn-hover-color: var(--pl-emalje); font-family: var(--pl-brod); text-transform: none; letter-spacing: 0; font-weight: 600; }
.pl-app .btn-signal { --bs-btn-bg: var(--pl-signal); --bs-btn-color: var(--pl-kul); --bs-btn-border-color: var(--pl-signal); --bs-btn-hover-bg: #c98f26; --bs-btn-hover-color: var(--pl-kul); --bs-btn-hover-border-color: #c98f26; }

/* ---------- Beskeder ---------- */
.pl-app .alert { border: 2px solid var(--pl-kul); border-radius: 8px; color: var(--pl-kul); background: var(--pl-papir); border-left-width: 8px; }
.pl-app .alert-success { border-color: var(--pl-til-tiden); background: #E4EFE9; }
.pl-app .alert-danger { border-color: var(--pl-tegl); background: #F6E3DC; }
.pl-app .alert-warning { border-color: var(--pl-signal); background: #FAEFD7; }
.pl-app .alert-info { border-color: var(--pl-emalje); background: #E1ECEC; }

/* ---------- Tabeller ---------- */
.pl-app .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(238,228,209,.55); --bs-table-hover-bg: rgba(224,166,58,.14); --bs-table-border-color: #DDD1BB; margin-bottom: 0; font-size: 15px; }
.pl-app .table > thead th, .pl-thead th { background: var(--pl-kul) !important; color: var(--pl-havre) !important; font-family: var(--pl-skilt); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; border-color: var(--pl-kul); white-space: nowrap; padding-top: 9px; padding-bottom: 9px; }
.pl-app .table > tbody > tr:nth-of-type(even) > * { background: rgba(238,228,209,.55); }
.pl-app .table-bordered { border: 2px solid var(--pl-kul); }
.pl-app .table td { white-space: nowrap; }   /* tabellen scroller vandret i stedet for at knække datoer */
.pl-app .table .table-danger > * { background: #F6E3DC !important; }
.pl-app .table .table-secondary > * { background: #E7E1D6 !important; color: var(--pl-tekst-3); }
.pl-table-wrap { border: 2px solid var(--pl-kul); border-radius: var(--pl-radius); overflow: hidden; background: var(--pl-papir); }
.pl-table-scroll { max-height: 340px; overflow-y: auto; }
.pl-table-scroll thead th { position: sticky; top: 0; z-index: 1; }
/* Faste kolonnebredder, så kolonnerne ikke hopper med indholdet. "Mod" tager resten og afkortes. */
.pl-app .pl-table--fixed { table-layout: fixed; width: 100%; min-width: 900px; }
.pl-app .pl-table--fixed td { overflow: hidden; text-overflow: ellipsis; }
.pl-col-check { width: 44px; }
.pl-col-date { width: 112px; }
.pl-col-time { width: 92px; }
.pl-col-actual { width: 104px; }
.pl-col-train { width: 118px; }
.pl-col-delay { width: 116px; }
.pl-col-status { width: 196px; }
.pl-leg { padding-left: 1.5rem !important; }

/* ---------- Mærkater (status + forsinkelse) ---------- */
.pl-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; border: 1.5px solid transparent; }
.pl-badge--ok { background: var(--pl-til-tiden); color: #fff; }
.pl-badge--late { background: var(--pl-signal); color: var(--pl-kul); }
.pl-badge--bad { background: var(--pl-forsinket); color: #fff; }
.pl-badge--worse { background: var(--pl-meget); color: #fff; }
.pl-badge--cancel { background: var(--pl-aflyst); color: #fff; }
.pl-badge--wait { background: #D9CFBD; color: var(--pl-kul); }
.pl-badge--none { background: transparent; color: var(--pl-tekst-3); border-color: #B7AA93; font-weight: 600; }
.pl-badge--dark { background: var(--pl-kul); color: var(--pl-havre); }
.pl-badge--info { background: var(--pl-signal); color: var(--pl-kul); }
.pl-badge--admin { background: var(--pl-tegl); color: #fff; }
.pl-cancel-text { color: var(--pl-tegl); font-weight: 600; }

/* ---------- Rapportsiden ---------- */
.pl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }
.pl-grid-2 > .card { margin: 0; }
.pl-add-route { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.pl-add-route .btn { min-height: 46px; min-width: 52px; font-size: 24px; padding: 0 16px; }
.pl-ac { position: relative; }
.pl-ac-list { position: absolute; z-index: 1000; width: 100%; margin: 0; padding: 0; background: #fff; border: 2px solid var(--pl-kul); border-top: 0; border-radius: 0 0 6px 6px; max-height: 220px; overflow-y: auto; display: none; }
.pl-ac-list.is-open { display: block; }
.pl-ac-list li { padding: 9px 14px; cursor: pointer; list-style: none; }
.pl-ac-list li:hover { background: var(--pl-havre); }

.pl-routes { list-style: none; margin: 0; padding: 0; }
.pl-route { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 2px solid var(--pl-havre); }
.pl-route:last-child { border-bottom: 0; }
.pl-route.is-active { background: var(--pl-havre); box-shadow: inset 6px 0 0 var(--pl-tegl); }
.pl-route__name { flex: 1 1 auto; font-family: var(--pl-skilt); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.1; text-decoration: none; }
.pl-app a.pl-route__name { color: var(--pl-kul); }
.pl-app a.pl-route__name:hover { color: var(--pl-tegl); }
.pl-route__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pl-route form { margin: 0; }

.pl-routehead { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.pl-routehead__name { background: var(--pl-emalje); color: var(--pl-havre); border-radius: 8px; padding: 10px 20px; margin: 0; font-family: var(--pl-skilt); font-weight: 800; font-size: 34px; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
.pl-routehead::after { content: ""; flex: 1 1 auto; border-top: 4px dashed var(--pl-kul); min-width: 24px; }

.pl-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pl-filters__wide { grid-column: span 2; }
.pl-filters__days { grid-column: span 2; }
.pl-filters__row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: end; }
.pl-filters__row--nodir { grid-template-columns: auto auto; justify-content: start; }
.pl-days { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-day { position: relative; }
.pl-day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pl-day label { display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 8px; border: 2px solid var(--pl-kul); border-radius: 6px; background: #fff; font-family: var(--pl-skilt); font-weight: 700; font-size: 17px; text-transform: uppercase; cursor: pointer; user-select: none; }
.pl-day input:checked + label { background: var(--pl-kul); color: var(--pl-havre); }
.pl-day input:focus-visible + label { outline: 3px solid var(--pl-signal); outline-offset: 2px; }
.pl-filter-btn { min-height: 46px; }

.pl-report-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 14px; }
.pl-app .pl-report-actions__name { width: 260px; }

/* Rapportens filterlinje og opsummering — på skærmen og i PDF'en */
.pl-report-meta { display: flex; flex-wrap: wrap; row-gap: 2px; margin: -10px 0 18px; color: var(--pl-tekst-2); font-size: 15px; }
.pl-report-meta span + span::before { content: "·"; margin: 0 8px; color: var(--pl-tekst-3); }
.pl-report-summary { background: #fff; border-left: 6px solid var(--pl-signal); border-radius: 8px; padding: 12px 18px; margin-bottom: 20px; color: var(--pl-tekst-2); line-height: 1.5; }
.pl-report-summary__label { font-family: var(--pl-skilt); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .05em; color: var(--pl-kul); }

/* Gemte rapporter (/rapporter, /rapporter/<id>, konto) */
.pl-saved-actions { display: flex; gap: 8px; align-items: center; }
.pl-saved-actions form, .pl-reports__actions form { margin: 0; }
.pl-saved-name { margin: -12px 0 14px; color: var(--pl-tekst-3); }
.pl-reports td { vertical-align: middle; }
.pl-reports__actions { display: flex; gap: 6px; justify-content: flex-end; }
.pl-konto-reports { list-style: none; padding: 0; margin: 0 0 14px; }
.pl-konto-reports li { padding: 6px 0; border-bottom: 1px solid #E3D8C3; }
.pl-konto-reports li:last-child { border-bottom: 0; }

/* Brevhoved — kun ved udskrift (se @media print) */
.pl-print-only { display: none; }

.pl-kpis-app { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.pl-tile { background: var(--pl-kul); color: var(--pl-havre); border-radius: 8px; border-top: 8px solid var(--pl-signal); padding: 14px 16px; }
.pl-tile--ok { border-top-color: var(--pl-til-tiden); }
.pl-tile--bad { border-top-color: var(--pl-tegl); }
.pl-tile__label { font-size: 14px; }
.pl-tile__value { font-family: var(--pl-skilt); font-weight: 800; font-size: 48px; line-height: 1.05; white-space: nowrap; }
.pl-tile__sub { font-size: 13px; opacity: .85; }
.pl-tile__warn { font-size: 13px; color: #F2A58E; }

.pl-chart-card canvas { max-height: 320px; }
.pl-section-title { font-family: var(--pl-skilt); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 16px; }

/* Låst rapport */
.pl-hits { background: #fff; border: 2px solid var(--pl-kul); border-radius: var(--pl-radius); padding: 16px 20px; margin-bottom: 20px; }
.pl-hits__label { font-family: var(--pl-skilt); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
.pl-hits__line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-hits__num { font-family: var(--pl-skilt); font-weight: 800; font-size: 52px; line-height: 1; color: var(--pl-emalje); }
.pl-hits__text { color: var(--pl-tekst-2); }
.pl-lock { border: 2px solid var(--pl-kul); border-radius: var(--pl-radius); overflow: hidden; background: var(--pl-papir); margin-bottom: 24px; }
.pl-lock__ghost { background: #A89F90; border-bottom: 2px solid var(--pl-kul); padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pl-lock__ghost span { height: 64px; border-radius: 6px; background: rgba(238,228,209,.35); }
.pl-lock__body { padding: 24px 22px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pl-lock__icon { width: 56px; height: 56px; border-radius: 999px; background: var(--pl-signal); display: flex; align-items: center; justify-content: center; }
.pl-lock__icon svg { width: 26px; height: 26px; }
.pl-lock__title { font-family: var(--pl-skilt); font-weight: 800; font-size: 38px; line-height: 1; text-transform: uppercase; margin: 0; }
.pl-lock__text { margin: 0; max-width: 460px; color: var(--pl-tekst-2); }
.pl-lock .btn { width: 100%; max-width: 420px; }

/* ---------- Log ind / opret / nulstil ---------- */
.pl-authhead { background: var(--pl-tegl); color: var(--pl-havre); text-align: center; padding: 36px 20px 30px; }
.pl-app .pl-authhead a { color: var(--pl-havre); text-decoration: none; }
.pl-authhead img { width: 84px; height: 84px; display: block; margin: 0 auto 8px; }
.pl-authhead__name { display: block; font-family: var(--pl-skilt); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.pl-authhead__tag { display: block; margin-top: 6px; font-size: 15px; }
.pl-auth { width: 100%; max-width: 440px; margin: 0 auto; padding: 30px 20px 48px; flex: 1 0 auto; }
.pl-auth .pl-page-title { margin-bottom: 18px; }
.pl-auth__lead { color: var(--pl-tekst-2); margin: -8px 0 18px; }
.pl-auth .btn { width: 100%; }
.pl-auth__forgot { display: block; text-align: right; font-size: 14px; font-weight: 600; margin: 8px 0 18px; }
.pl-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--pl-tekst-3); font-size: 14px; }
.pl-or::before, .pl-or::after { content: ""; flex: 1 1 auto; border-top: 2px dashed #A89F90; }
.pl-auth__links { text-align: center; font-size: 14px; margin-top: 26px; }
.pl-auth__links a { margin: 0 8px; }

/* ---------- Fejlside ---------- */
.pl-error { text-align: center; padding: 56px 20px; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pl-error img { width: 120px; height: 120px; }
.pl-error__code { font-family: var(--pl-skilt); font-weight: 800; font-size: 110px; line-height: .9; color: var(--pl-tegl); margin: 0; }
.pl-error__title { font-family: var(--pl-skilt); font-weight: 800; font-size: 36px; text-transform: uppercase; margin: 0; }
.pl-error__text { max-width: 460px; color: var(--pl-tekst-2); margin: 0 0 12px; }
.pl-error__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Tekstsider (privatlivspolitik m.m.) ---------- */
.pl-legal h1 { font-family: var(--pl-skilt); font-weight: 800; font-size: 48px; text-transform: uppercase; line-height: 1; }
.pl-legal h5, .pl-legal .card-body h1, .pl-legal .card-body h2, .pl-legal .card-body h3 { font-family: var(--pl-skilt); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.pl-legal .card-body h5 { font-size: 22px; }
.pl-legal__body h2 { font-size: 22px; margin: 28px 0 12px; }
.pl-legal__body h2:first-child { margin-top: 0; }
.pl-legal__body h3 { font-size: 18px; margin: 20px 0 8px; }
.pl-legal__body table { width: 100%; margin-bottom: 16px; border-collapse: collapse; }
.pl-legal__body th, .pl-legal__body td { border-bottom: 1px solid var(--pl-kul); padding: 6px 8px; text-align: left; vertical-align: top; }
.pl-legal__body hr { margin: 24px 0; }
.pl-legal__src { white-space: pre-wrap; }
.pl-legal-editor textarea { min-height: 420px; }
.pl-legal-preview { border-left: 4px solid var(--pl-tegl); }

/* ---------- Admin ---------- */
.pl-kvote { height: 22px; border: 2px solid var(--pl-kul); border-radius: 6px; background: var(--pl-papir); overflow: hidden; margin-bottom: 24px; }
.pl-kvote progress { display: block; width: 100%; height: 100%; appearance: none; border: 0; background: transparent; }
.pl-kvote progress::-webkit-progress-bar { background: transparent; }
.pl-kvote progress::-webkit-progress-value { background: var(--pl-til-tiden); }
.pl-kvote progress::-moz-progress-bar { background: var(--pl-til-tiden); }
.pl-kvote--warn progress::-webkit-progress-value { background: var(--pl-signal); }
.pl-kvote--warn progress::-moz-progress-bar { background: var(--pl-signal); }
.pl-kvote--bad progress::-webkit-progress-value { background: var(--pl-tegl); }
.pl-kvote--bad progress::-moz-progress-bar { background: var(--pl-tegl); }
.pl-h3 { font-family: var(--pl-skilt); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .03em; margin: 28px 0 10px; }

/* ---------- Mobil / tablet ---------- */
@media (max-width: 759px) {
  .pl-app { min-width: 0; }
  .pl-main, .pl-main--narrow, .pl-main--text { width: 100%; }
  .pl-appbar__links { display: none; }
  .pl-menu { display: block; }
  .pl-appbar { padding: 10px 16px; }
  .pl-appbar__name { font-size: 24px; }
  .pl-appbar__brand img { width: 38px; height: 38px; }
  .pl-main { padding: 20px 16px 40px; }
  .pl-page-title { font-size: 34px; }
  .pl-grid-2 { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  /* Med en valgt rute går mobilen direkte til analysen (som i mockuppen);
     rutelisten nås via "Mine ruter" i menuen. */
  .pl-grid-2--route { display: none; }
  .pl-days { flex-wrap: nowrap; gap: 4px; }
  .pl-day { flex: 1 1 0; min-width: 0; }
  .pl-day label { min-width: 0; padding: 0; font-size: 15px; }
  .pl-routehead { margin-bottom: 16px; }
  .pl-routehead__name { font-size: 26px; padding: 10px 16px; }
  .pl-routehead::after { display: none; }
  .pl-routehead__name { flex: 1 1 auto; }
  .pl-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-filters__wide, .pl-filters__days { grid-column: 1 / -1; }
  .pl-filters__row { grid-template-columns: 1fr; }
  .pl-filters__row--nodir { grid-template-columns: 1fr; }
  .pl-kpis-app { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-tile__value { font-size: 36px; }
  .pl-lock__ghost { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-lock__ghost span:nth-child(n+5) { display: none; }
}
@media (max-width: 520px) {
  .pl-add-route { grid-template-columns: 1fr; }
  .pl-route { flex-wrap: wrap; }
  .pl-route__name { flex-basis: 100%; }
  .pl-error__code { font-size: 80px; }
  .pl-authhead__name { font-size: 38px; }
}

/* ---------- Print (Udskriv / Gem som PDF) ----------
   A4 stående. Brevhoved (_print_head.html) på første side; sidefoden med
   domæne, datakilde og sidetal ligger i @page-margenfelterne (Chrome/Edge 131+;
   andre browsere udelader blot sidefoden). */
@media print {
  @page {
    size: A4;
    margin: 12mm 13mm 16mm;
    @bottom-left {
      content: "PendlerLog · pendlerlog.dk · Data: Rejseplanen realtid (GTFS/SIRI)";
      font: 8pt "Libre Franklin", "Segoe UI", Arial, sans-serif; color: #5C5248;
      border-top: .6pt solid #CFC2A9; vertical-align: top; padding-top: 2mm;
    }
    @bottom-right {
      content: "Side " counter(page) " / " counter(pages);
      font: 8pt "Libre Franklin", "Segoe UI", Arial, sans-serif; color: #5C5248;
      border-top: .6pt solid #CFC2A9; vertical-align: top; padding-top: 2mm;
    }
  }
  .no-print, .pl-appbar, .pl-appfoot, .pl-report-actions { display: none !important; }
  .pl-app, body { background: #fff !important; }
  .pl-app { min-width: 0 !important; }
  .pl-main, .pl-main--narrow { width: 100% !important; padding: 0 !important; }
  .pl-print-only { display: block !important; }

  /* Brevhoved: tegl-bånd, logo + navn, dokumenttype og dato */
  .pl-print-head { display: flex !important; justify-content: space-between; align-items: center; border-top: 4mm solid var(--pl-tegl); border-bottom: .6pt solid #CFC2A9; padding: 4mm 0 3mm; margin-bottom: 6mm; }
  .pl-print-head__brand { display: flex; align-items: center; gap: 3mm; }
  .pl-print-head__brand img { width: 15mm; height: 15mm; }
  .pl-print-head__name { font-family: var(--pl-skilt); font-weight: 800; font-size: 24pt; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-kul); }
  .pl-print-head__doc { text-align: right; font-size: 9pt; color: var(--pl-tekst-3); line-height: 1.35; }
  .pl-print-head__title { font-family: var(--pl-skilt); font-weight: 800; font-size: 14pt; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-emalje); }
  .pl-print-head__report { color: var(--pl-kul); font-weight: 600; }

  .pl-routehead { margin-bottom: 4mm; }
  .pl-routehead__name { font-size: 20pt; padding: 2.5mm 5mm; }
  .pl-report-meta { margin: 0 0 5mm; font-size: 9pt; }
  .pl-report-summary { border: .6pt solid #E3D8C3; border-left: 2mm solid var(--pl-signal); font-size: 9.5pt; padding: 3mm 4mm; margin-bottom: 5mm; }
  .pl-report-summary__label { font-size: 10pt; }

  .pl-kpis-app { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3mm; margin-bottom: 5mm; }
  .pl-tile { padding: 2.5mm 3mm; border-top-width: 1.5mm; }
  .pl-tile__label, .pl-tile__sub, .pl-tile__warn { font-size: 8pt; }
  .pl-tile__value { font-size: 22pt; }

  .pl-print-head, .pl-routehead__name, .pl-report-summary, .pl-tile, .pl-badge, .pl-app .table > thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card { box-shadow: none !important; }
  .card, .pl-table-wrap { break-inside: avoid; }
  .pl-obs-card { break-inside: auto; }  /* lang tabel: må gerne fortsætte på næste side */
  .pl-section-title { font-size: 14pt; margin-bottom: 3mm; }
  .pl-chart-card canvas { max-height: 220px !important; }
  .table-responsive { overflow: visible !important; }
  .pl-app .table { font-size: 8.5pt; }
  .pl-app td, .pl-app th { padding: 2px 4px !important; }
  /* Skærmens faste px-bredder er bredere end A4 og klemmer "Mod" til nul */
  .pl-app .pl-table--fixed { min-width: 0; }
  .pl-col-date { width: 11%; }
  .pl-col-time { width: 8%; }
  .pl-col-actual { width: 9%; }
  .pl-col-train { width: 10%; }
  .pl-col-delay { width: 10%; }
  .pl-col-status { width: 15%; }
  .pl-app .table .pl-badge { font-size: 7.5pt; padding: 1px 5px; }
  .pl-app .table > thead th { font-size: 8.5pt; letter-spacing: .03em; white-space: normal; padding-top: 4px !important; padding-bottom: 4px !important; }
  thead { display: table-header-group; }  /* kolonneoverskrifter på hver side */
  tr { break-inside: avoid; }
}

/* Hjælp & feedback (/hjaelp) */
.pl-help-lead { margin: -8px 0 24px; color: var(--pl-tekst-2); font-size: 17px; }
.pl-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.pl-help__h2 { margin: 0 0 12px; font-family: var(--pl-skilt); font-weight: 700; font-size: 26px; text-transform: uppercase; color: var(--pl-emalje); }
.pl-help-faq { background: var(--pl-papir); border: 1px solid #DCCFB6; border-radius: var(--pl-radius); margin-bottom: 10px; }
.pl-help-faq summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 18px; position: relative; font-weight: 600; }
.pl-help-faq summary::-webkit-details-marker { display: none; }
.pl-help-faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 22px; color: var(--pl-tegl); }
.pl-help-faq[open] summary::after { content: "–"; }
.pl-help-faq p { margin: 0; padding: 0 18px 16px; color: var(--pl-tekst-2); line-height: 1.55; }
.pl-help__more { margin-top: 12px; font-size: 14px; color: var(--pl-tekst-3); }
.pl-help__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pl-help__cats .btn { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.pl-help__meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--pl-tekst-3); }
.pl-help__note { background: var(--pl-havre); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--pl-tekst-2); }
.pl-help__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .pl-help { grid-template-columns: minmax(0, 1fr); }
  .pl-help__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}