/* ===========================================================================
 * Corgi 面板 —— MD3 主题层
 *
 * 只做两件事：把 @material/web 需要的 --md-sys-* 语义 token 铺到 :root，
 * 以及为 @material/web 尚未提供组件的区块（顶栏、侧边栏、数据表、终端）
 * 提供 token 驱动的布局类。所有颜色只引用 token，不出现裸色值。
 * =========================================================================== */

:root {
  /* --- color: light scheme --- */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;

  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;

  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;

  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  --md-sys-color-surface: #fef7ff;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;

  --md-sys-color-surface-dim: #ded8e1;
  --md-sys-color-surface-bright: #fef7ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;

  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;

  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --md-sys-color-inverse-primary: #d0bcff;

  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* --- typography --- */
  --md-sys-typescale-display-large-font: 'Roboto Flex', 'Noto Sans SC', Roboto, system-ui, sans-serif;
  --md-sys-typescale-headline-large-font: var(--md-sys-typescale-display-large-font);
  --md-sys-typescale-title-large-font: var(--md-sys-typescale-display-large-font);
  --md-sys-typescale-body-large-font: var(--md-sys-typescale-display-large-font);
  --md-sys-typescale-body-medium-font: var(--md-sys-typescale-display-large-font);
  --md-sys-typescale-label-large-font: var(--md-sys-typescale-display-large-font);

  --md-sys-typescale-display-large-size: 3.5rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-headline-large-size: 1.75rem;
  --md-sys-typescale-headline-small-size: 1.375rem;
  --md-sys-typescale-title-large-size: 1.25rem;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-medium-size: 0.75rem;

  /* --- shape --- */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-full: 9999px;

  /* --- motion（Web 侧没有弹簧物理，用 spec 的 easing/duration 回落）--- */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-long2: 500ms;

  /* --- elevation 的 tonal 叠加层 --- */
  --md-sys-elevation-level1: 1;
  --md-sys-elevation-level2: 2;
  --md-sys-elevation-level3: 3;

  /* --- 8dp spacing 体系 --- */
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 24px;
  --md-sys-spacing-6: 32px;
  --md-sys-spacing-7: 48px;
  --md-sys-spacing-8: 64px;
}

/* 暗色：只换 color 角色，typography/shape/motion 不动 */
:root[data-theme="dark"] {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;

  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;

  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd8e4;

  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;

  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: #cac4d0;

  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;

  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;

  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-inverse-primary: #6750a4;
}

/* --- base --- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--md-sys-color-primary);
}

/* --- app shell：MD3 的 bar + rail/sheet + content --- */

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: 0 var(--md-sys-spacing-4);
  height: 64px;
  flex: 0 0 auto;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.top-bar__title {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--md-sys-color-primary);
}

.top-bar__subtitle {
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

.top-bar__spacer {
  flex: 1;
}

.status-chips {
  display: flex;
  gap: var(--md-sys-spacing-2);
  flex-wrap: wrap;
}

/* --- 主体：侧栏 + 内容（MD3 canonical list-detail）--- */

.shell {
  flex: 1;
  display: flex;
  min-height: 0;
}

.side {
  width: 380px;
  flex: 0 0 auto;
  overflow-y: auto;
  padding: var(--md-sys-spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-3);
  background: var(--md-sys-color-surface-container-low);
  border-right: 1px solid var(--md-sys-color-outline-variant);
}

.content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--md-sys-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-3);
}

/* 大屏不要无限拉宽 */
.content > * {
  max-width: 1040px;
}

/* 窄屏：侧栏折叠到下方 */
@media (max-width: 839px) {
  .shell {
    flex-direction: column;
  }
  .side {
    width: auto;
    border-right: none;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    order: 2;
    max-height: 55vh;
  }
  .content {
    order: 1;
  }
}

/* 极窄屏：顶栏换行，状态 chip 收进第二行，避免挤成一团 */
@media (max-width: 599px) {
  .top-bar {
    flex-wrap: wrap;
    height: auto;
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    row-gap: var(--md-sys-spacing-1);
  }
  .top-bar__title {
    font-size: var(--md-sys-typescale-title-medium-size);
  }
  .status-chips {
    order: 3;
    flex-basis: 100%;
    padding-top: var(--md-sys-spacing-1);
  }
  .top-bar__spacer {
    flex: 1 1 auto;
  }
  .content {
    padding: var(--md-sys-spacing-3);
  }
  .card {
    padding: var(--md-sys-spacing-3);
  }
  .terminal {
    min-height: 180px;
    max-height: 40vh;
  }
}

/* --- 分页导航 --- */

.pager {
  display: flex;
  gap: var(--md-sys-spacing-1);
  padding: 0 var(--md-sys-spacing-4);
  flex: 0 0 auto;
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  overflow-x: auto;
  scrollbar-width: none;
}

.pager::-webkit-scrollbar {
  display: none;
}

.pager__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: var(--md-sys-typescale-label-large-size);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition:
    color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.pager__tab md-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.pager__tab:hover {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
}

.pager__tab--active {
  color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary);
}

/* --- 页面容器 --- */

.page {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--md-sys-spacing-4);
}

.page--active {
  display: block;
}

.page__inner {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-3);
  max-width: 1040px;
  margin: 0 auto;
}

.page__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 分页后 shell 不再需要侧栏，改单列 */

.shell {
  flex: 1;
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.side {
  display: none;
}

.content {
  display: none;
}

/* --- card：filled / outlined --- */

.card {
  padding: var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-3);
}

.card--outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.card__title {
  font-family: var(--md-sys-typescale-title-medium-size);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.card__subtitle {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

/* --- 表单行 --- */

.field {
  display: block;
  width: 100%;
}

.field-row {
  display: flex;
  gap: var(--md-sys-spacing-2);
  flex-wrap: wrap;
}

.field-row > * {
  flex: 1 1 120px;
  min-width: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--md-sys-spacing-2);
}

.actions {
  display: flex;
  gap: var(--md-sys-spacing-2);
  flex-wrap: wrap;
  align-items: center;
}

/* --- 数据表（@material/web 没有 table 组件，用 token 手写）--- */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--md-sys-shape-corner-small);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--md-sys-typescale-body-medium-size);
}

table.data th {
  text-align: left;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  white-space: nowrap;
}

table.data td {
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}

table.data tr:last-child td {
  border-bottom: none;
}

table.data tr:hover td {
  background: var(--md-sys-color-surface-container-high);
}

.mono {
  font-family: ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
}

/* --- 终端 / 输出区 --- */

.terminal {
  font-family: ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: var(--md-sys-spacing-3);
  min-height: 260px;
  max-height: 52vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.terminal[data-state="ok"] {
  color: var(--md-sys-color-primary);
}

.terminal[data-state="error"] {
  color: var(--md-sys-color-error);
}

.terminal[data-state="busy"] {
  color: var(--md-sys-color-on-surface-variant);
}

/* --- 登录页（MD3 的 centered card）--- */

.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--md-sys-spacing-5);
  background: var(--md-sys-color-surface);
}

.login-card {
  width: min(420px, 100%);
  padding: var(--md-sys-spacing-6);
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-4);
}

.login-card__logo {
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: 1;
  color: var(--md-sys-color-primary);
}

.login-card__title {
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: 500;
  margin: 0;
}

.login-card__hint {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

.error-text {
  color: var(--md-sys-color-error);
  font-size: var(--md-sys-typescale-body-medium-size);
  min-height: 1.25rem;
}

/* --- 状态提示条（snackbar 的 MD3 观感）--- */

.snackbar {
  position: fixed;
  left: 50%;
  bottom: var(--md-sys-spacing-5);
  transform: translateX(-50%) translateY(150%);
  min-width: 280px;
  max-width: min(560px, 90vw);
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),
    opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
  z-index: 10;
}

.snackbar[data-open="true"] {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.snackbar[data-kind="error"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* --- 技能分组标题 --- */

.group-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin: var(--md-sys-spacing-2) 0 0;
}

.hidden {
  display: none !important;
}

/* --- @material/web 组件的局部 token 调整 --- */

md-outlined-text-field,
md-filled-text-field {
  width: 100%;
}

md-outlined-text-field[type="textarea"] md-outlined-text-field,
textarea {
  font-family: inherit;
}

md-icon-button {
  --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
}

md-list-item {
  --md-list-item-label-text-font: var(--md-sys-typescale-body-large-font);
}

/* 禁用状态下的只读视觉 */
.locked {
  opacity: 0.6;
  pointer-events: none;
}