/* fin-shell.css — sidebar shell. Desktop: fixed left sidebar. ≤768px: top bar. */

.fin-shell { display: flex; min-height: 100vh; background: var(--fin-bg); }

.fin-side {
  flex: none; width: 232px; display: flex; flex-direction: column; gap: var(--fin-s-6);
  padding: var(--fin-s-5) var(--fin-s-3); background: var(--fin-sidebar); border-right: 1px solid var(--fin-border-strong);
  position: sticky; top: 0; height: 100vh; box-sizing: border-box;
  box-shadow: 6px 0 24px -18px rgba(0,0,0,.35);
}
.fin-side-brand { display: flex; align-items: center; gap: var(--fin-s-2); padding: 0 var(--fin-s-2); }
.fin-side-mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--fin-r-sm);
  background: var(--fin-accent); color: var(--fin-text-on-accent); font-family: var(--fin-font-display); font-weight: var(--fin-fw-bold);
  box-shadow: 0 4px 10px -4px var(--fin-accent-soft);
}
.fin-side-name { font-family: var(--fin-font-display); font-weight: var(--fin-fw-semi); font-size: var(--fin-fs-body); color: var(--fin-text-1); }

.fin-side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; }
.fin-side-item {
  appearance: none; display: flex; align-items: center; gap: var(--fin-s-3); width: 100%; box-sizing: border-box;
  height: 42px; padding: 0 var(--fin-s-3); border: 0; border-radius: var(--fin-r-sm); background: transparent;
  color: var(--fin-text-2); font: inherit; font-size: var(--fin-fs-body); font-weight: var(--fin-fw-medium); text-align: left; cursor: pointer;
  position: relative; transition: background-color var(--fin-t-fast) var(--fin-ease), color var(--fin-t-fast) var(--fin-ease);
}
.fin-side-item:hover { background: var(--fin-surface-hover); color: var(--fin-text-1); }
.fin-side-item.is-on { background: var(--fin-accent-soft); color: var(--fin-accent-ink); font-weight: var(--fin-fw-semi); padding-left: calc(var(--fin-s-3) + 6px); }
.fin-side-item.is-on::before {
  content: ''; position: absolute; left: 2px; top: 7px; bottom: 7px; width: 3px; border-radius: var(--fin-r-pill);
  background: var(--fin-accent);
}

.fin-side-profile { position: relative; flex: none; }
.fin-side-me {
  appearance: none; display: flex; align-items: center; gap: var(--fin-s-3); width: 100%; box-sizing: border-box;
  padding: var(--fin-s-2); border: 0; border-radius: var(--fin-r-sm); background: transparent; cursor: pointer; text-align: left;
}
.fin-side-me:hover { background: var(--fin-surface-hover); }
.fin-side-av {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--fin-r-pill);
  background: var(--fin-surface-3); color: var(--fin-text-1); font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-semi);
  box-shadow: 0 0 0 1px var(--fin-border-strong);
}
.fin-side-me-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fin-side-me-t b { font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-semi); color: var(--fin-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-side-me-t span { font-size: 11px; color: var(--fin-text-3); text-transform: capitalize; }
.fin-side-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; padding: var(--fin-s-1);
  background: var(--fin-surface-1); border-radius: var(--fin-r-sm); box-shadow: 0 0 0 1px var(--fin-border-strong), var(--fin-shadow-pop); z-index: 20;
}
.fin-side-menu button {
  appearance: none; display: flex; align-items: center; gap: var(--fin-s-2); width: 100%; box-sizing: border-box;
  height: 38px; padding: 0 var(--fin-s-2); border: 0; border-radius: var(--fin-r-xs); background: transparent;
  color: var(--fin-crit-ink); font: inherit; font-size: var(--fin-fs-body); cursor: pointer; text-align: left;
}
.fin-side-menu button:hover { background: var(--fin-crit-soft); }

.fin-main { flex: 1 1 auto; min-width: 0; padding: var(--fin-page-pad); max-width: var(--fin-content-max); margin: 0 auto; width: 100%; box-sizing: border-box; }

@media (max-width: 768px) {
  .fin-shell { flex-direction: column; }
  .fin-side {
    position: sticky; top: 0; z-index: 30; width: 100%; height: auto; flex-direction: row; align-items: center;
    gap: var(--fin-s-3); padding: var(--fin-s-2) var(--fin-s-3); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--fin-border);
  }
  .fin-side-nav { flex-direction: row; flex: none; overflow: visible; }
  .fin-side-item { flex: none; height: 36px; padding: 0 var(--fin-s-3); }
  .fin-side-item span { display: none; }
  .fin-side-profile { flex: none; margin-left: auto; width: auto; }
  .fin-side-me { width: auto; padding: 4px; }
  .fin-side-me-t { display: none; }
  .fin-side-menu { left: auto; right: 0; width: 180px; }
  .fin-main { padding: var(--fin-page-pad) var(--fin-s-4); }
}