/*
 * Zhongtong admin workbench UI v3 (2026-10-09)
 *
 * This is the final visual layer for the current DOM contracts.  The Word
 * reference uses a compact workbench: narrow navigation, pale canvas, flat
 * tabs, dense rows and a small number of deliberate actions.  Keep this file
 * last in the cascade; it is intentionally visual and does not change routes,
 * data attributes or event targets.
 */
:root {
  --ui-canvas: #f4f6f8;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-line: #e3e8ee;
  --ui-line-strong: #ced9e5;
  --ui-ink: #26364a;
  --ui-ink-soft: #516174;
  --ui-muted: #8190a1;
  --ui-brand: #2f8eea;
  --ui-brand-deep: #176fbd;
  --ui-brand-soft: #edf6ff;
  --ui-accent: #f3a21d;
  --ui-accent-deep: #cf7e05;
  --ui-danger: #c55252;
  --ui-radius: 4px;
  --ui-shadow: 0 1px 4px rgba(33, 56, 82, .045);
  --ui-sidebar: 176px;
  --ui-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

html, body { min-width: 0; }
body {
  background: var(--ui-canvas) !important;
  color: var(--ui-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
button, input, select, textarea { font-family: inherit !important; }
button { line-height: 1.25 !important; }

/* Shell */
.app-shell.is-authenticated {
  display: grid !important;
  grid-template-columns: var(--ui-sidebar) minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: var(--ui-canvas) !important;
}
.sidebar {
  width: var(--ui-sidebar) !important;
  min-width: var(--ui-sidebar) !important;
  height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  padding: 14px 8px 10px !important;
  border: 0 !important;
  border-right: 1px solid var(--ui-line) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}
.auth-brand, .sidebar .auth-brand, .brand {
  gap: 7px !important;
  padding: 0 7px 14px !important;
  border-bottom: 1px solid #eff2f5 !important;
}
.sidebar .brand-logo-frame, .sidebar-brand-logo-frame {
  width: 30px !important; height: 30px !important;
  border: 1px solid #d6e4f2 !important;
  border-radius: 5px !important;
  background: #f1f7fd !important;
  box-shadow: none !important;
}
.sidebar .brand-logo, .sidebar-brand-logo { width: 25px !important; height: 25px !important; }
#sidebar-brand-name { color: #1e5b93 !important; font-size: 13px !important; font-weight: 700 !important; }
#sidebar-brand-subtitle { margin-top: 1px !important; color: var(--ui-muted) !important; font-size: 9px !important; }
.module-nav { display: grid !important; gap: 2px !important; padding: 11px 0 4px !important; }
.module-link {
  min-height: 30px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 2px !important;
  color: #55667a !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.module-link:hover { color: var(--ui-brand-deep) !important; background: #f4f8fc !important; }
.module-link.is-active {
  color: var(--ui-brand-deep) !important;
  border-left-color: var(--ui-brand) !important;
  background: var(--ui-brand-soft) !important;
}
.module-link .module-index { width: 18px !important; color: #8aa0b7 !important; font-size: 8px !important; }
.module-link.is-active .module-index { color: var(--ui-brand) !important; }
.sidebar-user-chip {
  align-self: stretch !important;
  margin: auto 0 7px !important;
  padding: 6px 7px !important;
  border: 1px solid #dfe7ef !important;
  border-radius: 3px !important;
  color: #55667a !important;
  background: #fbfcfd !important;
  font-size: 9px !important;
}
.sidebar-note { margin: 0 2px !important; color: #91a0af !important; font-size: 8px !important; }

.main-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 16px 20px 28px !important;
  background: var(--ui-canvas) !important;
  justify-self: stretch !important;
}
.topbar {
  min-height: 28px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.topbar h1 { color: var(--ui-ink) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.topbar .eyebrow { color: var(--ui-muted) !important; font-size: 9px !important; }
.main-content.module-mode > .topbar { display: none !important; }

/* Module heading and flat inner tabs */
.module-page { min-width: 0 !important; }
.module-page .module-page-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 34px !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#module-page > .module-page-header { display: flex !important; }
.module-page .module-page-header { border-radius: 0 !important; box-shadow: none !important; }
.module-page .module-page-header h2 { margin: 0 !important; color: var(--ui-ink) !important; font-size: 20px !important; line-height: 1.2 !important; }
.module-page .module-page-header p { display: none !important; }
.module-page-kicker, #module-page-kicker { display: none !important; }
.module-page-context { display: none !important; }
.module-page-header-actions { display: flex !important; align-items: center !important; gap: 7px !important; }
.module-page-header-actions #module-back { display: none !important; }
.workspace-section-nav {
  min-height: 33px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow-x: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.workspace-section-nav[aria-label]::before { margin: 0 8px 0 4px !important; align-self: center !important; color: #7e91a6 !important; font-size: 10px !important; }
.workspace-section-tab, .workspace-section-nav button {
  min-height: 33px !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #596a7d !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.workspace-section-tab:hover, .workspace-section-nav button:hover { color: var(--ui-brand-deep) !important; background: #f1f7fc !important; }
.workspace-section-tab.is-active, .workspace-section-tab[aria-selected="true"], .workspace-section-nav button.is-active {
  color: var(--ui-brand-deep) !important;
  border-bottom-color: var(--ui-brand) !important;
  background: var(--ui-surface) !important;
}
.workspace-section-tab small, .workspace-section-nav button small { display: none !important; }

/* Work surfaces and toolbars */
.panel, .pc-panel, .oc-panel, .ec-panel, .lc-panel, .p1-surface-panel,
.learning-create-panel, #workspace-editor-page {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}
.panel { padding: 9px !important; }
.panel-heading { min-height: 27px !important; gap: 8px !important; margin-bottom: 7px !important; }
.panel-heading h2, .panel-heading h3, .pc-panel h2, .oc-panel h2, .ec-panel h2 { color: var(--ui-ink) !important; font-size: 14px !important; font-weight: 700 !important; }
.panel-meta, .panel-subtitle, .form-hint, .workspace-section-note { color: var(--ui-muted) !important; font-size: 10px !important; }
.eyebrow { color: #8294a8 !important; font-size: 8px !important; letter-spacing: .06em !important; }
.learning-filter-toolbar, .people-filter-toolbar, .report-toolbar, .dashboard-toolbar, .governance-toolbar, .audit-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 8px !important;
  margin: 0 0 7px !important;
  padding: 7px 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 2px !important;
  background: var(--ui-surface-soft) !important;
}
.learning-filter-toolbar label, .people-filter-toolbar label, .report-toolbar label, .dashboard-toolbar label, .governance-toolbar label { color: var(--ui-ink-soft) !important; font-size: 10px !important; }

/* Controls: orange is reserved for create/commit, blue for navigation and
   neutral row actions. */
input, select, textarea {
  min-height: 29px !important;
  padding: 5px 8px !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 3px !important;
  color: var(--ui-ink) !important;
  background: #fff !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus { border-color: #8dbbe2 !important; outline: 2px solid #e8f3fd !important; }
.primary-action, .primary-tiny, .tiny-action.primary-tiny {
  min-height: 29px !important;
  padding: 6px 11px !important;
  border: 1px solid var(--ui-brand) !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: var(--ui-brand) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.primary-action:hover, .primary-tiny:hover { background: var(--ui-brand-deep) !important; border-color: var(--ui-brand-deep) !important; }
[data-action*="create"] .primary-action, [id*="add"] + .primary-action,
button[id*="new"], button[id*="add"] { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: #fff !important; }
button[id*="new"]:hover, button[id*="add"]:hover { background: var(--ui-accent-deep) !important; border-color: var(--ui-accent-deep) !important; }
.learning-workspace button[data-source-action="course"],
.learning-workspace #learning-add-course { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: #fff !important; }
.secondary-action, .tiny-action {
  min-height: 27px !important;
  padding: 5px 9px !important;
  border: 1px solid #c8d7e6 !important;
  border-radius: 3px !important;
  color: #365f88 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.secondary-action:hover, .tiny-action:hover { color: var(--ui-brand-deep) !important; border-color: #8eb9de !important; background: #f3f8fd !important; }
.phase1-inline-actions, .learning-admin-actions, .source-admin-actions, .workspace-section-actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 5px !important; }

/* Lists and tables */
.learning-grid, .content-grid, .people-grid, .operations-grid, .points-grid, .analytics-grid-top, .analytics-grid-bottom { gap: 10px !important; }
.learning-card-list, .phase1-admin-list, .source-activity-list, .training-tasks-list { gap: 0 !important; }
.learning-card, .phase1-admin-row, .person-row, .lecturer-card, .operations-news-card,
.operations-survey-card, .operations-certificate-card, .training-task-card {
  min-height: 47px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf1f5 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.learning-card:hover, .phase1-admin-row:hover, .person-row:hover, .lecturer-card:hover { background: #fbfdff !important; }
.learning-card-main strong, .phase1-admin-row strong, .person-row strong, .lecturer-card strong { color: #244e7c !important; font-size: 11px !important; font-weight: 700 !important; }
.learning-card-main span, .phase1-admin-row span, .person-row span, .lecturer-card span { color: #738397 !important; font-size: 9px !important; }
.learning-card-side { min-width: 48px !important; }
.learning-card-side b { color: var(--ui-brand-deep) !important; font-size: 11px !important; }
.learning-card-side em { color: var(--ui-muted) !important; font-size: 9px !important; }
.learning-card-actions, .exam-row-actions, .person-actions, .operations-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 4px !important; }
.learning-card-actions .tiny-action, .exam-row-actions .tiny-action, .person-actions button, .operations-actions button { min-height: 24px !important; padding: 3px 7px !important; font-size: 9px !important; }
.learning-card-actions [data-learning-action="close-course"], .learning-card-actions [data-learning-action="mark-training-absent"], .phase1-bank-status, .phase1-exam-publish { color: var(--ui-danger) !important; border-color: #eccaca !important; background: #fff8f8 !important; }
.learning-category-panel { padding: 8px !important; }
.learning-chip-list { gap: 0 !important; }
.learning-chip-list > * { min-height: 29px !important; padding: 6px 8px !important; border: 0 !important; border-bottom: 1px solid #eff2f5 !important; border-radius: 0 !important; background: #fff !important; font-size: 11px !important; }
.learning-category-name strong { font-size: 11px !important; }
.learning-category-name span { font-size: 10px !important; }
.person-avatar { width: 27px !important; height: 27px !important; }

/* KPI cards retain the reference's four accents without the oversized SaaS
   gradients. */
.source-kpi-grid, .module-stats, .dashboard-kpis { gap: 8px !important; }
.source-kpi-card, .module-stat, .metric-card {
  min-height: 70px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-top: 3px solid var(--ui-brand) !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow) !important;
}
.source-kpi-card:nth-child(2), .module-stat:nth-child(2) { border-top-color: #c65ac3 !important; }
.source-kpi-card:nth-child(3), .module-stat:nth-child(3) { border-top-color: #26a9c6 !important; }
.source-kpi-card:nth-child(4), .module-stat:nth-child(4) { border-top-color: var(--ui-accent) !important; }
.source-kpi-card span, .module-stat span, .metric-card span { color: #68798d !important; font-size: 10px !important; }
.source-kpi-card strong, .module-stat strong, .metric-card strong { margin: 5px 0 2px !important; color: var(--ui-ink) !important; font-size: 22px !important; }
.source-kpi-card small, .module-stat small, .metric-card small { color: var(--ui-muted) !important; font-size: 9px !important; }
#source-kpi-grid .source-kpi-card { color: #fff !important; background: #5b68de !important; border-top-color: #4352d1 !important; }
#source-kpi-grid .source-kpi-card:nth-child(2) { background: #c853bd !important; border-top-color: #ad3cad !important; }
#source-kpi-grid .source-kpi-card:nth-child(3) { background: #22a9c6 !important; border-top-color: #0d91ad !important; }
#source-kpi-grid .source-kpi-card:nth-child(4) { background: #ed8a2d !important; border-top-color: #d77113 !important; }
#source-kpi-grid .source-kpi-card span,
#source-kpi-grid .source-kpi-card strong,
#source-kpi-grid .source-kpi-card small { color: #fff !important; }

/* Home workbench */
#source-admin-dashboard .source-admin-grid { grid-template-columns: minmax(0, 1fr) 218px !important; gap: 10px !important; }
.source-org-banner { min-height: 52px !important; padding: 9px 12px !important; border: 1px solid #cde7df !important; border-radius: 4px !important; background: #eef9f5 !important; }
.source-shortcuts, .source-activity { padding: 9px !important; border: 1px solid var(--ui-line) !important; border-radius: 3px !important; background: #fff !important; box-shadow: var(--ui-shadow) !important; }
.source-admin-grid { align-items: start !important; }
.source-shortcuts, .source-activity { height: auto !important; min-height: 0 !important; }
.source-shortcut-list { gap: 5px !important; }
.source-shortcut-list button { min-height: 53px !important; padding: 8px !important; border: 1px solid #dce8f3 !important; border-radius: 2px !important; background: #f6faff !important; }
.source-shortcut-list button strong { color: #2a5f91 !important; font-size: 10px !important; }
.source-shortcut-list button span { color: #7b8da1 !important; font-size: 9px !important; }

/* Large delivery/blueprint explanations are secondary on list pages. Keep the
   data and actions available while reducing their visual weight. */
.p1-surface-panel { padding: 10px !important; }
.p1-surface-heading { margin-bottom: 10px !important; }
.p1-surface-heading h2 { color: var(--ui-ink) !important; font-size: 16px !important; }
.p1-surface-heading p { color: var(--ui-muted) !important; font-size: 10px !important; }
.p1-surface-stats { gap: 7px !important; margin-top: 9px !important; }
.p1-surface-stat { min-height: 62px !important; padding: 9px !important; border: 1px solid var(--ui-line) !important; border-radius: 3px !important; background: #fbfcfe !important; }
.p1-surface-stat strong { color: var(--ui-brand-deep) !important; font-size: 18px !important; }
.p1-surface-details { margin-top: 10px !important; padding-top: 10px !important; }
.p1-detail-grid { gap: 6px !important; }
.p1-detail-card { min-height: 92px !important; padding: 9px !important; border: 1px solid var(--ui-line) !important; border-radius: 3px !important; background: #fff !important; }
.p1-detail-card p { margin: 5px 0 !important; color: var(--ui-muted) !important; font-size: 10px !important; line-height: 1.45 !important; }

/* Independent create/edit page, shared by course, map, people and operations. */
#workspace-editor-page {
  position: relative !important;
  z-index: 5 !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 16px !important;
}
#workspace-editor-page .workspace-page-header { min-height: 34px !important; padding-bottom: 9px !important; border-bottom: 1px solid var(--ui-line) !important; }
#workspace-editor-page .workspace-page-header h2, #workspace-editor-page [data-page-title] { color: var(--ui-ink) !important; font-size: 18px !important; }
#workspace-editor-page .workspace-page-form { display: grid !important; gap: 12px !important; }
#workspace-editor-page .workspace-page-form fieldset { padding: 11px !important; border: 1px solid var(--ui-line) !important; border-radius: 3px !important; background: #fbfcfd !important; }
#workspace-editor-page .workspace-page-actions { display: flex !important; justify-content: flex-end !important; gap: 6px !important; padding-top: 9px !important; border-top: 1px solid var(--ui-line) !important; }

/* Remove the old oversized module hero from the workbench while leaving the
   underlying editor/detail sections untouched. */
.module-page .learning-hero, .module-page .exam-hero, .module-page .people-hero,
.module-page .operations-hero, .module-page .points-hero, .module-page .analytics-hero { display: none !important; }

@media (max-width: 980px) {
  :root { --ui-sidebar: 158px; }
  .main-content { padding-inline: 14px !important; }
  #source-admin-dashboard .source-admin-grid { grid-template-columns: 1fr !important; }
  .source-shortcut-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .app-shell.is-authenticated { display: block !important; }
  .sidebar { width: 100% !important; min-width: 0 !important; height: auto !important; position: relative !important; padding: 9px 10px !important; border-right: 0 !important; border-bottom: 1px solid var(--ui-line) !important; }
  .sidebar .auth-brand, .sidebar .brand { padding-bottom: 8px !important; }
  .module-nav { display: flex !important; overflow-x: auto !important; gap: 3px !important; padding: 7px 0 2px !important; }
  .module-link { flex: 0 0 auto !important; min-height: 29px !important; border-left: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 2px !important; }
  .module-link.is-active { border-bottom-color: var(--ui-brand) !important; }
  .sidebar-user-chip, .sidebar-note { display: none !important; }
  .main-content { padding: 11px 10px 72px !important; }
  .module-page .module-page-header { align-items: flex-start !important; flex-direction: column !important; gap: 4px !important; }
  .module-page .module-page-header h2 { font-size: 18px !important; }
  .workspace-section-nav { margin-bottom: 9px !important; }
  .workspace-section-nav button { padding-inline: 9px !important; }
  .learning-grid, .content-grid, .people-grid, .operations-grid, .points-grid, .analytics-grid-top, .analytics-grid-bottom { grid-template-columns: 1fr !important; }
  .learning-category-panel, .learning-material-panel { grid-column: 1 !important; }
  .source-kpi-grid, .module-stats, .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .learning-card-actions, .exam-row-actions, .person-actions, .operations-actions { justify-content: flex-start !important; }
  #workspace-editor-page { padding: 11px !important; }
}