/**
 * Author: Zhang Di
 * Email: dizflyme@qq.com
 * Date: 2026-08-15
 * LastEditors: Zhang Di
 * LastEditTime: 2026-08-15
 * Description: 全局视觉统一样式 - 对齐旧前端（Quasar + Tailwind）视觉规范。
 * 统一按钮/表格/输入/卡片/弹窗组件样式，供所有页面共用。
 */

/* ========== 设计令牌（对齐旧前端实测） ========== */
:root {
    --primary: #1a42cf;          /* 主色（旧版按钮 rgb(26,66,207)） */
    --primary-hover: #1535a8;    /* 主色 hover */
    --primary-light: #e8edfb;    /* 主色浅底 */
    --success: #21ba45;          /* 成功绿 */
    --danger: #c10015;           /* 危险红（状态徽章） */
    --warning: #f2c037;          /* 警告黄 */
    --info: #31ccec;             /* 信息青 */
    --text-primary: #1c1c1c;     /* 正文色 */
    --text-secondary: #6b7280;   /* 次要文本 gray-500 */
    --border: #e5e7eb;           /* 边框 gray-200 */
    --bg-page: #f9fafb;          /* 页面背景 gray-50 */
    --bg-card: #ffffff;          /* 卡片白 */
    --radius: 4px;               /* 圆角（旧版按钮） */
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* 覆盖 Quasar 默认主题色（对齐旧版 ui.colors(primary="#1a42cf")）。
       旧版在 main.py 调 ui.colors 写 --q-primary；静态前端须在 CSS 层覆盖。 */
    --q-primary: #1a42cf;

    /* 认证内容区高度（洞察等全屏卡片页）：视口 − header(64px) − 顶部间隔(12px) − 底部留白(20px)。
       调整底部留白只需改此变量，页面模板统一用 var(--content-height) */
    --content-height: calc(100vh - 96px);
}

/* 全屏工作台高度（洞察等全屏卡片页）：由 base 认证区的 content_height block 分发，
   页面勿再写内联 height；普通文档流页面不引用此类 */
.content-height {
    height: var(--content-height);
}

/* 普通文档流页最小高度：屏幕 − header(64) − 间隔(12) − 底部间隔(20)。
   由 base 认证区 content_height block 默认分发；勿用 Tailwind 任意值（CDN 解析不可靠） */
.page-min-h {
    min-height: calc(100vh - 96px);
}

body {
    font-family: var(--font);
    background-color: var(--bg-page);
    color: var(--text-primary);
}

/* ========== Alpine x-cloak（防 x-show 元素初始化前闪现） ========== */
[x-cloak] {
    display: none !important;
}

/* ========== 左侧抽屉：覆盖 Quasar 默认隐藏 transform ==========
 * 旧版由 Quasar Vue 组件在打开时写 inline `transform: translateX(0)`；
 * 静态 HTML 永远命中 `.q-drawer--left{transform:translateX(-100%)}` 隐藏态。
 * 此处用 x-show="auth" 控制显隐，transform 固定为 none 即可。 */
aside.q-drawer--left {
    transform: none !important;
}

/* ========== 统一卡片（对齐 q-card） ========== */
.hm-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* ========== 统一按钮 ========== */
.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 28px;
    height: 36px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.hm-btn-primary {
    background: var(--primary);
    color: #fff;
}
.hm-btn-primary:hover { background: var(--primary-hover); }
.hm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.hm-btn-flat {
    background: transparent;
    color: var(--primary);
}
.hm-btn-flat:hover { background: var(--primary-light); }

.hm-btn-text {
    background: transparent;
    color: var(--primary);
    padding: 2px 4px;
    height: auto;
}
.hm-btn-text:hover { text-decoration: underline; }

.hm-btn-danger {
    background: transparent;
    color: var(--danger);
}
.hm-btn-danger:hover { background: #fee2e2; }

/* ========== 统一输入框（对齐 Quasar underlined） ========== */
.hm-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}
.hm-input:focus {
    border-bottom-color: var(--primary);
}
.hm-input::placeholder {
    color: var(--text-secondary);
}

.hm-input-outlined {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.hm-input-outlined:focus {
    border-color: var(--primary);
}

/* ========== 统一表格（对齐 q-table） ========== */
/* 覆盖 Quasar 默认表头，对齐旧前端 bg-[#FAFAFA] text-[#595959] */
.q-table thead th {
    background-color: #FAFAFA !important;
    color: #595959 !important;
}
.q-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}
.q-table tbody tr:hover {
    background-color: #fafafa;
}

.hm-table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}
.hm-table thead th {
    text-align: left;
    font-weight: 400;
    color: var(--text-secondary);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.hm-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.hm-table tbody tr:hover {
    background: #f9fafb;
}

/* ========== 统一徽章（对齐 q-badge） ========== */
.hm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
.hm-badge-green { background: #dcfce7; color: #166534; }
.hm-badge-red { background: #fee2e2; color: #991b1b; }
.hm-badge-blue { background: #dbeafe; color: #1e40af; }
.hm-badge-gray { background: #f3f4f6; color: #374151; }
.hm-badge-cyan { background: #cffafe; color: #155e75; }
.hm-badge-purple { background: #f3e8ff; color: #6b21a8; }
.hm-badge-orange { background: #ffedd5; color: #9a3412; }
.hm-badge-teal { background: #ccfbf1; color: #115e59; }

/* ========== 统一弹窗（对齐 q-dialog） ========== */
.hm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-dialog {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
    max-width: 90vw;
}

/* ========== 统一标签页（对齐 q-tabs） ========== */
.hm-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
}
.hm-tab {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.hm-tab:hover { color: var(--text-primary); }
.hm-tab-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 500;
}

/* ========== 法律文档 markdown 渲染（注册页协议/隐私弹窗） ========== */
.legal-markdown h1,
.legal-markdown h2,
.legal-markdown h3 {
    font-weight: 600;
    margin: 12px 0 6px;
    font-size: 1.05em;
    line-height: 1.4;
}
.legal-markdown p {
    margin: 6px 0;
    line-height: 1.6;
}
.legal-markdown ul,
.legal-markdown ol {
    margin: 6px 0;
    padding-left: 20px;
}
.legal-markdown li {
    margin: 3px 0;
    line-height: 1.6;
}
.legal-markdown strong {
    font-weight: 600;
}
.legal-markdown hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

/* ========== 系统公告滚动横幅（对齐旧版 component_system_notice.py） ========== */
.system-notice {
    position: fixed;
    top: 0;
    left: 75px;   /* 左侧导航栏（抽屉 75px）后方开始 */
    right: 0;
    width: auto;
    height: 24px;
    background-color: #E6F7FF;
    z-index: 50;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.system-notice__text {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    padding: 2px 16px;
    color: #0050B3;
    font-size: 12px;
    line-height: 20px;
}

/* ========== 开关（对齐旧版 q-toggle 视觉，只读展示用） ========== */
.hm-toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    cursor: not-allowed;
}
.hm-toggle__track {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: #c8c8c8;
    flex-shrink: 0;
}
.hm-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.2s;
}
.hm-toggle--checked .hm-toggle__track {
    background: var(--q-primary, #1a42cf);
}
.hm-toggle--checked .hm-toggle__thumb {
    left: 18px;
}
.hm-toggle--sm .hm-toggle__track {
    width: 28px;
    height: 16px;
    border-radius: 8px;
}
.hm-toggle--sm .hm-toggle__thumb {
    width: 12px;
    height: 12px;
}
.hm-toggle--sm.hm-toggle--checked .hm-toggle__thumb {
    left: 14px;
}
.hm-toggle__label {
    padding-left: 8px;
}

/* ========== 任务表格 cell（对齐旧版 page_home.add-custom-table-styles） ==========
   ⚠️ table 同时含 q-table + add-custom-table-styles（同一元素），
   选择器必须用 .add-custom-table-styles.q-table（无空格=同元素），
   用空格会变成"后代关系"导致不匹配。 */
.add-custom-table-styles.q-table tbody td {
    padding: 4px 16px !important;
    height: auto !important;
    /* 行分割线（旧版实际渲染为 rgba(0,0,0,.12)，Quasar 默认行边框；
       border-collapse:separate 下 tr 边框不显示，故加在 td 上） */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.add-custom-table-styles.q-table thead th {
    padding: 8px 16px !important;
    /* 表头下方分隔线（与行分割线同色） */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* ========== 消息中心通知项（项间分割线：gray-300 明显可辨，末项自然无边框） ========== */
.msg-item + .msg-item,
.ntf-item + .ntf-item {
    border-top: 1px solid #d1d5db;
}

/* ========== 表格国旗（对齐旧版 flag_icon slot：img 16x12）
   ⚠️ flags/*.svg 无 width/height 固有属性，Tailwind Preflight 的
   img{max-width:100%} 会把无固有尺寸的 SVG 压成 0，须 !important 强制尺寸。 */
.add-custom-table-styles.q-table tbody td img {
    width: 16px !important;
    height: 12px !important;
    max-width: 16px !important;
    object-fit: cover;
}

/* ========== 两行截断（对齐旧版 page_raw.py 的 .ellipsis-2-lines，用于表格标题/内容/用户列） ========== */
.ellipsis-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-height: 2.6em;
}

/* ========== Tab 激活态标注（精简 Quasar CSS 的 .q-tab--active 仅 box-shadow 模糊投影，视觉脏且不明显。
   完全覆盖为：主色文字 + 底部 2px 主色指示条（inset box-shadow 不占布局），对齐 Quasar 标准激活样式。
   Header 洞察导航与 sentiment 页面内 负面/正面 Tab 均走 q-tab--active class，此处统一生效） ========== */
.q-tab--active {
    color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
}
.q-tab--active .q-tab__label {
    font-weight: 600;
}