/*
- 开发时间：2026-04-01
- 更新时间：2026-07-23
- 文件作用：cloudPrompt 前端样式表（全页面共享样式：index / tasks / worklist / debug_logs 均引入）
- 实现原理：定义全局系统字体栈（中文优先苹方/微软雅黑，跨平台渲染统一）、页面背景、标题、
            Toast（pointer-events:none 防阻挡点击）、模态对话框通用样式（.modal/.modal-content 等，
            修复 debug_logs.html 未引入 tasks.css/worklist.css 导致详情弹窗缺失基础样式的问题）、
            输入框聚焦态、按钮配色（读取蓝btn-read/存储绿btn-save/撤回橙btn-undo-template/删除红btn-delete，
            hover 反转填充色+transition 平滑过渡）、全局禁止过度滚动和双击缩放；
            首页专属样式（根目录栏/编辑器/容器/页签/按钮组/公共模块/模块管理/分组按钮）已拆分到 style_index.css
            （style.css 满 500 行 P0 上限，模仿 worklist.css 拆分先例）
- 如何调用：由 index.html / tasks.html / worklist.html / debug_logs.html 通过 <link rel="stylesheet" href="style.css"> 引入
- 所属流程：cloudPrompt 前端展示流程
*/

/* ============================================================
   全局基础：系统字体栈
   - 中文优先苹方（macOS/iOS）/微软雅黑（Windows），西文走系统 UI 字体
   - 解决原浏览器默认字体导致的跨平台中文渲染不一致
   ============================================================ */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
}

/* ============================================================
   全局禁止过度滚动和双击缩放（所有页面生效）
   - overscroll-behavior:none：禁止上拉下拉弹性过度滚动效果（iOS/Android）
   - touch-action:manipulation：禁止双击缩放手势（W3C标准，现代浏览器支持）
   - -webkit-touch-callout:none：禁止长按弹出系统菜单（iOS Safari）
   ============================================================ */
html, body {
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* 标题样式：深蓝色、水平居中（美术修正：显式 22px 字号+受控边距，
   原浏览器默认 h1 32px+约 21px 大边距导致各页标题留白失控） */
.title {
    color: #1a237e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 14px 8px 10px;
}

/* ============================================================
   输入框聚焦态（美术修正：原 style.css 输入框聚焦无视觉反馈，
   与 auth.css 登录输入框聚焦样式统一：深蓝边框+浅蓝光晕）
   仅文本类输入框生效，排除 radio/checkbox
   ============================================================ */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #1a237e;
    box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
}

/* Toast 提示样式（美术修正：pointer-events:none 防止显示期间阻挡下方元素点击） */
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1000;
    pointer-events: none;
}
/* Toast 显示状态 */
.toast.show {
    opacity: 1;
}

/* ============================================================
   模态对话框通用样式（tasks / worklist / debug_logs 三页面共享）
   美术 review 修复：此前 .modal 仅在 tasks.css 和 worklist.css 各自定义，
   debug_logs.html 两者均未引入，导致日志详情弹窗无 fixed 定位/无遮罩/无居中，
   渲染为页面底部普通块元素。下沉到 style.css 提供基础样式（所有页面均已引入本文件）。
   tasks.css / worklist.css 保留各自相同定义，层叠顺序在后覆盖本文件，视觉零变化
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.modal-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: bold;
    color: #1a237e;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-close { cursor: pointer; font-size: 20px; color: #999; line-height: 1; }
.modal-close:hover { color: #dc3545; }
.modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* 底部按钮栏：align-items:center 防按钮高度拉伸，flex-wrap:wrap 允许窄屏换行 */
.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================
   按钮配色：读取蓝/存储绿/撤回橙/删除红，区分操作类型避免视觉混淆误操作
   通用 class 不依赖容器，用 button.btn-xxx 选择器（优先级 class+type）
   覆盖各容器默认白底灰边样式；hover 反转填充色，与现有 btn-rename-module/btn-delete-module 风格一致
   美术修正：transition 平滑 hover 变色（原颜色突变生硬）
   ============================================================ */
button.btn-read { border-color: #1976d2; color: #1976d2; background-color: #fff; transition: background-color 0.15s, color 0.15s; }
button.btn-read:hover { background-color: #1976d2; color: #fff; }
button.btn-save { border-color: #28a745; color: #28a745; background-color: #fff; transition: background-color 0.15s, color 0.15s; }
button.btn-save:hover { background-color: #28a745; color: #fff; }
button.btn-undo-template { border-color: #f57c00; color: #f57c00; background-color: #fff; transition: background-color 0.15s, color 0.15s; }
button.btn-undo-template:hover { background-color: #f57c00; color: #fff; }
button.btn-delete { border-color: #dc3545; color: #dc3545; background-color: #fff; transition: background-color 0.15s, color 0.15s; }
button.btn-delete:hover { background-color: #dc3545; color: #fff; }