/* shell.css — v4 统一外壳视觉系统（School Management Dashboard 主视觉）
 * 全高紫色侧栏 + 顶部工具栏 + 浅灰内容区 + 卡片化组件
 * 字体：中文=微软雅黑（硬性），英文/数字=Inter（fallback 系统字体）
 */
:root {
  /* 颜色 */
  --bg: #F5F6FA;
  --wb-bg-top: #F8F8FC;
  --wb-bg-bottom: #F4F5F9;
  --card: #FFFFFF;                     /* 卡片背景 */
  --card-border: 1px solid #ECECF4;
  --card-shadow: 0 6px 20px rgba(43, 36, 74, 0.055);
  --card-shadow-hover: 0 12px 30px rgba(43, 36, 74, 0.11);
  --text: #29263D;
  --text-2: #757287;
  --text-3: #AAA8B7;
  --brand: #2F6FED;
  --brand-2: #5790F5;
  --brand-soft: #EAF1FF;
  --sidebar: #2E69EB;
  --sidebar-2: #2B64E4;
  --sidebar-text: #E9F0FF;
  --mac-red: #FF5F57;
  --mac-yellow: #FEBC2E;
  --mac-green: #28C840;
  --coming-bg: #F0F1F5;
  --coming-fg: #9AA0A6;

  /* 圆角 */
  --r-window: 0;
  --r-sidebar: 8px;
  --r-hero: 16px;
  --r-card: 14px;
  --r-btn: 9px;
  --r-pill: 999px;
  --r-avatar: 999px;

  /* 间距 */
  --sp-page: 32px;
  --sp-side-gap: 24px;
  --sp-card-gap: 16px;
  --sp-card-pad: 16px;
}

/* 字体基准（Inter 在前，CJK 回退微软雅黑） */
.wb-window, .wb-window * {
  font-family: "Inter", "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}

/* ===== macOS 窗口 ===== */
.wb-window {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-template-rows: 68px minmax(0, 1fr);
  background: linear-gradient(180deg, var(--wb-bg-top), var(--wb-bg-bottom));
}

/* 窗口 chrome（标题栏） */
.macos-chrome {
  grid-column: 2;
  grid-row: 1;
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #ECECF4;
  z-index: 10;
}
.macos-dots { display: none; }
.macos-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block;
}
.macos-dot.red { background: var(--mac-red); }
.macos-dot.yellow { background: var(--mac-yellow); }
.macos-dot.green { background: var(--mac-green); }

.macos-title {
  flex: 1 1 auto;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  user-select: none;
}
.macos-actions {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.macos-actions .mini-btn {
  font-size: 12px; color: var(--text-2);
  background: #F7F7FA; border: 1px solid #ECECF4; cursor: pointer;
  padding: 7px 11px; border-radius: 8px;
}
.macos-actions .mini-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }
.macos-user {
  display: flex; align-items: center; gap: 8px;
}
.macos-user .u-name { font-size: 12px; color: var(--text); font-weight: 500; }

/* 头像 */
.avatar {
  width: 28px; height: 28px; border-radius: var(--r-avatar);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex: 0 0 auto;
}
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }

/* ===== 主体布局 ===== */
.wb-body { display: contents; }

/* 侧边栏 */
.app-sidebar {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 248px;
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
  border-right: none;
  padding: 22px 16px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  transition: flex-basis .2s ease, width .2s ease, opacity .2s ease;
}
.wb-window.sidebar-collapsed .app-sidebar {
  width: 0; padding-left: 0; padding-right: 0; opacity: 0; overflow: hidden;
}
.wb-window.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; }
.sb-logo {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(135deg, #4E8AF7 0%, #2A65E8 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px;
}
.sb-brand-text { line-height: 1.15; }
.sb-brand-name { font-size: 16px; font-weight: 700; color: #FFFFFF; }
.sb-brand-sub { font-size: 11px; color: #CFE0FF; }

.sb-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-sidebar);
  padding: 8px 10px; margin-bottom: 8px;
  color: #D3E2FF; font-size: 13px;
}
.sb-search input {
  border: none; outline: none; background: transparent;
  font-size: 13px; color: #FFFFFF; width: 100%;
}
.sb-search input::placeholder { color: #D3E2FF; }

.sb-section {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #BBD0FB;
  padding: 10px 10px 4px;
}
.sb-menu, .sb-pages { display: flex; flex-direction: column; gap: 2px; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sidebar);
  color: var(--sidebar-text); font-size: 13.5px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: none; background: transparent;
  width: 100%; text-align: left;
  transition: background .15s ease, color .15s ease;
}
.sb-item:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.sb-item.active { background: linear-gradient(135deg, #4E8AF7, #3474EF); color: #FFFFFF; font-weight: 600; box-shadow: 0 8px 20px rgba(21, 80, 194, .22); }
.sb-item .sb-ico { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; }
.sb-item .sb-ico svg { width: 18px; height: 18px; }
.sb-item .sb-ico.coming { color: var(--coming-fg); }
.sb-item.active .sb-ico { color: #FFFFFF; }
.sb-item .sb-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.sb-item .sb-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item .sb-tag {
  font-size: 10px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--coming-bg); color: var(--coming-fg); font-weight: 600;
}
.sb-item .sb-tag { display: none; }
.sb-item .sb-tag.on { background: var(--brand-soft); color: var(--brand); }

.sb-spacer { flex: 1 1 auto; }
.sb-footer {
  font-size: 13px; color: #FFFFFF; background: transparent;
  padding: 12px 10px 16px; text-align: center; border-top: 0;
}

/* 侧栏折叠按钮（放在 chrome 右侧） */
.sb-toggle {
  font-size: 12px; color: var(--text-2); cursor: pointer;
  background: transparent; border: none; padding: 4px 8px; border-radius: 6px;
}
.sb-toggle:hover { background: rgba(0, 0, 0, 0.05); }

/* 内容区（block 流式，避免约束日历等既有视图的自有布局） */
.app-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow-y: auto;
  background: #F5F6FA;
}
.view-root { flex: 1 1 auto; }

/* 面包屑 */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  padding: 18px var(--sp-page) 0;
  font-size: 13px; color: var(--text-3);
}
.breadcrumb .bc-sep { color: var(--text-3); opacity: .6; }
.breadcrumb .bc-cur { color: var(--text); font-weight: 500; }
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }

/* ===== 通用 pill ===== */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  padding: 3px 10px; border-radius: var(--r-pill);
  line-height: 1.4; white-space: nowrap;
}
.pill-online { background: var(--brand-soft); color: var(--brand); }
.pill-coming { background: var(--coming-bg); color: var(--coming-fg); }
.pill-dash { background: var(--brand-soft); color: var(--brand); }
.pill-mobile { background: #FFF1E6; color: #FF6B35; }
.pill-high { background: #FFE3E3; color: #E03131; }
.pill-medium { background: #FFF4D6; color: #C77F00; }
.pill-low { background: #E3F8E8; color: #2F9E44; }

/* ===== 通用按钮 ===== */
.btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--r-btn); padding: 8px 14px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 14px rgba(47, 111, 237, .2); }
.btn-primary:hover { background: #215ED6; }
.btn-ghost { background: rgba(255, 255, 255, 0.7); color: var(--text); border-color: rgba(0, 0, 0, 0.06); }
.btn-ghost:hover { background: #fff; }
.btn-link { background: transparent; border: none; color: var(--brand); padding: 4px 6px; }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(10px);
  background: rgba(26, 29, 46, 0.92); color: #fff;
  padding: 10px 18px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.hidden { display: none; }

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  .wb-window { grid-template-columns: 220px minmax(0, 1fr); }
  .app-sidebar { width: 220px; }
}
@media (max-width: 768px) {
  :root { --sp-page: 16px; }
  .wb-window { display: flex; flex-direction: column; }
  .macos-chrome { order: 0; height: 60px; padding: 0 16px; }
  .wb-body { display: flex; flex: 1; min-height: 0; }
  .app-sidebar { position: absolute; z-index: 50; height: 100%; width: 248px; box-shadow: 0 0 30px rgba(0,0,0,.15); }
  .app-content { flex: 1; }
  .wb-window.sidebar-collapsed .app-sidebar { display: none; }
  .macos-title { font-size: 11px; }
}