/* layout.css — application shell, sidebar, health strip, responsive grid.
 * Depends on tokens.css. */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
  gap: var(--space-16);
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.sidebar__brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  border-radius: var(--radius-8);
  font-weight: var(--fw-heavy);
  color: #ffffff;
}
.sidebar__workspace {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-12);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  cursor: default;
}
.sidebar__workspace[data-admin="true"] {
  cursor: pointer;
}
.sidebar__workspace-label { font-size: var(--fs-label); color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
.sidebar__workspace-name {
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.sidebar__workspace-name-text { overflow: hidden; text-overflow: ellipsis; }
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-16);
}
.sidebar__nav button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  text-align: left;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-6);
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.sidebar__nav button[aria-current="page"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  color: var(--text-primary);
  border-left: 2px solid transparent;
  padding-left: calc(var(--space-12) - 2px);
}
.sidebar__nav button .badge {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--warn);
}
/* Sidebar brand subtext («main · оператор») — sits under "HH API Platform". */
.brand-meta {
  display: block;
  font-size: var(--fs-label);
  color: var(--text-tertiary);
  font-weight: var(--fw-normal);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
/* Workspace gradient chip reused by sidebar + managers cards. */
.ws-chip {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-6);
  color: #ffffff;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
}
/* Sidebar nav badge (e.g. unmapped Vacancies count). */
.sidebar__nav button .nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: #ffffff;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  display: inline-grid;
  place-items: center;
}
.sidebar__nav button .nav-badge[hidden] { display: none; }
.sidebar__user {
  margin-top: auto;
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Phase E (brainstorm-gap) — anchored workspace picker. The picker is
   absolutely positioned inside .sidebar__workspace and replaces the old
   centred modal flow. Rows match the workspaces.html mockup. */
.workspace-picker {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  z-index: 100;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.workspace-picker__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
  font: inherit;
}
.workspace-picker__item:hover { background: var(--bg-surface-3, var(--bg-elevated)); }
.workspace-picker__item--current {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.workspace-picker__item--current::after {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
}
.workspace-picker__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.workspace-picker__name {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-picker__meta {
  font-size: var(--fs-label);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-picker__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-8) 0;
}
.workspace-picker__special .workspace-picker__name { color: var(--accent); }
.workspace-picker__special .ws-chip--neutral {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
}

/* ---------- Content ---------- */
.content {
  display: flex;
  flex-direction: column;
}
.health-strip {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: var(--health-strip-height);
  padding: 0 var(--space-16);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-secondary);
  color: var(--text-tertiary);
}
.health-strip__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.health-strip--ok    .health-strip__indicator { background: var(--ok); }
.health-strip--warn  .health-strip__indicator { background: var(--warn); }
.health-strip--danger .health-strip__indicator { background: var(--danger); }
.health-strip__divider { color: var(--border-default); }
.health-strip__spacer  { flex: 1; }
.health-strip__live    { font-size: var(--fs-label); color: var(--text-muted); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24) var(--space-24) 0;
}
.topbar__title h1 {
  margin: 0;
  font-size: var(--fs-title);
}
.topbar__title p {
  margin: var(--space-4) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-secondary);
}
.topbar__actions { display: flex; gap: var(--space-8); }

main.page { padding: var(--space-24); }

/* ---------- Bottom Tab Bar (mobile) ---------- */
.bottom-tab-bar {
  display: none;
}

/* ---------- Mobile (<640px) ---------- */
@media (max-width: 640px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
  .bottom-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    height: var(--bottom-tab-height);
  }
  .bottom-tab-bar button {
    flex: 1;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    font: inherit;
    font-size: var(--fs-label);
    cursor: pointer;
  }
  .bottom-tab-bar button[aria-current="page"] {
    color: var(--accent-soft-text);
  }
  main.page {
    padding-bottom: calc(var(--bottom-tab-height) + var(--space-16));
  }
}

/* ---------- Tablet (640-1023) ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
  .app-shell {
    grid-template-columns: var(--sidebar-collapsed) 1fr;
  }
  .sidebar__brand strong,
  .sidebar__brand .brand-meta,
  .sidebar__workspace-name,
  .sidebar__workspace-label,
  .sidebar__nav button span.label {
    display: none;
  }
}

/* --- Motion: sliding active indicator on sidebar nav --- */
.sidebar__nav button {
  position: relative;
}
.sidebar__nav button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  transition: height var(--dur-base) var(--ease-emphasized);
}
.sidebar__nav button[aria-current="page"]::before {
  height: 60%;
}