/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — palette đồng bộ với DevExtreme dx.dark
     #2a2a2a  body bg          (DX base)
     #343434  panel/modal bg   (DX secondary)
     #3e3e3e  highlighted bg
     #4d4d4d  border / hover
     #dedede  text primary     (DX text)
     #bbbbbb  text secondary
     #888888  text muted
   Scope dưới html[data-pl-theme="dark"].
   DevExtreme dark theme load qua file riêng (dx.dark.compact.css).
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-pl-theme="dark"] {
    color-scheme: dark;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
html[data-pl-theme="dark"] body {
    background-color: #2a2a2a !important;
    color: #dedede !important;
}

html[data-pl-theme="dark"] a { color: #4ca1d6; }
html[data-pl-theme="dark"] a:hover { color: #7bbde4; }

html[data-pl-theme="dark"] hr { border-color: #4d4d4d; }
html[data-pl-theme="dark"] .text-muted { color: #888888 !important; }
html[data-pl-theme="dark"] .text-dark { color: #dedede !important; }
html[data-pl-theme="dark"] .text-secondary { color: #bbbbbb !important; }
html[data-pl-theme="dark"] .text-black { color: #f0f0f0 !important; }
html[data-pl-theme="dark"] .bg-white { background-color: #343434 !important; }
html[data-pl-theme="dark"] .bg-light { background-color: #343434 !important; }
html[data-pl-theme="dark"] .border, html[data-pl-theme="dark"] .border-top,
html[data-pl-theme="dark"] .border-bottom, html[data-pl-theme="dark"] .border-start,
html[data-pl-theme="dark"] .border-end { border-color: #4d4d4d !important; }

/* ─── Navbar ────────────────────────────────────────────────────────────── */
html[data-pl-theme="dark"] .pl-navbar {
    background: #343434 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
html[data-pl-theme="dark"] .pl-navbar .navbar-brand,
html[data-pl-theme="dark"] .pl-navbar .navbar-brand:hover {
    color: #4ca1d6 !important;
}
html[data-pl-theme="dark"] .pl-navbar .nav-link {
    color: #bbbbbb !important;
}
html[data-pl-theme="dark"] .pl-navbar .nav-link:hover {
    background: #4d4d4d !important;
    color: #f0f0f0 !important;
}
html[data-pl-theme="dark"] .pl-navbar .nav-link.active {
    background: #1ca8dd !important;
    color: white !important;
}
html[data-pl-theme="dark"] .pl-navbar .dropdown-menu {
    background: #343434 !important;
    border-color: #4d4d4d;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}
html[data-pl-theme="dark"] .pl-navbar .dropdown-item {
    color: #bbbbbb;
}
html[data-pl-theme="dark"] .pl-navbar .dropdown-item:hover {
    background: #4d4d4d !important;
    color: #4ca1d6 !important;
}
html[data-pl-theme="dark"] .pl-navbar .dropdown-item.active {
    background: #1ca8dd !important;
    color: white !important;
}
html[data-pl-theme="dark"] .pl-navbar .navbar-toggler {
    border-color: #4d4d4d;
    background: #3e3e3e;
}
html[data-pl-theme="dark"] .pl-navbar .navbar-toggler-icon {
    filter: invert(0.85);
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
html[data-pl-theme="dark"] .pl-footer {
    background: #343434 !important;
    border-top-color: #4d4d4d !important;
    color: #888888;
}
html[data-pl-theme="dark"] .pl-footer a { color: #888888; }
html[data-pl-theme="dark"] .pl-footer a:hover { color: #4ca1d6; }

/* ─── Modal (Bootstrap) ─────────────────────────────────────────────────── */
html[data-pl-theme="dark"] .modal-content {
    background-color: #343434 !important;
    color: #dedede;
    border-color: #4d4d4d;
}
html[data-pl-theme="dark"] .modal-header {
    border-bottom-color: #4d4d4d;
}
html[data-pl-theme="dark"] .modal-header.bg-primary {
    background-color: #1ca8dd !important;
}
html[data-pl-theme="dark"] .modal-footer {
    border-top-color: #4d4d4d;
}
html[data-pl-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ─── Card / Panel ──────────────────────────────────────────────────────── */
html[data-pl-theme="dark"] .card {
    background-color: #343434 !important;
    border-color: #4d4d4d;
    color: #dedede;
}
html[data-pl-theme="dark"] .card-header {
    background-color: #3e3e3e !important;
    border-bottom-color: #4d4d4d;
    color: #dedede;
}
html[data-pl-theme="dark"] .card-footer {
    background-color: #3e3e3e !important;
    border-top-color: #4d4d4d;
}

/* ─── Form controls ─────────────────────────────────────────────────────── */
html[data-pl-theme="dark"] .form-control,
html[data-pl-theme="dark"] .form-select,
html[data-pl-theme="dark"] textarea {
    background-color: #2a2a2a !important;
    color: #dedede !important;
    border-color: #4d4d4d !important;
}
html[data-pl-theme="dark"] .form-control:focus,
html[data-pl-theme="dark"] .form-select:focus {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #1ca8dd !important;
    box-shadow: 0 0 0 0.2rem rgba(28,168,221,0.25);
}
html[data-pl-theme="dark"] .form-control::placeholder { color: #777777; }
html[data-pl-theme="dark"] .form-label,
html[data-pl-theme="dark"] .control-label { color: #bbbbbb; }
html[data-pl-theme="dark"] .input-group-text {
    background-color: #343434;
    color: #bbbbbb;
    border-color: #4d4d4d;
}

/* ─── Tables ────────────────────────────────────────────────────────────── */
html[data-pl-theme="dark"] table,
html[data-pl-theme="dark"] .table {
    color: #dedede;
    border-color: #4d4d4d;
}
html[data-pl-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: #4d4d4d;
    color: #dedede;
}
html[data-pl-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.04) !important;
}
html[data-pl-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(28,168,221,0.12) !important;
}
html[data-pl-theme="dark"] thead th { background-color: #3e3e3e !important; color: #bbbbbb !important; }

/* ─── Buttons (giữ accent, chỉnh disabled/secondary) ────────────────────── */
html[data-pl-theme="dark"] .btn-light {
    background-color: #4d4d4d;
    border-color: #5d5d5d;
    color: #dedede;
}
html[data-pl-theme="dark"] .btn-light:hover {
    background-color: #5d5d5d;
    color: #f0f0f0;
}
html[data-pl-theme="dark"] .btn-outline-secondary {
    color: #bbbbbb;
    border-color: #5d5d5d;
}
html[data-pl-theme="dark"] .btn-outline-secondary:hover {
    background-color: #4d4d4d;
    color: white;
}

/* ─── List / Alert / Badge ──────────────────────────────────────────────── */
html[data-pl-theme="dark"] .list-group-item {
    background-color: #343434;
    border-color: #4d4d4d;
    color: #dedede;
}
html[data-pl-theme="dark"] .alert-info {
    background-color: #1d4659;
    border-color: #1ca8dd;
    color: #7bbde4;
}
html[data-pl-theme="dark"] .alert-warning {
    background-color: #4a3a0e;
    border-color: #d9a417;
    color: #f0c75e;
}
html[data-pl-theme="dark"] .alert-danger {
    background-color: #4d1f1d;
    border-color: #d9534f;
    color: #f5a3a0;
}

/* ─── File attachment box ───────────────────────────────────────────────── */
html[data-pl-theme="dark"] .file-attachment {
    background: #343434 !important;
    border-color: #4d4d4d !important;
}
html[data-pl-theme="dark"] .file-attachment .file-item {
    background: #2a2a2a !important;
    border-color: #4d4d4d !important;
}
html[data-pl-theme="dark"] .file-attachment label { color: #bbbbbb !important; }

/* ─── jQuery Confirm popups ─────────────────────────────────────────────── */
html[data-pl-theme="dark"] .jconfirm-box {
    background: #343434 !important;
    color: #dedede;
}
html[data-pl-theme="dark"] .jconfirm-title { color: #f0f0f0 !important; }
html[data-pl-theme="dark"] .jconfirm-content { color: #bbbbbb !important; }

/* ─── DX khung tùy biến (inline border xanh #0d6efd) ────────────────────── */
html[data-pl-theme="dark"] #dataGirdApDung { border-color: #1ca8dd !important; }

/* ─── Trang /Manage — Profile ───────────────────────────────────────────── */
html[data-pl-theme="dark"] .profile-card {
    background: #343434 !important;
    border-color: #4d4d4d !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
}
html[data-pl-theme="dark"] .avatar-btn-cam {
    background: #3e3e3e !important;
    border-color: #4d4d4d !important;
    color: #bbbbbb !important;
}
html[data-pl-theme="dark"] .avatar-btn-cam:hover {
    background: #4d4d4d !important;
}
html[data-pl-theme="dark"] .section {
    border-top-color: #4d4d4d !important;
}
html[data-pl-theme="dark"] .split-grid > .section + .section {
    border-left-color: #4d4d4d !important;
}
html[data-pl-theme="dark"] .section-title {
    color: #888888 !important;
}
html[data-pl-theme="dark"] .section-title i {
    color: #4ca1d6 !important;
}
html[data-pl-theme="dark"] .field-row {
    border-bottom-color: #3e3e3e !important;
}
html[data-pl-theme="dark"] .field-lbl {
    color: #888888 !important;
}
html[data-pl-theme="dark"] .field-val {
    color: #dedede !important;
}
html[data-pl-theme="dark"] .field-val.empty {
    color: #666666 !important;
}
html[data-pl-theme="dark"] .read-only-tag {
    color: #666666 !important;
}
html[data-pl-theme="dark"] .no-link-banner {
    background: #4a3a0e !important;
    border-color: #d9a417 !important;
    color: #f0c75e !important;
}

/* ─── Toggle button trên navbar ─────────────────────────────────────────── */
.pl-theme-toggle {
    border: none;
    background: transparent;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pl-theme-toggle:hover { background: #f0f2f5; color: #0d6efd; }
html[data-pl-theme="dark"] .pl-theme-toggle { color: #f0c75e; }
html[data-pl-theme="dark"] .pl-theme-toggle:hover { background: #4d4d4d; color: #f5d97f; }

/* Icon: hiện sun khi light, moon khi dark */
.pl-theme-toggle .icon-sun { display: none; }
.pl-theme-toggle .icon-moon { display: inline; }
html[data-pl-theme="dark"] .pl-theme-toggle .icon-sun { display: inline; }
html[data-pl-theme="dark"] .pl-theme-toggle .icon-moon { display: none; }