/* ===== AIHUB 布局样式 ===== */
/* 主要布局结构和响应式设计 */

/* 主布局容器 */
.aihub-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--aihub-white);
}

/* 导航栏区域 */
.aihub-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--aihub-navbar-height);
    background: linear-gradient(135deg, var(--aihub-primary) 0%, var(--aihub-primary-hover) 100%);
    box-shadow: var(--aihub-shadow-md);
}

/* 主内容区域 */
.aihub-main {
    display: flex;
    flex: 1;
    min-height: calc(100vh - var(--aihub-navbar-height));
}

/* 侧边栏 */
.aihub-sidebar {
    width: var(--aihub-sidebar-width);
    min-width: var(--aihub-sidebar-width);
    background: linear-gradient(180deg, var(--aihub-gray-50) 0%, var(--aihub-gray-100) 100%);
    border-right: 1px solid var(--aihub-gray-200);
    overflow-y: visible;
    height: auto;
}

/* 主内容容器 */
.aihub-content {
    flex: 1;
    min-width: 0;
    background-color: var(--aihub-white);
    overflow-y: auto;
}

/* 内容内部容器 */
.aihub-content-inner {
    max-width: var(--aihub-container-max);
    margin: 0 auto;
    padding: var(--aihub-space-6);
}

/* 页脚 */
.aihub-footer {
    background: linear-gradient(135deg, var(--aihub-gray-800) 0%, var(--aihub-gray-900) 100%);
    color: var(--aihub-white);
    margin-top: auto;
    padding: var(--aihub-space-6) 0 var(--aihub-space-4);
    position: relative;
    overflow: hidden;
}

.aihub-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--aihub-primary) 50%, transparent 100%);
}

.aihub-footer-container {
    max-width: var(--aihub-container-max);
    margin: 0 auto;
    padding: 0 var(--aihub-space-4);
}

.aihub-footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--aihub-space-6);
    margin-bottom: var(--aihub-space-6);
}

.aihub-footer-section {
    display: flex;
    flex-direction: column;
}

.aihub-footer-brand {
    margin-bottom: var(--aihub-space-4);
}

.aihub-footer-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--aihub-space-3);
    color: var(--aihub-white);
    display: flex;
    align-items: center;
    gap: var(--aihub-space-2);
}

.aihub-footer-title i {
    color: var(--aihub-primary);
    font-size: 1.5rem;
}

.aihub-footer-description {
    color: var(--aihub-gray-300);
    line-height: 1.6;
    margin-bottom: var(--aihub-space-4);
}

.aihub-footer-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--aihub-space-3);
    color: var(--aihub-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aihub-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aihub-footer-links li {
    margin-bottom: var(--aihub-space-2);
}

.aihub-footer-link {
    color: var(--aihub-gray-300);
    text-decoration: none;
    transition: all var(--aihub-transition);
    display: inline-flex;
    align-items: center;
    padding: var(--aihub-space-1) 0;
}

.aihub-footer-link:hover {
    color: var(--aihub-primary);
    transform: translateX(4px);
}

.aihub-social-links {
    display: flex;
    gap: var(--aihub-space-3);
    margin-top: var(--aihub-space-3);
}

.aihub-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--aihub-gray-300);
    text-decoration: none;
    border-radius: var(--aihub-radius);
    transition: all var(--aihub-transition);
    backdrop-filter: blur(10px);
}

.aihub-social-link:hover {
    background: var(--aihub-primary);
    color: var(--aihub-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.aihub-footer-notice {
    margin-top: var(--aihub-space-4);
    padding: var(--aihub-space-3);
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--aihub-radius);
    color: var(--aihub-gray-300);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--aihub-space-2);
}

.aihub-footer-notice i {
    color: var(--aihub-primary);
}

.aihub-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--aihub-space-4);
}

.aihub-footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--aihub-space-3);
}

.aihub-footer-copyright {
    color: var(--aihub-gray-400);
    font-size: 0.875rem;
    margin: 0;
}

.aihub-footer-tagline {
    color: var(--aihub-gray-400);
    font-size: 0.875rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--aihub-space-1);
}

.aihub-footer-tagline i {
    color: var(--aihub-danger);
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 响应式页脚 */
@media (max-width: 767.98px) {
    .aihub-footer-content {
        grid-template-columns: 1fr;
        gap: var(--aihub-space-4);
    }
    
    .aihub-footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .aihub-social-links {
        justify-content: center;
    }
}

/* 容器类 */
.aihub-container {
    width: 100%;
    max-width: var(--aihub-container-max);
    margin: 0 auto;
    padding: 0 var(--aihub-space-4);
}

.aihub-container-fluid {
    width: 100%;
    padding: 0 var(--aihub-space-4);
}

/* 网格系统 */
.aihub-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--aihub-space-3));
}

.aihub-col {
    flex: 1;
    padding: 0 var(--aihub-space-3);
}

.aihub-col-auto {
    flex: 0 0 auto;
    width: auto;
}

.aihub-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.aihub-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.aihub-col-3 { flex: 0 0 25%; max-width: 25%; }
.aihub-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.aihub-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.aihub-col-6 { flex: 0 0 50%; max-width: 50%; }
.aihub-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.aihub-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.aihub-col-9 { flex: 0 0 75%; max-width: 75%; }
.aihub-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.aihub-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.aihub-col-12 { flex: 0 0 100%; max-width: 100%; }

/* Flexbox 工具类 */
.aihub-d-flex { display: flex !important; }
.aihub-d-inline-flex { display: inline-flex !important; }
.aihub-d-block { display: block !important; }
.aihub-d-inline-block { display: inline-block !important; }
.aihub-d-none { display: none !important; }

.aihub-flex-row { flex-direction: row !important; }
.aihub-flex-column { flex-direction: column !important; }
.aihub-flex-wrap { flex-wrap: wrap !important; }
.aihub-flex-nowrap { flex-wrap: nowrap !important; }

.aihub-justify-start { justify-content: flex-start !important; }
.aihub-justify-end { justify-content: flex-end !important; }
.aihub-justify-center { justify-content: center !important; }
.aihub-justify-between { justify-content: space-between !important; }
.aihub-justify-around { justify-content: space-around !important; }

.aihub-align-start { align-items: flex-start !important; }
.aihub-align-end { align-items: flex-end !important; }
.aihub-align-center { align-items: center !important; }
.aihub-align-baseline { align-items: baseline !important; }
.aihub-align-stretch { align-items: stretch !important; }

.aihub-flex-grow-0 { flex-grow: 0 !important; }
.aihub-flex-grow-1 { flex-grow: 1 !important; }
.aihub-flex-shrink-0 { flex-shrink: 0 !important; }
.aihub-flex-shrink-1 { flex-shrink: 1 !important; }

/* 间距工具类 */
.aihub-m-0 { margin: 0 !important; }
.aihub-m-1 { margin: var(--aihub-space-1) !important; }
.aihub-m-2 { margin: var(--aihub-space-2) !important; }
.aihub-m-3 { margin: var(--aihub-space-3) !important; }
.aihub-m-4 { margin: var(--aihub-space-4) !important; }
.aihub-m-5 { margin: var(--aihub-space-5) !important; }
.aihub-m-6 { margin: var(--aihub-space-6) !important; }

.aihub-mt-0 { margin-top: 0 !important; }
.aihub-mt-1 { margin-top: var(--aihub-space-1) !important; }
.aihub-mt-2 { margin-top: var(--aihub-space-2) !important; }
.aihub-mt-3 { margin-top: var(--aihub-space-3) !important; }
.aihub-mt-4 { margin-top: var(--aihub-space-4) !important; }
.aihub-mt-5 { margin-top: var(--aihub-space-5) !important; }
.aihub-mt-6 { margin-top: var(--aihub-space-6) !important; }

.aihub-mb-0 { margin-bottom: 0 !important; }
.aihub-mb-1 { margin-bottom: var(--aihub-space-1) !important; }
.aihub-mb-2 { margin-bottom: var(--aihub-space-2) !important; }
.aihub-mb-3 { margin-bottom: var(--aihub-space-3) !important; }
.aihub-mb-4 { margin-bottom: var(--aihub-space-4) !important; }
.aihub-mb-5 { margin-bottom: var(--aihub-space-5) !important; }
.aihub-mb-6 { margin-bottom: var(--aihub-space-6) !important; }

.aihub-ml-0 { margin-left: 0 !important; }
.aihub-ml-1 { margin-left: var(--aihub-space-1) !important; }
.aihub-ml-2 { margin-left: var(--aihub-space-2) !important; }
.aihub-ml-3 { margin-left: var(--aihub-space-3) !important; }
.aihub-ml-4 { margin-left: var(--aihub-space-4) !important; }
.aihub-ml-auto { margin-left: auto !important; }

.aihub-mr-0 { margin-right: 0 !important; }
.aihub-mr-1 { margin-right: var(--aihub-space-1) !important; }
.aihub-mr-2 { margin-right: var(--aihub-space-2) !important; }
.aihub-mr-3 { margin-right: var(--aihub-space-3) !important; }
.aihub-mr-4 { margin-right: var(--aihub-space-4) !important; }
.aihub-mr-auto { margin-right: auto !important; }

.aihub-p-0 { padding: 0 !important; }
.aihub-p-1 { padding: var(--aihub-space-1) !important; }
.aihub-p-2 { padding: var(--aihub-space-2) !important; }
.aihub-p-3 { padding: var(--aihub-space-3) !important; }
.aihub-p-4 { padding: var(--aihub-space-4) !important; }
.aihub-p-5 { padding: var(--aihub-space-5) !important; }
.aihub-p-6 { padding: var(--aihub-space-6) !important; }

.aihub-pt-0 { padding-top: 0 !important; }
.aihub-pt-1 { padding-top: var(--aihub-space-1) !important; }
.aihub-pt-2 { padding-top: var(--aihub-space-2) !important; }
.aihub-pt-3 { padding-top: var(--aihub-space-3) !important; }
.aihub-pt-4 { padding-top: var(--aihub-space-4) !important; }
.aihub-pt-5 { padding-top: var(--aihub-space-5) !important; }
.aihub-pt-6 { padding-top: var(--aihub-space-6) !important; }

.aihub-pb-0 { padding-bottom: 0 !important; }
.aihub-pb-1 { padding-bottom: var(--aihub-space-1) !important; }
.aihub-pb-2 { padding-bottom: var(--aihub-space-2) !important; }
.aihub-pb-3 { padding-bottom: var(--aihub-space-3) !important; }
.aihub-pb-4 { padding-bottom: var(--aihub-space-4) !important; }
.aihub-pb-5 { padding-bottom: var(--aihub-space-5) !important; }
.aihub-pb-6 { padding-bottom: var(--aihub-space-6) !important; }

.aihub-pl-0 { padding-left: 0 !important; }
.aihub-pl-1 { padding-left: var(--aihub-space-1) !important; }
.aihub-pl-2 { padding-left: var(--aihub-space-2) !important; }
.aihub-pl-3 { padding-left: var(--aihub-space-3) !important; }
.aihub-pl-4 { padding-left: var(--aihub-space-4) !important; }
.aihub-pl-5 { padding-left: var(--aihub-space-5) !important; }
.aihub-pl-6 { padding-left: var(--aihub-space-6) !important; }

.aihub-pr-0 { padding-right: 0 !important; }
.aihub-pr-1 { padding-right: var(--aihub-space-1) !important; }
.aihub-pr-2 { padding-right: var(--aihub-space-2) !important; }
.aihub-pr-3 { padding-right: var(--aihub-space-3) !important; }
.aihub-pr-4 { padding-right: var(--aihub-space-4) !important; }
.aihub-pr-5 { padding-right: var(--aihub-space-5) !important; }
.aihub-pr-6 { padding-right: var(--aihub-space-6) !important; }

/* 响应式断点 */
@media (max-width: 575.98px) {
    .aihub-d-sm-none { display: none !important; }
    .aihub-d-sm-block { display: block !important; }
    .aihub-d-sm-flex { display: flex !important; }
}

@media (max-width: 767.98px) {
    .aihub-d-md-none { display: none !important; }
    .aihub-d-md-block { display: block !important; }
    .aihub-d-md-flex { display: flex !important; }
    
    .aihub-main {
        flex-direction: column;
    }
    
    .aihub-sidebar {
        width: 100%;
        min-width: auto;
        max-height: none;
        order: 2;
        border-right: none;
        border-top: 1px solid var(--aihub-gray-200);
    }
    
    .aihub-content {
        order: 1;
    }
    
    .aihub-content-inner {
        padding: var(--aihub-space-4);
    }
}

@media (max-width: 991.98px) {
    .aihub-d-lg-none { display: none !important; }
    .aihub-d-lg-block { display: block !important; }
    .aihub-d-lg-flex { display: flex !important; }
}

@media (max-width: 1199.98px) {
    .aihub-d-xl-none { display: none !important; }
    .aihub-d-xl-block { display: block !important; }
    .aihub-d-xl-flex { display: flex !important; }
}

/* 文本对齐工具类 */
.aihub-text-left { text-align: left !important; }
.aihub-text-center { text-align: center !important; }
.aihub-text-right { text-align: right !important; }
.aihub-text-justify { text-align: justify !important; }

/* 字体重量工具类 */
.aihub-font-light { font-weight: 300 !important; }
.aihub-font-normal { font-weight: 400 !important; }
.aihub-font-medium { font-weight: 500 !important; }
.aihub-font-semibold { font-weight: 600 !important; }
.aihub-font-bold { font-weight: 700 !important; }

/* 颜色工具类 */
.aihub-text-primary { color: var(--aihub-primary) !important; }
.aihub-text-secondary { color: var(--aihub-secondary) !important; }
.aihub-text-success { color: var(--aihub-success) !important; }
.aihub-text-danger { color: var(--aihub-danger) !important; }
.aihub-text-warning { color: var(--aihub-warning) !important; }
.aihub-text-info { color: var(--aihub-info) !important; }
.aihub-text-white { color: var(--aihub-white) !important; }
.aihub-text-muted { color: var(--aihub-gray-500) !important; }

/* 背景颜色工具类 */
.aihub-bg-primary { background-color: var(--aihub-primary) !important; }
.aihub-bg-secondary { background-color: var(--aihub-secondary) !important; }
.aihub-bg-success { background-color: var(--aihub-success) !important; }
.aihub-bg-danger { background-color: var(--aihub-danger) !important; }
.aihub-bg-warning { background-color: var(--aihub-warning) !important; }
.aihub-bg-info { background-color: var(--aihub-info) !important; }
.aihub-bg-white { background-color: var(--aihub-white) !important; }
.aihub-bg-light { background-color: var(--aihub-gray-50) !important; }
.aihub-bg-gray { background-color: var(--aihub-gray-100) !important; }

/* 边框工具类 */
.aihub-border { border: 1px solid var(--aihub-gray-200) !important; }
.aihub-border-0 { border: 0 !important; }
.aihub-border-top { border-top: 1px solid var(--aihub-gray-200) !important; }
.aihub-border-bottom { border-bottom: 1px solid var(--aihub-gray-200) !important; }
.aihub-border-left { border-left: 1px solid var(--aihub-gray-200) !important; }
.aihub-border-right { border-right: 1px solid var(--aihub-gray-200) !important; }

/* 圆角工具类 */
.aihub-rounded-0 { border-radius: 0 !important; }
.aihub-rounded-sm { border-radius: var(--aihub-radius-sm) !important; }
.aihub-rounded { border-radius: var(--aihub-radius) !important; }
.aihub-rounded-md { border-radius: var(--aihub-radius-md) !important; }
.aihub-rounded-lg { border-radius: var(--aihub-radius-lg) !important; }
.aihub-rounded-xl { border-radius: var(--aihub-radius-xl) !important; }
.aihub-rounded-full { border-radius: var(--aihub-radius-full) !important; }

/* 阴影工具类 */
.aihub-shadow-none { box-shadow: none !important; }
.aihub-shadow-sm { box-shadow: var(--aihub-shadow-sm) !important; }
.aihub-shadow { box-shadow: var(--aihub-shadow) !important; }
.aihub-shadow-md { box-shadow: var(--aihub-shadow-md) !important; }
.aihub-shadow-lg { box-shadow: var(--aihub-shadow-lg) !important; }
.aihub-shadow-xl { box-shadow: var(--aihub-shadow-xl) !important; }

/* 位置工具类 */
.aihub-position-static { position: static !important; }
.aihub-position-relative { position: relative !important; }
.aihub-position-absolute { position: absolute !important; }
.aihub-position-fixed { position: fixed !important; }
.aihub-position-sticky { position: sticky !important; }

/* 溢出工具类 */
.aihub-overflow-auto { overflow: auto !important; }
.aihub-overflow-hidden { overflow: hidden !important; }
.aihub-overflow-visible { overflow: visible !important; }
.aihub-overflow-scroll { overflow: scroll !important; }

/* 宽度和高度工具类 */
.aihub-w-25 { width: 25% !important; }
.aihub-w-50 { width: 50% !important; }
.aihub-w-75 { width: 75% !important; }
.aihub-w-100 { width: 100% !important; }
.aihub-w-auto { width: auto !important; }

.aihub-h-25 { height: 25% !important; }
.aihub-h-50 { height: 50% !important; }
.aihub-h-75 { height: 75% !important; }
.aihub-h-100 { height: 100% !important; }
.aihub-h-auto { height: auto !important; }

/* 最小高度工具类 */
.aihub-min-vh-100 { min-height: 100vh !important; }