/* ==========================================================================
   全站统一 UI 规范
   参考：工作台课表确认稿
   原则：统一外壳、导航、卡片、按钮、表单、表格；业务结构与交互保持不变。
   所有主题色读取现有主题变量，跟随「我的 - 主题外观」设置。
   ========================================================================== */

:root {
  --wb-sidebar-width: 236px;
  --wb-panel-radius: 12px;
  --wb-control-radius: 8px;
  --wb-panel-shadow: 0 3px 16px rgba(35, 70, 120, .055);
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme]:not([data-theme="dark"]) { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
}

/* ---------- 桌面工作台外壳 ---------- */
.app {
  align-items: stretch;
  gap: 0;
  background: var(--bg);
}

.app > .sidebar {
  width: var(--wb-sidebar-width);
  flex: 0 0 var(--wb-sidebar-width);
  height: 100vh;
  min-height: 0;
  padding: 16px 10px 12px;
  gap: 0;
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--line);
}

.app > .sidebar .brand {
  flex: 0 0 auto;
  min-width: 0;
  gap: 10px;
  margin: 0 0 9px;
  padding: 2px 6px 14px;
  border-bottom: 1px solid var(--line);
}

.app > .sidebar .brand-logo {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.app > .sidebar .brand-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0;
}

.app > .sidebar .brand-sub {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10.5px;
}

.app > .sidebar .side-nav {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.app > .sidebar .nav-item {
  min-height: 39px;
  margin: 2px 0;
  padding: 7px 10px;
  gap: 9px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 550;
}

.app > .sidebar .nav-item:hover {
  color: var(--text);
  background: var(--bg-sunken);
}

.app > .sidebar .nav-item.active {
  color: var(--primary);
  background: var(--primary-weak);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 17%, transparent);
  font-weight: 700;
}

.app > .sidebar .nav-item .ni {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.app > .sidebar .nav-sub {
  margin: 2px 0 3px 18px;
  padding-left: 8px;
  border-left-color: var(--line);
}

.app > .sidebar .nav-subitem {
  min-height: 31px;
  padding: 6px 8px;
  gap: 7px;
  border-radius: 7px;
  color: var(--text-2);
  font-size: 12.5px;
}

.app > .sidebar .nav-subitem.on {
  color: var(--primary);
  background: var(--primary-weak);
  font-weight: 700;
}

.app > .sidebar .nav-sub3 {
  margin-left: 12px;
  padding-left: 7px;
  border-left-color: var(--line-2);
}

.app > .sidebar .nav-subitem.lv3 {
  min-height: 29px;
  padding: 5px 8px;
  font-size: 12px;
}

/* 「我的」是独立底栏，不进入可滚动导航列表。 */
.app > .sidebar .sidebar-foot {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.app > .sidebar .sidebar-foot > #side-user {
  min-height: 44px;
  margin: 0;
  padding: 6px 9px;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.app > .sidebar .sidebar-foot > #side-user:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: var(--primary-weak);
}

.app > .sidebar .sidebar-foot > #side-user.active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
  background: var(--primary-weak);
  box-shadow: none;
}

.app > .sidebar .sidebar-foot > #side-user .side-user-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: var(--primary-weak);
  color: var(--primary);
}

.app > .sidebar .sidebar-foot > #side-user .side-user-label strong {
  color: inherit;
  font-size: 12.5px;
}

.app > .sidebar .sidebar-foot > #side-user .side-user-label small {
  color: var(--text-3);
  font-size: 10px;
}

/* 主工作区：浅灰背景上的白色内容面板。 */
@media (min-width: 901px) {
  .app > .main {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 28px);
    max-width: 2000px;
    margin: 14px auto;
    padding: 17px 17px 24px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--wb-panel-radius);
    background: var(--card);
    box-shadow: var(--wb-panel-shadow);
  }

  .app:has(#home-grid) > .main {
    max-width: 2000px;
    margin: 14px auto;
    padding: 17px;
    background: var(--card);
  }

  .home-redesign-app > .sidebar.home-sidebar {
    width: var(--wb-sidebar-width);
    flex-basis: var(--wb-sidebar-width);
  }

  .home-redesign-app > .main.home-redesign {
    flex: 1 1 auto;
    width: auto;
    max-width: 2000px;
    min-height: calc(100vh - 28px);
    margin: 14px auto;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: var(--wb-panel-radius);
    background: var(--card);
    box-shadow: var(--wb-panel-shadow);
  }

  body.is-wide .app > .main,
  body.is-wide .home-redesign-app > .main.home-redesign {
    max-width: none;
  }
}

/* ---------- 页面标题 ---------- */
.main > .page-head,
.main .page-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.main .page-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
}

.main .page-title::before {
  content: "";
  display: block;
  flex: 0 0 3px;
  width: 3px;
  height: 16px;
  border-radius: 3px;
  background: var(--primary);
}

.main .page-sub {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

/* ---------- 通用卡片与内容容器 ---------- */
.main .card,
.main .table-wrap,
.main .att-work-panel {
  border-color: var(--line);
  border-radius: var(--wb-panel-radius);
  box-shadow: var(--shadow-s);
}

.main .card {
  background-color: var(--card);
}

.main .table-wrap {
  background: var(--card);
}

.main .card-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.main .list-item {
  border-color: var(--line);
}

.main .list-item:hover {
  background: var(--card-2);
}

/* ---------- 按钮 ---------- */
.main .btn {
  min-height: 34px;
  border-radius: var(--wb-control-radius);
  font-size: 13px;
  font-weight: 650;
}

.main .btn.sm {
  min-height: 30px;
  height: 30px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 7px;
  font-size: 12px;
}

.main .btn.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 20%, transparent);
}

.main .btn.primary:hover {
  border-color: var(--primary-deep);
  background: var(--primary-deep);
}

.main .btn.ghost {
  border-color: var(--line-2);
  background: var(--card);
  color: var(--text-2);
}

.main .btn.ghost:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: var(--primary-weak);
  color: var(--primary);
}

.main .btn.soft {
  background: var(--primary-weak);
  color: var(--primary);
}

.main .icon-btn {
  border-radius: 8px;
}

.main .icon-btn:hover {
  background: var(--primary-weak);
  color: var(--primary);
}

/* ---------- 输入框、搜索与筛选 ---------- */
.main .input,
.main select.input,
.main textarea.input,
.main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.main select:not(.unstyled) {
  border-color: var(--line-2);
  border-radius: var(--wb-control-radius);
  background-color: var(--card);
  color: var(--text);
}

.main .input:focus,
.main input:focus,
.main select:focus,
.main textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-weak);
  outline: none;
}

.main input::placeholder,
.main textarea::placeholder {
  color: var(--text-3);
}

.main .searchbar {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: none;
}

/* ---------- 分段选择、标签与状态 ---------- */
.main .seg {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-sunken);
}

.main .seg button {
  border-radius: 7px;
  color: var(--text-2);
}

.main .seg button.on {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(20, 45, 85, .08);
}

.main .chip-btn.on {
  background: var(--primary);
  color: #fff;
}

/* ---------- 表格 ---------- */
.main .table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
}

.main table.tbl {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text);
  font-size: 12.5px;
}

.main table.tbl th {
  background: var(--bg-sunken);
  color: var(--text-2);
  border-bottom-color: var(--line);
  font-weight: 700;
}

.main table.tbl td {
  border-bottom-color: var(--line);
}

.main table.tbl tbody tr:hover td {
  background: var(--primary-weak);
}

/* ---------- 弹窗 ---------- */
.main .sheet,
.sheet-mask .sheet {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.sheet-head {
  border-bottom: 1px solid var(--line);
}

.sheet-foot {
  border-top-color: var(--line);
  background: var(--card);
}

/* ---------- 首页、个人中心与便签页的统一细节 ---------- */
.home-redesign .home-card,
.home-redesign #home-grid > .hg-item > .card {
  border-color: var(--line);
  border-radius: var(--wb-panel-radius);
  box-shadow: var(--shadow-s);
}

.main .me-home-head {
  align-items: center;
  margin: 0 0 15px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.main .me-home-head h1 {
  margin: 3px 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
}

.main .me-home-head p {
  color: var(--text-3);
  font-size: 12px;
}

.main .me-identity-card {
  margin-bottom: 16px;
  padding: 17px 18px;
  border-color: var(--line);
  border-radius: var(--wb-panel-radius);
  background: var(--primary-weak);
  box-shadow: var(--shadow-s);
}

.main .account-security-shell {
  border-color: var(--line);
  border-radius: var(--wb-panel-radius);
  box-shadow: var(--shadow-s);
}

.main .account-security-banner {
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--primary-weak) 92%, var(--card)),
    color-mix(in srgb, var(--primary) 10%, var(--card)));
}

.main .account-security-banner-icon {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  box-shadow: none;
}

.main .me-page-toolbar {
  margin-bottom: 10px;
}

.main .me-back-home {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: var(--line);
  background: var(--card);
  color: var(--primary);
  font-size: 12.5px;
}

.main .note-card {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-s);
}

.main .note-card.going {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: var(--primary-weak);
}

.main .note-card.finished {
  background: var(--bg-sunken);
}

/* ---------- 考勤工作台跟随全局主题 ---------- */
.main .att-work-shell {
  color: var(--text);
}

.main .att-work-crumb,
.main .att-work-table-title span {
  color: var(--text-3);
}

.main .att-work-head h2,
.main .att-work-table-title h3 {
  color: var(--text);
}

.main .att-work-grade,
.main .att-work-date label,
.main .att-work-date .icon-btn,
.main .att-work-export-menu {
  border-color: var(--line);
  background: var(--card);
  color: var(--text);
}

.main .att-work-tabs {
  border-bottom-color: var(--line);
}

.main .att-work-tabs button {
  color: var(--text-2);
}

.main .att-work-tabs button.on {
  color: var(--primary);
}

.main .att-work-tabs button.on:after {
  background-color: var(--primary);
}

.main .att-work-stats .aw-stat {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
  color: var(--text);
  background: var(--card);
}

.main .att-work-stats .aw-stat.blue {
  background: var(--primary-weak);
}

.main .att-work-stats .aw-stat.amber {
  background: var(--amber-weak);
}

.main .att-work-stats .aw-stat.gray {
  background: var(--bg-sunken);
}

.main .att-work-stats .aw-stat b {
  color: var(--text);
}

.main .att-work-stats .aw-stat small {
  color: var(--text-3);
}

.main .att-work-panel {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow-s);
}

.main .att-work-toolbar .btn.primary {
  border-color: var(--primary);
  background: var(--primary);
}

.main .att-work-export-menu {
  box-shadow: var(--shadow-m);
}

.main .att-work-export-menu button {
  color: var(--text-2);
}

.main .att-work-export-menu button:hover {
  color: var(--primary);
  background: var(--primary-weak);
}

.main .att-work-table-scroll {
  border-color: var(--line);
  border-radius: 9px;
}

.main .att-work-shell table th {
  background: var(--bg-sunken);
  color: var(--text-2);
}

.main .att-work-shell table td {
  border-color: var(--line);
}

/* ---------- 移动端：保持原有底部导航与抽屉逻辑 ---------- */
@media (max-width: 900px) {
  .app > .main {
    width: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 14px 14px calc(var(--nav-h) + var(--safe-b) + 18px);
    border: 0;
    border-radius: 0;
    background: var(--bg);
    box-shadow: none;
  }

  .home-redesign-app > .main.home-redesign {
    width: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 14px 14px calc(var(--nav-h) + var(--safe-b) + 18px);
    border: 0;
    border-radius: 0;
    background: var(--bg);
    box-shadow: none;
  }

  .bottom-nav {
    background: var(--card);
    border-top-color: var(--line);
  }
}

@media (max-width: 640px) {
  .main > .page-head,
  .main .page-head {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }

  .main .page-title { font-size: 17px; }
  .main .page-sub { font-size: 11.5px; }

  .main .page-head .btn { margin-left: auto; }

  .main .card,
  .main .table-wrap { border-radius: 10px; }

  .main .me-identity-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 14px;
  }
}