/**
 * 主题通用样式
 * 
 * 只包含通用的、基础的样式
 * 布局特定的样式应该在 layouts/{layoutType}/{layoutOption}.css 中
 */

/* ========== 基础页面结构 ========== */
.weline-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.weline-main-content {
    flex: 1;
    width: 100%;
    min-height: 80vh;
}

/* ========== 通用工具类 ========== */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 9999;
}

.skip-to-content:focus {
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: var(--color-primary, #0d6efd);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

/* ========== 通用过渡效果 ========== */
* {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

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

/* ========== 通用隐藏类 ========== */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* =============================================
   极细滚动条样式 - 全局应用
   ============================================= */

/* Webkit 浏览器（Chrome, Safari, Edge） */
::-webkit-scrollbar {
    width: var(--scrollbar-width, 4px);
    height: var(--scrollbar-width, 4px);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track, transparent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, #c1c1c1);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #a8a8a8);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox 浏览器 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, #c1c1c1) var(--scrollbar-track, transparent);
}