/* ==================== 易算AI - 布局系统 ==================== */
/* 版本: 2.0.0 | 用途: 容器、网格、Flex布局、间距系统 */
/* 依赖: 01-design-tokens.css, 02-reset-and-base.css */

/* ==================== 容器系统 ==================== */
/* 页面容器 */
.page-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* 内容容器 */
.content-container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--spacing-xl);
}

/* 卡片容器 */
.card-container {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
}

.card-container:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(30, 159, 255, 0.15);
}

/* 窄容器 - 用于表单、登录页等 */
.container-narrow {
    max-width: var(--container-sm);
}

/* 中等容器 */
.container-medium {
    max-width: var(--container-md);
}

/* 宽容器 */
.container-wide {
    max-width: var(--container-lg);
}

/* ==================== 网格系统 ==================== */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 自动填充网格 */
.grid-auto-fill-sm {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-auto-fill-md {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-auto-fill-lg {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* 网格间距变体 */
.grid-gap-xs {
    gap: var(--spacing-xs);
}

.grid-gap-sm {
    gap: var(--spacing-sm);
}

.grid-gap-md {
    gap: var(--spacing-md);
}

.grid-gap-lg {
    gap: var(--spacing-xl);
}

.grid-gap-xl {
    gap: var(--spacing-2xl);
}

/* 响应式网格 */
@media (max-width: 767px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-auto-fill-sm,
    .grid-auto-fill-md,
    .grid-auto-fill-lg {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==================== Flexbox系统 ==================== */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Flex对齐 */
.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Flex项目 */
.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-initial {
    flex: 0 1 auto;
}

.flex-none {
    flex: none;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

/* ==================== 间距系统 - 外边距 ==================== */
/* 上外边距 */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

/* 下外边距 */
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

/* 左外边距 */
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

/* 右外边距 */
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }

/* 水平外边距 */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }

/* 垂直外边距 */
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

/* 全外边距 */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* 负外边距 */
.mt-n-xs { margin-top: calc(-1 * var(--spacing-xs)); }
.mt-n-sm { margin-top: calc(-1 * var(--spacing-sm)); }
.mt-n-md { margin-top: calc(-1 * var(--spacing-md)); }
.mt-n-lg { margin-top: calc(-1 * var(--spacing-lg)); }
.mb-n-xs { margin-bottom: calc(-1 * var(--spacing-xs)); }
.mb-n-sm { margin-bottom: calc(-1 * var(--spacing-sm)); }
.mb-n-md { margin-bottom: calc(-1 * var(--spacing-md)); }
.mb-n-lg { margin-bottom: calc(-1 * var(--spacing-lg)); }

/* ==================== 间距系统 - 内边距 ==================== */
/* 上内边距 */
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pt-2xl { padding-top: var(--spacing-2xl); }

/* 下内边距 */
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pb-2xl { padding-bottom: var(--spacing-2xl); }

/* 左内边距 */
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

/* 右内边距 */
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }

/* 水平内边距 */
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }

/* 垂直内边距 */
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

/* 全内边距 */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }

/* ==================== 定位系统 ==================== */
/* 定位方式 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* 定位值 */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-50 { top: 50%; }
.left-50 { left: 50%; }
.-translate-50 { transform: translate(-50%, -50%); }
.-translate-x-50 { transform: translateX(-50%); }
.-translate-y-50 { transform: translateY(-50%); }

/* 浮动 */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }

/* 清除浮动 */
.clear-both::after {
    content: '';
    display: table;
    clear: both;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
}

/* 溢出控制 */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* ==================== 尺寸系统 ==================== */
/* 宽度 */
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-min { width: min-content; }
.w-max { width: max-content; }

/* 高度 */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.h-min { height: min-content; }
.h-max { height: max-content; }

/* 最小/最大宽度 */
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

/* 最小/最大高度 */
.min-h-0 { min-height: 0; }
.min-h-screen { min-height: 100vh; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/* ==================== 页面布局模板 ==================== */
/* 标准页面布局 (header + content) */
.page-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-header {
    flex-shrink: 0;
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-footer {
    flex-shrink: 0;
}

/* 侧边栏布局 */
.layout-with-sidebar {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex-shrink: 0;
    width: 280px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
}

.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 响应式侧边栏 */
@media (max-width: 1023px) {
    .sidebar {
        width: 240px;
    }
}

@media (max-width: 767px) {
    .layout-with-sidebar {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}