/* =====================================================================
   Samtykkesystem – FGU-Skolen Øst
   Stilark for både den offentlige del og admin-panelet.

   Farvepaletten er hentet fra ClearConsent-materialets visuelle udtryk:
   mørk petroleumsgrøn som primærfarve, lys mint til informationsbokse,
   mørk blågrå til overskrifter. Kun stilen er genbrugt – ikke kode
   eller arkitektur.
   ===================================================================== */

:root {
    --teal-900: #0b4f43;
    --teal-700: #0f6b5c;   /* primærfarve: knapper, sidehoved, links */
    --teal-500: #128974;
    --teal-300: #6fb5a7;
    --mint-100: #e8f3f0;   /* informationsbokse */
    --mint-50:  #f4f9f8;

    --navy-900: #1f3a4d;   /* overskrifter */
    --graa-800: #2c3a42;   /* brødtekst */
    --graa-600: #5c6b73;   /* sekundær tekst */
    --graa-300: #d4dee0;   /* rammer */
    --graa-100: #eef2f3;
    --graa-50:  #f7f9fa;

    --gron:  #1e7d52;
    --gron-bg: #e6f4ec;
    --gul:   #9a6a00;
    --gul-bg:  #fdf4e0;
    --rod:   #c0392b;
    --rod-bg:  #fdeeec;

    --radius: 8px;
    --skygge: 0 1px 3px rgba(31, 58, 77, .08), 0 4px 16px rgba(31, 58, 77, .06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--graa-800);
    background: var(--graa-50);
    -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- Sidehoved */

.sidehoved {
    background: var(--teal-700);
    color: #fff;
    padding: 18px 0;
}
.sidehoved .indhold {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.sidehoved .skolenavn { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.sidehoved .undertitel { font-size: 13px; color: var(--teal-300); }
.sidehoved a { color: #fff; }

.sidehoved nav { display: flex; gap: 6px; flex-wrap: wrap; }
.sidehoved nav a {
    color: #d9ece8;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
}
.sidehoved nav a:hover, .sidehoved nav a.aktiv {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ---------------------------------------------------------------- Layout */

main { max-width: 42rem; margin: 32px auto 64px; padding: 0 20px; }
main.bred { max-width: 72rem; }

.kort {
    background: #fff;
    border: 1px solid var(--graa-300);
    border-radius: var(--radius);
    box-shadow: var(--skygge);
    padding: 28px;
    margin-bottom: 22px;
}
.kort.stram { padding: 20px; }

h1 { font-size: 25px; color: var(--navy-900); margin: 0 0 6px; letter-spacing: -.02em; }
h2 { font-size: 19px; color: var(--teal-700); margin: 28px 0 10px; }
h3 { font-size: 16px; color: var(--navy-900); margin: 20px 0 6px; }
.underrubrik { color: var(--graa-600); margin: 0 0 22px; }

a { color: var(--teal-700); }

/* ---------------------------------------------------------------- Formular */

.felt { margin-bottom: 18px; }
.felt label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 15px; color: var(--navy-900); }
.felt .hjaelp { font-size: 13px; color: var(--graa-600); margin: -2px 0 6px; }

input[type=text], input[type=email], input[type=password],
input[type=url], input[type=search], select, textarea {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    font-size: 16px;              /* 16px forhindrer at iOS zoomer ind */
    color: var(--graa-800);
    background: #fff;
    border: 1px solid var(--graa-300);
    border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--teal-500);
    outline-offset: 1px;
    border-color: var(--teal-500);
}
textarea { min-height: 80px; resize: vertical; }

.knap {
    display: inline-block;
    background: var(--teal-700);
    color: #fff;
    border: 1px solid var(--teal-700);
    padding: 11px 22px;
    font: inherit;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.knap:hover { background: var(--teal-900); border-color: var(--teal-900); }
.knap:disabled { opacity: .55; cursor: not-allowed; }
.knap.sekundaer { background: #fff; color: var(--teal-700); }
.knap.sekundaer:hover { background: var(--mint-100); }
.knap.fare { background: var(--rod); border-color: var(--rod); }
.knap.fare:hover { background: #96271b; border-color: #96271b; }
.knap.lille { padding: 6px 12px; font-size: 14px; }

.knapraekke { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Beskeder */

.besked {
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-left: 4px solid;
}
.besked.info    { background: var(--mint-100); border-color: var(--teal-700); }
.besked.ok      { background: var(--gron-bg);  border-color: var(--gron); }
.besked.advarsel{ background: var(--gul-bg);   border-color: var(--gul); }
.besked.fejl    { background: var(--rod-bg);   border-color: var(--rod); }
.besked p:first-child { margin-top: 0; }
.besked p:last-child  { margin-bottom: 0; }

/* ---------------------------------------------------------------- Mærkater */

.maerkat {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.maerkat.gron { background: var(--gron-bg); color: var(--gron); }
.maerkat.gul  { background: var(--gul-bg);  color: var(--gul); }
.maerkat.rod  { background: var(--rod-bg);  color: var(--rod); }
.maerkat.graa { background: var(--graa-100); color: var(--graa-600); }

/* ---------------------------------------------------------------- Samtykketekst */

.samtykketekst {
    background: var(--mint-50);
    border: 1px solid var(--graa-300);
    border-radius: 6px;
    padding: 20px 22px;
    margin: 8px 0 22px;
    max-height: 380px;
    overflow-y: auto;
    font-size: 15px;
}
.samtykketekst h3 { margin-top: 18px; color: var(--teal-700); font-size: 15px; }
.samtykketekst h3:first-child { margin-top: 0; }
.samtykketekst ul, .samtykketekst ol { padding-left: 20px; }

.accept {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--mint-100);
    border: 1px solid var(--teal-300);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}
.accept input[type=checkbox] {
    width: 20px; height: 20px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--teal-700);
}
.accept label { font-weight: 600; margin: 0; cursor: pointer; }

/* ---------------------------------------------------------------- Status */

.statusboks { text-align: center; padding: 12px 0 4px; }
.statusboks .stor-maerkat {
    display: inline-block;
    font-size: 21px;
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.datalinje {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--graa-100);
}
.datalinje:last-child { border-bottom: none; }
.datalinje .navn { color: var(--graa-600); }
.datalinje .vaerdi { font-weight: 600; text-align: right; }

.id-visning {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    background: var(--graa-100);
    padding: 10px 12px;
    border-radius: 6px;
    word-break: break-all;
}

/* ---------------------------------------------------------------- Tabel */

.tabelramme { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th {
    background: var(--teal-700);
    color: #fff;
    text-align: left;
    padding: 10px 12px;
    font-size: 14px;
    white-space: nowrap;
}
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--graa-100); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--mint-50); }
table.data a { font-weight: 600; text-decoration: none; }
table.data a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Nøgletal */

.noegletal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.noegletal .felt-kort {
    background: #fff; border: 1px solid var(--graa-300);
    border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--skygge);
}
.noegletal .tal { font-size: 28px; font-weight: 700; color: var(--navy-900); line-height: 1.2; }
.noegletal .etiket { font-size: 13px; color: var(--graa-600); }
.noegletal .felt-kort.alarm { border-color: var(--rod); }
.noegletal .felt-kort.alarm .tal { color: var(--rod); }

/* ---------------------------------------------------------------- Filter */

.filterraekke { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.filterraekke .felt { margin-bottom: 0; flex: 1 1 170px; }

/* ---------------------------------------------------------------- Content-links */

.link-liste { list-style: none; padding: 0; margin: 0; }
.link-liste li {
    border: 1px solid var(--graa-300);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.link-liste li.er-fjernet { background: var(--graa-50); opacity: .72; }
.link-liste .link-info { flex: 1 1 260px; min-width: 0; }
.link-liste .url { word-break: break-all; font-size: 14px; }
.link-liste .meta { font-size: 13px; color: var(--graa-600); margin-top: 3px; }

/* ---------------------------------------------------------------- Sidefod */

.sidefod {
    max-width: 62rem; margin: 0 auto; padding: 24px 20px 40px;
    font-size: 13px; color: var(--graa-600);
    border-top: 1px solid var(--graa-300);
}

/* ---------------------------------------------------------------- Diverse */

.hjaelpetekst { font-size: 14px; color: var(--graa-600); }
.centreret { text-align: center; }
.mt-0 { margin-top: 0; }
.skjult { display: none; }

/* Kun synlig for skærmlæsere */
.kun-skaermlaeser {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
    .kort { padding: 20px 18px; }
    h1 { font-size: 22px; }
    main { margin-top: 20px; }
    .datalinje { flex-direction: column; gap: 2px; }
    .datalinje .vaerdi { text-align: left; }
}

@media print {
    .sidehoved nav, .knap { display: none; }
    body { background: #fff; }
    .kort { box-shadow: none; border: 1px solid #ccc; }
}