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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Moovon Brand Colors ── */
  --moovon-navy:    #1C3557;
  --moovon-blue:    #1A5FA8;
  --moovon-mid:     #2472B8;
  --moovon-light:   #4A90D9;
  --moovon-pale:    #E8F2FB;

  /* ── UI Neutrals ── */
  --bg:        #F0F3F7;
  --surface:   #FFFFFF;
  --surface2:  #F7F9FC;
  --border:    #DDE3EC;
  --border-strong: #C2CCDA;
  --text:      #1A2233;
  --text-muted:#5C6B80;
  --text-light:#9AA5B4;

  /* ── Status colors ── */
  --green:     #17875C;
  --green-light:#E3F5ED;
  --red:       #C93535;
  --red-light: #FAEAEA;
  --amber:     #D4820A;
  --amber-light:#FEF6E4;
  --purple:    #6340A0;
  --purple-light:#F0EAFA;
  --teal:      #0B8FA0;
  --teal-light:#E0F5F8;

  --radius:    8px;
  --radius-sm: 5px;
  --shadow:    0 1px 3px rgba(28,53,87,.07), 0 1px 2px rgba(28,53,87,.04);
  --shadow-md: 0 4px 14px rgba(28,53,87,.10);
  --shadow-lg: 0 8px 28px rgba(28,53,87,.14);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

/* ══ SIDEBAR ══ */
nav {
  width: 228px;
  min-width: 228px;
  background: var(--moovon-navy);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.nav-logo {
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
}
.nav-logo-fallback {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo-fallback .logo-m {
  width: 32px; height: 32px;
  background: var(--moovon-blue);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: white;
}
.nav-subtitle {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 500;
}

.nav-section {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.28);
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 14px 20px 5px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active {
  background: var(--moovon-blue);
  color: #fff;
  font-weight: 600;
}
.nav-item.active::before {
  content:'';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--moovon-light);
  border-radius: 0 2px 2px 0;
}
.nav-icon { font-size: 15px; width: 18px; text-align:center; }
.nav-badge {
  margin-left: auto;
  background: var(--amber);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.nav-footer {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 32px; height: 32px;
  background: var(--moovon-blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}
.avatar-info { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.35; }
.avatar-info strong { display: block; color: #fff; font-size: 12px; }

/* ══ MAIN ══ */
main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ══ TOPBAR ══ */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  box-shadow: 0 1px 0 var(--border);
}
.topbar-title { font-size: 15px; font-weight: 700; flex:1; color: var(--text); }
.topbar-search { position: relative; width: 256px; }
.topbar-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--surface2);
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border .15s;
}
.topbar-search input:focus { border-color: var(--moovon-blue); background: #fff; }
.search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; }

.btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--moovon-blue); color:#fff; }
.btn-primary:hover { background: var(--moovon-mid); }
.btn-secondary { background: var(--surface); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background: var(--surface2); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-green { background: var(--green); color:#fff; }
.btn-green:hover { background: #126e4b; }

/* ══ CONTENT ══ */
.content { flex:1; overflow-y:auto; padding:22px 24px; }

/* ══ KPI ROW ══ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--moovon-blue);
}
.kpi-label { font-size: 10.5px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.kpi-value { font-size: 22px; font-weight:800; margin: 4px 0 2px; letter-spacing:-.6px; color:var(--moovon-navy); }
.kpi-delta { font-size: 11px; font-weight: 500; }
.kpi-delta.up { color:var(--green); }
.kpi-delta.warn { color:var(--amber); }
.kpi-delta.down { color:var(--red); }

/* ══ FILTER ROW ══ */
.filter-row { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.filter-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--moovon-blue); }
.view-tabs {
  display:flex; gap:2px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:3px;
}
.view-tab {
  padding: 4px 12px; border-radius:3px; font-size:12px; font-weight:500;
  cursor:pointer; color:var(--text-muted); transition:all .15s;
}
.view-tab.active { background:var(--moovon-blue); color:#fff; }

/* ══ PIPELINE BOARD ══ */
.pipeline-board { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; min-height:500px; align-items:flex-start; }
.pipeline-col {
  min-width:232px; max-width:232px;
  background:var(--surface2);
  border-radius:var(--radius);
  border: 1px solid var(--border);
  display:flex; flex-direction:column;
  max-height:560px;
}
.pipeline-col-header {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.stage-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.pipeline-col-header h3 { font-size:12px; font-weight:700; flex:1; }
.stage-count {
  background:var(--border); color:var(--text-muted);
  font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:10px;
}
.pipeline-cards { overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; flex:1; }

/* ══ DEAL CARD ══ */
.deal-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 13px;
  cursor:pointer;
  transition: box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow);
}
.deal-card:hover { box-shadow:var(--shadow-md); border-color:var(--moovon-blue); }
.deal-card-title { font-size:12px; font-weight:600; line-height:1.35; margin-bottom:5px; }
.deal-card-org { font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.region-tag {
  display:inline-block; padding:2px 7px;
  border-radius:10px; font-size:10px; font-weight:600; margin-bottom:6px;
}
.product-tag {
  display:inline-block; padding:2px 7px;
  border-radius:4px; font-size:10px; font-weight:600;
  background:var(--moovon-pale); color:var(--moovon-blue);
  margin-bottom:6px; margin-left:4px;
}
.deal-meta { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.deal-value { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; color:var(--moovon-blue); }
.deal-deadline { font-size:10px; color:var(--text-muted); }
.deal-deadline.urgent { color:var(--red); font-weight:600; }
.deal-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--border);
}
.deal-owner { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--text-muted); }
.owner-av {
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:700; color:white; flex-shrink:0;
}
.prob-bar { height:3px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden; }
.prob-fill { height:100%; border-radius:2px; }

.stage-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:20px;
  font-size:10px; font-weight:600; white-space:nowrap;
}

/* Stage colors */
.dot-pub { background:#1A5FA8; }
.dot-anbud { background:#D4820A; }
.dot-kval { background:#6340A0; }
.dot-till { background:#17875C; }
.dot-avtal { background:#0B8FA0; }

.s-pub { background:var(--moovon-pale); color:var(--moovon-blue); }
.s-anbud { background:var(--amber-light); color:var(--amber); }
.s-kval { background:var(--purple-light); color:var(--purple); }
.s-till { background:var(--green-light); color:var(--green); }
.s-avtal { background:var(--teal-light); color:var(--teal); }
.s-for { background:var(--red-light); color:var(--red); }

/* Region tags */
.r-sthlm { background:#dbeafe; color:#1e3a8a; }
.r-vg { background:#dcfce7; color:#14532d; }
.r-skane { background:#fef9c3; color:#713f12; }
.r-ost { background:#fee2e2; color:#7f1d1d; }
.r-dal { background:#f3e8ff; color:#4c1d95; }
.r-norr { background:#e0f2fe; color:#0c4a6e; }

/* ══ LIST TABLE ══ */
.list-table { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.list-table table { width:100%; border-collapse:collapse; font-size:12px; }
.list-table thead th {
  background:var(--surface2); padding:10px 14px;
  text-align:left; font-weight:700; color:var(--text-muted);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.list-table tbody tr { border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.list-table tbody tr:last-child { border-bottom:none; }
.list-table tbody tr:hover { background:var(--surface2); }
.list-table tbody td { padding:10px 14px; }
.mono { font-family:'JetBrains Mono',monospace; font-size:11px; }

/* ══ DASHBOARD ══ */
.dash-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.dash-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow);
}
.dash-card.wide { grid-column:1/-1; }
.dash-card h3 { font-size:13px; font-weight:700; margin-bottom:14px; color:var(--moovon-navy); display:flex; justify-content:space-between; align-items:center; }
.bar-chart { display:flex; align-items:flex-end; gap:6px; height:90px; }
.bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bar { width:100%; border-radius:4px 4px 0 0; background:var(--moovon-blue); opacity:.82; transition:opacity .15s; cursor:pointer; }
.bar:hover { opacity:1; }
.bar-lbl { font-size:9px; color:var(--text-muted); }
.bar-val { font-size:9px; font-weight:700; color:var(--text); }
.hbar-list { display:flex; flex-direction:column; gap:8px; }
.hbar-row { display:flex; align-items:center; gap:10px; }
.hbar-name { font-size:11px; font-weight:500; width:130px; flex-shrink:0; }
.hbar-track { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.hbar-fill { height:100%; border-radius:3px; }
.hbar-count { font-size:11px; color:var(--text-muted); width:24px; text-align:right; }
.prod-list { display:flex; flex-direction:column; gap:9px; }
.prod-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; background:var(--surface2);
  border-radius:var(--radius-sm); border:1px solid var(--border);
  font-size:12px;
}
.prod-name { font-weight:600; }
.prod-stats { display:flex; gap:14px; }
.prod-stat .num { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; }
.prod-stat .lbl { font-size:9px; color:var(--text-muted); text-transform:uppercase; }

/* ══ PAGE SECTIONS ══ */
.page-section { display:none; }
.page-section.active { display:block; }

/* ══ DETAIL PANEL ══ */
.detail-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(10,20,40,.45); z-index:100; justify-content:flex-end;
}
.detail-overlay.open { display:flex; }
.detail-panel {
  width:560px; height:100%;
  background:var(--surface); overflow-y:auto;
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  animation:slideIn .2s ease;
}
@keyframes slideIn { from{transform:translateX(40px);opacity:0} to{transform:none;opacity:1} }
.detail-header {
  padding:20px 24px 14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; gap:12px;
  background: linear-gradient(135deg, var(--moovon-navy) 0%, var(--moovon-blue) 100%);
  flex-shrink:0;
}
.detail-header-info { flex:1; }
.detail-header h2 { font-size:15px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:4px; }
.detail-header .detail-org { font-size:12px; color:rgba(255,255,255,0.65); }
.detail-close {
  width:28px; height:28px;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.1);
  cursor:pointer; font-size:15px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.detail-close:hover { background:rgba(255,255,255,0.2); }
.detail-stage-bar {
  display:flex; padding:14px 22px;
  border-bottom:1px solid var(--border); flex-shrink:0;
  background:var(--surface2);
}
.stage-step {
  flex:1; text-align:center; font-size:10px; font-weight:500;
  color:var(--text-muted); cursor:pointer; position:relative; padding-bottom:8px;
}
.stage-step::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--border); border-radius:2px;
}
.stage-step.done::after { background:var(--green); }
.stage-step.current::after { background:var(--moovon-blue); }
.stage-step.done, .stage-step.current { color:var(--text); font-weight:700; }
.detail-body { flex:1; padding:20px 24px; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-content:start; }
.detail-full { grid-column:1/-1; }
.detail-full h4 {
  font-size:10.5px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border);
}
.field-row { display:flex; flex-direction:column; gap:3px; }
.field-lbl { font-size:10px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.field-val { font-size:13px; font-weight:500; }
.field-val.big { font-size:18px; font-weight:800; font-family:'JetBrains Mono',monospace; color:var(--moovon-blue); }

/* ══ MODAL ══ */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border-radius:var(--radius); width:1020px; max-width:96vw; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:fadeUp .2s ease; }
@keyframes fadeUp { from{transform:translateY(16px);opacity:0} to{transform:none;opacity:1} }
.modal-header {
  padding:16px 22px 13px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg, var(--moovon-navy), var(--moovon-blue));
}
.modal-header h3 { font-size:14px; font-weight:700; color:#fff; }
.modal-close { background:none; border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:15px; cursor:pointer; padding:2px 7px; border-radius:4px; }
.modal-section-label { font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.modal-body { padding:20px 22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.form-group { margin-bottom:13px; }
.form-group label { display:block; font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.form-ctrl { width:100%; padding:8px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:13px; background:var(--surface2); color:var(--text); outline:none; transition:border .15s; }
.form-ctrl:focus { border-color:var(--moovon-blue); background:#fff; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ══ Empty / placeholder pages ══ */
.page-placeholder { text-align:center; padding:60px 0; color:var(--text-muted); }
.page-placeholder .icon { font-size:48px; margin-bottom:14px; }
.page-placeholder h2 { font-size:17px; color:var(--text); margin-bottom:6px; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }

/* ══ TED PAGE ══ */
.ted-layout { display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:start; }
.ted-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.ted-panel-hdr { padding:11px 14px; border-bottom:1px solid var(--border); font-size:12px; font-weight:700; display:flex; align-items:center; gap:8px; }
.ted-panel-body { padding:14px; }
.ted-filter-grp { margin-bottom:16px; }
.ted-filter-lbl { font-size:9.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; display:block; }
.ted-ctrl { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:12px; background:var(--surface2); color:var(--text); outline:none; transition:border .15s; }
.ted-ctrl:focus { border-color:var(--moovon-blue); background:#fff; }
.date-field { position:relative; display:flex; align-items:center; }
.date-field .date-text { flex:1; padding-right:30px; }
.date-field .date-native { position:absolute; right:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.date-field .date-btn { position:absolute; right:4px; background:none; border:none; cursor:pointer; font-size:14px; line-height:1; padding:3px; opacity:.7; }
.date-field .date-btn:hover { opacity:1; }
.date-text.invalid { border-color:#c0392b !important; background:#fdecea; }
.ted-words-bar { display:flex; align-items:center; gap:8px; cursor:pointer; padding:5px 8px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); }
.ted-words-bar:hover { background:var(--surface3,var(--surface2)); border-color:var(--moovon-blue); }
.ted-words-status { font-size:11px; color:var(--text-muted); margin-left:auto; }
.ted-words-chevron { font-size:10px; color:var(--text-muted); transition:transform .2s; }
.ted-chip-del { background:none; border:none; cursor:pointer; font-size:11px; color:inherit; opacity:.5; padding:0 0 0 2px; line-height:1; }
.ted-chip-del:hover { opacity:1; }
.ted-cpv-tags { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.ted-cpv-tag { display:flex; align-items:center; gap:8px; padding:5px 10px; background:var(--moovon-pale); color:var(--moovon-blue); border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid #b8d0f5; }
.ted-cpv-tag small { font-weight:400; color:var(--text-secondary); font-size:11px; flex:1; }
.ted-cpv-tag.inactive { background:var(--surface2); color:var(--text-muted); border-color:var(--border); }
.ted-cpv-tag.inactive small { color:var(--text-muted); }
.ted-kw-tag { display:flex; align-items:center; gap:4px; padding:5px 10px; background:#e8f5e9; color:#2e7d32; border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid #a5d6a7; }
.ted-kw-tag > span { flex:1; }
.ted-kw-tag.inactive { background:var(--surface2); color:var(--text-muted); border-color:var(--border); }
.ted-kw-tag.required { background:#1C3557; color:#fff; border-color:#1C3557; }
.ted-kw-tag.required > span::before { content:"✓ "; }
.ted-ex-tag { display:flex; align-items:center; gap:4px; padding:5px 10px; background:#fdecea; color:#c0392b; border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid #f5b7b1; }
.ted-ex-tag > span { flex:1; }
.ted-ex-tag::before { content:"🚫"; font-size:9px; }
.ted-ex-tag.inactive { background:var(--surface2); color:var(--text-muted); border-color:var(--border); }
.ted-regions { display:flex; flex-direction:column; gap:4px; max-height:180px; overflow-y:auto; }
.ted-region-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:var(--radius-sm); cursor:pointer; font-size:12px; transition:background .1s; }
.ted-region-row:hover { background:var(--surface2); }
.ted-region-row input { accent-color:var(--moovon-blue); width:13px; height:13px; cursor:pointer; }
.ted-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.ted-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:11px 13px; box-shadow:var(--shadow); }
.ted-stat-lbl { font-size:9.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600; margin-bottom:3px; }
.ted-stat-val { font-size:19px; font-weight:700; letter-spacing:-.5px; }
.ted-stat-sub { font-size:10px; color:var(--text-muted); margin-top:2px; }
.ted-notice { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:8px; box-shadow:var(--shadow); transition:box-shadow .15s,border-color .15s; position:relative; }
.ted-notice:hover { box-shadow:var(--shadow-md); border-color:var(--moovon-blue); }
.ted-notice.is-new { border-left:3px solid var(--green); }
.ted-notice-hdr { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.ted-type { padding:2px 7px; border-radius:4px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; flex-shrink:0; margin-top:2px; }
.ted-type-cn { background:var(--moovon-pale); color:var(--moovon-blue); }
.ted-type-can { background:var(--green-light); color:var(--green); }
.ted-type-pin { background:var(--amber-light); color:var(--amber); }
.ted-notice-title { font-size:12px; font-weight:600; line-height:1.4; flex:1; }
.ted-notice-title a { color:var(--text); text-decoration:none; }
.ted-notice-title a:hover { color:var(--moovon-blue); text-decoration:underline; }
.ted-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; padding:9px 11px; background:var(--surface2); border-radius:var(--radius-sm); }
.ted-meta-lbl { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600; margin-bottom:2px; }
.ted-meta-val { font-size:11px; font-weight:500; }
.ted-meta-val.mono { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--moovon-blue); }
.ted-meta-val.urgent { color:var(--red); font-weight:600; }
.ted-notice-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.ted-cpv-chips { display:flex; flex-wrap:wrap; gap:4px; }
.ted-cpv-chip { padding:2px 6px; background:var(--purple-light); color:var(--purple); border-radius:4px; font-size:9.5px; font-weight:600; font-family:'JetBrains Mono',monospace; }
.ted-new-badge { position:absolute; top:-5px; right:12px; background:var(--green); color:#fff; font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; text-transform:uppercase; letter-spacing:.4px; }
.ted-spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--moovon-blue); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 14px; }
@keyframes spin { to { transform:rotate(360deg); } }
.doc-mini-spinner { display:inline-block; width:11px; height:11px; border:2px solid var(--border); border-top-color:var(--moovon-blue); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; }
.ted-state { display:none; text-align:center; padding:50px 0; color:var(--text-muted); }
.ted-state.active { display:block; }
.ted-error { display:none; background:var(--red-light); border:1px solid #f5c6c6; border-radius:var(--radius); padding:11px 14px; margin-bottom:12px; font-size:12px; color:var(--red); }
.ted-error.active { display:block; }
.ted-results-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ted-results-count { font-size:13px; font-weight:600; }
.ted-results-count span { color:var(--moovon-blue); font-family:'JetBrains Mono',monospace; }
.ted-sort-tabs { display:flex; gap:2px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px; }
.ted-sort-tab { padding:3px 9px; border-radius:3px; font-size:11px; font-weight:500; cursor:pointer; color:var(--text-muted); transition:all .15s; }
.ted-sort-tab.active { background:var(--moovon-blue); color:#fff; }
.ted-pag { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.ted-page-btn { padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:11px; cursor:pointer; background:var(--surface); color:var(--text); transition:all .15s; }
.ted-page-btn:hover { background:var(--surface2); }
.ted-page-btn.active { background:var(--moovon-blue); color:#fff; border-color:var(--moovon-blue); }
.ted-page-btn:disabled { opacity:.4; cursor:not-allowed; }
.ted-sidebar-sticky { position:sticky; top:0; display:flex; flex-direction:column; gap:12px; }

/* ══ ANVÄNDARE ══ */
.user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.user-card.active-user {
  border-color: var(--moovon-blue);
  border-top: 3px solid var(--moovon-blue);
}
.user-card-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px; font-weight: 700;
  margin-bottom: 4px;
}
.user-card-name { font-size: 14px; font-weight: 700; }
.user-card-badge {
  font-size: 10px; font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
}
.user-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.user-switch-item:last-child { border-bottom: none; }
.user-switch-item:hover { background: var(--surface2); }
.user-switch-item.active { font-weight: 700; }

/* ══ PRODUKTKATALOG ══ */
.produkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.produkt-kort {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
}
.produkt-kort:hover { box-shadow: var(--shadow-md); border-color: var(--moovon-blue); }
.produkt-bild-wrap {
  display: block;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 12px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.produkt-bild-wrap img {
  max-height: 126px;
  max-width: 100%;
  object-fit: contain;
}
.produkt-bild-fallback {
  font-size: 40px;
  color: var(--text-light);
}
.produkt-info {
  padding: 12px 14px 8px;
  flex: 1;
}
.produkt-kategori-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--moovon-blue);
  background: var(--moovon-pale);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.produkt-namn {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 5px;
  color: var(--moovon-navy);
}
.produkt-artnr {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}
.produkt-actions {
  padding: 8px 14px 12px;
  display: flex;
  gap: 6px;
}

/* ══ ADMIN – RADERINGSKNAPP ══ */
.admin-delete-btn {
  display: none;
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: var(--red-light);
  border: 1px solid #f5c6c6;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  z-index: 5;
  padding: 0;
}
.admin-mode .admin-delete-btn { display: flex; }
.admin-mode .deal-card:hover .admin-delete-btn { opacity: 1; }
.admin-delete-btn-inline {
  background: var(--red-light);
  border: 1px solid #f5c6c6;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  color: var(--red);
  display: none;
}
.admin-mode .admin-delete-btn-inline { display: inline-block; }
.delete-th { width: 40px; }
/* Admin-badge i sidomeny */
.admin-mode .nav-footer::after {
  content: 'ADMIN';
  position: absolute;
  top: -8px; right: 12px;
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ══════════════════════════════
   SVERIGEKARTA
══════════════════════════════ */
.karta-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 20px;
  align-items: start;
}
.karta-map-col {
  position: relative;
}
.karta-panel-col {
  min-width: 0;
}
.karta-panel-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 300px;
}
.karta-panel-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.karta-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.karta-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}
.karta-panel-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.karta-panel-section:last-child { border-bottom: none; }
.karta-panel-sek-rubrik {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.karta-akt-rad {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background .1s;
  position: relative;
}
.karta-akt-rad:hover { background: var(--surface2); }
.karta-akt-rad.klar { color: var(--green); }
.karta-akt-rad.klar span { text-decoration: line-through; opacity: .7; }
.karta-akt-rad input[type=checkbox] { accent-color: var(--green); width: 15px; height: 15px; flex-shrink:0; }
.karta-del-akt {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  opacity: 0;
  padding: 2px 5px;
  border-radius: 3px;
}
.karta-akt-rad:hover .karta-del-akt { opacity: 1; }
.karta-del-akt:hover { background: var(--red-light, #fee); color: var(--red); }

/* Tooltip */
.karta-tooltip {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  min-width: 160px;
  max-width: 220px;
  z-index: 100;
  pointer-events: none;
  line-height: 1.5;
}

/* Legend */
.karta-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.karta-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}
.karta-leg-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Möteslogg ── */
.karta-mote-rad {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.karta-mote-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.karta-mote-typ {
  font-weight: 600;
  color: var(--moovon-navy);
  flex: 1;
}
.karta-mote-datum {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.karta-mote-kontakt {
  color: var(--text-muted);
  font-size: 11px;
  margin-bottom: 2px;
}
.karta-mote-notat {
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ══ KALENDER ══ */
.kal-vdag {
  font-size: 11px;
  font-weight: 600;
  color: var(--moovon-navy);
  text-align: center;
  padding: 4px 0;
}
.kal-cell {
  min-height: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  vertical-align: top;
  overflow: hidden;
}
.kal-cell-tom {
  background: transparent;
  border-color: transparent;
}
.kal-idag {
  border-color: var(--moovon-blue);
  box-shadow: 0 0 0 1px var(--moovon-blue);
}
.kal-idag .kal-dag-nr {
  background: var(--moovon-blue);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kal-dag-nr {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
  line-height: 20px;
  padding-left: 2px;
}
.kal-event-chip {
  font-size: 9.5px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.kal-event-chip:hover {
  filter: brightness(0.93);
}

/* ══ ÄRENDEN ══ */
.arenden-tab {
  transition: background .15s, color .15s;
}
.arenden-tab.active {
  background: var(--moovon-navy) !important;
  color: #fff !important;
}
.arenden-tab:not(.active) {
  background: transparent !important;
  color: var(--text-muted) !important;
}
.arende-rad {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.arende-rad:hover  { border-color: var(--moovon-blue); background: var(--surface2); }
.arende-rad.aktiv  { border-color: var(--moovon-blue); border-left: 3px solid var(--moovon-blue); background: var(--surface2); }
.arende-nr {
  font-size: 10px;
  font-weight: 700;
  color: var(--moovon-blue);
  font-family: var(--font-mono, monospace);
  background: var(--moovon-pale, #e8f0fb);
  padding: 1px 6px;
  border-radius: 4px;
}
.arende-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}
.stt-ny   { background: #e8f0fb; color: #1A5FA8; }
.stt-pag  { background: #fef3e2; color: #D4820A; }
.stt-van  { background: #f5eefa; color: #8e44ad; }
.stt-lost { background: #e8f9f0; color: #17875C; }
.stt-st   { background: var(--surface2); color: var(--text-muted); }
.arende-prio { font-size: 10px; font-weight: 600; }
.arende-detalj-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* ══ UTLÅN ══ */
.ul-lannr {
  font-size: 10px;
  font-weight: 700;
  color: var(--moovon-blue);
  background: var(--moovon-pale);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .4px;
  font-family: monospace;
}
.ul-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.ul-aktiv  { background: #e8f0fb; color: #1A5FA8; }
.ul-fors   { background: #fdecea; color: #c0392b; }
.ul-aterl  { background: #e8f9f0; color: #17875C; }
.utlan-rad {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.utlan-rad:hover  { background: var(--surface2); }
.utlan-rad.aktiv  { background: var(--moovon-pale); border-left: 3px solid var(--moovon-blue); }
.utlan-pam-box {
  background: #fdecea;
  border: 1px solid #f5b7b1;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.utlan-pam-rubrik {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}
.utlan-pam-rad {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: white;
  border: 1px solid #f5c6c6;
  border-radius: 6px;
  margin-bottom: 6px;
}
.stt-till { background: #fdecea; color: #c0392b; }

/* ══ PERSONAL & GANTT ══ */
.gantt-container {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr 70px;
  gap: 0;
  align-items: center;
}
.gantt-rad {
  display: contents;
  cursor: pointer;
}
.gantt-rad > div {
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  min-height: 46px;
  display: flex;
  align-items: center;
}
.gantt-rad:hover > div { background: var(--surface2); }
.gantt-namn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px !important;
  overflow: hidden;
}
.gantt-bar-wrap {
  position: relative;
  height: 36px !important;
  margin: 4px 0;
}
.gantt-summa {
  padding-left: 8px !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
}
.gantt-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.personal-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.personal-rad:hover { background: var(--surface2); }
.personal-rad.aktiv { background: var(--moovon-pale); border-left: 3px solid var(--moovon-blue); }

/* ══ ANBUD – bibliotek & ska-krav ══ */
.anbud-tab {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .12s;
}
.anbud-tab.active { background: var(--surface); color: var(--moovon-navy); box-shadow: var(--shadow); }
.anbud-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
}
.anbud-chip:hover { border-color: var(--moovon-blue); }
.anbud-chip.aktiv { background: var(--moovon-blue); color: #fff; border-color: var(--moovon-blue); }
.anbud-kort {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.anbud-kat-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--moovon-blue);
  background: var(--moovon-pale);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.anbud-tagg { font-size: 10px; color: var(--text-muted); background: var(--surface2); padding: 2px 7px; border-radius: 4px; }
.krav-rubrik { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.krav-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 6px;
}
.krav-rad.uppfyllt { background: var(--surface2); border-color: #a9dfbf; }
.krav-typ-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }

/* ── Dokumentvisare (helskärm) ───────────────────────────────────────────── */
.dv-section { margin-bottom: 20px; }
.dv-section h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 6px; }
.dv-section p, .dv-section ul, .dv-section ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.dv-section p { padding-left: 0; }
.dv-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dv-kv span { font-weight: 600; color: var(--navy); white-space: nowrap; }