/* ============================================================
   AGENT OS: mission control-stijl (14-10, Jairo: "zoals Lio's mission control: professioneel, overzichtelijk, strak").
   Alleen voor het Agent OS-scherm (.aos) en zijn lade (.aosl). Kleuren en lijnen komen uit app.css (--line, --panel,
   --panel2, --tx*, --hover en de statuskleuren --aos-groen/-oranje/-rood/-grijs, met eigen waarden voor licht en donker).
   Regels: hoeken 2 px, 1 px rand in --line, geen schaduw, geen verloop, geen gekleurde zijbalken; kleur alleen voor status
   (bezig groen, wacht oranje, fout rood, rust grijs); cijfers tabular-nums. De wereld (isometrische kaart) blijft zoals hij is.
   ============================================================ */
.aos{--aosmc-r:2px;font-variant-numeric:tabular-nums;min-width:0;max-width:100%}

/* --- algemeen in het Agent OS: strak --- */
.aos .aos-midden,.aos .aos-rechts>div,.aos .aos-logpaneel,.aos .aos-tegel,.aos .goed-rij,.aos .gk-ja,.aos .gk-nee,.aos .aos-kaart,.aos .aos-kol,
.aos .lio-blok,.aos .lio-inhoud,.aos .lio-usage,.aos .aosx-mkaart,.aos .aosx-dienst,.aos .lio-skill,.aos .btn,.aos .inp,.aos .aos-zoek,
.aos .gk-banner,.aos .gk-top,.aos .gk-app,.aos .seg,.aos .seg button,.aos .aos-kanfilter button,.aos .aos-wierij,.aos .chip,.aos .aosx-pil,
.aosl .aosl-paneel,.aosl .btn{border-radius:var(--aosmc-r);box-shadow:none}
.aos .aos-tegel.oranje{background:var(--panel);border-color:var(--line)}
.aos .aos-tegel.groen b{color:var(--aos-groen)}.aos .aos-tegel.oranje b{color:var(--aos-oranje)}.aos .aos-tegel.rood b{color:var(--aos-rood)}
.aos .aos-tegel b{font-variant-numeric:tabular-nums}
/* Goedkeuren: de knop is een gewone primaire knop; kleur hoort bij status, niet bij acties. */
.aos .gk-ja{background:var(--acc);color:var(--on-acc,#fff);border-color:var(--acc)}.aos .gk-ja:hover{background:var(--acc2);border-color:var(--acc2)}
.aos .gk-nee:hover{border-color:var(--aos-rood);color:var(--aos-rood)}
.aos .gk-top{background:var(--panel);color:var(--tx);border:1px solid var(--line)}.aos .gk-top p{color:var(--tx2);opacity:1}
.aos .gk-banner{background:var(--panel);color:var(--tx);border:1px solid var(--line)}
.aos .gk-banner b{background:transparent;color:var(--aos-oranje);border:1px solid var(--aos-oranje);border-radius:var(--aosmc-r)}
.aos .gk-banner em{color:var(--tx2);font-weight:600}
.aosl .aosl-paneel{box-shadow:none}

/* --- tabs: één rij, zijwaarts scrollen als hij niet past --- */
.aos .aos-balk2{flex-wrap:nowrap;min-width:0}
.aos .aos-balk2 .seg{flex:0 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.aos .aos-balk2 .seg::-webkit-scrollbar{display:none}
.aos .aos-balk2 .seg button{white-space:nowrap;flex:0 0 auto}
.aos .aos-balk2 .aos-zoek,.aos .aos-balk2>.btn{flex:0 0 auto}

/* --- titel en één zin boven elke tab --- */
.aosmc-tabkop{display:flex;flex-direction:column;gap:2px;padding:2px 0 0}
.aosmc-tabkop h2{margin:0;font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--tx)}
.aosmc-tabkop p{margin:0;font-size:13px;color:var(--tx2)}

/* --- mission control: geen extra paneel om de blokken heen --- */
.aos .aosmc-grid>.aos-midden{background:transparent;border:0;overflow:visible}
.aosmc.lio{padding:0;gap:12px}
.aosmc .lio-top{gap:12px}
.aosmc-blok{background:var(--panel);border:1px solid var(--line);border-radius:var(--aosmc-r);padding:12px 14px;min-width:0}
.aosmc-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}
.aosmc-kop h3{margin:0;font-size:14px;font-weight:650;color:var(--tx)}
.aosmc-kop .hint{font-size:12px}
.aosmc-leeg{margin:0;padding:6px 0;font-size:12.5px}
.aosmc .lio-blok,.aosmc .lio-inhoud{border:0;padding:0;background:transparent}
.aosmc .lio-inhoud{margin-top:10px}
.aosmc .lio-tabs{padding:0}

/* --- zes cijfers --- */
.aosmc-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.aosmc-cijfer{background:var(--panel);border:1px solid var(--line);border-radius:var(--aosmc-r);padding:9px 14px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.aosmc-cijfer[data-act]{cursor:pointer}.aosmc-cijfer[data-act]:hover{border-color:var(--line2)}
.aosmc-cijfer b{font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.aosmc-cijfer b small{font-size:18px;font-weight:600;color:var(--tx3)}
.aosmc-cijfer em i{font-style:normal}
.aosmc-cijfer span{font-size:12px;color:var(--tx2)}
.aosmc-cijfer em{font-style:normal;font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.aosmc-cijfer.s-wacht b{color:var(--aos-oranje)}.aosmc-cijfer.s-fout b{color:var(--aos-rood)}
.aosmc-usage{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums;padding:0 2px}

/* --- statusbadge: alleen hier kleur --- */
.aosmc-st{--c:var(--aos-grijs);display:inline-flex;align-items:center;gap:6px;padding:1px 7px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:var(--aosmc-r);
  color:var(--c);font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.aosmc-st i{width:6px;height:6px;border-radius:50%;background:var(--c);flex:0 0 6px}
.aosmc-st.s-bezig{--c:var(--aos-groen)}.aosmc-st.s-wacht{--c:var(--aos-oranje)}.aosmc-st.s-fout{--c:var(--aos-rood)}.aosmc-st.s-rust{--c:var(--aos-grijs)}

/* --- tabellen: grijze kolomkop, lijn per rij, zijwaarts scrollen in een eigen vak --- */
.aosmc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--aosmc-r);max-width:100%}
.aosmc-tab{width:100%;min-width:720px;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.aosmc-tab th{background:var(--panel2);color:var(--tx3);font-size:11.5px;font-weight:600;text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.aosmc-tab td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--tx);vertical-align:top}
.aosmc-tab tr:last-child td{border-bottom:0}
.aosmc-tab th.r,.aosmc-tab td.r{text-align:right}
.aosmc-tab td.rood,.aosmc .rood{color:var(--aos-rood);font-weight:600}
.aosmc-tab td{white-space:normal}
.aosmc-tab td.aosmc-nu{color:var(--tx2);min-width:220px;max-width:380px}
.aosmc-klik{cursor:pointer}
.aosmc-tab tr.aosmc-klik:hover td{background:var(--hover)}
.aosmc-klik:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.aosmc-scroll+.hint{margin:8px 0 0;font-size:12px}

/* --- wacht op jou en meldingen: regels met een lijn ertussen --- */
.aosmc-rij{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;min-width:0}
.aosmc-rij>span:not(.aosmc-st){flex:1;min-width:0;overflow-wrap:anywhere}
.aosmc-rij .btn{flex:0 0 auto}
.aosmc-rij:last-child{border-bottom:0}
.aos .goed-rij.aosmc-wrij{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:10px 0;font-size:13px}
.aos .goed-rij.aosmc-wrij:last-of-type{border-bottom:0}
.aosmc-wrij .gk-inh{flex:1;min-width:0;overflow-wrap:anywhere}
.aosmc-soort{display:block;font-size:11.5px;color:var(--tx3);margin-bottom:2px}
.aosmc-md{font-size:13px;max-height:220px;overflow:auto;margin-top:6px}
.aosmc-meer{margin-top:8px}

/* --- takenbord: één rij tegels, groot cijfer boven, label klein eronder --- */
.aosmc-bord{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.aosmc-kol{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--aosmc-r);
  cursor:pointer;text-align:left;font:inherit;color:var(--tx);min-width:0}
.aosmc-kol:hover{border-color:var(--line2)}
.aosmc-kol span{font-size:11.5px;color:var(--tx2);line-height:1.2}
.aosmc-kol b{font-size:28px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.aosmc-kol.nul b{color:var(--tx3)!important;font-weight:600}
.aosmc-kol.k-bezig b{color:var(--aos-groen)}.aosmc-kol.k-blok b{color:var(--aos-rood)}.aosmc-kol.k-review b,.aosmc-kol.k-usage b{color:var(--aos-oranje)}
.aosmc-kol b:empty{display:none}

@media(max-width:1100px){
  .aosmc-bord{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Telefoon (390 px): zes cijfers drie per rij, tabellen in hun eigen vak, geen horizontale paginascroll. */
@media(max-width:640px){
  .aosmc-cijfers{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .aosmc-cijfer{padding:8px 9px}
  .aosmc-cijfer b{font-size:17px}.aosmc-cijfer b small{font-size:12px}
  .aosmc-cijfer span{font-size:11px;line-height:1.25}.aosmc-cijfer em{font-size:10.5px}
  .aosmc-blok{padding:10px 10px}
  .aosmc-bord{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .aosmc-kol{padding:8px 9px}.aosmc-kol b{font-size:17px}.aosmc-kol span{font-size:11px}
  .aosmc .lio-top{grid-template-columns:minmax(0,1fr)}
  .aosmc-tabkop h2{font-size:16px}.aosmc-tabkop p{font-size:12.5px}
  .aos .aos-balk2{flex-wrap:wrap}
  /* app.css zet de tabs op de telefoon in meerdere regels (flex-wrap:wrap!important); hier één scrollbare rij. */
  .aos .aos-balk2>.seg{flex:1 1 100%;max-width:100%;width:100%;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;row-gap:0}
  .aos .aos-balk2>.seg button{flex:0 0 auto}
  .aosmc-rij{flex-wrap:wrap}
}

/* ============================================================
   14-10 (avond) Mission control compact: alles wat telt zonder scrollen op 1280×900.
   Twee kolommen (wacht op jou | agents), één rij (routines | takenbord), de rest in ingeklapte secties.
   ============================================================ */
.aosmc.lio{gap:10px}
.aosmc .aosmc-blok{padding:10px 14px 8px}
.aosmc .aosmc-kop{margin:0 0 4px}
.aosmc-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.aosmc-onder{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.aosmc-n{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}.aosmc-n.s-wacht{color:var(--aos-oranje)}
/* een regel per item */
.aos .goed-rij.aosmc-wrij2,.aosmc-wrij2{display:flex;flex-direction:row;align-items:center;gap:10px;padding:5px 0;margin:0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;min-width:0}
.aosmc-wrij2:last-of-type{border-bottom:0}
.aosmc-wtit{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.aosmc-wtit b{font-size:13px;font-weight:650;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.aosmc-wtit b.aosmc-klik:hover{text-decoration:underline}
.aosmc-wtit b{flex:0 1 auto}.aosmc-wtit span{flex:0 4 auto;font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}
.aosmc-wrij2 .gk-knop{flex:0 0 auto;width:auto;gap:4px}
.aosmc-wrij2 .gk-ja,.aosmc-wrij2 .gk-nee{padding:3px 9px;font-size:12px;flex:0 0 auto}
.aosmc-arij{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:10px;padding:5px 2px;border-bottom:1px solid var(--line);font-size:13px}
.aosmc-arij:last-of-type{border-bottom:0}
.aosmc-arij:hover{background:var(--hover)}
.aosmc-arij b{font-weight:700;white-space:nowrap}
.aosmc-een{color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:12.5px}
.aosmc-dot{--c:var(--aos-grijs);display:inline-flex;align-items:center;gap:5px;color:var(--c);font-size:12px;font-weight:600;white-space:nowrap}
.aosmc-dot i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 7px}
.aosmc-dot.s-bezig{--c:var(--aos-groen)}.aosmc-dot.s-wacht{--c:var(--aos-oranje)}.aosmc-dot.s-fout{--c:var(--aos-rood)}
.aosmc-voet{display:flex;align-items:baseline;gap:10px;padding-top:6px}
.aosmc-link{background:none;border:0;padding:0;font:600 12.5px var(--font,system-ui);color:var(--tx2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.aosmc-link:hover{color:var(--tx)}.aosmc-link.rood{color:var(--aos-rood)}
/* routines: succes% groot, dan de laatste 5 runs */
.aosmc-rkop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.aosmc-rkop>b{font-size:28px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.aosmc-rkop>span{font-size:12px;color:var(--tx2)}
.aosmc-rrij{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:baseline;gap:8px;padding:3px 0;font-size:12.5px;border-top:1px solid var(--line)}
.aosmc-rrij b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aosmc-rrij:hover{background:var(--hover)}
.aosmc-rrij .aosmc-dot{gap:0}
/* ingeklapte secties */
.aosmc-secs{display:grid;gap:6px}
.aosmc-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--aosmc-r);min-width:0}
.aosmc-sec>summary{display:flex;align-items:baseline;gap:8px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--tx);list-style:none}
.aosmc-sec>summary::-webkit-details-marker{display:none}
.aosmc-sec>summary::before{content:'';width:6px;height:6px;border-right:1.5px solid var(--tx3);border-bottom:1.5px solid var(--tx3);transform:rotate(-45deg);margin-right:4px;align-self:center;transition:transform .15s}
.aosmc-sec[open]>summary::before{transform:rotate(45deg)}
.aosmc-sec>summary b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.aosmc-sec>summary:hover{background:var(--hover)}
.aosmc-secin{padding:4px 14px 12px}
.aosmc-secin .aosmc-usage{margin-bottom:8px}
@media(max-width:1100px){
  .aosmc-cijfers{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .aosmc-twee,.aosmc-onder{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .aosmc-cijfer b{font-size:24px}.aosmc-cijfer b small{font-size:14px}
  .aosmc-bord{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aosmc-kol b{font-size:20px}
  .aos .goed-rij.aosmc-wrij2,.aosmc-wrij2{flex-wrap:wrap;gap:4px 10px}
  .aosmc-wrij2 .gk-knop,.aosmc-wrij2>.btn{width:auto;margin-left:auto}
  .aosmc-wtit{flex:1 1 100%}
  .aosmc-sec>summary{padding:9px 10px}.aosmc-secin{padding:4px 10px 10px}
}

/* ============================================================
   14-10 (avond) Wereld als eilanden: zes zwevende eilanden rond het middeneiland van de manager.
   Zelfde isometrie, figuren en kleuren als het dorp; hier alleen de nieuwe onderdelen.
   ============================================================ */
.aos-rots1{fill:var(--aos-rand2);opacity:.85}.aos-rots2{fill:var(--aos-rand1);opacity:.7}
.aos-brug{stroke:var(--aos-weg);stroke-width:7;stroke-linecap:round;opacity:.75}
.aos-brug2{stroke:rgba(0,0,0,.28);stroke-width:7;stroke-dasharray:1.5 5;opacity:.6}
.aos-eilandg.aos-klik:hover .aos-gras{filter:brightness(1.08)}
.aos-brugtal{cursor:pointer}
.aos-brugtal circle{fill:var(--panel);stroke:var(--line2);stroke-width:1}
.aos-brugtal text{font:700 10.5px var(--font,system-ui);fill:var(--tx);text-anchor:middle;font-variant-numeric:tabular-nums}
.aos-brugtal.nul text{fill:var(--tx3);font-weight:600}
.aos-eilbord{cursor:pointer}
.aos-eilbord rect{fill:var(--panel);stroke:var(--line2);stroke-width:1}
.aos-eilbord .t1{font:600 10.5px var(--font,system-ui);fill:var(--tx);text-anchor:start}
.aos-eilbord .t3{font:700 11.5px var(--font,system-ui);fill:var(--tx);text-anchor:end;font-variant-numeric:tabular-nums}
.aos-eilbord:hover rect{stroke:var(--tx3)}
.aos-eilbord.rood rect{stroke:var(--aos-rood);stroke-width:2}
/* lijst per eiland: alleen op de telefoon */
.aos-eilandlijst{display:none}
@media(max-width:640px){
  .aos-eilandlijst{display:grid;gap:8px;padding:10px 8px 12px;background:var(--panel)}
}
.aos-eil{border:1px solid var(--line);border-radius:var(--aosmc-r,2px);background:var(--panel);min-width:0}
.aos-eil.rood{border-color:var(--aos-rood)}
.aos-eilkop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;padding:8px 10px;background:var(--panel2);border:0;border-bottom:1px solid var(--line);
  font:inherit;font-size:13px;color:var(--tx);text-align:left;cursor:pointer}
.aos-eil.midden .aos-eilkop{cursor:default}
.aos-eilkop span{font-size:12px;color:var(--tx2);white-space:nowrap}.aos-eilkop span b{font-size:14px;color:var(--tx)}
.aos-eilrij{display:grid;grid-template-columns:8px auto auto minmax(0,1fr);align-items:baseline;gap:8px;width:100%;padding:7px 10px;background:transparent;border:0;
  border-bottom:1px solid var(--line);font:inherit;font-size:13px;color:var(--tx);text-align:left;cursor:pointer}
.aos-eilrij:last-child{border-bottom:0}.aos-eilrij:hover{background:var(--hover)}
.aos-eilrij>i{width:8px;height:8px;border-radius:50%;align-self:center}
.aos-eilrij em{font-style:normal;color:var(--tx2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.aos-eil>.hint{margin:0;padding:8px 10px;font-size:12px}
.aosl .aos-eil{border:0}