/**
 * 工具类
 * 三端共用
 */

/* ========== 显示/隐藏 ========== */
.hidden { display: none !important; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

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

/* ========== 定位 ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* ========== 层级 ========== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ========== 指针事件 ========== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-move { cursor: move; }

/* ========== 用户选择 ========== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ========== 文字截断 ========== */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== 文字装饰 ========== */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-through { text-decoration: line-through; }

/* ========== 文字转换 ========== */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ========== 空格 ========== */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ========== 边框 ========== */
.border { border: 1px solid var(--color-border); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }

.border-primary { border-color: var(--color-primary); }
.border-success { border-color: var(--color-success); }
.border-warning { border-color: var(--color-warning); }
.border-danger { border-color: var(--color-danger); }

/* ========== 背景图片 ========== */
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-center { background-position: center; }
.bg-top { background-position: top; }
.bg-bottom { background-position: bottom; }
.bg-no-repeat { background-repeat: no-repeat; }

/* ========== 渐变 ========== */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.gradient-success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-light));
}

.gradient-dark {
    background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
}

/* ========== 纵横比 ========== */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }

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

/* ========== 响应式隐藏 ========== */
@media (max-width: 576px) {
    .hide-xs { display: none !important; }
}

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

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

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

@media (min-width: 1201px) {
    .hide-xl { display: none !important; }
}

/* ========== 打印样式 ========== */
@media print {
    .print-hidden { display: none !important; }
    .print-only { display: block !important; }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ========== 焦点样式 ========== */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* ========== 禁用状态 ========== */
.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ========== 只读状态 ========== */
.readonly {
    pointer-events: none;
}

/* ========== 空状态 ========== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-base);
    opacity: 0.5;
}

.empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.empty-state-desc {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
}

/* ========== 主题切换按钮 ========== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: all var(--transition-base);
}

.theme-toggle .icon-sun {
    color: var(--color-warning);
}

.theme-toggle .icon-moon {
    color: var(--color-info-light);
}

/* 主题切换按钮 - 小尺寸 */
.theme-toggle-sm {
    width: 32px;
    height: 32px;
}

.theme-toggle-sm svg {
    width: 16px;
    height: 16px;
}

/* 主题切换按钮 - 大尺寸 */
.theme-toggle-lg {
    width: 48px;
    height: 48px;
}

.theme-toggle-lg svg {
    width: 24px;
    height: 24px;
}

/* 主题切换按钮 - 圆形 */
.theme-toggle-circle {
    border-radius: 50%;
}

/* 主题切换按钮 - 带边框 */
.theme-toggle-bordered {
    border: 1px solid var(--color-border);
    background: transparent;
}

.theme-toggle-bordered:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

/* 主题切换按钮 - 带文字 */
.theme-toggle-with-text {
    width: auto;
    padding: var(--spacing-sm) var(--spacing-base);
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}