/* File: darkmode.css
 * Mô tả: Ghi đè toàn bộ giao diện sang chế độ tối (Dark Mode) cho website PHP
 */

html.dark-mode,
body.dark-mode {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Base text override in Dark Mode */
body.dark-mode .text-dark,
body.dark-mode .text-gray-900,
body.dark-mode .text-secondary-emphasis,
body.dark-mode .text-primary-emphasis {
    color: #f8fafc !important;
}

body.dark-mode .text-muted,
body.dark-mode .text-gray-500 {
    color: #94a3b8 !important;
}

/* Header & Navigation */
body.dark-mode header.sticky-header {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .brand-title {
    color: #ffffff !important;
}

body.dark-mode .brand-subtitle {
    color: #94a3b8 !important;
}

body.dark-mode .nav-link-tab {
    color: #cbd5e1 !important;
}

body.dark-mode .nav-link-tab:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode .nav-link-tab.active-tab {
    background-color: var(--theme-color) !important;
    color: #ffffff !important;
}

/* Cards & Containers */
body.dark-mode .card,
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .dropdown-menu {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

body.dark-mode .dropdown-item {
    color: #cbd5e1 !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Inputs & Form Controls */
body.dark-mode input.form-control,
body.dark-mode select.form-select,
body.dark-mode textarea.form-control {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}

body.dark-mode input.form-control::placeholder,
body.dark-mode textarea.form-control::placeholder {
    color: #64748b !important;
}

body.dark-mode input.form-control:focus,
body.dark-mode select.form-select:focus,
body.dark-mode textarea.form-control:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.25) !important;
    background-color: #0f172a !important;
}

/* Tree Horizontal (Ngang) */
body.dark-mode .tree li::before,
body.dark-mode .tree li::after,
body.dark-mode .tree ul::before {
    border-color: #475569 !important;
}

body.dark-mode .spouse-connector-line {
    border-top: 2px solid #475569 !important;
}

body.dark-mode .member-node-card {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .member-node-card.node-male {
    background-color: #0f1e36 !important;
    border: 1.5px solid #2563eb !important;
}

body.dark-mode .member-node-card.node-female {
    background-color: #310a18 !important;
    border: 1.5px solid #db2777 !important;
}

body.dark-mode .member-node-card .node-name {
    color: #ffffff !important;
}

body.dark-mode .member-node-card .node-life {
    color: #94a3b8 !important;
}

body.dark-mode .node-avatar-placeholder {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Tree Vertical (Dọc) */
body.dark-mode .vtree-cards-container {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .vtree-cards-container.vtree-card-male {
    border-left: 4px solid #3b82f6 !important;
    background: linear-gradient(to right, #1e293b, #172554) !important;
}

body.dark-mode .vtree-cards-container.vtree-card-female {
    border-left: 4px solid #ec4899 !important;
    background: linear-gradient(to right, #1e293b, #4c0519) !important;
}

body.dark-mode .vtree-primary-member .fw-bold {
    color: #ffffff !important;
}

body.dark-mode .vtree-spouse-col {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .vtree-spouse-col .text-secondary {
    color: #cbd5e1 !important;
}

body.dark-mode .vtree-children-branch {
    border-left: 2px dashed #475569 !important;
}

/* Detail view & List Stats */
body.dark-mode .table {
    --bs-table-color: #f1f5f9 !important;
    --bs-table-bg: #1e293b !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .table th {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

body.dark-mode .progress {
    background-color: #334155 !important;
}

/* Statistics Age Boxes */
body.dark-mode .col-6 .p-3.rounded-3.border.bg-light {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .col-6 .p-3.rounded-3.border.bg-light .text-dark {
    color: #f1f5f9 !important;
}

/* Timelines & Milestone details */
body.dark-mode .timeline-container {
    border-left-color: #334155 !important;
}

body.dark-mode .timeline-dot {
    border-color: #1e293b !important;
}

body.dark-mode .altar-img-card {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .border-light-subtle {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .list-group-item {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

/* Anniversary Notification */
body.dark-mode .alert-danger-subtle {
    background-color: #450a0a !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

body.dark-mode .alert-danger-subtle .text-danger-emphasis {
    color: #fecaca !important;
}

body.dark-mode .alert-danger-subtle .bg-white {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .alert-danger-subtle .bg-white .text-dark {
    color: #ffffff !important;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Search bar header */
body.dark-mode .bg-light-subtle {
    background-color: #1e293b !important;
}

/* Admin elements */
body.dark-mode .bg-dark-subtle {
    background-color: #0f172a !important;
}

/* Map placeholder inside Member profile */
body.dark-mode .map-embed-placeholder {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Offcanvas custom class */
body.dark-mode .offcanvas {
    background-color: #0f172a !important;
}

/* Footer section */
body.dark-mode footer {
    background-color: #020617 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Scrollbar styling in Dark Mode */
body.dark-mode ::-webkit-scrollbar-track {
    background: #0f172a;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}