@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',sans-serif;background:#fafafaf8;color:#1a1a18;font-size:13px;line-height:1.5}

/* HEADER */
.hdr{background:#fff;border-bottom:1px solid #e0e0dc;padding:14px 28px 0}
.hdr-title{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.hdr-title h1{font-size:21px;font-weight:600}
.hdr-title span{font-size:14px;color:#6b6b65;font-weight:300}
.tabs{display:flex}
.tab{display:flex;align-items:center;gap:5px;padding:7px 18px 9px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;font-size:13px;color:#6b6b65;user-select:none;transition:color .15s;position: relative;}
.tab:hover{color:#1a1a18}
.tab.active{color:#1a1a18;background:#fff1d2;border-bottom-color:#e87722;border-radius:4px 4px 0 0}
.tab .n{font-weight:600;font-size:14px;color:#1a1a18}
/* FIX 2: Separated with a space, changed dot to hyphen, and added sizing for an empty dot */
.tab .notification-badge {
  position: absolute;
  top: 4px;             /* Positioned nicely near the top right */
  right: 4px;
  width: 8px;           /* Gives the empty span actual size */
  height: 8px;
  border-radius: 50%;   /* Perfect circle */
  background: #ff3b30;  /* Standard vibrant red */
}
.notification-badge.hidden {
  display: none;
}

/* MAIN */
.main{padding:16px 28px}
.page{display:none}.page.on{display:block}

/* SECTION TITLE — consistent 7px gap before every white box */
.st-row{display:flex;align-items:center;gap:5px;margin-bottom:7px}
.st{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.st::after{content:'';display:inline-block;width:24px;height:2px;background:#e87722;margin-left:3px}

/* INFO BUTTON */
.ib{width:14px;height:14px;border-radius:50%;border:1.5px solid #999;background:none;color:#999;font-size:9px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;font-family:inherit;flex-shrink:0}
.ib:hover{border-color:#333;color:#333}
.tip{display:none;position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:6px 10px;border-radius:3px;font-size:10px;width:200px;z-index:300;line-height:1.4;font-weight:400;pointer-events:none;white-space:normal}
.ib:hover .tip{display:block}

/* WHITE BOX */
.wbox{background:#fff;border:1px solid #e0e0dc;border-radius:4px;padding:10px 12px;font-size:11px;color:#6b6b65;line-height:1.6; flex:1;
  overflow:auto;height:100%;flex-direction:column}
/* Information boxes get a fixed min-height so they match between tabs */
/*#ibox,#vis-ibox{min-height:96px;}*/
.fill-panel{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

/*
  ══════════════════════════════════════════════════════
  SHARED LAYOUT — Visningar is the template.
  Both pages use the same 3-column fixed structure:
    col1: content (500px)  — Profil+Info  /  LineChart+Info
    col2: data/pie (220px) — Data attrs   /  Pie+DataBox
    col3: ds+map  (260px)  — DS scroll + map side by side

  This makes switching between tabs seamless — boxes stay
  in the same positions with the same widths.
  ══════════════════════════════════════════════════════
*/
.page-grid{
  display:grid;
  height:410px;
  grid-template-columns:430px 320px 320px 320px;
  gap:16px;
  margin-bottom:14px;
  align-items:stretch;
}

/* Col 1 stacks vertically */
.col1{display:flex;flex-direction:column;gap:12px;height:100%;}

/* Col 2 stacks vertically */
.col2{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}

/* Col 3: DS scroll + map SIDE BY SIDE, fixed total 420px */
.col3{display:flex;flex-direction:column;height:100%;min-height:0;}
.ds-and-map{flex:1;min-height:0;}
/* DS scroll: fixed height, never pushes log down */
.ds-scroll{
  /*flex-shrink:0;*/
  overflow:auto;
  height:100%;
  min-height:200px;
  border:1px solid #e0e0dc;
  border-radius:4px;
  padding:6px 8px;
  background:#fff;
}
/* Map: sits to the right of DS, same height */
.map-side{
  width:140px;
  flex-shrink:0;
  border:1px solid #e0e0dc;
  border-radius:4px;
  overflow:hidden;
  background:#e8f0e8;
  height:100%;
  min-height:200px;
}
.map-side svg{width:100%;height:100%;display:block}

/* DS placeholder */
.ds-ph{color:#6b6b65;font-size:11px;padding:8px 0;display:flex;align-items:center;gap:7px}
.ds-ph-dot{width:10px;height:10px;border-radius:50%;background:#e87722;flex-shrink:0}

/* Timeline */
.tl-item{display:flex;gap:8px}
.tl-line{display:flex;flex-direction:column;align-items:center;width:11px;flex-shrink:0}
.tl-dot{width:10px;height:10px;border-radius:50%;background:#e87722;border:2px solid #e87722;flex-shrink:0;margin-top:4px;z-index:1}
.tl-dot.dim{background:#ccc;border-color:#ccc}
.tl-conn{width:2px;flex:1;background:#e87722;min-height:14px}
.tl-conn.dim{background:#ddd}
.tl-entry{flex:1;margin-bottom:2px}
.tl-row{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;border-radius:3px;cursor:pointer;font-size:11px;font-weight:500;transition:background .1s}
.tl-row:hover{background:#f0f0ee}
.tl-row.active{background:#e8e8e6}
.tl-chev{color:#999;font-size:10px}
.tl-det{background:#f7f7f5;border-radius:3px;padding:7px 8px;font-size:11px;display:none;line-height:1.6;margin-bottom:2px}
.tl-det.open{display:block}
.tl-signed{display:flex;align-items:center;gap:4px;color:#43a047;font-weight:500;font-size:10px;margin-bottom:4px}
.tl-signed::before{content:'✓';background:#43a047;color:#fff;border-radius:50%;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
.tl-date{color:#999;font-size:10px;margin-bottom:3px}
.tl-alist{list-style:disc;padding-left:13px}
.tl-alist li{font-size:10px;line-height:1.7}

/* PROFIL — col1 content */
.pcard{background:#fff;border:1px solid #e0e0dc;border-radius:4px;padding:11px;display:flex;gap:11px;align-items:flex-start;}
.avatar{width:46px;height:46px;border-radius:50%;background:#5c8fad;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.pinfo h2{font-size:14px;font-weight:600}
.pinfo p{color:#6b6b65;font-size:11px;margin-top:1px}
.pdiv{border:none;border-top:1px solid #ccc;margin:7px 0}
.pdet{font-size:11px;color:#6b6b65;line-height:1.7}
.pdet strong{color:#1a1a18;font-weight:500}

/* DATA attrs — col2 on profil */
.data-attrs{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-bottom:35px}
.da{font-size:11px;padding:2px 2px;border-radius:3px;cursor:pointer;border-left:3px solid transparent;transition:background .12s,border-color .12s;color:#1a1a18}
.da:hover{background:#f0f0ee}
.da.hl-skatteverket{background:#e0f2f1;border-left-color:#00897b}
.da.hl-uc{background:#ffeaea;border-left-color:#e53935}
.da.hl-kronofogden{background:#fff3e0;border-left-color:#e87722}
.da.hl-csn{background:#e8eaf6;border-left-color:#5c6bc0}
/* authority tags — text black, colored dot, border on active */
.auth-leg{display:flex;gap:8px;flex-wrap:wrap;padding-top:17px;border-top:1px solid #e0e0dc;margin-top:18px}
.atag{display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer;padding:2px 6px;border-radius:3px;border:1.5px solid transparent;transition:background .1s,border-color .1s;color:#1a1a18}
.atag:hover{background:#f0f0ee}
.atag.on{font-weight:600;border-color:currentColor}
.adot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* CHART CARD — col1 on visningar */
.chart-card{background:#fff;border:1px solid #e0e0dc;border-radius:4px;padding:10px 12px;display:flex;flex-direction:column;height:189px;}
.chart-card svg{flex:1;display:block;width:100%}
.chart-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex-shrink:0}
.ctype-btn{background:#e87722;color:#fff;border:none;border-radius:3px;padding:3px 8px;font-size:10px;font-family:inherit;cursor:pointer}

/* PIE CARD — col2 on visningar, same height as chart card */
.pie-card{background:#fff;border:1px solid #e0e0dc;border-radius:4px;padding:10px 12px;display:flex;flex-direction:column;height:190px;margin-bottom:7px;}
/* Data section in vis col2 must align with Info in col1 */
.vis-data-align{margin-top:0;}
.pie-card svg{flex:1;display:block;width:100%}

/* DIVIDER */
hr.div{border:none;border-top:1px solid #e0e0dc;margin:12px 0}

/*
  ══════════════════════════════════════════════════
  HÄNDELSELOGG — single shared instance, shown on all tabs.
  ══════════════════════════════════════════════════
*/

/* Filter bar: input ~30% wide, "filtrerat efter" inline after buttons */
.fbar{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:nowrap}
.flabel{font-size:11px;color:#6b6b65;font-weight:500;flex-shrink:0}
.finput-wrap{width:28%;flex-shrink:0;display:flex;align-items:center;border:1px solid #e0e0dc;border-radius:4px;background:#fff;padding:3px 8px;gap:5px;}
.finput-wrap input{border:none;outline:none;font-family:inherit;font-size:11px;width:100%;background:transparent}
.btn-o{background:#e87722;color:#fff;border:none;border-radius:4px;padding:4px 12px;font-size:11px;font-family:inherit;cursor:pointer;font-weight:500;flex-shrink:0}
.btn-o:hover{opacity:.9}
.btn-r{background:#fff;border:1px solid #e0e0dc;border-radius:4px;padding:4px 10px;font-size:11px;font-family:inherit;cursor:pointer;flex-shrink:0}
.btn-r:hover{background:#f0f0ee}
/* "filtrerat efter" sits inline after Återställ button */
.factive-inline{display:none;font-size:10px;color:#6b6b65;align-items:center;gap:4px;margin-left:4px;white-space:nowrap}
.factive-inline.show{display:flex}
.frm{background:none;border:none;cursor:pointer;color:#e87722;font-size:10px;padding:0}

/* TABLE — checkerboard columns: odd cols (Tid,Ärende,Personal-ID,Åtgärda) = default bg; even cols (Händelse,Myndighet,Data) = white bg */
.ltable{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
.ltable th{text-align:left;padding:5px 6px;vertical-align:middle}



.ltable td{padding:5px 6px;border-bottom:1px solid #e0e0dc;border-top:1px solid #e0e0dc;vertical-align:middle;min-height:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ltable td:nth-child(odd){background:#fff}
.ltable td,.ltable th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-row td{height:auto !important;white-space:normal !important;background:#fffdf8 !important;padding:0 !important}
.detail-content{padding:12px 14px;line-height:1.7;font-size:11px;white-space:normal;word-break:break-word}
/* checkerboard removed — uniform bg */
/* row hover: orange tint across all cells */
.ltable tr{cursor:pointer;}
.ltable tr:hover td{background:#fff3e0 !important;}
.ltable tr.sel td{background:#ffe0b2 !important;}
/* Välj button: hidden by default, shown on row hover */
.abtn{background:#e87722;color:#fff;border:none;border-radius:3px;padding:3px 25px;font-size:11px;font-family:inherit;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .1s}
.ltable tr:hover .abtn{opacity:.9;pointer-events:auto}
/* sort buttons — more distinct */
.srt{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:#1a1a18;display:inline-flex;align-items:center;gap:4px}
.srt:hover,.srt:focus,.srt:active{background:none;border:none;outline:none;box-shadow:none;color:#1a1a18}
.srt .arrow{font-weight:400;color:#888;font-size:10px}
.abadge{display:inline-flex;align-items:center;gap:3px;font-size:10px}
.abadge .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.dtrunc{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6b6b65;font-size:10px}
.dwrap{
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    line-height:1.5;
}
.tcell{color:#6b6b65;white-space:nowrap;font-size:10px;font-family:'IBM Plex Mono',monospace}

/* VISNINGAR charts row */
.vis-charts-row{display:grid;grid-template-columns:1fr 220px;gap:12px;margin-bottom:7px;}

/* CHAT */
.cfab{position:fixed;bottom:22px;right:22px;background:#e87722;color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:20px;cursor:pointer;box-shadow:0 4px 12px rgba(232,119,34,.4);display:flex;align-items:center;justify-content:center;z-index:200;transition:transform .15s}
.cfab:hover{transform:scale(1.08)}
.cpanel{position:fixed;bottom:80px;right:22px;width:320px;background:#fff;border:1px solid #e0e0dc;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.13);z-index:199;display:none;flex-direction:column;overflow:hidden}
.cpanel.open{display:flex}
.chdr{background:#e87722;color:#fff;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:12px}
.cclose{background:none;border:none;color:#fff;font-size:17px;cursor:pointer;line-height:1}
.cstatus{padding:6px 12px;font-size:10px;color:#6b6b65;border-bottom:1px solid #e0e0dc;background:#fafafa}
.cmsgs{flex:1;overflow-y:auto;padding:10px;min-height:140px;max-height:260px;display:flex;flex-direction:column;gap:7px}
.cmsg{max-width:88%;padding:6px 9px;border-radius:7px;font-size:11px;line-height:1.5}
.cmsg.user{background:#e87722;color:#fff;align-self:flex-end;border-radius:7px 7px 2px 7px}
.cmsg.bot{background:#f0f0ee;color:#1a1a18;align-self:flex-start;border-radius:7px 7px 7px 2px}
.cmsg.thinking{color:#999;font-style:italic}
.cqs{padding:9px 12px;border-top:1px solid #e0e0dc;display:flex;flex-direction:column;gap:4px}
.cqlabel{font-size:10px;color:#6b6b65;margin-bottom:1px}
.cq{background:#fff;border:1px solid #e0e0dc;border-radius:3px;padding:5px 8px;font-size:10px;font-family:inherit;cursor:pointer;text-align:left;transition:background .1s,border-color .1s;line-height:1.4}
.cq:hover{background:#f5f5f3;border-color:#e87722}
.cq.used{opacity:.35;text-decoration:line-through;cursor:default;pointer-events:none}
.ldots span{display:inline-block;animation:blink 1.2s infinite;font-size:14px}
.ldots span:nth-child(2){animation-delay:.2s}
.ldots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.ftip{position:fixed;background:#333;color:#fff;padding:4px 8px;border-radius:3px;font-size:10px;pointer-events:none;display:none;z-index:400}
.ph{display:flex;align-items:center;justify-content:center;height:220px;color:#6b6b65;flex-direction:column;gap:6px;font-size:13px}
.ph .big{font-size:30px}