/* ═══════════════════════════════════════════════════════════════════
   themes.css — 10 chủ đề màu của BASAO.
   Admin đặt chủ đề mặc định ở Cài đặt hệ thống → Giao diện; người dùng
   tự chọn riêng trong menu tài khoản (nếu admin cho phép).
   Chỉ đổi bảng màu qua biến CSS, không đụng vào bố cục.
   Danh mục tên/mô tả nằm ở src/core/themes.py — sửa ở đây thì sửa cả kia.
   ═══════════════════════════════════════════════════════════════════ */

/* Ba Sao — Xanh lá thương hiệu, mặc định của hệ thống */
html[data-theme="basao"] {
    --accent: #10b981;
    --accent-light: #d1fae5;
    --accent-dark: #059669;
    --accent-ring: 16,185,129;
    --success: #059669;
    --bg: #f3f4f6;
    --sidebar-bg: #ffffff;
    --border: #e2e8f0;
}

/* Đại dương — Xanh dương mát mắt, hợp làm việc lâu */
html[data-theme="ocean"] {
    --accent: #0284c7;
    --accent-light: #e0f2fe;
    --accent-dark: #0369a1;
    --accent-ring: 2,132,199;
    --success: #0369a1;
    --bg: #f1f5f9;
    --sidebar-bg: #f8fbff;
    --border: #dbe6f0;
}

/* Chàm — Xanh tím trầm, nghiêm túc và gọn gàng */
html[data-theme="indigo"] {
    --accent: #4f46e5;
    --accent-light: #e0e7ff;
    --accent-dark: #4338ca;
    --accent-ring: 79,70,229;
    --success: #4338ca;
    --bg: #f4f5fd;
    --sidebar-bg: #f8f9ff;
    --border: #e0e2f4;
}

/* Tím lavender — Tím nhẹ, dịu và hiện đại */
html[data-theme="violet"] {
    --accent: #7c3aed;
    --accent-light: #ede9fe;
    --accent-dark: #6d28d9;
    --accent-ring: 124,58,237;
    --success: #6d28d9;
    --bg: #f7f4fd;
    --sidebar-bg: #fbf9ff;
    --border: #e6e0f7;
}

/* Hồng đào — Hồng đỏ ấm, nổi bật và trẻ trung */
html[data-theme="rose"] {
    --accent: #e11d48;
    --accent-light: #ffe4e6;
    --accent-dark: #be123c;
    --accent-ring: 225,29,72;
    --success: #be123c;
    --bg: #fdf3f5;
    --sidebar-bg: #fffafb;
    --border: #f6dde2;
}

/* Hoàng hôn — Cam ấm, năng lượng cho buổi sáng */
html[data-theme="sunset"] {
    --accent: #ea580c;
    --accent-light: #ffedd5;
    --accent-dark: #c2410c;
    --accent-ring: 234,88,12;
    --success: #c2410c;
    --bg: #fdf5ef;
    --sidebar-bg: #fffaf6;
    --border: #f4e2d3;
}

/* Hổ phách — Vàng nâu ấm, dễ chịu dưới đèn vàng */
html[data-theme="amber"] {
    --accent: #b45309;
    --accent-light: #fef3c7;
    --accent-dark: #92400e;
    --accent-ring: 180,83,9;
    --success: #92400e;
    --bg: #fbf7ee;
    --sidebar-bg: #fffdf7;
    --border: #efe4cd;
}

/* Ngọc bích — Xanh ngọc, tươi mà vẫn nhã */
html[data-theme="teal"] {
    --accent: #0d9488;
    --accent-light: #ccfbf1;
    --accent-dark: #0f766e;
    --accent-ring: 13,148,136;
    --success: #0f766e;
    --bg: #eff9f7;
    --sidebar-bg: #f7fdfc;
    --border: #d5eae6;
}

/* Rừng sâu — Xanh lá đậm, chắc chắn và điềm tĩnh */
html[data-theme="forest"] {
    --accent: #15803d;
    --accent-light: #dcfce7;
    --accent-dark: #166534;
    --accent-ring: 21,128,61;
    --success: #166534;
    --bg: #f2f7f3;
    --sidebar-bg: #f9fdfa;
    --border: #dbe8de;
}

/* Xám khoáng — Trung tính, tối giản, ít màu gây nhiễu */
html[data-theme="slate"] {
    --accent: #475569;
    --accent-light: #e2e8f0;
    --accent-dark: #334155;
    --accent-ring: 71,85,105;
    --success: #334155;
    --bg: #f1f3f6;
    --sidebar-bg: #f8fafc;
    --border: #dfe4ea;
}


/* ── Vá các chỗ style.css/base.html ghi cứng màu xanh lá ─────────────
   Những luật gốc dùng !important nên bản vá phải !important và có độ
   ưu tiên cao hơn (thêm html[data-theme]) thì mới thắng. */
html[data-theme] .nav-sub:hover {
    background: var(--accent-light) !important;
    color: var(--accent-dark) !important;
}

html[data-theme] .nav-sub.active {
    background: var(--accent-light) !important;
    color: var(--accent-dark) !important;
}

html[data-theme] .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

html[data-theme] .btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

html[data-theme] .badge-success {
    background: var(--accent-light);
    color: var(--accent-dark);
}

html[data-theme] .app-search input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-ring), .14) !important;
}

html[data-theme] .noti-h button,
html[data-theme] .noti-f a {
    color: var(--accent) !important;
}

/* Thanh bên bản giao diện mới cũng ăn theo màu chủ đề */
html[data-theme] .nav-item.active,
html[data-theme] .nav-link.active {
    background: var(--accent-light);
    color: var(--accent-dark);
}

html[data-theme] .logo-text {
    color: var(--accent);
}