/* Ilorb Boards / CRM shell on top of opera.css (the house style, vendored as-is — never edit opera.css).
   Same shell as the Ilorb Omni panel (operachat.com.br/web/admin-html: src/layout.ts + public/admin.css): side menu with
   groups, collapse, user + sign out at the foot; top bar with burger, crumb, search, language, theme.
   Brand: Ilorb indigo, Inter (self-hosted, fonts.css). Tokens for both themes, set by theme-init.js (data-theme). */
:root{--acc:#8b87ff;--acc-soft:rgba(139,135,255,.12);--bar:#8b87ff;--on-acc:#0e0c2b;--acc-line:rgba(139,135,255,.35);--acc-bg:rgba(139,135,255,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--shadow:0 1px 2px rgba(0,0,0,.25)}
:root[data-theme="light"]{--bg:#f7f8fc;--card:#fff;--side:#fff;--line:#e3e7ef;--line2:#cdd3df;--txt:#0e1726;--mut:#5b6678;
  --acc:#4338ca;--acc-soft:rgba(67,56,202,.08);--bar:#4f46e5;--on-acc:#fff;--acc-line:rgba(67,56,202,.28);--acc-bg:rgba(67,56,202,.05);
  --ok:#0f8a5f;--scroll:#cdd3df;--shadow:0 1px 2px rgba(14,23,38,.05),0 2px 8px rgba(14,23,38,.04)}
body{font-family:var(--font);font-size:14.5px;-webkit-font-smoothing:antialiased}
/* Boards' svg() wraps the icon in <span class="i">: size it like opera.css's svg.i */
span.i{display:inline-flex;width:16px;height:16px;flex:none}span.i svg{width:100%;height:100%;stroke-width:1.8}
.side a.it span.i{opacity:.85}.side a.it.on span.i{opacity:1}
.burger span.i,.tgl span.i{width:18px;height:18px}
.srch span.i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.srch span.i svg{position:static;transform:none} /* opera.css positions the svg itself; here the wrapper is positioned */
input,select,textarea,button{font-family:var(--font)}

/* brand (Orbit symbol + product name; org in small; DEV flag) */
.mark{width:30px;height:30px;flex:none;border-radius:9px;background:var(--acc-soft);display:inline-flex;align-items:center;justify-content:center}
.mark svg{width:20px;height:20px}
.brand{gap:10px;padding:14px 14px 10px;color:var(--txt);text-decoration:none!important}
.brand .lbl{font-weight:800;letter-spacing:-.3px;font-size:16px;line-height:1.15;min-width:0}
.brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.brand .dev{color:var(--warn);font-weight:700}

/* compact sidebar (Omni) */
.side a.it{padding:6px 12px;margin:1px 8px;font-size:13.5px;gap:10px;border-left:0;border-radius:8px;font-weight:500;cursor:pointer}
.side a.it.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.side a.it.on svg.i{opacity:1}
.side a.it .ext-ic{margin-left:auto;opacity:.55}.side a.it .ext-ic svg.i{width:13px;height:13px}
.side a.it .dot{width:10px;height:10px;border-radius:3px;flex:none;background:var(--tile,var(--acc));margin:0 3px}
.side .lbl{overflow:hidden;text-overflow:ellipsis}
.side .grp{padding:12px 20px 3px;cursor:default;font-weight:600}
.side .foot{padding:10px 12px;display:flex;align-items:center;gap:9px}
.side .foot .who{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.25}
.side .foot .who b,.side .foot .who small{max-width:100%}
.side .foot .who b{color:var(--txt);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .foot .who small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkbtn{background:none;border:0;height:28px;width:28px;padding:0;justify-content:center;color:var(--mut);font-weight:400;border-radius:7px}
.linkbtn:hover{color:var(--bad);background:var(--hover-btn)}
.colbtn{display:inline-flex;align-items:center;justify-content:center;width:28px}
.colbtn svg.i{transition:transform .15s}
.shell.col .colbtn svg.i{transform:rotate(180deg)}
.shell.col .brand{flex-direction:column;gap:6px}
.shell.col .side .grp{padding:8px 0 2px}.shell.col .side .grp span{display:none}
.shell.col .side .grp::before{content:"";display:block;width:18px;border-top:1px solid var(--line)}
.shell.col .side a.it{padding:8px 0;margin:1px 8px}
.shell.col .side a.it .ext-ic{display:none}
.shell.col .side .foot{flex-direction:column;padding:10px 0}
.side .avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--acc-soft);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}

/* top bar (Omni) */
.topbar{background:var(--card)}
.topbar .crumb{color:var(--mut);font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar .crumb b{color:var(--txt);font-weight:650}.topbar .crumb .sep{opacity:.5;margin:0 2px}
.topbar form{margin:0}
.srch{position:relative}.srch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mut)}
.srch input{padding-left:32px;width:320px;height:34px;font-size:13px;background:var(--bg);border-color:transparent}
.srch input:focus{background:var(--card)}
.topbar select{height:34px;font-size:13px}
.topbar .ctx select{min-width:0;width:auto}
.tgl{height:34px;width:34px;padding:0;justify-content:center;background:var(--card);color:var(--txt);border-color:var(--line)}
.tgl:hover{border-color:var(--line2)}
.burger svg.i{width:18px;height:18px}
.side .foot-lang{display:none}
/* the shell's own content area: pages scroll in .body; board/pipeline pages fill it (.body.full) */
.body.full{padding:0;overflow:hidden}
.body.full #main,.body.full #app{max-width:none;height:100%} /* Boards' content root is #app */
#main{outline:none}

/* signed out: no side menu, top bar keeps only brand + language + theme (like the Omni sign-in page) */
body.login .side,body.login .burger,body.login .crumb,body.login .srch{display:none}
body.login .topbar .login-brand{display:flex}
.topbar .login-brand{display:none;align-items:center;gap:10px;font-weight:800;font-size:16px;color:var(--txt);text-decoration:none!important}
/* brand on the sign-in card */
.auth-brand{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.auth-brand .logo{height:28px}
.auth-prod{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--txt);padding-left:10px;border-left:1px solid var(--line);line-height:26px}
.auth-dev{margin-left:auto;font-size:11px;font-weight:700;color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:999px;padding:1px 8px}

@media(max-width:820px){
  .body{padding:14px}
  .topbar{gap:8px}
  .topbar .crumb{display:none}
  .topbar .ctx{flex:1;margin-left:0;min-width:0}
  .topbar .ctx select,.topbar .ctx .osel{display:none} /* language moves to the drawer foot on phones */
  .srch{flex:1;min-width:0}.srch input{width:100%}
  .side .foot-lang{display:block;padding:8px 12px 0}
  .side .foot-lang select{width:100%}
  body.login .topbar .ctx .osel{display:inline-flex}
}