/* integrations.css – Aprikos Workspace → Settings → Integrations (integrations.js).
   Same palette and type as the rest of the site (site.css variables, workspace.css rhythm, qt-desk.css tiles/chips/toast);
   only the environment chip, the status pills, the monograms, the rows, the detail drawer (same values as the sp- profile
   drawer) and the start-page summary are added. Prefix ig-. */

.ig{min-width:0}
.ig :focus-visible,.ig-drw :focus-visible,.ig-sum :focus-visible{outline:2px solid #3AC0C3;outline-offset:2px}

/* ---- top: environment chip, last checked, refresh ---- */
.ig-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px}
.ig-env{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;font-family:Jost,system-ui,sans-serif;font-weight:700;font-size:11px;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ig-env::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.ig-env.test{border:1.5px solid #b00020;color:#b00020;background:#fff}
.ig-env.prod{border:1.5px solid #0B7449;color:#0B7449;background:#E3F4EC}
.ig-chk{color:var(--muted,#4E6868);font-size:.84rem}
.ig-top .btn[aria-busy="true"]{opacity:.6;cursor:progress}
.ig-err2{background:var(--bg-soft,#F5FAFA);color:var(--muted,#4E6868)}

/* ---- KPI tiles (qt-tile look, 5 → 2 columns) ---- */
.qt-tiles.ig-tiles{grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 12px}
.ig-tile span{display:inline-flex;align-items:center;gap:7px}
.ig-tile span::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#9DB5B6}
.ig-tile.t-ok span::before{background:#1B7F5C}
.ig-tile.t-ready span::before{background:#3AC0C3}
.ig-tile.t-test span::before{background:#E8A33D}
.ig-tile.t-warn span::before{background:#B03A28}
.ig-tile[aria-busy="true"] b{color:#B9CACA}

/* ---- nightly line and toolbar ---- */
.ig-night{margin:0 0 14px}
.ig-night .ws-chip b{margin:0 2px}
.ig-tools{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.ig-search{flex:none;max-width:460px;width:100%}
.ig-chips{margin:0;align-items:center}
.ig-act{display:inline-flex;align-items:center;gap:6px}
.ig-act::before{content:'';width:8px;height:8px;border-radius:50%;background:#E8A33D}
.ig-act.on{background:#E8A33D;border-color:#E8A33D;color:#0A2E2F}
.ig-act.on::before{background:#0A2E2F}

/* ---- grouped sections and rows ---- */
.ig-grp{margin:0 0 14px;padding:14px 16px}
.ig-grp .ws-h{margin:0 0 4px;padding:0 4px}
.ig-grp .ws-h h3 i.ig-gi{color:#fff}
.ig-gi.g-m365,.ig-mono.g-m365{background:#1B6E70}
.ig-gi.g-sales,.ig-mono.g-sales{background:#3B6FB6}
.ig-gi.g-mk,.ig-mono.g-mk{background:#8A6A2F}
.ig-gi.g-tender,.ig-mono.g-tender{background:#0A2E2F}
.ig-gi.g-orders,.ig-mono.g-orders{background:#5B7F2A}
.ig-gi.g-platform,.ig-mono.g-platform{background:#4E6868}
.ig-list{display:flex;flex-direction:column}
.ig-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto 118px 18px;align-items:center;gap:6px 14px;width:100%;margin:0;padding:12px 10px;border:0;border-top:1px solid var(--line,#E3EDEC);border-radius:0;background:none;font:inherit;color:var(--ink,#152E2E);text-align:left;cursor:pointer;transition:background .15s}
.ig-row:first-child{border-top:0}
.ig-row:hover{background:var(--bg-soft,#F5FAFA)}
.ig-row:focus-visible{outline:2px solid #3AC0C3;outline-offset:-2px;border-radius:12px}
.ig-mono{flex:none;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:Jost,system-ui,sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.05em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.ig-mono.ig-big{width:52px;height:52px;border-radius:14px;font-size:1rem;box-shadow:0 0 0 2px rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.14)}
.ig-rt{min-width:0;display:flex;flex-direction:column;gap:2px}
.ig-rt b{font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.ig-pur{color:var(--muted,#4E6868);font-size:.82rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-next{color:var(--muted,#4E6868);font-size:.76rem;line-height:1.35;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-last{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:.82rem;color:var(--ink,#152E2E);white-space:nowrap;min-width:0}
.ig-last small{font-family:Jost,system-ui,sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#4E6868)}
.ig-chev{width:18px;height:18px;fill:none;stroke:var(--muted,#4E6868);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s,stroke .15s}
.ig-row:hover .ig-chev{transform:translateX(2px);stroke:var(--deep,#1F7F81)}
.ig-empty{margin:4px 0 14px}
.ig-foot{margin:6px 2px 0}

/* ---- status pills ---- */
.ig-st{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:Jost,system-ui,sans-serif;font-size:.76rem;font-weight:600;line-height:1.3;white-space:nowrap;background:var(--bg-soft,#F5FAFA);color:var(--muted,#4E6868)}
.ig-st::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.ig-st.ok{background:#E3F4EC;color:#1B7F5C}
.ig-st.ready{background:var(--tq-soft,#DCF1F1);color:var(--deeper,#1B6E70)}
.ig-st.test{background:#FDF1E0;color:#7A4A07}
.ig-st.warn{background:#FDECEA;color:#8A2A1B}
.ig-st.none,.ig-st.off,.ig-st.np,.ig-st.undecided{background:var(--bg-soft,#F5FAFA);color:var(--muted,#4E6868)}
.ig-st.off::before,.ig-st.np::before,.ig-st.undecided::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.ig-st.ig-sk{width:104px;height:24px;padding:0;background:linear-gradient(90deg,#f1f6f6 25%,#e6f0f0 37%,#f1f6f6 63%);background-size:400% 100%;animation:ig-sk 1.2s infinite}
.ig-st.ig-sk::before,.ig-st.ig-sk2::before{display:none}
.ig-st.ig-sk2{background:rgba(255,255,255,.14);color:#CFE8E8}

/* ---- detail drawer (same shell as the sp- profile drawer) ---- */
body.ig-open{overflow:hidden}
.ig-drw{position:fixed;inset:0;z-index:4200;display:flex;justify-content:flex-end}
.ig-scrim{position:absolute;inset:0;background:rgba(10,46,47,.42);backdrop-filter:blur(2px);animation:ig-fade .18s ease-out}
.ig-panel{position:relative;display:flex;flex-direction:column;width:min(560px,100%);height:100%;max-height:100vh;background:#fff;box-shadow:0 18px 40px rgba(10,46,47,.16);animation:ig-slide .18s ease-out}
.ig-dh{position:relative;flex:none;display:flex;align-items:center;gap:16px;padding:24px 64px 22px 24px;background:linear-gradient(170deg,#0A2E2F,#12494B 70%,#155B5D);color:#fff}
.ig-dht{min-width:0}
.ig-dh small{display:block;margin-bottom:4px;font-family:Jost,system-ui,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9FE6E8}
.ig-dh h2{margin:0 0 8px;font-size:1.3rem;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.ig-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;transition:background .15s}
.ig-x:hover{background:rgba(255,255,255,.24)}
.ig-dh :focus-visible{outline:2px solid #3AC0C3;outline-offset:2px}
.ig-db{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 28px;background:var(--bg-soft,#F5FAFA)}
.ig-card{margin:0 0 12px;padding:14px 16px;background:#fff;border:1px solid var(--line,#E3EDEC);border-radius:14px}
.ig-card h3{margin:0 0 8px;font-family:Jost,system-ui,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--deep,#1F7F81)}
.ig-card p{margin:0;font-size:.92rem;line-height:1.55}
.ig-card p+p{margin-top:4px}
.ig-muted{color:var(--muted,#4E6868)}
.ig-small{font-size:.78rem!important}
.ig-status{border-color:#CFE3E2}
.ig-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.ig-why{flex:1 1 220px;margin:0!important;font-size:.88rem!important;color:var(--ink,#152E2E)}
.ig-sub{margin:0 0 12px}
.ig-dl+.ig-sub{margin-top:16px}
.ig-sub h4{margin:0 0 6px;font-family:Jost,system-ui,sans-serif;font-size:.8rem;font-weight:600;color:var(--ink,#152E2E)}
.ig-secs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ig-secs li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.86rem}
.ig-secs code{padding:1px 7px;border:1px solid var(--line,#E3EDEC);border-radius:6px;background:var(--bg-soft,#F5FAFA);color:var(--deeper,#1B6E70);font-size:.8rem;overflow-wrap:anywhere}
.ig-secs small{color:var(--muted,#4E6868);font-size:.74rem;font-style:italic}
.ig-yn{font-family:Jost,system-ui,sans-serif;font-size:.78rem;font-weight:600}
.ig-yn.yes{color:#1B7F5C}
.ig-yn.no{color:#8A2A1B}
.ig-yn.unk{color:var(--muted,#4E6868)}
.ig-dl{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:7px 14px;margin:0;font-size:.87rem;line-height:1.45}
.ig-dl dt{color:var(--muted,#4E6868)}
.ig-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ig-pre{white-space:pre-wrap}
.ig-info{margin:12px 0 0!important;padding:9px 12px;border-radius:10px;background:var(--ice,#EBF5F5);color:var(--deeper,#1B6E70);font-size:.84rem!important;line-height:1.5}
.ig-tw{overflow-x:auto;margin:0 -2px}
.ig-conn{font-size:.82rem}
.ig-conn td{vertical-align:middle}
.ig-conn .num{text-align:right;white-space:nowrap}
.ig-conn .ig-st{font-size:.7rem;padding:3px 8px}
.ig-test{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#E3EDEC)}
.ig-test small{flex:1 1 200px;color:var(--muted,#4E6868);font-size:.78rem;line-height:1.4}
.ig-test .btn[aria-busy="true"]{opacity:.65;cursor:progress}
.ig-tmsg{margin:8px 0 0;line-height:1.45}
.ig-tmsg:empty{display:none}
.ig-steps{counter-reset:igs;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ig-steps li{counter-increment:igs;display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;font-size:.9rem;line-height:1.5;overflow-wrap:anywhere}
.ig-steps li::before{content:counter(igs);width:26px;height:26px;border-radius:50%;background:var(--darkest,#0A2E2F);color:#fff;font-family:Jost,system-ui,sans-serif;font-weight:700;font-size:.78rem;display:inline-flex;align-items:center;justify-content:center}
.ig-links{display:flex;flex-wrap:wrap;gap:8px}
.ig-link{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line,#E3EDEC);border-radius:999px;background:#fff;color:var(--deeper,#1B6E70);font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.82rem;text-decoration:none;transition:border-color .15s,background .15s}
.ig-link:hover{border-color:var(--deep,#1F7F81);background:var(--ice,#EBF5F5)}
.ig-link.int{background:var(--darkest,#0A2E2F);border-color:var(--darkest,#0A2E2F);color:#fff}
.ig-link.int:hover{background:var(--deeper,#1B6E70)}
.skel.ig-skel{height:120px;border-radius:12px}   /* shop.css .skel (330 px) loads after this file */

/* ---- notes (owner/admin) ---- */
.ig-nf{display:flex;flex-direction:column;gap:10px}
.ig-nfg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.ig-nf label{display:flex;flex-direction:column;gap:4px;min-width:0}
.ig-nf label>span{font-family:Jost,system-ui,sans-serif;font-size:.76rem;font-weight:600;color:var(--muted,#4E6868)}
.ig-nf input,.ig-nf textarea{width:100%;padding:8px 10px;border:1px solid var(--line,#E3EDEC);border-radius:9px;background:#fff;color:var(--ink,#152E2E);font:inherit;font-size:.9rem}
.ig-nf input{height:38px}
.ig-nf textarea{min-height:92px;resize:vertical;line-height:1.5}
.ig-nf input:focus,.ig-nf textarea:focus{border-color:var(--deep,#1F7F81)}
.ig-nfa{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.ig-nfa .ws-msg{flex:1 1 180px;margin:0}
.ig-nfa .ws-msg:empty{visibility:hidden}

/* ---- start-page summary (workspace.js secInt) ---- */
.ws-home .ig-sum,.ig-sum{grid-column:1/-1}
.ig-sum{padding:12px 18px}
.ig-sumrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ig-sumt{font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.98rem}
.ig-sumc{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.86rem;color:var(--muted,#4E6868)}
.ig-c{display:inline-flex;align-items:center;gap:6px}
.ig-c b{font-family:Jost,system-ui,sans-serif;color:var(--ink,#152E2E)}
.ig-c.ok::before,.ig-c.warn::before,.ig-c.none::before{content:'';width:8px;height:8px;border-radius:50%}
.ig-c.ok::before{background:#1B7F5C}
.ig-c.warn::before{background:#B03A28}
.ig-c.none::before{background:#9DB5B6}
.ig-sumn{color:var(--muted,#4E6868);font-size:.8rem}
.ig-sumrow .btn{margin-left:auto}

/* ---- «Koble til / Drift» in the drawer (CRM-SPEC §5.1): mode toggle, confirmation, caps form, usage bar, sync ---- */
.ig-ops{border-color:#CFE3E2}
.ig-ops .ig-sub{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line,#E3EDEC)}
.ig-ops #igOMode .ig-sub{margin-top:0;padding-top:0;border-top:0}
.ig-ops .ig-free,.ig-ops .ws-ro{margin-top:12px!important}
.ig-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line,#E3EDEC);border-radius:999px;background:var(--bg-soft,#F5FAFA)}
.ig-segb{min-width:84px;padding:7px 16px;border:0;border-radius:999px;background:none;color:var(--muted,#4E6868);font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.84rem;line-height:1.2;cursor:pointer;transition:background .15s,color .15s}
.ig-segb:hover{color:var(--ink,#152E2E)}
.ig-segb.on{background:var(--darkest,#0A2E2F);color:#fff;box-shadow:0 1px 3px rgba(10,46,47,.2)}
#igSeg-mock.on{background:#E8A33D;color:#0A2E2F}
.ig-segb[aria-busy="true"]{opacity:.65;cursor:progress}
.ig-why2{margin:8px 0 0!important;font-size:.86rem!important;color:var(--ink,#152E2E)}
.ig-cf{margin:12px 0 0;padding:12px 14px;border:1.5px solid #E8A33D;border-radius:12px;background:#FDF8EF}
.ig-cf p{font-size:.88rem!important}
.ig-cfa{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ig-omsg{margin:8px 0 0;line-height:1.45}
.ig-omsg:empty{display:none}
.ig-limg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;margin:0 0 8px}
.ig-lim label{display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-width:0}
.ig-lim label>span{font-family:Jost,system-ui,sans-serif;font-size:.76rem;font-weight:600;line-height:1.3;color:var(--muted,#4E6868);overflow-wrap:anywhere}
.ig-lim label em{font-style:normal;font-weight:500;font-size:.7rem;color:#7A4A07}
.ig-lim input{width:100%;height:38px;padding:8px 10px;border:1px solid var(--line,#E3EDEC);border-radius:9px;background:#fff;color:var(--ink,#152E2E);font:inherit;font-size:.92rem;font-variant-numeric:tabular-nums}
.ig-lim input:focus{border-color:var(--deep,#1F7F81)}
.ig-lim .ig-nfa{margin-top:8px}
.ig-lim .ig-nfa .ws-msg:empty{display:block;visibility:hidden}
.ig-lim .btn[aria-busy="true"],.ig-btns .btn[aria-busy="true"]{opacity:.65;cursor:progress}
.ig-uset{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px!important;font-size:.9rem!important}
.ig-uset .ig-st{font-size:.72rem;padding:3px 8px}
.ig-bar{height:10px;margin:0 0 6px;border-radius:999px;background:var(--bg-soft,#F5FAFA);box-shadow:inset 0 0 0 1px var(--line,#E3EDEC);overflow:hidden}
.ig-bar i{display:block;height:100%;border-radius:inherit;background:#3AC0C3;transition:width .3s}
.ig-bar.high i{background:#E8A33D}
.ig-bar.over i{background:#B03A28}
.ig-btns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.ig-cmd{display:block;margin:6px 0 2px;padding:7px 10px;border-radius:8px;background:var(--darkest,#0A2E2F);color:#CFE8E8;font-size:.8rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.skel.ig-skel2{height:44px;border-radius:10px}

/* ---- toast (shares .qt-toast) ---- */
.ig-toast{z-index:4300}

@keyframes ig-fade{from{opacity:0}to{opacity:1}}
@keyframes ig-slide{from{opacity:.4;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes ig-sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---- narrow screens ---- */
@media (max-width:900px){
  .qt-tiles.ig-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qt-tiles.ig-tiles .qt-tile:last-child{grid-column:1/-1}
  .ig-grp{padding:12px 10px}
  .ig-row{grid-template-columns:40px auto minmax(0,1fr) 18px;row-gap:8px;align-items:start}
  .ig-row .ig-mono{grid-column:1;grid-row:1/3}
  .ig-row .ig-rt{grid-column:2/4;grid-row:1}
  .ig-row .ig-st{grid-column:2;grid-row:2;justify-self:start}
  .ig-row .ig-last{grid-column:3;grid-row:2;flex-direction:row;align-items:baseline;gap:6px;align-self:center}
  .ig-row .ig-chev{grid-column:4;grid-row:1/3;align-self:center}
  .ig-pur{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ig-sumrow .btn{margin-left:0}
}
@media (max-width:700px){
  .ig-panel{width:100%}
  .ig-dh{padding:20px 60px 18px 18px;gap:12px}
  .ig-db{padding:14px 12px 24px}
  .ig-nfg{grid-template-columns:1fr}
  .ig-limg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .ig-dl{grid-template-columns:1fr;gap:2px}
  .ig-dl dd{margin-bottom:8px}
  .ig-row .ig-last small{display:none}
  .ig-env{font-size:10px;letter-spacing:.06em}
  .ig-seg{display:flex}
  .ig-segb{flex:1 1 0;min-width:0}
}
@media (max-width:380px){
  .ig-limg{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ig-scrim,.ig-panel,.ig-st.ig-sk{animation:none}
  .ig-row,.ig-chev,.ig-x,.ig-link,.ig-segb,.ig-bar i{transition:none}
  .ig-row:hover .ig-chev{transform:none}
}