/* CLM365 — delt stylesheet. Selvstændig "Ink & Amber" brandpalette (uafhængig af DC Intel). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --accent:   #D6A24C;
  --amber:    #C9832A;
  --blue:     #4C86C6;
  --dark:     #12213A;
  --forest:   #17253D;
  --input-bg: #F3EFE6;
  --light:    #DCD3C2;
  --mid:      #6B7280;
  --offwhite: #F7F5F0;
  --primary:  #2F4A73;
  --sage:     #B9C2D1;
  --text-muted:#5B6270;
  --text:     #1A2028;
  --white:    #FFFFFF;
  --danger:   #B24C4C;
  --success:  #1F7A5C;
}

/* --- Indkøbsmodul: eget farvetema (samme CSS-variabler, andre værdier) ---
   Sat via body.modul-indkob (se assets/js/app-shell.js → CLM365_applyModulTheme).
   Grafit/stål-blå palette i stedet for Salgsmodulets ink-navy/amber, så man
   altid tydeligt kan se hvilket modul man er i — uden at det virker som en
   helt anden app. Statusfarver (amber/blue-badge/danger/success) er bevidst
   ens på tværs af moduler, da de har fast betydning (advarsel/info/fejl/ok). */
body.modul-indkob{
  --accent:   #8FADC4;
  --dark:     #20262E;
  --forest:   #262E38;
  --input-bg: #EEF1F3;
  --light:    #D6DCE2;
  --mid:      #64707C;
  --offwhite: #F3F4F6;
  --primary:  #3E566E;
  --sage:     #AEB9C4;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',sans-serif;
  background:var(--offwhite);
  color:var(--text);
  line-height:1.5;
}
h1,h2,h3{ font-family:'Playfair Display',serif; color:var(--forest); margin:0 0 .4em; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* --- Top nav (app) --- */
.app-nav{
  background:var(--dark);
  color:var(--white);
  padding:14px 0;
}
.app-nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.app-nav .wordmark{ display:inline-flex; align-items:center; gap:9px; font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700; color:var(--white); }
.app-nav .wordmark span{ color:var(--accent); }
.wordmark .logo-mark{ display:block; width:28px; height:28px; flex:none; }
.app-nav nav{ display:flex; gap:22px; flex-wrap:wrap; }
.app-nav nav a{ color:var(--light); font-weight:500; font-size:.95rem; }
.app-nav nav a.active,.app-nav nav a:hover{ color:var(--accent); text-decoration:none; }
.app-nav .user-box{ display:flex; align-items:center; gap:14px; font-size:.9rem; color:var(--sage); }
.app-nav button.linklike{
  background:none;border:none;color:var(--light);font-family:inherit;font-size:.9rem;cursor:pointer;
}
.app-nav button.linklike:hover{ color:var(--accent); }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--white); transition:transform .25s ease, opacity .25s ease; }
.app-nav.mobile-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.app-nav.mobile-open .nav-toggle span:nth-child(2){ opacity:0; }
.app-nav.mobile-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .app-nav nav, .app-nav .user-box{
    flex-basis:100%; display:none; flex-direction:column; align-items:flex-start; gap:12px;
    padding-top:14px; margin-top:6px; border-top:1px solid rgba(255,255,255,.12);
  }
  .app-nav.mobile-open nav, .app-nav.mobile-open .user-box{ display:flex; }
  .app-nav .user-box{ width:100%; }
}

@media (max-width:640px){
  .hero{ padding:60px 0 56px; }
  .hero h1{ font-size:1.9rem; }
  .hero p.lead{ font-size:1rem; }
  .hero-bg svg{ opacity:.6; }
  .section{ padding:48px 0; }
}

.app-main{ padding:36px 0 60px; }

/* --- Marketing forside --- */
.hero{ position:relative; overflow:hidden; background:linear-gradient(160deg,var(--dark),var(--forest)); color:var(--white); padding:90px 0 80px; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-bg svg{ position:absolute; right:-8%; top:-14%; width:65%; height:140%; animation:heroDrift 26s ease-in-out infinite alternate; }
@keyframes heroDrift{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.08) translate(-2%,2%); }
}
.hero .wrap{ position:relative; z-index:1; }
.hero .wordmark{ display:inline-flex; align-items:center; gap:11px; font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:var(--white); margin-bottom:40px; }
.hero .wordmark span{ color:var(--accent); }
.hero .wordmark .logo-mark{ width:34px; height:34px; }
.hero h1{ color:var(--white); font-size:2.6rem; max-width:720px; }
.hero p.lead{ color:var(--light); font-size:1.15rem; max-width:640px; margin-top:18px; }
.hero .cta-row{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-block; padding:12px 26px; border-radius:6px; font-weight:600; font-size:.95rem;
  cursor:pointer; border:1px solid transparent; transition:background .15s ease;
}
.btn-primary{ background:var(--accent); color:var(--dark); }
.btn-primary:hover{ background:#E7BB6E; text-decoration:none; }
.btn-outline{ background:transparent; color:var(--white); border-color:var(--sage); }
.btn-outline:hover{ background:rgba(255,255,255,.08); text-decoration:none; }
.btn-danger{ background:var(--danger); color:var(--white); }
.btn-small{ padding:7px 14px; font-size:.85rem; }

.section{ padding:70px 0; }
.section.alt{ background:var(--light); }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; margin-top:34px; }
.feature-card{ background:var(--white); border:1px solid var(--light); border-radius:10px; padding:26px; }
.feature-card h3{ font-size:1.1rem; }
.feature-card p{ color:var(--text-muted); font-size:.95rem; }
.feature-icon{ width:44px; height:44px; border-radius:50%; background:var(--input-bg); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.feature-icon svg{ width:22px; height:22px; }

.modules-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; margin-top:34px; }
.module-card{ background:var(--white); border:1px solid var(--light); border-left:4px solid var(--primary); border-radius:10px; padding:30px; }
.module-card.indkob{ border-left-color:var(--blue); }

/* --- Scroll-reveal + hover-lift (kun aktiv når JS har markeret <html> som reveal-ready,
   så indhold altid er synligt hvis JS ikke loader) --- */
.reveal-ready .feature-card,
.reveal-ready .module-card{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .5s ease, box-shadow .25s ease;
}
.reveal-ready .feature-card.reveal-in,
.reveal-ready .module-card.reveal-in{ opacity:1; transform:translateY(0); }
.feature-card:hover, .module-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(18,33,58,0.12);
}
.module-card .module-tag{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--primary); margin-bottom:8px; }
.module-card.indkob .module-tag{ color:var(--blue); }
.module-card h3{ font-size:1.25rem; margin-bottom:8px; }
.module-card p.module-desc{ color:var(--text-muted); font-size:.95rem; margin-bottom:14px; }
.module-card ul{ margin:0; padding-left:20px; color:var(--text-muted); font-size:.92rem; }
.module-card ul li{ margin-bottom:6px; }

footer.site-footer{ background:var(--dark); color:var(--sage); padding:30px 0; font-size:.85rem; }
footer.site-footer a{ color:var(--accent); font-weight:600; }

/* --- Cards / KPI --- */
.card{ background:var(--white); border:1px solid var(--light); border-radius:10px; padding:20px; }
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:24px 0; }
.kpi{ background:var(--white); border:1px solid var(--light); border-left:4px solid var(--primary); border-radius:8px; padding:16px 18px; }
.kpi.amber{ border-left-color:var(--amber); }
.kpi.blue{ border-left-color:var(--blue); }
.kpi.danger{ border-left-color:var(--danger); }
.kpi .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.kpi .value{ font-size:1.5rem; font-weight:700; color:var(--forest); margin-top:4px; }

.grid-2{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

/* --- Tables --- */
.table-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.92rem; }
th,td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--light); white-space:nowrap; }
th{ color:var(--text-muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
tr:hover td{ background:var(--offwhite); }

.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }
.badge-aktiv{ background:#DFF3E8; color:var(--success); }
.badge-kladde{ background:#EDE7D8; color:#8a7440; }
.badge-udlobet{ background:#F5DEDE; color:var(--danger); }
.badge-opsagt{ background:#e5e5e5; color:#666; }
.badge-gennemgang{ background:#DDEAF6; color:var(--blue); }

/* --- Forms --- */
.form-section{ background:var(--white); border:1px solid var(--light); border-radius:10px; padding:24px; margin-bottom:22px; }
.form-section h2{ font-size:1.15rem; margin-bottom:4px; }
.form-section .hint{ color:var(--text-muted); font-size:.85rem; margin-bottom:16px; }
.field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
label{ display:block; font-size:.85rem; font-weight:600; color:var(--forest); margin-bottom:5px; }
input,select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--sage); border-radius:6px;
  background:var(--input-bg); font-family:inherit; font-size:.92rem; color:var(--text);
}
textarea{ min-height:70px; resize:vertical; }
.field{ margin-bottom:14px; }
.repeat-row{ border:1px dashed var(--sage); border-radius:8px; padding:16px; margin-bottom:12px; position:relative; }
.repeat-row .remove-row{ position:absolute; top:10px; right:10px; }
.add-row-btn{ background:none; border:1px dashed var(--primary); color:var(--primary); padding:8px 16px; border-radius:6px; cursor:pointer; font-size:.85rem; }
.add-row-btn:hover{ background:var(--offwhite); }

.form-actions{ display:flex; gap:14px; justify-content:flex-end; margin-top:20px; }
.msg{ padding:10px 14px; border-radius:6px; font-size:.9rem; margin:14px 0; }
.msg-error{ background:#F5DEDE; color:var(--danger); }
.msg-ok{ background:#DFF3E8; color:var(--success); }

.auth-box{ max-width:420px; margin:70px auto; background:var(--white); border:1px solid var(--light); border-radius:12px; padding:34px; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:22px; }
.auth-tabs button{ flex:1; padding:9px; border:1px solid var(--sage); background:var(--offwhite); border-radius:6px; cursor:pointer; font-weight:600; color:var(--text-muted); }
.auth-tabs button.active{ background:var(--forest); color:var(--white); border-color:var(--forest); }

.filters-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; align-items:end; }
.filters-row .field{ margin-bottom:0; min-width:160px; }

.detail-panel{ background:var(--offwhite); border-top:1px solid var(--light); padding:16px 20px; }
.detail-panel h4{ margin:14px 0 6px; color:var(--forest); font-size:.95rem; }
.detail-panel .detail-actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--text-muted); }

/* --- Ny/rediger-kontrakt vist inde i modal-boksen (iframe fra kontrakter.html) ---
   Skjuler topnavigationen så al pladsen går til formularfelterne. */
body.embed-mode #app-nav-mount{ display:none; }
body.embed-mode .app-main{ padding-top:22px; }

/* --- Modal ("Rediger kontrakt" åbner i en boks i stedet for at forlade siden) --- */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(18,33,58,.55); padding:24px;
  align-items:center; justify-content:center;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  position:relative; width:min(980px,100%); height:min(880px,92vh);
  background:var(--offwhite); border-radius:12px; overflow:hidden;
  box-shadow:0 24px 60px rgba(18,33,58,.35);
}
.modal-box iframe{ display:block; width:100%; height:100%; border:0; }
.modal-close{
  position:absolute; top:12px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--light);
  background:var(--white); color:var(--forest); font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(18,33,58,.15);
}
.modal-close:hover{ background:var(--offwhite); }
@media (max-width:640px){
  .modal-overlay{ padding:0; }
  .modal-box{ width:100%; height:100%; border-radius:0; }
}