/* ===== BloomSphere nature-look — tokens ===== */
:root{
  --ns-canvas:#f2efe6; --ns-canvas-alt:#f4f1e8;
  --ns-surface:#ffffff; --ns-surface-subtle:#faf9f1;
  --ns-ink:#1d2a20; --ns-ink-2:#6d7a66; --ns-ink-muted:#96a08c;
  --ns-green:#2b4a35; --ns-green-hover:#1f3a28; --ns-accent:#4a7c59;
  --ns-lime:#b5e07a; --ns-lime-2:#9dc96a;
  --ns-sidebar-a:#192a1e; --ns-sidebar-b:#141f16;
  --ns-panel-a:#1f3325; --ns-panel-b:#182a1d;
  --ns-danger:#c0442a; --ns-danger-surface:#fbeae6;
  --ns-amber:#a8731e; --ns-amber-text:#8a5a12; --ns-amber-surface:#fbf1e2;
  --ns-border:#e3e2d2; --ns-hairline:#f1f0e3; --ns-input-border:#dfdecd;
  --ns-success-surface:#e7f2e0; --ns-success-text:#3c6647; --ns-live-dot:#3c9a5a;
  --ns-radius:16px; --ns-radius-hero:20px; --ns-radius-pill:10px;
  --ns-font-display:'Cormorant Garamond',serif;
  --ns-font-ui:'DM Sans',system-ui,sans-serif;
  /* legacy-mapping — eksisterende templates bruger disse vars */
  --sage:#4a7c59; --sage-dark:#2b4a35; --lime:#b5e07a;
  --card-bg:#ffffff; --card-border:#e3e2d2;
  --text-dark:#1d2a20; --text-muted:#6d7a66; --red:#c0442a;
}

/* legacy-mapping (fortsat) — resterende vars fra base.html's :root */
:root{
  --sage-light:#9db8a5; --sage-muted:#7f8a76;
  --lime-dark:#9dc96a; --off-white:#f2efe6;
  --yellow:#a8731e; --olive:#6d7a66;
}

/* ===== base ===== */
body{
  font-family:var(--ns-font-ui);
  background:var(--ns-canvas);
  color:var(--ns-ink);
}
h1,h2,.ns-display{
  font-family:var(--ns-font-display);
  font-weight:600;
  line-height:1.05;
  color:var(--ns-ink);
}

/* ===== komponenter ===== */
.ns-card{
  background:var(--ns-surface);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-radius);
  padding:18px 20px;
}

.ns-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ns-font-ui);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ns-ink-muted);
}
.ns-eyebrow::before{
  content:"";width:22px;height:1px;background:var(--ns-accent);flex:0 0 auto;
}

.ns-kpi{
  background:var(--ns-surface);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-radius);
  padding:18px 20px;
}
.ns-kpi .label{
  font-family:var(--ns-font-ui);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ns-ink-muted);margin-bottom:8px;
}
.ns-kpi .num{
  font-family:var(--ns-font-display);
  font-size:36px;font-weight:600;line-height:1;
  color:var(--ns-ink);
}
.ns-kpi .sub{
  font-size:12px;color:#7f8a76;margin-top:4px;
}

.ns-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ns-font-ui);
  font-size:13px;font-weight:600;
  border-radius:11px;padding:11px 16px;
  cursor:pointer;transition:.15s;
}
.ns-btn-primary{
  background:var(--ns-green);color:#fff;border:none;
  padding:11px 18px;
}
.ns-btn-primary:hover{background:var(--ns-green-hover);}
.ns-btn-ghost{
  background:var(--ns-surface);color:#4b5645;
  border:1px solid var(--ns-input-border);
}
.ns-btn-ghost:hover{border-color:#bcc6b2;}

.ns-pill{
  display:inline-block;
  font-family:var(--ns-font-ui);
  font-size:10.5px;font-weight:600;
  padding:3px 10px;border-radius:20px;
  background:var(--ns-canvas-alt);color:var(--ns-ink-2);
}
.ns-pill-danger{background:var(--ns-danger-surface);color:var(--ns-danger);}
.ns-pill-amber{background:var(--ns-amber-surface);color:var(--ns-amber-text);}
.ns-pill-success{background:var(--ns-success-surface);color:var(--ns-success-text);}

.ns-table{
  width:100%;border-collapse:collapse;
  background:var(--ns-surface);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-radius);
  overflow:hidden;
}
.ns-table th{
  font-family:var(--ns-font-ui);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ns-ink-muted);font-weight:600;
  text-align:left;padding:12px 22px;
}
.ns-table td{
  font-size:13.5px;color:var(--ns-ink);
  padding:12px 22px;border-top:1px solid var(--ns-hairline);
}

.ns-toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--ns-panel-a);color:#eef4e6;
  border-radius:12px;padding:12px 20px;
  box-shadow:0 14px 40px rgba(20,30,22,.32);
  font-size:13.5px;font-weight:500;
  animation:bs-pop .2s ease;
}

.ns-skel{
  background:linear-gradient(90deg,#eceadd 0px,#f4f2e9 180px,#eceadd 360px);
  background-size:840px 100%;
  animation:bs-shimmer 1.15s ease-in-out infinite;
  border-radius:8px;
}

#ns-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:100;overflow:hidden;pointer-events:none;
}
#ns-progress::after{
  content:"";display:block;height:100%;width:40%;
  background:var(--ns-lime);
  animation:bs-bar 1.1s ease-in-out infinite;
}

/* ===== motion (fra prototypen) ===== */
@keyframes bs-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bs-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bs-pulse { 0% { box-shadow: 0 0 0 0 rgba(192,68,42,.35); } 70% { box-shadow: 0 0 0 14px rgba(192,68,42,0); } 100% { box-shadow: 0 0 0 0 rgba(192,68,42,0); } }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@keyframes bs-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes bs-bar { 0% { transform: translateX(-100%); } 60% { transform: translateX(30%); } 100% { transform: translateX(100%); } }

/* ===== shell (fase 1 bruger disse) ===== */
.ns-app{
  display:flex;align-items:stretch;
  min-height:100vh;width:100%;
}

/* --- sidebar (fra prototypen: 256px, mørk grøn gradient + lime-glow) --- */
.ns-sidebar{
  width:256px;flex:0 0 256px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  /* Natur-baggrund (Robins wauv, 1/8): Morgendis-motivet træder tydeligt frem —
     tættest i toppen (læsbar nav), åbent i bunden. Kalibreret visuelt 1/8
     (første version var så mørk at motivet reelt var usynligt). */
  background:
    radial-gradient(420px 300px at 115% -8%, rgba(181,224,122,.09), transparent 62%),
    linear-gradient(172deg, rgba(25,42,30,.86) 0%, rgba(22,35,25,.62) 50%, rgba(18,28,20,.36) 100%),
    url("/static/brand/hero-morning.png") center bottom / cover no-repeat,
    linear-gradient(172deg,var(--ns-sidebar-a) 0%,var(--ns-sidebar-b) 100%);
  color:#e9eee2;
  text-shadow:0 1px 3px rgba(10,18,12,.55);
  display:flex;flex-direction:column;gap:3px;
  padding:20px 14px 16px;
}

.ns-logo{
  display:flex;align-items:center;gap:11px;
  padding:4px 8px 16px;
}
.ns-logo-leaf{
  width:38px;height:38px;flex:0 0 auto;
  border-radius:11px;background:#f4f0e8;padding:5px;
  box-sizing:border-box;object-fit:contain;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.45);
}
.ns-logo-text{
  display:flex;flex-direction:column;line-height:1.05;
  font-family:var(--ns-font-ui);
}
.ns-logo-text .brand{
  font-size:13.5px;font-weight:400;letter-spacing:.06em;color:var(--ns-lime);
}
.ns-logo-text .brand strong{font-weight:700;color:#e9eee2;}
.ns-logo-text small{
  font-size:8.5px;letter-spacing:.22em;color:#8a9a84;margin-top:4px;
}

.ns-navgroup{
  font-family:var(--ns-font-ui);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#6f7f6a;
  padding:14px 10px 5px;
}
.ns-sidebar > .ns-navgroup:first-of-type{padding-top:8px;}

.ns-nav{
  display:flex;align-items:center;gap:11px;
  width:100%;padding:9px 10px;border-radius:10px;
  color:#c4cdba;font-size:13.5px;font-weight:500;
  transition:.12s;
}
.ns-nav:hover{background:rgba(255,255,255,.07);color:#e9eee2;}
.ns-nav .ico{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:0 0 auto;color:#8a9a84;
}
.ns-nav .lbl{flex:1;text-align:left;min-width:0;}
.ns-nav.active{background:rgba(255,255,255,.1);color:#fff;}
.ns-nav.active .ico{color:var(--ns-lime);}
.ns-nav-badge{
  font-family:var(--ns-font-ui);
  font-size:9.5px;font-weight:600;
  background:rgba(181,224,122,.9);color:#1a2a1e;
  padding:1px 7px;border-radius:20px;flex:0 0 auto;
}

.ns-sidebar-foot{margin-top:auto;padding-top:14px;}
.ns-user-card{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:12px;background:rgba(255,255,255,.05);
}
.ns-user-avatar{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  background:linear-gradient(140deg,#334736,#213326);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;color:#e9eee2;
}
.ns-user-info{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.ns-user-name{
  font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ns-user-link{
  font-family:var(--ns-font-ui);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#8a9a84;transition:.12s;
}
.ns-user-link:hover{color:#e9eee2;}
.ns-logout{
  margin-left:auto;display:flex;padding:7px;border-radius:8px;
  color:#8a9a84;transition:.12s;
}
.ns-logout:hover{background:rgba(255,255,255,.08);color:#e9eee2;}

/* --- hovedkolonne + header (60px, hairline, blur) --- */
.ns-main{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(181,224,122,.14), transparent 60%),
    radial-gradient(900px 520px at -12% 110%, rgba(74,124,89,.09), transparent 55%);
}
.ns-header{
  height:60px;flex:0 0 60px;
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:16px;
  padding:0 32px;
  background:rgba(244,240,232,.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ns-input-border);
}
.ns-header-title{display:flex;flex-direction:column;line-height:1.15;}
.ns-eyebrow-sm{
  font-family:var(--ns-font-ui);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ns-ink-muted);
}
.ns-header-page{
  font-family:var(--ns-font-display);
  font-size:20px;font-weight:600;color:var(--ns-ink);
}
.ns-header-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.ns-live-pill{
  display:flex;align-items:center;gap:7px;
  background:var(--ns-success-surface);border:1px solid #cfe3c2;
  border-radius:20px;padding:6px 12px;
  font-family:var(--ns-font-ui);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ns-success-text);white-space:nowrap;
}
.ns-live-pill .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ns-live-dot);
  box-shadow:0 0 0 3px rgba(60,154,90,.18);
}
.ns-header-user{font-size:13px;font-weight:500;color:var(--ns-ink-2);}

.ns-content{
  flex:1;width:100%;
  max-width:1240px;margin:0 auto;
  padding:32px 40px 80px;
}

/* flash-beskeder (logik uændret — kun restylet) */
.flash{
  background:var(--ns-success-surface);border:1px solid #cfe3c2;
  border-radius:12px;padding:12px 18px;margin-bottom:20px;
  color:var(--ns-success-text);font-size:14px;font-weight:500;
}
.flash-error{
  background:var(--ns-danger-surface);
  border-color:rgba(192,68,42,.3);color:var(--ns-danger);
}

/* progress-bar er skjult indtil .running sættes ved nav-klik */
#ns-progress:not(.running){display:none;}

@media (max-width: 900px){
  .ns-sidebar{width:216px;flex-basis:216px;padding:16px 10px 12px;}
  .ns-content{padding:24px 20px 64px;}
  .ns-header{padding:0 20px;}
  .ns-header-user{display:none;}
}