/* ============================================
   美冠塔口腔患者分析系统 - 基础样式
   医疗行业专业简洁风格 (MEDICO设计规范)
   ============================================ */

/* ============================================
   CSS变量定义 - 医疗专业简洁风格
   ============================================ */
:root {
    /* 主色调 — 深海军蓝 A11定稿 */
    --primary: #1B3A7B;
    --primary-rgb: 27, 58, 123;
    --primary-hover: #264D99;
    --primary-light: #EDF1FA;
    --primary-dark: #152C5E;
    --primary-subtle: #D0D8EE;
    --primary-200: #A0B4E8;          /* 医疗浅色（设计文档 5.1 节） */

    /* 暖橙强调色（Design System v2 新增） */
    --accent: #C2410C;
    --accent-hover: #9A3412;
    --accent-light: #FFF1EB;

    /* 功能色（保持行业通用语义，与design-tokens.css一致） */
    --success: #059669;
    --success-light: #ECFDF5;
    --warning: #D97706;
    --warning-light: #FFFBEB;
    --danger: #DC2626;
    --danger-light: #FEF2F2;
    --info: #0284C7;
    --info-light: #E0F2FE;

    /* 背景色（暖白调 — 方案C） */
    --bg-main: #ffffff;
    --bg-page: #F4F5F7;
    --bg-card: #ffffff;
    --bg-sidebar: #FFFFFF;
    --bg-hover: #F4F5F7;
    --bg-active: #E8ECF2;

    /* 文字色（方案C — 加深对比度） */
    --text-title: #1a1a2e;
    --text-main: #1a1a2e;
    --text-secondary: #5a6070;
    --text-muted: #8b919e;
    --text-placeholder: #8b919e;
    --text-disabled: #8b919e;

    /* 边框色（暖灰调） */
    --border: #E5E7EB;
    --border-light: #F0F1F3;
    --border-focus: var(--primary);
    --border-accent: var(--accent);
    --border-radius: 8px;

    /* 阴影 — v2（由design-tokens.css覆盖，此处作fallback） */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow: var(--shadow-base);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-md: var(--shadow-base);  /* 旧名兼容 */

    /* 间距 — 8px基准网格（由design-tokens.css覆盖，此处作fallback） */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-base: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;

    /* 圆角 — 折中方案 按钮8px/卡片12px（由design-tokens.css覆盖，此处作fallback） */
    --radius-sm: 4px;
    --radius-base: 8px;
    --radius: var(--radius-base);
    --radius-md: var(--radius-base);
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* 字体大小 — v2层级（由design-tokens.css覆盖，此处作fallback） */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 32px;
    /* v1兼容别名（旧名 → v2值映射） */
    --text-xs: var(--font-size-xs);     /* 12px */
    --text-sm: var(--font-size-sm);     /* 13px (v1 was 14px) */
    --text-base: var(--font-size-base); /* 14px (v1 was 15px) */
    --text-lg: var(--font-size-md);     /* 16px (v1 was 16px) */
    --text-xl: var(--font-size-lg);     /* 18px (v1 was 18px) */
    --text-2xl: var(--font-size-xl);    /* 20px (v1 was 20px) */
    --text-3xl: var(--font-size-xxl);   /* 24px (v1 was 24px) */

    /* 行高 — v2层级 */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* 侧边栏宽度 */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --header-height: 56px;

    /* m-* 前缀变量 - 用于record-detail等页面（v3.0 迁移至医疗蓝） */
    --m-primary: #1B3A7B;       /* 医疗蓝主色 */
    --m-secondary: #152C5E;     /* 深海军蓝深变体 */
    --m-accent: #c17b63;
    --m-gold: #b79a64;
    --m-green: #4a6f4a;
    --m-blue: #0E7490;          /* 靛青（医生角色色） */
    --m-purple: #8B6F9B;        /* 暖紫（客管角色色） */
    --m-text: #1f2937;
    --m-text-light: #5a6070;
    --m-text-secondary: #5a6070;
    --m-bg: #f8f9fa;
    --m-card: #ffffff;
    --m-border: #e5e7eb;
}

/* ============================================
   基础重置
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 清除焦点黑框，后续由 :focus-visible 接管 */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 清除HTML元素默认黑色边框 */
img, video, audio, canvas, svg, iframe, button, input, select, textarea {
    border: none;
    outline: none;
}

html {
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-page);
    color: var(--text-main);
    line-height: var(--leading-normal);
    min-height: 100vh;
}

/* 链接样式 */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
}

/* 图片 */
img {
    max-width: 100%;
    height: auto;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* 选中文本 */
::selection {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* 隐藏元素 */
.hidden { display: none !important; }

/* 动画 */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes toastFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-sm {
    width: 16px; height: 16px;
    border-width: 2px;
}

.loading-lg {
    width: 32px; height: 32px;
    border-width: 4px;
}

/* 打印样式 */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }

    body {
        background: white !important;
        color: black !important;
    }
}

/* 减少动画（可访问性） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}