/* =====================================================
   Cơm Tấm OJ - NexaVerse Color System
   Palette:
     #004E64 - Dark Teal (Navbar, Table Headers, Active Sidebar)
     #00A5CF - Turquoise Surf (Primary Buttons, Active Accents, Links)
     #9FFFCB - Aquamarine (Navbar Hover Glow, Badges, Highlights)
     #25A18E - Verdigris (Secondary Buttons, Verdicts)
     #7AE582 - Light Green (AC Badges, Success indicators)
     #F4F7F9 - Soft Clean Background
     #FFFFFF - Pure Crisp White
     #1E293B - Deep Charcoal Text
   ===================================================== */

/* ===== 1. GLOBAL BASE & PAGE BACKGROUND ===== */
body {
    background-color: #F4F7F9 !important;
    color: #1E293B !important;
}

/* Links */
a {
    color: #00A5CF !important;
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: #004E64 !important;
    text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .title {
    color: #004E64 !important;
    font-weight: 700;
}

/* ===== 2. TOP NAVBAR (DARK TEAL with PURE WHITE ICONS & TEXT) ===== */
#navigation,
#nav-container {
    background: #004E64 !important;
    background-color: #004E64 !important;
    box-shadow: 0 2px 10px rgba(0, 78, 100, 0.25) !important;
}
#nav-shadow {
    background: linear-gradient(rgba(0, 78, 100, 0.35), transparent) !important;
}

/* All icons & text on Navbar MUST be 100% Crisp Pure White */
nav ul li a,
nav ul li a:link,
nav ul li button,
nav ul li i,
.nav-icon-link,
.nav-icon-link i,
.nav-icon-container,
.nav-icon-container i,
#navicon,
#navicon i,
#user-links a,
#user-links a i,
.nav-fa-icon-active i,
#chat-icon,
#chat-icon i {
    color: #FFFFFF !important;
    opacity: 1 !important;
    fill: #FFFFFF !important;
}

/* Navbar Hover */
nav ul li a:hover,
nav ul li button:hover,
.nav-icon-link:hover,
.nav-icon-link:hover i,
.nav-icon-link:hover .nav-icon-container,
#user-links a:hover,
#chat-icon:hover {
    color: #9FFFCB !important;
    fill: #9FFFCB !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px;
}

/* Navbar Active item */
nav ul li a.active,
nav ul li button.active,
.nav-icon-link.active,
.nav-icon-link.active .nav-icon-container {
    background: #00A5CF !important;
    color: #FFFFFF !important;
    border-bottom: 3px solid #9FFFCB !important;
    border-radius: 6px 6px 0 0;
}
.nav-icon-link.active i,
.nav-icon-link.active .nav-icon-container i {
    color: #FFFFFF !important;
}

/* Navbar Dropdown */
nav ul ul,
#nav-list li .nav-dropdown {
    background: #004E64 !important;
    border: 1px solid #00A5CF !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
nav ul ul li a,
#nav-list li .nav-dropdown .nav-dropdown-item {
    color: #FFFFFF !important;
}
nav ul ul li:hover,
#nav-list li .nav-dropdown .nav-dropdown-item:hover {
    background: #00A5CF !important;
    color: #FFFFFF !important;
}

/* ===== 3. LEFT SIDEBAR (HIGH CONTRAST & CLEAR READABILITY) ===== */
.left-sidebar {
    background: transparent !important;
}

/* Inactive Sidebar item */
.left-sidebar-item {
    display: flex !important;
    align-items: center !important;
    color: #1E293B !important;
    background-color: transparent !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    margin-bottom: 4px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
.left-sidebar-item .sidebar-icon,
.left-sidebar-item i {
    color: #00A5CF !important;
    font-size: 1.1em !important;
    margin-right: 8px !important;
}
.left-sidebar-item .sidebar-text,
.left-sidebar-item span {
    color: #1E293B !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
}

/* Inactive Hover */
.left-sidebar-item:hover {
    background-color: #E2F4F7 !important;
    color: #004E64 !important;
}
.left-sidebar-item:hover .sidebar-icon,
.left-sidebar-item:hover i {
    color: #004E64 !important;
}
.left-sidebar-item:hover .sidebar-text,
.left-sidebar-item:hover span {
    color: #004E64 !important;
}

/* ACTIVE Sidebar Tab: SOLID DARK TEAL background + PURE CRISP WHITE TEXT */
.left-sidebar-item.active,
.left-sidebar-item.active:hover,
.tab-bar .selected,
.tab-bar li.active,
.site-tab-list .active {
    background: #004E64 !important;
    background-color: #004E64 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    box-shadow: 0 3px 10px rgba(0, 78, 100, 0.25) !important;
}
.left-sidebar-item.active * {
    color: #FFFFFF !important;
}
.left-sidebar-item.active .sidebar-icon,
.left-sidebar-item.active .sidebar-icon i,
.left-sidebar-item.active i {
    color: #9FFFCB !important; /* Glowing Aquamarine icon on Dark Teal */
}
.left-sidebar-item.active .sidebar-text,
.left-sidebar-item.active span {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* ===== 4. ACTION BUTTONS (TURQUOISE SURF & VERDIGRIS) ===== */
/* Primary Button ("Lọc", "Nộp bài", "Lưu", "Đăng nhập") */
.btn-primary,
input[type=submit],
button[type=submit],
.action-btn,
.btn-filter,
.filter-btn,
.action-btn.background-theme,
.submit-button,
#filter-form input[type=submit],
#filter-form button[type=submit] {
    background: #00A5CF !important;
    background-color: #00A5CF !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    box-shadow: 0 3px 10px rgba(0, 165, 207, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.btn-primary:hover,
input[type=submit]:hover,
button[type=submit]:hover,
.action-btn:hover,
.btn-filter:hover,
.filter-btn:hover {
    background: #004E64 !important;
    background-color: #004E64 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(0, 78, 100, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Secondary Button ("Ngẫu nhiên", "Hủy") */
.btn-secondary,
.btn-random {
    background: #25A18E !important;
    background-color: #25A18E !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    box-shadow: 0 3px 8px rgba(37, 161, 142, 0.25) !important;
    transition: all 0.2s ease !important;
}
.btn-secondary:hover,
.btn-random:hover {
    background: #004E64 !important;
    background-color: #004E64 !important;
    color: #FFFFFF !important;
}

/* Outlined Buttons */
.action-btn.outlined,
.btn-outline {
    background: #FFFFFF !important;
    color: #00A5CF !important;
    border: 2px solid #00A5CF !important;
    font-weight: 600 !important;
}
.action-btn.outlined:hover,
.btn-outline:hover {
    background: #00A5CF !important;
    color: #FFFFFF !important;
}

/* ===== 5. TABLES (DARK TEAL HEADERS + WHITE TEXT) ===== */
.table th,
.table thead th,
.table-responsive-wrapper thead tr,
.problem-list thead th {
    background: #004E64 !important;
    background-color: #004E64 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-color: #006680 !important;
}
.table th a,
.table th a:link,
.table thead th a {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
.table th a:hover,
.table thead th a:hover {
    color: #9FFFCB !important;
    text-decoration: underline !important;
}
.table td {
    border-color: #E2E8F0 !important;
}
.table.striped tr:nth-child(even) {
    background: #F8FBFC !important;
}
.table tbody tr:hover {
    background: #EAF4F7 !important;
}

/* ===== 6. CARDS, SIDE-BOXES & SEARCH WIDGETS ===== */
.widget-box,
.side-box,
.right-sidebar {
    background: #FFFFFF !important;
    border: 1px solid #D6E7EB !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 78, 100, 0.05) !important;
}
.side-box-header,
.widget-box-header {
    color: #004E64 !important;
    font-weight: 700 !important;
}
.side-box-header i,
.widget-box-header i {
    color: #00A5CF !important;
}

/* Inputs & Form controls */
input[type=text],
input[type=search],
input[type=password],
input[type=email],
select,
textarea {
    border: 1px solid #C4DFE6 !important;
    border-radius: 6px !important;
    color: #1E293B !important;
}
input[type=text]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
    border-color: #00A5CF !important;
    box-shadow: 0 0 0 3px rgba(0, 165, 207, 0.2) !important;
    outline: none !important;
}

/* ===== 7. PAGINATION ===== */
.pagination li a,
.pagination li span {
    color: #00A5CF !important;
    border-color: #D6E7EB !important;
    background: #FFFFFF !important;
}
.pagination li.active a,
.pagination li.active span {
    background: #004E64 !important;
    border-color: #004E64 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}
.pagination li a:hover {
    background: #E2F4F7 !important;
    color: #004E64 !important;
}

/* ===== 8. FOOTER ===== */
#footer {
    background: #004E64 !important;
    color: #B2EBF2 !important;
}
#footer a {
    color: #9FFFCB !important;
}
#footer a:hover {
    color: #FFFFFF !important;
}

/* ===== 9. STATUS VERDICTS ===== */
.result-ac,
.verdict-pass {
    color: #25A18E !important;
    font-weight: bold !important;
}


/* ===== 2b. RIGHT NAVBAR ELEMENTS (LANGUAGE, AUTH, ICONS) ===== */
#nav-lang-icon,
#nav-lang-icon *,
#nav-lang-icon .nav-right-text,
#nav-darkmode-icon,
#nav-darkmode-icon i,
.anon,
.anon a,
.anon a h4,
.anon a .nav-right-text,
.anon a span {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

#nav-lang-icon:hover,
#nav-lang-icon:hover *,
#nav-darkmode-icon:hover,
.anon a:hover,
.anon a:hover h4 {
    color: #9FFFCB !important;
    fill: #9FFFCB !important;
}