/* 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; }

/* 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-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;
}
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--primary); color: white; }

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

/* Sections */
.section { display: none; }
.section.active { display: block; }
.section 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); }
.status-offline { background: var(--danger-bg); color: var(--danger); }

/* 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;
}
.modal-content { background: var(--bg-card); border-radius: 16px; padding: 30px; width: 450px; max-width: 90%; }
.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; }

/* 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，仅保留内部结构类） */
/* 看板卡片：撤销旧 .card 白底/overflow 对 bg-base-200 的覆盖，文字用主题色（daisyUI 主题变量为 oklch 分量，须 oklch() 包装，裸 var() 会被判无效） */
#section-dashboard .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; }
.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(--danger); }

/* 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; }
.device-card .dc-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* 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 button.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; }
}

/* 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);
    }
}

/* ===== 命令中心兼容层（与 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 卡片：撤销旧 .card 白底规则删除后的继承问题，文字用主题色（oklch 分量须包装） */
#section-admin .card { color: var(--fallback-bc, oklch(var(--bc)/1)); }
/* daisyUI input 组件不设文字色（继承 body 深色），深色卡片上须显式补色 */
#section-admin .input, #section-rules .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); }