/* topbar-workspace.css
   icons__21_.html structure, using the APP's existing CSS variables.
   Zero dark overrides. Removes old .topbar/.sidebar. */

/* ── App shell ──────────────────────────────────────────────────────────── */
.app {
  width: 100%; height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: var(--bg);
}

/* ── Kill old nav + sidebar (replaced entirely) ─────────────────────────── */
nav.topbar,
.sidebar,
.sidebar-backdrop { display: none !important; }

/* ── Topbar region ──────────────────────────────────────────────────────── */
.topbar-region {
  position: relative; z-index: 9000;
  flex: 0 0 auto; width: 100%;
  transition: flex-basis 0.35s cubic-bezier(0.4,0,0.2,1);
}
.topbar-region.is-sticky {
  position: fixed;
  top:   max(10px, env(safe-area-inset-top));
  left:  max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  width: auto; z-index: 9000;
}
.topbar-region.is-closed { flex-basis: 52px; }
.topbar-region.is-sticky.is-closed .topbar-wrapper {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.topbar-region.is-sticky.is-closed .topbar-chevron {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-bd);
  border-radius: 50%;
  box-shadow: var(--nm-btn);
}
.topbar-region.is-closed .scroll-progress { opacity: 0; pointer-events: none; }

/* ── Topbar wrapper pill ────────────────────────────────────────────────── */
.topbar-wrapper {
  position: relative; width: 100%; height: 64px;
  display: flex; align-items: center; padding: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill);
  box-shadow: var(--nm-deep);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition:
    width 0.35s cubic-bezier(0.4,0,0.2,1),
    height 0.35s cubic-bezier(0.4,0,0.2,1),
    padding 0.35s cubic-bezier(0.4,0,0.2,1),
    border-radius 0.35s cubic-bezier(0.4,0,0.2,1),
    opacity 0.35s ease, background 0.35s ease,
    border-color 0.35s ease, box-shadow 0.35s ease;
}
.topbar-wrapper.is-closed {
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
}
.topbar-wrapper.is-closed .glass-topbar,
.topbar-wrapper.is-closed .expand-button {
  opacity: 0; pointer-events: none; flex: 0; width: 0; min-width: 0; overflow: hidden;
}
.topbar-wrapper.is-closed .topbar-chevron {
  flex-basis: 50px; width: 50px; min-width: 50px; height: 50px;
}

/* ── Chevron toggle ─────────────────────────────────────────────────────── */
.topbar-chevron {
  flex: 0 0 52px; width: 52px; min-width: 52px; height: 52px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-pill);
  color: var(--txt2); background: transparent;
  cursor: pointer;
  transition: background var(--t), color var(--t), transform var(--t);
}
.topbar-chevron:hover { background: var(--s2); color: var(--acc); }
.topbar-chevron:active { transform: scale(.92); }
.topbar-chevron:focus-visible { outline: 2px solid var(--acc); outline-offset: -3px; }
.topbar-chevron svg { width: 19px; height: 19px; stroke-width: 2; pointer-events: none;
                      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }

/* ── Glass topbar / icon scroll ─────────────────────────────────────────── */
.glass-topbar {
  flex: 1 1 auto; min-width: 0; height: 52px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: transparent;
  transition: opacity 0.3s ease, flex 0.35s cubic-bezier(0.4,0,0.2,1);
}
.icon-scroll {
  position: relative; z-index: 2;
  width: auto; max-width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; touch-action: pan-x; scroll-behavior: smooth;
}
.icon-scroll::-webkit-scrollbar { display: none; }
.icon-scroll.has-overflow { justify-content: flex-start; }

/* ── Nav icon item ──────────────────────────────────────────────────────── */
.icon-item {
  position: relative;
  flex: 0 0 44px; width: 44px; height: 52px;
  display: grid; place-items: center; padding: 0; margin: 0;
  border: 0; outline: 0; border-radius: var(--r);
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: color var(--t), transform var(--t), background var(--t);
}
.icon-item:hover { color: var(--txt); background: var(--s2); }
.icon-item:active { transform: scale(.88); }
.icon-item:focus-visible { outline: 2px solid var(--acc); outline-offset: -6px; }
.icon-item svg { width: 20px; height: 20px; stroke-width: 1.9; pointer-events: none; }
.icon-item.active { color: var(--acc); }
.icon-item.active::after {
  content: ''; position: absolute;
  left: 50%; bottom: 5px; width: 16px; height: 2.5px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--acc);
}

/* dept separator in strip */
.tb-nav-sep {
  flex-shrink: 0; width: 1px; height: 22px; margin: 0 4px;
  background: var(--bd2);
}

/* Live badge */
.icon-item[data-badge="live"]::before {
  content: ''; position: absolute; top: 9px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  animation: live-pulse 1.6s infinite;
}
.icon-item[data-badge="live"].live-active::before {
  background: var(--green); animation: none;
}
@keyframes live-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.35; transform:scale(.65); }
}

/* ── Expand button ──────────────────────────────────────────────────────── */
.expand-button {
  flex: 0 0 52px; width: 52px; min-width: 52px; height: 52px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-pill);
  color: var(--muted); background: transparent;
  cursor: pointer;
  transition: background var(--t), color var(--t), transform var(--t);
}
.expand-button:hover { background: var(--s2); color: var(--acc); }
.expand-button:active { transform: scale(.92); }
.expand-button svg { width: 18px; height: 18px; stroke-width: 1.9; pointer-events: none; }

/* ── Scroll progress bar ────────────────────────────────────────────────── */
.scroll-progress {
  position: absolute; z-index: 10;
  left: 57px; right: 57px; bottom: 1px; width: auto; height: 2px;
  pointer-events: none; transition: opacity .3s ease;
}
.scroll-progress-track {
  position: absolute; inset: 0;
  border-radius: var(--r-pill); background: var(--bd2);
}
.scroll-progress-fill {
  position: absolute; left: 0; top: 0; width: 0%; height: 100%;
  border-radius: var(--r-pill); background: var(--acc);
  transition: width .1s linear;
}
.scroll-progress-thumb {
  position: absolute; left: 0; top: 50%;
  width: 12px; height: 4px; transform: translate(-50%,-50%);
  border-radius: var(--r-pill); background: var(--acc);
  transition: left .1s linear;
}

/* ── Gap spacer ─────────────────────────────────────────────────────────── */
.topbar-gap {
  flex: 0 0 14px; height: 14px; width: 100%;
  transition: flex-basis 0.35s cubic-bezier(0.4,0,0.2,1),
              height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.topbar-gap.is-hidden { flex-basis: 0; height: 0; }

/* ── Main workspace region ──────────────────────────────────────────────── */
.main-region {
  position: relative; z-index: 5;
  flex: 1 1 auto; min-height: 0; min-width: 0;
  width: 100%; overflow: hidden;
}

/* ── Workspace panel (floating card — replaces old .page padding-top hack) */
.workspace-panel {
  position: relative; width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: var(--r-xl);
  box-shadow: var(--nm-out);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--s4) transparent;
}
.workspace-panel::-webkit-scrollbar { width: 4px; }
.workspace-panel::-webkit-scrollbar-track { background: transparent; }
.workspace-panel::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 4px; }

/* Override old .page top-padding — workspace-panel handles scroll containment now */
.page { padding-top: 24px; padding-bottom: 40px; min-height: unset; }

/* ── Expanded navigation overlay (two-pane) ─────────────────────────────── */
.navigation-expanded {
  position: fixed; z-index: 9500;
  top:    max(10px, env(safe-area-inset-top));
  left:   max(10px, env(safe-area-inset-left));
  right:  max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: none; flex-direction: column; padding: 6px;
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--nm-deep);
  overflow: hidden; opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.navigation-expanded.open { display: flex; opacity: 1; transform: scale(1); }

.navigation-expanded-header {
  flex: 0 0 54px; height: 54px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--bd2);
}
.navigation-expanded-title {
  flex: 1; padding: 0 16px;
  font-size: 13px; font-weight: 700;
  color: var(--txt); font-family: var(--font);
}
.navigation-expanded-close {
  flex: 0 0 52px; width: 52px; height: 52px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.navigation-expanded-close:hover { background: var(--s2); color: var(--red); }
.navigation-expanded-close svg { width: 18px; height: 18px; }

/* Two-pane body */
.expanded-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }

/* LEFT — department list */
.dept-list-pane {
  flex: 0 0 200px; width: 200px; min-width: 200px;
  border-right: 1px solid var(--bd2);
  overflow-y: auto; overflow-x: hidden; padding: 8px;
}
.dept-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px; border-radius: var(--r);
  cursor: pointer; user-select: none; position: relative;
  transition: background var(--t);
}
.dept-list-item:hover { background: var(--s2); }
.dept-list-item.active { background: var(--txt); }
.dept-list-item.active .dept-list-name { color: var(--bg); }
.dept-list-item.active .dept-list-icon { color: var(--bg); opacity:.85; }
.dept-list-item.active .dept-list-count { color: var(--bg); opacity:.5; }
.dept-list-item.active .dept-list-fav { color: var(--bg); opacity:.4; }
.dept-list-item.active .dept-list-fav.is-favorite { color: #f5a623; opacity:1; }
.dept-list-item.is-dragging { opacity: .5; }
.dept-list-item.is-dragover { outline: 2px solid var(--acc); outline-offset: -2px; }

.dept-list-drag   { width:12px;height:12px;stroke-width:2;color:var(--s4);cursor:grab;opacity:0;flex-shrink:0;transition:opacity var(--t); }
.dept-list-item:hover .dept-list-drag { opacity:1; }
.dept-list-icon   { width:18px;height:18px;stroke-width:1.8;color:var(--muted);flex-shrink:0; }
.dept-list-name   { flex:1;font-size:13px;font-weight:600;color:var(--txt);font-family:var(--font); }
.dept-list-count  { font-size:11px;color:var(--muted); }
.dept-list-fav    { width:14px;height:14px;stroke-width:2;color:var(--s4);cursor:pointer;flex-shrink:0;transition:color var(--t); }
.dept-list-fav.is-favorite { color:#f5a623; }

/* RIGHT — icon list */
.icon-list-pane {
  flex: 1; min-width: 0;
  overflow-y: auto; overflow-x: hidden; padding: 8px 12px;
}
.icon-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 12px; border-bottom: 1px solid var(--bd2); margin-bottom: 8px;
}
.icon-list-header-title { font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase; }
.icon-list-header-count { font-size:11px;color:var(--s4); }

.icon-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px; border-radius: var(--r);
  cursor: pointer; user-select: none; position: relative;
  transition: background var(--t);
}
.icon-list-item:hover { background: var(--s2); }
.icon-list-item.active { background: var(--acc-d); }
.icon-list-item[data-badge="live"]::after {
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--red);flex-shrink:0;animation:live-pulse 1.6s infinite;
}
.icon-list-item[data-badge="live"].live-active::after { background:var(--green);animation:none; }
.icon-list-item.is-dragging { opacity:.5; }
.icon-list-item.is-dragover { outline:2px solid var(--acc);outline-offset:-2px; }

.icon-list-drag  { width:12px;height:12px;stroke-width:2;color:var(--s4);cursor:grab;opacity:0;flex-shrink:0;transition:opacity var(--t); }
.icon-list-item:hover .icon-list-drag { opacity:1; }
.icon-list-icon  { width:18px;height:18px;stroke-width:1.8;color:var(--muted);flex-shrink:0; }
.icon-list-name  { flex:1;font-size:13px;font-weight:500;color:var(--txt);font-family:var(--font); }
.icon-list-eye   { width:16px;height:16px;stroke-width:2;color:var(--s4);cursor:pointer;flex-shrink:0;transition:color var(--t); }
.icon-list-eye.is-visible { color:var(--muted); }
.icon-list-eye.is-hidden-icon { color:var(--bd3); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .app { padding: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)); }
  .topbar-wrapper { height: 58px; border-radius: 999px; }
  .topbar-chevron, .glass-topbar, .expand-button { height: 46px; }
  .topbar-chevron, .expand-button { flex-basis: 46px; width: 46px; min-width: 46px; }
  .icon-item { flex-basis: 40px; width: 40px; height: 46px; }
  .topbar-wrapper.is-closed { width: 48px; height: 48px; }
  .dept-list-pane { flex: 0 0 140px; width: 140px; min-width: 140px; }
  .navigation-expanded { border-radius: var(--r-lg); }
  .workspace-panel { border-radius: var(--r-lg); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition: none !important; animation: none !important; }
}