/* ============================================================
   Horse E.T. — app shell: dark forest SIDEBAR + light workspace
   The white horse mark sits directly on the dark sidebar (no chip).
   ============================================================ */

.app { min-height: 100dvh; }

/* ── Sidebar ── */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 50;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--nav-bg-1), var(--nav-bg-2));
  color: var(--nav-text);
  border-right: 1px solid rgba(0,0,0,.3);
}

/* Brand — logo directly on the dark, no background */
.sb-brand { display: flex; align-items: center; justify-content: center; padding: 26px 20px 20px; }
.sb-brand img { height: 46px; width: auto; display: block; }
.sb-brand .bt { display: flex; flex-direction: column; line-height: 1.1; }
.sb-brand .bn { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; color: #fff; }
.sb-brand .bs { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--green-bright); margin-top: 3px; }

.sb-nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 8px; }

.sb-section { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--nav-dim); padding: 16px 12px 7px; }

.sb-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin: 2px 0; border-radius: var(--r-sm);
  color: var(--nav-text); font-size: .9rem; font-weight: 500;
  transition: background .14s, color .14s;
}
.sb-item .ic { width: 19px; text-align: center; font-size: 15px; color: var(--nav-dim); transition: color .14s; }
.sb-item:hover { background: rgba(255,255,255,.05); color: #eef1ea; }
.sb-item:hover .ic { color: var(--green-bright); }
.sb-item.active { background: color-mix(in oklab, var(--green-bright) 16%, transparent); color: #fff; }
.sb-item.active .ic { color: var(--green-bright); }
.sb-item.active::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green-bright); }

/* User block pinned to bottom */
.sb-user { border-top: 1px solid rgba(255,255,255,.08); padding: 12px; display: flex; align-items: center; gap: 11px; }
.sb-user .avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--green-bright) 22%, var(--nav-bg-1)); color: #fff; font-family: var(--font-mono); font-size: .76rem; font-weight: 600; }
.sb-user .um { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.sb-user .un { font-size: .82rem; font-weight: 600; color: #eef1ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .ur { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-dim); }
.sb-user .so { color: var(--nav-dim); width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; transition: background .14s, color .14s; }
.sb-user .so:hover { background: rgba(255,255,255,.06); color: #fff; }

/* ── Workspace ── */
.workspace { margin-left: var(--sidebar-w); min-height: 100dvh; display: flex; flex-direction: column; }
.content { flex: 1; padding: 30px 34px 18px; }
.content-inner { max-width: 1200px; margin: 0 auto; width: 100%; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .eyebrow { display: block; margin-bottom: 9px; }
.page-head h1 { font-size: clamp(1.55rem, 2.4vw, 2rem); }
.page-head .ph-sub { color: var(--muted); margin-top: 7px; max-width: 44rem; }
.page-head .ph-actions { display: flex; gap: 10px; }

.app-footer { padding: 16px 34px 26px; }
.app-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--muted-2); font-size: .76rem; }
.app-footer a:hover { color: var(--green-deep); }
.app-footer .sep { opacity: .5; }

/* Mobile top bar (only appears < 900px so the sidebar can slide over) */
.mobilebar { display: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sh-3); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .mobilebar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--nav-bg-1); color: #fff; position: sticky; top: 0; z-index: 40; }
  .mobilebar img { height: 26px; }
  .mobilebar .mb-name { font-family: var(--font-head); font-weight: 600; font-size: .95rem; flex: 1; }
  .mobilebar .mb-btn { background: rgba(255,255,255,.08); border: 0; color: #fff; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; }
  .nav-scrim { position: fixed; inset: 0; background: rgba(10,16,12,.5); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .content { padding: 22px 18px 14px; }
}