/* ═══════════════════════════════════════════
   PC Web 布局 — 侧边栏 + 顶栏
   教师Web端 & 教研端
   ═══════════════════════════════════════════ */

/* ─── Page Container ─── */
.pc-layout {
  display: flex;
  width: var(--pc-width);
  min-height: var(--pc-height);
  margin: 0 auto;
  background: var(--bg-page);
}

/* ─── Sidebar ─── */
.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-deep));
  color: #fff;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  padding: 20px 20px 18px;
  font-size: var(--font-md);
  font-weight: var(--fw-bold);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo .logo-icon {
  width: 28px;
  height: 28px;
  background: var(--brand-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar-nav {
  padding: 12px 0;
  flex: 1;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: var(--sidebar-text);
  font-size: var(--font-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.sidebar-nav a:hover {
  color: var(--sidebar-text-active);
  background: var(--sidebar-hover-bg);
}
.sidebar-nav a.active {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active-bg);
  border-left: 3px solid var(--sidebar-active-border);
}
.sidebar-nav .nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* SVG Icon styling in sidebar */
.sidebar-nav .nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Main Content Area ─── */
.pc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ─── Top Bar ─── */
.topbar {
  background: var(--bg-card);
  padding: 0 24px;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-title {
  font-size: var(--font-2xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.breadcrumb {
  font-size: var(--font-md);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb a { color: var(--brand-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--text-muted); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-base);
  color: var(--text-primary);
}

/* ─── Page Content ─── */
.pc-content {
  flex: 1;
  padding: var(--content-padding) 24px;
  overflow-y: auto;
}

/* ─── Page Header (内页) ─── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}
.page-header-title {
  font-size: var(--font-2xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.page-header-actions {
  display: flex;
  gap: 12px;
}

/* ─── Two Column Layout ─── */
.two-col {
  display: flex;
  gap: var(--card-gap);
}
.two-col .col-left { flex: 55%; min-width: 0; }
.two-col .col-right { flex: 45%; min-width: 0; }

/* ─── Three Column Layout ─── */
.three-col {
  display: flex;
  gap: var(--card-gap);
  height: calc(var(--pc-height) - var(--topbar-height) - var(--content-padding) * 2);
}
.three-col .col-a { flex: 35%; min-width: 0; overflow-y: auto; }
.three-col .col-b { flex: 40%; min-width: 0; overflow-y: auto; }
.three-col .col-c { width: 200px; flex-shrink: 0; overflow-y: auto; }

/* ─── Sticky Footer (发布页等) ─── */
.sticky-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  padding: 14px 24px;
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}