/* ===== Pastell, stramt, professionellt – justera ENDAST dessa vid behov ===== */
:root{
  --bg:#f9fbff; --card:#ffffff; --text:#1e2433; --muted:#6d7a90;
  --primary:#6c8eff; --accent:#5edbb1; --danger:#ff6b6b; --border:rgba(20,28,44,0.10);
  --stripe:#f3f6ff; --hover:#eef3ff;
  --p1:#6c8eff;  --p2:#5edbb1;  --p3:#ffc97a; /* KPI-accenter */
  --r:10px; --r-sm:8px;
}

/* ===== Bas ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px; line-height:1.45; font-variant-numeric:tabular-nums;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--border);
}
.brand{font-weight:700; letter-spacing:.2px}
.topnav .nav-link{color:var(--muted);text-decoration:none;margin-left:10px;padding:6px 8px;border-radius:6px}
.topnav .nav-link:hover,.topnav .nav-link.active{background:var(--hover);color:var(--text)}

/* ===== Layout ===== */
.app{
  display:grid; grid-template-columns:210px 1fr; gap:16px;
  max-width:980px; margin:20px auto; padding:0 12px;
}
.sidebar{
  position:sticky; top:64px; align-self:start;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:10px;
}
.section-title{font-size:11px;text-transform:uppercase;color:var(--muted);margin:8px 8px 6px;letter-spacing:.4px}
.side-link{display:block;padding:8px 10px;color:var(--text);text-decoration:none;border-radius:8px}
.side-link:hover{background:var(--hover)}
.side-link.active{background:linear-gradient(180deg,#eef3ff,#fff); border:1px solid var(--border)}
.panel.hidden,.route.hidden{display:none!important}
.content{min-width:0}

/* ===== Typografi ===== */
.page-title{margin:0 0 2px; font-size:22px; font-weight:700}
.page-sub{margin:0 0 10px; color:var(--muted); font-size:13px}

/* ===== Cards ===== */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* ===== Form ===== */
.form .row{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.form .row.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
label{font-size:12px;color:var(--muted)}
input,select{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:8px;color:var(--text)}
.btn{
  background:linear-gradient(180deg, var(--p1), #5879f5);
  color:#fff;border:0;border-radius:var(--r-sm);padding:8px 12px;font-weight:600;cursor:pointer
}
.btn:hover{filter:brightness(1.04)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ===== KPI ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px}
.kpi .label{font-size:11px;color:var(--muted)}
.kpi .value{font-size:18px;font-weight:700}
.kpi-grid .kpi:nth-child(1){ border-top:3px solid var(--p1) }
.kpi-grid .kpi:nth-child(2){ border-top:3px solid var(--p2) }
.kpi-grid .kpi:nth-child(3){ border-top:3px solid var(--p3) }

/* ===== Tabeller ===== */
.table-wrap{width:100%; overflow:auto; border:1px solid var(--border); border-radius:var(--r); background:#fff}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.table thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg,#f5f7ff 0%, #f1f5ff 100%);
  border-bottom:1px solid var(--border); padding:6px 8px; text-align:left; font-weight:600; white-space:nowrap;
}
.table tbody td{padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap}
.table tbody tr:nth-child(odd){background:var(--stripe)}
.table tbody tr:hover{background:#f0f4ff}

/* Runs: sticky första kolumnen + numerik högerställd + bredder */
#runs-table .sticky,#runs-table td:first-child{position:sticky; left:0; background:#f7f9ff; border-right:1px solid var(--border); z-index:2}
#runs-table td:nth-child(4),#runs-table td:nth-child(5),#runs-table td:nth-child(6),
#runs-table td:nth-child(7),#runs-table td:nth-child(8),#runs-table td:nth-child(9),
#runs-table td:nth-child(10),#runs-table td:nth-child(11){text-align:right}
#runs-table th:nth-child(1){min-width:190px}
#runs-table th:nth-child(2){width:60px}
#runs-table th:nth-child(3){width:96px}
#runs-table th:nth-child(4){width:88px}
#runs-table th:nth-child(5){width:70px}
#runs-table th:nth-child(6){width:110px}
#runs-table th:nth-child(7){width:90px}
#runs-table th:nth-child(8){width:90px}
#runs-table th:nth-child(9){width:100px}
#runs-table th:nth-child(10){width:110px}
#runs-table th:nth-child(11){width:100px}
#runs-table th:nth-child(12){width:92px}

/* Övriga tabeller: numerik högerställd */
#pipeline-table td:nth-child(3),#pipeline-table td:nth-child(4),#pipeline-table td:nth-child(5),
#utilization-table td:nth-child(4),#utilization-table td:nth-child(5),
#economics-table td:nth-child(3),#economics-table td:nth-child(4),
#economics-table td:nth-child(5),#economics-table td:nth-child(6){text-align:right}

/* ===== Taggar (Profil) ===== */
.tag{
  display:inline-block; padding:3px 8px; border-radius:999px;
  font-size:12px; line-height:1; border:1px solid var(--border); background:#fff;
}
.tag--blue{  background:#eef3ff; border-color:#dfe6ff; color:#223a90 }   /* Volymdrivare */
.tag--green{ background:#e9fbf3; border-color:#d1f5e5; color:#0d6b4d }   /* Vinstdrivare */
.tag--gray{  background:#f5f7fb; border-color:#e5e9f2; color:#4a556e }   /* Neutral */

/* ===== Katalog ===== */
.catalog-host .table-wrap{margin-top:6px}
.catalog-table thead th:nth-child(1){min-width:220px}
.catalog-table thead th:nth-child(2){width:100px}
.catalog-table thead th:nth-child(3){width:140px}
.catalog-table thead th:nth-child(4){width:90px; text-align:right}
.catalog-table thead th:nth-child(5){width:120px; text-align:right}
.catalog-table thead th:nth-child(6){width:100px; text-align:right}
.catalog-table td:nth-child(4),.catalog-table td:nth-child(5),.catalog-table td:nth-child(6){text-align:right}
.catalog-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:28px 12px; gap:6px; color:var(--muted);
  background:#fff; border-radius:var(--r); border:1px dashed var(--border);
}
.catalog-empty .icon{font-size:28px}
.catalog-empty .title{font-weight:700; color:var(--text)}
.catalog-empty .sub{font-size:12px}

/* ===== Bemanning ===== */
.week-grid{margin-top:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{background:#fff;border:1px dashed var(--border);border-radius:8px;padding:8px}
.day h4{margin:0 0 4px;font-size:11px;color:var(--muted)}

/* ===== Övrigt ===== */
.list-clean{list-style:none; padding-left:0; margin:0}
.list-clean li{padding:6px 8px; border-bottom:1px solid var(--border); font-size:13px; color:#2a3447}
.list-clean li:last-child{border-bottom:0}
.table-footnote{margin:8px 0 0; font-size:12px; color:var(--muted)}
.pre{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px;white-space:pre-wrap}
.footer{max-width:980px;margin:20px auto;padding:0 12px;color:var(--muted)}

/* ===== Responsivitet ===== */
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
}