/* JSKE 2026 - Styles */
:root {
--bg: #0c0b14;
--bg-light: #141320;
--bg-lighter: #1e1d2e;
--primary: #7c74ff;
--primary-hover: #6a62e0;
--secondary: #f472b6;
--accent: #38bdf8;
--success: #34d399;
--warning: #fbbf24;
--danger: #f87171;
--text: #e8e6f0;
--text-dim: #8b87a8;
--glass-dark: rgba(255,255,255,0.02);
--glass: rgba(255,255,255,0.06);
--glass-light: rgba(255,255,255,0.10);
--glass-heavy: rgba(14,18,32,0.92); /* v36.101: was never defined → overlay nền trong suốt, chữ đè lên cảnh 3D */
--border: rgba(255,255,255,0.14); /* v36.101: was never defined → 22 chỗ dùng var(--border) mất hẳn viền */
/* v36.108: alias tokens referenced by js/*.js, css and SVG attrs (--text-primary 41×, --bg-card 23×, --text-secondary 15×,
--link, --card-bg, --border-light) — the merge kept only their light-theme values, so in dark mode an undefined var()
reset border/background/color to initial. */
--border-light: var(--glass);
--bg-card: var(--bg-light);
--card-bg: var(--bg-light);
--text-primary: var(--text);
--text-secondary: var(--text-dim);
--link: var(--primary);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
--shadow-md: 0 4px 12px rgba(0,0,0,0.25);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.35);
--transition: 0.2s ease;
/* v36.101: bộ token MÀU CHỮ theo theme. Trước đây màu palette rực bị hardcode thẳng vào inline style
(vd #fbbf24, #60a5fa, #ff00ff) nên ở theme sáng chữ tụt xuống 1.5-2.9:1 — không đọc nổi.
Dark giữ nguyên tông rực; light dùng thang đậm hơn (Tailwind-700) đạt >=4.5:1 trên nền sáng.
DÙNG CHO CHỮ. Nền/viền/thanh vẫn dùng --success/--warning/--danger như cũ. */
--c-red: #f87171;
--c-orange: #fb8c00;
--c-amber: #fbbf24;
--c-green: #2ecc71;
--c-emerald: #10b981;
--c-cyan: #00d4ff;
--c-sky: #38bdf8;
--c-blue: #60a5fa;
--c-purple: #a78bfa;
--c-pink: #f472b6;
--c-magenta: #ff00ff;
--c-gold: #ffd700;
}
[data-theme="light"] {
/* v36.101: biến thể đậm cho theme sáng — mọi giá trị đạt >=4.5:1 trên nền #ffffff và #f5f5f7 */
--c-red: #b91c1c;
/* v36.102: 4 token dưới đây đạt AA trên #ffffff nhưng chỉ 4.25-4.47:1 trên --bg-lighter #eeeef2
(nền cột sticky của bảng task, nơi .priority-medium/.priority-low hiển thị dày đặc).
Đậm thêm 1 nấc → 5.1-5.3:1 trên #eeeef2, vẫn giữ tách bạch tông vàng/cam/xanh. */
--c-orange: #b03a0b;
--c-amber: #a34a08;
--c-green: #14713a;
--c-emerald: #047857;
--c-cyan: #0e7490;
--c-sky: #0369a1;
--c-blue: #1d4ed8;
--c-purple: #6d28d9;
--c-pink: #be185d;
--c-magenta: #a21caf;
--c-gold: #8f5700; /* v36.102: #a16207 chỉ 4.25:1 trên #eeeef2 → #8f5700 đạt 5.14:1 */
--bg: #f5f5f7;
--bg-light: #ffffff;
--bg-lighter: #eeeef2;
--primary: #5A4FE0; /* v36.101: #6C63FF chỉ đạt 3.96:1 làm chữ trên nền sáng và 4.32:1 khi chữ trắng nằm trên nó — #5A4FE0 đạt 5.32:1 / 5.79:1, vẫn giữ đúng tông tím */
--primary-hover: #4a40c4;
--secondary: #ec4899;
--accent: #0ea5e9;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--text: #1c1c1e;
--text-dim: #585860; /* v36.109 (J26-71): #63636A → #585860 — chữ phụ trên nền thẻ tối hơn (--glass-light chồng --glass, #dbdbdd) chỉ 4.2-4.4:1, nay ≥5.1:1; trên trắng 7.2:1. v36.101: #86868b gốc chỉ đạt 3.33:1 trên nền trang và 4.38:1 trên nền thẻ (dưới AA 4.5:1) — #63636A đạt 5.95:1 / 5.15:1. Dark theme đã đạt 5.71:1 nên giữ nguyên */
--glass-dark: rgba(0,0,0,0.02);
--glass: rgba(0,0,0,0.04);
--glass-light: rgba(0,0,0,0.07);
--glass-heavy: rgba(255,255,255,0.94); /* v36.101: nền đặc cho overlay ở theme sáng — chữ var(--text) tối vẫn đọc rõ */
--border: rgba(0,0,0,0.16); /* v36.101: viền tối trên nền sáng */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
/* v36.101: light-theme values of the alias tokens defined in :root (v36.108: duplicate --border/--glass-heavy removed — the owner's values above win) */
--border-light: var(--glass);
--bg-card: var(--bg-light);
--card-bg: var(--bg-light);
--text-primary: var(--text);
--text-secondary: var(--text-dim);
--link: var(--primary);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; line-height: 1.5; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
::selection { background: rgba(124,116,255,0.3); }
#app { display: flex; height: 100vh; height: 100dvh; /* v36.101: iOS Safari dynamic viewport fallback */ }
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--bg-light); border-bottom: 1px solid var(--glass-light); z-index: 200; display: flex; align-items: center; padding: 0 16px; transition: transform 0.25s ease, opacity 0.25s ease; }
.topbar-title { font-size: 15px; font-weight: 600; flex: 1; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.topbar-controls { display: flex; gap: 10px; align-items: center; }
.btn-sm { padding: 5px 10px; border: none; border-radius: var(--radius-sm); background: var(--glass); color: var(--text-dim); cursor: pointer; font-size: 11px; font-weight: 500; transition: all var(--transition); }
.btn-sm:hover { background: var(--glass-light); color: var(--text); }
.btn-primary { background: var(--primary); color: white; border: none; padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 500; transition: all var(--transition); }
.btn-primary:hover { background: var(--primary-hover); }
.pomodoro-display { font-size: 13px; min-width: 50px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sidebar { position: fixed; left: 0; top: 52px; bottom: 0; width: 220px; background: var(--bg-light); border-right: 1px solid var(--glass); overflow-y: auto; z-index: 50; padding: 12px 0; transition: width 0.25s ease, padding 0.25s ease; }
.sidebar.collapsed { width: 0; padding: 0; overflow: hidden; }
.sidebar-section { padding: 0 10px; margin-bottom: 20px; }
.sidebar-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); margin-bottom: 6px; padding: 0 8px; opacity: 0.7; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; }
.sidebar-item { padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; margin-bottom: 1px; }
.sidebar-item.disabled { opacity: .4; pointer-events: none; } /* v36.101: unavailable module (used by the keyboard/nav wave) */
.sidebar-item:hover { background: var(--glass); color: var(--text); }
.sidebar-item.active { background: var(--primary); color: white; font-weight: 500; }
.sidebar-badge { margin-left:auto;font-size:10px;font-weight:600;background:var(--glass-light);color:var(--text-dim);padding:1px 6px;border-radius:10px;min-width:18px;text-align:center; }
.sidebar-item.active .sidebar-badge { background:rgba(255,255,255,0.25); color:#fff; }
.sidebar-section-title::before { content: '▾'; font-size: 8px; transition: transform 0.2s; display: inline-block; }
.sidebar-section.sec-collapsed .sidebar-section-title::before { transform: rotate(-90deg); }
.sidebar-section.sec-collapsed .sidebar-item { display: none; }
.sidebar-num { font-size: 9px; color: var(--text-dim); min-width: 14px; text-align: right; font-variant-numeric: tabular-nums; margin-right: -2px; } /* v36.101: bỏ opacity 0.5 — số 9px mờ ~1.7:1 ở theme sáng */
[data-theme="light"] .sidebar-num { color: #5b5b60; } /* v36.101: đậm hơn --text-dim để đạt AA trên nền sidebar trắng */
.sidebar-item.active .sidebar-num { color: rgba(255,255,255,0.75); }
.shortcut-hint-bar { position: fixed; bottom: 0; left: 220px; right: 0; z-index: 100; background: var(--bg-light); border-top: 1px solid var(--glass); padding: 4px 16px; display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); align-items: center; overflow-x: auto; transition: left 0.25s ease; }
/* v36.101 (A-core-nav-27): the bar is appended to by core.js renderShortcutHintBar(), so a .sidebar sibling combinator can never reach it — match the collapsed state through body:has() */
body:has(.sidebar.collapsed) .shortcut-hint-bar { left: 0; }
.shortcut-hint-bar kbd { display: inline-block; padding: 1px 5px; font-size: 10px; font-family: monospace; background: var(--glass); border: 1px solid var(--glass-light); border-radius: 3px; color: var(--text); margin-right: 2px; min-width: 16px; text-align: center; }
.kbd-modal { position: fixed; inset: 0; z-index: 30000; /* v36.101: help layer above command palette (20000) */ background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.kbd-modal-content { background: var(--bg-light); border-radius: 12px; width: min(600px, 90vw); max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.5); border: 1px solid var(--glass-light); }
.kbd-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--glass); display: flex; align-items: center; justify-content: space-between; }
.kbd-modal-header h3 { margin: 0; font-size: 16px; }
.kbd-section { padding: 12px 20px; }
.kbd-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; }
.kbd-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 12px; }
.kbd-row kbd { display: inline-block; padding: 2px 6px; font-size: 11px; font-family: monospace; background: var(--glass); border: 1px solid var(--glass-light); border-radius: 4px; color: var(--text); min-width: 20px; text-align: center; }
/* v36.101: two-column shortcut grid + search field for the help modal (used by the keyboard wave) */
.kbd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 900px) { .kbd-grid { grid-template-columns: 1fr; } }
.kbd-search { display: block; width: calc(100% - 40px); margin: 12px 20px 0; padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--glass); border: 1px solid var(--glass-light); border-radius: 8px; outline: none; }
.kbd-search:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(108,99,255,0.25); }
#pageContainer { padding-bottom: 36px; }
.done-circle { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.15s ease; font-size: 10px; line-height: 1; vertical-align: middle; }
.done-circle:hover { transform: scale(1.2); box-shadow: 0 0 6px rgba(46,204,113,0.4); }
.done-circle:not(.dc-done):hover::after { content: '\2713'; color: var(--text-dim); font-size: 10px; } /* v36.101: trắng 0.5 → vô hình ở theme sáng */
.done-circle.dc-done { background: #2ECC71; border-color: #2ECC71; color: white; }
.done-circle.dc-done:hover { background: #e74c3c; border-color: #e74c3c; }
.done-circle.dc-done:hover::after { content: '\21A9'; color: white; font-size: 9px; }
.done-circle.dc-done::after { content: '\2713'; font-size: 10px; }
@keyframes donePop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.done-circle.dc-anim { animation: donePop 0.3s ease; }
.task-list-row.dc-completing { opacity: 0.5; transition: opacity 0.3s; }
.bulk-btn-done { background: #2ECC71 !important; color: white !important; font-weight: 600; }
.bulk-btn-reopen { background: #3498DB !important; color: white !important; }
.bulk-btn-archive { background: #8E44AD !important; color: white !important; }
/* ============================================ */
/* DASHBOARD v14.95 — Premium Design */
/* ============================================ */
.dash-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; background:var(--glass); border-radius:16px; margin-bottom:16px; }
.dash-hero-left { flex:1; }
.dash-greeting { font-size:22px; font-weight:700; margin-bottom:6px; color:var(--text); }
.dash-coach-msg { font-size:13px; color:var(--text-dim); line-height:1.5; margin-bottom:14px; max-width:420px; }
.dash-quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.dash-pill { display:flex; align-items:center; gap:5px; padding:6px 14px; border-radius:20px; border:1px solid var(--glass-light); background:var(--glass); color:var(--text); font-size:12px; cursor:pointer; transition:all 0.2s; }
.dash-pill:hover { background:var(--primary); color:white; border-color:var(--primary); }
.dash-pill-icon { font-size:13px; }
.dash-score-ring-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.dash-score-ring { width:120px; height:120px; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.dash-score-label { font-size:11px; font-weight:600; margin-top:4px; }
.dash-stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
.dash-stat-card { text-align:center; padding:14px 8px; background:var(--glass); border-radius:12px; }
.dash-stat-value { font-size:22px; font-weight:700; }
.dash-stat-label { font-size:10px; color:var(--text-dim); margin-top:2px; text-transform:uppercase; letter-spacing:0.5px; }
.dash-grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.dash-section { background:var(--glass); border-radius:14px; padding:18px; margin-bottom:16px; }
.dash-section-alert { border-left:3px solid var(--danger); }
.dash-section-header { font-size:14px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.dash-section-icon { font-size:16px; }
.dash-focus-item { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; cursor:pointer; transition:background 0.15s; margin-bottom:6px; }
.dash-focus-item:hover { background:var(--glass-light); }
.dash-focus-num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:12px; font-weight:700; flex-shrink:0; }
.dash-focus-info { flex:1; min-width:0; }
.dash-focus-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-focus-meta { font-size:10px; color:var(--text-dim); margin-top:2px; display:flex; align-items:center; gap:4px; }
/* v36.109 (J26-71): thẻ "Việc tiếp theo" — chữ dùng token --c-* (đậm ở theme sáng, rực ở theme tối); nút Xong nền xanh đậm + chữ trắng (5.5:1) ở cả 2 theme */
.dash-nextup { border-left:3px solid var(--primary); }
.dash-nextup-body { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.dash-nextup-info { flex:1 1 260px; min-width:0; }
.dash-nextup-name { font-size:16px; font-weight:600; color:var(--text); line-height:1.35; overflow-wrap:anywhere; }
.dash-nextup-meta { font-size:12px; color:var(--text-dim); margin-top:4px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.dash-nextup-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dash-nextup-chip { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; background:var(--bg-light); border:1px solid var(--border); }
.dash-nextup-chip.chip-red { color:var(--c-red); } .dash-nextup-chip.chip-amber { color:var(--c-amber); } .dash-nextup-chip.chip-sky { color:var(--c-sky); }
.dash-nextup-chip.chip-purple { color:var(--c-purple); } .dash-nextup-chip.chip-green { color:var(--c-emerald); }
.dash-nextup-actions { display:flex; gap:8px; flex-shrink:0; }
.dash-nextup-btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); min-height:36px; transition:filter 0.15s; }
.dash-nextup-btn:hover { filter:brightness(1.1); }
.dash-nextup-done { background:#047857; border-color:#047857; color:#fff; }
.dash-nextup-open { background:var(--glass-light); color:var(--text); }
.dash-streak-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.dash-streak-num { font-size:36px; font-weight:800; color:var(--c-amber); line-height:1; }
.dash-streak-info { flex:1; }
.dash-streak-label { font-size:13px; font-weight:600; }
.dash-streak-sub { font-size:11px; color:var(--text-dim); }
.dash-heatmap { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.dash-heatmap-day { text-align:center; }
.dash-heatmap-cell { height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--text); box-shadow:inset 0 2px 4px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); background-image:linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%); transition:transform 0.15s, box-shadow 0.15s; }
.dash-heatmap-label { font-size:9px; color:var(--text-dim); margin-top:2px; }
.dash-heatmap-cell:hover { transform:scale(1.1); box-shadow:inset 0 2px 4px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.2); }
.dash-domain-bars { display:grid; gap:8px; }
.dash-domain-row { display:grid; grid-template-columns:100px 1fr 70px; align-items:center; gap:8px; }
.dash-domain-name { font-size:11px; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.dash-domain-bar-wrap { flex:1; }
.dash-domain-bar-bg { height:10px; background:var(--glass-light); border-radius:5px; overflow:hidden; box-shadow:inset 0 2px 3px rgba(0,0,0,0.18); }
.dash-domain-bar-fill { height:100%; border-radius:5px; transition:width 0.6s cubic-bezier(0.22,1,0.36,1); background-image:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.1) 100%); box-shadow:0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); }
.dash-domain-count { font-size:10px; color:var(--text-dim); text-align:right; }
.dash-overdue-item { display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; cursor:pointer; transition:background 0.15s; margin-bottom:4px; }
.dash-overdue-item:hover { background:var(--glass-light); }
.dash-overdue-info { flex:1; min-width:0; }
.dash-overdue-name { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-overdue-meta { font-size:10px; color:var(--text-dim); display:flex; align-items:center; gap:4px; margin-top:2px; }
.dash-more-link { font-size:11px; color:var(--primary); cursor:pointer; text-align:center; padding:8px; }
.dash-more-link:hover { text-decoration:underline; }
.dash-upcoming-date { font-size:11px; font-weight:600; color:var(--text-dim); padding:8px 0 4px; border-bottom:1px solid var(--glass-light); margin-bottom:4px; }
.dash-upcoming-count { font-weight:400; }
.dash-upcoming-item { display:flex; align-items:center; gap:8px; padding:6px 4px; cursor:pointer; border-radius:6px; transition:background 0.15s; }
.dash-upcoming-item:hover { background:var(--glass-light); }
.dash-upcoming-name { flex:1; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-empty-state { text-align:center; color:var(--text-dim); font-size:13px; padding:20px; }
/* ============================================ */
/* REPORTS v14.95 — Analytics Design */
/* ============================================ */
.reports-header { font-size:20px; font-weight:700; margin-bottom:14px; }
.rep-time-filter { display:flex; gap:6px; align-items:center; margin-bottom:16px; padding:8px 12px; background:var(--glass); border-radius:10px; flex-wrap:wrap; }
.rep-filter-label { font-size:11px; font-weight:600; color:var(--text-dim); margin-right:4px; }
.rep-filter-btn { padding:5px 12px; border-radius:8px; border:1px solid transparent; background:none; color:var(--text-dim); font-size:11px; cursor:pointer; transition:all 0.15s; }
.rep-filter-btn:hover { background:var(--glass-light); }
.rep-filter-btn.active { background:var(--primary); color:white; }
.rep-date-input { font-size:10px; background:var(--glass); color:var(--text); border:1px solid var(--glass-light); border-radius:6px; padding:4px 8px; }
.rep-overview { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
.rep-card { text-align:center; padding:16px 8px; background:var(--glass); border-radius:12px; }
.rep-card-icon { font-size:18px; margin-bottom:4px; }
.rep-card-value { font-size:22px; font-weight:700; }
.rep-card-label { font-size:10px; color:var(--text-dim); margin-top:2px; text-transform:uppercase; letter-spacing:0.5px; }
.rep-section { background:var(--glass); border-radius:14px; padding:18px; margin-bottom:16px; }
.rep-section-title { font-size:14px; font-weight:700; margin-bottom:4px; }
.rep-section-desc { font-size:11px; color:var(--text-dim); margin-bottom:12px; }
.rep-grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rep-chart-wrap { margin-bottom:8px; border-radius:10px; background:rgba(255,255,255,0.02); padding:8px 4px 0; }
.rep-line-chart { width:100%; height:180px; display:block; }
.rep-chart-labels { display:flex; justify-content:space-between; font-size:9px; color:var(--text-dim); padding:0 2px; margin-top:4px; }
.rep-hbar-row { display:grid; grid-template-columns:90px 1fr 65px; align-items:center; gap:8px; margin-bottom:8px; }
.rep-hbar-label { font-size:11px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; }
.rep-hbar-track { height:12px; background:var(--glass-light); border-radius:6px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,0.2); }
.rep-hbar-fill { height:100%; border-radius:6px; transition:width 0.6s cubic-bezier(0.22,1,0.36,1); min-width:2px; background-image:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.1) 100%); box-shadow:0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3); }
.rep-hbar-value { font-size:11px; font-weight:600; text-align:right; }
.rep-hbar-pct { font-weight:400; color:var(--text-dim); font-size:9px; }
.rep-donut-row { display:flex; align-items:center; gap:20px; margin-bottom:10px; }
.rep-donut-wrap { position:relative; flex-shrink:0; }
.rep-donut-svg { width:130px; height:130px; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35)); transform:perspective(400px) rotateX(12deg); transition:transform 0.35s ease; }
.rep-donut-svg:hover { transform:perspective(400px) rotateX(6deg) scale(1.04); }
.rep-donut-slice { cursor:pointer; transition:opacity 0.2s, transform 0.2s; transform-origin:65px 65px; }
.rep-donut-slice:hover { opacity:0.85; transform:scale(1.04); }
.rep-donut-center-text { font-size:15px; font-weight:700; fill:var(--text); }
.rep-donut-center-sub { font-size:8px; fill:var(--text-dim); }
.rep-donut-hover-info { min-width:120px; padding:10px 14px; background:var(--glass); border-radius:10px; border:1px solid var(--glass-light); box-shadow:0 4px 16px rgba(0,0,0,0.25); }
.rep-donut-hover-name { font-size:12px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.rep-donut-hover-value { font-size:20px; font-weight:800; }
.rep-donut-hover-pct { font-size:11px; color:var(--text-dim); }
.rep-donut-hover-bar { height:5px; border-radius:3px; background:var(--glass-light); margin-top:6px; overflow:hidden; }
.rep-donut-hover-bar-fill { height:100%; border-radius:3px; transition:width 0.3s ease; }
.rep-donut-legend { display:grid; gap:4px; }
.rep-legend-item { font-size:11px; display:flex; align-items:center; gap:5px; cursor:pointer; padding:2px 4px; border-radius:4px; transition:background 0.15s; }
.rep-legend-item:hover { background:var(--glass-light); }
.rep-legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.rep-insight { font-size:11px; color:var(--text-dim); padding:8px 12px; background:var(--glass-light); border-radius:8px; border-left:3px solid var(--primary); margin-top:8px; line-height:1.5; }
.rep-total-line { font-size:11px; color:var(--text-dim); text-align:right; margin-top:8px; }
.rep-projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rep-project-card { padding:12px; background:var(--glass-light); border-radius:10px; }
.rep-project-name { font-size:12px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-project-bar { height:6px; background:var(--glass); border-radius:3px; overflow:hidden; margin-bottom:4px; }
.rep-project-bar-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
.rep-project-stats { font-size:10px; color:var(--text-dim); }
.rep-deadline-row { display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; cursor:pointer; transition:background 0.15s; margin-bottom:4px; }
.rep-deadline-row:hover { background:var(--glass-light); }
.rep-deadline-days { font-size:16px; font-weight:700; width:36px; text-align:center; flex-shrink:0; }
.rep-deadline-info { flex:1; min-width:0; }
.rep-deadline-name { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-deadline-meta { font-size:10px; color:var(--text-dim); margin-top:1px; display:flex; align-items:center; gap:4px; }
.rep-coaching { background:linear-gradient(135deg, var(--glass) 0%, var(--glass-light) 100%); border-radius:14px; padding:18px; margin-bottom:16px; border:1px solid var(--glass-light); }
.rep-tip { font-size:12px; color:var(--text); padding:8px 0; border-bottom:1px solid var(--glass-light); line-height:1.5; }
.rep-tip:last-child { border-bottom:none; }
.rep-export-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.rep-export-btn { padding:8px 16px; border-radius:8px; border:1px solid var(--glass-light); background:var(--glass); color:var(--text); font-size:11px; cursor:pointer; transition:all 0.15s; }
.rep-export-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }
.rep-export-import { background:var(--success); color:white; border-color:var(--success); }
.rep-export-import:hover { opacity:0.9; }
@media (max-width: 700px) {
.dash-hero { flex-direction:column; text-align:center; }
.dash-stats-row { grid-template-columns:repeat(3,1fr); }
.dash-grid-2col, .rep-grid-2col { grid-template-columns:1fr; }
.rep-overview { grid-template-columns:repeat(3,1fr); }
.rep-projects-grid { grid-template-columns:1fr; }
.dash-domain-row { grid-template-columns:80px 1fr 50px; }
.rep-hbar-row { grid-template-columns:70px 1fr 50px; }
}
/* ============================================ */
/* NEXUS v15.0 — Premium Network Visualization */
/* ============================================ */
.nexus-wrap { display:grid; grid-template-columns:1fr 340px; height:calc(100vh - 80px); height:calc(100dvh - 80px); /* v36.101 */ overflow:hidden; transition:grid-template-columns 0.35s cubic-bezier(0.4,0,0.2,1); }
/* v35.48: sidebar-collapsed — force 0 width, hide border/bg to eliminate gray strip */
/* v36.77: Added overflow:hidden on wrap + max-width:0 on side to fully kill gray residue */
.nexus-wrap.sidebar-collapsed { grid-template-columns:1fr 0px; overflow:hidden; }
.nexus-wrap.sidebar-collapsed .nexus-graph { border-radius:14px; }
.nexus-wrap.sidebar-collapsed .nexus-side { display:none !important; }
.nexus-wrap.nx-fullscreen { position:fixed; inset:0; z-index:9999; height:100vh; height:100dvh; /* v36.101 */ border-radius:0; grid-template-columns:1fr 0px; }
/* v36.40: Only hide sidebar when sidebar-collapsed is active — allow reopening via arrow buttons */
.nexus-wrap.nx-fullscreen.sidebar-collapsed .nexus-side { opacity:0; padding:0; overflow:hidden; pointer-events:none; min-width:0; width:0; border-left:none; background:transparent; }
.nexus-wrap.nx-fullscreen:not(.sidebar-collapsed) { grid-template-columns:1fr 340px; }
.nexus-wrap.nx-fullscreen:not(.sidebar-collapsed) .nexus-side { opacity:1; padding:14px; overflow-y:auto; pointer-events:auto; min-width:0; width:auto; border-left:1px solid var(--glass-light); background:var(--glass); }
.nexus-wrap.nx-fullscreen .nexus-graph { border-radius:0; }
/* v35.16: Hide main app sidebar + topbar in Nexus fullscreen */
/* v36.43: Allow left sidebar to reopen in fullscreen via [ key or arrow button */
body.nx-fullscreen-mode .sidebar { display:none !important; }
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar { display:flex !important; position:fixed; left:0; top:0; bottom:0; z-index:10001; width:340px; box-shadow:4px 0 24px rgba(0,0,0,0.5); flex-direction:column; padding:8px 0; }
/* v36.83: Sidebar collapse arrow — pinned at right edge of sidebar in fullscreen */
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .nx-sidebar-collapse-arrow { display:flex !important; }
.nx-sidebar-collapse-arrow { display:none; position:absolute; right:-16px; top:50%; transform:translateY(-50%); z-index:10002; width:16px; height:56px; align-items:center; justify-content:center; background:rgba(14,18,32,0.88); backdrop-filter:blur(8px); border:1px solid rgba(108,220,239,0.2); border-left:none; border-radius:0 8px 8px 0; color:rgba(255,255,255,0.55); font-size:12px; cursor:pointer; transition:all 0.2s; }
.nx-sidebar-collapse-arrow:hover { background:rgba(108,142,239,0.4); color:rgba(255,255,255,0.95); width:20px; }
/* v36.77: Compact left sidebar in fullscreen — sections as collapsible rows, items as 2-col grid */
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .sidebar-section { padding:0 8px; margin-bottom:6px; }
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .sidebar-section-title { font-size:9px; padding:4px 8px; margin-bottom:3px; }
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .sidebar-item { padding:5px 8px; font-size:11px; gap:5px; }
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .sidebar-num { font-size:7px; min-width:10px; }
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .sidebar-icon { font-size:11px; }
/* v36.78: Auto-collapse non-active sections in fullscreen sidebar — uses existing .sec-collapsed class from core.js */
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .sidebar-section.sec-collapsed .sidebar-item { display:none; }
body.nx-fullscreen-mode.nx-left-sidebar-open .sidebar .sidebar-section:not(.sec-collapsed) .sidebar-item { display:flex; }
body.nx-fullscreen-mode .topbar { display:none !important; }
body.nx-fullscreen-mode .sidebar-toggle { display:none !important; }
/* v36.80: Focus Mode — canvas fills entire viewport, no gaps */
body.jske-focus-mode .nexus-wrap { height:100vh !important; height:100dvh !important; /* v36.101 */ border-radius:0 !important; }
body.jske-focus-mode .nexus-wrap .nexus-graph { border-radius:0 !important; }
body.jske-focus-mode .nexus-wrap.sidebar-collapsed { grid-template-columns:1fr !important; }
body.jske-focus-mode .nexus-wrap.sidebar-collapsed .nexus-side { display:none !important; }
body.jske-focus-mode #pageContainer { padding-bottom:0 !important; }
/* v36.31: Show mobile sidebar arrows in fullscreen on desktop so user can reopen sidebars */
.nexus-wrap.nx-fullscreen .nx-mobile-sidebar-arrow { display:flex !important; position:absolute; top:50%; z-index:150; width:24px; height:48px; align-items:center; justify-content:center; background:rgba(14,18,32,0.75); backdrop-filter:blur(8px); border:1px solid rgba(108,220,239,0.15); color:rgba(255,255,255,0.6); font-size:14px; cursor:pointer; transition:all 0.2s; }
.nexus-wrap.nx-fullscreen .nx-mobile-sidebar-arrow:hover { background:rgba(108,220,239,0.25); color:rgba(255,255,255,0.9); }
.nexus-wrap.nx-fullscreen .nx-mobile-sidebar-arrow.left { left:0; border-radius:0 8px 8px 0; transform:translateY(-50%); }
/* v36.83: Hide the left open-arrow when sidebar is already open (collapse arrow on sidebar takes over) */
body.nx-left-sidebar-open .nexus-wrap.nx-fullscreen .nx-mobile-sidebar-arrow.left { display:none !important; }
.nexus-wrap.nx-fullscreen .nx-mobile-sidebar-arrow.right { right:0; border-radius:8px 0 0 8px; transform:translateY(-50%); }
.nexus-graph { position:relative; overflow:hidden; background:radial-gradient(ellipse at center, var(--bg-lighter) 0%, var(--bg-light) 100%); border-radius:14px 0 0 14px; }
.nexus-canvas { width:100%; height:100%; }
/* Top toolbar */
/* v36.62: Toolbar — single row with horizontal scroll, no flex-wrap to prevent multi-line overlap */
.nexus-toolbar { position:absolute; top:12px; left:12px; right:12px; display:flex; gap:6px; flex-wrap:nowrap; align-items:center; z-index:10; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; }
.nexus-toolbar::-webkit-scrollbar { display:none; }
.nx-btn { padding:5px 11px; border-radius:8px; border:1px solid var(--glass-light); background:rgba(20,19,32,0.7); backdrop-filter:blur(12px); color:var(--text-dim); font-size:10px; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.nx-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }
.nx-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
.nx-sep { width:1px; height:18px; background:var(--glass-light); }
.nx-search { padding:5px 10px; border-radius:8px; border:1px solid var(--glass-light); background:rgba(20,19,32,0.7); backdrop-filter:blur(12px); color:var(--text); font-size:10px; width:140px; outline:none; }
.nx-search:focus { border-color:var(--primary); }
.nx-slider-wrap { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--text-dim); }
.nx-slider { width:60px; accent-color:var(--primary); }
/* Bottom info bar */
.nexus-infobar { position:absolute; bottom:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center; z-index:10; }
.nexus-status { font-size:10px; color:var(--text-dim); background:rgba(20,19,32,0.7); backdrop-filter:blur(12px); padding:5px 12px; border-radius:8px; }
.nexus-legend { display:flex; gap:8px; flex-wrap:wrap; font-size:9px; color:var(--text-dim); background:rgba(20,19,32,0.7); backdrop-filter:blur(12px); padding:5px 12px; border-radius:8px; }
.nx-leg-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:3px; vertical-align:middle; }
/* Onboarding overlay */
.nexus-onboard { position:absolute; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; }
.nexus-onboard-card { background:var(--bg-lighter); border-radius:20px; padding:36px 40px; max-width:480px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.nexus-onboard-title { font-size:22px; font-weight:800; margin-bottom:8px; }
.nexus-onboard-sub { font-size:13px; color:var(--text-dim); margin-bottom:20px; line-height:1.6; }
.nexus-onboard-tips { text-align:left; margin-bottom:20px; }
.nexus-onboard-tip { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:12px; line-height:1.5; }
.nexus-onboard-tip-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.nexus-onboard-go { padding:10px 32px; border-radius:10px; border:none; background:var(--primary); color:white; font-size:14px; font-weight:600; cursor:pointer; transition:transform 0.15s; }
.nexus-onboard-go:hover { transform:scale(1.05); }
.nexus-onboard-skip { display:block; margin-top:10px; font-size:11px; color:var(--text-dim); cursor:pointer; background:none; border:none; }
/* Sidebar */
.nexus-side { background:var(--glass); border-radius:0 14px 14px 0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; border-left:1px solid var(--glass-light); transition:opacity 0.3s, padding 0.3s, min-width 0.3s; min-width:0; }
/* v35.48: Also hide border-left, background, and force width:0 to fully eliminate gray area */
.sidebar-collapsed .nexus-side { opacity:0; padding:0; overflow:hidden; pointer-events:none; width:0; min-width:0; border-left:none; background:transparent; }
/* Sidebar toggle button */
.nx-sidebar-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:30; width:22px; height:44px; background:rgba(10,14,28,0.75); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.06); border-radius:6px; color:rgba(255,255,255,0.45); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.nx-sidebar-toggle:hover { background:rgba(108,142,239,0.3); color:rgba(255,255,255,0.8); }
.sidebar-collapsed .nx-sidebar-toggle { right:6px; }
/* Fullscreen toggle */
.nx-fullscreen-btn { position:absolute; top:12px; right:12px; z-index:22; width:28px; height:28px; background:rgba(10,14,28,0.75); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.06); border-radius:8px; color:rgba(255,255,255,0.4); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.nx-fullscreen-btn:hover { background:rgba(108,142,239,0.3); color:rgba(255,255,255,0.85); }
.nx-side-title { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.nx-section { background:var(--glass-light); border-radius:10px; padding:12px; }
.nx-heading { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:8px; }
.nx-stat { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; }
.nx-stat-val { font-weight:700; }
.nx-chain { padding:10px; background:var(--glass); border-radius:8px; margin-bottom:6px; cursor:pointer; transition:all 0.2s; border-left:3px solid var(--primary); position:relative; overflow:hidden; }
.nx-chain:hover { background:var(--glass-light); transform:translateX(3px); }
.nx-chain-title { font-size:12px; font-weight:600; margin-bottom:2px; }
.nx-chain-meta { font-size:10px; color:var(--text-dim); }
.nx-chain-roi { font-size:15px; font-weight:800; color:var(--primary); }
.nx-chain-cascade { position:absolute; inset:0; pointer-events:none; }
.nx-insight { font-size:11px; line-height:1.5; padding:10px; background:linear-gradient(135deg, rgba(124,116,255,0.06), rgba(56,189,248,0.06)); border-radius:8px; border-left:3px solid var(--primary); margin-bottom:6px; }
.nx-insight strong { color:var(--primary); }
.nx-action-card { padding:6px 10px; background:var(--glass); border-radius:6px; margin-bottom:3px; font-size:11px; cursor:pointer; transition:background 0.15s; display:flex; align-items:center; gap:6px; }
.nx-action-card:hover { background:var(--glass-light); }
.nx-node-panel { padding:12px; background:var(--glass-light); border-radius:10px; }
.nx-node-name { font-size:13px; font-weight:700; margin-bottom:4px; }
.nx-node-badges { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.nx-node-badge { font-size:9px; padding:2px 8px; border-radius:10px; background:var(--glass); }
/* Cascade animation */
@keyframes dominoFall {
0% { transform:perspective(200px) rotateX(0deg); opacity:1; }
100% { transform:perspective(200px) rotateX(80deg); opacity:0.3; }
}
@keyframes dominoPulse {
0% { box-shadow:0 0 0 0 rgba(124,116,255,0.6); }
70% { box-shadow:0 0 0 12px rgba(124,116,255,0); }
100% { box-shadow:0 0 0 0 rgba(124,116,255,0); }
}
.nx-chain.cascading { animation:dominoPulse 0.6s ease; }
@media (max-width:900px) {
.nexus-wrap { grid-template-columns:1fr; grid-template-rows:55vh auto; }
.nexus-wrap.sidebar-collapsed { grid-template-columns:1fr; grid-template-rows:1fr 0px; }
.nexus-side { border-radius:0 0 14px 14px; border-left:none; border-top:1px solid var(--glass-light); }
.nx-sidebar-toggle { right:auto; left:50%; top:auto; bottom:6px; transform:translateX(-50%) rotate(90deg); }
}
/* v35.44: Mobile/iPad VisionSpace responsive design */
/* v35.47: Enhanced mobile VisionSpace — touch-friendly sizing, detail panel, toolbar */
@media (max-width: 768px) {
.nexus-wrap { grid-template-columns: 1fr !important; }
/* v36.102: height gốc calc(100vh - 80px) cao hơn vùng nội dung thật của mobile
(100vh - topbar 48 - padding main-content 16 - padding page-container 16+16) → đáy graph
(breadcrumb, legend, nút toggle sidebar) rơi khỏi màn hình. Trừ fullscreen/focus-mode. */
.nexus-wrap:not(.nx-fullscreen) {
height: calc(100vh - 100px - env(safe-area-inset-bottom) * 2) !important;
}
.nexus-side {
position: fixed !important;
right: 0;
top: 48px; /* v36.101 (H-css-11): drawer sits at z-index 100 under the 48px mobile topbar (z-index 200) — title/close row was covered */
bottom: 0;
width: 300px !important;
z-index: 100 !important;
transform: translateX(100%);
transition: transform 0.3s ease !important;
border-radius: 0 !important;
border-left: 1px solid var(--glass-light);
box-shadow: -4px 0 20px rgba(0,0,0,0.3);
}
.nexus-wrap:not(.sidebar-collapsed) .nexus-side { transform: translateX(0) !important; }
.nx-sidebar-toggle { z-index: 101 !important; }
/* v36.101: topbar is hidden in VisionSpace fullscreen — drawer may start at the top again */
body.nx-fullscreen-mode .nexus-side, .nexus-wrap.nx-fullscreen .nexus-side, body.jske-focus-mode .nexus-side { top: 0; }
#nxToolbar {
max-width: calc(100vw - 24px) !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
justify-content: flex-start !important;
left: 12px !important;
right: 12px !important;
transform: none !important;
gap: 3px !important;
padding: 4px 6px !important;
}
#nxToolbar .nx-btn { min-width: 36px !important; min-height: 36px !important; font-size: 13px !important; }
#nxToolbar select { min-height: 36px !important; font-size: 11px !important; }
/* Node detail panel — bottom sheet on mobile */
.nx-node-panel {
position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
top: auto !important; max-height: 45vh !important; width: 100% !important;
border-radius: 16px 16px 0 0 !important; z-index: 200 !important;
overflow-y: auto !important; -webkit-overflow-scrolling: touch;
box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
}
/* GSTTN overlay compact on mobile */
.nx-gsttn-overlay {
max-width: calc(100vw - 20px) !important;
font-size: 10px !important;
}
/* Touch-friendly: larger canvas area */
.nexus-main { min-height: 60vh !important; }
}
/* iPad-specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
#nxToolbar .nx-btn { min-width: 32px !important; min-height: 32px !important; }
.nexus-side { width: 320px !important; }
}
/* v36.26: Keyboard shortcuts help overlay */
.nx-kb-help-overlay {
position: absolute; inset: 0; z-index: 500;
background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
animation: nxKbFadeIn 0.15s ease;
}
@keyframes nxKbFadeIn { from{opacity:0} to{opacity:1} }
.nx-kb-help-card {
background: rgba(14,18,32,0.95); border: 1px solid rgba(108,220,239,0.15);
border-radius: 16px; padding: 24px 30px; max-width: 520px; width: 90%;
max-height: 80vh; overflow-y: auto; color: rgba(255,255,255,0.85);
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.nx-kb-section {
font-size: 11px; font-weight: 700; color: rgba(108,220,239,0.8);
text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 6px;
padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06);
}
.nx-kb-section:first-of-type { border-top: none; margin-top: 0; }
.nx-kb-row {
display: flex; align-items: center; gap: 8px; padding: 3px 0;
font-size: 12px; color: rgba(255,255,255,0.65);
}
.nx-kb-row kbd {
display: inline-block; min-width: 22px; text-align: center;
padding: 2px 6px; background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
font-size: 10px; font-family: monospace; color: rgba(255,255,255,0.8);
font-weight: 600; white-space: nowrap;
}
.nx-kb-row span { flex: 1; }
/* v36.26: Mobile sidebar toggle arrows */
.nx-mobile-sidebar-arrow {
display: none; /* hidden on desktop */
}
@media (max-width: 768px) {
.nx-mobile-sidebar-arrow {
display: flex !important; position: fixed; top: 50%; z-index: 150;
width: 24px; height: 48px; align-items: center; justify-content: center;
background: rgba(14,18,32,0.75); backdrop-filter: blur(8px);
border: 1px solid rgba(108,220,239,0.15); color: rgba(255,255,255,0.6);
font-size: 14px; cursor: pointer; transition: all 0.2s;
}
.nx-mobile-sidebar-arrow:active { background: rgba(108,220,239,0.2); }
.nx-mobile-sidebar-arrow.left { left: 0; border-radius: 0 8px 8px 0; transform: translateY(-50%); }
.nx-mobile-sidebar-arrow.right { right: 0; border-radius: 8px 0 0 8px; transform: translateY(-50%); }
/* Hide keyboard-only indicators on mobile */
.nx-kb-hint { display: none !important; }
/* Ensure topbar scrollable and not clipped */
#nxToolbar {
scrollbar-width: none; -ms-overflow-style: none;
}
#nxToolbar::-webkit-scrollbar { display: none; }
}
/* v36.26: Desktop keyboard hint badges on toolbar buttons */
.nx-kb-hint {
position: absolute; top: -6px; right: -4px; min-width: 13px; height: 13px;
display: flex; align-items: center; justify-content: center;
background: rgba(108,220,239,0.2); border: 0.5px solid rgba(108,220,239,0.35);
border-radius: 3px; font-size: 7px; font-weight: 700; color: rgba(108,220,239,0.75);
pointer-events: none; font-family: monospace; line-height: 1;
}
.undo-redo-group { display: flex; gap: 3px; align-items: center; background: var(--glass); border-radius: 6px; padding: 2px; }
.undo-redo-btn { background: none; border: none; color: var(--text); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.15s; line-height: 1; }
.undo-redo-btn:not(:disabled):hover { background: var(--primary); color: white; }
.undo-redo-btn:disabled { cursor: not-allowed; opacity: 0.2; color: var(--text-dim); }
.undo-toast { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); background: var(--bg-lighter); border: 1px solid var(--glass-light); padding: 8px 16px; border-radius: 8px; font-size: 12px; color: var(--text); z-index: 30000; /* v36.101: toasts above command palette (20000) */ box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 8px; }
.archived-badge { font-size: 9px; background: #8E44AD30; color: #8E44AD; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.sidebar-icon { font-size: 14px; min-width: 18px; text-align: center; }
.sidebar.collapsed ~ .topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.sidebar.collapsed ~ .main-content { margin-left: 0; width: 100%; margin-top: 0; height: 100vh; height: 100dvh; /* v36.101 */ }
.main-content { margin-left: 220px; margin-top: 52px; width: calc(100% - 220px); height: calc(100vh - 52px); height: calc(100dvh - 52px); /* v36.101 */ display: flex; flex-direction: column; position: relative; transition: margin-left 0.25s ease, width 0.25s ease, margin-top 0.25s ease, height 0.25s ease; }
.sidebar-toggle { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 1001; background: var(--bg-light); border: 1px solid var(--glass-light); border-left: none; border-radius: 0 6px 6px 0; padding: 6px 3px; cursor: pointer; color: var(--text-dim); font-size: 12px; transition: left 0.25s ease; }
.sidebar-toggle.open { left: 220px; }
/* v27.43: Hamburger hidden on desktop, sidebar-backdrop hidden on desktop */
.mobile-hamburger { display: none; }
.sidebar-backdrop { display: none; }
.pie-tooltip { position: fixed; background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 11px; z-index: 2000; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-md); }
.pie-tooltip-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-bottom: 4px; }
.pie-tooltip-row:last-child { margin-bottom: 0; }
.pie-tooltip-label { color: var(--text-dim); }
.pie-tooltip-value { color: var(--text); font-weight: 600; text-align: right; min-width: 60px; }
.insight-box { font-size: 12px; color: var(--text-dim); margin-top: 12px; padding: 10px 12px; background: var(--glass); border-radius: var(--radius-sm); border-left: 3px solid var(--primary); line-height: 1.5; }
.analytics-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1400px) { .analytics-grid { grid-template-columns: repeat(2, 1fr); } }
.page-container { flex: 1; overflow-y: auto; padding: 20px 24px; }
.glass-card { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 16px; }
.page-header { font-size: 22px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.task-card { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 14px; transition: border-color var(--transition), box-shadow var(--transition); cursor: pointer; position: relative; }
.task-card:hover { border-color: var(--glass-light); box-shadow: var(--shadow-sm); }
.task-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.task-name { font-weight: 600; font-size: 14px; flex: 1; letter-spacing: -0.01em; }
.task-meta { font-size: 11px; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.badge { display: inline-block; padding: 3px 7px; border-radius: 4px; background: var(--glass); font-size: 10px; font-weight: 500; letter-spacing: 0.01em; }
.domain-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.domain-spiritual { background: #9B59B6; }
.domain-health { background: #2ECC71; }
.domain-personal { background: #3498DB; }
.domain-relationships { background: #E91E63; }
.domain-career { background: #E67E22; }
.domain-business { background: #E74C3C; }
.domain-finance { background: #F1C40F; }
/* v36.101: các rule này là MÀU CHỮ thuần — trước đây hardcode màu rực nên ở theme sáng tụt xuống 1.4-2.6:1 (đo thật lúc render).
Chuyển sang token --c-* (rực ở theme tối, đậm ở theme sáng) → đạt AA ở cả 2 theme mà không đổi tông màu. */
.priority-top { color: var(--c-magenta); font-weight: 700; }
.priority-high { color: var(--c-red); }
.priority-medium { color: var(--c-amber); }
.priority-low { color: var(--c-green); }
.status-pending { color: var(--text-dim); }
.status-inprogress { color: var(--c-sky); } /* var(--accent) #0ea5e9 chỉ đạt 2.33:1 trên nền sáng */
.status-completed { color: var(--c-emerald); } /* var(--success) #10b981 chỉ đạt 2.13:1 trên nền sáng */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 5px; color: var(--text-dim); }
.form-input, .form-select, .form-textarea { width: 100%; padding: 8px 10px; background: var(--bg-lighter); border: 1px solid var(--glass-light); color: var(--text); border-radius: var(--radius-sm); font-family: 'Inter', sans-serif; font-size: 13px; transition: border-color var(--transition); }
.form-textarea { min-height: 80px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); }
.toolbar-select { padding: 5px 8px; background: var(--glass); border: 1px solid var(--glass-light); color: var(--text); border-radius: var(--radius-sm); font-family: 'Inter', sans-serif; cursor: pointer; font-size: 12px; transition: border-color var(--transition); }
.toolbar-select:focus { outline: none; border-color: var(--primary); }
/* v36.58: z-index 10100 — must be above VisionSpace fullscreen (z-index:9999) */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 10100; align-items: center; justify-content: center; }
.modal.active { display: flex; }
/* v27.87: SBS right-mode — modal shifts right + leaves room for SBS bottom panel */
.modal.sbs-right-mode { justify-content:flex-end; align-items:flex-start; padding-right:10px; padding-top:10px; z-index:10100; }
.modal.sbs-right-mode .modal-content { max-width:48vw; width:48vw; max-height:calc(100vh - 130px); max-height:calc(100dvh - 130px); /* v36.101 */ }
/* v27.75: Side Edit Panel — split-view editing (task↔project) */
.side-edit-panel {
display:none; position:fixed; top:0; right:0; width:42vw; max-width:520px; height:100vh; height:100dvh; /* v36.101 */
background:var(--bg-light); border-left:1px solid var(--glass-light);
/* v36.102: z-index 1001 nằm DƯỚI .modal (10100) và .confirmation-overlay (99998) → panel bị lớp nền mờ đè, không đọc/bấm được. Nâng lên trên cả 2 modal mà nó đi kèm. */
box-shadow:-8px 0 32px rgba(0,0,0,0.4); z-index:100000;
flex-direction:column; animation:sideSlideIn 0.2s ease;
}
.side-edit-panel.active { display:flex; }
@keyframes sideSlideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.side-edit-header {
display:flex; justify-content:space-between; align-items:center;
padding:16px 20px; border-bottom:1px solid var(--glass-light);
font-size:15px; font-weight:700; flex-shrink:0;
}
.side-edit-content { flex:1; overflow-y:auto; padding:16px 20px; }
.side-edit-footer { padding:12px 20px; border-top:1px solid var(--glass-light); display:flex; gap:8px; justify-content:flex-end; flex-shrink:0; }
/* Shift main modal left when side panel is open */
.modal.has-side-panel { justify-content:flex-start; padding-left:2vw; }
.modal.has-side-panel .modal-content { max-width:50vw; }
/* Shift project modal (confirmation) left when side panel is open */
.confirmation-modal.has-side-panel { left:25%; transform:translate(-50%,-50%); max-width:45vw; }
.confirmation-overlay.has-side-panel { background:rgba(0,0,0,0.3); }
/* v36.104: lưới an toàn cho hồi quy v36.102 — panel lên z-index 100000 che mất hộp thoại
"⚠ Chưa lưu thay đổi" (showUnsavedConfirm / _showSaveOrDiscardConfirm dựng bằng JS,
append thẳng vào body với inline z-index:3000). Trên mobile panel là 100vw × 100vh nền đặc
→ bấm "Đóng" khi đang sửa dở sẽ kẹt cứng, không có Escape. Panel BẮT BUỘC phải trên
.confirmation-overlay (99998) nên không hạ được → nâng riêng 2 hộp thoại đó lên trên panel.
Chỉ khớp inline z-index 3000 (có dấu ; cuối để không dính 30000); nếu phía JS tự nâng
z-index thì rule này ngừng khớp, vô hại. */
body > div[style*="z-index: 3000;"],
body > div[style*="z-index:3000;"] { z-index: 100010 !important; }
/* v36.104: cùng gốc hồi quy — #prereqPickerOverlay (inline z-index:10001, append vào body từ
nút "➕ Chọn task tiên quyết" trong task modal, index.html:450) mở được lúc Side Edit Panel
đang bật → bị panel 100000 che. Đặt giữa panel (100000) và hộp thoại chưa-lưu (100010). */
#prereqPickerOverlay { z-index: 100005 !important; }
.modal-content { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-lg); padding: 24px; max-width: 580px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header { font-size: 17px; font-weight: 700; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; letter-spacing: -0.01em; }
.close-btn { background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; transition: color var(--transition); }
.close-btn:hover { color: var(--text); }
.modal-section { margin-bottom: 16px; }
.modal-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 10px; }
.domain-selector { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 10px; }
.domain-btn { padding: 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--glass-light); background: var(--glass); cursor: pointer; transition: all var(--transition); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; }
.domain-btn.active { border-color: var(--primary); background: rgba(124,116,255,0.1); }
.domain-btn .dot { width: 10px; height: 10px; border-radius: 50%; }
.btn-schedule { background: linear-gradient(135deg, var(--primary), #8B5CF6); color: white; padding: 10px 20px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 700; transition: all var(--transition); box-shadow: 0 2px 8px rgba(124,116,255,0.4); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-schedule:hover { background: linear-gradient(135deg, var(--primary-hover), #7C3AED); box-shadow: 0 4px 16px rgba(124,116,255,0.5); transform: translateY(-1px); }
.task-delete-btn { position: absolute; top: 8px; right: 8px; background: var(--danger); border: none; color: white; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; transition: opacity var(--transition); }
.task-card:hover .task-delete-btn { opacity: 0.8; }
.task-delete-btn:hover { opacity: 1 !important; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.search-box { flex: 1; min-width: 0; padding: 7px 10px; background: var(--bg-lighter); border: 1px solid var(--glass-light); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; transition: border-color var(--transition); }
.search-box:focus { outline: none; border-color: var(--primary); }
.search-wrap { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.search-wrap input { padding-right: 26px !important; }
.search-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 50%; line-height: 1; opacity: 0.5; transition: all var(--transition); }
.search-clear:hover { opacity: 1; color: var(--c-red); }
.filter-btn { padding: 6px 10px; border: 1px solid var(--glass-light); background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-dim); font-size: 11px; transition: all var(--transition); }
.filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.filter-btn:hover { border-color: var(--text-dim); color: var(--text); }
.task-count { font-size: 11px; color: var(--text-dim); }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.dashboard-card { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 16px; transition: box-shadow var(--transition); }
.dashboard-card:hover { box-shadow: var(--shadow-sm); }
.dashboard-card-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 8px; }
.dashboard-card-value { font-size: 26px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.dashboard-card-subtitle { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.domain-distribution { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.domain-count { display: flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--glass); border-radius: var(--radius-sm); font-size: 11px; }
.overdue-section { margin-bottom: 16px; }
.overdue-title { font-size: 13px; font-weight: 600; color: var(--c-red); margin-bottom: 8px; }
.overdue-task { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.2); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 6px; }
.schedule-timeline { display: flex; flex-direction: column; gap: 12px; }
.schedule-day-group { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 14px; }
.schedule-day-title { font-weight: 600; font-size: 13px; margin-bottom: 10px; color: var(--primary); }
.schedule-item { background: var(--bg-lighter); border-left: 3px solid var(--primary); padding: 10px 12px; border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; transition: background 0.15s, transform 0.1s; }
.schedule-item:hover { background: var(--glass-light); transform: translateX(2px); }
.schedule-time { font-weight: 600; min-width: 70px; font-variant-numeric: tabular-nums; }
.schedule-task-name { flex: 1; margin-left: 12px; }
.schedule-duration { color: var(--text-dim); font-size: 11px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--glass-light); padding: 1px; border-radius: var(--radius-md); overflow: hidden; }
.calendar-day-header { background: var(--bg-lighter); padding: 10px; text-align: center; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.calendar-day { background: var(--bg-light); padding: 8px; min-height: 90px; position: relative; cursor: pointer; transition: background var(--transition); }
.calendar-day:hover { background: var(--bg-lighter); }
.calendar-day-number { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.calendar-day-events { font-size: 10px; display: flex; flex-direction: column; gap: 2px; }
.calendar-event { background: var(--primary); color: white; padding: 2px 5px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.calendar-controls { display: flex; gap: 8px; }
.view-selector { display: flex; gap: 4px; }
.view-btn { padding: 6px 10px; border: 1px solid var(--glass-light); background: transparent; color: var(--text-dim); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); font-size: 11px; }
.view-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.view-btn:hover:not(.active) { border-color: var(--text-dim); }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--glass-light); padding: 1px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; min-height: 600px; }
.week-header { background: var(--bg-lighter); padding: 10px; text-align: center; font-weight: 600; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.week-day { background: var(--bg-light); position: relative; }
.week-time-slot { padding: 8px; border-bottom: 1px solid var(--glass); min-height: 55px; position: relative; }
.week-time-slot:hover { background: var(--glass); }
.time-indicator { font-size: 10px; font-weight: 500; color: var(--text-dim); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.week-event { background: var(--primary); color: white; padding: 4px 6px; border-radius: 4px; font-size: 10px; margin-bottom: 2px; cursor: pointer; transition: opacity var(--transition); }
.week-event:hover { opacity: 0.85; }
.week-view-container { position: relative; }
.week-header-row { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.week-view-scroll { max-height: 70vh; overflow-y: auto; }
.kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kanban-column { background: var(--bg-lighter); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 12px; }
.kanban-title { font-weight: 600; margin-bottom: 12px; font-size: 13px; }
.kanban-card { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; cursor: grab; transition: box-shadow var(--transition); }
.kanban-card:hover { box-shadow: var(--shadow-sm); }
.kanban-card:active { cursor: grabbing; }
.kanban-card-title { font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.kanban-card-meta { font-size: 10px; color: var(--text-dim); }
.eisenhower-matrix { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 500px; }
.eisenhower-quad { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 16px; overflow-y: auto; position: relative; }
.eisenhower-quad-title { font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.time-tracker { display: flex; flex-direction: column; gap: 12px; }
.tracker-card { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 14px; }
.tracker-timer { font-size: 32px; font-weight: 700; text-align: center; margin: 16px 0; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tracker-controls { display: flex; gap: 8px; justify-content: center; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.chart-container { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 16px; }
.diary-entry { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; }
.diary-date { font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.diary-text { font-size: 13px; line-height: 1.6; color: var(--text); }
.sleep-quality { display: flex; gap: 4px; margin: 8px 0; }
.sleep-star { font-size: 18px; cursor: pointer; opacity: 0.3; transition: opacity var(--transition); }
.sleep-star.active { opacity: 1; color: var(--c-amber); }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.report-item { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 16px; text-align: center; cursor: pointer; transition: box-shadow var(--transition); }
.report-item:hover { box-shadow: var(--shadow-sm); }
.report-title { font-weight: 600; margin-bottom: 8px; font-size: 13px; }
.report-value { font-size: 26px; font-weight: 700; color: var(--primary); margin: 8px 0; font-variant-numeric: tabular-nums; }
.working-hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.working-hours-card { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 16px; }
.working-hours-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.working-hours-name { font-weight: 600; font-size: 13px; }
.color-picker { width: 28px; height: 28px; border: 1px solid var(--glass-light); border-radius: var(--radius-sm); cursor: pointer; }
.day-toggle-group { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.day-toggle { padding: 6px; border: 1px solid var(--glass-light); background: transparent; border-radius: var(--radius-sm); text-align: center; font-size: 10px; cursor: pointer; transition: all var(--transition); font-weight: 500; }
.day-toggle.active { background: var(--primary); color: white; border-color: var(--primary); }
.time-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.btn-delete { background: var(--danger); color: white; padding: 6px 10px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; transition: opacity var(--transition); }
.btn-delete:hover { opacity: 0.85; }
.btn-add { background: var(--success); color: white; padding: 6px 10px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; transition: opacity var(--transition); }
.btn-add:hover { opacity: 0.85; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.settings-section { background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-md); padding: 16px; }
.settings-section-title { font-weight: 600; font-size: 14px; margin-bottom: 16px; letter-spacing: -0.01em; }
.settings-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--glass); }
.settings-item:last-child { border-bottom: none; }
.toggle-switch { position: relative; width: 44px; height: 22px; background: var(--glass-light); border-radius: 11px; cursor: pointer; transition: all var(--transition); }
.toggle-switch.active { background: var(--primary); }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 9px; transition: all var(--transition); }
.toggle-switch.active .toggle-knob { left: 24px; }
/* v36.101: nền 0.5 alpha hoà vào nền sáng → chữ trắng chỉ ~1.5:1. Nền đặc + tông đậm hơn → ~4.7:1 (AA) cả 2 theme */
.toast { position: fixed; bottom: 20px; right: 20px; background: rgba(30,132,73,0.96); color: white; padding: 12px 18px; border-radius: var(--radius-sm); z-index: 100000; animation: slideIn 0.25s ease-out; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); max-width: min(90vw, 500px); transition: opacity 1s ease-out; pointer-events: auto; backdrop-filter: blur(8px); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.toast.error { background: rgba(178,42,32,0.96); } /* v36.101: đỏ đậm hơn để chữ trắng đạt ~5.4:1 */
.toast.fading { opacity: 0; }
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* v27.87: Shimmer for Top priority (kept subtle) */
@keyframes priTopShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* v27.90: Task blocks — DRAMATIC priority differentiation */
.cal-task-block {
position: absolute;
border-radius: 5px;
font-size: 10px;
padding: 2px 5px;
overflow: hidden;
cursor: pointer;
z-index: 5;
box-sizing: border-box;
border: none;
/* v27.97: left border now set by getPriBgStyle() with priority colors */
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.3;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.cal-task-block:hover {
filter: brightness(1.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
z-index: 12;
}
/* ── Priority visual encoding — v27.97 (Pattern B: domain bg + priority left border) ── */
/* Two visual channels: background color = domain, left border color = priority */
/* Top ⭐ — bold bg + gold 6px border + subtle pulse */
.cal-task-block[data-pri="Top"] {
font-weight: 800;
font-size: 11px;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
animation: topPriorityPulse 2s ease-in-out infinite;
box-shadow: inset 0 0 0 1px rgba(255,215,0,0.3);
}
@keyframes topPriorityPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.82; }
}
.cal-task-block[data-pri="Top"] .cal-task-pri-icon { font-size: 11px; }
.cal-task-block[data-pri="Top"] .cal-task-name { font-size: 11px; font-weight: 800; }
/* High 🔥 — strong bg + red 5px border + bold text */
.cal-task-block[data-pri="High"] {
font-weight: 700;
font-size: 10.5px;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cal-task-block[data-pri="High"] .cal-task-pri-icon { font-size: 10px; }
.cal-task-block[data-pri="High"] .cal-task-name { font-size: 10.5px; }
/* Medium ◆ — medium bg + orange 3px border + normal text */
.cal-task-block[data-pri="Medium"] {
font-weight: 500;
color: rgba(255,255,255,0.92);
}
/* Low ▽ — faded bg + green 2px dashed border + small light text */
/* v36.102: 0.65 alpha × opacity 0.8 ≈ 0.52 chữ trắng, lại tắt luôn text-shadow → nhãn 9px gần như mất chữ.
Giữ shadow + nâng alpha; de-emphasis chuyển sang opacity nhẹ hơn. */
.cal-task-block[data-pri="Low"] {
font-weight: 400;
color: rgba(255,255,255,0.9);
font-size: 9px;
opacity: 0.88;
}
.cal-task-block[data-pri="Low"] .cal-task-name { font-size: 9px; }
/* ── Inner elements ── */
.cal-task-block .cal-task-name {
font-weight: inherit;
font-size: 10px;
line-height: 1.3;
}
.cal-task-block .cal-task-meta {
font-size: 9px;
opacity: 0.85;
margin-top: 1px;
}
.cal-task-block .cal-task-pri-icon {
font-size: 10px;
line-height: 1;
vertical-align: middle;
margin-right: 1px;
}
/* ── Conflict insight badges ── */
.cal-ci-badge {
font-size: 7px;
border-radius: 3px;
padding: 0 3px;
margin-left: 2px;
font-weight: 700;
display: inline-block;
vertical-align: middle;
line-height: 1.4;
}
.cal-ci-badge.badge-changed { background: rgba(255,165,0,0.9); color: #000; }
.cal-ci-badge.badge-overdue { background: rgba(231,76,60,0.95); color: #fff; }
.cal-ci-badge.badge-overlap { background: rgba(155,89,182,0.95); color: #fff; }
.cal-ci-extra {
font-size: 7px;
opacity: 0.95;
margin-top: 1px;
border-radius: 3px;
padding: 1px 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-ci-extra.extra-changed { background: rgba(255,255,255,0.18); }
.cal-ci-extra.extra-overdue { background: rgba(255,255,255,0.18); }
/* ── Event blocks ── */
.user-event-block {
position: absolute;
border-radius: 5px;
font-size: 10px;
padding: 3px 6px;
overflow: hidden;
cursor: pointer;
z-index: 3;
border-left: 4px solid;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.3;
transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.user-event-block:hover {
filter: brightness(1.1);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* ── Light theme tweaks ── */
[data-theme="light"] .cal-task-block {
text-shadow: 0 1px 1px rgba(0,0,0,0.15);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-theme="light"] .cal-task-block:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
/* v36.102: block Low có nền domainColor+"30" (alpha 0.19) — ở theme sáng nó ra tông rất nhạt,
chữ trắng nằm trên = chữ-trắng-nền-trắng (~1.1:1). Theme sáng đổi sang chữ tối. */
[data-theme="light"] .cal-task-block[data-pri="Low"] {
color: var(--text);
text-shadow: none;
}
[data-theme="light"] .cal-ci-extra.extra-changed { background: rgba(0,0,0,0.1); }
[data-theme="light"] .cal-ci-extra.extra-overdue { background: rgba(0,0,0,0.1); }
/* v36.101 (H-css-14): Low/Medium blocks get 19%/41% domain tints (core.js getPriBgStyle) — white text is unreadable on the light grid; working-hour overlays likewise */
[data-theme="light"] .cal-task-block[data-pri="Low"], [data-theme="light"] .cal-task-block[data-pri="Medium"] { color: var(--text); text-shadow: none; }
[data-theme="light"] .cal-block-overlay { color: var(--text-dim); }
@keyframes calHighlightPulse {
0% { box-shadow: 0 0 0 0 rgba(108,99,255,0.7); transform: scale(1); }
50% { box-shadow: 0 0 18px 6px rgba(108,99,255,0.5); transform: scale(1.03); }
100% { box-shadow: 0 0 0 0 rgba(108,99,255,0.7); transform: scale(1); }
}
.cal-highlight-pulse {
animation: calHighlightPulse 0.8s ease-in-out 3;
outline: 3px solid rgba(108,99,255,0.9);
outline-offset: 1px;
z-index: 50 !important;
}
/* v27.111/v27.113: Chain highlight — calendar blocks */
.cal-chain-highlight {
outline: 2px solid rgba(108,99,255,0.8);
outline-offset: 1px;
z-index: 40 !important;
box-shadow: 0 0 12px rgba(108,99,255,0.5) !important;
}
.cal-chain-dim {
opacity: 0.2 !important;
filter: grayscale(0.6);
}
/* v27.113: Chain highlight — task list rows */
.chain-active-row {
animation: chainRowPulse 2s ease-in-out infinite;
}
@keyframes chainRowPulse {
0%, 100% { box-shadow: inset 0 0 0 transparent; }
50% { box-shadow: inset 0 0 12px rgba(108,99,255,0.15); }
}
.chain-active-card {
animation: chainCardPulse 2s ease-in-out infinite;
}
@keyframes chainCardPulse {
0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
50% { box-shadow: 0 2px 16px rgba(108,99,255,0.35); }
}
/* v27.115: SBS calendar edit mode — highlight/dim */
.sbs-cal-edit-highlight {
outline: 2px solid rgba(108,99,255,0.9);
outline-offset: 1px;
z-index: 45 !important;
box-shadow: 0 0 16px rgba(108,99,255,0.6), 0 0 4px rgba(108,99,255,0.8) !important;
animation: sbsEditPulse 1.5s ease-in-out infinite;
}
@keyframes sbsEditPulse {
0%, 100% { box-shadow: 0 0 16px rgba(108,99,255,0.6), 0 0 4px rgba(108,99,255,0.8); }
50% { box-shadow: 0 0 24px rgba(108,99,255,0.8), 0 0 8px rgba(108,99,255,1); }
}
.sbs-cal-edit-dim {
opacity: 0.15 !important;
filter: grayscale(0.8);
pointer-events: none !important;
}
/* v25.10: Search result highlight */
.cal-search-highlight {
animation: calSearchGlow 0.6s ease-in-out 4;
outline: 3px solid rgba(255,165,0,0.95) !important;
outline-offset: 2px;
z-index: 50 !important;
box-shadow: 0 0 12px rgba(255,165,0,0.5) !important;
}
@keyframes calSearchGlow {
0%, 100% { outline-color: rgba(255,165,0,0.95); box-shadow: 0 0 12px rgba(255,165,0,0.5); }
50% { outline-color: rgba(255,200,0,1); box-shadow: 0 0 20px rgba(255,200,0,0.7); }
}
.modal-buttons { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }
.btn-modal { padding: 7px 14px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-weight: 500; font-size: 12px; transition: all var(--transition); }
.btn-modal-primary { background: var(--primary); color: white; }
.btn-modal-primary:hover { background: var(--primary-hover); }
.btn-modal-secondary { background: var(--glass); color: var(--text); }
.btn-modal-secondary:hover { background: var(--glass-light); }
.btn-modal-danger { background: var(--danger); color: white; }
.btn-modal-danger:hover { opacity: 0.85; }
.btn-modal-warning { background: var(--warning); color: #000; }
.btn-modal-warning:hover { opacity: 0.85; }
@media (max-width: 1200px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-auto { grid-template-columns: 1fr; } .analytics-grid { grid-template-columns: 1fr; } .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
.dragging { opacity: 0.7; }
.drop-zone { position: relative; }
.calendar-block { position: absolute; left: 0; right: 0; background: rgba(255,107,157,0.2); border: 1px solid rgba(255,107,157,0.4); padding: 4px; font-size: 10px; overflow: hidden; }
.calendar-block-label { font-weight: 500; color: var(--text); }
.current-time-line { position: absolute; left: 0; right: 0; height: 2px; background: #E74C3C; z-index: 10; }
.current-time-label { position: absolute; left: -40px; top: -8px; font-size: 10px; color: #E74C3C; font-weight: 600; }
.confirmation-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-light); border: 1px solid var(--glass-light); border-radius: var(--radius-lg); padding: 24px; max-width: 400px; z-index: 99999; display: none; box-shadow: var(--shadow-lg); }
.confirmation-modal.active { display: block; }
.confirmation-modal.project-modal { max-width: 550px; max-height: 80vh; overflow-y: auto; }
.confirmation-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); z-index: 99998; display: none; }
.confirmation-overlay.active { display: block; }
.confirmation-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; }
.confirmation-message { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
.confirmation-message.project-modal-content { margin-bottom: 0; font-size: 13px; }
.project-modal-fields { display: grid; gap: 10px; max-height: 65vh; overflow-y: auto; padding-right: 6px; }
.project-modal-section { padding: 12px; background: var(--bg-lighter); border-radius: var(--radius-sm); margin-bottom: 0; }
.project-modal-section-title { font-weight: 600; font-size: 10px; color: var(--primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.6px; }
.confirmation-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.task-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.toolbar-select { padding: 5px 8px; background: var(--glass); border: 1px solid var(--glass-light); color: var(--text); border-radius: var(--radius-sm); font-size: 11px; cursor: pointer; transition: border-color var(--transition); }
.toolbar-select:focus { outline: none; border-color: var(--primary); }
.view-toggle { display: flex; border: 1px solid var(--glass-light); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle-btn { padding: 5px 10px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; transition: all var(--transition); }
.view-toggle-btn.active { background: var(--primary); color: white; }
.task-list-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.task-list-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.task-list-table th { padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); background: var(--bg-lighter); border-bottom: 1px solid var(--glass-light); cursor: pointer; user-select: none; white-space: nowrap; }
.task-list-table th:hover { color: var(--text); }
.task-list-table th.sorted { color: var(--primary); }
.task-list-table td { padding: 8px 10px; border-bottom: 1px solid var(--glass); font-size: 12px; vertical-align: middle; white-space: nowrap; }
.task-list-table td.col-project { white-space: normal; word-break: break-word; min-width: 80px; max-width: 200px; line-height: 1.3; }
.task-list-table .col-check { width: 42px; min-width: 42px; position: sticky; left: 0; z-index: 2; background: var(--bg-lighter); }
.task-list-table td.col-check { background: var(--bg-light); }
.task-list-table th.col-check { z-index: 3; }
.task-list-table .col-name { width: 280px; min-width: 200px; max-width: 40vw; position: sticky; left: 42px; z-index: 2; background: var(--bg-lighter); }
.task-list-table td.col-name { background: var(--bg-light); white-space: normal; word-break: break-word; }
.task-list-table th.col-name { z-index: 3; }
.task-list-table .col-name::after { content: ''; position: absolute; top: 0; right: -6px; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(0,0,0,0.12), transparent); pointer-events: none; }
.task-list-row:hover td.col-check, .task-list-row:hover td.col-name { background: var(--bg-lighter); }
.bulk-edit-row td.col-check, .bulk-edit-row td.col-name { background: var(--bg-lighter) !important; }
.bulk-btn { padding: 2px 6px; border: 1px solid var(--primary); border-radius: 4px; background: rgba(124,116,255,0.1); color: var(--primary); cursor: pointer; font-size: 9px; font-weight: 600; white-space: nowrap; transition: all 0.15s; width: 100%; }
.bulk-btn:hover { background: var(--primary); color: white; }
.bulk-edit-row td { padding: 3px 4px !important; border-bottom: 1px solid var(--primary) !important; }
.task-list-row { cursor: pointer; transition: background var(--transition); }
.task-list-row:hover { background: var(--glass); }
.task-list-num { color: var(--text-dim); font-size: 10px; min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.group-header { padding: 10px 14px; background: var(--bg-lighter); border-radius: var(--radius-sm); margin: 14px 0 8px 0; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.group-count { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.sort-arrow { font-size: 9px; margin-left: 2px; }
/* v26.27: Column resize — visible dividers + drag handles */
.col-resize-handle { position: absolute; top: 2px; right: -4px; bottom: 2px; width: 7px; cursor: col-resize; z-index: 5; display: flex; align-items: center; justify-content: center; }
.col-resize-handle::before { content: ''; width: 1px; height: 60%; background: var(--glass-light); transition: background 0.15s, width 0.15s; }
.col-resize-handle:hover::before, .col-resize-handle.active::before { width: 2px; background: var(--primary); }
.task-list-table th { border-right: 1px solid var(--glass); }
.task-list-table th:last-child { border-right: none; }
.proj-header-row > * { border-right: 1px solid var(--glass); }
.proj-header-row > *:last-child { border-right: none; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
.group-header { cursor: pointer; user-select: none; transition: background var(--transition); }
.group-header:hover { background: var(--glass-light); }
.group-header .collapse-icon { transition: transform 0.2s ease; display: inline-block; }
.group-header.collapsed .collapse-icon { transform: rotate(-90deg); }
.group-content { overflow: hidden; }
.group-content.collapsed { display: none; }
/* v26.31: Google Calendar-style edge resize handles */
.cal-resize-handle { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; z-index: 10; border-radius: 0 0 4px 4px; display: flex; align-items: center; justify-content: center; }
.cal-resize-handle::after { content: ''; width: 24px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.4); transition: background 0.15s, height 0.15s; }
.cal-resize-handle:hover::after { background: rgba(255,255,255,0.8); height: 4px; }
body.cal-resizing, body.cal-resizing * { cursor: ns-resize !important; user-select: none !important; }
/* v26.35/36: Free slots mode — dim all task/event blocks, highlight free slots */
.cal-free-slots-mode [data-move-type="task"],
.cal-free-slots-mode [data-move-type="event"],
.cal-free-slots-mode .user-event-block,
.cal-free-slots-mode .cal-task-block { opacity: 0.18 !important; filter: grayscale(0.6); transition: opacity 0.25s, filter 0.25s; pointer-events: none; }
.cal-free-slots-mode .cal-free-slot { box-shadow: inset 0 0 16px rgba(255,255,255,0.05); }
.cal-block-overlay { opacity: 0.6; color: rgba(255,255,255,0.5); }
.cal-free-slots-mode .cal-block-overlay { opacity: 0.15 !important; }
.user-event-block .event-name { font-weight: 600; font-size: 10px; word-wrap: break-word; overflow-wrap: break-word; }
.user-event-block .user-event-tag { background: rgba(255,255,255,0.2); padding: 1px 5px; border-radius: 8px; font-size: 8px; font-weight: 500; }
.user-event-tag { background: rgba(255,255,255,0.15); padding: 1px 4px; border-radius: 3px; font-size: 8px; }
.conflict-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-light); border: none; border-radius: 0; padding: 0; max-width: none; width: 100%; max-height: 100vh; max-height: 100dvh; overflow: hidden; z-index: 10150; /* v36.101 (H-css-21): was 99999, tied with .confirmation-modal (DOM order → conflict modal painted over confirmations) and hid kbd help/palette; now above .modal (10100), below side-edit (10200), palette (20000), toasts/help (30000+), busy (99990), confirmation (99998/99999) */ display: none; box-shadow: none; }
.conflict-modal.active { display: flex; flex-direction: column; }
#conflictOverlay.confirmation-overlay { z-index: 10149; } /* v36.101: the conflict modal's own backdrop reuses .confirmation-overlay (99998) — keep it just below the conflict modal */
.conflict-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--glass-light); flex-shrink: 0; background: var(--bg); }
.conflict-modal-body { display: flex; flex: 1; overflow: hidden; }
.conflict-panel-left { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; border-right: 1px solid var(--glass-light); }
.conflict-panel-right { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; display: flex; align-items: flex-start; justify-content: center; background: var(--bg); }
.conflict-panel-right .conflict-task-editor { width: 100%; max-width: 600px; }
@media (max-width: 768px) { .conflict-modal-body { flex-direction: column; } .conflict-panel-left, .conflict-panel-right { border-right: none; } .conflict-panel-left { border-bottom: 1px solid var(--glass-light); max-height: 50vh; } }
.conflict-task { padding: 10px; background: var(--bg-lighter); border-radius: var(--radius-sm); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.conflict-recommend { border: 2px solid var(--danger); }
.calendar-scroll-container { overflow-y: auto; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); /* v36.101 */ border-radius: var(--radius-md); }
.cal-task-panel { position: fixed; right: 0; top: 52px; bottom: 0; width: 280px; background: var(--bg-light); border-left: 1px solid var(--glass-light); z-index: 40; overflow-y: auto; padding: 12px; transform: translateX(100%); transition: transform 0.25s ease; }
.cal-task-panel.open { transform: translateX(0); }
.cal-task-panel-item { padding: 7px 9px; background: var(--bg-lighter); border: 1px solid var(--glass-light); border-radius: var(--radius-sm); margin-bottom: 5px; cursor: grab; font-size: 11px; transition: box-shadow var(--transition); }
.cal-task-panel-item:hover { box-shadow: var(--shadow-sm); }
.cal-task-panel-item:active { cursor: grabbing; opacity: 0.7; }
.projects-header { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--bg-lighter); border-radius: var(--radius-sm); margin-bottom: 8px; font-weight: 600; font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.3px; }
.projects-header-col { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 3px; transition: color var(--transition); }
.projects-header-col:hover { color: var(--text); }
.projects-header-col.sorted { color: var(--primary); }
.project-card { cursor: pointer; transition: background var(--transition); padding: 7px 12px; margin-bottom: 2px; border-radius: var(--radius-sm); background: transparent; }
.project-card:hover { background: var(--glass); }
.project-card.dragging { opacity: 0.6; transform: scale(0.98); }
.project-card.drop-over { border: 1.5px solid var(--primary); }
.proj-list-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.project-card-row { display: flex; gap: 0; align-items: center; min-width: 900px; }
.project-card-row > * { flex-shrink: 0; padding: 0 4px; }
.proj-col-check { width: 22px; }
.proj-col-toggle { width: 20px; }
.proj-col-num { width: 42px; text-align: center; font-size: 10px; color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.proj-col-name { flex: 1 1 auto; min-width: 160px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-col-pri { width: 65px; font-size: 10px; text-align: center; }
.proj-col-status { width: 95px; font-size: 10px; text-align: center; }
.proj-col-impact { width: 55px; font-size: 10px; text-align: center; }
.proj-col-diff { width: 55px; font-size: 10px; text-align: center; }
.proj-col-deadline { width: 75px; font-size: 10px; text-align: center; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.proj-col-domain { width: 65px; font-size: 10px; text-align: center; }
.proj-col-timeframe { width: 60px; font-size: 10px; text-align: center; color: var(--text-dim); }
.proj-col-wh { width: 130px; font-size: 9px; text-align: left; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-col-tasks { width: 45px; font-size: 10px; text-align: center; color: var(--text-dim); }
.proj-col-duration { width: 55px; font-size: 10px; text-align: center; color: var(--text-dim); }
.proj-col-source { width: 45px; font-size: 10px; text-align: center; }
.proj-col-created { width: 75px; font-size: 10px; text-align: center; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.proj-col-focusd { width: 40px; font-size: 10px; text-align: center; }
.proj-col-energy { width: 55px; font-size: 10px; text-align: center; }
.proj-col-assign { width: 80px; font-size: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-col-actions { width: 140px; text-align: center; white-space: nowrap; }
.proj-header-row { display: flex; gap: 0; align-items: center; padding: 7px 12px; background: var(--bg-lighter); border-radius: var(--radius-sm); margin-bottom: 4px; border: 1px solid var(--glass); min-width: 900px; }
.proj-header-row > * { flex-shrink: 0; padding: 0 5px; cursor: pointer; font-size: 10px; font-weight: 600; color: var(--text-dim); user-select: none; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.4px; transition: color var(--transition); }
.proj-header-row > *:hover { color: var(--primary); }
.project-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; cursor: pointer; transition: transform 0.2s ease; font-size: 11px; color: var(--text-dim); }
.project-toggle-btn.collapsed { transform: rotate(-90deg); }
.projects-toolbar-expand { display: flex; gap: 6px; margin-bottom: 10px; }
.projects-toolbar-expand button { font-size: 10px; padding: 5px 8px; }
.cal-task-panel-item .panel-task-name { font-weight: 600; margin-bottom: 2px; font-size: 11px; }
.cal-task-panel-item .panel-task-meta { font-size: 9px; color: var(--text-dim); }
.bar-3d {
position: relative;
border-radius: 4px 4px 0 0;
background-image: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 30%, transparent 50%, rgba(0,0,0,0.08) 70%, rgba(0,0,0,0.18) 100%);
box-shadow: 3px 3px 8px rgba(0,0,0,0.45), -1px 0 3px rgba(0,0,0,0.15), inset 0 2px 0 rgba(255,255,255,0.35), inset -2px 0 5px rgba(0,0,0,0.12);
transform: perspective(800px) rotateY(-2deg) rotateX(1deg);
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s;
}
.bar-3d:hover {
transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1.08) translateY(-2px);
box-shadow: 5px 5px 16px rgba(0,0,0,0.55), inset 0 3px 0 rgba(255,255,255,0.45);
filter: brightness(1.12);
}
.pie-3d {
box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35), inset 0 -4px 8px rgba(0,0,0,0.25), inset 0 2px 4px rgba(255,255,255,0.15);
transform: perspective(500px) rotateX(22deg);
transition: transform 0.35s ease, box-shadow 0.35s ease;
position: relative;
}
.pie-3d::after {
content: '';
position: absolute;
top: 6%;
left: 12%;
width: 55%;
height: 35%;
background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.03) 100%);
border-radius: 50%;
pointer-events: none;
}
.pie-3d:hover {
transform: perspective(500px) rotateX(12deg) scale(1.06);
box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.4), inset 0 -4px 8px rgba(0,0,0,0.25);
}
.filter-dropdown { position: relative; display: inline-block; }
.filter-dropdown-btn { display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:10px;background:transparent;border:1px solid var(--glass-light);border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;transition:all var(--transition); }
.filter-dropdown-btn:hover { border-color:var(--text-dim); }
.filter-dropdown-btn.has-filter { border-color:var(--primary);background:rgba(124,116,255,0.08);color:var(--primary); }
.filter-dropdown-menu { display:none;position:absolute;top:100%;left:0;z-index:100;min-width:150px;background:var(--bg-light);border:1px solid var(--glass-light);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:4px;margin-top:4px; }
.filter-dropdown-menu.show { display:block; }
.filter-dropdown-menu label { display:flex;align-items:center;gap:5px;padding:4px 8px;font-size:11px;cursor:pointer;border-radius:4px;color:var(--text);transition:background var(--transition); }
.filter-dropdown-menu label:hover { background:var(--glass); }
.task-schedule-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--glass); font-size: 10px; }
.schedule-slot { padding: 2px 4px; background: rgba(124,116,255,0.1); border-radius: 3px; margin: 2px 0; }
.schedule-warning { color: var(--c-red); font-weight: 600; }
.schedule-success { color: var(--c-emerald); font-weight: 600; }
/* ═══════════ THE ONE THING (TOT) CSS ═══════════ */
.tot-container { padding:20px; max-width:1100px; margin:0 auto; }
.tot-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.tot-header h2 { font-size:20px; font-weight:700; color:var(--text); margin:0; }
.tot-header .tot-badge { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#000; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; }
.tot-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; transition:all var(--transition); }
.tot-card:hover { border-color:var(--primary); box-shadow:0 0 20px rgba(124,116,255,0.1); }
.tot-card-title { font-size:13px; font-weight:700; color:var(--primary); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.tot-input { width:100%; background:var(--bg-lighter); border:1px solid var(--glass); color:var(--text); padding:10px 12px; border-radius:var(--radius-sm); font-size:12px; resize:vertical; min-height:36px; }
.tot-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(124,116,255,0.2); }
.tot-btn { padding:8px 16px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:11px; font-weight:600; transition:all var(--transition); }
.tot-btn-primary { background:var(--primary); color:#fff; }
.tot-btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); }
.tot-btn-ghost { background:transparent; border:1px solid var(--glass-light); color:var(--text-dim); }
.tot-btn-ghost:hover { border-color:var(--primary); color:var(--primary); }
/* GSTTN Domino Chain */
.gsttn-chain { display:flex; gap:4px; overflow-x:auto; padding:12px 0; align-items:stretch; }
.gsttn-tile { min-width:120px; max-width:150px; flex-shrink:0; background:var(--bg-lighter); border:1px solid var(--glass); border-radius:var(--radius-md); padding:10px; position:relative; display:flex; flex-direction:column; }
.gsttn-tile.active { border-color:var(--warning); box-shadow:0 0 15px rgba(251,191,36,0.2); }
.gsttn-tile-label { font-size:9px; font-weight:700; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; letter-spacing:0.5px; }
.gsttn-tile-icon { font-size:18px; margin-bottom:4px; }
.gsttn-tile textarea { flex:1; background:transparent; border:none; color:var(--text); font-size:11px; resize:none; min-height:50px; }
.gsttn-tile textarea:focus { outline:none; }
.gsttn-arrow { display:flex; align-items:center; color:var(--c-amber); font-size:16px; font-weight:700; flex-shrink:0; }
/* 411 Grid */
.tot-411-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tot-411-col { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); padding:14px; }
.tot-411-col-title { font-size:12px; font-weight:700; margin-bottom:10px; padding-bottom:6px; border-bottom:2px solid var(--glass); }
.tot-411-priority { background:var(--bg-lighter); border-radius:var(--radius-sm); padding:8px; margin-bottom:6px; font-size:11px; }
.tot-411-priority input { width:100%; background:transparent; border:none; color:var(--text); font-size:11px; }
.tot-411-priority input:focus { outline:none; }
/* GPS */
.tot-gps-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px; }
.tot-gps-cell { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); padding:14px; }
.tot-gps-cell h4 { font-size:12px; font-weight:700; margin:0 0 8px; }
/* Time Block */
.tot-tb-day { display:grid; grid-template-columns:60px 1fr; gap:8px; margin-bottom:8px; }
.tot-tb-hour { font-size:10px; color:var(--text-dim); text-align:right; padding-top:4px; }
.tot-tb-slot { min-height:28px; background:var(--bg-lighter); border:1px solid var(--glass); border-radius:4px; padding:4px 8px; font-size:10px; cursor:pointer; transition:all var(--transition); }
.tot-tb-slot:hover { border-color:var(--primary); }
.tot-tb-slot.blocked { background:rgba(251,191,36,0.15); border-color:rgba(251,191,36,0.3); }
.tot-tb-slot.protected { background:rgba(124,116,255,0.15); border-color:rgba(124,116,255,0.3); }
@media(max-width:768px) { .tot-411-grid { grid-template-columns:1fr 1fr; } .tot-gps-row { grid-template-columns:1fr; } }
/* ═══════════ AGILE RESULTS (AR) CSS ═══════════ */
.ar-container { padding:20px; max-width:1100px; margin:0 auto; }
.ar-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.ar-header h2 { font-size:20px; font-weight:700; color:var(--text); margin:0; }
.ar-header .ar-badge { background:linear-gradient(135deg,#34d399,#10b981); color:#000; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; }
.ar-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; }
.ar-card:hover { border-color:var(--success); box-shadow:0 0 20px rgba(52,211,153,0.1); }
.ar-card-title { font-size:13px; font-weight:700; color:var(--c-emerald); margin-bottom:8px; }
.ar-input { width:100%; background:var(--bg-lighter); border:1px solid var(--glass); color:var(--text); padding:10px 12px; border-radius:var(--radius-sm); font-size:12px; }
.ar-input:focus { outline:none; border-color:var(--success); }
.ar-btn { padding:8px 16px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:11px; font-weight:600; }
.ar-btn-primary { background:var(--success); color:#000; }
.ar-btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
/* Weekly Rhythm */
.ar-week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.ar-day-col { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); padding:10px; min-height:120px; }
.ar-day-col.today { border-color:var(--success); box-shadow:0 0 12px rgba(52,211,153,0.15); }
.ar-day-col.monday { border-left:3px solid var(--primary); }
.ar-day-col.friday { border-left:3px solid var(--warning); }
.ar-day-label { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.ar-outcome-item { padding:4px 6px; background:var(--bg-lighter); border-radius:4px; font-size:11px; margin-bottom:4px; display:flex; gap:4px; align-items:center; }
.ar-outcome-item.done { opacity:0.5; text-decoration:line-through; }
.ar-outcome-num { width:16px; height:16px; border-radius:50%; background:var(--success); color:#000; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* Rule of 3 */
.ar-r3-levels { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ar-r3-col { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); padding:14px; }
.ar-r3-col-title { font-size:11px; font-weight:700; text-transform:uppercase; margin-bottom:10px; padding-bottom:6px; border-bottom:2px solid var(--glass); }
.ar-r3-slot { padding:8px; background:var(--bg-lighter); border-radius:var(--radius-sm); margin-bottom:6px; }
.ar-r3-slot input { width:100%; background:transparent; border:none; color:var(--text); font-size:11px; }
.ar-r3-slot input:focus { outline:none; }
/* Hot Spots */
.ar-hs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.ar-hs-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); padding:14px; text-align:center; cursor:pointer; transition:all var(--transition); }
.ar-hs-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ar-hs-icon { font-size:28px; margin-bottom:6px; }
.ar-hs-label { font-size:11px; font-weight:600; color:var(--text); }
.ar-hs-bar { height:6px; background:var(--bg-lighter); border-radius:3px; margin-top:8px; overflow:hidden; }
.ar-hs-bar-fill { height:100%; border-radius:3px; transition:width 0.4s ease; }
/* Sprint */
.ar-sprint-ring { width:160px; height:160px; margin:0 auto 16px; position:relative; }
.ar-sprint-ring svg { width:100%; height:100%; }
.ar-sprint-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.ar-sprint-day { font-size:28px; font-weight:800; color:var(--text); }
.ar-sprint-label { font-size:10px; color:var(--text-dim); }
/* Energy */
.ar-energy-bars { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ar-energy-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); padding:16px; text-align:center; }
.ar-energy-emoji { font-size:32px; margin-bottom:8px; }
.ar-energy-slider { width:100%; accent-color:var(--primary); }
.ar-energy-val { font-size:20px; font-weight:700; margin:6px 0; }
@media(max-width:768px) { .ar-week-grid { grid-template-columns:repeat(2,1fr); } .ar-r3-levels { grid-template-columns:1fr 1fr; } }
/* ═══════════ FOCUS INTELLIGENCE (FI) CSS ═══════════ */
.fi-container { padding:20px; max-width:1100px; margin:0 auto; }
.fi-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.fi-header h2 { font-size:20px; font-weight:700; color:var(--text); margin:0; }
.fi-header .fi-badge { background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; }
.fi-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; }
.fi-card:hover { border-color:#a78bfa; box-shadow:0 0 20px rgba(167,139,250,0.1); }
/* Life Cockpit */
.fi-cockpit-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.fi-north-star { background:linear-gradient(135deg,rgba(124,116,255,0.1),rgba(167,139,250,0.1)); border:1px solid rgba(124,116,255,0.2); border-radius:var(--radius-lg); padding:20px; text-align:center; }
.fi-north-star h3 { font-size:14px; color:var(--primary); margin:0 0 8px; }
.fi-ns-text { font-size:12px; color:var(--text); line-height:1.6; }
.fi-kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.fi-kpi { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); padding:12px; text-align:center; }
.fi-kpi-val { font-size:22px; font-weight:800; color:var(--primary); }
.fi-kpi-label { font-size:9px; color:var(--text-dim); text-transform:uppercase; }
/* Convergence */
.fi-conv-center { width:300px; height:300px; margin:0 auto; position:relative; }
.fi-conv-ring { position:absolute; border-radius:50%; border:2px solid; display:flex; align-items:center; justify-content:center; }
.fi-conv-label { font-size:10px; font-weight:600; text-align:center; }
/* Domino Chain Builder */
.fi-domino-builder { display:flex; gap:6px; overflow-x:auto; padding:16px 0; align-items:center; }
.fi-domino-tile { width:110px; min-height:100px; background:var(--bg-lighter); border:2px solid var(--glass); border-radius:var(--radius-md); padding:10px; flex-shrink:0; cursor:pointer; transition:all 0.3s; position:relative; }
.fi-domino-tile:hover { border-color:#a78bfa; transform:translateY(-3px); box-shadow:0 6px 20px rgba(167,139,250,0.2); }
.fi-domino-tile.lit { border-color:var(--warning); box-shadow:0 0 20px rgba(251,191,36,0.3); animation:fi-pulse 1.5s infinite; }
.fi-domino-connector { color:var(--text-dim); font-size:18px; flex-shrink:0; }
@keyframes fi-pulse { 0%,100% { box-shadow:0 0 10px rgba(251,191,36,0.2); } 50% { box-shadow:0 0 25px rgba(251,191,36,0.4); } }
.fi-recommend { background:linear-gradient(135deg,rgba(251,191,36,0.08),rgba(124,116,255,0.08)); border:1px solid rgba(251,191,36,0.2); border-radius:var(--radius-lg); padding:16px; margin-top:14px; }
.fi-recommend h4 { color:var(--c-amber); font-size:13px; margin:0 0 8px; }
.fi-recommend-item { padding:8px 12px; background:var(--bg-light); border-radius:var(--radius-sm); margin-bottom:6px; font-size:11px; display:flex; align-items:center; gap:8px; }
.fi-recommend-score { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
@media(max-width:768px) { .fi-cockpit-grid { grid-template-columns:1fr; } }
/* ═══════════ v17.0 — GTD Horizons + Weekly Review + Polish ═══════════ */
/* === HORIZONS MEGA v20.1 === */
.hz-container { padding:20px; max-width:1200px; margin:0 auto; }
.hz-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.hz-header h2 { font-size:22px; font-weight:700; color:var(--text); margin:0; display:flex; align-items:center; gap:10px; }
.hz-tabs { display:flex; gap:4px; background:var(--glass); border-radius:8px; padding:3px; }
.hz-tab { padding:6px 14px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text-dim); border:none; background:none; transition:all 0.2s; }
.hz-tab:hover { color:var(--text); background:var(--glass); }
.hz-tab.active { background:var(--primary); color:#fff; }
.hz-score-bar { display:flex; align-items:center; gap:16px; padding:14px 20px; background:var(--glass); border-radius:12px; margin-bottom:20px; border:1px solid var(--border); }
.hz-score-ring { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; }
.hz-score-detail { flex:1; }
.hz-score-label { font-size:11px; color:var(--text-dim); margin-bottom:4px; }
.hz-score-progress { height:6px; background:var(--glass); border-radius:3px; overflow:hidden; }
.hz-score-fill { height:100%; border-radius:3px; transition:width 0.6s ease; }
.hz-tower { display:flex; flex-direction:column-reverse; gap:6px; }
.hz-level { border-radius:12px; position:relative; transition:all 0.3s; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.hz-level:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.hz-level-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; user-select:none; }
.hz-level-left { display:flex; align-items:center; gap:12px; }
.hz-level-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; background:rgba(255,255,255,0.15); }
.hz-level-info { }
.hz-level-label { font-size:13px; font-weight:700; letter-spacing:0.3px; }
.hz-level-sublabel { font-size:11px; opacity:0.7; margin-top:1px; }
.hz-level-right { display:flex; align-items:center; gap:10px; }
.hz-level-count { font-size:11px; opacity:0.6; display:flex; align-items:center; gap:4px; }
.hz-level-arrow { font-size:14px; opacity:0.5; transition:transform 0.3s; }
.hz-level.expanded .hz-level-arrow { transform:rotate(180deg); }
.hz-level-body { padding:0 20px 20px; display:none; }
.hz-level.expanded .hz-level-body { display:block; animation:hzSlideDown 0.3s ease; }
@keyframes hzSlideDown { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
.hz-entry-list { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.hz-entry { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:rgba(255,255,255,0.08); border-radius:8px; border:1px solid rgba(255,255,255,0.06); }
.hz-entry-bullet { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); margin-top:4px; flex-shrink:0; }
.hz-entry-text { flex:1; font-size:13px; line-height:1.5; }
.hz-entry-actions { display:flex; gap:4px; flex-shrink:0; }
.hz-entry-btn { width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; background:rgba(255,255,255,0.1); border:none; color:inherit; transition:all 0.2s; }
.hz-entry-btn:hover { background:rgba(255,255,255,0.25); }
.hz-add-row { display:flex; gap:8px; }
.hz-add-input { flex:1; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:inherit; padding:10px 14px; border-radius:8px; font-size:13px; font-family:inherit; }
.hz-add-input:focus { outline:none; border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.15); }
.hz-add-input::placeholder { color:rgba(255,255,255,0.4); }
/* v36.102: ô add ở tab Review (#hzReviewAdd) có nền sáng var(--glass) chứ không phải thẻ gradient tối
→ placeholder trắng 0.4 thành chữ-trắng-nền-trắng ở theme sáng. Dùng --text-dim cho riêng ô này. */
#hzReviewAdd::placeholder { color:var(--text-dim); }
.hz-add-btn { padding:10px 18px; border-radius:8px; border:none; font-size:13px; font-weight:600; cursor:pointer; background:rgba(255,255,255,0.2); color:inherit; transition:all 0.2s; }
.hz-add-btn:hover { background:rgba(255,255,255,0.35); }
.hz-gsttn-link { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(255,255,255,0.06); border-radius:8px; margin-bottom:10px; border:1px dashed rgba(255,255,255,0.15); font-size:12px; }
.hz-gsttn-badge { background:rgba(255,255,255,0.2); padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; }
.hz-stats-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.hz-stat-chip { padding:4px 10px; background:rgba(255,255,255,0.1); border-radius:20px; font-size:10px; display:flex; align-items:center; gap:4px; }
.hz-0 { background:linear-gradient(135deg,#374151,#1f2937); color:#e5e7eb; }
.hz-1 { background:linear-gradient(135deg,#1e40af,#1e3a8a); color:#bfdbfe; }
.hz-2 { background:linear-gradient(135deg,#047857,#065f46); color:#a7f3d0; }
.hz-3 { background:linear-gradient(135deg,#b45309,#92400e); color:#fde68a; }
.hz-4 { background:linear-gradient(135deg,#dc2626,#991b1b); color:#fecaca; }
.hz-5 { background:linear-gradient(135deg,#7c3aed,#5b21b6); color:#ddd6fe; }
/* Radar chart */
.hz-radar-wrap { text-align:center; margin:20px 0; }
.hz-radar-svg { max-width:320px; }
/* Alignment matrix */
.hz-matrix { overflow-x:auto; margin:20px 0; }
.hz-matrix table { width:100%; border-collapse:separate; border-spacing:3px; font-size:12px; }
.hz-matrix th { padding:8px 10px; background:var(--glass); border-radius:6px; font-weight:600; font-size:11px; text-align:center; color:var(--text-dim); }
.hz-matrix td { padding:8px 10px; background:var(--glass); border-radius:6px; text-align:center; transition:all 0.2s; }
.hz-matrix td:hover { background:var(--primary); color:#fff; }
.hz-cell-fill { width:100%; height:6px; background:var(--glass); border-radius:3px; overflow:hidden; }
.hz-cell-bar { height:100%; border-radius:3px; }
/* Review mode */
.hz-review-card { padding:24px; background:var(--glass); border-radius:16px; border:1px solid var(--border); margin-bottom:16px; }
.hz-review-step { font-size:11px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.hz-review-q { font-size:16px; font-weight:600; color:var(--text); margin-bottom:12px; line-height:1.4; }
.hz-review-textarea { width:100%; min-height:100px; background:var(--glass); border:2px solid var(--border); border-radius:12px; padding:16px; color:var(--text); font-size:14px; font-family:inherit; resize:vertical; }
.hz-review-textarea:focus { border-color:var(--primary); outline:none; }
.hz-review-nav { display:flex; justify-content:space-between; margin-top:16px; }
.hz-review-btn { padding:10px 24px; border-radius:8px; border:1px solid var(--border); background:var(--glass); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.hz-review-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.hz-review-btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
/* Weekly Review */
.wr-container { padding:20px; max-width:900px; margin:0 auto; }
.wr-step { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-lg); padding:16px; margin-bottom:12px; }
.wr-step-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; cursor:pointer; }
.wr-step-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.wr-step-title { font-size:13px; font-weight:700; }
.wr-check { display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--bg-lighter); border-radius:var(--radius-sm); margin-bottom:4px; font-size:11px; cursor:pointer; }
.wr-check.done { opacity:0.5; text-decoration:line-through; }
.wr-check input[type=checkbox] { width:16px; height:16px; accent-color:var(--success); }
.wr-progress { height:8px; background:var(--bg-lighter); border-radius:4px; overflow:hidden; margin-top:12px; }
.wr-progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--success)); border-radius:4px; transition:width 0.4s; }
/* Enhanced card hover effects */
.tot-card, .ar-card, .fi-card { transition:all 0.25s ease; }
.tot-card:hover { transform:translateY(-1px); }
.ar-card:hover { transform:translateY(-1px); }
.fi-card:hover { transform:translateY(-1px); }
/* ═══════════ v18.0 — Inbox, Values, 7 Rings ═══════════ */
.inbox-container { padding:20px; max-width:800px; margin:0 auto; }
.inbox-capture { display:flex; gap:8px; margin-bottom:16px; }
.inbox-capture input { flex:1; }
.inbox-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); margin-bottom:6px; transition:all var(--transition); }
.inbox-item:hover { border-color:var(--primary); }
.inbox-item-text { flex:1; font-size:12px; }
.inbox-actions { display:flex; gap:4px; flex-shrink:0; }
.inbox-action-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--glass); background:var(--bg-lighter); color:var(--text-dim); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.inbox-action-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(124,116,255,0.1); }
/* Values */
.values-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.value-card { padding:12px; background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); display:flex; align-items:center; gap:10px; cursor:grab; transition:all var(--transition); }
.value-card:hover { border-color:#a78bfa; transform:translateY(-1px); }
.value-rank { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.value-name { font-size:12px; font-weight:600; }
/* 7 Rings */
.rings-container { padding:20px; max-width:1100px; margin:0 auto; }
.rings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.ring-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-lg); padding:16px; text-align:center; transition:all var(--transition); }
.ring-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ring-icon { font-size:32px; margin-bottom:6px; }
.ring-name { font-size:12px; font-weight:700; margin-bottom:8px; }
.ring-score-ring { width:70px; height:70px; margin:0 auto; position:relative; }
.ring-score-ring svg { width:100%; height:100%; }
.ring-score-val { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:16px; font-weight:800; }
.ring-input { width:100%; margin-top:8px; }
/* ═══════════ v19.0 — Morning Ritual, Decisions, AI Coach ═══════════ */
.morning-container { padding:20px; max-width:700px; margin:0 auto; }
.morning-greeting { text-align:center; padding:24px; background:linear-gradient(135deg,rgba(251,191,36,0.08),rgba(124,116,255,0.08)); border:1px solid rgba(251,191,36,0.15); border-radius:var(--radius-lg); margin-bottom:16px; }
.morning-greeting h2 { font-size:18px; margin:0; }
.morning-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-md); margin-bottom:6px; cursor:pointer; transition:all var(--transition); }
.morning-item:hover { border-color:var(--warning); }
.morning-item.done { opacity:0.5; border-color:var(--success); }
.morning-item .check { width:20px; height:20px; border-radius:50%; border:2px solid var(--glass); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; transition:all var(--transition); }
.morning-item.done .check { background:var(--success); border-color:var(--success); color:#000; }
.decision-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-lg); padding:14px; margin-bottom:10px; }
.decision-outcome { display:inline-block; padding:2px 8px; border-radius:12px; font-size:10px; font-weight:600; }
.coach-insight { padding:14px; background:var(--bg-light); border:1px solid var(--glass); border-radius:var(--radius-lg); margin-bottom:10px; border-left:3px solid; }
.coach-insight h4 { font-size:12px; font-weight:700; margin:0 0 6px; }
.coach-insight p { font-size:11px; color:var(--text-dim); margin:0; line-height:1.5; }
/* === v21.0 — ENHANCED MODULES === */
.chain-viz { display:flex; flex-direction:column; gap:2px; margin:12px 0; }
.chain-viz-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; transition:all 0.2s; }
.chain-viz-row:hover { background:var(--glass); }
.chain-viz-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.chain-viz-dot.filled { box-shadow: 0 0 8px currentColor; }
.chain-viz-dot.empty { opacity:0.3; border:2px dashed currentColor; background:transparent !important; }
.chain-viz-line { width:2px; height:8px; margin-left:5px; background:var(--border); }
.chain-viz-text { font-size:12px; flex:1; }
.chain-viz-label { font-size:10px; color:var(--text-dim); width:70px; flex-shrink:0; }
/* Energy sparkline */
.energy-spark { display:flex; align-items:flex-end; gap:2px; height:40px; }
.energy-spark-bar { flex:1; border-radius:2px 2px 0 0; transition:height 0.3s; min-width:8px; }
/* Sprint momentum */
.sprint-streak { display:flex; align-items:center; gap:6px; padding:8px 14px; background:var(--glass); border-radius:8px; margin-top:8px; }
.sprint-flame { font-size:18px; }
.sprint-streak-text { font-size:13px; font-weight:600; }
.sprint-streak-sub { font-size:10px; color:var(--text-dim); }
/* TimeBlock enhanced */
.tb-visual { display:flex; gap:1px; height:20px; border-radius:4px; overflow:hidden; margin-bottom:16px; }
.tb-visual-slot { flex:1; transition:all 0.2s; cursor:pointer; }
.tb-visual-slot.empty { background:var(--glass); }
.tb-visual-slot.blocked { background:var(--primary); opacity:0.5; }
.tb-visual-slot.protected { background:var(--warning); }
.tb-visual-slot:hover { opacity:0.8; transform:scaleY(1.3); }
/* 411 completion */
.tot-411-check { position:absolute; top:8px; right:8px; font-size:14px; }
.tot-411-col { position:relative; }
/* Module transition */
.ar-container, .tot-container { animation: fadeSlideIn 0.3s ease; }
/* === v20.0 — FINAL POLISH === */
/* System Status */
.sys-status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.sys-status-card { background:var(--glass); border-radius:12px; padding:20px; border:1px solid var(--border); }
.sys-status-card h3 { margin:0 0 12px; font-size:15px; color:var(--primary); display:flex; align-items:center; gap:8px; }
.sys-health { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.sys-health-ring { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
.sys-health-good { background:rgba(46,204,113,0.15); color:#2ecc71; border:3px solid #2ecc71; }
.sys-health-warn { background:rgba(241,196,15,0.15); color:#f1c40f; border:3px solid #f1c40f; }
.sys-health-bad { background:rgba(231,76,60,0.15); color:#e74c3c; border:3px solid #e74c3c; }
.sys-metric { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
.sys-metric:last-child { border-bottom:none; }
.sys-metric-val { font-weight:600; color:var(--text); }
.sys-actions { margin-top:12px; }
.sys-actions button { font-size:12px; padding:4px 12px; border-radius:6px; border:1px solid var(--border); background:var(--glass); color:var(--text); cursor:pointer; margin-right:6px; }
.sys-actions button:hover { background:var(--primary); color:#fff; }
/* Quick Capture */
.qc-wrap { max-width:700px; margin:0 auto; }
.qc-input-area { position:relative; margin-bottom:24px; }
.qc-input-area textarea { width:100%; min-height:120px; background:var(--glass); border:2px solid var(--border); border-radius:12px; padding:16px; color:var(--text); font-size:15px; resize:vertical; font-family:inherit; }
.qc-input-area textarea:focus { border-color:var(--primary); outline:none; }
.qc-route-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.qc-route { background:var(--glass); border:2px solid var(--border); border-radius:12px; padding:16px; text-align:center; cursor:pointer; transition:all 0.2s; }
.qc-route:hover { border-color:var(--primary); transform:translateY(-2px); }
.qc-route.active { border-color:var(--primary); background:rgba(99,102,241,0.1); }
.qc-route-icon { font-size:28px; margin-bottom:8px; }
.qc-route-label { font-size:13px; font-weight:600; }
.qc-route-desc { font-size:11px; color:var(--text-dim); margin-top:4px; }
.qc-recent { margin-top:24px; }
.qc-recent-item { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--glass); border-radius:8px; margin-bottom:8px; border:1px solid var(--border); }
.qc-recent-badge { font-size:10px; padding:2px 8px; border-radius:4px; font-weight:600; }
/* Nexus Enhancement */
.nx-gsttn-overlay { position:absolute; top:8px; right:8px; background:var(--glass-heavy); border-radius:8px; padding:12px; max-width:220px; font-size:12px; border:1px solid var(--border); z-index:10; transition:background 0.3s, border-color 0.3s, opacity 0.3s; max-height:calc(100vh - 80px); overflow-y:auto; }
/* v36.101: nút thu gọn trong overlay dùng inline color trắng (fi.js) → chìm trên nền sáng, ép màu theo theme */
[data-theme="light"] .nx-gsttn-overlay #nxGSTTNCollapseBtn { color: var(--text-dim) !important; }
/* v36.36: GSTTN overlay in fullscreen — no longer force-hidden; JS controls via display:none/'' */
/* Removed: .nx-fullscreen .nx-gsttn-overlay { display:none !important; } */
.sidebar-collapsed .nx-gsttn-overlay { background:rgba(10,14,28,0.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-color:rgba(255,255,255,0.04); }
/* v36.101: theme sáng — chữ var(--text) là màu tối, nền tối 0.35 ở trên gây chữ-tối-nền-tối → đổi sang nền sáng */
[data-theme="light"] .sidebar-collapsed .nx-gsttn-overlay { background:rgba(255,255,255,0.90); border-color:rgba(0,0,0,0.10); }
.nx-gsttn-chain { display:flex; flex-direction:column; gap:2px; }
/* v35.37: Horizontal mode for GSTTN chain */
.nx-gsttn-chain.nx-gsttn-horizontal { flex-direction:row-reverse; overflow-x:auto; gap:1px; padding:4px 0; }
.nx-gsttn-chain.nx-gsttn-horizontal .nx-gsttn-link { flex-direction:column; padding:4px 6px; text-align:center; min-width:60px; gap:3px; }
.nx-gsttn-chain.nx-gsttn-horizontal .nx-gsttn-link span { margin-right:0; font-size:9px !important; }
.nx-gsttn-link { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; cursor:pointer; transition:background 0.15s, box-shadow 0.15s; position:relative; }
.nx-gsttn-link:hover { background:rgba(99,102,241,0.18); box-shadow:0 0 8px rgba(99,102,241,0.15); }
.nx-gsttn-link.filled { color:var(--primary); font-weight:600; }
/* v36.102: bỏ opacity:0.5 — --text-dim nhân 0.5 chỉ còn ~2.2:1 ở CẢ 2 theme, các bậc chưa điền đọc không ra. --text-dim trần đã đạt 5.1-6.0:1 */
.nx-gsttn-link.empty { color:var(--text-dim); }
/* v35.18: GSTTN milestone node dots */
.nx-gsttn-node { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:2px solid currentColor; margin-right:4px; flex-shrink:0; transition:transform 0.2s; }
.nx-gsttn-link:hover .nx-gsttn-node { transform:scale(1.25); }
@keyframes nxPulseNow { 0%,100% { box-shadow:0 0 4px rgba(255,200,60,0.4); opacity:0.85; } 50% { box-shadow:0 0 14px rgba(255,200,60,0.9); opacity:1; } }
.nx-gsttn-node.pulse { animation: nxPulseNow 1.2s ease-in-out infinite; }
.nx-recommend { background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(168,85,247,0.1)); border:1px solid rgba(99,102,241,0.3); border-radius:8px; padding:10px; margin-top:10px; }
.nx-recommend-title { font-size:11px; font-weight:700; color:var(--primary); margin-bottom:6px; display:flex; align-items:center; gap:4px; }
.nx-recommend-item { font-size:11px; padding:3px 4px; display:flex; align-items:center; gap:6px; border-radius:4px; cursor:pointer; transition:background 0.15s; }
.nx-recommend-item:hover { background:rgba(99,102,241,0.15); }
.nx-recommend-score { background:var(--primary); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; font-weight:600; }
/* v35.18: Chain/Relation sections */
.nx-chain-section { margin-top:10px; }
.nx-chain-section-title { font-size:10px; font-weight:600; color:var(--text-dim); /* v36.101: reused by fi.js inside light cards — white was invisible */ text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.nx-chain-item { font-size:11px; padding:3px 6px; display:flex; align-items:center; gap:5px; border-radius:4px; cursor:pointer; transition:background 0.15s; border-left:2px solid transparent; }
.nx-chain-item:hover { background:rgba(255,180,60,0.12); }
.nx-rel-item { font-size:11px; padding:3px 6px; display:flex; align-items:center; gap:5px; border-radius:4px; cursor:pointer; transition:background 0.15s; border-left:2px solid transparent; }
.nx-rel-item:hover { background:rgba(108,200,239,0.12); }
/* v35.18: Play button for domino sequence */
.nx-play-btn { background:none; border:1px solid rgba(99,102,241,0.3); border-radius:4px; color:var(--primary); font-size:10px; cursor:pointer; padding:1px 6px; transition:all 0.15s; }
.nx-play-btn:hover { background:var(--primary); color:#fff; }
/* v35.62: Sphere breadcrumb bar */
.nx-sphere-breadcrumb { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:2px; background:rgba(10,14,28,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:4px 10px; font-size:12px; color:rgba(255,255,255,0.7); z-index:20; pointer-events:auto; white-space:nowrap; max-width:80%; overflow-x:auto; transition:opacity 0.25s; }
.nx-sphere-breadcrumb:empty { display:none; }
.nx-breadcrumb-item { padding:3px 8px; border-radius:5px; cursor:pointer; transition:background 0.15s, color 0.15s; color:rgba(255,255,255,0.55); font-weight:500; }
.nx-breadcrumb-item:hover { background:rgba(99,102,241,0.2); color:rgba(255,255,255,0.9); }
.nx-breadcrumb-item.active { background:rgba(99,102,241,0.35); color:#fff; font-weight:600; }
.nx-breadcrumb-sep { color:rgba(255,255,255,0.2); margin:0 1px; font-size:10px; }
.nx-sphere-cycle-badge { position:absolute; top:-8px; right:-8px; background:rgba(99,102,241,0.9); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; font-weight:600; pointer-events:none; }
/* v35.64: ORBIT 3D Mode — Three.js WebGL renderer HUD */
.nx-orbit-breadcrumb { position:absolute; bottom:68px; left:50%; transform:translateX(-50%); z-index:20;
display:flex; align-items:center; gap:0; background:rgba(7,7,20,0.92);
border:0.5px solid rgba(255,255,255,0.1); border-radius:9px; padding:5px 10px;
font-size:11px; max-width:700px; pointer-events:none; transition:opacity .22s; opacity:0; }
.nx-orbit-breadcrumb.show { opacity:1; pointer-events:auto; }
.nx-orbit-bc-item { color:rgba(255,255,255,0.4); cursor:pointer; pointer-events:auto; padding:2px 6px; border-radius:5px; transition:background .15s; white-space:nowrap; }
.nx-orbit-bc-item:hover { background:rgba(255,255,255,0.09); }
.nx-orbit-bc-item.active { font-weight:500; }
.nx-orbit-bc-sep { color:rgba(255,255,255,0.2); padding:0 2px; }
.nx-orbit-status-bar { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); z-index:20;
background:rgba(7,7,20,0.9); border:0.5px solid rgba(255,255,255,0.1); border-radius:8px;
padding:5px 14px; font-size:11px; color:rgba(255,255,255,0.65); pointer-events:none; white-space:nowrap; transition:color .2s; }
.nx-orbit-dot-tip { position:fixed; pointer-events:none; z-index:30; background:rgba(7,7,20,0.95);
border:0.5px solid rgba(255,255,255,0.13); border-radius:8px; padding:7px 12px;
font-size:11px; color:#fff; max-width:210px; line-height:1.65; }
.nx-orbit-dt-name { font-weight:500; margin-bottom:2px; }
.nx-orbit-dt-meta { color:rgba(255,255,255,0.42); font-size:10px; }
.nx-orbit-mode-badge { position:absolute; top:12px; left:12px; z-index:25;
background:rgba(250,204,21,0.14); border:0.5px solid rgba(250,204,21,0.35); border-radius:7px;
padding:4px 11px; font-size:11px; color:#facc15; font-weight:600; pointer-events:none; }
.nx-orbit-task-panel { position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:25; width:228px;
background:rgba(7,7,20,0.97); border:0.5px solid rgba(255,255,255,0.12); border-radius:12px;
overflow:hidden; opacity:0; pointer-events:none; transition:opacity .2s; display:flex; flex-direction:column; }
.nx-orbit-task-panel.show { opacity:1; pointer-events:auto; }
.nx-orbit-tp-close { position:absolute; top:8px; right:9px; background:none; border:none;
color:rgba(255,255,255,0.3); font-size:16px; cursor:pointer; padding:2px 6px; line-height:1; border-radius:4px; }
.nx-orbit-tp-close:hover { color:#fff; background:rgba(255,255,255,0.08); }
.nx-orbit-tp-header { padding:12px 14px 9px; border-bottom:0.5px solid rgba(255,255,255,0.08); }
.nx-orbit-tp-name { font-size:13px; font-weight:500; color:#fff; margin-bottom:3px; }
.nx-orbit-tp-proj { font-size:10px; color:rgba(255,255,255,0.38); }
.nx-orbit-tp-body { padding:10px 14px; display:flex; flex-direction:column; gap:9px; }
.nx-orbit-tp-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.nx-orbit-tp-lbl { color:rgba(255,255,255,0.38); }
.nx-orbit-tp-val { color:#fff; font-weight:500; }
.nx-orbit-lev-bar { display:flex; gap:3px; }
.nx-orbit-lev-pip { width:14px; height:4px; border-radius:2px; background:rgba(255,255,255,0.1); }
.nx-orbit-lev-pip.on { background:#facc15; }
.nx-orbit-tp-hint { padding:8px 14px 10px; border-top:0.5px solid rgba(255,255,255,0.06);
font-size:10px; color:rgba(255,255,255,0.3); line-height:1.6; }
.nx-orbit-ctrl { position:absolute; bottom:68px; right:12px; z-index:20; display:flex; flex-direction:column; gap:5px; }
.nx-orbit-ctrl-btn { background:rgba(255,255,255,0.05); border:0.5px solid rgba(255,255,255,0.14);
border-radius:6px; color:rgba(255,255,255,0.68); padding:5px 12px; font-size:11px; cursor:pointer; }
.nx-orbit-ctrl-btn:hover { background:rgba(255,255,255,0.11); }
.nx-orbit-ctrl-btn.on { background:rgba(250,204,21,0.13); border-color:rgba(250,204,21,0.4); color:#facc15; }
.nx-orbit-hint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
font-size:10px; color:rgba(255,255,255,0.22); pointer-events:none; white-space:nowrap; z-index:20; }
/* Global polish */
.sidebar-item { transition: all 0.15s ease; }
.sidebar-item:hover { transform: translateX(3px); }
.page-header { animation: fadeSlideIn 0.3s ease; }
/* v36.101 (H-css-24): duplicate @keyframes fadeSlideIn (translateY(-8px)) removed — the later v28.2 definition always won */
.glass-card, .sys-status-card, .qc-route { transition: all 0.2s ease; }
.glass-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
/* ═══ v27.54: Mobile Calendar Action Sidebar ═══ */
.cal-mobile-sidebar-actions { display: none; }
@media (max-width: 768px) {
.cal-mobile-sidebar-actions {
display: block; padding: 8px 10px; border-bottom: 1px solid var(--glass-light); margin-bottom: 8px;
}
.cal-mobile-sidebar-actions .cal-msb-title {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
color: var(--text-dim); margin-bottom: 6px; padding: 0 4px;
}
.cal-mobile-sidebar-actions .cal-msb-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.cal-mobile-sidebar-actions .cal-msb-btn {
display: flex; align-items: center; justify-content: center; gap: 4px;
padding: 10px 6px; border: 1px solid var(--glass-light); border-radius: 10px;
background: var(--glass); color: var(--text); font-size: 11px; font-weight: 600;
cursor: pointer; transition: all 0.15s; text-align: center;
-webkit-tap-highlight-color: transparent; line-height: 1.2;
}
.cal-mobile-sidebar-actions .cal-msb-btn:active { transform: scale(0.95); background: var(--primary); color: #fff; }
.cal-mobile-sidebar-actions .cal-msb-btn.msb-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-mobile-sidebar-actions .cal-msb-btn.msb-accent { background: linear-gradient(135deg,#7c3aed,#3b82f6); color: #fff; border-color: transparent; }
.cal-mobile-sidebar-actions .cal-msb-btn.msb-warning { background: var(--warning); color: #000; border-color: var(--warning); }
.cal-mobile-sidebar-actions .cal-msb-btn.msb-success { background: var(--success); color: #fff; border-color: var(--success); }
/* v27.55: View switching row (inline within action grid) */
.cal-mobile-sidebar-actions .cal-msb-viewrow {
grid-column: 1 / -1; display: flex; gap: 3px; background: var(--glass); border-radius: 10px;
padding: 3px; margin-bottom: 2px;
}
.cal-mobile-sidebar-actions .cal-msb-vr-btn {
flex: 1; padding: 7px 2px; border: none; border-radius: 8px;
background: transparent; color: var(--text-dim); font-size: 10px; font-weight: 600;
cursor: pointer; transition: all 0.15s; text-align: center;
-webkit-tap-highlight-color: transparent;
}
.cal-mobile-sidebar-actions .cal-msb-vr-btn:active { background: var(--glass-light); }
.cal-mobile-sidebar-actions .cal-msb-vr-btn.msb-vr-active {
background: var(--primary); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* v27.54: Filter mega-menu on mobile — full screen overlay */
.cal-filter-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
z-index: 11000; display: flex; align-items: flex-end; justify-content: center;
}
.cal-filter-panel {
width: 100%; max-height: 85vh; background: var(--bg-light);
border-radius: 16px 16px 0 0; padding: 16px; overflow-y: auto;
box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
animation: slideUpFilter 0.25s ease-out;
}
@keyframes slideUpFilter { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cal-filter-panel .cfp-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--glass-light);
}
.cal-filter-panel .cfp-title { font-size: 16px; font-weight: 700; }
.cal-filter-panel .cfp-close {
width: 32px; height: 32px; border-radius: 50%; border: none;
background: var(--glass); color: var(--text); font-size: 18px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cal-filter-panel .cfp-section { margin-bottom: 16px; }
.cal-filter-panel .cfp-section-title {
font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 8px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.cal-filter-panel .cfp-chips {
display: flex; flex-wrap: wrap; gap: 8px;
}
.cal-filter-panel .cfp-chip {
padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
border: 1px solid var(--glass-light); background: var(--glass);
color: var(--text); cursor: pointer; transition: all 0.15s;
-webkit-tap-highlight-color: transparent;
}
.cal-filter-panel .cfp-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-filter-panel .cfp-chip:active { transform: scale(0.95); }
.cal-filter-panel .cfp-actions {
display: flex; gap: 8px; margin-top: 16px; padding-top: 12px;
border-top: 1px solid var(--glass-light);
}
.cal-filter-panel .cfp-actions button {
flex: 1; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
cursor: pointer; border: none; transition: all 0.15s;
}
.cal-filter-panel .cfp-apply { background: var(--primary); color: #fff; }
.cal-filter-panel .cfp-clear { background: var(--glass); color: var(--text); }
}
/* ═══ v24.0 — Step-by-Step Scheduler ═══ */
.sbs-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:9999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.sbs-overlay.sbs-split-mode { justify-content:flex-start; padding-left:10px; }
.sbs-split-mode .sbs-container { max-width:50vw; width:50vw; margin-right:0; }
.sbs-edit-panel { position:fixed; top:2vh; right:1vw; width:46vw; max-height:96vh; background:var(--bg); border-radius:16px; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,0.4); z-index:10001; overflow-y:auto; padding:20px; }
.sbs-sub-right { position:fixed; top:2vh; right:1vw; width:46vw; max-height:96vh; background:var(--bg); border-radius:16px; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,0.4); z-index:10001; overflow-y:auto; padding:20px; }
@media (max-width: 768px) {
.sbs-sub-right { top:0; left:0; right:0; bottom:0; width:100%; max-height:100vh; max-height:100dvh; /* v36.101 */ border-radius:0; padding:14px 12px; -webkit-overflow-scrolling:touch; }
.sbs-split-mode .sbs-container { max-width:100vw; width:100vw; }
/* v32.6: Compact all buttons inside conflict sub-panel on mobile */
.sbs-sub-right button { min-height: auto !important; }
.sbs-sub-right .btn-primary { padding: 8px 14px !important; font-size: 11px !important; }
.sbs-sub-right input[type="checkbox"] { min-height: auto !important; min-width: auto !important; width: 18px !important; height: 18px !important; }
}
.sbs-container { width:95%; max-width:900px; max-height:90vh; background:var(--bg); border-radius:16px; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,0.4); display:flex; flex-direction:column; overflow:hidden; }
.sbs-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.sbs-header h3 { margin:0; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.sbs-progress { display:flex; align-items:center; gap:10px; }
.sbs-progress-bar { width:200px; height:6px; background:var(--glass); border-radius:3px; overflow:hidden; }
.sbs-progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--success)); border-radius:3px; transition:width 0.4s; }
.sbs-progress-text { font-size:11px; color:var(--text-dim); white-space:nowrap; }
.sbs-body { flex:1; overflow-y:auto; padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sbs-task-panel { }
.sbs-calendar-panel { overflow-y:auto; max-height:calc(100vh - 200px); max-height:calc(100dvh - 200px); /* v36.101 */ scroll-behavior:smooth; }
.sbs-task-card { padding:16px; background:var(--glass); border-radius:12px; border:2px solid var(--primary); }
.sbs-task-name { font-size:16px; font-weight:700; color:var(--text); margin-bottom:8px; }
.sbs-task-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.sbs-task-badge { padding:3px 8px; border-radius:6px; font-size:10px; font-weight:600; }
.sbs-task-detail { font-size:11px; color:var(--text-dim); line-height:1.6; }
.sbs-placement { margin-top:12px; padding:12px; background:var(--bg-light); border-radius:8px; border:1px solid var(--border); }
.sbs-placement-title { font-size:11px; font-weight:700; color:var(--c-emerald); margin-bottom:6px; }
.sbs-placement-block { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--glass); border-radius:6px; margin-bottom:4px; font-size:12px; }
.sbs-placement-block .time { font-weight:700; color:var(--primary); min-width:110px; }
.sbs-placement-block .dur { color:var(--text-dim); font-size:10px; }
.sbs-no-placement { color:var(--c-red); font-weight:600; font-size:12px; padding:8px; background:rgba(239,68,68,0.08); border-radius:6px; }
.sbs-cal-mini { font-size:11px; }
.sbs-cal-day { padding:0 0 0 0; border-bottom:1px solid var(--glass); position:relative; }
.sbs-cal-day-label { font-weight:700; color:var(--text); font-size:12px; margin-bottom:0; position:sticky; top:0; z-index:5; padding:6px 10px; background:var(--bg-light); border-bottom:1px solid var(--glass-light); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sbs-cal-day.weekend .sbs-cal-day-label { background:rgba(255,165,0,0.08); border-left:3px solid #FFA500; color:#FFA500; }
.sbs-cal-day.weekend { background:rgba(255,165,0,0.03); }
.sbs-cal-day-content { padding:6px 6px 8px 6px; }
.sbs-cal-period { margin:4px 0; padding:4px 6px; border-radius:6px; }
.sbs-cal-period-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; padding:1px 6px; border-radius:3px; display:inline-block; }
.sbs-cal-entries { display:flex; flex-direction:column; gap:2px; }
.sbs-cal-entry { padding:2px 6px; border-radius:3px; font-size:10px; display:flex; align-items:center; gap:4px; }
.sbs-cal-entry.cb-entry { opacity:0.35; font-size:9px; font-style:italic; color:var(--text-dim); }
.sbs-cal-entry.cb-entry.overlapped { background:rgba(231,76,60,0.25);border:1px dashed var(--danger);color:var(--c-red);opacity:0.85;font-style:normal; }
.sbs-cal-entry.task-entry { padding:4px 8px; border-radius:5px; font-weight:600; border-left:3px solid transparent; }
.sbs-cal-entry.task-entry.existing { background:rgba(124,116,255,0.18); color:var(--text); border-left-color:var(--primary); box-shadow:0 1px 3px rgba(124,116,255,0.15); }
.sbs-cal-entry.task-entry.new { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; font-weight:700; font-size:11px; border-left-color:#fff; box-shadow:0 2px 12px rgba(124,116,255,0.5); animation:sbsPulse 1s ease-in-out; position:relative; }
.sbs-cal-block { padding:3px 8px; border-radius:4px; font-size:10px; }
.sbs-cal-block.existing { background:var(--glass); color:var(--text-dim); }
.sbs-cal-block.new { background:var(--primary); color:#fff; font-weight:600; animation:sbsPulse 1s ease-in-out; }
@keyframes sbsPulse { 0%{transform:scale(0.9);opacity:0;} 50%{transform:scale(1.05);} 100%{transform:scale(1);opacity:1;} }
/* v27.119: No-slot confirm pulse */
@keyframes sbsNoSlotPulse { 0%{transform:translate(-50%,-50%) scale(0.9);opacity:0;} 30%{transform:translate(-50%,-50%) scale(1.08);opacity:1;} 100%{transform:translate(-50%,-50%) scale(1);opacity:1;} }
/* v27.59: Prevent double-tap zoom on SBS panel buttons */
#sbsCalPanel button, #sbsCalResolvePopup button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 768px) {
#sbsCalPanel button, #sbsCalResolvePopup button { min-height: auto !important; font-size: 11px !important; padding: 6px 10px !important; }
#sbsCalPanel input[type="checkbox"], #sbsCalResolvePopup input[type="checkbox"] { min-height: auto !important; min-width: auto !important; width: 18px !important; height: 18px !important; }
}
.sbs-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:8px; }
.sbs-footer-left { display:flex; gap:8px; }
.sbs-footer-right { display:flex; gap:8px; }
.sbs-btn { padding:8px 18px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--glass); color:var(--text); transition:all 0.2s; display:flex; align-items:center; gap:6px; }
.sbs-btn:hover { background:var(--bg-lighter); }
.sbs-btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.sbs-btn.primary:hover { opacity:0.9; }
.sbs-btn.danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.sbs-btn.success { background:var(--success); color:#fff; border-color:var(--success); }
.sbs-btn .key { padding:1px 5px; background:var(--glass-light); /* v36.101: white badge vanished on light glass buttons */ border-radius:3px; font-size:9px; }
.sbs-status-skip { opacity:0.4; border-color:var(--danger); border-style:dashed; }
@media(max-width:768px) { .sbs-body { grid-template-columns:1fr; } }
/* ═══ v23.0 UPGRADED MODULE CSS ═══ */
/* GTD Inbox Pro */
.inbox-pro-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.inbox-pro-stats { display:flex; gap:12px; }
.inbox-pro-stat { padding:6px 12px; background:var(--glass); border-radius:8px; font-size:11px; display:flex; align-items:center; gap:6px; }
.inbox-pro-stat .num { font-size:16px; font-weight:700; }
.inbox-pro-capture { display:flex; gap:8px; margin-bottom:16px; }
.inbox-pro-capture input { flex:1; padding:12px 16px; background:var(--glass); border:2px solid var(--border); border-radius:12px; color:var(--text); font-size:14px; font-family:inherit; transition:border-color 0.3s; }
.inbox-pro-capture input:focus { border-color:var(--primary); outline:none; }
.inbox-pro-filters { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.inbox-pro-filter { padding:4px 10px; border-radius:20px; font-size:10px; font-weight:600; cursor:pointer; background:var(--glass); border:1px solid var(--border); color:var(--text-dim); transition:all 0.2s; }
.inbox-pro-filter.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.inbox-pro-item { display:flex; align-items:stretch; gap:0; background:var(--bg-light); border:1px solid var(--glass); border-radius:12px; margin-bottom:8px; overflow:hidden; transition:all 0.3s; }
.inbox-pro-item:hover { border-color:var(--primary); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.inbox-pro-item-priority { width:4px; flex-shrink:0; }
.inbox-pro-item-body { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.inbox-pro-item-text { font-size:13px; font-weight:500; color:var(--text); }
.inbox-pro-item-meta { display:flex; gap:6px; align-items:center; }
.inbox-pro-tag { padding:2px 6px; border-radius:4px; font-size:9px; font-weight:600; }
.inbox-pro-actions { display:flex; align-items:center; gap:2px; padding:0 8px; }
.inbox-pro-action { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; border:none; background:transparent; color:var(--text-dim); transition:all 0.2s; }
.inbox-pro-action:hover { background:var(--glass); color:var(--primary); }
.inbox-pro-empty { text-align:center; padding:60px 20px; }
.inbox-pro-empty-icon { font-size:48px; margin-bottom:12px; }
/* Values Pro */
.values-pro-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.values-pro-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.values-pro-card { padding:14px; background:var(--bg-light); border:1px solid var(--glass); border-radius:12px; display:flex; align-items:flex-start; gap:12px; transition:all 0.3s; position:relative; }
.values-pro-card:hover { border-color:var(--primary); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.values-pro-card.top3 { border-left:3px solid; }
.values-pro-rank { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
.values-pro-content { flex:1; min-width:0; }
.values-pro-name { font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.values-pro-move { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.values-pro-move-btn { width:22px; height:18px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; border:none; background:var(--glass); color:var(--text-dim); transition:all 0.2s; }
.values-pro-move-btn:hover { background:var(--primary); color:#fff; }
.values-pro-score { display:flex; align-items:center; gap:6px; margin-top:6px; }
.values-pro-bar { flex:1; height:4px; background:var(--glass); border-radius:2px; overflow:hidden; }
.values-pro-fill { height:100%; border-radius:2px; transition:width 0.3s; }
.values-pro-spotlight { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.values-pro-medal { text-align:center; padding:16px; background:var(--glass); border-radius:16px; border:2px solid; }
/* Rings Pro */
.rings-pro-trend { display:flex; align-items:flex-end; gap:3px; height:40px; margin-top:8px; }
.rings-pro-trend-bar { flex:1; border-radius:2px 2px 0 0; min-width:3px; transition:height 0.3s; }
.rings-pro-action { width:100%; padding:6px 8px; background:var(--glass); border:1px solid var(--border); color:var(--text); border-radius:6px; font-size:10px; margin-top:4px; font-family:inherit; }
.rings-pro-summary { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-top:16px; }
.rings-pro-summary-item { padding:10px; background:var(--glass); border-radius:8px; text-align:center; font-size:11px; }
/* Morning Pro */
.morning-pro-streak { display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--glass); border-radius:12px; margin:12px 0; }
.morning-pro-streak-fire { font-size:24px; }
.morning-pro-streak-num { font-size:20px; font-weight:800; }
.morning-pro-category { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); margin-top:14px; margin-bottom:6px; padding-left:2px; }
.morning-pro-item { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-light); border:1px solid var(--glass); border-radius:12px; margin-bottom:6px; cursor:pointer; transition:all 0.3s; }
.morning-pro-item:hover { border-color:var(--warning); transform:translateX(2px); }
.morning-pro-item.done { opacity:0.5; border-color:var(--success); }
.morning-pro-check { width:24px; height:24px; border-radius:50%; border:2px solid var(--glass); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:all 0.3s; }
.morning-pro-item.done .morning-pro-check { background:var(--success); border-color:var(--success); color:#000; }
.morning-pro-time { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--text-dim); margin-top:8px; }
.morning-pro-heatmap { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-top:12px; }
.morning-pro-heat-cell { aspect-ratio:1; border-radius:3px; background:var(--glass); }
/* Decision Pro */
.decision-pro-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.decision-pro-stat { text-align:center; padding:12px; background:var(--glass); border-radius:12px; }
.decision-pro-stat .num { font-size:22px; font-weight:800; }
.decision-pro-stat .label { font-size:10px; color:var(--text-dim); margin-top:2px; }
.decision-pro-card { background:var(--bg-light); border:1px solid var(--glass); border-radius:14px; padding:16px; margin-bottom:10px; transition:all 0.3s; border-left:4px solid; }
.decision-pro-card:hover { border-color:var(--primary); transform:translateX(2px); }
.decision-pro-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.decision-pro-badges { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.decision-pro-badge { padding:3px 8px; border-radius:6px; font-size:10px; font-weight:600; }
.decision-pro-confidence { display:flex; align-items:center; gap:6px; margin-top:8px; }
.decision-pro-conf-bar { flex:1; height:6px; background:var(--glass); border-radius:3px; overflow:hidden; }
.decision-pro-conf-fill { height:100%; border-radius:3px; }
.decision-pro-timeline { margin-top:6px; font-size:10px; color:var(--text-dim); display:flex; align-items:center; gap:4px; }
/* === END CUSTOM CSS === */
/* ═══ v25.1 Calendar Fullscreen ═══ */
body.cal-fullscreen .topbar { display: none !important; }
body.cal-fullscreen .sidebar { display: none !important; }
body.cal-fullscreen .sidebar-toggle { display: none !important; }
body.cal-fullscreen .shortcut-hint-bar { display: none !important; }
body.cal-fullscreen .calendar-header { display: none !important; }
body.cal-fullscreen #calColorLegend { display: none !important; }
body.cal-fullscreen #calInteractivePie { display: none !important; }
body.cal-fullscreen #calFilterBanner { display: none !important; }
body.cal-fullscreen .main-content { margin-left: 0 !important; margin-top: 0 !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; /* v36.101 */ padding: 0 !important; }
body.cal-fullscreen .page-container { padding: 8px !important; }
body.cal-fullscreen #pageContainer { padding-bottom: 0 !important; }
body.cal-fullscreen #calFilterBar { display: none !important; }
body.cal-fullscreen [id^="cal-domain-alloc"] { display: none !important; }
body.cal-fullscreen #calDomainAllocSection { display: none !important; }
body.cal-fullscreen .week-view-scroll { max-height: calc(100vh - 50px) !important; max-height: calc(100dvh - 50px) !important; /* v36.101 */ }
body.cal-fullscreen .calendar-scroll-container { max-height: calc(100vh - 50px) !important; max-height: calc(100dvh - 50px) !important; /* v36.101 */ }
body.cal-fullscreen .cal-task-panel { top: 0 !important; height: 100vh !important; height: 100dvh !important; /* v36.101 */ }
/* Keep a small exit button visible in fullscreen */
/* v25.8: Floating exit fullscreen button (mobile-friendly) */
.cal-fs-exit-btn {
display: none;
position: fixed;
top: 10px;
right: 10px;
z-index: 10001;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 18px;
font-weight: 700;
cursor: pointer;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
transition: background 0.2s, transform 0.15s;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.cal-fs-exit-btn:hover {
background: var(--danger, #e74c3c);
transform: scale(1.1);
}
.cal-fs-exit-btn:active {
transform: scale(0.95);
}
/* ═══ v25.1 Panel drag — make task blocks transparent to drag events ═══ */
body.cal-panel-dragging .cal-day-column > div[data-move-type],
body.cal-panel-dragging .cal-day-column > .user-event-block {
pointer-events: none !important;
}
/* ═══ v25.1 → v28.2: Pie chart hover effects (enhanced) ═══ */
.pie-slice { transition: filter 0.2s ease, transform 0.2s ease; cursor: pointer; }
.pie-slice:hover { filter: brightness(1.25) drop-shadow(0 0 3px rgba(255,255,255,0.15)); transform: scale(1.05); }
.cal-legend-btn { transition: all 0.15s; }
.cal-legend-btn:hover { background: var(--primary) !important; color: #fff !important; }
/* ═══ v28.2: UX Polish — Micro-interactions & Typography (benchmark: Todoist/Things 3/Superlist) ═══ */
/* Smooth page transitions */
.page-content { animation: fadeSlideIn 0.25s ease-out; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Glass card subtle lift on hover */
.glass-card { transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; }
.glass-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.14); }
[data-theme="light"] .glass-card:hover { border-color: rgba(0,0,0,0.12); box-shadow: 0 6px 24px rgba(0,0,0,0.10); } /* v36.101 (H-css-12): white hover border vanished against the white card */
/* Sidebar active indicator animation */
.sidebar-item.active { transition: background 0.2s ease, color 0.15s ease; }
/* Button press feedback (Things 3 inspired) */
.btn-sm:active, .btn-primary:active { transform: scale(0.96); }
/* Donut/chart legend items — interactive highlight */
.rep-legend-item { transition: background 0.15s ease, transform 0.15s ease; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.rep-legend-item:hover { background: var(--glass); transform: translateX(2px); }
/* Improved focus states for accessibility */
button:focus-visible, .btn-sm:focus-visible, .btn-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* v36.101: keyboard focus ring for div-based controls (reachable when given tabindex/role=button) */
.sidebar-item:focus-visible, .sidebar-toggle:focus-visible, .mobile-bottom-nav-item:focus-visible, .mobile-fab-menu-item:focus-visible, .cmd-item:focus-visible, .task-list-row:focus-visible, .task-card:focus-visible, .kanban-card:focus-visible, .mtask-card:focus-visible, .mtask-check:focus-visible, .mtask-chip:focus-visible, .done-circle:focus-visible, .dash-pill:focus-visible, .group-header:focus-visible, .project-card:focus-visible, .nx-mobile-sidebar-arrow:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Smooth modal backdrop */
.modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* ═══ v25.9 Mobile Calendar Optimization ═══ */
/* Nav bar Google Calendar style */
.cal-nav-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-nav-btn { background: none; border: 1px solid var(--glass-light); color: var(--text); font-size: 18px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; flex-shrink: 0; }
.cal-nav-btn:hover { background: var(--glass); }
.cal-nav-btn:active { background: var(--primary); color: #fff; }
.cal-nav-title { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; cursor: pointer; }
.cal-nav-today { padding: 5px 12px; border: 1px solid var(--glass-light); background: transparent; color: var(--text); font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.cal-nav-today:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Mobile actions row */
.cal-mobile-actions { display: none; }
.cal-mobile-nav { display: none; }
/* v27.45: Desktop-only and mobile-only visibility classes */
.cal-desktop-only { /* shown by default */ }
.topbar-desktop-only { /* shown by default */ }
.topbar-mobile-settings { display: none; }
/* v31.2: Hide mobile-only elements on desktop */
.topbar-mobile-only { display: none; }
.sidebar-mobile-extras { display: none; }
/* v27.46: Compact month/year button on mobile nav */
.cal-nav-month-btn {
padding: 4px 12px; border-radius: 8px;
border: 1px solid var(--glass-light); background: var(--glass);
color: var(--primary); font-size: 14px; font-weight: 700;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: all 0.15s; letter-spacing: 0.5px;
}
.cal-nav-month-btn:active { background: var(--primary); color: #fff; }
@media (max-width: 768px) {
/* Hide shortcut hint bar on mobile */
.shortcut-hint-bar { display: none !important; }
/* v27.45: Hide desktop-only elements on mobile */
.cal-desktop-only { display: none !important; }
.topbar-desktop-only { display: none !important; }
/* v31.2: Show mobile-only theme toggle on mobile */
.topbar-mobile-only { display: inline-flex !important; align-items: center; }
/* v27.48: Settings button removed from topbar */
.sidebar-mobile-extras { display: block !important; }
/* v27.45: Hide nav back/forward on mobile */
.topbar-nav-btn { display: none !important; }
/* v27.45: Smaller app title on mobile */
.topbar-app-title { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v31.9: Ensure wsIndicator doesn't push theme toggle off-screen */
#wsIndicator { max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.topbar-version { font-size: 10px; color: var(--text-dim); font-weight: 400; }
.topbar-updated { display: none !important; }
/* v27.45: Compact topbar on mobile */
/* v27.64: Fix topbar overlap — increased height + safe-area support */
/* v31.9: Removed overflow:hidden — was clipping mobile theme toggle button */
.topbar { height: 48px !important; padding: 0 8px !important; overflow: visible !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
.topbar-title { min-width: 0; overflow: hidden; }
.topbar-controls { flex-shrink: 0; }
/* v36.102: 70px là chỗ chừa cho bottom nav đã gỡ từ v32.4 → dải trống chết ở đáy mọi trang mobile. Giảm còn 16px. */
.main-content { margin-top: 48px !important; height: calc(100vh - 48px) !important; height: calc(100dvh - 48px) !important; /* v36.108: dvh fallback for the iOS toolbar */ padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
/* v27.64: Prevent sidebar.collapsed from hiding topbar or resetting margin on mobile */
.sidebar.collapsed ~ .topbar { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
.sidebar.collapsed ~ .main-content { margin-top: 48px !important; height: calc(100vh - 48px) !important; height: calc(100dvh - 48px) !important; /* v36.108 */ padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
/* Calendar header: stack vertically, compact */
.calendar-header { flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.calendar-header > div:first-child { display: none; }
/* v27.55: Hide calendar controls entirely on mobile — actions moved to sidebar */
.calendar-controls { display: none !important; }
/* v27.55: Hide view selector on mobile — use sidebar instead */
.view-selector { display: none !important; }
/* v27.48: Calendar controls — 1 compact scrollable row (kept for reference) */
.calendar-controls.force-show {
display: flex !important;
flex-wrap: nowrap; overflow-x: auto; gap: 4px;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
padding-bottom: 2px;
touch-action: pan-x;
align-items: center;
}
.calendar-controls::-webkit-scrollbar { display: none; }
.calendar-controls .cal-ctrl-btn {
font-size: 10px !important; padding: 5px 8px !important; white-space: nowrap;
flex-shrink: 0; min-height: 30px; border-radius: 6px !important;
line-height: 1.2;
}
.calendar-controls .btn-sm:not(.cal-ctrl-btn),
.calendar-controls .btn-schedule:not(.cal-ctrl-btn) { font-size: 10px !important; padding: 4px 8px !important; white-space: nowrap; flex-shrink: 0; min-height: 30px; }
/* v27.48: Month button in action row on mobile */
.calendar-controls .cal-nav-month-btn { padding: 5px 10px !important; font-size: 11px !important; font-weight: 700; min-height: 30px; }
/* v27.55: Hide inline filter bar on mobile — use bottom-sheet filter panel instead */
#calFilterBar { display: none !important; }
/* v27.55: Mobile calendar nav bar — clean, minimal */
/* v27.61: sticky so it doesn't scroll under topbar */
.cal-mobile-nav {
display: flex !important; align-items: center; gap: 6px;
padding: 6px 4px; margin-bottom: 4px;
position: sticky; top: 0; z-index: 100;
background: var(--bg); border-bottom: 1px solid var(--glass-light);
}
.cal-mobile-nav .cal-mnav-btn {
width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-light);
background: var(--glass); color: var(--text); font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.cal-mobile-nav .cal-mnav-btn:active { background: var(--primary); color: #fff; }
.cal-mobile-nav .cal-mnav-title {
flex: 1; font-size: 15px; font-weight: 700; text-align: center;
cursor: pointer; color: var(--text); letter-spacing: 0.3px;
}
.cal-mobile-nav .cal-mnav-pill {
padding: 6px 12px; border-radius: 20px; border: 1px solid var(--glass-light);
background: var(--glass); color: var(--text); font-size: 12px; font-weight: 600;
cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
white-space: nowrap;
}
.cal-mobile-nav .cal-mnav-pill:active { background: var(--primary); color: #fff; }
.cal-mobile-nav .cal-mnav-pill.has-filter { background: var(--primary); color: #fff; border-color: var(--primary); }
/* v27.46: Filter dropdown menus — position fixed FULLSCREEN overlay on mobile */
.filter-dropdown-menu.show {
position: fixed !important;
top: 50% !important;
left: 8px !important;
right: 8px !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 10000 !important;
max-height: 60vh;
overflow-y: auto;
width: auto !important;
min-width: unset !important;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.6);
background: var(--bg-light) !important;
border: 1px solid var(--glass-light) !important;
}
/* v27.45: Nav bar — compact single row, no prev/next arrows (swipe instead) */
.cal-nav-bar {
width: 100%; order: -1; touch-action: manipulation;
gap: 8px; margin-bottom: 6px;
}
.cal-nav-title { font-size: 15px !important; }
/* v27.45: Calendar header — sticky, above scroll content */
.calendar-header {
position: sticky; top: 0; z-index: 30;
background: var(--bg); padding-bottom: 2px;
}
/* v27.44: Week grid — time col narrower; JS already omits nav arrows on mobile, no last-child hide needed */
/* v27.47: Only apply 7-col override on regular week view, not 3-day view */
.week-view-container:not(.three-day-view) .week-header-row { grid-template-columns: 36px repeat(7, 1fr) !important; }
.week-header-row > div:first-child { font-size: 10px !important; padding: 6px 2px !important; }
.week-view-container:not(.three-day-view) .week-view-scroll { grid-template-columns: 36px repeat(7, 1fr) !important; }
/* v27.47: 3-day view grid */
.three-day-view .week-header-row { grid-template-columns: 36px repeat(3, 1fr) !important; }
.three-day-view .week-view-scroll { grid-template-columns: 36px repeat(3, 1fr) !important; }
/* Week header text smaller */
.week-header-row > div { font-size: 9px !important; padding: 6px 2px !important; }
/* Day view: time col narrower */
.day-view-scroll { grid-template-columns: 36px 1fr !important; }
/* v27.54: Page container — more top padding on mobile to avoid topbar overlap */
/* v27.64: Restored & increased top padding for topbar clearance */
.page-container { padding: 16px 8px 8px 8px !important; }
/* v27.44: Task panel — Google Calendar–style bottom sheet on mobile */
.cal-task-panel {
position: fixed !important;
width: 100% !important; top: auto !important; bottom: 0 !important;
left: 0 !important; right: 0 !important;
max-height: 70vh; z-index: 1200 !important;
border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
overflow-y: auto;
touch-action: pan-y;
transform: translateY(100%);
background: var(--bg-light) !important;
}
.cal-task-panel.open {
transform: translateY(0) !important;
}
/* Drag handle indicator on mobile task panel */
.cal-task-panel::before {
content: '';
display: block;
width: 36px; height: 4px;
background: var(--glass-light);
border-radius: 2px;
margin: 8px auto 4px;
}
/* v27.43: Sidebar — slide-in overlay (Gmail/Slack/Notion pattern) */
.sidebar {
position: fixed !important; top: 0 !important; left: 0; bottom: 0;
width: 280px !important; z-index: 1100 !important;
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
box-shadow: none;
padding-top: 16px !important;
}
.sidebar.mobile-open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
/* Backdrop behind sidebar */
.sidebar-backdrop {
display: none;
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1099;
opacity: 0;
transition: opacity 0.25s ease;
}
.sidebar-backdrop.active { display: block; opacity: 1; }
/* Hide desktop toggle arrow on mobile */
.sidebar-toggle { display: none !important; }
/* Hamburger button in topbar */
.mobile-hamburger {
display: flex !important;
align-items: center; justify-content: center;
width: 36px; height: 36px;
background: none; border: none;
color: var(--text); font-size: 20px;
cursor: pointer; flex-shrink: 0;
border-radius: 6px; margin-right: 8px;
-webkit-tap-highlight-color: transparent;
}
.mobile-hamburger:active { background: var(--glass); }
/* Main content full width (no sidebar margin) */
.main-content { margin-left: 0 !important; width: 100% !important; }
/* Override collapsed state — on mobile we use mobile-open instead */
.sidebar.collapsed {
transform: translateX(-100%); width: 280px !important;
padding: 12px 0 !important; overflow-y: auto !important;
}
.sidebar.collapsed.mobile-open { transform: translateX(0); }
/* v27.4: Modal — full-screen on mobile for better touch */
.modal-content {
width: 100vw !important; max-width: 100vw !important;
height: 100vh !important; max-height: 100vh !important;
height: 100dvh !important; max-height: 100dvh !important; /* v36.101 (H-css-09): iOS Safari — 100vh is the toolbar-hidden height, so the footer buttons sat under the toolbar */
border-radius: 0 !important;
margin: 0 !important;
}
/* Main content: no sidebar margin on very small screens; NEVER push right for task panel */
.main-content { overflow-x: hidden !important; margin-right: 0 !important; }
/* Prevent horizontal scroll on body */
body { overflow-x: hidden !important; }
* { max-width: 100vw; }
/* v27.44: Domain chart — stack vertically on mobile */
#calDomainAllocSection > div {
flex-direction: column !important;
gap: 12px !important;
}
#calDomainAllocSection > div > div {
border-left: none !important;
padding-left: 0 !important;
border-top: 1px solid var(--glass-light);
padding-top: 12px;
}
#calDomainAllocSection > div > div:first-child {
border-top: none;
padding-top: 0;
}
/* Donut SVG smaller on mobile */
#calDomainAllocSection svg { max-width: 120px; max-height: 120px; }
/* v32.4: Bottom nav removed — reduce padding */
.page-container { padding: 16px 8px 16px 8px !important; }
/* Hide bottom nav and FAB when SBS panel is active */
body:has(#sbsCalPanel) .mobile-bottom-nav,
body:has(#sbsCalPanel) .mobile-fab-container,
body:has(.sbs-overlay) .mobile-bottom-nav,
body:has(.sbs-overlay) .mobile-fab-container {
display: none !important;
}
/* v27.44: Smooth swipe transition for calendar navigation */
#calViewContent {
transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
}
#calViewContent.cal-slide-out-left {
transform: translateX(-40px);
opacity: 0;
}
#calViewContent.cal-slide-out-right {
transform: translateX(40px);
opacity: 0;
}
#calViewContent.cal-slide-in-left {
transform: translateX(40px);
opacity: 0;
transition: none;
}
#calViewContent.cal-slide-in-right {
transform: translateX(-40px);
opacity: 0;
transition: none;
}
/* Mobile action buttons (show) */
.cal-mobile-actions { display: flex; gap: 4px; flex-wrap: wrap; }
/* Fullscreen exit button bigger on mobile */
/* v27.54: Move fullscreen exit to LEFT on mobile to avoid task panel ✕ overlap */
.cal-fs-exit-btn { width: 42px; height: 42px; font-size: 20px; right: auto !important; left: 10px !important; }
/* v27.4: All interactive elements — minimum touch target 36px */
.btn-sm, .btn-schedule, .view-btn, .filter-dropdown-btn,
.cal-nav-btn, .cal-nav-today, button {
min-height: 34px;
}
.filter-dropdown-menu label {
min-height: 36px; padding: 8px 10px !important;
}
.filter-dropdown-menu .btn-sm {
min-height: 32px;
}
/* v26.14: Project list — responsive on mobile */
.project-card-row, .proj-header-row { min-width: 0 !important; flex-wrap: wrap; gap: 4px; }
.proj-col-name { min-width: 120px !important; flex: 1 1 100% !important; }
.proj-col-wh, .proj-col-created, .proj-col-timeframe, .proj-col-source, .proj-col-diff { display: none !important; }
.proj-col-pri, .proj-col-status, .proj-col-impact, .proj-col-deadline, .proj-col-domain, .proj-col-tasks, .proj-col-duration { width: auto !important; min-width: 0 !important; flex: 0 0 auto; font-size: 9px !important; }
/* v26.14: Task table — narrower col-name on mobile */
.task-list-table .col-name { min-width: 140px !important; width: auto !important; max-width: 50vw !important; }
/* v26.14: Analytics grid — single column on mobile */
.analytics-grid { grid-template-columns: 1fr !important; }
/* v26.14: Settings page — prevent inline overflow */
.page-container > * { max-width: 100% !important; overflow-x: hidden; box-sizing: border-box; }
/* v26.14: Glass cards — constrain width */
.glass-card { max-width: 100% !important; overflow: hidden; box-sizing: border-box; }
/* v27.49: Global mobile width safeguards */
.dash-stats-row { grid-template-columns: repeat(3, 1fr) !important; }
.rep-overview { grid-template-columns: repeat(3, 1fr) !important; }
.dashboard-grid { grid-template-columns: 1fr !important; }
.values-pro-spotlight { grid-template-columns: 1fr 1fr !important; }
.domain-selector { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
.inbox-container, .morning-container, .qc-wrap { max-width: 100% !important; }
.modal-content { max-width: 96vw !important; }
.conflict-panel-right .conflict-task-editor { max-width: 100% !important; }
.calendar-scroll-container { max-width: 100% !important; }
/* v32.6: Conflict resolution panel — compact buttons & clickable checkboxes on mobile */
.sbs-applyall-item { padding: 6px 8px !important; }
.sbs-applyall-item button { min-height: auto !important; padding: 4px 8px !important; font-size: 10px !important; }
.sbs-applyall-item input[type="checkbox"] { min-height: auto !important; min-width: auto !important; width: 18px !important; height: 18px !important; }
.sbs-applyall-item label { font-size: 10px !important; }
/* Conflict panel action buttons — stack vertically on mobile */
#sbsApplyAllList + div [style*="display:flex"] { flex-direction: column !important; }
#sbsApplyAllList + div button { min-height: auto !important; padding: 8px 14px !important; font-size: 11px !important; text-align: center !important; white-space: normal !important; }
}
@media (max-width: 768px) {
/* Month view: compact cells */
.calendar-day-header { padding: 4px 2px; font-size: 9px; letter-spacing: 0; }
.calendar-day { padding: 4px; min-height: 60px; }
.calendar-day-number { font-size: 11px; }
.calendar-day-events { font-size: 8px; }
.calendar-day-events > div { padding: 1px 2px !important; font-size: 8px !important; }
}
@media (max-width: 480px) {
/* Extra small: even more compact */
.calendar-header { gap: 4px; margin-bottom: 4px; }
.calendar-controls { gap: 3px; }
.view-btn { padding: 5px 6px !important; font-size: 9px !important; min-height: 32px; }
.cal-nav-title { font-size: 14px; }
.cal-nav-btn { width: 32px; height: 32px; font-size: 16px; }
/* v27.4: Show only essential filter buttons, rest scroll */
#calFilterBar .btn-sm { font-size: 9px !important; padding: 3px 6px !important; }
/* Week header: abbreviate */
.week-header-row > div { font-size: 8px !important; padding: 4px 1px !important; }
/* Month: even smaller */
.calendar-day { min-height: 45px; padding: 2px; }
.calendar-day-number { font-size: 10px; }
/* v27.54: Page container — keep top padding on small screens */
/* v27.64: Increased top padding to match 768px fix */
.page-container { padding: 16px 4px 4px 4px !important; }
}
/* ═══ v31.8: MOBILE TASK LIST — Things 3 / Todoist inspired ═══ */
/* Toolbar */
.mtask-toolbar { padding: 0 4px 8px; }
.mtask-toolbar-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mtask-search-wrap { flex: 1; position: relative; }
.mtask-search { width: 100%; padding: 10px 14px; font-size: 15px; border-radius: 12px; border: 1px solid var(--glass-light); background: var(--glass); color: var(--text); outline: none; -webkit-appearance: none; }
.mtask-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.15); }
.mtask-search-icon { display: none; }
.mtask-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 16px; color: var(--text-dim); cursor: pointer; padding: 4px; }
.mtask-btn-add { width: 42px; height: 42px; border-radius: 12px; border: none; background: var(--success); color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mtask-btn-add:active { transform: scale(0.95); }
.mtask-btn-schedule { width: 42px; height: 42px; border-radius: 12px; border: none; background: linear-gradient(135deg,#7c3aed,#3b82f6); color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mtask-btn-schedule:active { transform: scale(0.95); }
/* Filter chips */
.mtask-chips { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 0 6px; scrollbar-width: none; }
.mtask-chips::-webkit-scrollbar { display: none; }
.mtask-chip { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--glass-light); background: var(--glass); color: var(--text-dim); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: all 0.15s; }
.mtask-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.mtask-chip:active { transform: scale(0.95); }
.mtask-chip-select { padding: 6px 10px; border-radius: 20px; border: 1px solid var(--glass-light); background: var(--glass); color: var(--text); font-size: 13px; font-weight: 600; -webkit-appearance: none; cursor: pointer; flex-shrink: 0; }
/* Stats bar */
.mtask-stats { font-size: 12px; color: var(--text-dim); padding: 0 2px 4px; font-weight: 500; }
/* Task card list */
.mtask-list { display: flex; flex-direction: column; gap: 2px; }
/* Swipe container */
.mtask-swipe-container { position: relative; overflow: hidden; border-radius: 12px; }
.mtask-swipe-action { position: absolute; top: 0; bottom: 0; width: 80px; display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: 0; transition: opacity 0.15s; color: #fff; } /* v36.101: chữ/icon trắng tường minh — trước đây kế thừa var(--text) tối nên nằm trên nền đặc là khó đọc */
.mtask-swipe-left { left: 0; background: var(--success); }
.mtask-swipe-right { right: 0; background: #64748b; } /* v36.101: trước dùng var(--text-dim) — đó là token MÀU CHỮ, dùng làm nền khiến contrast phụ thuộc token chữ. #64748b là nền đặc, trắng trên nó đạt 4.76:1 ở cả 2 theme */
/* Task card */
.mtask-card { background: var(--bg-light); border: 1px solid var(--glass); border-radius: 12px; padding: 12px 14px; cursor: pointer; position: relative; transition: transform 0.2s, background 0.15s; -webkit-tap-highlight-color: transparent; }
.mtask-card:active { background: var(--glass); transform: scale(0.98); }
.mtask-card.mtask-done { opacity: 0.5; }
.mtask-card.mtask-inprog { border-left-width: 3px; }
/* Card layout */
.mtask-card-main { display: flex; gap: 12px; align-items: flex-start; }
.mtask-check { font-size: 22px; line-height: 1; flex-shrink: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center; }
.mtask-check:active { transform: scale(1.2); }
.mtask-card-body { flex: 1; min-width: 0; }
.mtask-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 6px; word-break: break-word; }
.mtask-name-done { text-decoration: line-through; color: var(--text-dim); }
/* Tags */
.mtask-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.mtask-tag { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; white-space: nowrap; line-height: 1.4; }
.mtask-tag-dim { background: var(--glass); /* v36.101 (H-css-15): white 6% chip vanished on light cards */ color: var(--text-dim); }
.mtask-tag-proj { background: rgba(108,92,231,0.12); color: var(--primary); }
.mtask-tag-danger { background: rgba(231,76,60,0.15); color: var(--c-red); }
.mtask-tag-warn { background: rgba(251,191,36,0.15); color: var(--c-amber); }
/* Group headers on mobile */
@media (max-width: 768px) {
.group-header { padding: 10px 8px; font-size: 14px; font-weight: 700; border-radius: 10px; margin: 8px 0 4px; }
.group-count { font-size: 12px; }
.collapse-icon { font-size: 12px; }
/* Hide desktop task table on mobile */
/* v36.112 (J26-85): GTD list hiện trên mobile */
.task-list-scroll:not(.gtd-list-scroll) { display: none !important; }
.grid-auto { display: none !important; }
/* Hide desktop project table columns on mobile */
.proj-list-scroll .proj-header-row { display: none !important; }
.proj-list-scroll .project-card .project-card-row > .proj-col-domain,
.proj-list-scroll .project-card .project-card-row > .proj-col-pri,
.proj-list-scroll .project-card .project-card-row > .proj-col-impact,
.proj-list-scroll .project-card .project-card-row > .proj-col-diff,
.proj-list-scroll .project-card .project-card-row > .proj-col-deadline,
.proj-list-scroll .project-card .project-card-row > .proj-col-timeframe,
.proj-list-scroll .project-card .project-card-row > .proj-col-wh,
.proj-list-scroll .project-card .project-card-row > .proj-col-source,
.proj-list-scroll .project-card .project-card-row > .proj-col-created,
.proj-list-scroll .project-card .project-card-row > .proj-col-tasks,
.proj-list-scroll .project-card .project-card-row > .proj-col-duration,
.proj-list-scroll .project-card .project-card-row > .proj-col-actions,
.proj-list-scroll .project-card .project-card-row > .proj-col-check,
.proj-list-scroll .project-card .project-card-row > .proj-col-toggle,
.proj-list-scroll .project-card .project-card-row > .proj-col-num { display: none !important; }
}
/* ═══ v26: Field lock toggle ═══ */
.lock-toggle {
cursor: pointer;
font-size: 12px;
opacity: 0.4;
transition: all 0.2s ease;
user-select: none;
padding: 0 2px;
}
.lock-toggle:hover {
opacity: 0.8;
transform: scale(1.15);
}
.lock-toggle.locked {
opacity: 1;
color: #E74C3C;
filter: drop-shadow(0 0 3px rgba(231,76,60,0.4));
}
/* ═══ v26.2: Conflict resolution annotations in task edit ═══ */
.conflict-annotation {
display: none;
margin-top: 4px;
padding: 4px 8px;
font-size: 10px;
line-height: 1.4;
border-radius: 6px;
background: rgba(231, 76, 60, 0.08);
border-left: 3px solid #E74C3C;
color: var(--text-dim);
}
.conflict-annotation.active {
display: block;
}
.conflict-annotation .ca-icon {
color: #E74C3C;
font-weight: 600;
}
.conflict-annotation .ca-from {
text-decoration: line-through;
opacity: 0.7;
}
.conflict-annotation .ca-to {
color: #E74C3C;
font-weight: 600;
}
.conflict-annotation .ca-time {
color: var(--text-dim);
opacity: 0.6;
font-size: 9px;
}
/* ═══ v25.20: SBS-in-Calendar preview blocks ═══ */
.sbs-cal-block-current {
animation: sbsCalPulse 1.5s ease-in-out infinite;
}
.sbs-cal-block-accepted {
opacity: 0.7;
}
@keyframes sbsCalPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.75; transform: scale(1.01); box-shadow: 0 0 16px rgba(124,58,237,0.6); }
}
/* ═══════════════════════════════════════════════════════════════
v27.2 MOBILE ANALYTICS/CHARTS UX FIX
═══════════════════════════════════════════════════════════════ */
/* Touch-friendly donut: tap = hover on mobile */
@media (pointer: coarse) {
.rep-donut-svg {
transform: none !important; /* Remove 3D tilt — causes mis-taps on touch */
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.rep-donut-svg:hover { transform: none !important; }
.rep-donut-slice { cursor: default; }
.rep-donut-hover-info { opacity: 1 !important; } /* Always show info on touch devices */
}
@media (max-width: 768px) {
/* ── Analytics grid: single column ── */
.analytics-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
/* ── Donut charts: larger, centered, stacked layout ── */
.rep-donut-svg { width: 160px !important; height: 160px !important; }
.rep-donut-center-text { font-size: 18px !important; }
.rep-donut-center-sub { font-size: 9px !important; }
/* Donut + legend: stack vertically on small screens */
.glass-card > div[style*="display:flex"][style*="align-items:center"] {
flex-direction: column !important; gap: 12px !important; align-items: center !important;
}
/* ── Bar charts: horizontal layout for 7-item domains ── */
/* Bar container: reduce height, add horizontal scroll for many items */
.glass-card > div[style*="display: flex"][style*="align-items: flex-end"][style*="height: 160px"] {
height: 120px !important; gap: 6px !important;
overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-bottom: 4px; touch-action: pan-x;
}
.glass-card > div[style*="display: flex"][style*="align-items: flex-end"][style*="height: 160px"]::-webkit-scrollbar { display: none; }
/* Each bar item: min width to prevent crushing */
.glass-card > div[style*="display: flex"][style*="align-items: flex-end"] > div[style*="flex: 1"] {
min-width: 56px !important; flex: 0 0 auto !important;
}
/* ── Bar 3D effect: simplify on mobile ── */
.bar-3d {
border-radius: 4px 4px 0 0 !important;
box-shadow: none !important;
}
/* ── Insight boxes: slightly larger text ── */
.insight-box { font-size: 12px !important; padding: 10px 12px !important; }
/* ── Glass cards: padding reduction ── */
.glass-card { padding: 12px !important; }
/* ── Hover info: always visible, compact ── */
.rep-donut-hover-info {
min-width: auto !important; padding: 6px 10px !important;
font-size: 11px !important;
}
.rep-donut-hover-value { font-size: 16px !important; }
}
@media (max-width: 480px) {
/* Even smaller donut on tiny screens */
.rep-donut-svg { width: 140px !important; height: 140px !important; }
.rep-donut-center-text { font-size: 16px !important; }
/* Bar items even narrower */
.glass-card > div[style*="display: flex"][style*="align-items: flex-end"] > div[style*="flex: 1"] {
min-width: 48px !important;
}
.glass-card > div[style*="display: flex"][style*="align-items: flex-end"][style*="height: 160px"] {
height: 100px !important;
}
}
/* v27.71: Busy/Loading indicator overlay */
.busy-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
z-index: 99990; /* v36.101 (H-css-21): was 99999 — tied with .confirmation-modal, and being appended last it painted over confirmations raised during a busy phase */
background: rgba(10, 10, 20, 0.55);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; animation: busyFadeIn 0.15s ease forwards;
}
@keyframes busyFadeIn { to { opacity: 1; } }
.busy-box {
background: rgba(20, 20, 35, 0.95);
border: 1px solid rgba(124, 116, 255, 0.35);
border-radius: 14px;
padding: 20px 32px;
display: flex; align-items: center; gap: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.busy-spinner {
width: 24px; height: 24px;
border: 3px solid rgba(124, 116, 255, 0.2);
border-top-color: var(--primary);
border-radius: 50%;
animation: busySpin 0.7s linear infinite;
}
@keyframes busySpin { to { transform: rotate(360deg); } }
.busy-text {
font-size: 13px; font-weight: 600;
color: #fff; /* v36.101 (H-css-06): .busy-box is always near-black — var(--text) is #1c1c1e in light theme */
}
.busy-sub {
font-size: 10px; color: rgba(255,255,255,0.65); /* v36.101 */
margin-top: 3px;
}
/* v27.112: Cancel button + progress bar for busy overlay */
.busy-cancel-btn {
display: block;
margin-top: 10px;
padding: 6px 16px;
border: 1px solid rgba(255, 100, 100, 0.5);
border-radius: 8px;
background: rgba(255, 60, 60, 0.15);
color: #ff6b6b;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.busy-cancel-btn:hover {
background: rgba(255, 60, 60, 0.3);
border-color: rgba(255, 100, 100, 0.7);
}
.busy-cancel-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================================================
JSKE 2026 - MOBILE UI/UX UPGRADE CSS
World-class mobile experience inspired by Google Calendar & Things 3
Version: 1.0 | 2026-04-07
============================================================================ */
/* ============================================================================
1. VIEWPORT & SAFE AREAS (iPhone notch support)
============================================================================ */
@supports (padding: max(0px)) {
html {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: env(safe-area-inset-top);
}
}
@media (max-width: 768px) {
html {
font-size: 16px; /* Prevent zoom on input focus iOS */
}
body {
padding-bottom: env(safe-area-inset-bottom);
}
/* Status bar color support */
meta[name="theme-color"] {
content: var(--bg-light);
}
}
/* ============================================================================
2. IMPROVED TYPOGRAPHY FOR MOBILE (larger, better readability)
============================================================================ */
@media (max-width: 768px) {
html, body {
font-size: 15px;
}
h1, .h1 {
font-size: 24px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
}
h2, .h2 {
font-size: 20px;
line-height: 1.3;
font-weight: 600;
letter-spacing: -0.01em;
}
h3, .h3 {
font-size: 17px;
line-height: 1.4;
font-weight: 600;
}
p, body {
font-size: 15px;
line-height: 1.5;
}
/* Improved legibility with better line height */
.sidebar-item,
.task-list-row,
.card-item,
button,
input,
textarea,
select {
line-height: 1.6;
}
/* Label text more visible */
label {
font-size: 13px;
line-height: 1.4;
}
}
/* ============================================================================
3. ENHANCED TOUCH TARGETS (Apple HIG: min 44x44px)
============================================================================ */
@media (max-width: 768px) {
/* Better tap targets with proper spacing for specific interactive elements */
.done-circle {
width: 24px;
height: 24px;
min-height: 44px;
min-width: 44px;
padding: 10px !important;
margin: 6px 0;
}
/* Checkbox/toggle switches larger */
/* v36.102: bỏ min 44px — ở dải 481-768px nó phình checkbox thành ô 44px làm vỡ lưới "Giờ làm việc"
và menu filter (dải <=480px vốn đã reset về 18px, hai dải lệch nhau). */
input[type="checkbox"],
input[type="radio"] {
width: 22px;
height: 22px;
cursor: pointer;
}
.sidebar-item {
padding: 12px 14px !important;
margin-bottom: 2px;
min-height: 48px;
}
.task-list-row {
min-height: 44px;
}
/* v36.101 (H-css-04): padding no longer !important (it defeated component/inline sizing in compact toolbars) and 40px min-height */
.btn-primary,
.btn-sm {
padding: 8px 14px;
min-height: 40px;
font-size: 14px;
}
/* Form inputs taller */
/* v36.102: loại checkbox/radio/range — padding 12px 14px !important từng bóp méo cả ô tick lẫn slider */
/* v36.104: bọc trong :where() — chuỗi :not() trần đẩy độ đặc hiệu từ (0,0,1) lên (0,3,1),
thắng mọi rule class (.rep-date-input, .form-input, .tot-411-priority input, .ar-r3-slot input)
nên font-size:16px của rule chung đè hết style riêng. :where() có độ đặc hiệu 0
→ selector trở lại đúng (0,0,1) như trước v36.102 mà vẫn loại được checkbox/radio/range. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
textarea,
select {
padding: 12px 14px !important;
min-height: 44px;
font-size: 16px; /* Prevents zoom on iOS */
}
textarea {
min-height: 100px;
}
/* Modal buttons larger */
.btn-modal {
padding: 12px 16px !important;
min-height: 44px;
font-size: 15px;
}
}
/* ============================================================================
4. BOTTOM NAVIGATION BAR (Things 3 / Google Calendar style)
============================================================================ */
@media (max-width: 768px) {
/* Sidebar visibility handled by section 16 via off-screen positioning */
/* v32.4: Bottom nav hidden — user requested removal to save space */
.mobile-bottom-nav {
display: none !important;
padding-bottom: env(safe-area-inset-bottom); /* v36.101: home-indicator clearance if the nav is ever re-enabled */
}
/* Bottom nav tabs */
.mobile-bottom-nav-item {
flex: 1;
height: 65px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
color: var(--text-dim);
transition: all 0.2s ease;
user-select: none;
font-size: 11px;
font-weight: 500;
padding: 8px 0;
border-bottom: 3px solid transparent;
}
.mobile-bottom-nav-item:active {
background: var(--glass);
}
.mobile-bottom-nav-item.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* Bottom nav icon */
.mobile-bottom-nav-icon {
font-size: 24px;
line-height: 1;
}
/* Badge on nav items */
.mobile-bottom-nav-badge {
position: absolute;
top: 8px;
right: 8px;
background: var(--danger);
color: white;
font-size: 10px;
font-weight: 700;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* v36.102: bottom nav đã display:none từ v32.4 — 81px padding này chỉ tạo khoảng trống chết + đẩy VisionSpace tràn đáy */
#pageContainer {
padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
/* Shortcut hint bar hidden on mobile */
.shortcut-hint-bar {
display: none !important;
}
}
/* ============================================================================
5. FLOATING ACTION BUTTON (Material Design style)
============================================================================ */
@media (max-width: 768px) {
.mobile-fab {
position: fixed;
/* v36.102: 75px là khoảng né bottom nav đã gỡ — hạ về 20px cho đúng vị trí FAB thông thường */
bottom: calc(20px + env(safe-area-inset-bottom));
right: 16px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 500;
z-index: 99;
box-shadow: 0 4px 12px rgba(124, 116, 255, 0.4);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
-webkit-user-select: none;
}
.mobile-fab:active {
transform: scale(0.92);
box-shadow: 0 2px 6px rgba(124, 116, 255, 0.3);
}
.mobile-fab:hover {
background: var(--primary-hover);
box-shadow: 0 6px 16px rgba(124, 116, 255, 0.5);
}
/* FAB expanded menu */
.mobile-fab-menu {
position: absolute;
bottom: calc(88px + env(safe-area-inset-bottom)); /* v36.101: .mobile-fab-container is not positioned, so this resolves against the viewport — sit 16px above the relocated FAB */
right: 16px;
background: var(--bg-light);
border-radius: 12px;
border: 1px solid var(--glass-light);
box-shadow: var(--shadow-lg);
overflow: hidden;
display: none;
flex-direction: column;
z-index: 98;
min-width: 180px;
}
.mobile-fab-menu.open {
display: flex;
}
.mobile-fab-menu-item {
padding: 14px 16px;
border-bottom: 1px solid var(--glass);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
transition: all 0.15s ease;
}
.mobile-fab-menu-item:last-child {
border-bottom: none;
}
.mobile-fab-menu-item:active {
background: var(--glass);
}
.mobile-fab-menu-icon {
font-size: 18px;
}
}
/* ============================================================================
6. CARD-BASED LAYOUT (Tasks as elevated cards with priority stripe)
============================================================================ */
@media (max-width: 768px) {
/* v36.101 (H-css-26): the .task-list-row "card" rules (flex layout, priority stripe, swipe indicator) were removed —
every .task-list-row is a inside .task-list-scroll, which is display:none at ≤768px (the mobile list uses .mtask-card),
so they never rendered and display:flex on a
would break the table if it were ever shown. */
/* Card items in lists */
.card-item {
background: var(--bg-lighter);
border: 1px solid var(--glass);
border-radius: 12px;
padding: 12px 14px !important;
margin-bottom: 8px;
box-shadow: var(--shadow-sm);
transition: all 0.15s ease;
}
.card-item:active {
background: var(--bg-light);
box-shadow: var(--shadow-md);
}
/* List spacing */
.task-list,
.card-list {
padding: 8px 0;
}
}
/* ============================================================================
7. SMOOTH ANIMATIONS & TRANSITIONS
============================================================================ */
@media (max-width: 768px) {
/* Page transition animations */
.page-container {
animation: pageSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pageSlideIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stagger animation for list items */
/* v36.101 (H-css-26): .task-list-row stagger removed — table rows are hidden on mobile (see section 6) */
.card-item {
animation: itemFadeIn 0.3s ease-out both;
}
@keyframes itemFadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Modal slide up animation */
.modal,
.confirmation-modal {
animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Haptic-ready button press states */
/* v36.101 (H-css-20): buttons centred with translate() excluded — button:active (0,1,1) beat .search-clear (0,1,0) and replaced translateY(-50%), so the ✕ jumped half its height on press; :where() keeps the (0,1,1) specificity */
button:where(:not(.search-clear, .mtask-search-clear, .nx-sidebar-toggle)):active {
transform: scale(0.96);
}
.search-clear:active, .mtask-search-clear:active { transform: translateY(-50%) scale(0.96); }
.btn-primary:active,
.btn-sm:active,
.sidebar-item:active {
transform: scale(0.98);
}
/* v36.101 (H-css-08): prefers-reduced-motion block moved to top level (end of file) — nested here it only applied at ≤768px */
}
/* ============================================================================
8. BETTER TOPBAR FOR MOBILE
============================================================================ */
@media (max-width: 768px) {
.topbar {
height: 48px;
padding: 0 12px;
gap: 8px;
}
.topbar-title {
font-size: 14px;
}
.topbar-app-title {
font-size: 14px;
font-weight: 700;
}
.topbar-version {
font-size: 11px;
opacity: 0.7;
margin-left: 4px;
}
.topbar-updated {
font-size: 9px;
opacity: 0.6;
}
/* Hide back/forward buttons on mobile */
.topbar-nav-btn {
display: none !important;
}
/* Hide desktop controls */
.topbar-desktop-only {
display: none !important;
}
/* Keyboard shortcuts button hidden */
[title*="Keyboard"],
[title*="Shortcuts"] {
display: none !important;
}
/* Mobile hamburger visible */
.mobile-hamburger {
display: flex !important; /* v36.101 (H-css-19): was inline-block + 6px padding + line-height 1.6 → 18px glyph needed 40.8px in a 36px box (clipped/off-centre); align with the earlier flex definition */
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
line-height: 1;
border-radius: 6px;
background: var(--glass);
color: var(--text);
border: none;
cursor: pointer;
font-size: 18px;
transition: all 0.15s ease;
}
.mobile-hamburger:active {
background: var(--glass-light);
}
}
/* ============================================================================
9. IMPROVED SEARCH & QUICK FILTERS
============================================================================ */
@media (max-width: 768px) {
/* Sticky search bar at top of content */
.search-bar {
position: sticky;
top: 48px;
z-index: 50;
background: var(--bg-light);
border-bottom: 1px solid var(--glass);
padding: 12px 8px;
display: flex;
gap: 8px;
}
/* Search input */
.search-input {
flex: 1;
padding: 8px 12px !important;
border: 1px solid var(--glass);
border-radius: 10px;
background: var(--bg-lighter);
color: var(--text);
font-size: 14px;
transition: all 0.15s ease;
}
.search-input:focus {
border-color: var(--primary);
background: var(--bg-light);
outline: none;
}
/* Quick filters as horizontal scrollable chips */
.filter-chips {
display: flex;
gap: 6px;
padding: 0 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.filter-chip {
padding: 6px 12px;
border-radius: 16px;
background: var(--glass);
color: var(--text-dim);
border: 1px solid var(--glass-light);
font-size: 12px;
white-space: nowrap;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
scroll-snap-align: start;
}
.filter-chip:active,
.filter-chip.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
}
/* ============================================================================
10. EMPTY STATES (Encouraging, beautiful)
============================================================================ */
@media (max-width: 768px) {
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 16px;
text-align: center;
min-height: 300px;
}
.empty-state-icon {
font-size: 64px;
line-height: 1;
margin-bottom: 16px;
opacity: 0.7;
}
.empty-state-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
}
.empty-state-message {
font-size: 14px;
color: var(--text-dim);
margin-bottom: 20px;
line-height: 1.5;
}
.empty-state-cta {
padding: 10px 16px;
background: var(--primary);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.empty-state-cta:active {
background: var(--primary-hover);
transform: scale(0.98);
}
}
/* ============================================================================
11. RESPONSIVE GRID IMPROVEMENTS
============================================================================ */
@media (max-width: 768px) {
/* Dashboard single column on mobile */
.dashboard-grid,
.grid-auto,
.grid-2,
.grid-3 {
grid-template-columns: 1fr !important;
}
/* Settings full-width sections */
.settings-section {
margin-bottom: 16px;
border-radius: 12px;
background: var(--bg-lighter);
padding: 16px;
}
/* Analytics charts scrollable */
.chart-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Kanban board scrollable horizontally */
.kanban-board {
display: flex;
overflow-x: auto;
gap: 12px;
padding: 12px 8px;
-webkit-overflow-scrolling: touch;
}
.kanban-column {
min-width: 100%;
flex-shrink: 0;
}
}
/* ============================================================================
12. CALENDAR IMPROVEMENTS FOR MOBILE
============================================================================ */
@media (max-width: 768px) {
/* Month view: larger day cells with task count dots */
.calendar-day-cell {
min-height: 60px;
padding: 6px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background: var(--bg-lighter);
border: 1px solid var(--glass);
transition: all 0.15s ease;
}
.calendar-day-cell:active {
background: var(--glass);
}
.calendar-day-number {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
/* Task count dots */
.calendar-day-dots {
display: flex;
gap: 2px;
margin-top: 4px;
}
.calendar-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--primary);
}
/* Event cards with colored left border */
.calendar-event-card {
padding: 8px 12px;
border-left: 4px solid var(--primary);
background: rgba(124, 116, 255, 0.1);
border-radius: 6px;
margin-bottom: 4px;
font-size: 13px;
line-height: 1.4;
}
/* Week view better visibility */
.calendar-week-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.calendar-hour-slot {
min-height: 40px;
border-bottom: 1px solid var(--glass);
padding: 4px;
font-size: 11px;
}
/* Day view half-hour slots */
.calendar-day-column {
padding: 0 4px;
}
.calendar-slot {
min-height: 48px;
border-bottom: 1px solid var(--glass);
display: flex;
align-items: center;
padding: 4px;
}
}
/* ============================================================================
13. DARK THEME ENHANCEMENTS (OLED optimization for mobile)
============================================================================ */
@media (max-width: 768px) {
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #000000; /* Pure black for OLED screens */
--bg-light: #0a0a0a;
--bg-lighter: #161618;
}
/* Higher contrast text on dark backgrounds */
:root:not([data-theme="light"]) body {
color: #f0f0f0;
}
/* Reduced glass/blur for lower-end devices */
@media (prefers-reduced-transparency: reduce) {
.mobile-bottom-nav,
.modal,
.card-item {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.mobile-bottom-nav {
border-top: 1px solid var(--glass-light);
}
}
}
}
/* ============================================================================
14. MODAL & OVERLAY IMPROVEMENTS
============================================================================ */
@media (max-width: 768px) {
/* Full-screen modal on mobile */
.modal {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh; /* v36.101 */
max-width: 100vw;
max-height: 100vh;
max-height: 100dvh; /* v36.101 */
border-radius: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-content {
border-radius: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100vh !important;
max-height: 100vh !important;
height: 100dvh !important; /* v36.101 (H-css-09) */
max-height: 100dvh !important;
}
.modal-header {
position: sticky;
top: 0;
z-index: 10;
padding: 12px 16px;
background: var(--bg-light);
border-bottom: 1px solid var(--glass);
}
.modal-body {
padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
/* Confirmation modal better for mobile */
.confirmation-modal {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
width: 100vw;
border-radius: 16px 16px 0 0;
padding: 20px 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
background: var(--bg-light);
border: none;
max-height: 80vh;
overflow-y: auto;
transform: none !important;
}
.confirmation-buttons {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.btn-modal {
width: 100%;
flex: 1;
}
}
/* v36.101: mobile — side-panel / SBS right-mode không được bóp modal + panel còn ~157-185px trên máy 375px */
@media (max-width: 768px) {
.side-edit-panel {
width: 100vw;
max-width: 100vw;
border-left: none;
}
.modal.has-side-panel,
.modal.sbs-right-mode {
justify-content: center;
align-items: stretch;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
/* v36.102: bỏ 3 khai báo .modal-content ở đây — .modal-content mobile (dòng ~2178 và ~3448) đã đặt
width/max-width/max-height bằng !important nên chúng là CSS chết, chỉ gây hiểu nhầm. Phần thật sự
có tác dụng của hunk v36.101 là .side-edit-panel width + các reset padding/justify-content ở trên. */
}
/* ============================================================================
15. INPUT & FORM IMPROVEMENTS
============================================================================ */
@media (max-width: 768px) {
/* v36.102: LOẠI checkbox/radio/range khỏi rule chung — appearance:none làm mất hẳn dấu tick
(accent-color thành vô nghĩa) và làm slider mất track/thumb, không kéo được trên điện thoại. */
/* v36.104: bọc :where() để giữ độ đặc hiệu (0,0,1) như bản trước v36.102 — nếu để :not() trần (0,3,1)
thì border-radius:10px / border / background:var(--bg-lighter) đè lên .rep-date-input,
.form-input, .tot-411-priority input, .ar-r3-slot input (vỡ lưới TOT 4-1-1, Agile R3, lọc ngày Reports). */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px; /* Prevents iOS zoom */
border-radius: 10px;
border: 1px solid var(--glass);
background: var(--bg-lighter);
color: var(--text);
padding: 12px 14px;
width: 100%;
transition: all 0.15s ease;
}
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary);
background: var(--bg-light);
box-shadow: 0 0 0 3px rgba(124, 116, 255, 0.1);
}
/* Remove default select styling */
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b87a8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
/* File input styling */
input[type="file"] {
padding: 8px 0;
cursor: pointer;
}
/* Checkbox & radio with better appearance */
/* v36.102: ép appearance:auto + padding 0 để trạng thái tick/chọn hiện thật trên mobile */
input[type="checkbox"],
input[type="radio"] {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
width: 20px;
height: 20px;
padding: 0 !important;
cursor: pointer;
accent-color: var(--primary);
}
/* v36.102: range phải giữ rendering gốc, không dính padding/nền của rule input chung.
width:100% giữ nguyên bố cục cũ (rule chung trước đây cũng cho 100%). */
input[type="range"] {
-webkit-appearance: auto;
appearance: auto;
accent-color: var(--primary);
width: 100%;
/* v36.104: trả lại vùng chạm 44px. Slider Settings VisionSpace (js/nexus.js setSlider) có inline
height:2px; trước v36.102 rule input chung cấp min-height:44px nên cao thật 44px. Loại range khỏi
rule chung mà quên min-height → dải 481-768px tụt còn 2px, gần như không kéo được.
(Dải <=480px không dính vì rule input:not(checkbox):not(radio) ở @media 480 vẫn cấp 44px.) */
min-height: 44px;
padding: 0 !important;
background: transparent;
border: none;
}
/* Label spacing */
label {
display: block;
margin-bottom: 6px;
font-weight: 500;
}
/* Form group spacing */
.form-group {
margin-bottom: 16px;
}
.form-group:last-child {
margin-bottom: 0;
}
}
/* ============================================================================
16. SIDEBAR BACKDROP FOR MOBILE — REMOVED (conflicts with line 1814-1858)
============================================================================ */
/* NOTE: Existing mobile CSS at line 1814-1858 handles sidebar properly with higher z-index (1100)
and correct transform: translateX(-100%). Removed this conflicting section. */
/* ============================================================================
17. SMALL MOBILE DEVICES (max-width: 480px)
============================================================================ */
@media (max-width: 480px) {
html, body {
font-size: 14px;
}
/* v36.101 (H-css-24): dead `.topbar { height: 44px }` removed — `height: 48px !important` (mobile block) always won and .main-content/.search-bar assume 48px */
.topbar-title {
font-size: 13px;
}
.mobile-hamburger {
width: 32px;
height: 32px;
font-size: 16px;
}
.sidebar-item {
padding: 10px 12px !important;
font-size: 12px;
}
.task-list-row,
.card-item {
margin-left: 4px;
margin-right: 4px;
}
/* v32.4: Bottom nav removed — these styles no longer needed */
.mobile-fab {
width: 52px;
height: 52px;
font-size: 22px;
}
/* Larger touch targets on small devices — scoped to text/date form inputs, not checkboxes */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), /* v36.101: range excluded too */
select {
min-height: 44px;
}
/* v32.4: SBS conflict/action buttons — compact on mobile */
.sbs-action-btn,
.conflict-task button,
[onclick^="_sbsCal"] {
min-height: auto !important;
padding: 5px 6px !important;
font-size: 10px !important;
}
/* v32.6: Conflict resolution checkboxes — ensure clickable on mobile */
.sbs-applyall-cb,
input[type="checkbox"] {
min-height: auto !important;
min-width: auto !important;
width: 18px !important;
height: 18px !important;
margin: 2px !important;
flex-shrink: 0;
}
/* v32.6: Conflict resolution action rows — aligned layout */
[style*="display:flex"][style*="gap"] > .sbs-applyall-cb {
align-self: center;
}
.done-circle {
width: 28px;
height: 28px;
}
h1, .h1 {
font-size: 22px;
}
h2, .h2 {
font-size: 18px;
}
h3, .h3 {
font-size: 16px;
}
/* v36.101 (H-css-24): dead `.modal-content { border-radius: 16px 16px 0 0 }` removed — `border-radius: 0 !important` (section 14) always won */
}
/* ============================================================================
18. HIDE DESKTOP ELEMENTS ON MOBILE
============================================================================ */
@media (max-width: 768px) {
.sidebar-toggle {
display: none !important;
}
.topbar-nav-btn {
display: none !important;
}
.shortcut-hint-bar {
display: none !important;
}
.undo-redo-group {
display: none !important;
}
.pomodoro-display.topbar-desktop-only {
display: none !important;
}
}
/* ============================================================================
19. VISIBILITY HELPERS
============================================================================ */
@media (min-width: 769px) {
.mobile-bottom-nav,
.mobile-fab,
.mobile-hamburger,
.mobile-only {
display: none !important;
}
}
@media (max-width: 768px) {
.desktop-only {
display: none !important;
}
}
/* ============================================================================
20. UTILITY CLASSES
============================================================================ */
@media (max-width: 768px) {
/* Safe area inset classes */
.pt-safe {
padding-top: env(safe-area-inset-top);
}
.pb-safe {
padding-bottom: env(safe-area-inset-bottom);
}
.pl-safe {
padding-left: env(safe-area-inset-left);
}
.pr-safe {
padding-right: env(safe-area-inset-right);
}
/* Touch feedback */
.touch-feedback:active {
opacity: 0.7;
transform: scale(0.98);
}
/* Prevent zoom on focus */
/* v36.101 (H-css-04): `button` removed — buttons never trigger iOS zoom, and the !important 16px overrode every compact toolbar size (.cal-msb-btn 11px, .rep-filter-btn, .view-toggle-btn, .hz-tab, .nx-play-btn…); checkbox/radio/range excluded as well */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])),
select,
textarea {
font-size: 16px !important;
}
/* Scrolling optimization */
.scrollable {
-webkit-overflow-scrolling: touch;
}
/* Text sizing helpers */
.text-sm { font-size: 13px; }
.text-base { font-size: 15px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 20px; }
/* Spacing helpers */
.m-safe {
margin: env(safe-area-inset-bottom) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Toast positioning — avoid bottom nav (65px + safe-area) */
.toast {
bottom: calc(75px + env(safe-area-inset-bottom)) !important;
right: 10px !important;
left: 10px !important;
max-width: calc(100vw - 20px) !important;
}
.undo-toast {
bottom: calc(85px + env(safe-area-inset-bottom)) !important;
}
}
/* ============================================================================
END OF MOBILE UPGRADE CSS
============================================================================ */
/* ============================================================================
v36.101 AUDIT FIXES (group H-css) — appended so they win the cascade
============================================================================ */
@media (max-width: 768px) {
/* v36.101 (H-css-05): the generic mobile select/input reset (width:100%, 12px/14px padding, 44px) made the
'group by' chip select fill the whole .mtask-chips row and stretched toolbar selects/date inputs */
.mtask-chip-select, .toolbar-select, .rep-date-input, #nxToolbar select { width: auto; min-height: 0; padding: 6px 10px !important; }
/* v36.101 (H-css-16): primary tap targets were 18–28px — hit areas enlarged without changing layout
(.mtask-check keeps a 28px margin box: 44px box with -8px margins, glyph stays centred where it was) */
.mtask-check { min-width: 44px; min-height: 44px; margin: -8px; }
.mtask-search { padding-right: 44px !important; }
.mtask-search-clear { padding: 8px 10px; min-width: 36px; min-height: 36px; }
.inbox-action-btn { width: 36px; height: 36px; }
.hz-entry-btn { width: 32px; height: 32px; }
.values-pro-move-btn { width: 30px; height: 24px; }
.cal-filter-panel .cfp-close { width: 40px; height: 40px; }
/* v36.101 (H-css-17): fixed multi-column grids that had no mobile override (fi.js System Status 3-col,
Decision stats 4-col, Quick-Capture routes 3-col, views.js Eisenhower 2×2 @ 500px, 3 medals forced into 2 cols) */
.sys-status-grid, .qc-route-grid { grid-template-columns: 1fr; }
.decision-pro-stats { grid-template-columns: repeat(2, 1fr); }
.values-pro-spotlight { grid-template-columns: 1fr !important; }
.eisenhower-matrix { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
.eisenhower-quad { min-height: 160px; max-height: 320px; }
/* v36.101 (iOS): bottom sheets ended under the home indicator — safe-area clearance (base padding 16px / 12px) */
.cal-filter-panel { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.cal-task-panel { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* v36.101 (H-css-25): touch devices have no hover — show the card delete button and drop the sticky :hover nudge */
@media (hover: none) {
.task-delete-btn { opacity: 0.8; }
.sidebar-item:hover { transform: none; }
}
/* v36.101 (H-css-08): reduced-motion was only honoured inside the ≤768px block — desktop kept infinite pulses */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* v36.101 (z-index ladder) → v36.108: the two unsaved-changes dialogs (no id; found via their button ids) must sit above the task
modal (.modal 10100) AND the side-edit panel (100000 — it has to stay above .confirmation-overlay 99998, see v36.102 above), so they
take the same tier as taskmodal.js's inline value and main's v36.104 safety net (100010). The old 10300 here beat that inline value
and hid the dialog behind the panel again. #prereqPickerOverlay is handled once, by the v36.104 rule (100005) above.
Resulting ladder: .modal 10100 < palette 20000 < .kbd-modal/.undo-toast/#focusExitPill 30000 < .confirmation-overlay 99998
< .side-edit-panel 100000 < #prereqPickerOverlay 100005 < unsaved-changes dialogs 100010. */
body > div:has(#_unsavedCancel), body > div:has(#_sdCancel) { z-index: 100010 !important; }
/* v36.101 (X2-22): the FAB container/menu are only styled inside ≤768px — on desktop they sat unstyled in the body flow */
@media (min-width: 769px) {
.mobile-fab-container, .mobile-fab-menu { display: none !important; }
}
/* v36.101: focus-mode exit pill (rendered by the focus/keyboard wave) — fixed bottom-right, 44px touch target, toasts/help tier */
#focusExitPill { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30000; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--bg-light); color: var(--text); border: 1px solid var(--glass-light); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; cursor: pointer; }
#focusExitPill:hover { border-color: var(--primary); }
#focusExitPill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 768px) { #focusExitPill { bottom: calc(84px + env(safe-area-inset-bottom)); } } /* clear the 56px FAB */
/* v36.101: color-scheme theo theme app (UA controls/scrollbars khớp dark/light thay vì theo OS) */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
/* ═══ v36.109 (J26-71) — Tương phản theme SÁNG: rà bằng máy (so màu chữ với nền hợp thành, 37 trang + modal + palette). 7 nhóm sửa dưới đây + token --text-dim ở khối light đầu tệp + 3 chỗ trong dashboard.js; sửa tối thiểu, mục tiêu ≥4.5:1 ═══ */
/* 1. Placeholder: mặc định Chrome #757575 chỉ 3.9-4.0:1 trên ô nền glass. :where() giữ độ ưu tiên 0 ⇒ KHÔNG đè .hz-add-input / #hzReviewAdd (thẻ tối) */
:where([data-theme="light"]) input::placeholder, :where([data-theme="light"]) textarea::placeholder { color: var(--text-dim); opacity: 1; }
/* 2. Tiêu đề nhóm sidebar: --text-dim + opacity .7 chỉ 3.1:1 */
[data-theme="light"] .sidebar-section-title { opacity: 1; }
/* 3. Nút nền xanh lá + chữ trắng (--success #10b981 chỉ 2.5:1) — gồm cả nút gán nền inline background:var(--success) */
[data-theme="light"] .btn-add, [data-theme="light"] .sbs-btn.success, [data-theme="light"] .rep-export-import, [data-theme="light"] .mtask-btn-add,
[data-theme="light"] .cal-mobile-sidebar-actions .cal-msb-btn.msb-success, [data-theme="light"] button[style*="background:var(--success)"], [data-theme="light"] button[style*="background: var(--success)"] { background: #047857 !important; border-color: #047857; }
/* 4. Nút nền đỏ + chữ trắng (--danger #ef4444 chỉ 3.8:1) */
[data-theme="light"] .btn-delete, [data-theme="light"] .task-delete-btn, [data-theme="light"] .btn-modal-danger, [data-theme="light"] .sbs-btn.danger,
[data-theme="light"] button[style*="background:var(--danger)"], [data-theme="light"] button[style*="background: var(--danger)"] { background: #c81e1e !important; border-color: #c81e1e; }
/* 5. Nút "Hoàn thành" hàng loạt + vòng tròn done: #2ECC71 + trắng chỉ 2.1:1 */
[data-theme="light"] .bulk-btn-done { background: #1e8449 !important; }
[data-theme="light"] .done-circle.dc-done { background: #1e8449; border-color: #1e8449; }
/* 6. Nút "Mở lại" hàng loạt: #3498DB + trắng 3.1:1 */
[data-theme="light"] .bulk-btn-reopen { background: #2874a6 !important; }
/* 7. Hộp "AI Recommendation" ở Dashboard: nền --glass-light chồng --glass (#dbdbdd) làm chữ --c-sky/--c-green chỉ 4.3-4.4:1 ⇒ nền thẻ đặc */
[data-theme="light"] .dash-ai-rec { background: var(--bg-light) !important; border: 1px solid var(--border); }
/* ═══ v36.112 (J26-85) — Đại tu UX vòng 2 · TƯƠNG PHẢN cả 2 theme. Đo bằng máy: 66 trang × (tối | sáng) × (1024 | 390 px), so màu chữ với nền HỢP THÀNH (chồng alpha + gradient + opacity tổ tiên).
Mục tiêu ≥4.5:1 chữ thường, ≥3:1 chữ lớn/icon. Sửa tối thiểu: 4 token mới + vài nhóm chọn lọc bên dưới; màu hardcode nằm trong js/*.js được sửa tại chỗ (đánh dấu "v36.112 (J26-85)"). Theme sáng đã có khối v36.109 ngay trên — khối này lo nốt theme TỐI + các chỗ còn sót. ═══ */
/* 0. Token nền ĐẶC dưới chữ trắng (chữ trắng trên --primary/--success/--danger sáng của theme tối chỉ 3.6 / 1.9 / 2.8:1) */
:root { --primary-solid: #6a62e0; --primary-solid-hover: #5d55d5; --success-solid: #047857; --danger-solid: #c81e1e; } /* chữ trắng: 4.7 / 5.6 / 5.5 / 5.7:1 */
[data-theme="light"] { --primary-solid: var(--primary); --primary-solid-hover: var(--primary-hover); } /* theme sáng đã dùng --primary #5A4FE0 (5.8:1) */
/* 1. Chữ phụ theme TỐI: #8b87a8 đạt 5.7:1 trên nền trang nhưng chỉ 3.0-4.4:1 trên nền thẻ có phủ màu (xanh/vàng/đỏ/tím qua rgba) ở 55 nhóm chữ — sáng thêm 1 nấc: 7.7:1 trên nền trang, ≥4.5:1 trên nền thẻ phủ màu tới ~#3b3b44. Theme sáng giữ nguyên #585860 */
:root:not([data-theme="light"]) { --text-dim: #a29fc0; }
/* 2. Placeholder: mặc định Chrome #757575 chỉ 3.6-4.3:1 trên nền ô nhập tối (theme sáng đã sửa ở khối v36.109). :where() ⇒ độ ưu tiên 0, không đè placeholder riêng của từng thành phần */
:where(input, textarea)::placeholder { color: var(--text-dim); opacity: 1; }
/* 3. Tiêu đề nhóm sidebar: --text-dim + opacity .7 chỉ 3.25:1 ở theme tối (theme sáng đã có opacity:1 ở khối v36.109) */
.sidebar-section-title { opacity: 1; }
/* 4. Nút / chip / mục đang chọn: nền --primary (#7c74ff) + chữ trắng chỉ 3.62:1 ở theme tối ⇒ dùng --primary-solid (4.7:1). Chỉ đổi nền (trạng thái đặc), giữ hover riêng */
[data-theme="dark"] :is(.btn-primary, .sidebar-item.active, .rep-filter-btn.active, .nx-btn.active, .filter-btn.active, .view-btn.active, .day-toggle.active, .btn-modal-primary, .view-toggle-btn.active, .tot-btn-primary, .hz-tab.active, .hz-review-btn.primary, .nx-recommend-score, .cal-mobile-sidebar-actions .cal-msb-btn.msb-primary, .cal-filter-panel .cfp-chip.active, .cal-filter-panel .cfp-apply, .sbs-btn.primary, .inbox-pro-filter.active, .mtask-chip.active, .filter-chip.active, .mobile-fab, .empty-state-cta, .nexus-onboard-go, .cal-mobile-nav .cal-mnav-pill.has-filter) { background: var(--primary-solid); }
[data-theme="dark"] :is(.btn-primary, .tot-btn-primary, .btn-modal-primary, .hz-review-btn.primary, .sbs-btn.primary, .empty-state-cta, .nexus-onboard-go):hover { background: var(--primary-solid-hover); }
[data-theme="dark"] :is([style*="background:var(--primary)"], [style*="background: var(--primary)"]) { background: var(--primary-solid) !important; } /* nền gán inline (vd chip số trong lịch, nút "Capture & Route") */
.sidebar-item.active .sidebar-num { color: #fff; } /* số 9px trên mục đang chọn: rgba(255,255,255,.75) chỉ 2.7:1 */
.btn-schedule { background: linear-gradient(135deg, var(--primary-solid), #7c3aed); } /* gradient cũ: cả hai đầu < 4.5:1 với chữ trắng (3.6 / 4.2) */
.btn-schedule:hover { background: linear-gradient(135deg, var(--primary-solid-hover), #6d28d9); }
/* 5. Nút nền xanh lá / đỏ + chữ trắng ở theme TỐI (--success #34d399 → 1.9:1, --danger #f87171 → 2.8:1) — khối v36.109 mới chỉ lo theme sáng; dùng cùng danh sách chọn */
[data-theme="dark"] .btn-add, [data-theme="dark"] .sbs-btn.success, [data-theme="dark"] .rep-export-import, [data-theme="dark"] .mtask-btn-add,
[data-theme="dark"] .cal-mobile-sidebar-actions .cal-msb-btn.msb-success, [data-theme="dark"] button[style*="background:var(--success)"], [data-theme="dark"] button[style*="background: var(--success)"] { background: var(--success-solid) !important; border-color: var(--success-solid); }
[data-theme="dark"] .btn-delete, [data-theme="dark"] .task-delete-btn, [data-theme="dark"] .btn-modal-danger, [data-theme="dark"] .sbs-btn.danger,
[data-theme="dark"] button[style*="background:var(--danger)"], [data-theme="dark"] button[style*="background: var(--danger)"] { background: var(--danger-solid) !important; border-color: var(--danger-solid); }
.task-card:hover .task-delete-btn, .task-delete-btn:focus-visible { opacity: .9; } /* nút × xoá: chữ trắng trên đỏ đặc cần opacity ≥ .85 mới còn ≥4.5:1 (trước: .8 trên cảm ứng, .5 ở bảng) */
@media (hover: none) { .task-delete-btn { opacity: .9; } }
/* 6. Huy hiệu đếm ở sidebar có nền gán bằng JS (analytics.js updateGTDBadges): Overdue = nền đỏ + chữ phụ; Waiting = nền vàng + chữ phụ (2.0:1) */
#badgeOverdue[style*="background"] { background: var(--danger-solid) !important; color: #fff !important; }
#badgeWaiting[style*="background"] { color: #1c1c1e !important; }
/* 7. Nhãn nhỏ "AI" / "v35" / "UNICORN" trên sidebar: chữ trắng trên gradient sáng (1.8-3.7:1) ⇒ đầu gradient đậm hơn, cùng tông */
.sidebar [style*="linear-gradient(135deg,#00d4ff,#8b5cf6)"] { background: linear-gradient(135deg, #0e7490, #6d28d9) !important; }
.sidebar [style*="linear-gradient(135deg,#f59e0b,#ef4444)"] { background: linear-gradient(135deg, #b45309, #b91c1c) !important; }
.sidebar [style*="linear-gradient(135deg,#6366f1,#ec4899)"] { background: linear-gradient(135deg, #4f46e5, #be185d) !important; }
/* 8. Ô thông tin khi chưa rê chuột vào biểu đồ donut ("Hover từng phần"): opacity .4 ⇒ 1.9:1. Chỉ trạng thái chờ (khi rê chuột JS đặt opacity 1 nên không khớp selector) */
.rep-donut-hover-info[style*="opacity:0.4"], .rep-donut-hover-info[style*="opacity: 0.4"] { opacity: .85 !important; }
/* 9. Tagline dưới lời chào ở Dashboard (dashboard.js, v36.112): chữ phụ nhỏ — dùng --text-dim (≥6:1 trên nền hero ở cả 2 theme) */
.dash-tagline { font-size: 12px; font-weight: 500; color: var(--text-dim); letter-spacing: .01em; margin: -2px 0 8px; }
/* 10. Nền "giếng" (thẻ con tối hơn nền cha): trước hardcode rgba(0,0,0,.2/.1) trong js/*.js ⇒ ở theme sáng thành xám #bcbcbe làm chữ phụ chỉ 3.7:1. Theme tối giữ NGUYÊN giá trị cũ ⇒ không đổi gì ở theme tối */
:root { --well: rgba(0,0,0,.2); --well-soft: rgba(0,0,0,.1); }
[data-theme="light"] { --well: rgba(0,0,0,.05); --well-soft: rgba(0,0,0,.03); }
/* 11. Chữ màu --c-* ở theme sáng: đậm thêm 1 nấc — đạt ≥4.5:1 cả trên nền thẻ phủ màu tối nhất đã đo (#d4d4d5), trước chỉ 3.5-4.4:1 (xanh lá/ngọc/lam/hồng/vàng nâu…). Tông màu giữ nguyên, tím đã đạt nên không đổi */
[data-theme="light"] { --c-red: #b01b1b; --c-orange: #a0350a; --c-amber: #934307; --c-green: #126735; --c-emerald: #03664a; --c-cyan: #0c6179; --c-sky: #035e91; --c-blue: #1c4cd4; --c-pink: #ad1655; --c-magenta: #981aa4; --c-gold: #814e00; }
/* 12. Chữ "mực" của màu chủ đạo trên nền thẻ phủ tím/xanh: chữ --primary chỉ 4.2-4.5:1 ở cả 2 theme trên các thẻ này (nền #22212d…#d8d8f6). Tối: sáng hơn · Sáng: đậm hơn */
:root { --primary-ink: #9a94ff; }
[data-theme="light"] { --primary-ink: #4a40c4; }
.sys-status-card h3 { color: var(--primary-ink); }
/* 13. Vòng điểm sức khoẻ hệ thống (Fi Status): chữ #2ecc71/#f1c40f/#e74c3c trên nền phủ màu chỉ 1.6-3.9:1 ⇒ token chữ --c-* (tối = gần như cũ, sáng = đậm) */
.sys-health-good { color: var(--c-green); }
.sys-health-warn { color: var(--c-amber); }
.sys-health-bad { color: var(--c-red); }
/* 14. Các dải khối thời gian nền (Ngủ đêm / Morning routine…) ở lịch: opacity .6 làm nhãn 9px chỉ 4.2:1 ở theme sáng */
[data-theme="light"] .cal-block-overlay { opacity: .8; }
/* 15. Chữ gán inline color:var(--primary) (≈170 chỗ trong js/*.js) trên nền thẻ hơi nổi/phủ màu chỉ 4.2-4.5:1 ở cả 2 theme ⇒ dùng --primary-ink (tối: sáng hơn · sáng: đậm hơn). Chỉ khớp khai báo `color:` (không đụng background-color / border-color) */
:is([style^="color:var(--primary)"], [style*=";color:var(--primary)"], [style*=" color:var(--primary)"], [style^="color: var(--primary)"], [style*="; color: var(--primary)"]) { color: var(--primary-ink) !important; }
/* 16. Nhãn "FI 2.0" / "Focus Intelligence": chữ trắng trên gradient #a78bfa→#7c3aed (đầu sáng 2.7:1) ⇒ gradient đậm hơn cùng tông tím */
.fi-header .fi-badge { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
/* 17. Chữ đang mờ vì opacity thấp: số đếm cấp Horizons (.6 → 4.4:1), mục đã xong có gạch ngang (.5 → 3.3:1) ⇒ tăng opacity, đã có gạch ngang/biểu tượng báo hiệu "xong" */
.hz-level-count { opacity: .85; }
.ar-outcome-item.done, .wr-check.done { opacity: .7; }
/* 18. Ô tìm dự án (desktop) không có lớp .search-box nên rơi về nền mặc định của trình duyệt (#3b3b3b ở theme tối) — dùng cùng nền/viền với .search-box để placeholder đủ tương phản */
.search-wrap input { background: var(--bg-lighter); color: var(--text); border: 1px solid var(--glass-light); border-radius: var(--radius-sm); }
/* 19. Mobile (≤768px): số phiên bản ở topbar — opacity .7 làm chữ chỉ 4.1:1 */
@media (max-width: 768px) { .topbar-version { opacity: .9; } }
/* 20. Nền "sáng" gán inline kèm chữ trắng (cùng thứ tự khai báo) — --danger/--success/--accent chỉ 2.1-3.8:1 với chữ trắng ở cả 2 theme (khối v36.109 mới chỉ lo