/* ========================================
   WMS工作台 - 响应式核心样式
   基于rem单位实现多分辨率适配
   ======================================== */

:root {
    /* 根字体大小 - 默认14px (基准设计稿1920px) */
    font-size: 14px;
}

/* ===== 断点媒体查询 ===== */

/* xs: ≤1024px - 小屏设备 (1024x768) */
@media screen and (max-width: 1024px) {
    :root {
        font-size: 11px;
    }
}

/* sm: 1025-1366px - 中小屏设备 */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    :root {
        font-size: 13px;
    }
}

/* md: 1367-1920px - 标准屏设备（默认） */
@media screen and (min-width: 1367px) and (max-width: 1920px) {
    :root {
        font-size: 14px;
    }
}

/* lg: 1921-2560px - 2K显示器 */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
    :root {
        font-size: 15px;
    }
}

/* xl: ≥2561px - 4K显示器 */
@media screen and (min-width: 2561px) {
    :root {
        font-size: 16px;
    }
}

/* ===== CSS变量系统（设计令牌）===== */

:root {
    /* ===== 间距变量 ===== */
    --space-xs: 0.25rem;    /* 3.5px-4px */
    --space-sm: 0.5rem;     /* 6px-8px */
    --space-md: 0.75rem;    /* 9px-12px */
    --space-lg: 1rem;       /* 12px-16px */
    --space-xl: 1.25rem;    /* 15px-20px */
    --space-2xl: 1.5rem;    /* 18px-24px */
    --space-3xl: 2rem;      /* 24px-32px */
    
    /* ===== 字体大小 ===== */
    --font-xs: 0.75rem;     /* 9px-12px */
    --font-sm: 0.875rem;    /* 10.5px-14px */
    --font-base: 1rem;      /* 12px-16px */
    --font-md: 1.125rem;    /* 13.5px-18px */
    --font-lg: 1.25rem;     /* 15px-20px */
    --font-xl: 1.5rem;      /* 18px-24px */
    --font-2xl: 1.75rem;    /* 21px-28px */
    --font-3xl: 2rem;       /* 24px-32px */
    --font-4xl: 2.5rem;     /* 30px-40px */
    
    /* ===== 圆角 ===== */
    --radius-sm: 0.25rem;   /* 3px-4px */
    --radius-md: 0.5rem;    /* 6px-8px */
    --radius-lg: 0.75rem;   /* 9px-12px */
    --radius-xl: 1rem;      /* 12px-16px */
    
    /* ===== 按钮高度 ===== */
    --btn-height-sm: 2rem;     /* 24px-32px */
    --btn-height-md: 2.5rem;   /* 30px-40px */
    --btn-height-lg: 3rem;     /* 36px-48px */
    --btn-height-xl: 3.5rem;   /* 42px-56px */
    
    /* ===== 布局尺寸 ===== */
    --sidebar-width: clamp(260px, 22vw, 400px);
    --header-height: 2.25rem;  /* 27px-36px */
    --toolbar-height: 3rem;    /* 36px-48px */
    
    /* ===== 阴影 ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* ===== 过渡时间 ===== */
    --transition-fast: 0.15s;
    --transition-base: 0.2s;
    --transition-slow: 0.3s;
}

/* ===== 响应式工具类 ===== */

/* 隐藏类 - 在指定断点及以下隐藏 */
.hide-xs { display: block; }
.hide-sm { display: block; }
.hide-md { display: block; }
.hide-lg { display: block; }

@media screen and (max-width: 1024px) {
    .hide-xs { display: none !important; }
}

@media screen and (max-width: 1366px) {
    .hide-sm { display: none !important; }
}

@media screen and (max-width: 1920px) {
    .hide-md { display: none !important; }
}

@media screen and (max-width: 2560px) {
    .hide-lg { display: none !important; }
}

/* 仅在指定断点显示 */
.show-xs-only { display: none !important; }
.show-sm-only { display: none !important; }
.show-md-only { display: none !important; }
.show-lg-only { display: none !important; }

@media screen and (max-width: 1024px) {
    .show-xs-only { display: block !important; }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .show-sm-only { display: block !important; }
}

@media screen and (min-width: 1367px) and (max-width: 1920px) {
    .show-md-only { display: block !important; }
}

@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .show-lg-only { display: block !important; }
}

/* ===== 辅助类 ===== */

/* 响应式字体大小 */
.text-responsive-xs { font-size: var(--font-xs); }
.text-responsive-sm { font-size: var(--font-sm); }
.text-responsive-base { font-size: var(--font-base); }
.text-responsive-md { font-size: var(--font-md); }
.text-responsive-lg { font-size: var(--font-lg); }
.text-responsive-xl { font-size: var(--font-xl); }

/* 响应式间距 */
.p-responsive-sm { padding: var(--space-sm); }
.p-responsive-md { padding: var(--space-md); }
.p-responsive-lg { padding: var(--space-lg); }
.p-responsive-xl { padding: var(--space-xl); }

.m-responsive-sm { margin: var(--space-sm); }
.m-responsive-md { margin: var(--space-md); }
.m-responsive-lg { margin: var(--space-lg); }
.m-responsive-xl { margin: var(--space-xl); }

.gap-responsive-sm { gap: var(--space-sm); }
.gap-responsive-md { gap: var(--space-md); }
.gap-responsive-lg { gap: var(--space-lg); }
.gap-responsive-xl { gap: var(--space-xl); }