/* ============================================================
   theme-mode.css
   LIGHT MODE: không đổi gì (giữ nguyên style gốc trong master.blade.php)
   DARK MODE : toàn bộ override nằm dưới [data-theme="dark"]
   ============================================================ */

/* ---------- Nút chuyển đổi sáng/tối (chưa có style ở đâu khác) ---------- */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    color: #287F7D;
    margin: 0 4px;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: rgba(63, 167, 163, .12);
}
.theme-toggle-btn:active {
    transform: scale(.94);
}
.theme-icon {
    display: none;
    font-size: 1.05rem;
    line-height: 1;
}
/* Light mode (mặc định): hiện icon trăng (bấm để chuyển sang dark) */
.theme-icon-moon { display: inline-block; }
.theme-icon-sun  { display: none; }

/* Dark mode: hiện icon mặt trời (bấm để chuyển về light) */
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun  {
    display: inline-block;
    color: #FFD874;
}

/* ============================================================
   DARK MODE - BẢNG MÀU NỀN TỐI
   ============================================================ */

/* ---------- Nền tổng thể ---------- */
html[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] #root,
[data-theme="dark"] .background,
[data-theme="dark"] #container.container-fluid,
[data-theme="dark"] .main {
    background: linear-gradient(180deg, #0E1B1B 0%, #132727 100%) !important;
}

/* ---------- Thanh menu ngang trên cùng ---------- */
[data-theme="dark"] .ninja-topbar {
    background: #122423 !important;
    border-bottom: 1px solid #234444 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .ninja-topbar .nav-links a {
    color: #6FB0AE !important;
}
[data-theme="dark"] .ninja-topbar .nav-links a:hover {
    color: #8CD8D4 !important;
}
[data-theme="dark"] .ninja-topbar .nav-links a.active {
    color: #4FD3CC !important;
    border-bottom-color: #4FD3CC !important;
}

/* ---------- Menu trượt mobile ---------- */
[data-theme="dark"] .ninja-drawer {
    background: #122423 !important;
    box-shadow: 8px 0 28px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .ninja-drawer .nav-links a {
    color: #8CD8D4 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .ninja-drawer .nav-links a:active,
[data-theme="dark"] .ninja-drawer .nav-links a:hover {
    background: rgba(63,167,163,.18) !important;
}
[data-theme="dark"] .ninja-drawer .auth-actions {
    border-top: 1px solid rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .ninja-drawer-close {
    background: rgba(63,167,163,.18) !important;
    color: #8CD8D4 !important;
}
[data-theme="dark"] .ninja-drawer-backdrop {
    background: rgba(0,0,0,.6) !important;
}
[data-theme="dark"] .ninja-burger span {
    background: #8CD8D4 !important;
}

/* ---------- Thanh menu cố định dưới (mobile) ---------- */
[data-theme="dark"] .ninja-bottom-nav {
    background: #122423 !important;
    border-top: 1px solid #234444 !important;
    box-shadow: 0 -6px 20px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .ninja-bnav-item {
    color: #6E9291 !important;
}
[data-theme="dark"] .ninja-bnav-item.active {
    color: #4FD3CC !important;
}
[data-theme="dark"] .ninja-bnav-item.active i {
    background: rgba(79,211,204,.16) !important;
}

/* ---------- Text tài khoản/coin trên topbar (inline style riêng) ---------- */
[data-theme="dark"] .user-balance {
    color: #8CD8D4 !important;
}

/* ---------- Nút chung (ninja-card, hero, outline) ---------- */
[data-theme="dark"] .ninja-card {
    background: #16302F !important;
    border: 1px solid #234444 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .ninja-hero {
    background: linear-gradient(180deg, #16302F, #0E1B1B) !important;
    border: 1px solid #234444 !important;
}
[data-theme="dark"] .btn-ninja-outline {
    background: #16302F !important;
    border: 1px solid #2E5B59 !important;
    color: #8CD8D4 !important;
}
[data-theme="dark"] .btn-ninja-outline:hover {
    background: #1D3E3C !important;
}
[data-theme="dark"] .ninja-hero-cta .btn-ninja-outline {
    background: #16302F !important;
    border: 2px solid #2E5B59 !important;
}
[data-theme="dark"] .ninja-section-title {
    color: #8CD8D4 !important;
}

/* ============================================================
   TRANG CHỦ (index.blade.php)
   ============================================================ */

/* ---------- Tin tức - sự kiện ---------- */
[data-theme="dark"] .ninja-news-title {
    color: #8CD8D4 !important;
}
[data-theme="dark"] .ninja-news-card {
    background: #16302F !important;
    border: 1px solid #234444 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .ninja-news-tabs {
    border-bottom: 1px solid #234444 !important;
}
[data-theme="dark"] .ninja-news-tab {
    color: #6E9291 !important;
}
[data-theme="dark"] .ninja-news-tab.active {
    background: #1D3E3C !important;
    color: #4FD3CC !important;
}
[data-theme="dark"] .ninja-news-row2 {
    border-bottom: 1px solid #234444 !important;
}
[data-theme="dark"] .ninja-news-row2.hot {
    background: #1A3332 !important;
}
[data-theme="dark"] .ninja-news-row2:hover {
    background: #1D3E3C !important;
}
[data-theme="dark"] .ninja-news-row2 i.pin {
    color: #4FD3CC !important;
}
[data-theme="dark"] .ninja-news-row2 .title {
    color: #E8F5F4 !important;
}
[data-theme="dark"] .ninja-news-row2.hot .title {
    color: #4FD3CC !important;
}
[data-theme="dark"] .ninja-news-row2 .date {
    color: #6E9291 !important;
}
[data-theme="dark"] .ninja-news-search {
    background: #16302F !important;
}
[data-theme="dark"] .ninja-news-search input {
    background: #0E1B1B !important;
    border: 1px solid #2E5B59 !important;
    color: #E8F5F4 !important;
}
[data-theme="dark"] .ninja-news-search input::placeholder {
    color: #6E9291 !important;
}

/* ---------- Tiêu điểm phái ---------- */
[data-theme="dark"] .ninja-phai-tab {
    background: #16302F !important;
    border: 1px solid #234444 !important;
    color: #8CD8D4 !important;
}
[data-theme="dark"] .ninja-phai-detail {
    background: #16302F !important;
    border: 1px solid #234444 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .ninja-phai-detail-img {
    background: linear-gradient(180deg, #1A3332, #0E1B1B) !important;
}
[data-theme="dark"] .ninja-phai-detail-label {
    color: #4FD3CC !important;
}
[data-theme="dark"] .ninja-phai-detail-name {
    color: #8CD8D4 !important;
}
[data-theme="dark"] .ninja-phai-difficulty {
    color: #6E9291 !important;
}
[data-theme="dark"] .ninja-phai-difficulty .stars {
    color: #2E5B59 !important;
}
[data-theme="dark"] .ninja-phai-difficulty .stars .filled {
    color: #4FD3CC !important;
}
[data-theme="dark"] .ninja-phai-detail-desc {
    color: #C9E4E2 !important;
}
[data-theme="dark"] .ninja-phai-nav button {
    background: #16302F !important;
    border: 1px solid #2E5B59 !important;
    color: #8CD8D4 !important;
}
[data-theme="dark"] .ninja-phai-counter {
    color: #6E9291 !important;
}

/* ---------- Bảng xếp hạng ---------- */
[data-theme="dark"] .bxh-wrap {
    background: linear-gradient(180deg, #16302F, #0E1B1B) !important;
    border: 1px solid #234444 !important;
}
[data-theme="dark"] .bxh-title {
    color: #8CD8D4 !important;
}
[data-theme="dark"] .bxh-tab-btn {
    background: #16302F !important;
    border-color: #2E5B59 !important;
    color: #8CD8D4 !important;
}
[data-theme="dark"] .bxh-tab-btn.active {
    background: #3F9998 !important;
    border-color: #4FD3CC !important;
    color: #FFFFFF !important;
}
[data-theme="dark"] .bxh-card {
    background: #16302F !important;
    border: 1px solid #234444 !important;
}
[data-theme="dark"] .bxh-table thead th {
    background: #1A3332 !important;
    color: #8CD8D4 !important;
}
[data-theme="dark"] .bxh-table tbody td {
    color: #DCEFEE !important;
    border-bottom: 1px solid #234444 !important;
}
[data-theme="dark"] .bxh-name:not(.top1):not(.top2):not(.top3) {
    color: #7EE0DB !important;
}
[data-theme="dark"] .bxh-td-phai {
    color: #6E9291 !important;
}
[data-theme="dark"] .bxh-badge {
    border: 1.5px solid #4FD3CC !important;
    color: #8CD8D4 !important;
    background: rgba(79,211,204,.10) !important;
}

/* ============================================================
   MODAL (đăng nhập / đăng ký / quên mật khẩu / kích hoạt)
   ============================================================ */
[data-theme="dark"] .modal-content {
    background: #16302F !important;
    color: #E8F5F4 !important;
}
[data-theme="dark"] .form-control-solid {
    background: #0E1B1B !important;
    border: 1px solid #2E5B59 !important;
    color: #E8F5F4 !important;
}
[data-theme="dark"] .form-control-solid::placeholder {
    color: #6E9291 !important;
}
[data-theme="dark"] h3, [data-theme="dark"] h4 {
    color: #E8F5F4;
}