/* ===========================================================================
   KOMPONENTER – återanvändbara byggblock. Ingen modulspecifik CSS här.
   ======================================================================== */

/* ============================================================ KNAPPAR === */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-size:var(--fs-md);font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:all var(--t-fast);
}
.btn:hover{border-color:var(--n-300);background:var(--n-50);color:var(--text);text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn .ic{width:16px;height:16px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn--primary{background:var(--pp-600);border-color:var(--pp-600);color:#fff;font-weight:600}
.btn--primary:hover{background:var(--pp-700);border-color:var(--pp-700);color:#fff;box-shadow:var(--sh-purple)}
.btn--accent{background:var(--or-500);border-color:var(--or-500);color:var(--pp-900);font-weight:700}
.btn--accent:hover{background:#EFA800;border-color:#EFA800;color:var(--pp-900)}
.btn--ghost{background:none;border-color:transparent;color:var(--text-2)}
.btn--ghost:hover{background:var(--n-100)}
.btn--outline{background:none;border-color:var(--pp-300);color:var(--pp-600)}
.btn--outline:hover{background:var(--pp-50);border-color:var(--pp-500);color:var(--pp-700)}
.btn--danger{background:none;border-color:var(--err-bd);color:var(--err)}
.btn--danger:hover{background:var(--err);border-color:var(--err);color:#fff}
.btn--sm{padding:5px 10px;font-size:var(--fs-sm)}
.btn--sm .ic{width:14px;height:14px}
.btn--lg{padding:11px 20px;font-size:var(--fs-base)}
.btn--icon{padding:8px}
.btn--block{width:100%;justify-content:center}
.btn.is-active{background:var(--pp-600);border-color:var(--pp-600);color:#fff}

.btn-group{display:inline-flex;background:var(--n-100);border-radius:var(--r-sm);padding:3px;gap:2px}
.btn-group button{
  padding:5px 12px;border:none;background:none;border-radius:5px;
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);cursor:pointer;transition:all var(--t-fast);
}
.btn-group button:hover{color:var(--text)}
.btn-group button.is-active{background:var(--surface);color:var(--pp-600);font-weight:600;box-shadow:var(--sh-xs)}

/* ============================================================== KORT === */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);
}
.card__head{
  padding:13px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.card__title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700}
.card__body{padding:18px}
.card__body--tight{padding:12px}
.card__foot{padding:11px 18px;border-top:1px solid var(--border);background:var(--n-25);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* --- KPI-kort --------------------------------------------------------- */
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px 17px;box-shadow:var(--sh-xs);
  position:relative;overflow:hidden;
  transition:box-shadow var(--t-fast),transform var(--t-fast);
}
.kpi:hover{box-shadow:var(--sh-sm)}
.kpi__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.kpi__label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)}
.kpi__icon{
  width:30px;height:30px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--pp-50);color:var(--pp-600);
}
.kpi__icon .ic{width:17px;height:17px}
.kpi__value{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.kpi__meta{margin-top:6px;font-size:var(--fs-sm);color:var(--text-3);display:flex;align-items:center;gap:5px}
.kpi--accent .kpi__icon{background:var(--or-50);color:var(--or-700)}
.kpi--ok .kpi__icon{background:var(--ok-bg);color:var(--ok)}
.kpi--err .kpi__icon{background:var(--err-bg);color:var(--err)}
.kpi--info .kpi__icon{background:var(--info-bg);color:var(--info)}
.kpi__bar{height:4px;border-radius:2px;background:var(--n-100);margin-top:11px;overflow:hidden}
.kpi__bar i{display:block;height:100%;background:var(--pp-500);border-radius:2px}

.delta{font-weight:700;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:3px}
.delta--up{color:var(--ok)} .delta--down{color:var(--err)} .delta--flat{color:var(--text-3)}

/* ============================================================ BADGES === */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
  border:1px solid transparent;white-space:nowrap;
}
.badge .ic{width:12px;height:12px;stroke-width:2.2}
.badge--neutral{background:var(--n-100);color:var(--text-2);border-color:var(--border)}
.badge--purple{background:var(--pp-100);color:var(--pp-700);border-color:var(--pp-200)}
.badge--accent{background:var(--or-100);color:var(--or-900);border-color:var(--or-300)}
.badge--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.badge--warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.badge--err{background:var(--err-bg);color:var(--err);border-color:var(--err-bd)}
.badge--info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.badge--dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-full);
  background:var(--n-100);border:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--text-2);
}
.chip .ic{width:14px;height:14px;color:var(--text-3)}
.chip b{color:var(--text);font-weight:700}

/* --- Avatar ----------------------------------------------------------- */
.av{
  width:36px;height:36px;border-radius:var(--r-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);
  background:var(--pp-100);color:var(--pp-700);letter-spacing:-.02em;
}
.av--sm{width:28px;height:28px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.av--lg{width:48px;height:48px;font-size:var(--fs-lg)}
.av--round{border-radius:var(--r-full)}
.av--accent{background:var(--or-100);color:var(--or-900)}

/* =========================================================== TABELL === */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.tbl thead th{
  text-align:left;padding:9px 14px;
  background:var(--n-50);border-bottom:1px solid var(--border);
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-3);white-space:nowrap;position:sticky;top:0;z-index:2;
}
.tbl tbody td{padding:10px 14px;border-bottom:1px solid var(--n-100);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--pp-50)}
.tbl tbody tr.is-clickable{cursor:pointer}
.tbl .num-cell{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .actions{text-align:right;white-space:nowrap;opacity:0;transition:opacity var(--t-fast)}
.tbl tr:hover .actions{opacity:1}

/* ====================================================== LISTA/DETALJ === */
.split-list{
  width:308px;min-width:308px;background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
}
/* Sokruta och filter star still overst i listan */
.split-list__head{
  padding:11px 14px;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:9px;flex-shrink:0;
}
.split-list__body{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.split-detail{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg);min-width:0;min-height:0;
}

.list-item{
  padding:10px 14px;border-bottom:1px solid var(--n-100);cursor:pointer;
  border-left:3px solid transparent;transition:background var(--t-fast);
}
.list-item:hover{background:var(--n-50)}
.list-item.is-active{background:var(--pp-50);border-left-color:var(--pp-600)}
.list-item.is-alert{border-left-color:var(--err)}
.list-item__name{font-size:var(--fs-md);font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:6px}
.list-item.is-active .list-item__name{color:var(--pp-700)}
.list-item__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-3)}

/* ============================================================= FLIKAR === */
/* Flikarna klistrar sig fast overst i den rullande ytan. Da kan de aldrig
   hamna utanfor synfaltet - och man kan byta flik utan att rulla upp. */
.tabs{
  display:flex;gap:2px;border-bottom:1px solid var(--border);
  margin-bottom:18px;overflow-x:auto;
  position:sticky;top:0;z-index:3;background:var(--surface);
}
.modal-bd > .tabs{margin-top:-4px;padding-top:4px}
.tab{
  padding:9px 15px;font-size:var(--fs-md);font-weight:500;color:var(--text-2);
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:7px;transition:all var(--t-fast);
}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--pp-600);border-bottom-color:var(--pp-600);font-weight:600}
.tab .ic{width:16px;height:16px}
.tab-panel{display:none} .tab-panel.is-active{display:block}

/* ============================================================ MODALER === */
.modal-bg{
  position:fixed;inset:0;background:rgba(38,38,31,.42);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;z-index:300;
  padding:40px 16px;overflow-y:auto;
}
.modal-bg.is-open{display:flex}
.modal{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  width:100%;max-width:560px;animation:modal-in .18s var(--ease);
}
.modal--wide{max-width:860px} .modal--narrow{max-width:420px}
@keyframes modal-in{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
.modal-hd{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.modal-hd h3{font-size:var(--fs-xl)}
.modal-bd{padding:20px;display:flex;flex-direction:column;gap:14px;max-height:70vh;overflow-y:auto}

/* Inget i modalens kropp far krympas ihop.

   .modal-bd ar en flexkolumn med max-height. Ar innehallet hogre an rutan
   krymper flexalgoritmen barnen. Ett barn vars overflow inte ar 'visible' -
   som flikraden med overflow-x:auto - har ingen automatisk minimihojd och
   kan darfor tryckas ihop till NOLL. Sa forsvann flikarna Affar och Order:
   kvar blev bara flikradens underkant, en tunn linje overst i modalen. */
.modal-bd > *{flex-shrink:0}
/* flex-wrap kravs: med justify-content:flex-end svammar knappar som inte
   far plats ut PA VANSTER SIDA, utanfor rutan. Det var sa papperskorgen
   hamnade pa bakgrunden i motesdialogen. */
.modal-ft{
  padding:13px 20px;border-top:1px solid var(--border);background:var(--n-25);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex-wrap:wrap;
}
.modal-ft .spacer{flex:1 1 auto;min-width:0}
/* Papperskorgen halls till vanster aven nar raden bryts */
.modal-ft > .btn--danger:first-child{margin-right:auto;order:-1}

/* ============================================================ TOASTS === */
.toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:9px;z-index:400}
.toast{
  background:var(--n-900);color:#fff;padding:11px 16px;border-radius:var(--r-md);
  font-size:var(--fs-md);box-shadow:var(--sh-lg);
  display:flex;align-items:center;gap:9px;
  opacity:0;transform:translateX(20px);transition:all var(--t);max-width:380px;
}
.toast.is-show{opacity:1;transform:none}
.toast .ic{width:17px;height:17px}
.toast--ok{background:#1F5C43} .toast--err{background:#8E2C22} .toast--warn{background:#8A6100}

/* ============================================================= KANBAN === */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.kb-col{
  flex:1;min-width:212px;background:var(--n-100);
  border-radius:var(--r-lg);display:flex;flex-direction:column;max-height:calc(100vh - 260px);
}
.kb-col__head{padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.kb-col__title{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.kb-col__sum{font-family:var(--font-display);font-size:var(--fs-md);font-weight:800;color:var(--pp-700)}
.kb-col__body{padding:0 8px 8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:70px}
.kb-col.is-over{background:var(--pp-100);outline:2px dashed var(--pp-300);outline-offset:-2px}

.kb-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:11px 12px;cursor:grab;box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-fast),transform var(--t-fast);
}
.kb-card:hover{box-shadow:var(--sh-sm);border-color:var(--n-300)}
.kb-card.is-dragging{opacity:.45;transform:rotate(1.5deg)}
.kb-card__co{font-size:var(--fs-md);font-weight:600;margin-bottom:2px;line-height:1.3}
.kb-card__title{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:8px;line-height:1.35}
.kb-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kb-card__amount{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em}
.kb-card--grabber{border-left:3px solid var(--pp-500)}
.kb-card--purplepoint{border-left:3px solid var(--or-500)}

/* ========================================================== TIDSLINJE === */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:'';position:absolute;left:9px;top:5px;bottom:5px;width:1.5px;background:var(--border)}
.tl-item{position:relative;padding-bottom:16px}
.tl-item__dot{
  position:absolute;left:-26px;top:1px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--pp-600);
}
.tl-item__dot .ic{width:11px;height:11px}
.tl-item__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.tl-item__title{font-size:var(--fs-md);font-weight:600}
.tl-item__date{font-size:var(--fs-xs);color:var(--text-3)}
.tl-item__body{font-size:var(--fs-md);color:var(--text-2);white-space:pre-wrap;line-height:1.5}

/* ======================================================= TOMT LÄGE ===== */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:56px 20px;text-align:center;color:var(--text-3);min-height:220px;
}
.empty .ic{width:38px;height:38px;color:var(--n-300);stroke-width:1.3}
.empty__title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--text-2)}
.empty__text{font-size:var(--fs-md);max-width:340px}

.skeleton{background:linear-gradient(90deg,var(--n-100) 25%,var(--n-50) 50%,var(--n-100) 75%);
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:var(--r-sm);height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ======================================================== FRAMSTEG ===== */
.bar{height:7px;border-radius:4px;background:var(--n-100);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar i.p{background:var(--pp-500)} .bar i.o{background:var(--or-500)}
.bar i.g{background:var(--ok)} .bar i.r{background:var(--err)}

/* ======================================================== BANNER ======= */
.banner{
  display:flex;align-items:center;gap:11px;padding:11px 15px;
  border-radius:var(--r-md);border:1px solid;font-size:var(--fs-md);margin-bottom:16px;
}
.banner .ic{width:18px;height:18px;flex-shrink:0}
.banner--warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.banner--err{background:var(--err-bg);border-color:var(--err-bd);color:var(--err)}
.banner--info{background:var(--info-bg);border-color:var(--info-bd);color:var(--info)}
.banner--ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}

/* ---------------------------------------------------------------- personfilter
   Vem ser vad. Knappen visar vad som gäller just nu, panelen öppnas vid
   klick och stängs när man klickar utanför. Ligger över tabellhuvuden,
   därför z-index över deras sticky-lager. */
.person-filter{position:relative;display:inline-block}
.person-filter__btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
}
.person-filter__btn:hover{color:var(--text);border-color:var(--n-300)}
.person-filter__btn.is-filtered{
  color:var(--pp-600);border-color:var(--pp-300);background:var(--pp-50);font-weight:600;
}
.person-filter__panel{
  position:absolute;top:calc(100% + 5px);left:0;min-width:230px;z-index:20;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-md);padding:6px;display:none;
}
.person-filter__panel.is-open{display:block}
.person-filter__row{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text);cursor:pointer;user-select:none;
}
.person-filter__row:hover{background:var(--n-50)}
.person-filter__row input{accent-color:var(--pp-600);cursor:pointer}
.person-filter__row small{color:var(--text-3);margin-left:auto}
.person-filter__sep{height:1px;background:var(--border);margin:5px 0}

/* ------------------------------------------------------- deltagare i loggen */
.log-attendees{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  margin:0 0 7px;font-size:var(--fs-sm);color:var(--text-2);
}
.log-attendees .chip{font-size:var(--fs-xs)}
.log-copy-note{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:6px;
  padding:3px 8px;border-radius:999px;font-size:var(--fs-xs);
  background:var(--info-bg);color:var(--info);border:1px solid var(--info-bd);
}

/* --------------------------------------------------------- deltagarsökning */
.person-search{position:relative}
.person-search__hits{
  position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:30;max-height:230px;
  overflow-y:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-md);display:none;
}
.person-search__hits.is-open{display:block}
.person-search__hit{
  display:flex;flex-direction:column;gap:1px;padding:7px 10px;cursor:pointer;
  border-bottom:1px solid var(--n-100);
}
.person-search__hit:last-child{border-bottom:0}
.person-search__hit:hover,.person-search__hit.is-cursor{background:var(--pp-50)}
.person-search__hit b{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.person-search__hit small{font-size:var(--fs-xs);color:var(--text-3)}
.person-search__empty{padding:9px 10px;font-size:var(--fs-sm);color:var(--text-3)}