/* CloudZH sidebar: one look for the dashboard, the license portal and the customer portal (since 0.70).
   Source: web/public/sidebar.css. portal/public/sidebar.css is an exact copy (tests/sidebar-test.mjs checks it):
     cp web/public/sidebar.css portal/public/sidebar.css
   Needs the usual color tokens of the page: --side --surface --sunk --line --line-strong --fg --fg-2 --muted --accent --on-accent --bg.
   Markup:
     <aside class="zs">                       (the app keeps its own position, width and mobile behaviour)
       <a class="zs-brand"><span class="brand">monogram + wordmark</span>[<small>Area</small>]</a>
       [search: .zs-search]
       <nav class="zs-nav">
         <div class="zs-grp zs-top"><a class="zs-i on">…</a></div>             (overview, no title)
         <div class="zs-grp [folded]"><(div|button) class="zs-h">icon<span>Title</span>[chevron .zs-chev]</…>
           <div class="zs-sub"><a class="zs-i">icon<span>Page</span>[.zs-badge]</a>…</div></div>
       </nav>
       <div class="zs-foot"><div class="zs-who">Name<small>e-mail or role</small></div><div class="zs-acts">[.zs-lang] [theme] [sign out]</div></div>
     </aside> */
:root{--zs-w:256px}
.zs{--zs-gap:14px;display:flex;flex-direction:column;gap:var(--zs-gap);font-size:14px;line-height:1.5}

/* Brand: the logo exactly like on cloudzh.app (each app draws it with its own .brand styles), larger and centred in the
   space above the navigation (since 0.77.4); an optional area name below it (only the license portal still shows one) */
.zs-brand{display:grid;gap:6px;justify-items:center;padding:8px 6px 6px;color:var(--fg);text-decoration:none!important;min-width:0}
.zs-brand .brand{--logo:36px;--mark-size:36px;color:var(--fg);min-width:0;max-width:100%}
.zs-brand .mark{width:var(--mark-size);height:var(--mark-size)}
.zs-brand .brand-logo{width:36px;height:36px}
.zs-brand .brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-brand small{display:block;font-family:var(--font-body,inherit);font-size:12px;font-weight:400;line-height:1.2;color:var(--muted);letter-spacing:0}

/* Search (admin areas only) */
.zs-search{display:flex;align-items:center;gap:9px;width:100%;height:36px;margin:0;padding:0 8px 0 10px;border:1px solid var(--line);background:var(--surface);border-radius:10px;color:var(--muted);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;transition:border-color .15s,color .15s}
input.zs-search{cursor:text;color:var(--fg)}
input.zs-search::placeholder{color:var(--muted)}
.zs-search:hover,.zs-search:focus-visible,.zs-search:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--fg);outline:none}
.zs-search>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-search kbd{font-family:var(--font-mono,ui-monospace,monospace);font-size:10.5px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:var(--sunk);color:var(--muted)}

/* Groups: title with red icon, pages indented on a guide line */
.zs-nav{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}
.zs-grp{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0}
.zs-grp+.zs-grp{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.zs-h{display:flex;align-items:center;gap:6px;width:100%;margin:0;padding:0 10px 6px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;min-width:0}
button.zs-h{cursor:pointer}
button.zs-h:hover{color:var(--fg)}
button.zs-h:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.zs-h>.ic:first-child{flex:none;color:var(--accent)}
.zs-h>span:not([class]){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the chevron only takes room when it is needed (hover, keyboard, folded), so long titles stay readable */
.zs-h .zs-chev{flex:none;margin-left:auto;display:none;opacity:.8;transition:transform .15s}
.zs-grp:hover .zs-chev,button.zs-h:focus-visible .zs-chev,.zs-grp.folded .zs-chev{display:block}
.zs-grp.folded .zs-chev{transform:rotate(-90deg)}
.zs-h .zs-badge{margin-left:auto}
.zs-h .zs-badge+.zs-chev{margin-left:6px}
.zs-tag{flex:0 1000 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:1px;padding:0 4px;line-height:14px;border:1px solid var(--line-strong,var(--line));border-radius:999px;font-family:var(--font-mono,ui-monospace,monospace);font-size:8.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.zs-sub{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0;margin-left:16px;padding-left:8px;border-left:1px solid var(--line)}
.zs-grp.folded .zs-sub{display:none}

/* Pages */
.zs-i{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--fg-2);font:inherit;font-weight:500;text-align:left;text-decoration:none!important;width:100%;min-width:0}
.zs-i>.ic:first-child{flex:none;color:var(--muted)}
.zs-i>span:not([class]){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-i:hover{background:var(--sunk);color:var(--fg)}
.zs-i:hover>.ic:first-child{color:var(--fg-2)}
.zs-i:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.zs-i.on{background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.05)}
.zs-i.on>.ic:first-child{color:var(--accent)}
.zs-sub .zs-i.on::before{content:"";position:absolute;left:-9.5px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent)}
.zs-i .zs-ext{flex:none;width:13px;height:13px;opacity:.7}
.zs-i .pro-tag,.zs-i .soon{flex:none;margin-left:auto}
.zs-badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent,#fff);font-size:11.5px;font-weight:600;display:inline-grid;place-items:center}

/* Footer: who is signed in, language, appearance, sign out */
.zs-foot{margin-top:auto;display:grid;gap:10px;padding:12px 4px 0;border-top:1px solid var(--line)}
.zs-foot .zs-link{justify-content:flex-start}
.zs-who{display:flex;align-items:center;gap:10px;min-width:0;padding:0 4px}
.zs-who .avatar{flex:none}
.zs-who-t{display:grid;gap:1px;min-width:0;font-size:13px;font-weight:500;color:var(--fg)}
.zs-who-t b,.zs-who-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-who-t b{font-weight:500}
.zs-who-t small{font-size:12px;font-weight:400;color:var(--muted)}
.zs-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.zs-acts .zs-out{margin-left:auto}
.zs-lang{display:inline-flex;border:1px solid var(--line-strong,var(--line));border-radius:9px;overflow:hidden}
.zs-lang button{border:0;border-radius:0;background:var(--surface);padding:4px 10px;font:inherit;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer}
.zs-lang button:hover{color:var(--fg)}
.zs-lang button.on{background:var(--fg);color:var(--bg)}

/* Phone, portals without a drawer: one row per group, title on the left (.zs-flat) */
@media (max-width:860px){
  .zs.zs-flat{--zs-gap:10px}
  .zs-flat .zs-grp{grid-template-columns:76px minmax(0,1fr);align-items:center;gap:6px}
  .zs-flat .zs-top{grid-template-columns:minmax(0,1fr)}
  .zs-flat .zs-grp+.zs-grp{margin-top:4px;padding-top:6px}
  .zs-flat .zs-h{padding:0 0 0 2px;font-size:10px;gap:5px}
  .zs-flat .zs-h>span:not([class]){white-space:normal;line-height:1.25}
  .zs-flat .zs-h>.ic:first-child,.zs-flat .zs-h .zs-chev,.zs-flat .zs-h .zs-tag{display:none}
  .zs-flat .zs-grp.folded .zs-sub{display:flex}
  .zs-flat .zs-sub{display:flex;flex-wrap:wrap;gap:2px 4px;margin-left:0;padding-left:0;border-left:0}
  .zs-flat .zs-sub .zs-i.on::before{display:none}
  .zs-flat .zs-i{width:auto;height:32px;padding:0 9px;font-size:13px;gap:7px}
  .zs-flat .zs-i>span:not([class]){flex:none}
  .zs-flat .zs-foot{margin-top:0}
}