/* TimeKeeper Dashboard Styles */

/* 全站浅色莫兰迪（暖调）。色值与 tailwind.config.js tklight 主题同值双写，
   改动时两处必须同步（daisyUI 主题要求字面量值） */
:root {
    --primary: #5A7688;        /* 暖灰蓝主色 */
    --primary-dark: #4C6373;   /* primary hover/active */
    --success: #52684A;        /* 暖豆沙绿 */
    --warning: #7D6740;        /* 驼色 */
    --danger: #8C4F45;         /* 暖砖红 */
    --info: #4A6278;           /* 暖雾蓝 */
    --success-bg: #E8EEE2;
    --danger-bg: #F4E3DC;
    --warning-bg: #F5EDDB;
    --info-bg: #E2E9EE;
    --chart-track: #E6E0D6;    /* 环图轨道 */
    --bg: #F2EDE6;             /* 页面背景（暖米灰） */
    --bg-card: #FBF8F3;        /* 卡片/顶栏/侧栏（暖白） */
    --text: #3A3833;           /* 主文字（暖深灰褐） */
    --text-secondary: #6E6659; /* 次级文字（暖灰褐） */
    --border: #E3DBD0;         /* 边框（暖灰） */
    --sidebar-width: 240px;
    --topbar-height: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Login */
.login-container {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; background: linear-gradient(135deg, #7A93A6, #A3AD8F);
}
.login-card {
    background: var(--bg-card); border-radius: 16px; padding: 40px;
    width: 380px; box-shadow: 0 16px 48px rgba(47,58,76,0.18);
}
.login-header { text-align: center; margin-bottom: 30px; }
.login-header i { font-size: 48px; color: var(--primary); }
.login-header h1 { font-size: 28px; margin-top: 10px; }
.login-header p { color: var(--text-secondary); margin-top: 5px; }

/* 微信扫码登录区（多租户 2026-08：状态行置顶醒目 + 二维码居中） */
.qr-login {
    text-align: center;
    margin-bottom: 8px;
}

/* 扫码引导页步骤列表（/qr/{state}，微信扫一扫落点） */
.guide-steps {
    text-align: left;
    margin: 16px 0;
    padding-left: 20px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-status {
    margin: 12px 0 4px;
    font-weight: 600; /* 状态行醒目，不易被忽视 */
    color: var(--text-secondary);
}

.qr-box {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
    min-height: 160px; /* 渲染前占位，防布局跳动 */
}

/* 登录页双二维码 Tab（登录 / 创建家庭），莫兰迪风格与 .login-card 一致 */
.qr-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    margin-bottom: 20px;
    background: var(--bg);
    border-radius: 10px;
}
.qr-tab {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.qr-tab:hover { color: var(--text); }
.qr-tab.active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(47, 58, 76, 0.1);
}
.qr-panel { display: none; }
.qr-panel.active { display: block; }

.qr-state {
    font-size: 13px;
    margin-bottom: 8px;
}

/* 演示账号入口（低调文字链接，次要视觉权重） */
.demo-entry {
    text-align: center;
    margin-top: 14px;
}
.demo-entry a { color: var(--text-secondary); }

/* Top Bar */
.topbar {
    height: var(--topbar-height); background: var(--bg-card); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-left i { font-size: 24px; color: var(--primary); }
.topbar-right { display: flex; align-items: center; gap: 15px; }

/* Layout */
.layout { display: flex; margin-top: var(--topbar-height); min-height: calc(100vh - var(--topbar-height)); }
.sidebar {
    width: var(--sidebar-width); background: var(--bg-card);
    border-right: 1px solid var(--border); padding: 15px 0;
    position: fixed; top: var(--topbar-height); left: 0; bottom: 0; overflow-y: auto;
}
.main-content { margin-left: var(--sidebar-width); flex: 1; padding: 24px; }

/* Device Select */
.device-select-section { padding: 0 15px 15px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.device-select-section h3 { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.device-select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: var(--bg-card); cursor: pointer;
    appearance: auto;
}
.device-select option { padding: 8px; }

/* Nav Menu（拆分后 nav-item 为 <a> 链接：补 text-decoration/line-height 消除下划线） */
.nav-menu { padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: none; background: none; width: 100%;
    text-align: left; font-size: 14px; border-radius: 8px; cursor: pointer;
    color: var(--text); transition: all 0.2s; position: relative;
    text-decoration: none; line-height: 1.4;
}
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--primary); color: white; }

/* 注：旧的 .badge 计数徽标规则已删除——类名与 daisyUI badge 组件冲突
   （style.css 加载在后，未分层规则优先级高于 utilities，会把所有 daisyUI badge 刷成红色） */

/* Sections（页面拆分后 section 显隐已退役，页标题样式改为 shell 主区通用） */
.main-content h2 { font-size: 20px; margin-bottom: 20px; }

/* Cards（已迁移 daisyUI card 组件，见 #section-dashboard .card 与 #section-admin .card scoped 覆盖） */

/* Status Badge（settings/overview 设备状态徽标；status-list/status-item/status-active/status-warning 等旧布局规则已无引用删除） */
.status-badge {
    padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;
}
.status-online { background: var(--success-bg); color: var(--success); }
/* 离线改琥珀色（UI 审计 2026-08-19）：关机即离线是常态，红色系造成不必要焦虑 */
.status-offline { background: var(--warning-bg); color: var(--warning); }

/* Forms */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
input[type="text"]:not(.input), input[type="password"]:not(.input), input[type="number"]:not(.input), input[type="time"]:not(.input), textarea, select {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; font-family: inherit; transition: border-color 0.2s;
}
input:not(.input):focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(85,114,145,0.18); }
textarea { resize: vertical; min-height: 60px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }

/* Buttons（已迁移 daisyUI btn 体系） */

/* Messages */
.error-message { color: var(--danger); font-size: 13px; margin-bottom: 10px; padding: 8px; background: var(--danger-bg); border-radius: 6px; }
.success-message { color: var(--success); font-size: 13px; margin-top: 10px; padding: 8px; background: var(--success-bg); border-radius: 6px; }

/* Modals */
.modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;
    /* daisyUI .modal 组件默认 opacity:0 / pointer-events:none（供 :checked/:target 模式），
       本项目用 JS 切 display 显隐，此处显式覆盖，避免弹窗打开后不可见不可点 */
    opacity: 1; pointer-events: auto;
    /* 弹窗过渡（UI 审计 2026-08-19）：180ms fade + pop，避免 display 直出生硬 */
    animation: tk-fade-in .18s ease;
}
@keyframes tk-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-content { background: var(--bg-card); border-radius: 16px; padding: 30px; width: 450px; max-width: 90%; animation: tk-pop-in .18s ease; }
@keyframes tk-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.modal-sm { width: 380px; }
.modal-content h2, .modal-content h3 { margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

/* 帮助弹层（2026-08-21 对齐小程序 help-sheet：步骤式导览 + 两段式说明） */
.hs-item { margin-bottom: 14px; }
.hs-item-name { font-weight: 600; margin-bottom: 4px; color: var(--text); }
.hs-sec { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.hs-sec-label { color: var(--primary); font-weight: 600; margin-right: 4px; }
.tk-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--border); color: var(--text-secondary);
    font-size: 11px; font-weight: 700; cursor: pointer; user-select: none;
    line-height: 1; margin-left: 6px; flex-shrink: 0; vertical-align: middle;
}
.tk-help-icon:hover { border-color: var(--primary); color: var(--primary); background: var(--info-bg); }
.tk-help-icon-lg { width: 20px; height: 20px; font-size: 13px; }

/* 策略页（2026-08-21 对齐小程序重构） */
.panel-tip { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.6; }
/* 可访问性基线（UI 审计 2026-08-22 L2）：键盘聚焦可见性，全局统一主色描边 */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* 看板状态 stat 主次分级（UI 审计 2026-08-22 M2）：在线绿底/离线警示底/失败灰底，突出核心状态 */
#ssStatusStat.stat-bg-on { background: oklch(var(--su)/.10); }
#ssStatusStat.stat-bg-off { background: oklch(var(--wa)/.10); }
#ssStatusStat.stat-bg-fail { background: oklch(var(--bc)/.08); }

.policy-save-bar {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    padding: 8px 18px; border-radius: 999px; font-size: 13px; z-index: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,.15); white-space: nowrap;
}
.policy-save-bar.save-saving { background: var(--info-bg); color: var(--info); }
.policy-save-bar.save-saved { background: var(--success-bg); color: var(--success); }
.policy-save-bar.save-error { background: var(--danger-bg); color: var(--danger); cursor: pointer; }
.policy-save-bar.save-demo { background: var(--warning-bg); color: var(--warning); }
.day-wrap { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; background: var(--bg-card); }
.day-wrap.active { border-color: var(--primary); }
.day-row {
    display: flex; align-items: center; padding: 8px 12px; cursor: pointer; font-size: 13px;
    gap: 10px;
}
.day-name { font-weight: 600; }
.day-summary { color: var(--text-secondary); font-size: 12px; flex: 1; }
.day-arrow { color: var(--text-secondary); font-size: 11px; }
.day-edit { border-top: 1px dashed var(--border); padding: 10px 12px; }

/* Abnormal List（已迁移 daisyUI table + badge，事件类型标签颜色由 badgeCls 映射提供） */
.filter-bar { margin-bottom: 15px; }
.filter-bar select { width: 160px; }

/* Empty State */
.empty-state { text-align: center; padding: 30px; color: var(--text-secondary); font-size: 14px; }

/* 3-column compact dashboard */
.dashboard-3col { display:flex; gap:12px; align-items:stretch; }

/* Dash cards（外层已迁移 daisyUI card，仅保留内部结构类） */
/* 页面拆分后 section id 已不存在，scoped 覆盖改为 shell 主区通用（看板/策略/家庭/设备卡均适用）：
   撤销旧 .card 白底/overflow 对 bg-base-200 的覆盖，文字用主题色（daisyUI 主题变量为 oklch 分量，须 oklch() 包装，裸 var() 会被判无效） */
.main-content .card { background: var(--fallback-b2, oklch(var(--b2)/1)); border-radius: var(--rounded-box, 1rem); overflow: visible; color: var(--fallback-bc, oklch(var(--bc)/1)); }
.ring-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.ring-stats { text-align:center; }
.ring-total { font-size:16px; font-weight:700; }
/* 浅色卡片内次级文字：直接使用全局次级色（全站浅色莫兰迪后 --text-secondary 对比度已足） */
.ring-remaining { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.ring-note { font-size:11px; color:var(--text-secondary); min-height:16px; }
.info-card { display:flex; flex-direction:column; gap:6px; }
.info-line { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:4px 0; border-bottom:1px solid var(--border); }
.info-line:last-child { border-bottom:none; }
/* 只读展示行（家庭设置卡：只读文本 + ✎ 编辑图标，2026-08-22 弹窗化改造） */
.readonly-line { display:flex; align-items:center; gap:8px; min-height:38px; }
.readonly-value { font-size:14px; color:var(--text); word-break:break-word; }
.log-card { margin-top:12px; }
.log-header { font-size:14px; font-weight:600; margin-bottom:8px; }
.log-list { display:flex; flex-direction:column; gap:4px; }

/* Sliders */
.slider-item label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:2px; }
.slider-row { display:flex; align-items:center; gap:8px; }
/* 滑块本体已迁移 daisyUI range range-primary（主题色 --range-shdw 由组件提供），此处仅布局 */
.tk-range { flex:1; }
.slider-val { min-width:30px; text-align:right; font-weight:700; font-size:14px; color:var(--fallback-p, oklch(var(--p)/1)); }
.slider-confirm { font-size:16px; color:var(--success); opacity:0; transition:opacity 0.3s; min-width:20px; }
.slider-confirm.show { opacity:1; }

/* ── Command Center (2026-08 refactor) ── */

/* Status dot（看板 stats 组件内联使用） */
.ss-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ss-dot.on { background: var(--success); }
.ss-dot.off { background: var(--warning); }

/* Action bar: one-click interventions（按钮本体已迁移 daisyUI btn 体系） */
.action-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 16px; margin-bottom: 14px;
}

/* Rule accordion (Rules page)：容器已迁移 daisyUI collapse，
   toggleRuleGroup 切换 .open class（daisyUI 以 .collapse-open 为展开态），此处为兼容层 */
.rule-accordion { display: flex; flex-direction: column; gap: 12px; }

/* Device cards (Devices page)：卡片本体已迁移 daisyUI card + badge，此处仅内部布局 */
.device-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.device-card .dc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.device-card .dc-name { font-weight: 700; font-size: 15px; cursor: pointer; }  /* 点设备名内联改名（S5） */
.device-card .dc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 设备卡操作链接（2026-08-22 去掉「更多」下拉后平铺） */
.device-card .dc-actions .dc-link { font-size: 12px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.device-card .dc-actions .dc-link:hover { color: inherit; text-decoration: underline; }
/* 解绑：破坏性操作用深红（--erc，而非浅粉的 --er），对比度足 */
.device-card .dc-actions .dc-link.dc-danger { color: var(--erc); }
.device-card .dc-actions .dc-link.dc-danger:hover { text-decoration: underline; }

/* Toast (non-alert feedback)：全站浅色后改浅底深字 + 边框（语义色左边框由 .tk-toast.success/.error 提供） */
.tk-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
    background: var(--bg-card); color: var(--text); padding: 12px 18px; border-radius: 10px;
    font-size: 13px; border: 1px solid var(--border);
    box-shadow: 0 6px 20px rgba(47,58,76,0.16);
    opacity: 0; transform: translateY(12px); transition: all 0.25s; max-width: 360px;
}
.tk-toast.show { opacity: 1; transform: translateY(0); }

/* 移动端底部导航：daisyUI .btm-nav 组件（position:fixed bottom / height:4rem / space-around / b1 底）
   已由构建链生成，.md:hidden 桌面隐藏；此处仅补 z-index 悬浮层 + 文字色 + 顶部边框分隔 */
#mobileNav { z-index: 50; color: var(--fallback-bc, oklch(var(--bc)/1)); border-top: 1px solid var(--border); }
#mobileNav a { text-decoration: none; color: inherit; }
#mobileNav a.active { color: var(--fallback-p, oklch(var(--p)/1)); }

/* 移动端设备切换条（默认隐藏，≤768px 显示） */
.mobile-device-bar { display: none; }

/* 操作条小屏图标为主：隐藏文字标签（≤480px） */
@media (max-width: 480px) {
    .action-bar .act-label { display: none; }
}

/* 顶栏小屏收缩：隐藏标题与文字标签，只留图标（≥5 个元素挤 60px 顶栏会溢出） */
@media (max-width: 768px) {
    .topbar-left h2 { display: none; }
    .topbar-label { display: none; }
    .topbar-right { gap: 8px; }
}

/* 手机导航收敛（UI 审计 2026-08-22 M1）：<640px 隐藏侧栏图标条，导航只留
   顶栏图标 + sticky 设备条 + 底部导航（对齐小程序无侧栏体验）；
   60px 图标条仅保留在 640-768 平板区间 */
@media (max-width: 640px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar { width: 60px; }
    .sidebar h3, .nav-item span { display: none; }
    /* 底部导航遮挡留白：btm-nav 高 4rem（64px），主内容底部预留同量空间 */
    .main-content { margin-left: 60px; padding-bottom: 64px; }
    .form-row { grid-template-columns: 1fr; }
    .dashboard-3col { flex-direction: column; }
    .device-cards { grid-template-columns: 1fr; }
    .device-select-section { display: none; }
    /* 顶部设备切换条：主内容上方全宽下拉，替代被隐藏的侧栏 select */
    .mobile-device-bar {
        display: block; padding: 10px 12px; background: var(--bg-card);
        border-bottom: 1px solid var(--border); position: sticky; top: var(--topbar-height); z-index: 50;
    }
    .mobile-device-bar select {
        width: 100%; padding: 8px 10px; font-size: 14px;
        border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
    }
    /* 触屏目标放大（UI 审计 2026-08-19 起）：btn-sm 约 32px < 44px 基线，小屏下提到 44px（2026-08-22 L2） */
    .dc-actions .btn, .action-bar .btn { min-height: 44px; }
    /* 策略保存条避让底导（UI 审计 2026-08-22）：btm-nav 高 4rem（64px），fixed bottom:24px 会被其遮挡，提升至其上方 */
    .policy-save-bar { bottom: 80px; }
}

/* ===== 命令中心兼容层（与 dashboard.html 内联类的类名对齐） ===== */

/* 规则页 collapse 兼容：toggleRuleGroup 切换 .open class，daisyUI 以 .collapse-open 为展开态，
   此处将 .open 映射为等效展开态（grid-rows 机制 + 箭头旋转），JS 交互逻辑零改动 */
.rule-group-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px; cursor: pointer; user-select: none; font-weight: 600; font-size: 14px;
}
.rule-group-head:hover { background: var(--fallback-b3, oklch(var(--b3)/1)); }
.collapse.open { grid-template-rows: max-content 1fr; }
.collapse.open > .collapse-content { visibility: visible; min-height: fit-content; }
.collapse.open.collapse-arrow > .collapse-title:after { --tw-translate-y: -50%; --tw-rotate: 225deg; }

/* 管理页 Tabs：面板显隐（Task 2 JS 切换 active class，仅补样式规则） */
.admin-panel { display: none; }
.admin-panel.active { display: block; }
/* 管理页 Tabs 激活态兼容：Task 2 JS 切换 .active，daisyUI 以 .tab-active 为激活态（primary 底 + pc 文字），此处映射 */
.tabs-boxed .tab.active {
    --tw-bg-opacity: 1; background-color: var(--fallback-p, oklch(var(--p)/var(--tw-bg-opacity)));
    --tw-text-opacity: 1; color: var(--fallback-pc, oklch(var(--pc)/var(--tw-text-opacity)));
}

/* 管理页 daisyUI 卡片（拆分后并入 .main-content .card 通用规则）；input 补色改为主区通用 */
/* daisyUI input 组件不设文字色（继承 body 深色），深色卡片上须显式补色 */
.main-content .input { color: var(--fallback-bc, oklch(var(--bc)/1)); }

.device-card.current { border: 2px solid var(--primary); }
.device-card .dc-sub { font-size: 12px; margin-bottom: 8px; opacity: .75; }
.tk-toast.hide { opacity: 0; transform: translateY(12px); }
.tk-toast.success { border-left: 4px solid var(--success); }
.tk-toast.error { border-left: 4px solid var(--danger); }

/* ===== UI 审计 2026-08-19 抽类 ===== */

/* 激活码表格（family.js loadActivationCodes 渲染，替代原内联样式） */
.tk-table { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 8px; }
.tk-table th { padding: 4px 8px; color: var(--text-secondary); text-align: left; font-weight: 600; }
.tk-table td { padding: 4px 8px; border-top: 1px solid var(--border); }
.tk-table .mono { font-family: monospace; }

/* 空设备引导卡步骤（family.js renderEmptyGuide，与帮助页 help-num 视觉对齐） */
.guide-step { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.guide-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 9999px;
    background: var(--primary); color: #fff;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* 策略滑块加载占位（policy.js syncRulePage 完成后移除，防默认值跳变） */
.rule-loading { opacity: .45; }

/* 辅助文字弱化统一 ≥.75（替代散落的 opacity-70/0.7，UI 审计 2026-08-19） */
.op-75 { opacity: .75; }

/* 异常事件表格小屏横向滚动（abnormal.js 包裹） */
.table-scroll { overflow-x: auto; }