/* Grundlaget ligger i laget "base"; portalens udtryk i laget "portal" sidst i filen (se styles-period-14.css). */
@layer base{
.account-page{width:min(100% - 32px,680px);margin:36px auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,4vw,32px)}
.account-page>header{display:flex;align-items:center;gap:10px}
.account-page>header img{width:36px;height:36px}
.account-page h1{margin-block:16px 10px}
.account-form{display:grid;gap:14px;margin-top:20px;max-width:380px}
.account-form button{justify-self:start}
.production-controls,.production-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-block:16px}
.production-controls{justify-content:space-between}
.production-day{display:grid;gap:4px;border-top:1px solid var(--border);padding:12px 0;text-decoration:none}
.production-day span{color:var(--muted)}

.live-layout{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.live-sidebar{position:sticky;top:0;height:100vh;background:var(--nav);color:#e6efeb;padding:24px 16px}
.live-sidebar>p{margin:18px 10px;color:#c6e0d3}
.live-brand{display:flex;align-items:center;gap:9px;font-weight:750;color:inherit;white-space:nowrap}
.live-brand img{width:32px;height:32px;border-radius:7px}
.live-sidebar nav{display:grid;gap:4px}
.live-sidebar nav a,.live-mobile-nav a{display:block;padding:10px 12px;border-radius:8px;color:inherit}
.live-sidebar nav a[aria-current=page]{background:#2d4d3d;color:white;font-weight:700}
.live-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px clamp(18px,4vw,48px);background:var(--surface);border-bottom:1px solid var(--border)}
.live-top .live-brand,.live-mobile-nav{display:none}
.live-profile{display:flex;align-items:center;gap:16px;margin-inline-start:auto}
.live-profile small,.live-day small{display:block}
.live-main{max-width:1460px;margin:auto;padding:32px clamp(18px,4vw,48px) 48px;min-width:0}
.live-main>h1{margin-bottom:18px;overflow-wrap:anywhere}
.production-links a{padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:white}
.production-links a[aria-current=page],.live-mobile-nav a[aria-current=page]{background:#daf1e6;border-color:#9ed0b7;font-weight:700}
.live-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:20px;min-width:0;overflow-wrap:anywhere}
.live-panel h2{margin-bottom:12px}
.live-day,.live-day-labels{display:grid;grid-template-columns:105px minmax(0,1fr) minmax(120px,22%);align-items:center;gap:12px}
.live-day strong{color:var(--ink)}
.live-day time,.live-times{font-variant-numeric:tabular-nums}
.live-day-labels{font-size:13px;font-weight:700;color:var(--muted);padding:8px 0}
.live-day:hover{background:#ecf8f2}
.live-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));align-items:start;gap:16px;margin-top:16px}
.live-users{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.live-user{display:grid;align-content:start;gap:6px;border:1px solid var(--border);border-radius:10px;padding:12px;overflow-wrap:anywhere}
.live-user>span{color:var(--muted)}
@media(max-width:767px){
  .live-layout{display:block}.live-sidebar,.live-organization{display:none}
  .live-top .live-brand{display:flex;white-space:normal;min-width:0}
  .live-top .live-brand img{width:24px;height:24px}
  .live-profile>div{display:none}
  .live-main{padding:20px 14px calc(80px + env(safe-area-inset-bottom))}
  .live-main>h1{font-size:28px}
  .live-mobile-nav{position:fixed;inset:auto 0 0;display:flex;gap:8px;justify-content:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:white;border-top:1px solid var(--border);z-index:4}
  .live-day-labels{display:none}
  .live-day{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .live-day time{grid-column:1/-1;font-size:13px}
  .live-panel{padding:14px}
}

.md-date{color:var(--muted);font-weight:650}
.md-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.md-actions .button,.md-week a,.md-card{min-height:44px}
.md-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:720px;margin:12px 0}
.md-week a{display:grid;place-items:center;padding:5px 1px;border:1px solid #8dac9c;border-radius:8px;background:#fff;color:var(--ink)}
.md-week a[aria-current=date]{background:#44795f;color:white;border-color:#44795f}
.md-week a[aria-current=date] small{color:white}
.md-panel{margin:14px 0}
.md-panel h3,.md-panel p{margin-top:8px}
.md-list{list-style:none;display:grid;gap:8px;padding:0}
.md-card{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px;background:white;border:1px solid #adc9bb;border-radius:10px;color:var(--ink);overflow-wrap:anywhere}
.md-card small{display:block}
.md-status{grid-column:2;color:#306d4f;font-size:13px;font-weight:700}
.md-change-row{border-bottom:1px solid var(--border);padding:10px 0}
.md-change-row .button{margin-top:6px}
.md-diff{display:grid;gap:8px;overflow-wrap:anywhere}
.md-diff>div{padding:8px;background:var(--canvas);border-radius:6px}
.md-diff dt{font-weight:700}
.md-diff dd{margin:0;white-space:pre-wrap}
.md-target{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.md-offline{padding:8px;border:1px solid #8dac9c;border-radius:6px;background:#fff3dd}
@media(max-width:767px){.md-card{grid-template-columns:1fr}.md-status{grid-column:1}.md-week a{font-size:13px}.md-actions .button{white-space:normal}}
.account-role-form{display:flex;flex-wrap:wrap;align-items:end;gap:8px}
.account-role-form .form-field{flex:1 1 115px}

.md-day-jumps{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0}
.md-day-jumps a{display:flex;align-items:center;min-height:44px;font-weight:650}
.md-brief{margin:8px 0}
.md-brief>p{color:var(--muted)}
.md-day-times{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0}
.md-day-times>div{padding:5px 10px;background:var(--canvas);border-radius:6px}
.md-day-times dt{font-size:13px;color:var(--muted)}
.md-day-times dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.md-day-program{list-style:none;padding:0;margin:8px 0;border:1px solid var(--border);border-radius:10px;background:white}
.md-day-program li{display:grid;grid-template-columns:minmax(70px,110px) minmax(0,1fr);gap:8px 14px;padding:9px 12px;overflow-wrap:anywhere}
.md-day-program li+li{border-top:1px solid var(--border)}
.md-day-program small,.md-day-detail small{display:block}
.md-program-time{font-variant-numeric:tabular-nums}
.md-day-detail{padding:9px 0}
.md-day-detail+.md-day-detail{border-top:1px solid var(--border)}
@media(max-width:360px){.md-day-program li{grid-template-columns:72px minmax(0,1fr);gap:7px;padding-inline:8px}}

/* Venstremenu: samme grupperede menu som i appen */
.live-sidebar{display:flex;flex-direction:column;overflow:auto}
.live-sidebar nav{display:block}
.live-sidebar a.nav-link{display:flex;padding:8px 11px;margin-bottom:2px;color:#d3e2da}
.live-sidebar a.nav-link:hover{background:#ffffff13}
.live-sidebar a.nav-link[aria-current=page]{background:#44795f;color:#fff;font-weight:650}
.live-sidebar .nav-link svg{width:17px;height:17px}
.live-sidebar .orgbox>span:last-child{font-size:13px;font-weight:600;color:#eaf5f0}


/* Mørkt tema: følger enhedens indstilling */
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]){color-scheme:dark;--canvas:#131514;--surface:#1a1e1c;--ink:#e2ede8;--muted:#9daea6;--nav:#0d0d0e;--action:#509573;--action-text:#a4e2c3;--accent:#71b392;--border:#2c3631;--shadow:0 2px 4px #0005,0 10px 26px #0004}
:root:not([data-theme=light]) .live-top .live-brand img,:root:not([data-theme=light]) .account-page>header img{content:url(planning-assets/assets/mark.png)}
}
:root[data-theme=dark]{color-scheme:dark;--canvas:#131514;--surface:#1a1e1c;--ink:#e2ede8;--muted:#9daea6;--nav:#0d0d0e;--action:#509573;--action-text:#a4e2c3;--accent:#71b392;--border:#2c3631;--shadow:0 2px 4px #0005,0 10px 26px #0004}
:root[data-theme=dark] .live-top .live-brand img,:root[data-theme=dark] .account-page>header img{content:url(planning-assets/assets/mark.png)}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .account-page{background:var(--surface);border:1px solid var(--border)}
:root:not([data-theme=light]) .production-day{border-top:1px solid var(--border)}
:root:not([data-theme=light]) .production-day span{color:var(--muted)}
:root:not([data-theme=light]) .live-sidebar{background:var(--nav);color:#e6efeb}
:root:not([data-theme=light]) .live-sidebar>p{color:#c6e0d3}
:root:not([data-theme=light]) .live-brand{color:inherit}
:root:not([data-theme=light]) .live-sidebar nav a,:root:not([data-theme=light]) .live-mobile-nav a{color:inherit}
:root:not([data-theme=light]) .live-sidebar nav a[aria-current=page]{background:#2d4d3d;color:white}
:root:not([data-theme=light]) .live-top{background:var(--surface);border-bottom:1px solid var(--border)}
:root:not([data-theme=light]) .production-links a{border:1px solid var(--border);background:#1e1e1e}
:root:not([data-theme=light]) .production-links a[aria-current=page],:root:not([data-theme=light]) .live-mobile-nav a[aria-current=page]{background:#22372c;border-color:#316b4e}
:root:not([data-theme=light]) .live-panel{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
:root:not([data-theme=light]) .live-day strong{color:var(--ink)}
:root:not([data-theme=light]) .live-day-labels{color:var(--muted)}
:root:not([data-theme=light]) .live-day:hover{background:#202a25}
:root:not([data-theme=light]) .live-user{border:1px solid var(--border)}
:root:not([data-theme=light]) .live-user>span{color:var(--muted)}
}
:root[data-theme=dark] .account-page{background:var(--surface);border:1px solid var(--border)}
:root[data-theme=dark] .production-day{border-top:1px solid var(--border)}
:root[data-theme=dark] .production-day span{color:var(--muted)}
:root[data-theme=dark] .live-sidebar{background:var(--nav);color:#e6efeb}
:root[data-theme=dark] .live-sidebar>p{color:#c6e0d3}
:root[data-theme=dark] .live-brand{color:inherit}
:root[data-theme=dark] .live-sidebar nav a,:root[data-theme=dark] .live-mobile-nav a{color:inherit}
:root[data-theme=dark] .live-sidebar nav a[aria-current=page]{background:#2d4d3d;color:white}
:root[data-theme=dark] .live-top{background:var(--surface);border-bottom:1px solid var(--border)}
:root[data-theme=dark] .production-links a{border:1px solid var(--border);background:#1e1e1e}
:root[data-theme=dark] .production-links a[aria-current=page],:root[data-theme=dark] .live-mobile-nav a[aria-current=page]{background:#22372c;border-color:#316b4e}
:root[data-theme=dark] .live-panel{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
:root[data-theme=dark] .live-day strong{color:var(--ink)}
:root[data-theme=dark] .live-day-labels{color:var(--muted)}
:root[data-theme=dark] .live-day:hover{background:#202a25}
:root[data-theme=dark] .live-user{border:1px solid var(--border)}
:root[data-theme=dark] .live-user>span{color:var(--muted)}
@media (prefers-color-scheme:dark) and (max-width:767px){
:root:not([data-theme=light]) .live-mobile-nav{background:#1e1e1e;border-top:1px solid var(--border)}
}
@media (max-width:767px){
:root[data-theme=dark] .live-mobile-nav{background:#1e1e1e;border-top:1px solid var(--border)}
}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .md-date{color:var(--muted)}
:root:not([data-theme=light]) .md-week a{border:1px solid #4f7a65;background:#1e1e1e;color:var(--ink)}
:root:not([data-theme=light]) .md-week a[aria-current=date]{background:#44795f;color:white;border-color:#44795f}
:root:not([data-theme=light]) .md-week a[aria-current=date] small{color:white}
:root:not([data-theme=light]) .md-card{background:#1e1e1e;border:1px solid #3a5e4c;color:var(--ink)}
:root:not([data-theme=light]) .md-status{color:#90d8b4}
:root:not([data-theme=light]) .md-change-row{border-bottom:1px solid var(--border)}
:root:not([data-theme=light]) .md-diff>div{background:var(--canvas)}
:root:not([data-theme=light]) .md-target{border-bottom:1px solid var(--border)}
:root:not([data-theme=light]) .md-offline{border:1px solid #4f7a65;background:#2e230f}
:root:not([data-theme=light]) .md-brief>p{color:var(--muted)}
:root:not([data-theme=light]) .md-day-times>div{background:var(--canvas)}
:root:not([data-theme=light]) .md-day-times dt{color:var(--muted)}
:root:not([data-theme=light]) .md-day-program{border:1px solid var(--border);background:#1e1e1e}
:root:not([data-theme=light]) .md-day-program li+li{border-top:1px solid var(--border)}
:root:not([data-theme=light]) .md-day-detail+.md-day-detail{border-top:1px solid var(--border)}
}
:root[data-theme=dark] .md-date{color:var(--muted)}
:root[data-theme=dark] .md-week a{border:1px solid #4f7a65;background:#1e1e1e;color:var(--ink)}
:root[data-theme=dark] .md-week a[aria-current=date]{background:#44795f;color:white;border-color:#44795f}
:root[data-theme=dark] .md-week a[aria-current=date] small{color:white}
:root[data-theme=dark] .md-card{background:#1e1e1e;border:1px solid #3a5e4c;color:var(--ink)}
:root[data-theme=dark] .md-status{color:#90d8b4}
:root[data-theme=dark] .md-change-row{border-bottom:1px solid var(--border)}
:root[data-theme=dark] .md-diff>div{background:var(--canvas)}
:root[data-theme=dark] .md-target{border-bottom:1px solid var(--border)}
:root[data-theme=dark] .md-offline{border:1px solid #4f7a65;background:#2e230f}
:root[data-theme=dark] .md-brief>p{color:var(--muted)}
:root[data-theme=dark] .md-day-times>div{background:var(--canvas)}
:root[data-theme=dark] .md-day-times dt{color:var(--muted)}
:root[data-theme=dark] .md-day-program{border:1px solid var(--border);background:#1e1e1e}
:root[data-theme=dark] .md-day-program li+li{border-top:1px solid var(--border)}
:root[data-theme=dark] .md-day-detail+.md-day-detail{border-top:1px solid var(--border)}

/* Trykflader på touchskærme: mindst 44 px */
@media (pointer:coarse){
.button,.live-mobile-nav a,.form-field input,.form-field select{min-height:44px}
}

/* Luft mellem importformular og brugerliste */
.live-main>.account-form{margin-bottom:20px}
}

/* Sider uden for appen (Registreringer, Min dag, Administration) får samme udtryk som resten af portalen. */
@layer portal{
.live-layout{grid-template-columns:232px minmax(0,1fr)}
.live-sidebar{padding:26px 16px 16px;background:var(--side);color:var(--ink);border-right:1px solid var(--side-line)}
.live-brand{gap:9px;padding:0 4px;font-size:17px;font-weight:450;letter-spacing:-.045em;color:var(--ink)}
.live-brand img{width:38px;height:38px;border-radius:11px}
.live-brand b{font-weight:750}
.live-sidebar .orgbox>span:last-child{font-size:10px;font-weight:650;letter-spacing:1.4px;color:var(--caption)}
.live-sidebar a.nav-link{gap:12px;min-height:44px;margin:2px 0;padding:10px 14px;border-radius:11px;font-size:14px;color:var(--side-ink)}
.live-sidebar a.nav-link:hover{background:var(--side-hover)}
.live-sidebar a.nav-link[aria-current=page]{background:var(--side-active);color:var(--side-active-ink);font-weight:650;box-shadow:0 2px 8px #213b2e0d}
.live-sidebar .nav-link svg{width:19px;height:19px}
.live-top{position:sticky;top:0;z-index:3;min-height:72px;background:var(--topbar);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.live-profile small{color:var(--muted)}
.live-panel,.account-page,.live-user{border-color:var(--border);border-radius:var(--radius);background:var(--surface)}
.live-panel{box-shadow:var(--shadow)}
.production-links a{border-color:var(--border);border-radius:10px;background:var(--surface);color:var(--ink)}
.production-links a[aria-current=page],.live-mobile-nav a[aria-current=page]{border-color:var(--soft-line);background:var(--soft);color:var(--soft-ink)}
.live-day:hover{background:var(--soft)}
.md-week a,.md-card,.md-day-program{border-color:var(--border);background:var(--surface);color:var(--ink)}
.md-week a[aria-current=date]{border-color:var(--action);background:var(--action);color:#fff}
.md-status{color:var(--soft-ink)}
.md-offline{border-color:var(--soft-line);background:var(--soft)}
@media(min-width:768px){
  .live-top{padding:0 40px}
  .live-main{max-width:1280px;padding:40px 40px 48px}
  .live-main>h1{margin-bottom:24px}
}
@media(max-width:767px){
  .live-sidebar{display:none}
  .live-top .live-brand img{width:31px;height:31px}
  .live-mobile-nav{background:var(--topbar);border-top-color:var(--border);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
  .live-mobile-nav a{color:var(--muted)}
}
}