/* GraphTask Flow - Zen Minimalist Style (Apple / Linear Aesthetic) */
:root {
  --font-main: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg-canvas: #090d16;
  --bg-surface: #0f172a;
  --bg-card: #172033;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: #6366f1;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  
  --q1-color: #f43f5e;
  --q2-color: #3b82f6;
  --q3-color: #f59e0b;
  --q4-color: #64748b;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-canvas);
  color: var(--text-main);
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbars tinh tế */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Glass Panels */
.glass-panel {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

.glass-dropdown {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Canvas Graph */
#network-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  outline: none;
  background: radial-gradient(circle at center, #101726 0%, #080c14 100%);
}

.canvas-grid-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Context Menu */
#custom-context-menu {
  position: fixed;
  z-index: 10000;
  width: 220px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}

#custom-context-menu.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  user-select: none;
}

.context-menu-item:hover {
  background-color: rgba(99, 102, 241, 0.2);
}

.context-menu-divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: 4px 6px;
}

/* Drag & Drop Mượt Mà Không Chớp Giật */
.drag-over-active {
  border-color: #6366f1 !important;
  background-color: rgba(99, 102, 241, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
}

.task-card-dragging {
  opacity: 0.35 !important;
  transition: none !important;
}

/* Vô hiệu hóa hover / con trỏ trên các thẻ con khi đang kéo để chống chớp giật */
body.is-dragging .task-card-item {
  pointer-events: none !important;
}

.matrix-column-container {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Crosshair cursor when connecting */
body.connect-mode-active,
body.connect-mode-active * {
  cursor: crosshair !important;
}

/* Banner Connect Mode */
#connect-mode-banner {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  box-shadow: 0 10px 30px -5px rgba(56, 189, 248, 0.25);
}

/* Native-like Tooltip được format chuyên nghiệp */
/* Native-like Tooltip được format chuyên nghiệp & Chống tràn chữ 100% */
div.vis-tooltip {
  position: absolute;
  visibility: hidden;
  padding: 0 !important;
  font-family: var(--font-main);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
  z-index: 9999;
  max-width: min(320px, calc(100vw - 20px)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.tooltip-card {
  box-sizing: border-box !important;
  width: 275px;
  max-width: min(290px, calc(100vw - 28px)) !important;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.85);
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}

.tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.tooltip-quad-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.tooltip-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
}
.tooltip-badge-done {
  background: rgba(6, 78, 59, 0.8);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.tooltip-badge-progress {
  background: rgba(120, 53, 15, 0.8);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.tooltip-badge-pending {
  background: rgba(30, 41, 59, 0.8);
  color: #94a3b8;
  border: 1px solid rgba(71, 85, 105, 0.4);
}

.tooltip-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: #ffffff;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}
.tooltip-title-done {
  text-decoration: line-through;
  opacity: 0.65;
}

.tooltip-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
  flex-wrap: wrap;
}

.tooltip-notes {
  font-size: 11px;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 9px;
  border-radius: 6px;
  border-left: 2.5px solid #6366f1;
  line-height: 1.45;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  max-height: 90px;
  overflow-y: auto;
}

.tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tooltip-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.tooltip-tag {
  font-size: 10px;
  color: #a5b4fc;
  font-weight: 500;
  background: rgba(49, 46, 129, 0.4);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.tooltip-links-count {
  font-size: 10px;
  color: #38bdf8;
  font-weight: 600;
}

.tooltip-tip {
  font-size: 10px;
  color: #64748b;
  text-align: center;
  margin-top: 2px;
}

.tooltip-date-pill {
  font-size: 11px;
  color: #818cf8;
  font-weight: 600;
}

.tooltip-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
}

.tooltip-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  overflow: hidden;
}
.tooltip-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.tooltip-achievement {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(180, 83, 9, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 6px;
  border-radius: 6px;
  text-align: center;
}

.tooltip-count-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 9999px;
}

/* HIGHLIGHT CỘT KHI NHẤP ĐÚP TỪ ĐỒ THỊ */
@keyframes column-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    border-color: #818cf8;
    transform: scale(1);
  }
  40% {
    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.25);
    border-color: #a5b4fc;
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    border-color: var(--border-subtle);
    transform: scale(1);
  }
}

.column-highlight-pulse {
  animation: column-pulse 1.8s ease-out;
  border-color: #818cf8 !important;
}

/* DOPAMINE FLOATING XP BUBBLE (+15 XP) */
@keyframes float-up-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1.1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -32px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -48px) scale(0.9);
  }
}

.floating-dopamine-bubble {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 9999px;
  animation: float-up-fade 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* THÔNG BÁO TẠM DỪNG / TIẾP TỤC ĐỒ THỊ (CANVAS TOAST) */
@keyframes toast-appear {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.95); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(0.95); }
}

.canvas-toast {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 9999px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: toast-appear 1.4s ease forwards;
}

@media (max-width: 768px) {
  .mobile-bottom-bar-padding {
    padding-bottom: 70px;
  }
  #matrix-container {
    touch-action: pan-y pinch-zoom;
  }
}

/* ================= PHONG CÁCH THIẾT KẾ OPENCODE.AI (NỀN TRẮNG CHỮ ĐEN) ================= */
html.light,
body.theme-light {
  --bg-canvas: #f8fafc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --border-subtle: #e2e8f0;
  --border-focus: #0f172a;
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-faint: #94a3b8;
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Header opencode.ai */
html.light header,
body.theme-light header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
}
html.light header span.text-white,
html.light header strong.text-white,
body.theme-light header span.text-white,
body.theme-light header strong.text-white {
  color: #0f172a !important;
}
html.light header button,
body.theme-light header button {
  color: #475569 !important;
}
html.light header button:hover,
body.theme-light header button:hover {
  color: #0f172a !important;
}

/* Bộ chuyển đổi chế độ xem 4 Cột / Đồ Thị */
html.light .bg-slate-950\/80,
body.theme-light .bg-slate-950\/80 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
html.light #btn-view-matrix.bg-slate-800,
html.light #btn-view-graph.bg-slate-800,
body.theme-light #btn-view-matrix.bg-slate-800,
body.theme-light #btn-view-graph.bg-slate-800 {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

/* Cụm điều hướng ngày & nút bấm */
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/80,
body.theme-light .bg-slate-800\/60,
body.theme-light .bg-slate-800\/80 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #current-date-label,
body.theme-light #current-date-label {
  color: #0f172a !important;
}

/* Glass Panels & Dropdowns trong Light Mode */
html.light .glass-panel,
body.theme-light .glass-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}
html.light .glass-dropdown,
body.theme-light .glass-dropdown {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

/* Bảng Ma Trận & Thẻ Việc Kanban trong Light Mode */
html.light #matrix-view-wrapper,
body.theme-light #matrix-view-wrapper {
  background-color: #f8fafc !important;
}
html.light .matrix-column-container,
body.theme-light .matrix-column-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html.light .matrix-column-container > div:first-child,
body.theme-light .matrix-column-container > div:first-child {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light .matrix-column-container h3,
body.theme-light .matrix-column-container h3 {
  color: #0f172a !important;
}
html.light .matrix-column-container .bg-slate-800\/80,
body.theme-light .matrix-column-container .bg-slate-800\/80 {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
html.light .matrix-column-container > div:last-child,
body.theme-light .matrix-column-container > div:last-child {
  border-top-color: #f1f5f9 !important;
  background-color: #ffffff !important;
}
html.light .matrix-column-container > div:last-child button,
body.theme-light .matrix-column-container > div:last-child button {
  color: #64748b !important;
}
html.light .matrix-column-container > div:last-child button:hover,
body.theme-light .matrix-column-container > div:last-child button:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

html.light .task-card-item,
body.theme-light .task-card-item {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}
html.light .task-card-item:hover,
body.theme-light .task-card-item:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
html.light .task-card-item .text-white,
html.light .task-card-item .text-slate-100,
html.light .task-card-item .text-slate-200,
body.theme-light .task-card-item .text-white,
body.theme-light .task-card-item .text-slate-200 {
  color: #0f172a !important;
}

/* Ô nhập liệu & biểu mẫu opencode.ai */
html.light input,
html.light select,
html.light textarea,
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.light input::placeholder,
html.light textarea::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: #94a3b8 !important;
}
html.light #quick-task-title,
body.theme-light #quick-task-title {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
html.light #quick-task-title:focus,
body.theme-light #quick-task-title:focus {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1) !important;
}

/* Canvas Mạng Đồ Thị trong Light Mode */
html.light #network-canvas,
body.theme-light #network-canvas {
  background: #f8fafc !important;
}
html.light .canvas-grid-pattern,
body.theme-light .canvas-grid-pattern {
  background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px) !important;
  background-size: 28px 28px !important;
}

/* Context Menu & Modals */
html.light #custom-context-menu,
body.theme-light #custom-context-menu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}
html.light .context-menu-item,
body.theme-light .context-menu-item {
  color: #0f172a !important;
}
html.light .context-menu-item:hover,
body.theme-light .context-menu-item:hover {
  background-color: #f1f5f9 !important;
}
html.light .context-menu-divider,
body.theme-light .context-menu-divider {
  background-color: #e2e8f0 !important;
}

/* Mobile Bottom Navigation */
html.light nav.md\:hidden,
body.theme-light nav.md\:hidden {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
}

/* Tooltip opencode.ai trong Light Mode */
html.light .tooltip-card,
body.theme-light .tooltip-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}
html.light .tooltip-title,
body.theme-light .tooltip-title {
  color: #0f172a !important;
}
html.light .tooltip-tip,
body.theme-light .tooltip-tip {
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}
html.light .tooltip-progress-row,
body.theme-light .tooltip-progress-row {
  color: #334155 !important;
}
html.light .tooltip-progress-bar,
body.theme-light .tooltip-progress-bar {
  background: #e2e8f0 !important;
}

/* Modals & Dialogs trong Light Mode (opencode.ai) */
html.light .glass-dropdown,
body.theme-light .glass-dropdown {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}
html.light .glass-dropdown h3.text-white,
html.light .glass-dropdown h2.text-white,
html.light .glass-dropdown strong.text-white,
body.theme-light .glass-dropdown h3.text-white,
body.theme-light .glass-dropdown h2.text-white,
body.theme-light .glass-dropdown strong.text-white {
  color: #0f172a !important;
}
html.light .glass-dropdown label,
body.theme-light .glass-dropdown label {
  color: #334155 !important;
}
html.light .glass-dropdown .text-slate-300,
html.light .glass-dropdown .text-slate-400,
body.theme-light .glass-dropdown .text-slate-300,
body.theme-light .glass-dropdown .text-slate-400 {
  color: #475569 !important;
}
html.light .glass-dropdown .border-slate-800,
html.light .glass-dropdown .border-slate-700,
body.theme-light .glass-dropdown .border-slate-800,
body.theme-light .glass-dropdown .border-slate-700 {
  border-color: #e2e8f0 !important;
}
html.light .glass-dropdown .bg-slate-800,
body.theme-light .glass-dropdown .bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
}
html.light .glass-dropdown .bg-slate-900,
html.light .glass-dropdown .bg-slate-950,
html.light .glass-dropdown .bg-slate-950\/70,
body.theme-light .glass-dropdown .bg-slate-900,
body.theme-light .glass-dropdown .bg-slate-950,
body.theme-light .glass-dropdown .bg-slate-950\/70 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light kbd,
body.theme-light kbd {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Banner Nối Dây trong Light Mode */
html.light #connect-mode-banner,
body.theme-light #connect-mode-banner {
  background-color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}
html.light #connect-mode-banner strong.text-white,
body.theme-light #connect-mode-banner strong.text-white {
  color: #0f172a !important;
}

/* Nhật Ký & Chẩn Đoán trong Light Mode */
html.light #log-list-container > div,
body.theme-light #log-list-container > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html.light #log-list-container .font-mono,
body.theme-light #log-list-container .font-mono {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
html.light #log-list-container span.text-white,
body.theme-light #log-list-container span.text-white {
  color: #0f172a !important;
}

/* ================= TINH CHỈNH THẨM MỸ CAO CẤP (RADICAL BEAUTY & POLISH) ================= */

/* Hiệu ứng chuyển động mượt mà cho Thẻ Việc */
.task-card-item {
  transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.14s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.14s ease !important;
}
.task-card-item:hover {
  transform: translateY(-1.5px);
}

/* Huy hiệu Bảo Mật trên Header trong Light Mode */
html.light header .bg-emerald-950\/60,
body.theme-light header .bg-emerald-950\/60 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}
html.light header .bg-emerald-950\/60 i,
body.theme-light header .bg-emerald-950\/60 i {
  color: #059669 !important;
}

/* Banner Động Lực Dopamine trong Light Mode */
html.light .bg-slate-900\/80:not(#quick-task-title),
body.theme-light .bg-slate-900\/80:not(#quick-task-title) {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
html.light .bg-indigo-950\/40,
body.theme-light .bg-indigo-950\/40 {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}
html.light .bg-amber-950\/40,
body.theme-light .bg-amber-950\/40 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
html.light .from-emerald-950\/80,
body.theme-light .from-emerald-950\/80 {
  background-image: linear-gradient(to right, #ecfdf5, #e0e7ff, #f3e8ff) !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important;
}

/* Thanh Lọc Trạng Thái & Ô Lọc Việc Ma Trận */
html.light #matrix-container .bg-slate-950,
body.theme-light #matrix-container .bg-slate-950 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
html.light [onclick*="setStatusFilter('all')"].bg-slate-800,
body.theme-light [onclick*="setStatusFilter('all')"].bg-slate-800 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html.light [onclick*="setStatusFilter('pending')"].bg-amber-900\/60,
body.theme-light [onclick*="setStatusFilter('pending')"].bg-amber-900\/60 {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
html.light [onclick*="setStatusFilter('done')"].bg-emerald-900\/60,
body.theme-light [onclick*="setStatusFilter('done')"].bg-emerald-900\/60 {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}
html.light #matrix-search-input,
body.theme-light #matrix-search-input {
  background-color: transparent !important;
  color: #0f172a !important;
}

/* Thẻ Việc Hoàn Thành & Checkbox trong Light Mode */
html.light .task-card-item.bg-emerald-950\/5,
body.theme-light .task-card-item.bg-emerald-950\/5 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  opacity: 0.75 !important;
}
html.light .task-card-item.bg-emerald-950\/5:hover,
body.theme-light .task-card-item.bg-emerald-950\/5:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.light .task-card-item button.border-slate-600,
body.theme-light .task-card-item button.border-slate-600 {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html.light .task-card-item button.border-slate-600:hover,
body.theme-light .task-card-item button.border-slate-600:hover {
  border-color: #4f46e5 !important;
}
html.light .bg-rose-950\/40,
body.theme-light .bg-rose-950\/40 {
  background-color: #ffe4e6 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

/* Số lượng thẻ trên Cột Ma Trận & Nút Thao Tác */
html.light .matrix-column-container .bg-slate-800\/80,
body.theme-light .matrix-column-container .bg-slate-800\/80 {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}
html.light .matrix-column-container button:hover,
body.theme-light .matrix-column-container button:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
html.light .task-card-item .md\:hidden button,
body.theme-light .task-card-item .md\:hidden button {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light .task-card-item button.hover\:bg-slate-700\/60:hover,
body.theme-light .task-card-item button.hover\:bg-slate-700\/60:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Nút Điều Khiển & Zoom trên Đồ Thị trong Light Mode */
html.light #network-canvas ~ div button,
body.theme-light #network-canvas ~ div button {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
html.light #network-canvas ~ div button:hover,
body.theme-light #network-canvas ~ div button:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html.light #network-canvas ~ div button.text-amber-400,
body.theme-light #network-canvas ~ div button.text-amber-400 {
  color: #d97706 !important;
}
html.light #graph-search-container,
body.theme-light #graph-search-container {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}
html.light #graph-search-input,
body.theme-light #graph-search-input {
  background-color: transparent !important;
  color: #0f172a !important;
}

/* Mobile Bottom Navigation trong Light Mode */
html.light nav.fixed.bottom-0,
body.theme-light nav.fixed.bottom-0 {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
}
html.light nav.fixed.bottom-0 button.text-indigo-400,
body.theme-light nav.fixed.bottom-0 button.text-indigo-400 {
  color: #4f46e5 !important;
}
html.light nav.fixed.bottom-0 button.text-slate-400,
body.theme-light nav.fixed.bottom-0 button.text-slate-400 {
  color: #64748b !important;
}

/* ================= TINH CHỈNH CHI TIẾT VI MÔ (MICRO POLISH CYCLE 25) ================= */

/* Thanh Cuộn Sắc Nét trong Light Mode (chống tàng hình trên nền trắng) */
html.light ::-webkit-scrollbar-thumb,
body.theme-light ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18) !important;
}
html.light ::-webkit-scrollbar-thumb:hover,
body.theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.35) !important;
}

/* Tô sáng văn bản (Selection Color) */
::selection {
  background-color: #c7d2fe;
  color: #1e1b4b;
}
html.light ::selection,
body.theme-light ::selection {
  background-color: #e0e7ff;
  color: #0f172a;
}

/* Khung Viền Rỗng Cột Ma Trận (Empty State) */
html.light .matrix-column-container .border-dashed,
body.theme-light .matrix-column-container .border-dashed {
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  background-color: rgba(248, 250, 252, 0.6) !important;
}

/* Nút Chuyển Cột & Divider trong Context Menu */
html.light #custom-context-menu .border-slate-800,
body.theme-light #custom-context-menu .border-slate-800 {
  border-color: #e2e8f0 !important;
}
html.light #custom-context-menu .text-slate-400,
html.light #custom-context-menu .text-slate-500,
body.theme-light #custom-context-menu .text-slate-400,
body.theme-light #custom-context-menu .text-slate-500 {
  color: #64748b !important;
}
html.light #custom-context-menu button.bg-slate-800,
body.theme-light #custom-context-menu button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

.context-menu-item:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}
html.light .context-menu-item:focus-visible,
body.theme-light .context-menu-item:focus-visible {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  outline: none;
}

#menu-dropdown button:focus-visible {
  background-color: #1e293b;
  outline: none;
}
html.light #menu-dropdown button:focus-visible,
body.theme-light #menu-dropdown button:focus-visible {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  outline: none;
}

#custom-context-menu [role="group"] button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}
html.light #custom-context-menu [role="group"] button:focus-visible,
body.theme-light #custom-context-menu [role="group"] button:focus-visible {
  outline: 2px solid #0f172a;
}

/* Chu kỳ #76: Chuẩn hóa Context Menu Items & Quadrant Buttons */
.context-menu-item-view,
.context-menu-item-connect,
.context-menu-item-toggle,
.context-menu-item-edit,
.context-menu-item-copy,
.context-menu-item-delete {
  transition: background-color 0.12s ease, color 0.12s ease;
}

.context-menu-item-view:focus-visible,
.context-menu-item-connect:focus-visible,
.context-menu-item-toggle:focus-visible,
.context-menu-item-edit:focus-visible,
.context-menu-item-copy:focus-visible,
.context-menu-item-delete:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: -1px;
}

html.light .context-menu-item-view,
body.theme-light .context-menu-item-view {
  color: #0284c7 !important;
}

html.light .context-menu-item-connect,
body.theme-light .context-menu-item-connect {
  color: #0284c7 !important;
}

html.light .context-menu-item-toggle,
body.theme-light .context-menu-item-toggle {
  color: #0f172a !important;
}

html.light .context-menu-item-edit,
body.theme-light .context-menu-item-edit {
  color: #0f172a !important;
}

html.light .context-menu-item-copy,
body.theme-light .context-menu-item-copy {
  color: #0f172a !important;
}

html.light .context-menu-item-delete,
body.theme-light .context-menu-item-delete {
  color: #dc2626 !important;
}

html.light .context-menu-item-delete:hover,
body.theme-light .context-menu-item-delete:hover {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
}

html.light .context-menu-item-view:focus-visible,
html.light .context-menu-item-connect:focus-visible,
html.light .context-menu-item-toggle:focus-visible,
html.light .context-menu-item-edit:focus-visible,
html.light .context-menu-item-copy:focus-visible,
html.light .context-menu-item-delete:focus-visible,
body.theme-light .context-menu-item-view:focus-visible,
body.theme-light .context-menu-item-connect:focus-visible,
body.theme-light .context-menu-item-toggle:focus-visible,
body.theme-light .context-menu-item-edit:focus-visible,
body.theme-light .context-menu-item-copy:focus-visible,
body.theme-light .context-menu-item-delete:focus-visible {
  outline: 2px solid #0f172a !important;
  outline-offset: -1px;
}

.context-menu-quadrant-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

html.light .context-menu-quadrant-btn:focus-visible,
body.theme-light .context-menu-quadrant-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Chu kỳ #77: Chuẩn hóa Header Navigation, View Switchers, Graph Toolbar & Mobile Nav */
.view-switcher-matrix-btn,
.view-switcher-graph-btn,
.date-nav-prev-btn,
.date-nav-next-btn,
.date-nav-today-btn,
.theme-toggle-header-btn,
.menu-dropdown-toggle-btn,
.graph-search-clear-btn,
.graph-range-today-btn,
.graph-range-7days-btn,
.graph-range-30days-btn,
.graph-only-linked-btn,
.graph-toggle-physics-btn,
.graph-relayout-btn,
.mob-nav-matrix-btn,
.mob-nav-graph-btn {
  transition: all 0.15s ease;
}

.view-switcher-matrix-btn:focus-visible,
.view-switcher-graph-btn:focus-visible,
.date-nav-prev-btn:focus-visible,
.date-nav-next-btn:focus-visible,
.date-nav-today-btn:focus-visible,
.theme-toggle-header-btn:focus-visible,
.menu-dropdown-toggle-btn:focus-visible,
.graph-search-clear-btn:focus-visible,
.graph-range-today-btn:focus-visible,
.graph-range-7days-btn:focus-visible,
.graph-range-30days-btn:focus-visible,
.graph-only-linked-btn:focus-visible,
.graph-toggle-physics-btn:focus-visible,
.graph-relayout-btn:focus-visible,
.mob-nav-matrix-btn:focus-visible,
.mob-nav-graph-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

html.light .date-nav-prev-btn,
html.light .date-nav-next-btn,
body.theme-light .date-nav-prev-btn,
body.theme-light .date-nav-next-btn {
  color: #475569 !important;
}

html.light .date-nav-prev-btn:hover,
html.light .date-nav-next-btn:hover,
body.theme-light .date-nav-prev-btn:hover,
body.theme-light .date-nav-next-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .theme-toggle-header-btn,
html.light .menu-dropdown-toggle-btn,
body.theme-light .theme-toggle-header-btn,
body.theme-light .menu-dropdown-toggle-btn {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

html.light .theme-toggle-header-btn:hover,
html.light .menu-dropdown-toggle-btn:hover,
body.theme-light .theme-toggle-header-btn:hover,
body.theme-light .menu-dropdown-toggle-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .view-switcher-matrix-btn:focus-visible,
html.light .view-switcher-graph-btn:focus-visible,
html.light .date-nav-prev-btn:focus-visible,
html.light .date-nav-next-btn:focus-visible,
html.light .date-nav-today-btn:focus-visible,
html.light .theme-toggle-header-btn:focus-visible,
html.light .menu-dropdown-toggle-btn:focus-visible,
html.light .graph-search-clear-btn:focus-visible,
html.light .graph-range-today-btn:focus-visible,
html.light .graph-range-7days-btn:focus-visible,
html.light .graph-range-30days-btn:focus-visible,
html.light .graph-only-linked-btn:focus-visible,
html.light .graph-toggle-physics-btn:focus-visible,
html.light .graph-relayout-btn:focus-visible,
html.light .mob-nav-matrix-btn:focus-visible,
html.light .mob-nav-graph-btn:focus-visible,
body.theme-light .view-switcher-matrix-btn:focus-visible,
body.theme-light .view-switcher-graph-btn:focus-visible,
body.theme-light .date-nav-prev-btn:focus-visible,
body.theme-light .date-nav-next-btn:focus-visible,
body.theme-light .date-nav-today-btn:focus-visible,
body.theme-light .theme-toggle-header-btn:focus-visible,
body.theme-light .menu-dropdown-toggle-btn:focus-visible,
body.theme-light .graph-search-clear-btn:focus-visible,
body.theme-light .graph-range-today-btn:focus-visible,
body.theme-light .graph-range-7days-btn:focus-visible,
body.theme-light .graph-range-30days-btn:focus-visible,
body.theme-light .graph-only-linked-btn:focus-visible,
body.theme-light .graph-toggle-physics-btn:focus-visible,
body.theme-light .graph-relayout-btn:focus-visible,
body.theme-light .mob-nav-matrix-btn:focus-visible,
body.theme-light .mob-nav-graph-btn:focus-visible {
  outline: 2px solid #0f172a !important;
  outline-offset: 1px;
}

/* Chu kỳ #78: Chuẩn hóa Form Inputs & Log Filter Tabs trong Modals */
.task-form-title-input,
.task-form-quadrant-select,
.task-form-date-input,
.task-form-time-input,
.task-form-tags-input,
.task-form-notes-textarea,
.quick-link-type-select,
.bug-report-category-select,
.bug-report-description-textarea,
.bug-report-expected-input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.task-form-title-input:focus,
.task-form-quadrant-select:focus,
.task-form-date-input:focus,
.task-form-time-input:focus,
.task-form-tags-input:focus,
.task-form-notes-textarea:focus,
.quick-link-type-select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

.bug-report-category-select:focus,
.bug-report-description-textarea:focus,
.bug-report-expected-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

html.light .task-form-title-input,
html.light .task-form-quadrant-select,
html.light .task-form-date-input,
html.light .task-form-time-input,
html.light .task-form-tags-input,
html.light .task-form-notes-textarea,
html.light .quick-link-type-select,
html.light .bug-report-category-select,
html.light .bug-report-description-textarea,
html.light .bug-report-expected-input,
body.theme-light .task-form-title-input,
body.theme-light .task-form-quadrant-select,
body.theme-light .task-form-date-input,
body.theme-light .task-form-time-input,
body.theme-light .task-form-tags-input,
body.theme-light .task-form-notes-textarea,
body.theme-light .quick-link-type-select,
body.theme-light .bug-report-category-select,
body.theme-light .bug-report-description-textarea,
body.theme-light .bug-report-expected-input {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html.light .task-form-title-input:focus,
html.light .task-form-quadrant-select:focus,
html.light .task-form-date-input:focus,
html.light .task-form-time-input:focus,
html.light .task-form-tags-input:focus,
html.light .task-form-notes-textarea:focus,
html.light .quick-link-type-select:focus,
body.theme-light .task-form-title-input:focus,
body.theme-light .task-form-quadrant-select:focus,
body.theme-light .task-form-date-input:focus,
body.theme-light .task-form-time-input:focus,
body.theme-light .task-form-tags-input:focus,
body.theme-light .task-form-notes-textarea:focus,
body.theme-light .quick-link-type-select:focus {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) !important;
}

html.light .bug-report-category-select:focus,
html.light .bug-report-description-textarea:focus,
html.light .bug-report-expected-input:focus,
body.theme-light .bug-report-category-select:focus,
body.theme-light .bug-report-description-textarea:focus,
body.theme-light .bug-report-expected-input:focus {
  background-color: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) !important;
}

.log-filter-tab-btn {
  transition: all 0.15s ease;
}

.log-filter-tab-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

html.light .log-filter-tab-btn:focus-visible,
body.theme-light .log-filter-tab-btn:focus-visible {
  outline: 2px solid #0f172a !important;
  outline-offset: 1px;
}

/* Chu kỳ #79: Chuẩn hóa Modal Hướng dẫn sử dụng (help-guide, help-privacy, help-shortcuts, help-shortcut-kbd) & Nút Form Modals */
.help-guide-item {
  transition: color 0.15s ease;
}

.help-shortcut-kbd {
  transition: all 0.15s ease;
  display: inline-block;
  vertical-align: baseline;
}

.help-shortcut-kbd:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

html.light .help-guide-section,
body.theme-light .help-guide-section,
html.light .help-shortcuts-section,
body.theme-light .help-shortcuts-section {
  border-color: #e2e8f0 !important;
}

html.light .help-guide-item,
body.theme-light .help-guide-item {
  color: #334155 !important;
}

html.light .help-privacy-banner,
body.theme-light .help-privacy-banner {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}

html.light .help-privacy-title,
body.theme-light .help-privacy-title {
  color: #047857 !important;
}

html.light .help-privacy-desc,
body.theme-light .help-privacy-desc {
  color: #065f46 !important;
}

html.light .help-privacy-icon,
body.theme-light .help-privacy-icon {
  color: #059669 !important;
}

html.light .help-shortcuts-heading,
body.theme-light .help-shortcuts-heading {
  color: #0f172a !important;
}

html.light .help-shortcut-item,
body.theme-light .help-shortcut-item {
  color: #475569 !important;
}

html.light .help-shortcut-kbd,
body.theme-light .help-shortcut-kbd {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.08) !important;
  font-weight: 600 !important;
}

/* Focus states cho các nút Hủy và Xác nhận trong task-modal và quick-link-modal */
#btn-cancel-task-modal:focus-visible,
#btn-submit-task-modal:focus-visible,
#btn-cancel-quick-link:focus-visible,
#btn-confirm-quick-link:focus-visible,
.quick-link-cancel-btn:focus-visible,
.quick-link-confirm-btn:focus-visible,
.task-modal-cancel-btn:focus-visible,
.task-modal-submit-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light #btn-cancel-task-modal:focus-visible,
html.light #btn-submit-task-modal:focus-visible,
html.light #btn-cancel-quick-link:focus-visible,
html.light #btn-confirm-quick-link:focus-visible,
html.light .quick-link-cancel-btn:focus-visible,
html.light .quick-link-confirm-btn:focus-visible,
html.light .task-modal-cancel-btn:focus-visible,
html.light .task-modal-submit-btn:focus-visible,
body.theme-light #btn-cancel-task-modal:focus-visible,
body.theme-light #btn-submit-task-modal:focus-visible,
body.theme-light #btn-cancel-quick-link:focus-visible,
body.theme-light #btn-confirm-quick-link:focus-visible,
body.theme-light .quick-link-cancel-btn:focus-visible,
body.theme-light .quick-link-confirm-btn:focus-visible,
body.theme-light .task-modal-cancel-btn:focus-visible,
body.theme-light .task-modal-submit-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Chu kỳ #80: Chuẩn hóa nút lọc trạng thái ma trận (matrix-status-btn), tabs mobile & nút checkbox thẻ việc */
.matrix-status-btn {
  transition: all 0.15s ease;
}

.matrix-status-btn:focus-visible,
.matrix-mobile-tab-btn:focus-visible,
.task-card-done-btn:focus-visible,
.goal-copy-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .matrix-status-btn:focus-visible,
html.light .matrix-mobile-tab-btn:focus-visible,
html.light .task-card-done-btn:focus-visible,
html.light .goal-copy-btn:focus-visible,
body.theme-light .matrix-status-btn:focus-visible,
body.theme-light .matrix-mobile-tab-btn:focus-visible,
body.theme-light .task-card-done-btn:focus-visible,
body.theme-light .goal-copy-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

html.light .matrix-status-all-btn[aria-pressed="true"],
body.theme-light .matrix-status-all-btn[aria-pressed="true"] {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

html.light .matrix-status-pending-btn[aria-pressed="true"],
body.theme-light .matrix-status-pending-btn[aria-pressed="true"] {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}

html.light .matrix-status-done-btn[aria-pressed="true"],
body.theme-light .matrix-status-done-btn[aria-pressed="true"] {
  background-color: #d1fae5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

html.light .matrix-mobile-tab-btn.is-active,
body.theme-light .matrix-mobile-tab-btn.is-active {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

html.light .task-card-done-btn,
body.theme-light .task-card-done-btn {
  border-color: #cbd5e1;
}

html.light .task-card-done-btn:hover,
body.theme-light .task-card-done-btn:hover {
  border-color: #6366f1;
}

/* Chu kỳ #81: Chuẩn hóa thanh công cụ đồ thị (graph-toolbar-controls, graph-range-group) & cụm zoom đồ thị (graph-zoom-toolbar, zoom-btn-*) */
.graph-toolbar-controls {
  transition: all 0.15s ease;
}

.zoom-toolbar-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .zoom-toolbar-btn:focus-visible,
body.theme-light .zoom-toolbar-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

html.light .graph-zoom-toolbar .zoom-toolbar-btn,
body.theme-light .graph-zoom-toolbar .zoom-toolbar-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

html.light .graph-zoom-toolbar .zoom-toolbar-btn:hover,
body.theme-light .graph-zoom-toolbar .zoom-toolbar-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

html.light .zoom-btn-today,
body.theme-light .zoom-btn-today {
  color: #d97706 !important;
}

html.light .zoom-btn-in,
html.light .zoom-btn-out,
html.light .zoom-btn-fit,
body.theme-light .zoom-btn-in,
body.theme-light .zoom-btn-out,
body.theme-light .zoom-btn-fit {
  color: #334155 !important;
}

html.light .zoom-btn-in:hover,
html.light .zoom-btn-out:hover,
html.light .zoom-btn-fit:hover,
body.theme-light .zoom-btn-in:hover,
body.theme-light .zoom-btn-out:hover,
body.theme-light .zoom-btn-fit:hover {
  color: #0f172a !important;
}

html.light .graph-range-group,
body.theme-light .graph-range-group {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .graph-range-group button[aria-pressed="true"],
body.theme-light .graph-range-group button[aria-pressed="true"] {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

html.light .graph-range-group button[aria-pressed="false"],
body.theme-light .graph-range-group button[aria-pressed="false"] {
  color: #64748b !important;
}

html.light .graph-range-group button[aria-pressed="false"]:hover,
body.theme-light .graph-range-group button[aria-pressed="false"]:hover {
  color: #0f172a !important;
}




/* Chu kỳ #82: Chuẩn hóa Zen Header & Menu Dropdown (zen-header, brand-title-text, view-switcher-group, menu-dropdown-panel, menu-dropdown-item, menu-dropdown-privacy-box) */
.zen-header {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

html.light .zen-header,
body.theme-light .zen-header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.light .brand-title-text,
body.theme-light .brand-title-text {
  color: #0f172a !important;
}

html.light .view-switcher-group,
body.theme-light .view-switcher-group {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Menu Dropdown Panel & Items */
.menu-dropdown-item {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-dropdown-item:focus-visible,
#menu-dropdown button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: -2px !important;
}

html.light .menu-dropdown-panel,
body.theme-light .menu-dropdown-panel {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
}

html.light .menu-dropdown-item,
html.light #menu-dropdown button,
body.theme-light .menu-dropdown-item,
body.theme-light #menu-dropdown button {
  color: #334155 !important;
}

html.light .menu-dropdown-item:hover,
html.light #menu-dropdown button:hover,
body.theme-light .menu-dropdown-item:hover,
body.theme-light #menu-dropdown button:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .menu-dropdown-item:focus-visible,
html.light #menu-dropdown button:focus-visible,
body.theme-light .menu-dropdown-item:focus-visible,
body.theme-light #menu-dropdown button:focus-visible {
  outline: 2px solid #0f172a !important;
  outline-offset: -2px !important;
  background-color: #f1f5f9 !important;
}

html.light .menu-item-theme,
html.light #menu-dropdown button.text-amber-300,
body.theme-light .menu-item-theme,
body.theme-light #menu-dropdown button.text-amber-300 {
  color: #b45309 !important;
}

html.light .menu-item-load-ceo,
html.light #menu-dropdown button.text-indigo-300,
body.theme-light .menu-item-load-ceo,
body.theme-light #menu-dropdown button.text-indigo-300 {
  color: #4338ca !important;
}

html.light .menu-item-seed-ai,
html.light #menu-dropdown button.text-sky-300,
body.theme-light .menu-item-seed-ai,
body.theme-light #menu-dropdown button.text-sky-300 {
  color: #0369a1 !important;
}

html.light .menu-item-bug-report,
body.theme-light .menu-item-bug-report {
  color: #d97706 !important;
}

html.light .menu-dropdown-privacy-box,
html.light #menu-dropdown .bg-slate-950\/60,
body.theme-light .menu-dropdown-privacy-box,
body.theme-light #menu-dropdown .bg-slate-950\/60 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #menu-dropdown .border-slate-800,
html.light #menu-dropdown .h-px.bg-slate-800,
body.theme-light #menu-dropdown .border-slate-800,
body.theme-light #menu-dropdown .h-px.bg-slate-800 {
  background-color: #e2e8f0 !important;
  border-color: #e2e8f0 !important;
}

/* Chu kỳ #83: Chuẩn hóa bộ công cụ đồ thị (graph-search-container, graph-only-linked-btn, graph-toggle-physics-btn, graph-relayout-btn), Mobile Bottom Nav (mobile-bottom-nav) & Tiêu đề Modal (modal-header-title) trong Light Mode */
.graph-search-container {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.graph-search-container:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

html.light .graph-search-container,
body.theme-light .graph-search-container {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html.light .graph-search-container:focus-within,
body.theme-light .graph-search-container:focus-within {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12) !important;
}

html.light #graph-search-input,
body.theme-light #graph-search-input {
  color: #0f172a !important;
}

html.light #graph-search-input::placeholder,
body.theme-light #graph-search-input::placeholder {
  color: #94a3b8 !important;
}

html.light .graph-search-clear-btn,
body.theme-light .graph-search-clear-btn {
  color: #64748b !important;
}

html.light .graph-search-clear-btn:hover,
body.theme-light .graph-search-clear-btn:hover {
  color: #0f172a !important;
}

/* Nút Chỉ Hiện Có Liên Kết (graph-only-linked-btn) */
.graph-only-linked-btn {
  transition: all 0.15s ease;
}

.graph-only-linked-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .graph-only-linked-btn,
body.theme-light .graph-only-linked-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

html.light .graph-only-linked-btn:hover,
body.theme-light .graph-only-linked-btn:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light .graph-only-linked-btn:focus-visible,
body.theme-light .graph-only-linked-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

html.light .graph-only-linked-btn[aria-pressed="true"],
body.theme-light .graph-only-linked-btn[aria-pressed="true"] {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
}

/* Nút Tạm Dừng/Tiếp Tục Physics (graph-toggle-physics-btn) */
.graph-toggle-physics-btn {
  transition: all 0.15s ease;
}

.graph-toggle-physics-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .graph-toggle-physics-btn,
body.theme-light .graph-toggle-physics-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html.light .graph-toggle-physics-btn:hover,
body.theme-light .graph-toggle-physics-btn:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light .graph-toggle-physics-btn:focus-visible,
body.theme-light .graph-toggle-physics-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

html.light .graph-toggle-physics-btn.is-physics-paused,
html.light .graph-toggle-physics-btn[aria-pressed="true"],
body.theme-light .graph-toggle-physics-btn.is-physics-paused,
body.theme-light .graph-toggle-physics-btn[aria-pressed="true"] {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
  font-weight: 600 !important;
}

/* Nút Sắp Xếp Lại Đồ Thị (graph-relayout-btn) */
.graph-relayout-btn {
  transition: all 0.15s ease;
}

.graph-relayout-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .graph-relayout-btn,
body.theme-light .graph-relayout-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html.light .graph-relayout-btn:hover,
body.theme-light .graph-relayout-btn:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light .graph-relayout-btn:focus-visible,
body.theme-light .graph-relayout-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Mobile Bottom Navigation (mobile-bottom-nav) trong Light Mode */
html.light .mobile-bottom-nav,
body.theme-light .mobile-bottom-nav {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-top: 1px solid #e2e8f0 !important;
}

html.light .mob-nav-matrix-btn[aria-selected="true"],
html.light .mob-nav-graph-btn[aria-selected="true"],
body.theme-light .mob-nav-matrix-btn[aria-selected="true"],
body.theme-light .mob-nav-graph-btn[aria-selected="true"] {
  color: #4f46e5 !important;
}

html.light .mob-nav-matrix-btn[aria-selected="false"],
html.light .mob-nav-graph-btn[aria-selected="false"],
body.theme-light .mob-nav-matrix-btn[aria-selected="false"],
body.theme-light .mob-nav-graph-btn[aria-selected="false"] {
  color: #64748b !important;
}

/* Tiêu đề Modal (modal-header-title) & Chi tiết Modal trong Light Mode */
html.light .modal-header-title,
body.theme-light .modal-header-title {
  color: #0f172a !important;
}

html.light #task-details-modal-title,
body.theme-light #task-details-modal-title {
  color: #475569 !important;
}

html.light #quick-link-source-name,
body.theme-light #quick-link-source-name {
  color: #0f172a !important;
}

html.light #quick-link-target-name,
body.theme-light #quick-link-target-name {
  color: #0284c7 !important;
}

/* Chu kỳ #84: Chuẩn hóa toàn bộ modal panels (task-modal-panel, task-details-modal-panel, bug-report-modal-panel, log-viewer-modal-panel, help-modal-panel) & chi tiết nội dung (task-detail-title, task-detail-notes-box, task-detail-link-card, task-details-links-section, bug-report-info-box, log-item-card, log-code-box) trong Light Mode */
html.light .task-modal-panel,
html.light .task-details-modal-panel,
html.light .bug-report-modal-panel,
html.light .log-viewer-modal-panel,
html.light .help-modal-panel,
body.theme-light .task-modal-panel,
body.theme-light .task-details-modal-panel,
body.theme-light .bug-report-modal-panel,
body.theme-light .log-viewer-modal-panel,
body.theme-light .help-modal-panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light .task-detail-title,
body.theme-light .task-detail-title {
  color: #0f172a !important;
}

html.light .task-detail-notes-box,
body.theme-light .task-detail-notes-box {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

html.light .task-detail-link-card,
body.theme-light .task-detail-link-card {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

html.light .task-details-links-section,
body.theme-light .task-details-links-section {
  border-top-color: #e2e8f0 !important;
}

html.light .bug-report-info-box,
body.theme-light .bug-report-info-box {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

html.light .log-item-card,
body.theme-light .log-item-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html.light .log-item-card:hover,
body.theme-light .log-item-card:hover {
  border-color: #cbd5e1 !important;
}

html.light .log-code-box,
body.theme-light .log-code-box {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

/* Canvas Toast trên Mạng Đồ Thị trong Light Mode */
html.light .canvas-toast,
body.theme-light .canvas-toast {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12) !important;
}

/* Vòng Tiêu Điểm Nhập Liệu (Linear Input Focus Rings) */
html.light input:focus,
html.light select:focus,
html.light textarea:focus,
body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
  outline: none !important;
}

/* Overlay Thông Báo Tìm Kiếm Rỗng Trên Đồ Thị trong Light Mode */
html.light #graph-empty-search-notice .glass-panel,
body.theme-light #graph-empty-search-notice .glass-panel {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.12) !important;
}
html.light #graph-empty-search-notice p,
body.theme-light #graph-empty-search-notice p {
  color: #334155 !important;
}
html.light #graph-empty-search-notice p:first-of-type,
body.theme-light #graph-empty-search-notice p:first-of-type {
  color: #0f172a !important;
}
html.light #graph-empty-search-notice span.text-sky-400,
body.theme-light #graph-empty-search-notice span.text-sky-400 {
  color: #0284c7 !important;
}

/* Trợ năng tiêu điểm cho bộ chọn ngày trên Zen Header */
#current-date-picker:focus-visible + #current-date-label {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 4px;
}
html.light #current-date-picker:focus-visible + #current-date-label {
  outline: 2px solid #0f172a;
}

#btn-theme-toggle:focus-visible,
#btn-dropdown-toggle:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
html.light #btn-theme-toggle:focus-visible,
html.light #btn-dropdown-toggle:focus-visible,
body.theme-light #btn-theme-toggle:focus-visible,
body.theme-light #btn-dropdown-toggle:focus-visible {
  outline: 2px solid #0f172a;
}

/* Thanh điều hướng chân trang Mobile (Bottom Nav) trong Light Mode */
html.light nav.fixed.bottom-0,
body.theme-light nav.fixed.bottom-0 {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top-color: #e2e8f0 !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05) !important;
}
html.light #mob-nav-matrix.text-slate-400,
html.light #mob-nav-graph.text-slate-400,
body.theme-light #mob-nav-matrix.text-slate-400,
body.theme-light #mob-nav-graph.text-slate-400 {
  color: #64748b !important;
}
html.light #mob-nav-matrix.text-indigo-400,
html.light #mob-nav-graph.text-indigo-400,
body.theme-light #mob-nav-matrix.text-indigo-400,
body.theme-light #mob-nav-graph.text-indigo-400 {
  color: #4f46e5 !important;
}

/* Cụm chuyển chế độ xem Đồ thị / 4 Cột trên Zen Header trong Light Mode */
html.light .sm\:flex.bg-slate-950\/80,
body.theme-light .sm\:flex.bg-slate-950\/80 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
html.light #btn-view-matrix.bg-slate-800,
html.light #btn-view-graph.bg-slate-800,
body.theme-light #btn-view-matrix.bg-slate-800,
body.theme-light #btn-view-graph.bg-slate-800 {
  background-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
html.light #btn-view-matrix.text-slate-400,
html.light #btn-view-graph.text-slate-400,
body.theme-light #btn-view-matrix.text-slate-400,
body.theme-light #btn-view-graph.text-slate-400 {
  color: #64748b !important;
}
html.light #btn-view-matrix.text-slate-400:hover,
html.light #btn-view-graph.text-slate-400:hover,
body.theme-light #btn-view-matrix.text-slate-400:hover,
body.theme-light #btn-view-graph.text-slate-400:hover {
  color: #0f172a !important;
}

/* Tiêu điểm bàn phím cho Menu Dropdown Tùy Chọn Hệ Thống */
#menu-dropdown button:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: -2px !important;
  background-color: rgba(51, 65, 85, 0.7) !important;
}

html.light #menu-dropdown button:focus-visible,
body.theme-light #menu-dropdown button:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: -2px !important;
  background-color: #f1f5f9 !important;
}

/* Ô tìm kiếm Ma Trận (.matrix-search-container) */
.matrix-search-container:focus-within {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 1px #38bdf8 !important;
}

html.light .matrix-search-container,
body.theme-light .matrix-search-container {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light .matrix-search-container:focus-within,
body.theme-light .matrix-search-container:focus-within {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 1px #0284c7 !important;
}

/* Bộ chuyển Tab Mobile trên Ma Trận (.matrix-mobile-tab-btn) */
html.light .matrix-mobile-tab-btn.is-active,
body.theme-light .matrix-mobile-tab-btn.is-active {
  background-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.light .matrix-mobile-tab-btn:not(.is-active),
body.theme-light .matrix-mobile-tab-btn:not(.is-active) {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

html.light .matrix-mobile-tab-btn:not(.is-active):hover,
body.theme-light .matrix-mobile-tab-btn:not(.is-active):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Tinh chỉnh Hộp Thoại Modal trong Light Mode (opencode.ai) */
html.light #help-modal .bg-emerald-950\/40,
body.theme-light #help-modal .bg-emerald-950\/40 {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

html.light #help-modal .bg-emerald-950\/40 strong.text-white,
body.theme-light #help-modal .bg-emerald-950\/40 strong.text-white {
  color: #14532d !important;
}

html.light #help-modal .bg-emerald-950\/40 i,
body.theme-light #help-modal .bg-emerald-950\/40 i {
  color: #16a34a !important;
}

html.light #bug-report-modal .bg-slate-950\/70,
body.theme-light #bug-report-modal .bg-slate-950\/70 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #bug-report-modal .text-sky-400,
body.theme-light #bug-report-modal .text-sky-400 {
  color: #0284c7 !important;
}

html.light #bug-report-modal .text-slate-500,
body.theme-light #bug-report-modal .text-slate-500 {
  color: #64748b !important;
}

html.light #log-viewer-modal .bg-slate-950,
body.theme-light #log-viewer-modal .bg-slate-950 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html.light [id^="log-filter-"].bg-slate-800,
body.theme-light [id^="log-filter-"].bg-slate-800 {
  background-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

html.light [id^="log-filter-"].text-slate-400,
body.theme-light [id^="log-filter-"].text-slate-400 {
  color: #64748b !important;
}

html.light [id^="log-filter-"].text-slate-400:hover,
body.theme-light [id^="log-filter-"].text-slate-400:hover {
  color: #0f172a !important;
}

html.light .glass-dropdown button.bg-slate-800,
body.theme-light .glass-dropdown button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

html.light .glass-dropdown button.bg-slate-800:hover,
body.theme-light .glass-dropdown button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .glass-dropdown button[aria-label="Đóng"]:hover,
body.theme-light .glass-dropdown button[aria-label="Đóng"]:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Tinh chỉnh Nút Chuyển Cột & Nút Tác Vụ Thẻ Việc trên Mobile/Desktop trong Light Mode */
html.light .task-card-item .border-slate-800\/60,
body.theme-light .task-card-item .border-slate-800\/60 {
  border-top-color: #f1f5f9 !important;
}

html.light .task-card-item [onclick*="moveTaskQuadrant"],
body.theme-light .task-card-item [onclick*="moveTaskQuadrant"] {
  background-color: #f8fafc !important;
}

html.light .task-card-item [onclick*="moveTaskQuadrant"].border-red-500\/40,
body.theme-light .task-card-item [onclick*="moveTaskQuadrant"].border-red-500\/40 {
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

html.light .task-card-item [onclick*="moveTaskQuadrant"].border-blue-500\/40,
body.theme-light .task-card-item [onclick*="moveTaskQuadrant"].border-blue-500\/40 {
  border-color: #93c5fd !important;
  color: #2563eb !important;
}

html.light .task-card-item [onclick*="moveTaskQuadrant"].border-amber-500\/40,
body.theme-light .task-card-item [onclick*="moveTaskQuadrant"].border-amber-500\/40 {
  border-color: #fcd34d !important;
  color: #d97706 !important;
}

html.light .task-card-item [onclick*="moveTaskQuadrant"].border-slate-600,
body.theme-light .task-card-item [onclick*="moveTaskQuadrant"].border-slate-600 {
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

html.light .task-card-item button.hover\:bg-slate-700\/60:hover,
body.theme-light .task-card-item button.hover\:bg-slate-700\/60:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .task-card-item button.hover\:text-sky-400:hover,
body.theme-light .task-card-item button.hover\:text-sky-400:hover {
  color: #0284c7 !important;
}

/* Chi tiết việc & Select Options trên Windows / macOS */
html.light #task-details-modal button.text-red-400,
body.theme-light #task-details-modal button.text-red-400 {
  color: #dc2626 !important;
}

html.light #task-details-modal button.text-red-400:hover,
body.theme-light #task-details-modal button.text-red-400:hover {
  background-color: #fee2e2 !important;
}

html.light #task-details-modal .text-indigo-400,
body.theme-light #task-details-modal .text-indigo-400 {
  color: #4f46e5 !important;
}

html.light select option,
body.theme-light select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

select option {
  background-color: #0f172a;
  color: #ffffff;
}

/* Nút Công Cụ Zoom Đồ Thị (.zoom-toolbar-btn) */
.zoom-toolbar-btn:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
}

html.light .zoom-toolbar-btn,
body.theme-light .zoom-toolbar-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

html.light .zoom-toolbar-btn:hover,
body.theme-light .zoom-toolbar-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

html.light .zoom-toolbar-btn:focus-visible,
body.theme-light .zoom-toolbar-btn:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: 2px !important;
}

html.light #btn-zoom-today,
body.theme-light #btn-zoom-today {
  color: #d97706 !important;
}

/* Nút Chọn Phạm Vi Thời Gian trên Đồ Thị trong Light Mode */
html.light .glass-panel button.text-slate-400,
body.theme-light .glass-panel button.text-slate-400 {
  color: #64748b !important;
}

html.light .glass-panel button.text-slate-400:hover,
body.theme-light .glass-panel button.text-slate-400:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

/* Tiêu Điểm Bàn Phím Cho Nút Chuyển Đổi Chế Độ Xem (Desktop & Mobile) */
#btn-view-matrix:focus-visible,
#btn-view-graph:focus-visible,
#mob-nav-matrix:focus-visible,
#mob-nav-graph:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
}

html.light #btn-view-matrix:focus-visible,
html.light #btn-view-graph:focus-visible,
html.light #mob-nav-matrix:focus-visible,
html.light #mob-nav-graph:focus-visible,
body.theme-light #btn-view-matrix:focus-visible,
body.theme-light #btn-view-graph:focus-visible,
body.theme-light #mob-nav-matrix:focus-visible,
body.theme-light #mob-nav-graph:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: 2px !important;
}

/* Tiêu Điểm Bàn Phím Cho Nút Lọc Khoảng Thời Gian & Công Cụ Đồ Thị */
#btn-graph-filter-today:focus-visible,
#btn-graph-filter-7days:focus-visible,
#btn-graph-filter-30days:focus-visible,
#btn-graph-only-linked:focus-visible,
#btn-graph-toggle-physics:focus-visible,
#btn-graph-relayout:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}
html.light #btn-graph-filter-today:focus-visible,
html.light #btn-graph-filter-7days:focus-visible,
html.light #btn-graph-filter-30days:focus-visible,
html.light #btn-graph-only-linked:focus-visible,
html.light #btn-graph-toggle-physics:focus-visible,
html.light #btn-graph-relayout:focus-visible,
body.theme-light #btn-graph-filter-today:focus-visible,
body.theme-light #btn-graph-filter-7days:focus-visible,
body.theme-light #btn-graph-filter-30days:focus-visible,
body.theme-light #btn-graph-only-linked:focus-visible,
body.theme-light #btn-graph-toggle-physics:focus-visible,
body.theme-light #btn-graph-relayout:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Tiêu Điểm Bàn Phím Cho Nút Lọc Mobile Tab & Hashtag Ma Trận */
.matrix-mobile-tab-btn:focus-visible,
.matrix-tag-filter-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}
html.light .matrix-mobile-tab-btn:focus-visible,
html.light .matrix-tag-filter-btn:focus-visible,
body.theme-light .matrix-mobile-tab-btn:focus-visible,
body.theme-light .matrix-tag-filter-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Trạng Thái Cột Rỗng & Hiệu Ứng Kéo Thả Trực Quan (opencode.ai Aesthetic) */
html.light .matrix-empty-state,
body.theme-light .matrix-empty-state {
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  background-color: rgba(248, 250, 252, 0.6) !important;
}

.matrix-column-container.drag-over-active .matrix-empty-state {
  border-color: #6366f1 !important;
  color: #a5b4fc !important;
  background-color: rgba(99, 102, 241, 0.1) !important;
}

html.light .matrix-column-container.drag-over-active,
body.theme-light .matrix-column-container.drag-over-active {
  border-color: #0284c7 !important;
  background-color: #f0f9ff !important;
  box-shadow: inset 0 0 0 1px #0284c7, 0 4px 14px rgba(2, 132, 199, 0.12) !important;
}

html.light .matrix-column-container.drag-over-active .matrix-empty-state,
body.theme-light .matrix-column-container.drag-over-active .matrix-empty-state {
  border-color: #38bdf8 !important;
  color: #0284c7 !important;
  background-color: #e0f2fe !important;
}

/* Thông Báo Hoàn Tác Tương Tác (Interactive Undo Toast) */
@keyframes slide-up-toast {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.undo-action-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #f8fafc;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  animation: slide-up-toast 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
}

html.light .undo-action-toast,
body.theme-light .undo-action-toast {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

.undo-action-toast button.btn-undo {
  background: #6366f1;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  transition: transform 0.1s ease, background-color 0.15s ease;
  border: none;
  cursor: pointer;
}

.undo-action-toast button.btn-undo:hover {
  background: #4f46e5;
}

.undo-action-toast button.btn-undo:active {
  transform: scale(0.95);
}

html.light .undo-action-toast button.btn-undo,
body.theme-light .undo-action-toast button.btn-undo {
  background: #0f172a !important;
  color: #ffffff !important;
}

html.light .undo-action-toast button.btn-undo:hover,
body.theme-light .undo-action-toast button.btn-undo:hover {
  background: #334155 !important;
}

html.light .undo-action-toast button.btn-close-toast,
body.theme-light .undo-action-toast button.btn-close-toast {
  color: #64748b !important;
}

html.light .undo-action-toast button.btn-close-toast:hover,
body.theme-light .undo-action-toast button.btn-close-toast:hover {
  color: #0f172a !important;
}

.undo-action-toast button.btn-close-toast:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .undo-action-toast button.btn-close-toast:focus-visible,
body.theme-light .undo-action-toast button.btn-close-toast:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Banner Mục Tiêu Ngày trong Light Mode */
html.light .goal-banner strong,
body.theme-light .goal-banner strong {
  color: #0f172a !important;
}

/* Nút Thẻ Tag Tương Tác Trong Modal Chi Tiết Việc */
.task-detail-tag-btn {
  background-color: rgba(49, 46, 129, 0.4);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

.task-detail-tag-btn:hover {
  background-color: rgba(67, 56, 202, 0.5);
  color: #ffffff;
}

.task-detail-tag-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .task-detail-tag-btn,
body.theme-light .task-detail-tag-btn {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

html.light .task-detail-tag-btn:hover,
body.theme-light .task-detail-tag-btn:hover {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
}

html.light .task-detail-tag-btn:focus-visible,
body.theme-light .task-detail-tag-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Chuẩn Hóa Phím Tắt <kbd> Trong Light Mode (opencode.ai Aesthetic) */
html.light kbd,
body.theme-light kbd {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light #help-modal .text-slate-300,
body.theme-light #help-modal .text-slate-300 {
  color: #334155 !important;
}

html.light #help-modal .text-slate-400,
body.theme-light #help-modal .text-slate-400 {
  color: #64748b !important;
}

/* Tiêu Điểm Bàn Phím Cho Các Nút Trong Hộp Thoại Nhật Ký Lỗi */
#log-viewer-modal button:focus-visible,
#log-viewer-modal [role="tab"]:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light #log-viewer-modal button:focus-visible,
html.light #log-viewer-modal [role="tab"]:focus-visible,
body.theme-light #log-viewer-modal button:focus-visible,
body.theme-light #log-viewer-modal [role="tab"]:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Banner Xác Nhận Xóa Sạch Nhật Ký Lỗi Trong Light Mode */
html.light #log-clear-confirm-banner,
body.theme-light #log-clear-confirm-banner {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

html.light #log-clear-confirm-banner button#btn-cancel-clear-logs,
body.theme-light #log-clear-confirm-banner button#btn-cancel-clear-logs {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
}

html.light #log-clear-confirm-banner button#btn-cancel-clear-logs:hover,
body.theme-light #log-clear-confirm-banner button#btn-cancel-clear-logs:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Tinh Chỉnh Thẻ Nhật Ký Lỗi Trong Light Mode (opencode.ai Aesthetic) */
html.light #log-list-container .bg-slate-900\/90,
body.theme-light #log-list-container .bg-slate-900\/90 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light #log-list-container .bg-slate-900\/90:hover,
body.theme-light #log-list-container .bg-slate-900\/90:hover {
  border-color: #cbd5e1 !important;
}

html.light #log-list-container .bg-slate-950\/80,
body.theme-light #log-list-container .bg-slate-950\/80,
html.light #log-list-container .bg-slate-950,
body.theme-light #log-list-container .bg-slate-950 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html.light #log-list-container button[onclick*="resolveLogItem"],
body.theme-light #log-list-container button[onclick*="resolveLogItem"] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light #log-list-container button[onclick*="resolveLogItem"]:hover,
body.theme-light #log-list-container button[onclick*="resolveLogItem"]:hover {
  background-color: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}

/* Nút Gợi Ý Nhãn Nhanh Trong Modal Thêm/Sửa Việc */
.task-preset-tag-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .task-preset-tag-btn,
body.theme-light .task-preset-tag-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light .task-preset-tag-btn:hover,
body.theme-light .task-preset-tag-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .task-preset-tag-btn:focus-visible,
body.theme-light .task-preset-tag-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Nút Gỡ Mắt Xích Liên Kết Trong Modal Chi Tiết Việc */
.task-unlink-btn:focus-visible {
  outline: 2px solid #ef4444 !important;
  outline-offset: 1px !important;
}

html.light .task-unlink-btn,
body.theme-light .task-unlink-btn {
  color: #64748b !important;
}

html.light .task-unlink-btn:hover,
body.theme-light .task-unlink-btn:hover {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
}

html.light .task-unlink-btn:focus-visible,
body.theme-light .task-unlink-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Modal Nối Mắt Xích Liên Kết Trong Light Mode & Tiêu Điểm Bàn Phím */
html.light #quick-link-modal .text-sky-300,
body.theme-light #quick-link-modal .text-sky-300 {
  color: #0284c7 !important;
}

#quick-link-modal button:focus-visible,
#quick-link-modal select:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: 1px !important;
}

html.light #quick-link-modal button:focus-visible,
html.light #quick-link-modal select:focus-visible,
body.theme-light #quick-link-modal button:focus-visible,
body.theme-light #quick-link-modal select:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* ================= CHU KỲ #50: TRỢ NĂNG & LIGHT MODE OPENCODE.AI ================= */

/* 1. Thanh tìm kiếm Đồ thị & Nút xóa tìm kiếm */
.graph-search-container:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4) !important;
}

html.light .graph-search-container,
body.theme-light .graph-search-container {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light .graph-search-container:focus-within,
body.theme-light .graph-search-container:focus-within {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1) !important;
}

html.light #graph-search-input,
body.theme-light #graph-search-input {
  color: #0f172a !important;
}

html.light #graph-search-input::placeholder,
body.theme-light #graph-search-input::placeholder {
  color: #94a3b8 !important;
}

html.light #btn-clear-graph-search,
body.theme-light #btn-clear-graph-search {
  color: #64748b !important;
}

html.light #btn-clear-graph-search:hover,
body.theme-light #btn-clear-graph-search:hover {
  color: #0f172a !important;
}

/* 2. Nút Zoom trên Đồ Thị */
.zoom-toolbar-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .zoom-toolbar-btn,
body.theme-light .zoom-toolbar-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light .zoom-toolbar-btn:hover,
body.theme-light .zoom-toolbar-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .zoom-toolbar-btn:focus-visible,
body.theme-light .zoom-toolbar-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* 3. Bộ lọc thời gian Đồ thị trong Light Mode */
html.light #btn-graph-filter-today[aria-pressed="false"],
html.light #btn-graph-filter-7days[aria-pressed="false"],
html.light #btn-graph-filter-30days[aria-pressed="false"],
body.theme-light #btn-graph-filter-today[aria-pressed="false"],
body.theme-light #btn-graph-filter-7days[aria-pressed="false"],
body.theme-light #btn-graph-filter-30days[aria-pressed="false"] {
  color: #64748b !important;
}

html.light #btn-graph-filter-today[aria-pressed="false"]:hover,
html.light #btn-graph-filter-7days[aria-pressed="false"]:hover,
html.light #btn-graph-filter-30days[aria-pressed="false"]:hover,
body.theme-light #btn-graph-filter-today[aria-pressed="false"]:hover,
body.theme-light #btn-graph-filter-7days[aria-pressed="false"]:hover,
body.theme-light #btn-graph-filter-30days[aria-pressed="false"]:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

html.light #btn-graph-only-linked,
html.light #btn-graph-toggle-physics,
html.light #btn-graph-relayout,
body.theme-light #btn-graph-only-linked,
body.theme-light #btn-graph-toggle-physics,
body.theme-light #btn-graph-relayout {
  color: #475569 !important;
}

html.light #btn-graph-only-linked:hover,
html.light #btn-graph-toggle-physics:hover,
html.light #btn-graph-relayout:hover,
body.theme-light #btn-graph-only-linked:hover,
body.theme-light #btn-graph-toggle-physics:hover,
body.theme-light #btn-graph-relayout:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

#btn-graph-toggle-physics[aria-pressed="true"] {
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
}

html.light #btn-graph-toggle-physics[aria-pressed="true"],
body.theme-light #btn-graph-toggle-physics[aria-pressed="true"] {
  border-color: #86efac !important;
  color: #15803d !important;
  background-color: #f0fdf4 !important;
}

#btn-graph-filter-today:focus-visible,
#btn-graph-filter-7days:focus-visible,
#btn-graph-filter-30days:focus-visible,
#btn-graph-only-linked:focus-visible,
#btn-graph-toggle-physics:focus-visible,
#btn-graph-relayout:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light #btn-graph-filter-today:focus-visible,
html.light #btn-graph-filter-7days:focus-visible,
html.light #btn-graph-filter-30days:focus-visible,
html.light #btn-graph-only-linked:focus-visible,
html.light #btn-graph-toggle-physics:focus-visible,
html.light #btn-graph-relayout:focus-visible,
body.theme-light #btn-graph-filter-today:focus-visible,
body.theme-light #btn-graph-filter-7days:focus-visible,
body.theme-light #btn-graph-filter-30days:focus-visible,
body.theme-light #btn-graph-only-linked:focus-visible,
body.theme-light #btn-graph-toggle-physics:focus-visible,
body.theme-light #btn-graph-relayout:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* 4. Cụm lọc trạng thái ma trận */
.matrix-status-filter-group button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .matrix-status-filter-group,
body.theme-light .matrix-status-filter-group {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html.light .matrix-status-filter-group button:not([aria-pressed="true"]),
body.theme-light .matrix-status-filter-group button:not([aria-pressed="true"]) {
  color: #64748b !important;
}

html.light .matrix-status-filter-group button:not([aria-pressed="true"]):hover,
body.theme-light .matrix-status-filter-group button:not([aria-pressed="true"]):hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
}

html.light .matrix-status-filter-group button[aria-pressed="true"],
body.theme-light .matrix-status-filter-group button[aria-pressed="true"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

html.light .matrix-status-filter-group button:focus-visible,
body.theme-light .matrix-status-filter-group button:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* 5. Ô tìm kiếm trong Ma Trận */
.matrix-search-container:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4) !important;
}

html.light .matrix-search-container,
body.theme-light .matrix-search-container {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light .matrix-search-container:focus-within,
body.theme-light .matrix-search-container:focus-within {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1) !important;
}

html.light #matrix-search-input,
body.theme-light #matrix-search-input {
  color: #0f172a !important;
}

html.light #matrix-search-input::placeholder,
body.theme-light #matrix-search-input::placeholder {
  color: #94a3b8 !important;
}

/* 6. Banner Mục Tiêu Ngày trong Light Mode */
html.light .goal-banner,
body.theme-light .goal-banner {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light .goal-banner strong,
body.theme-light .goal-banner strong {
  color: #0f172a !important;
}

/* ================= CHU KỲ #51: TRỢ NĂNG MODAL & LIGHT MODE OPENCODE.AI ================= */

/* 1. Cụm tab phân loại nhật ký lỗi (.log-tablist-group) */
.log-tablist-group button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .log-tablist-group,
body.theme-light .log-tablist-group {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html.light .log-tablist-group button[aria-selected="false"],
body.theme-light .log-tablist-group button[aria-selected="false"] {
  color: #64748b !important;
  background-color: transparent !important;
}

html.light .log-tablist-group button[aria-selected="false"]:hover,
body.theme-light .log-tablist-group button[aria-selected="false"]:hover {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
}

html.light .log-tablist-group button[aria-selected="true"],
body.theme-light .log-tablist-group button[aria-selected="true"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

html.light .log-tablist-group button:focus-visible,
body.theme-light .log-tablist-group button:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* 4. Thống kê nhật ký và tiêu điểm nút thao tác */
html.light #log-stats-text,
body.theme-light #log-stats-text {
  color: #64748b !important;
}

#log-viewer-modal button:focus-visible,
#bug-report-modal button:focus-visible,
#help-modal button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light #log-viewer-modal button:focus-visible,
html.light #bug-report-modal button:focus-visible,
html.light #help-modal button:focus-visible,
body.theme-light #log-viewer-modal button:focus-visible,
body.theme-light #bug-report-modal button:focus-visible,
body.theme-light #help-modal button:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* ================= CHU KỲ #52: TRỢ NĂNG ĐIỀU HƯỚNG NGÀY & MODAL CHI TIẾT VIỆC ================= */

/* 1. Cụm điều hướng ngày làm việc (.date-navigator-group) trong Light Mode */
html.light .date-navigator-group,
body.theme-light .date-navigator-group {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html.light .date-navigator-group button,
body.theme-light .date-navigator-group button {
  color: #64748b !important;
}

html.light .date-navigator-group button:hover,
body.theme-light .date-navigator-group button:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.date-navigator-group button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .date-navigator-group button:focus-visible,
body.theme-light .date-navigator-group button:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* 2. Modal Chi Tiết Việc (#task-details-modal) trong Light Mode */
html.light #task-details-modal .bg-slate-900,
body.theme-light #task-details-modal .bg-slate-900 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html.light #task-details-modal .text-sky-300,
body.theme-light #task-details-modal .text-sky-300 {
  color: #0284c7 !important;
}

html.light #task-details-modal button.bg-slate-800,
body.theme-light #task-details-modal button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light #task-details-modal button.bg-slate-800:hover,
body.theme-light #task-details-modal button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #task-details-modal button.text-red-400,
body.theme-light #task-details-modal button.text-red-400 {
  color: #dc2626 !important;
}

html.light #task-details-modal button.text-red-400:hover,
body.theme-light #task-details-modal button.text-red-400:hover {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
}

/* 3. Tiêu điểm cho mắt xích liên kết (.task-link-item-btn) */
.task-link-item-btn:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

html.light .task-link-item-btn:focus-visible,
body.theme-light .task-link-item-btn:focus-visible {
  outline: 2px solid #0284c7 !important;
}

/* ================= CHU KỲ #53: TRỢ NĂNG MODAL THÊM/SỬA VIỆC & LIGHT MODE ================= */

/* Nút Hủy và Nút Hành Động trong Task Modal & Quick Link Modal */
html.light #task-modal button.bg-slate-800,
body.theme-light #task-modal button.bg-slate-800,
html.light #quick-link-modal button.bg-slate-800,
body.theme-light #quick-link-modal button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light #task-modal button.bg-slate-800:hover,
body.theme-light #task-modal button.bg-slate-800:hover,
html.light #quick-link-modal button.bg-slate-800:hover,
body.theme-light #quick-link-modal button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

#task-modal button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light #task-modal button:focus-visible,
body.theme-light #task-modal button:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* ================= CHU KỲ #54: TRỢ NĂNG ĐỒ THỊ & BÀN PHÍM ================= */
#graph-container:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: -2px;
}

html.light #graph-container:focus-visible,
body.theme-light #graph-container:focus-visible {
  outline: 2px solid #0f172a !important;
  outline-offset: -2px;
}

/* ================= CHU KỲ #55: TRỢ NĂNG TIÊU ĐIỂM THẺ VIỆC & BADGE NHẬP VIỆC ================= */
.task-card-item button:focus-visible,
.task-card-item [role="button"]:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .task-card-item button:focus-visible,
html.light .task-card-item [role="button"]:focus-visible,
body.theme-light .task-card-item button:focus-visible,
body.theme-light .task-card-item [role="button"]:focus-visible {
  outline: 2px solid #0f172a !important;
  outline-offset: 1px !important;
}

html.light .quick-input-enter-badge,
body.theme-light .quick-input-enter-badge {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
}

/* ================= CHU KỲ #56: TRỢ NĂNG BANNER NỐI DÂY & THẺ VIỆC NGUỒN ================= */
#connect-mode-banner button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light #connect-mode-banner button,
body.theme-light #connect-mode-banner button {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light #connect-mode-banner button:hover,
body.theme-light #connect-mode-banner button:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #connect-mode-banner button:focus-visible,
body.theme-light #connect-mode-banner button:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Thẻ việc nguồn đang ở chế độ nối việc */
body.connect-mode-active .task-card-item.is-connecting-source {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4) !important;
}

html.light body.connect-mode-active .task-card-item.is-connecting-source,
body.theme-light.connect-mode-active .task-card-item.is-connecting-source {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.3) !important;
}

/* ================= CHU KỲ #57: TRỢ NĂNG TIÊU ĐIỂM MODAL CHI TIẾT VIỆC ================= */
#task-details-modal button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light #task-details-modal button:focus-visible,
body.theme-light #task-details-modal button:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* ================= CHU KỲ #58: TRỢ NĂNG BÁO CÁO LỖI & NHẬT KÝ CHẨN ĐOÁN HỆ THỐNG ================= */
.log-item-card {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

html.light .log-item-card,
body.theme-light .log-item-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light .log-item-card:hover,
body.theme-light .log-item-card:hover {
  border-color: #cbd5e1 !important;
}

html.light .log-code-box,
body.theme-light .log-code-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

html.light .log-breadcrumbs-box,
body.theme-light .log-breadcrumbs-box {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html.light #report-char-count,
body.theme-light #report-char-count {
  color: #64748b !important;
}

/* ================= CHU KỲ #59: BỘ ĐẾM KÝ TỰ TÊN VIỆC & PHÍM TẮT MODAL THÊM VIỆC / NỐI DÂY ================= */
html.light #task-title-char-count,
body.theme-light #task-title-char-count {
  color: #64748b !important;
}

/* ================= CHU KỲ #60: PHÍM TẮT CHUYỂN CỘT MA TRẬN 1-4 & BADGE TIÊU ĐỀ CỘT ================= */
.matrix-column-key-badge {
  line-height: 1.2;
}

html.light .matrix-column-key-badge,
body.theme-light .matrix-column-key-badge {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

/* ================= CHU KỲ #61: LÀM NỔI BẬT TỪ KHÓA TÌM KIẾM TRONG MA TRẬN & PHÍM TẮT TÌM KIẾM ================= */
.matrix-search-highlight {
  background-color: rgba(245, 158, 11, 0.28);
  color: #fde68a;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}

html.light .matrix-search-highlight,
body.theme-light .matrix-search-highlight {
  background-color: rgba(245, 158, 11, 0.22) !important;
  color: #92400e !important;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}

/* ================= CHU KỲ #62: NÚT SAO CHÉP KẾ HOẠCH NGÀY TRÊN GOAL BANNER & TRỢ NĂNG ================= */
.goal-copy-btn {
  background-color: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}

.goal-copy-btn:hover {
  background-color: rgba(30, 41, 59, 0.9);
  color: #f8fafc;
}

.goal-copy-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #6366f1;
}

html.light .goal-copy-btn,
body.theme-light .goal-copy-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

html.light .goal-copy-btn:hover,
body.theme-light .goal-copy-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

html.light .goal-copy-btn:focus-visible,
body.theme-light .goal-copy-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0f172a !important;
}

/* ================= CHU KỲ #63: NÚT NỐI VIỆC TRONG MODAL CHI TIẾT & TRỢ NĂNG LIÊN KẾT ================= */
.task-detail-connect-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #38bdf8;
}

html.light .task-detail-connect-btn,
body.theme-light .task-detail-connect-btn {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
}

html.light .task-detail-connect-btn:hover,
body.theme-light .task-detail-connect-btn:hover {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #7dd3fc !important;
}

html.light .task-detail-connect-btn:focus-visible,
body.theme-light .task-detail-connect-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0284c7 !important;
}

/* ================= CHU KỲ #64: TRỢ NĂNG THẺ VIỆC (GHI CHÚ, TAG NHẤP CHỌN) & NÚT XÓA LỌC NHÃN ================= */
.task-card-tag-badge {
  color: #94a3b8;
}

.task-card-tag-badge:hover {
  color: #818cf8;
}

.task-card-tag-badge:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px #6366f1;
}

.task-has-notes-indicator {
  color: #64748b;
}

.matrix-clear-tag-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px #6366f1;
}

html.light .task-card-tag-badge,
body.theme-light .task-card-tag-badge {
  color: #64748b !important;
}

html.light .task-card-tag-badge:hover,
body.theme-light .task-card-tag-badge:hover {
  color: #4338ca !important;
}

html.light .task-card-tag-badge:focus-visible,
body.theme-light .task-card-tag-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px #0f172a !important;
}

html.light .task-has-notes-indicator,
body.theme-light .task-has-notes-indicator {
  color: #94a3b8 !important;
}

html.light .matrix-clear-tag-btn,
body.theme-light .matrix-clear-tag-btn {
  color: #64748b !important;
}

html.light .matrix-clear-tag-btn:hover,
body.theme-light .matrix-clear-tag-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ================= CHU KỲ #65: THANH TIẾN ĐỘ MỤC TIÊU NGÀY (GOAL PROGRESS BAR) & PHÍM TẮT P ================= */
.goal-progress-track {
  background-color: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.goal-progress-fill {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
}

html.light .goal-progress-track,
body.theme-light .goal-progress-track {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

html.light .goal-progress-fill.bg-indigo-500,
body.theme-light .goal-progress-fill.bg-indigo-500 {
  background-color: #4f46e5 !important;
}

html.light .goal-progress-fill.bg-amber-500,
body.theme-light .goal-progress-fill.bg-amber-500 {
  background-color: #d97706 !important;
}

html.light .goal-progress-fill.bg-emerald-400,
body.theme-light .goal-progress-fill.bg-emerald-400 {
  background-color: #059669 !important;
}

/* Nhóm bộ lọc trạng thái ma trận trong Light Mode */
html.light .matrix-status-filter-group,
body.theme-light .matrix-status-filter-group {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light .matrix-status-filter-group button:hover,
body.theme-light .matrix-status-filter-group button:hover {
  color: #0f172a !important;
}

html.light .matrix-status-filter-group button.bg-slate-800,
body.theme-light .matrix-status-filter-group button.bg-slate-800 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html.light .matrix-status-filter-group button.bg-amber-900\/60,
body.theme-light .matrix-status-filter-group button.bg-amber-900\/60 {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

html.light .matrix-status-filter-group button.bg-emerald-900\/60,
body.theme-light .matrix-status-filter-group button.bg-emerald-900\/60 {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

/* ================= CHU KỲ #66: NÚT VỀ HÔM NAY THÔNG MINH & HUY HIỆU PHÍM TẮT MODAL CHI TIẾT ================= */

/* Nút Về Hôm Nay Thông Minh trong Cụm Điều Hướng Ngày */
#btn-date-today {
  color: #fbbf24;
}

#btn-date-today:hover {
  color: #fef08a;
  background-color: rgba(51, 65, 85, 0.6);
}

#btn-date-today:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f59e0b;
}

html.light #btn-date-today,
body.theme-light #btn-date-today {
  color: #b45309 !important;
  background-color: #fef3c7 !important;
  border: 1px solid #fde68a !important;
}

html.light #btn-date-today:hover,
body.theme-light #btn-date-today:hover {
  background-color: #fde68a !important;
  color: #92400e !important;
}

html.light #btn-date-today:focus-visible,
body.theme-light #btn-date-today:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #b45309 !important;
}

/* Các nút tác vụ trong Modal Chi Tiết Việc (opencode.ai Light Mode) */
html.light .task-detail-done-btn.bg-slate-800,
body.theme-light .task-detail-done-btn.bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light .task-detail-done-btn.bg-emerald-600,
body.theme-light .task-detail-done-btn.bg-emerald-600 {
  background-color: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
}

html.light .task-detail-edit-btn,
body.theme-light .task-detail-edit-btn {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light .task-detail-edit-btn:hover,
body.theme-light .task-detail-edit-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .task-detail-delete-btn,
body.theme-light .task-detail-delete-btn {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

html.light .task-detail-delete-btn:hover,
body.theme-light .task-detail-delete-btn:hover {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
}

html.light .task-detail-done-btn:focus-visible,
body.theme-light .task-detail-done-btn:focus-visible,
html.light .task-detail-edit-btn:focus-visible,
body.theme-light .task-detail-edit-btn:focus-visible,
html.light .task-detail-delete-btn:focus-visible,
body.theme-light .task-detail-delete-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0f172a !important;
}

/* ================= CHU KỲ #67: CỤM ĐIỀU HƯỚNG NGÀY & NÚT XÓA NHANH FORM NHẬP VIỆC ================= */

/* Cụm điều hướng ngày trong Light Mode (opencode.ai) */
html.light .date-navigator-group,
body.theme-light .date-navigator-group {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light .date-navigator-group #current-date-label,
body.theme-light .date-navigator-group #current-date-label {
  color: #0f172a !important;
}

html.light .date-navigator-group #btn-date-prev,
html.light .date-navigator-group #btn-date-next,
body.theme-light .date-navigator-group #btn-date-prev,
body.theme-light .date-navigator-group #btn-date-next {
  color: #475569 !important;
}

html.light .date-navigator-group #btn-date-prev:hover,
html.light .date-navigator-group #btn-date-next:hover,
body.theme-light .date-navigator-group #btn-date-prev:hover,
body.theme-light .date-navigator-group #btn-date-next:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Nút xóa nhanh nội dung đang nhập ô Thêm việc */
#btn-clear-quick-task {
  color: #94a3b8;
}

#btn-clear-quick-task:hover {
  color: #ffffff;
  background-color: #334155;
}

#btn-clear-quick-task:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px #6366f1;
}

html.light #btn-clear-quick-task,
body.theme-light #btn-clear-quick-task {
  color: #64748b !important;
}

html.light #btn-clear-quick-task:hover,
body.theme-light #btn-clear-quick-task:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light #btn-clear-quick-task:focus-visible,
body.theme-light #btn-clear-quick-task:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px #0f172a !important;
}

/* Huy hiệu Enter trong ô Thêm việc ở Light Mode */
html.light .quick-input-enter-badge,
body.theme-light .quick-input-enter-badge {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

/* ================= CHU KỲ #68: HUY HIỆU MẮT XÍCH, QUÁ HẠN & ĐIỀU HƯỚNG MOBILE LIGHT MODE ================= */

/* Huy hiệu Mắt xích Liên kết & Quá hạn trong Light Mode */
html.light .task-card-links-badge,
body.theme-light .task-card-links-badge {
  color: #0284c7 !important;
}

html.light .task-card-overdue-badge,
body.theme-light .task-card-overdue-badge {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

/* Nút xóa bộ lọc trong trạng thái rỗng ma trận */
.matrix-empty-clear-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px #6366f1;
}

html.light .matrix-empty-clear-btn,
body.theme-light .matrix-empty-clear-btn {
  color: #4f46e5 !important;
}

html.light .matrix-empty-clear-btn:hover,
body.theme-light .matrix-empty-clear-btn:hover {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
}

/* Thanh điều hướng Mobile (Bottom Nav) trong Light Mode */
html.light nav.md\:hidden button.text-indigo-400,
body.theme-light nav.md\:hidden button.text-indigo-400 {
  color: #4f46e5 !important;
}

html.light nav.md\:hidden button.text-slate-400,
body.theme-light nav.md\:hidden button.text-slate-400 {
  color: #64748b !important;
}

/* ================= CHU KỲ #70: NÚT SỬA NHANH 1-CHẠM, NÚT TÁC VỤ THẺ VIỆC & MOBILE MOVE LIGHT MODE ================= */

/* Nút tác vụ nhanh trên thẻ việc trong Chế độ Sáng */
html.light .task-card-item .task-card-connect-btn,
body.theme-light .task-card-item .task-card-connect-btn,
html.light .task-card-item .task-card-edit-btn,
body.theme-light .task-card-item .task-card-edit-btn,
html.light .task-card-item .task-card-options-btn,
body.theme-light .task-card-item .task-card-options-btn {
  color: #64748b !important;
}

html.light .task-card-item .task-card-connect-btn:hover,
body.theme-light .task-card-item .task-card-connect-btn:hover {
  color: #0284c7 !important;
  background-color: #e0f2fe !important;
}

html.light .task-card-item .task-card-edit-btn:hover,
body.theme-light .task-card-item .task-card-edit-btn:hover {
  color: #b45309 !important;
  background-color: #fef3c7 !important;
}

html.light .task-card-item .task-card-options-btn:hover,
body.theme-light .task-card-item .task-card-options-btn:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

/* Tiêu điểm bàn phím cho nút tác vụ thẻ việc */
.task-card-item .task-card-edit-btn:focus-visible,
.task-card-item .task-card-connect-btn:focus-visible,
.task-card-item .task-card-options-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .task-card-item .task-card-edit-btn:focus-visible,
html.light .task-card-item .task-card-connect-btn:focus-visible,
html.light .task-card-item .task-card-options-btn:focus-visible,
body.theme-light .task-card-item .task-card-edit-btn:focus-visible,
body.theme-light .task-card-item .task-card-connect-btn:focus-visible,
body.theme-light .task-card-item .task-card-options-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Nút chuyển nhanh cột mobile trong Chế độ Sáng */
html.light .task-card-item .task-mobile-move-btn,
body.theme-light .task-card-item .task-mobile-move-btn {
  background-color: #ffffff !important;
}

/* ================= CHU KỲ #71: SAO CHÉP VIỆC 1-CHẠM, NÚT COPY & HUY HIỆU QUÁ HẠN CHI TIẾT LIGHT MODE ================= */

/* Nút sao chép việc trong modal chi tiết */
.task-detail-copy-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .task-detail-copy-btn,
body.theme-light .task-detail-copy-btn {
  color: #64748b !important;
}

html.light .task-detail-copy-btn:hover,
body.theme-light .task-detail-copy-btn:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

html.light .task-detail-copy-btn:focus-visible,
body.theme-light .task-detail-copy-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Huy hiệu Quá hạn trong modal chi tiết */
html.light .task-detail-overdue-badge,
body.theme-light .task-detail-overdue-badge {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

/* ================= CHU KỲ #72: CHUẨN HÓA CLASS NÚT THÊM CỘT, HUY HIỆU ĐẾM & NÚT HỦY/XÁC NHẬN MODAL LIGHT MODE ================= */

/* Focus states cho các nút tác vụ cột và modal */
.matrix-column-add-btn:focus-visible,
.matrix-column-footer-add-btn:focus-visible,
.quick-link-cancel-btn:focus-visible,
.quick-link-confirm-btn:focus-visible,
.task-modal-cancel-btn:focus-visible,
.task-modal-submit-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .matrix-column-add-btn:focus-visible,
html.light .matrix-column-footer-add-btn:focus-visible,
html.light .quick-link-cancel-btn:focus-visible,
html.light .quick-link-confirm-btn:focus-visible,
html.light .task-modal-cancel-btn:focus-visible,
html.light .task-modal-submit-btn:focus-visible,
body.theme-light .matrix-column-add-btn:focus-visible,
body.theme-light .matrix-column-footer-add-btn:focus-visible,
body.theme-light .quick-link-cancel-btn:focus-visible,
body.theme-light .quick-link-confirm-btn:focus-visible,
body.theme-light .task-modal-cancel-btn:focus-visible,
body.theme-light .task-modal-submit-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Huy hiệu số lượng việc trên cột ma trận Light Mode */
html.light .matrix-column-count-badge,
body.theme-light .matrix-column-count-badge {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Nút thêm việc trên header cột ma trận Light Mode */
html.light .matrix-column-add-btn,
body.theme-light .matrix-column-add-btn {
  color: #64748b !important;
}

html.light .matrix-column-add-btn:hover,
body.theme-light .matrix-column-add-btn:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

/* Nút thêm việc chân cột ma trận Light Mode */
html.light .matrix-column-footer-add-btn,
body.theme-light .matrix-column-footer-add-btn {
  color: #64748b !important;
}

html.light .matrix-column-footer-add-btn:hover,
body.theme-light .matrix-column-footer-add-btn:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

/* Nút Hủy trong Quick Link Modal & Task Modal Light Mode */
html.light .quick-link-cancel-btn,
html.light .task-modal-cancel-btn,
body.theme-light .quick-link-cancel-btn,
body.theme-light .task-modal-cancel-btn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .quick-link-cancel-btn:hover,
html.light .task-modal-cancel-btn:hover,
body.theme-light .quick-link-cancel-btn:hover,
body.theme-light .task-modal-cancel-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ================= CHU KỲ #73: CHUẨN HÓA NÚT TÁC VỤ MODAL BÁO CÁO LỖI & NHẬT KÝ HỆ THỐNG LIGHT MODE ================= */

/* Focus states cho các nút trong Modal Báo cáo lỗi & Nhật ký */
.bug-report-cancel-btn:focus-visible,
.bug-report-submit-btn:focus-visible,
.bug-report-close-btn:focus-visible,
.log-viewer-close-btn:focus-visible,
.log-action-resolve-all-btn:focus-visible,
.log-action-copy-btn:focus-visible,
.log-action-export-btn:focus-visible,
.log-action-clear-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .bug-report-cancel-btn:focus-visible,
html.light .bug-report-submit-btn:focus-visible,
html.light .bug-report-close-btn:focus-visible,
html.light .log-viewer-close-btn:focus-visible,
html.light .log-action-resolve-all-btn:focus-visible,
html.light .log-action-copy-btn:focus-visible,
html.light .log-action-export-btn:focus-visible,
html.light .log-action-clear-btn:focus-visible,
body.theme-light .bug-report-cancel-btn:focus-visible,
body.theme-light .bug-report-submit-btn:focus-visible,
body.theme-light .bug-report-close-btn:focus-visible,
body.theme-light .log-viewer-close-btn:focus-visible,
body.theme-light .log-action-resolve-all-btn:focus-visible,
body.theme-light .log-action-copy-btn:focus-visible,
body.theme-light .log-action-export-btn:focus-visible,
body.theme-light .log-action-clear-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Khối thông tin tự động đính kèm trong Modal Báo cáo lỗi Light Mode */
html.light .bug-report-info-box,
body.theme-light .bug-report-info-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

html.light .bug-report-info-box p,
body.theme-light .bug-report-info-box p {
  color: #64748b !important;
}

/* Nút Hủy trong Modal Báo cáo lỗi Light Mode */
html.light .bug-report-cancel-btn,
body.theme-light .bug-report-cancel-btn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .bug-report-cancel-btn:hover,
body.theme-light .bug-report-cancel-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Nút đóng modal báo cáo lỗi & nhật ký Light Mode */
html.light .bug-report-close-btn,
html.light .log-viewer-close-btn,
body.theme-light .bug-report-close-btn,
body.theme-light .log-viewer-close-btn {
  color: #64748b !important;
}

html.light .bug-report-close-btn:hover,
html.light .log-viewer-close-btn:hover,
body.theme-light .bug-report-close-btn:hover,
body.theme-light .log-viewer-close-btn:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

/* Nút Export JSON và Clear Logs trong Modal Nhật ký Light Mode */
html.light .log-action-export-btn,
body.theme-light .log-action-export-btn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .log-action-export-btn:hover,
body.theme-light .log-action-export-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .log-action-clear-btn,
body.theme-light .log-action-clear-btn {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .log-action-clear-btn:hover,
body.theme-light .log-action-clear-btn:hover {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* ================= CHU KỲ #74: CHUẨN HÓA BỘ NÚT ĐÓNG MODAL, NÚT HỦY BANNER NỐI DÂY & MENU ITEM LIGHT MODE ================= */

/* Focus states cho các nút đóng modal và nút hủy banner nối dây */
.task-modal-close-btn:focus-visible,
.quick-link-close-btn:focus-visible,
.task-details-close-btn:focus-visible,
.help-modal-close-btn:focus-visible,
.connect-mode-cancel-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .task-modal-close-btn:focus-visible,
html.light .quick-link-close-btn:focus-visible,
html.light .task-details-close-btn:focus-visible,
html.light .help-modal-close-btn:focus-visible,
html.light .connect-mode-cancel-btn:focus-visible,
body.theme-light .task-modal-close-btn:focus-visible,
body.theme-light .quick-link-close-btn:focus-visible,
body.theme-light .task-details-close-btn:focus-visible,
body.theme-light .help-modal-close-btn:focus-visible,
body.theme-light .connect-mode-cancel-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Nút đóng modal thống nhất trong Chế độ Sáng Light Mode */
html.light .task-modal-close-btn,
html.light .quick-link-close-btn,
html.light .task-details-close-btn,
html.light .help-modal-close-btn,
body.theme-light .task-modal-close-btn,
body.theme-light .quick-link-close-btn,
body.theme-light .task-details-close-btn,
body.theme-light .help-modal-close-btn {
  color: #64748b !important;
}

html.light .task-modal-close-btn:hover,
html.light .quick-link-close-btn:hover,
html.light .task-details-close-btn:hover,
html.light .help-modal-close-btn:hover,
body.theme-light .task-modal-close-btn:hover,
body.theme-light .quick-link-close-btn:hover,
body.theme-light .task-details-close-btn:hover,
body.theme-light .help-modal-close-btn:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

/* Nút Hủy trong banner nối dây Light Mode */
html.light .connect-mode-cancel-btn,
body.theme-light .connect-mode-cancel-btn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .connect-mode-cancel-btn:hover,
body.theme-light .connect-mode-cancel-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ================= CHU KỲ #75: CHUẨN HÓA CÁC NÚT TÁC VỤ CHI TIẾT CÔNG VIỆC TRONG LIGHT MODE (OPENCODE.AI) ================= */

/* Focus states cho các nút tác vụ chi tiết việc */
.task-detail-connect-btn:focus-visible,
.task-detail-done-btn:focus-visible,
.task-detail-edit-btn:focus-visible,
.task-detail-delete-btn:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

html.light .task-detail-connect-btn:focus-visible,
html.light .task-detail-done-btn:focus-visible,
html.light .task-detail-edit-btn:focus-visible,
html.light .task-detail-delete-btn:focus-visible,
body.theme-light .task-detail-connect-btn:focus-visible,
body.theme-light .task-detail-done-btn:focus-visible,
body.theme-light .task-detail-edit-btn:focus-visible,
body.theme-light .task-detail-delete-btn:focus-visible {
  outline: 2px solid #0f172a !important;
}

/* Nút nối việc trong modal chi tiết Light Mode */
html.light .task-detail-connect-btn,
body.theme-light .task-detail-connect-btn {
  background-color: #f0f9ff !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
}

html.light .task-detail-connect-btn:hover,
body.theme-light .task-detail-connect-btn:hover {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
}

/* Nút sửa việc trong modal chi tiết Light Mode */
html.light .task-detail-edit-btn,
body.theme-light .task-detail-edit-btn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .task-detail-edit-btn:hover,
body.theme-light .task-detail-edit-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Nút xóa việc trong modal chi tiết Light Mode */
html.light .task-detail-delete-btn,
body.theme-light .task-detail-delete-btn {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

html.light .task-detail-delete-btn:hover,
body.theme-light .task-detail-delete-btn:hover {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
}

/* ================= CHU KỲ #85: CHUẨN HÓA MATRIX SEARCH & QUICK TASK INPUT OPENCODE.AI ================= */

/* 1. Hộp tìm kiếm ma trận công việc (.matrix-search-container) */
.matrix-search-container:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

html.light .matrix-search-container,
body.theme-light .matrix-search-container {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light .matrix-search-container:focus-within,
body.theme-light .matrix-search-container:focus-within {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08) !important;
}

/* Nút xóa nhanh tìm kiếm ma trận (.matrix-search-clear-btn) */
html.light .matrix-search-clear-btn,
body.theme-light .matrix-search-clear-btn {
  color: #64748b !important;
}

html.light .matrix-search-clear-btn:hover,
body.theme-light .matrix-search-clear-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 2. Huy hiệu phím tắt Enter cho ô nhập việc 2s (.quick-input-enter-badge) */
html.light .quick-input-enter-badge,
body.theme-light .quick-input-enter-badge {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

/* 3. Nút xóa nhanh nội dung nhập 2s (#btn-clear-quick-task) */
html.light #btn-clear-quick-task,
body.theme-light #btn-clear-quick-task {
  color: #64748b !important;
}

html.light #btn-clear-quick-task:hover,
body.theme-light #btn-clear-quick-task:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 4. Nhãn lọc hashtag trên ma trận (.matrix-tag-filter-btn & .matrix-clear-tag-btn) */
html.light .matrix-tag-filter-btn[style*="border: 1px solid transparent"],
body.theme-light .matrix-tag-filter-btn[style*="border: 1px solid transparent"] {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

html.light .matrix-tag-filter-btn:hover,
body.theme-light .matrix-tag-filter-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .matrix-clear-tag-btn,
body.theme-light .matrix-clear-tag-btn {
  color: #64748b !important;
}

html.light .matrix-clear-tag-btn:hover,
body.theme-light .matrix-clear-tag-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ================= CHU KỲ #86: CHUẨN HÓA CỘT MA TRẬN, THẺ VIỆC & NÚT MOBILE OPENCODE.AI ================= */

/* 1. Huy hiệu phím tắt cột ma trận (.matrix-column-key-badge) */
html.light .matrix-column-key-badge,
body.theme-light .matrix-column-key-badge {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

/* 2. Huy hiệu đếm số việc trong cột (.matrix-column-count-badge) */
html.light .matrix-column-count-badge,
body.theme-light .matrix-column-count-badge {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

/* 3. Nút thêm việc đầu & chân cột (.matrix-column-add-btn & .matrix-column-footer-add-btn) */
html.light .matrix-column-add-btn,
body.theme-light .matrix-column-add-btn {
  color: #64748b !important;
}

html.light .matrix-column-add-btn:hover,
body.theme-light .matrix-column-add-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .matrix-column-footer-add-btn,
body.theme-light .matrix-column-footer-add-btn {
  color: #64748b !important;
}

html.light .matrix-column-footer-add-btn:hover,
body.theme-light .matrix-column-footer-add-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 4. Khung trạng thái rỗng cột ma trận (.matrix-empty-state) */
html.light .matrix-empty-state,
body.theme-light .matrix-empty-state {
  border-color: #cbd5e1 !important;
  color: #64748b !important;
  background-color: rgba(248, 250, 252, 0.6) !important;
}

/* 5. Checkbox tròn hoàn thành việc (.task-card-done-btn) */
html.light .task-card-done-btn:not(.bg-emerald-600),
body.theme-light .task-card-done-btn:not(.bg-emerald-600) {
  border-color: #cbd5e1 !important;
  background-color: #ffffff !important;
}

html.light .task-card-done-btn:not(.bg-emerald-600):hover,
body.theme-light .task-card-done-btn:not(.bg-emerald-600):hover {
  border-color: #059669 !important;
  background-color: #ecfdf5 !important;
}

/* 6. Huy hiệu quá hạn, thẻ nhãn & mắt xích trên thẻ việc */
html.light .task-card-overdue-badge,
body.theme-light .task-card-overdue-badge {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

html.light .task-card-tag-badge,
body.theme-light .task-card-tag-badge {
  color: #4f46e5 !important;
}

html.light .task-card-tag-badge:hover,
body.theme-light .task-card-tag-badge:hover {
  color: #4338ca !important;
}

html.light .task-card-links-badge,
body.theme-light .task-card-links-badge {
  color: #0284c7 !important;
}

/* 7. Nút tác vụ thẻ việc (.task-card-connect-btn, .task-card-edit-btn, .task-card-options-btn) */
html.light .task-card-connect-btn,
html.light .task-card-edit-btn,
html.light .task-card-options-btn,
body.theme-light .task-card-connect-btn,
body.theme-light .task-card-edit-btn,
body.theme-light .task-card-options-btn {
  color: #64748b !important;
}

html.light .task-card-connect-btn:hover,
body.theme-light .task-card-connect-btn:hover {
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
}

html.light .task-card-edit-btn:hover,
body.theme-light .task-card-edit-btn:hover {
  background-color: #fef3c7 !important;
  color: #d97706 !important;
}

html.light .task-card-options-btn:hover,
body.theme-light .task-card-options-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 8. Nút chuyển nhanh cột 1-chạm trên Mobile (.task-mobile-move-btn) */
html.light .task-mobile-move-btn,
body.theme-light .task-mobile-move-btn {
  background-color: #ffffff !important;
}