/* ══════════════════════════════════════════════════════════════════
   WorkHub 2.0 — Layout (app shell, sidebar, header, content)
   ══════════════════════════════════════════════════════════════════ */

.app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--sidebar-bg); color: var(--text-inverse);
  display: flex; flex-direction: column; z-index: 10; position: relative;
  transition: width var(--tr) var(--ease), min-width var(--tr) var(--ease),
              background-color var(--tr) var(--ease);
}

.sidebar__logo {
  height: var(--header-h); display: flex; align-items: center; justify-content: center;
  padding: 0 var(--space-3); border-bottom: 1px solid var(--sidebar-divider); overflow: hidden;
}
.sidebar__logo-text { font-family: var(--font-display); font-size: var(--text-xl); color: var(--sidebar-text-hover); letter-spacing: 0.02em; }
.sidebar__logo-short { display: none; font-size: var(--text-lg); font-weight: 700; color: var(--accent); }

.sidebar__nav { flex: 1; padding: var(--space-3) 0; overflow-y: auto; overflow-x: hidden; }

.sidebar__group-title {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sidebar-text); opacity: 0.5; padding: 14px 20px 4px;
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--tr) var(--ease), height var(--tr) var(--ease), padding var(--tr) var(--ease);
}

.sidebar__link {
  display: flex; align-items: center; gap: var(--space-3); padding: 9px 20px;
  color: var(--sidebar-text); text-decoration: none; font-size: var(--text-sm); font-weight: 400;
  transition: background-color var(--tr-fast) var(--ease), color var(--tr-fast) var(--ease);
  cursor: pointer; white-space: nowrap; overflow: hidden; border-right: 3px solid transparent;
}
.sidebar__link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); text-decoration: none; }
.sidebar__link:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 0; }
.sidebar__link.active { color: var(--sidebar-text-hover); background: var(--sidebar-hover); border-right-color: var(--sidebar-active-border); }
.sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.sidebar__link.active svg { opacity: 1; }
.sidebar__label { transition: opacity var(--tr) var(--ease); }

/* Status badges */
.sidebar__link[data-status]::after {
  font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 3px; line-height: 1.4; flex-shrink: 0; margin-left: auto;
}
.sidebar__link[data-status="live"]::after { content: 'live'; background: rgba(52,211,153,.2); color: #34d399; }
.sidebar__link[data-status="beta"]::after { content: 'beta'; background: rgba(251,191,36,.2); color: #fbbf24; }
.sidebar__link[data-status="dev"]::after  { content: 'dev';  background: rgba(167,139,250,.2); color: #a78bfa; }
.sidebar__link[data-status="plan"]::after { content: 'plan'; background: rgba(148,163,184,.15); color: #94a3b8; }

/* ── Sidebar user ─────────────────────────────────────────────── */
.sidebar__user {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--sidebar-divider);
  white-space: nowrap; overflow: visible; position: relative;
}
.sidebar__user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 600; flex-shrink: 0;
}
.sidebar__user-name { flex: 1; font-size: var(--text-sm); color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; }

.sidebar__theme-btn {
  background: none; border: none; padding: var(--space-1); cursor: pointer;
  color: var(--sidebar-text); flex-shrink: 0; transition: color var(--tr-fast) var(--ease);
  position: relative;
}
.sidebar__theme-btn:hover { color: var(--accent); }
.sidebar__theme-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--radius-sm); }
.sidebar__theme-btn svg { width: 18px; height: 18px; }

/* Theme indicator tooltip */
.sidebar__theme-btn::after {
  content: attr(data-theme-label);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--text-inverse);
  font-size: var(--text-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--tr-fast) var(--ease);
}
.sidebar__theme-btn:hover::after { opacity: 1; }

/* ── Sidebar toggle ───────────────────────────────────────────── */
.sidebar__toggle {
  position: absolute; top: 50%; right: -14px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background-color var(--tr-fast) var(--ease), color var(--tr-fast) var(--ease),
              border-color var(--tr-fast) var(--ease);
  z-index: 11; box-shadow: var(--shadow-sm);
}
.sidebar__toggle svg { width: 14px; height: 14px; transition: transform var(--tr) var(--ease); }
.sidebar__toggle:hover { background: var(--bg-secondary); color: var(--text); border-color: var(--border-strong); }
.sidebar__toggle:focus-visible { box-shadow: var(--focus-ring); }

/* ── Collapsed state ──────────────────────────────────────────── */
.sidebar.collapsed { width: var(--sidebar-collapsed-w); min-width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .sidebar__logo { padding: 0; justify-content: center; }
.sidebar.collapsed .sidebar__logo-text { display: none; }
.sidebar.collapsed .sidebar__logo-short { display: block; }
.sidebar.collapsed .sidebar__link { padding: 10px 0; justify-content: center; gap: 0; }
.sidebar.collapsed .sidebar__label { width: 0; opacity: 0; overflow: hidden; }
.sidebar.collapsed .sidebar__link[data-status]::after { display: none; }
.sidebar.collapsed .sidebar__group-title { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.sidebar.collapsed .sidebar__user { padding: var(--space-3) 0; justify-content: center; gap: 0; }
.sidebar.collapsed .sidebar__user-name,
.sidebar.collapsed .sidebar__theme-btn { display: none; }
.sidebar.collapsed .sidebar__toggle svg { transform: rotate(180deg); }

/* ── Main area ────────────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.header {
  height: var(--header-h); min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border);
  transition: background-color var(--tr) var(--ease);
}
.header__title { font-size: var(--text-xl); font-weight: 500; transition: opacity var(--tr-fast); }
.header__actions { display: flex; align-items: center; gap: var(--space-3); }

.content { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); }