/* ==========================================================================
   Fluent 2 设计令牌 + 基础组件样式（本地化，无 CDN）
   令牌取值参考 Microsoft Fluent 2 主题（@fluentui/tokens）
   ========================================================================== */

:root {
    /* Brand */
    --colorBrandBackground: #0f6cbd;
    --colorBrandBackgroundHover: #115ea3;
    --colorBrandBackgroundPressed: #0c3b5e;
    --colorBrandForeground1: #0f6cbd;

    /* Neutral foreground */
    --colorNeutralForeground1: #242424;
    --colorNeutralForeground2: #424242;
    --colorNeutralForeground3: #616161;
    --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralForegroundDisabled: #bdbdbd;

    /* Neutral background */
    --colorNeutralBackground1: #ffffff;
    --colorNeutralBackground2: #fafafa;
    --colorNeutralBackground3: #f5f5f5;
    --colorNeutralBackgroundDisabled: #f0f0f0;

    /* Stroke */
    --colorNeutralStroke1: #d1d1d1;
    --colorNeutralStroke2: #e0e0e0;
    --colorNeutralStrokeAccessible: #616161;

    /* Status */
    --colorPaletteRedForeground1: #b10e1c;
    --colorPaletteRedBackground1: #fdf3f4;
    --colorPaletteRedBorder1: #e37d87;
    --colorPaletteGreenForeground1: #0e700e;
    --colorPaletteGreenBackground1: #f1faf1;
    --colorPaletteGreenBorder1: #52c252;
    --colorPaletteYellowForeground1: #7a5900;
    --colorPaletteYellowBackground1: #fff9f0;
    --colorPaletteYellowBorder1: #e8b26e;
    --colorPaletteBlueForeground1: #0c3b5e;
    --colorPaletteBlueBackground1: #eff6fc;
    --colorPaletteBlueBorder1: #77b7de;

    /* Shadow */
    --shadow2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    --shadow4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    --shadow8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);

    /* Radius */
    --borderRadiusMedium: 4px;
    --borderRadiusLarge: 6px;
    --borderRadiusXLarge: 8px;
    --borderRadiusCircular: 9999px;

    /* Typography */
    --fontFamilyBase: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
    --fontSizeBase300: 12px;
    --fontSizeBase400: 14px;
    --fontSizeBase500: 16px;
    --fontSizeBase600: 20px;
    --fontWeightRegular: 400;
    --fontWeightSemibold: 600;
    --lineHeightBase300: 16px;
    --lineHeightBase400: 20px;
    --lineHeightBase500: 22px;
    --lineHeightBase600: 28px;
}

/* ---- 基础 ---- */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground2);
}

a { color: var(--colorBrandForeground1); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: Consolas, "Courier New", monospace;
    background: var(--colorNeutralBackground3);
    padding: 1px 5px;
    border-radius: var(--borderRadiusMedium);
}

/* ---- 按钮 ---- */
.app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase400);
    border-radius: var(--borderRadiusMedium);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.1s linear;
    white-space: nowrap;
}
.app-button:focus-visible { outline: 2px solid var(--colorBrandForeground1); outline-offset: 1px; }
.app-button:disabled { opacity: 0.5; cursor: not-allowed; }

.app-button.primary {
    background-color: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
}
.app-button.primary:hover:not(:disabled) { background-color: var(--colorBrandBackgroundHover); }
.app-button.primary:active:not(:disabled) { background-color: var(--colorBrandBackgroundPressed); }

.app-button.subtle {
    background-color: transparent;
    color: var(--colorNeutralForeground2);
    border-color: var(--colorNeutralStroke1);
}
.app-button.subtle:hover:not(:disabled) { background-color: var(--colorNeutralBackground3); }

.app-button.danger {
    background-color: var(--colorPaletteRedBackground1);
    color: var(--colorPaletteRedForeground1);
    border-color: var(--colorPaletteRedBorder1);
}

.app-button.full { width: 100%; padding: 8px 12px; margin-top: 4px; }

/* ---- 表单 ---- */
.field { margin-bottom: 14px; }
.field label {
    display: block;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground2);
    margin-bottom: 4px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 6px 10px;
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase400);
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadiusMedium);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--colorBrandForeground1);
}
.field input:disabled { background: var(--colorNeutralBackgroundDisabled); color: var(--colorNeutralForegroundDisabled); }
.field-error { display: block; color: var(--colorPaletteRedForeground1); font-size: var(--fontSizeBase300); margin-top: 3px; }

.input-error { border-color: var(--colorPaletteRedBorder1) !important; }

/* ---- 提示条 ---- */
.alert {
    padding: 8px 12px;
    border-radius: var(--borderRadiusMedium);
    font-size: var(--fontSizeBase400);
    margin: 10px 0;
    border: 1px solid transparent;
}
.alert.error {
    background: var(--colorPaletteRedBackground1);
    color: var(--colorPaletteRedForeground1);
    border-color: var(--colorPaletteRedBorder1);
}
.alert.success {
    background: var(--colorPaletteGreenBackground1);
    color: var(--colorPaletteGreenForeground1);
    border-color: var(--colorPaletteGreenBorder1);
}
.alert.warning {
    background: var(--colorPaletteYellowBackground1);
    color: var(--colorPaletteYellowForeground1);
    border-color: var(--colorPaletteYellowBorder1);
}
.alert.info {
    background: var(--colorPaletteBlueBackground1);
    color: var(--colorPaletteBlueForeground1);
    border-color: var(--colorPaletteBlueBorder1);
}

/* ---- 卡片 ---- */
.card {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadow2);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.card-title {
    font-size: var(--fontSizeBase500);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase500);
    margin: 0;
}

/* ---- 表格 ---- */
.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fontSizeBase400);
}
.app-table th {
    text-align: left;
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground2);
    padding: 8px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    white-space: nowrap;
}
.app-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    vertical-align: middle;
}
.app-table tbody tr:hover { background-color: var(--colorNeutralBackground3); }
.app-table .empty-row td {
    text-align: center;
    color: var(--colorNeutralForeground3);
    padding: 28px 10px;
}

/* ---- 徽标 ---- */
.badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase300);
    border-radius: var(--borderRadiusCircular);
    border: 1px solid var(--colorNeutralStroke1);
    color: var(--colorNeutralForeground2);
    vertical-align: middle;
}
.badge.success { background: var(--colorPaletteGreenBackground1); color: var(--colorPaletteGreenForeground1); border-color: var(--colorPaletteGreenBorder1); }
.badge.fail { background: var(--colorPaletteRedBackground1); color: var(--colorPaletteRedForeground1); border-color: var(--colorPaletteRedBorder1); }
.badge.warning { background: var(--colorPaletteYellowBackground1); color: var(--colorPaletteYellowForeground1); border-color: var(--colorPaletteYellowBorder1); }
.badge.info { background: var(--colorPaletteBlueBackground1); color: var(--colorPaletteBlueForeground1); border-color: var(--colorPaletteBlueBorder1); }
.badge.done { background: var(--colorPaletteGreenBackground1); color: var(--colorPaletteGreenForeground1); border-color: var(--colorPaletteGreenBorder1); }
.badge.current { margin-left: 8px; background: var(--colorPaletteBlueBackground1); color: var(--colorPaletteBlueForeground1); border-color: var(--colorPaletteBlueBorder1); }