/* ============================================================
   落叶云平台 · 全局设计系统 (console.css)
   ------------------------------------------------------------
   设计语言：直角 / 扁平 / 高对比 / 移动端优先
   - 除「用户头像」外，所有元素统一直角（border-radius: 0）
   - 统一设计变量（colors / spacing / shadows / layout）
   - 全局移动端安全网（防横向溢出、触控尺寸、安全区、表单缩放）
   - 该文件由 header.php 以及各独立页面统一引入
   ============================================================ */

/* ------------------------------------------------------------
   1. 设计变量 Design Tokens
   ------------------------------------------------------------ */
:root {
    /* 品牌色 */
    --primary: #165dff;
    --primary-color: #165dff;
    --primary-dark: #0e42d2;
    --primary-hover: #0e42d2;
    --primary-light: #e8f3ff;
    --primary-soft: #f2f7ff;

    /* 语义色 */
    --success: #16a34a;
    --success-color: #16a34a;
    --warning: #ea580c;
    --warning-color: #ea580c;
    --danger: #dc2626;
    --danger-color: #dc2626;
    --info: #165dff;
    --info-color: #165dff;

    /* 文字 */
    --text-main: #1d2129;
    --text-primary: #1d2129;
    --text-2: #4e5969;
    --text-secondary: #4e5969;
    --text-muted: #86909c;
    --text-light: #a9aeb8;
    --text-disabled: #c9cdd4;
    --text-color: #1d2129;

    /* 背景 / 描边 */
    --bg-page: #f5f6f8;
    --bg-color: #f5f6f8;
    --bg-card: #ffffff;
    --card-bg: #ffffff;
    --card: #ffffff;
    --border: #e5e6eb;
    --border-color: #e5e6eb;
    --line: #f2f3f5;
    --muted: #86909c;
    --soft: #f7f8fa;

    /* 圆角：全局直角，仅头像例外（见第 4 节） */
    --radius: 0px;
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xs: 0px;
    --radius-full: 0px;
    --border-radius: 0px;
    --border-radius-sm: 0px;

    /* 阴影：直角风格下使用更克制的描边式阴影 */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow: 0 2px 8px rgba(15, 23, 42, .06);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 36px rgba(15, 23, 42, .12);
    --shadow-hover: 0 8px 24px rgba(15, 23, 42, .10);

    /* 动效 */
    --transition: 160ms cubic-bezier(.4, 0, .2, 1);

    /* 布局 */
    --topbar-height: 56px;
    --topbar-height-mobile: 52px;
    --sidebar-width: 216px;

    /* 移动端安全区 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --page-gutter: 24px;
}

/* ------------------------------------------------------------
   2. 基础重置 Base
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* 媒体元素不撑破容器 */
img,
picture,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

svg {
    vertical-align: middle;
}

/* 长文本 / 代码不撑破布局 */
pre {
    max-width: 100%;
    overflow-x: auto;
}

code,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

a {
    color: var(--primary);
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* 统一焦点可见样式（键盘可达性） */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 更细、更统一的滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: #c9cdd4 transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: #c9cdd4;
    border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
    background: #a9aeb8;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------
   3. 全局直角：所有元素强制 0 圆角
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* 原生控件内部按钮（如文件选择）同样直角 */
input[type="file"]::file-selector-button,
::-webkit-file-upload-button {
    border-radius: 0 !important;
}

progress,
meter {
    border-radius: 0 !important;
}

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
    border-radius: 0 !important;
}

/* ------------------------------------------------------------
   4. 例外：用户头像保持圆形
   ------------------------------------------------------------ */

/* 头像容器与头像图片 */
.avatar,
.user-avatar,
.avatar-img,
.profile-avatar,
.ux-avatar,
.msg-avatar,
.msg-avatar-wrap,
.rk-avatar,
.iv-avatar,
.online-avatar,
.comment-avatar,
.uploader-avatar,
.ss-card-avatar,
.sv-author-avatar,
.sv-comment-avatar,
.avatar-preview,
.avatar-preview img,
.topic-avatar,
.reply-avatar,
.author-avatar,
.fb-avatar,
.feedback-avatar,
.notification-avatar,
img.avatar,
img.avatar-img,
img.user-avatar,
img[src*="qlogo.cn"],
[data-avatar] img,
.msger-avatar,
.chat-avatar,
.im-avatar,
.member-avatar {
    border-radius: 50% !important;
}

/* 头像容器内的图片同样保持圆形 */
.msg-avatar-wrap img,
.ux-avatar img,
.ss-card-avatar img,
.sv-author-avatar img,
.sv-comment-avatar img,
.comment-avatar img,
.uploader-avatar img,
.rk-avatar img,
.iv-avatar img,
.online-avatar img,
.avatar img {
    border-radius: 50% !important;
}

/* 头像周围的装饰描边保持直角，避免出现「圆角容器」 */
.ux-avatar,
.msg-avatar,
.rk-avatar,
.iv-avatar,
.ss-card-avatar,
.sv-author-avatar,
.sv-comment-avatar {
    overflow: hidden;
}

/* ------------------------------------------------------------
   5. 触控与可读性 · 全局移动端安全网
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* iOS 聚焦缩放：表单控件字号不小于 16px */
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 表单控件不撑破容器 */
    input,
    select,
    textarea {
        max-width: 100%;
    }

    /* 表格：横向可滚动，避免撑破页面 */
    .table-wrap,
    .table-responsive,
    .fm-table-wrap,
    .ep-table-wrap,
    .pf-table-wrap,
    .ux-table-wrap,
    .scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 长内容区域允许横向滚动而不是溢出页面 */
    .main-container {
        padding-left: max(var(--page-gutter), var(--safe-left));
        padding-right: max(var(--page-gutter), var(--safe-right));
    }

    /* 弹层不超出视口 */
    [class*="dropdown"],
    [class*="popover"],
    [class*="tooltip"] {
        max-width: calc(100vw - 24px);
    }

    /* 模态框在移动端占满可用高度并可滚动 */
    .modal,
    .modal-content,
    .modal-dialog,
    [class*="modal-content"],
    [class*="modal-box"] {
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }

    /* 底部操作栏避开安全区 */
    .mobile-bottom-bar,
    .action-bar,
    .page-actions {
        padding-bottom: max(12px, var(--safe-bottom));
    }
}

/* 窄屏：更紧凑的页面留白 */
@media (max-width: 480px) {
    :root {
        --page-gutter: 16px;
    }
}

@media (max-width: 360px) {
    :root {
        --page-gutter: 12px;
    }
}

/* ------------------------------------------------------------
   6. 顶栏 / 侧边栏（全站页面共用）移动端增强
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* 侧边栏抽屉宽度适配窄屏，禁止整屏遮挡 */
    .sidebar {
        width: min(84vw, 320px) !important;
        padding-bottom: calc(24px + var(--safe-bottom));
        overscroll-behavior: contain;
    }

    /* 抽屉打开时锁定背景滚动（配合 body 上的类） */
    body.sidebar-open,
    body.nav-open,
    body.menu-open {
        overflow: hidden;
    }

    /* 顶栏项目之间留出更舒适的点击区域 */
    .nav-item {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav-group {
        margin-bottom: 14px;
    }

    /* 通知下拉：贴边显示，不超出屏幕 */
    .notifications-dropdown {
        left: max(8px, var(--safe-left)) !important;
        right: max(8px, var(--safe-right)) !important;
        width: auto !important;
        max-width: none !important;
    }

    .notifications-list {
        max-height: min(60dvh, 420px);
    }

    /* 移动搜索模态：适配刘海屏与安全区 */
    .mobile-search-modal {
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }
}

/* ------------------------------------------------------------
   7. 通用组件移动端兜底
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* 卡片间距收紧 */
    .card,
    .panel,
    .section-card,
    .box {
        max-width: 100%;
    }

    /* 多列按钮组在窄屏自动换行 */
    .btn-group,
    .actions,
    .action-row {
        flex-wrap: wrap;
    }

    /* 分页组件可换行 */
    .pagination,
    .pager {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* 主要按钮保证可点击高度 */
    .btn,
    button.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 38px;
    }

    /* 标签 / 筛选容器换行，避免被裁切 */
    .category-filter,
    .filter-tabs,
    .filter-bar,
    .chips,
    .tag-list {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 标签页可横向滚动 */
    .tabs,
    .tab-list,
    .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar,
    .tab-list::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }
}

/* ------------------------------------------------------------
   8. 动画偏好
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   9. 打印
   ------------------------------------------------------------ */
@media print {
    .top-bar,
    .sidebar,
    .mobile-overlay,
    .no-print {
        display: none !important;
    }

    .main-container {
        margin: 0 !important;
        padding: 0 !important;
    }
}