/* ASKLA sidebar: navigation, counts, presence, website and account, in the desktop rail and the phone drawer.
   One sidebar element (#admin-sidebar) moves between #app and the phone drawer; its own id scopes these rules in both homes.
   Motion uses the --motion-* tokens in app.css: transform and opacity only, 120-240ms, never looping. */
:root{
  --sb-accent:var(--link);
  --sb-active-bg:color-mix(in srgb,var(--sb-accent) 11%,transparent);
  --sb-active-hover-bg:color-mix(in srgb,var(--sb-accent) 15%,transparent);
  --sb-hover-bg:color-mix(in srgb,var(--ink) 6%,transparent);
  --sb-tile-bg:color-mix(in srgb,var(--ink) 4%,transparent);
  --sb-item-radius:min(var(--admin-control-radius),12px);
  --sb-badge-bg:var(--warn);--sb-badge-ink:#ffffff;
  --sb-online-ink:color-mix(in srgb,var(--ok) 75%,var(--ink))
}
:root[data-theme=dark]{--sb-badge-ink:#161616;--sb-online-ink:var(--ok);--sb-active-bg:color-mix(in srgb,var(--sb-accent) 14%,transparent);--sb-active-hover-bg:color-mix(in srgb,var(--sb-accent) 18%,transparent)}

/* ---------------------------------------------------------------- sections */
/* 2px around the list keeps the sections' focus ring inside the scroll area, in the drawer too. */
#admin-sidebar .tabs{position:relative;padding:2px}
#admin-sidebar .tabs [role=tab]{position:relative;flex:none;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border:0;border-radius:var(--sb-item-radius);background:transparent;color:var(--mid);font-size:14px;line-height:20px;font-weight:500;text-align:left;transition:transform var(--motion-fast) var(--ease-out)}
#admin-sidebar .tabs [role=tab] .admin-icon{flex:none;width:20px;height:20px;stroke-width:1.7}
#admin-sidebar .tabs [role=tab]>span:not([data-icon]):not(.cnt){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Hover is a neutral surface; only the current section carries the accent. */
@media(hover:hover){#admin-sidebar .tabs [role=tab]:hover{background:var(--sb-hover-bg);color:var(--ink)}}
#admin-sidebar .tabs [role=tab][aria-selected=true]{background:var(--sb-active-bg);color:var(--sb-accent);font-weight:600}
@media(hover:hover){#admin-sidebar .tabs [role=tab][aria-selected=true]:hover{background:var(--sb-active-hover-bg);color:var(--sb-accent)}}
#admin-sidebar .tabs [role=tab][aria-selected=true] [data-icon]{color:inherit}
#admin-sidebar .tabs [role=tab]:active{transform:scale(.98)}
/* One focus ring for every sidebar control, in #app and in the phone drawer (which polish.css's #app rule does not reach). */
#admin-sidebar :is(button,a,select,summary):focus-visible{outline:2px solid var(--link);outline-offset:2px;box-shadow:none}
#admin-sidebar .tabs [role=tab]:focus-visible{outline:2px solid var(--link);outline-offset:0;box-shadow:none}
#app[data-sidebar=collapsed] .admin-sidebar .tabs [role=tab]{justify-content:center;padding:10px}
/* 68px less the 1px edge leaves 67px: 8px sides keep the rail's controls at least 44px wide. */
#app[data-sidebar=collapsed]>.admin-sidebar{padding-inline:8px}
@media(pointer:coarse){#admin-sidebar :is(.tabs [role=tab],.sidebar-search,#presence,#appearance-open,.admin-account summary){min-height:44px}}

/* The current section's bar: one element that slides between sections on transform (shell.js places it). */
.sidebar-indicator{position:absolute;top:0;inset-inline-start:2px;width:3px;height:20px;border-radius:3px;background:var(--sb-accent);pointer-events:none;opacity:0;transform:translateY(0);transition:transform var(--motion-normal) var(--ease-out),opacity var(--motion-fast) linear}
.sidebar-indicator[data-ready=true]{opacity:1}
#app[data-sidebar=collapsed] .sidebar-indicator{inset-inline-start:0}

/* Group captions on tall windows; shorter windows draw dividers instead (workspace.css). */
.admin-sidebar .sidebar-group{margin:16px 12px 4px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.admin-sidebar .sidebar-group:first-child{margin-top:4px}
@media(max-height:1000px){.admin-sidebar .sidebar-group{font-size:0;line-height:0;letter-spacing:0;height:1px;margin:6px 12px 2px}}

/* ---------------------------------------------------------------- count badge (Live: chats waiting for a person) */
#admin-sidebar .tabs [role=tab] .cnt{display:inline-grid;place-items:center;margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sb-badge-bg);color:var(--sb-badge-ink);font-size:11px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
#admin-sidebar .tabs [role=tab] .cnt.is-new{animation:sb-pop var(--motion-normal) var(--ease-out)}
#admin-sidebar .tabs [role=tab] .cnt[hidden]{display:none}
#app[data-sidebar=collapsed] .admin-sidebar .tabs [role=tab] .cnt{position:absolute;top:4px;left:calc(50% + 2px);right:auto;min-width:16px;height:16px;padding:0 4px;font-size:10px;margin:0;box-shadow:0 0 0 2px var(--surface)}
@keyframes sb-pop{from{opacity:0;transform:scale(.6)}}

/* ---------------------------------------------------------------- footer counts: three stat tiles */
.sidebar-bottom #workspace-tools{gap:4px;padding:0;border:0;background:none}
.sidebar-bottom #workspace-tools>.work-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0;border:0;font-size:11px}
/* One tile height on every page (room for a two-line word such as "high interest"), so the footer never jumps; larger text spacing grows it rather than clipping. */
.sidebar-bottom #workspace-tools>.work-metrics>span{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-width:0;min-height:54px;padding:3px 8px;border:1px solid transparent;border-radius:min(var(--admin-control-radius),10px);background:var(--sb-tile-bg);color:var(--mid);font-size:11px;line-height:13px;white-space:normal;overflow-wrap:break-word}
.sidebar-bottom #workspace-tools>.work-metrics b{display:block;min-width:0;margin:0;font:600 16px/20px Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.sidebar-bottom #workspace-tools>.work-metrics>span[data-tone=warn]{background:var(--warnbg);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.sidebar-bottom #workspace-tools>.work-metrics>span[data-tone=warn] b{color:var(--warn)}
.sidebar-bottom #workspace-tools>.work-metrics b.stat-changed{animation:sb-rise var(--motion-normal) var(--ease-out)}
@keyframes sb-rise{from{opacity:0;transform:translateY(4px)}}
/* Visitors' Refresh follows Alerts in the DOM and sits at the end of its row, so the tiles keep Live's width and the
   reading and Tab order match what is seen: the tiles, then Alerts, then Refresh. */
.sidebar-bottom>#av-refresh{display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:10px;border:0;border-radius:var(--sb-item-radius);background:transparent;color:var(--ink);transition:transform var(--motion-fast) var(--ease-out)}
@media(hover:hover){.sidebar-bottom>#av-refresh:hover{background:var(--sb-hover-bg)}}
.sidebar-bottom>#av-refresh:active{transform:scale(.98)}
#app[data-sidebar=collapsed] .sidebar-bottom>#av-refresh{align-self:center}
:is(#app:not([data-sidebar=collapsed]),#navigation-dialog) .sidebar-bottom:has(>#av-refresh){display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:4px;row-gap:2px}
:is(#app:not([data-sidebar=collapsed]),#navigation-dialog) .sidebar-bottom:has(>#av-refresh)>:not(#sidebar-alerts,#av-refresh){grid-column:1/-1}
/* Beside Refresh in the 232px sidebar the row reads "Alerts" (still named and titled Alerts and shortcuts); the drawer has room for all of it. */
#app:not([data-sidebar=collapsed]) .sidebar-bottom:has(>#av-refresh) .sidebar-alerts-more{display:none}

/* ---------------------------------------------------------------- presence: a pill with the state in words, the action beside it */
.sidebar-bottom #presence{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:4px 12px 4px 8px;border:0;border-radius:var(--sb-item-radius);background:transparent;color:var(--ink);font-size:13px;font-weight:600;transition:transform var(--motion-fast) var(--ease-out)}
@media(hover:hover){.sidebar-bottom #presence:hover{background:var(--sb-hover-bg)}}
.sidebar-bottom #presence:active{transform:scale(.98)}
#presence .presence-chip{display:inline-flex;align-items:center;gap:8px;flex:none;height:28px;padding:0 10px 0 9px;border:1px solid var(--line);border-radius:999px;background:var(--sb-tile-bg);color:var(--ink);line-height:1}
.sidebar-bottom #presence .presence-light{display:block;flex:none;width:8px;height:8px;margin:0;border-radius:50%;background:var(--soft);box-shadow:none;transition:none}
#presence .presence-action{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mid);font-size:12px;font-weight:500}
#presence[data-state=online] .presence-chip{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--sb-online-ink)}
#presence[data-state=online] .presence-light{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
#presence .presence-light.presence-changed{animation:sb-light-in var(--motion-normal) var(--ease-out)}
@keyframes sb-light-in{from{opacity:0;transform:scale(.3)}}
#app[data-sidebar=collapsed] .sidebar-bottom #presence{justify-content:center;padding:8px}
#app[data-sidebar=collapsed] #presence>.presence-chip{display:inline-flex;justify-content:center;width:28px;padding:0}
#app[data-sidebar=collapsed] #presence :is(.presence-state,.presence-action){display:none}

/* ---------------------------------------------------------------- website: globe, "Website" over the name, chevron, Open site */
#sidebar-workspace .admin-workspace{position:relative;display:flex;align-items:center;gap:12px;max-width:none;min-height:44px;padding:0 0 0 12px;border:1px solid var(--line);border-radius:var(--sb-item-radius);background:var(--sb-tile-bg);color:var(--ink)}
@media(hover:hover){#sidebar-workspace .admin-workspace:has(#tenant:not([hidden])):hover{background:var(--sb-hover-bg)}}
#sidebar-workspace .ws-globe{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--mid)}
#sidebar-workspace .ws-text{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;min-height:42px}
#sidebar-workspace .admin-workspace-label{display:block;font-size:11px;line-height:14px;font-weight:500;color:var(--soft)}
#sidebar-workspace #website-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:18px;font-weight:600;color:var(--ink)}
#sidebar-workspace #website-name:empty{display:none}
/* With a choice of websites the native select covers the row (one target, the Website name), its text under the caption. */
#sidebar-workspace .ws-text:has(#tenant:not([hidden])){justify-content:flex-start;padding-top:5px}
#sidebar-workspace #tenant{position:absolute;inset:0 44px 0 0;width:auto;max-width:none;min-height:0;height:auto;margin:0;padding:19px 36px 5px 44px;border:0;border-radius:var(--sb-item-radius);background:transparent;color:var(--ink);font:600 14px/18px Manrope,system-ui,sans-serif;appearance:none;-webkit-appearance:none;cursor:pointer;text-overflow:ellipsis}
#sidebar-workspace .admin-workspace:has(#launch-site[hidden]) #tenant{right:0}
#sidebar-workspace #tenant:focus-visible{outline:2px solid var(--link);outline-offset:0;box-shadow:none}
#sidebar-workspace .ws-chevron{display:none;place-items:center;flex:none;width:16px;height:16px;color:var(--mid);pointer-events:none}
#sidebar-workspace .admin-workspace:has(#tenant:not([hidden])) .ws-chevron{display:grid}
#sidebar-workspace .admin-workspace:has(#tenant:not([hidden])):not(:has(#launch-site:not([hidden]))) .ws-chevron{margin-inline-end:12px}
@media(pointer:coarse){#sidebar-workspace #tenant{font-size:16px}}

/* ---------------------------------------------------------------- account: the member's avatar and name */
#admin-sidebar .admin-account summary{gap:12px;padding:8px 12px 8px 8px;border-radius:var(--sb-item-radius);transition:transform var(--motion-fast) var(--ease-out)}
@media(hover:hover){#admin-sidebar .admin-account summary:hover{background:var(--sb-hover-bg)}}
#admin-sidebar .admin-account[open] summary{background:var(--sb-hover-bg)}
#admin-sidebar .admin-account summary:active{transform:scale(.98)}
.admin-account .account-avatar{display:grid;place-items:center;flex:none;width:28px;height:28px}
.admin-account .account-avatar .team-avatar{width:28px;height:28px;font-size:12px;line-height:1;font-weight:700;background:color-mix(in srgb,var(--sb-accent) 14%,var(--surface));color:var(--sb-accent)}
.admin-account .admin-account-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#admin-sidebar .admin-account summary>[data-icon=chevron]{display:inline-grid;place-items:center;flex:none;color:var(--mid);transition:transform var(--motion-normal) var(--ease-out)}
#admin-sidebar .admin-account[open] summary>[data-icon=chevron]{transform:rotate(180deg)}
#app[data-sidebar=collapsed] .sidebar-bottom .admin-account summary{justify-content:center;padding:8px}

/* ---------------------------------------------------------------- collapsed rail tooltip (shell.js) */
.rail-tip{--rail-tip-gap:8px;position:fixed;z-index:90;max-width:240px;padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--surface);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.16);opacity:0;transform:translate(4px,-50%);transition:opacity var(--motion-quick) linear,transform var(--motion-quick) var(--ease-out)}
.rail-tip.is-on{opacity:1;transform:translate(0,-50%)}
.rail-tip::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:var(--rail-tip-gap)}
.rail-tip[hidden]{display:none}

/* ---------------------------------------------------------------- phone drawer: slides in from the inline start, the backdrop fades */
@media(prefers-reduced-motion:no-preference){
  #navigation-dialog[open]{animation:sb-drawer-in var(--motion-slow) var(--ease-out)}
  #navigation-dialog[open]::backdrop{animation:fade var(--motion-slow) linear}
}
@keyframes sb-drawer-in{from{transform:translateX(-100%)}}
#navigation-dialog #navigation-close{flex:none}
/* A phone on its side has no room for a scrolling list between a fixed header and footer: the drawer scrolls as a whole,
   footer included, so every section, presence and Account can be reached and their focus rings show. */
@media(max-width:900px) and (max-height:500px){
  #navigation-dialog .admin-sidebar{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding:8px}
  #navigation-dialog .admin-sidebar>*{flex-shrink:0}
  #navigation-dialog .admin-sidebar .tabs{flex:none;min-height:0;overflow:visible}
}

@media(prefers-reduced-motion:reduce){
  #admin-sidebar .tabs [role=tab]{transition:none}
  #admin-sidebar .tabs [role=tab]:active{transform:none}
  .sidebar-indicator{transition:none}
  @keyframes sb-pop{from{opacity:0}}
  @keyframes sb-rise{from{opacity:0}}
  .sidebar-bottom>#av-refresh:active,.sidebar-bottom #presence:active,#admin-sidebar .admin-account summary:active{transform:none}
  #admin-sidebar .admin-account summary>[data-icon=chevron]{transition:none}
  .rail-tip,.rail-tip.is-on{transform:translate(0,-50%)}
  #navigation-dialog[open]{animation:fade var(--motion-fast) linear}
  @keyframes sb-light-in{from{opacity:0}}
}
@media(forced-colors:active){
  #admin-sidebar .tabs [role=tab][aria-selected=true]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  #admin-sidebar .tabs [role=tab]:focus-visible{outline-color:CanvasText}
  /* The bar sits on the Highlight row, so it takes HighlightText, inside the row's edge in the rail too. */
  .sidebar-indicator{forced-color-adjust:none;background:HighlightText}
  #app[data-sidebar=collapsed] .sidebar-indicator{inset-inline-start:2px}
  #admin-sidebar .tabs [role=tab] .cnt{border:1px solid CanvasText}
  .sidebar-bottom #workspace-tools>.work-metrics>span{border-color:CanvasText}
  #presence .presence-chip{border-color:CanvasText}
  .sidebar-bottom #presence .presence-light{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText;box-shadow:none}
  .sidebar-bottom #presence[data-state=online] .presence-light{background:CanvasText}
  .rail-tip{border:1px solid CanvasText}
}