/* ======================================================= */
/* FLAT-UI-OVERRIDES.CSS - LÀM PHẲNG TOÀN DIỆN MONEYHUB_X */
/* ======================================================= */

/* --- 1. MENU SIDEBAR FLAT STYLE --- */
.menu-list li a:hover,
.menu-list li a.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
    font-weight: 600 !important;
}

.menu-list li a:hover .menu-icon,
.menu-list li a.active .menu-icon {
    color: inherit !important;
}

html.dark-mode .menu-list li a:hover,
html.dark-mode .menu-list li a.active {
    background-color: var(--primary-color) !important;
    color: #000000 !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* --- 2. FLAT CARDS (Profile, Portfolio, Journal, Widgets, Posts) --- */
.profile-header,
.profile-intro-card,
.journal-card,
.widget-card,
.portfolio-card,
.summary-card,
.portfolio-stats-card,
.post-card,
.comment-card,
.db-card,
.industry-column.db-card,
.right-widget-card,
.announcement-card,
.tool-card-premium {
    background: var(--bg-card) !important;
    box-shadow: none !important;
    border: 1px solid var(--border-color-light) !important;
    border-radius: var(--card-radius) !important;
    transition: var(--transition-bounce) !important;
}

/* Hover phẳng nhẹ nhàng cho Cards */
.profile-intro-card:hover,
.journal-card:hover,
.widget-card:hover,
.portfolio-card:hover,
.summary-card:hover,
.portfolio-stats-card:hover,
.post-card:hover,
.db-card:hover,
.industry-column.db-card:hover,
.right-widget-card:hover,
.announcement-card:hover,
.tool-card-premium:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.08) !important;
}

html.dark-mode .profile-intro-card:hover,
html.dark-mode .journal-card:hover,
html.dark-mode .widget-card:hover,
html.dark-mode .portfolio-card:hover,
html.dark-mode .summary-card:hover,
html.dark-mode .portfolio-stats-card:hover,
html.dark-mode .post-card:hover,
html.dark-mode .db-card:hover,
html.dark-mode .right-widget-card:hover,
html.dark-mode .announcement-card:hover,
html.dark-mode .tool-card-premium:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

/* --- 3. FLAT DATA TABLES --- */
/* Khung bọc bảng tiêu chuẩn phẳng nổi bật */
.data-table-container,
.live-price-table-wrapper,
.mh-table-wrapper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color-light) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* Định dạng Thead */
.mh-table thead tr,
.table-clean thead tr,
.table-custom thead tr,
.db-mini-table thead tr,
.table-schedule thead tr,
.backup-table thead tr,
.cron-table thead tr,
.compare-table thead tr,
.table-repayment thead tr,
#portfolio-table thead tr,
#logs-table thead tr {
    background-color: var(--bg-header) !important;
    border-bottom: 2px solid var(--border-color-light) !important;
}

/* Màu chữ th và td */
.mh-table th,
.table-clean th,
.table-custom th,
.db-mini-table th,
.table-schedule th,
.backup-table th,
.cron-table th,
.compare-table th,
.table-repayment th,
#portfolio-table th,
#logs-table th {
    color: var(--text-color-dark) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-bottom: 2px solid var(--border-color-light) !important;
}

/* Định dạng Tbody và Tr */
.mh-table tbody tr,
.table-clean tbody tr,
.table-custom tbody tr,
.db-mini-table tbody tr,
.table-schedule tbody tr,
.backup-table tbody tr,
.cron-table tbody tr,
.compare-table tbody tr,
.table-repayment tbody tr,
#portfolio-table tbody tr,
#logs-table tbody tr {
    background-color: var(--bg-card) !important;
    transition: background-color 0.15s ease;
}

/* Dòng chẵn xen kẽ */
.mh-table tbody tr:nth-child(even),
.table-clean tbody tr:nth-child(even),
.table-custom tbody tr:nth-child(even),
.db-mini-table tbody tr:nth-child(even),
.table-schedule tbody tr:nth-child(even),
.backup-table tbody tr:nth-child(even),
.cron-table tbody tr:nth-child(even),
.compare-table tbody tr:nth-child(even),
.table-repayment tbody tr:nth-child(even),
#portfolio-table tbody tr:nth-child(even),
#logs-table tbody tr:nth-child(even) {
    background-color: var(--table-stripe-even) !important;
}

/* Viền dưới các ô td */
.mh-table td,
.table-clean td,
.table-custom td,
.db-mini-table td,
.table-schedule td,
.backup-table td,
.cron-table td,
.compare-table td,
.table-repayment td,
#portfolio-table td,
#logs-table td {
    border-bottom: 1px solid var(--border-color-light) !important;
    background-color: transparent !important; /* Để tr quyết định background màu nền */
}

/* Hover hàng nổi bật chuẩn chứng khoán */
.mh-table tbody tr:hover,
.table-clean tbody tr:hover,
.table-custom tbody tr:hover,
.db-mini-table tbody tr:hover,
.table-schedule tbody tr:hover,
.backup-table tbody tr:hover,
.cron-table tbody tr:hover,
.compare-table tbody tr:hover,
.table-repayment tbody tr:hover,
#portfolio-table tbody tr:hover,
#logs-table tbody tr:hover {
    background-color: rgba(25, 135, 84, 0.06) !important; /* Màu xanh lá nhạt thương hiệu khi hover */
}

html.dark-mode .mh-table tbody tr:hover,
html.dark-mode .table-clean tbody tr:hover,
html.dark-mode .table-custom tbody tr:hover,
html.dark-mode .db-mini-table tbody tr:hover,
html.dark-mode .table-schedule tbody tr:hover,
html.dark-mode .backup-table tbody tr:hover,
html.dark-mode .cron-table tbody tr:hover,
html.dark-mode .compare-table tbody tr:hover,
html.dark-mode .table-repayment tbody tr:hover,
html.dark-mode #portfolio-table tbody tr:hover,
html.dark-mode #logs-table tbody tr:hover {
    background-color: rgba(117, 183, 152, 0.1) !important; /* Xanh lá sáng hơn cho Dark Mode */
}

/* --- 4. FLAT BỘ LỌC & INPUTS --- */
.filter-bar-container,
.filter-buttons {
    background: var(--bg-header) !important;
    border: 1px solid var(--border-color-light) !important;
    box-shadow: none !important;
    border-radius: var(--card-radius) !important;
}

.filter-btn {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.filter-btn.active {
    background: var(--primary-color) !important;
    color: var(--text-color-inverted) !important;
    box-shadow: var(--shadow-light) !important;
}

.search-box-wrapper input,
#searchStock {
    background: var(--bg-input) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: var(--input-radius) !important;
}

.search-box-wrapper input:focus,
#searchStock:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15) !important;
}

/* Loại bỏ tất cả bóng đổ thụt lõm của các thẻ nhập liệu khác */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    box-shadow: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--input-radius) !important;
    transition: var(--transition-smooth) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15) !important;
    outline: none !important;
}

/* --- 5. FLAT GLOBAL FILTERS & BUTTONS (NO BORDERS & NO SHADOWS STATIC) --- */
.quick-filter-btn,
#reset-filters-btn,
.action-btn-standalone {
    box-shadow: none !important;
    border: 1px solid transparent !important;
}

.quick-filter-btn:hover,
#reset-filters-btn:hover,
.action-btn-standalone:hover {
    box-shadow: none !important;
    border-color: var(--primary-color) !important;
}

.quick-filter-btn.active {
    box-shadow: none !important;
}

/* --- 6. FLAT GLOBAL PAGINATION --- */
.pagination-controls {
    display: flex !important;
    margin-top: 20px !important;
    padding: 10px 5px !important;
    border-top: none !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 25px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pagination-nav button {
    background: var(--bg-card) !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--btn-radius) !important;
    padding: 0 18px !important;
    height: var(--btn-height);
    color: var(--text-color-normal) !important;
    font-weight: 600 !important;
    transition: var(--transition-smooth) !important;
}

.pagination-nav button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.pagination-nav button:disabled {
    box-shadow: none !important;
    background-color: var(--bg-body) !important;
    border-color: var(--border-color-light) !important;
    opacity: 0.5;
    cursor: not-allowed;
}

#rowsPerPage.flat-select {
    box-shadow: none !important;
    border-radius: var(--input-radius) !important;
    background-color: var(--bg-input) !important;
    border: 1px solid transparent !important;
}

html.dark-mode #rowsPerPage {
    background-color: var(--bg-input) !important;
    color: var(--text-color-dark) !important;
    border: 1px solid transparent !important;
}

/* --- 7. FLAT VIEW SWITCHER --- */
.view-switcher {
    display: inline-flex;
    background: var(--bg-header);
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: var(--card-radius) !important;
    padding: 3px;
    align-items: center;
    margin-left: 5px;
    height: var(--btn-height);
}

.view-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 8px;
    height: calc(var(--btn-height) - 6px);
    width: var(--btn-height);
    padding: 0;
    cursor: pointer;
    color: var(--text-color-icon);
    transition: var(--transition-smooth) !important;
    box-shadow: none !important;
}

.view-btn.active {
    background: var(--bg-card) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

/* --- 8. FIX DOUBLE BORDER FOR WRAPPED INPUTS --- */
.input-with-icon input:focus,
.input-with-icon input[type="text"]:focus,
.input-with-icon input[type="email"]:focus,
.input-with-icon input[type="password"]:focus,
.navbar-search-pill input:focus,
.navbar-search-pill input[type="text"]:focus,
.ai-input-wrapper input:focus,
.ai-input-wrapper input[type="text"]:focus,
.search-box-wrapper input:focus,
.search-box-wrapper input[type="text"]:focus,
.ticker-search-wrapper input:focus,
.ticker-search-wrapper input[type="text"]:focus,
.input-wrapper input:focus,
.input-wrapper input[type="text"]:focus,
.input-wrapper textarea:focus,
#chatInput:focus {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* --- 9. FORCE COMMENT SECTION BG TO MATCH CARD BG --- */
.comments-section {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-color-light) !important;
}

/* --- 10. FLAT GLOBAL MODALS & POPUPS --- */
.modal-content,
.modal-content-custom,
.modal-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color-light) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 24px !important;
}

html.dark-mode .modal-content,
html.dark-mode .modal-content-custom,
html.dark-mode .modal-box {
    background-color: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Các trường input, select, textarea bên trong modal phải phẳng và đồng bộ */
.modal-content input,
.modal-content select,
.modal-content textarea,
.modal-content-custom input,
.modal-content-custom select,
.modal-content-custom textarea {
    background-color: #f1f3f5 !important;
    border: 1px solid #dcdfe3 !important;
    border-radius: var(--input-radius) !important;
    color: var(--text-color-dark) !important;
    box-shadow: none !important;
}

html.dark-mode .modal-content input,
html.dark-mode .modal-content select,
html.dark-mode .modal-content textarea,
html.dark-mode .modal-content-custom input,
html.dark-mode .modal-content-custom select,
html.dark-mode .modal-content-custom textarea {
    background-color: #0d1117 !important; /* Màu nền tối hơn nền popup (#161b22) để tạo tương phản */
    border: 1px solid #30363d !important;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus,
.modal-content-custom input:focus,
.modal-content-custom select:focus,
.modal-content-custom textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
}

/* Các nút bấm bên trong modal */
.modal-content button[type="submit"],
.modal-content-custom button[type="submit"],
.modal-content .btn-submit,
.modal-content-custom .btn-submit,
.modal-footer button,
.modal-footer .btn {
    background-color: var(--primary-color) !important;
    color: var(--text-color-inverted, #ffffff) !important;
    border: none !important;
    border-radius: var(--input-radius) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: var(--transition-smooth) !important;
}

html.dark-mode .modal-content button[type="submit"],
html.dark-mode .modal-content-custom button[type="submit"],
html.dark-mode .modal-content .btn-submit,
html.dark-mode .modal-content-custom .btn-submit,
html.dark-mode .modal-footer button,
html.dark-mode .modal-footer .btn {
    color: #000000 !important;
    background-color: var(--primary-color) !important;
}

.modal-content button[type="submit"]:hover,
.modal-content-custom button[type="submit"]:hover,
.modal-content .btn-submit:hover,
.modal-content-custom .btn-submit:hover,
.modal-footer button:hover,
.modal-footer .btn:hover {
    background-color: var(--primary-color-hover) !important;
    transform: translateY(-1px) !important;
}

/* --- 11. FLAT PREMIUM MODALS OVERRIDE --- */
.modal-content-premium {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color-light) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

html.dark-mode .modal-content-premium {
    background-color: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
}

.input-premium {
    background-color: #f1f3f5 !important;
    border: 1px solid #dcdfe3 !important;
    border-radius: var(--input-radius) !important;
    color: var(--text-color-dark) !important;
    box-shadow: none !important;
}

html.dark-mode .input-premium {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
}

.input-premium:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
    outline: none !important;
}

.btn-premium-save {
    background-color: var(--primary-color) !important;
    color: var(--text-color-inverted, #ffffff) !important;
    border: none !important;
    border-radius: var(--input-radius) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    height: 42px !important;
    padding: 0 30px !important;
    cursor: pointer !important;
    transition: var(--transition-smooth) !important;
}

html.dark-mode .btn-premium-save {
    color: #000000 !important;
    background-color: var(--primary-color) !important;
}

.btn-premium-save:hover {
    background-color: var(--primary-color-hover) !important;
    transform: translateY(-1px) !important;
}

.btn-premium-cancel {
    background-color: var(--bg-hover) !important;
    color: var(--text-color-normal) !important;
    border: 1px solid var(--border-color-light) !important;
    border-radius: var(--input-radius) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    height: 42px !important;
    padding: 0 30px !important;
    cursor: pointer !important;
    transition: var(--transition-smooth) !important;
}

.btn-premium-cancel:hover {
    background-color: var(--border-color-light) !important;
    transform: translateY(-1px) !important;
}

/* --- 12. GLOBAL INPUT FOCUS STATE --- */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
    outline: none !important;
}

/* --- 13. GLOBAL PAGE TITLE DARK MODE COLOR SYNC --- */
html.dark-mode .page-title {
    color: #ffffff !important;
}