/* ============================================================
   OOUTH BID PORTAL — GOLD & NAVY THEME OVERRIDE
   Inject after all other CSS in head-css.php
   ============================================================ */

:root {
    --gold:        #b8960a;
    --gold-light:  #d4a90f;
    --gold-pale:   rgba(184,150,10,0.1);
    --gold-border: rgba(184,150,10,0.25);
    --navy:        #0f172a;
    --navy-mid:    #1e293b;
    --navy-light:  #334155;
    --cream:       #f5f0e8;
    --cream-dark:  #e8e0d0;
    --text-muted:  #94a3b8;
}

/* ── Body & wrapper ── */
body {
    background-color: var(--cream) !important;
    font-family: 'Inter', sans-serif !important;
}

.wrapper { background-color: var(--cream) !important; }

.page-content { background-color: var(--cream) !important; }

main { background-color: var(--cream) !important; }

/* ── Sidebar / App menu ── */
.app-menu,
[class*="sidenav"],
.left-sidebar,
#sidebar,
.sidebar {
    background-color: var(--navy) !important;
    border-right: 1px solid rgba(184,150,10,0.12) !important;
}

/* Menu title (MENU label) */
.menu-title {
    color: var(--gold) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Menu links */
.menu-link {
    color: #94a3b8 !important;
    border-radius: 8px !important;
    transition: background 0.15s, color 0.15s !important;
}

.menu-link:hover {
    background: rgba(184,150,10,0.1) !important;
    color: #ffffff !important;
}

/* Active menu item */
.menu-item.active > .menu-link,
.menu-item .menu-link.active,
.menu-item:has(> .menu-link.active) > .menu-link {
    background: var(--gold) !important;
    color: #ffffff !important;
}

.menu-item.active > .menu-link .menu-icon,
.menu-item .menu-link.active .menu-icon {
    color: #ffffff !important;
}

/* Menu icons */
.menu-icon { color: #64748b !important; }
.menu-link:hover .menu-icon { color: #ffffff !important; }

/* Menu text */
.menu-text { color: inherit !important; }

/* Sub-menu */
.sub-menu {
    background: rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    margin: 4px 8px !important;
}

.sub-menu .menu-link {
    color: #64748b !important;
    font-size: 13px !important;
}

.sub-menu .menu-link:hover {
    color: var(--gold) !important;
    background: rgba(184,150,10,0.08) !important;
}

.sub-menu .menu-item.active .menu-link,
.sub-menu .menu-link.active {
    color: var(--gold) !important;
    background: rgba(184,150,10,0.1) !important;
}

/* Menu arrow */
.menu-arrow { color: #475569 !important; }

/* Logo box */
.logo-box { border-bottom: 1px solid rgba(184,150,10,0.12) !important; }

/* Sidebar bottom user info */
.app-menu .user-info,
.app-menu [class*="user"] { color: #94a3b8 !important; }

/* Sidebar scrollbar */
.app-menu ::-webkit-scrollbar-track { background: var(--navy) !important; }
.app-menu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1) !important; }

/* ── Topbar ── */
.topbar,
.navbar-custom,
header.topbar,
.page-content > .topbar,
[class*="topbar"] {
    background-color: var(--navy) !important;
    border-bottom: 1px solid rgba(184,150,10,0.12) !important;
}

/* Topbar icons and text */
.topbar .nav-link,
.topbar button,
.topbar a,
[class*="topbar"] .nav-link,
[class*="topbar"] button {
    color: #94a3b8 !important;
}

.topbar .nav-link:hover,
[class*="topbar"] .nav-link:hover {
    color: var(--gold) !important;
}

/* Search bar in topbar */
.topbar input[type="search"],
.topbar input[type="text"],
[class*="topbar"] input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* ── Page title / breadcrumb ── */
.page-title-box h4,
.page-title,
h4.page-title {
    color: var(--navy) !important;
    font-weight: 700 !important;
}

.breadcrumb-item a { color: var(--gold) !important; }
.breadcrumb-item.active { color: #64748b !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #94a3b8 !important; }

/* ── Cards ── */
.card {
    background: #ffffff !important;
    border: 1px solid var(--cream-dark) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* ── Buttons ── */
.btn-primary,
button.bg-blue-700,
a.bg-blue-700,
.bg-blue-700,
.bg-indigo-600 {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
button.bg-blue-700:hover,
.bg-blue-700:hover,
.bg-indigo-600:hover {
    background-color: #9a7d08 !important;
    border-color: #9a7d08 !important;
}

.btn-secondary {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #ffffff !important;
}

/* ── DataTables ── */
table.dataTable thead th,
table.dataTable thead td,
.dataTables_wrapper table thead th {
    background-color: var(--navy) !important;
    color: #ffffff !important;
    border-bottom: 2px solid var(--gold) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    color: var(--gold) !important;
    opacity: 0.8 !important;
}

table.dataTable tbody tr {
    background: #ffffff !important;
}

table.dataTable tbody tr:hover {
    background: var(--cream) !important;
}

table.dataTable tbody td {
    color: var(--navy-mid) !important;
    border-bottom: 1px solid var(--cream-dark) !important;
}

/* DataTables pagination */
.dataTables_paginate .paginate_button {
    color: var(--navy-mid) !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
}

.dataTables_paginate .paginate_button:hover {
    background: var(--gold-pale) !important;
    color: var(--gold) !important;
    border-color: var(--gold-border) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--gold) !important;
    color: #ffffff !important;
    border-color: var(--gold) !important;
}

.dataTables_paginate .paginate_button.disabled {
    color: #cbd5e1 !important;
}

/* DataTables info */
.dataTables_info { color: #64748b !important; font-size: 13px !important; }

/* DataTables search */
.dataTables_filter input {
    border: 1.5px solid var(--cream-dark) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
    color: var(--navy) !important;
    outline: none !important;
}

.dataTables_filter input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(184,150,10,0.1) !important;
}

.dataTables_filter label { color: #64748b !important; font-size: 13px !important; }

/* DataTables length select */
.dataTables_length select {
    border: 1.5px solid var(--cream-dark) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    background: #ffffff !important;
    color: var(--navy) !important;
    outline: none !important;
}

/* ── Form inputs ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea,
select {
    border-color: var(--cream-dark) !important;
    background-color: #ffffff !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(184,150,10,0.1) !important;
    outline: none !important;
}

/* ── Footer ── */
footer,
.footer {
    background-color: var(--navy) !important;
    border-top: 1px solid rgba(184,150,10,0.12) !important;
    color: #64748b !important;
}

footer a, .footer a { color: var(--gold) !important; }

/* ── Dropdowns ── */
.dropdown-menu {
    background: var(--navy-mid) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
}

.dropdown-item { color: #94a3b8 !important; }
.dropdown-item:hover { background: rgba(184,150,10,0.1) !important; color: #ffffff !important; }

/* ── Badges ── */
.badge-primary, .bg-primary { background-color: var(--gold) !important; color: #ffffff !important; }
.badge-success, .bg-success { background-color: #16a34a !important; }
.badge-danger, .bg-danger { background-color: #dc2626 !important; }

/* ── Modals ── */
.modal-header { background: var(--navy) !important; color: #ffffff !important; }
.modal-title { color: #ffffff !important; }
.modal-footer { border-top-color: var(--cream-dark) !important; }

/* ── Alerts ── */
.alert-warning { background: #fffbeb !important; border-color: #fbbf24 !important; color: #92400e !important; }
.alert-success { background: #f0fdf4 !important; border-color: #86efac !important; color: #166534 !important; }
.alert-danger { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #991b1b !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: rgba(184,150,10,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Page title box breadcrumb area ── */
.page-title-box {
    background: transparent !important;
}

/* ── Dark mode overrides (force light in our theme) ── */
.dark\:bg-gray-800 { background-color: #ffffff !important; }
.dark\:text-gray-400 { color: #64748b !important; }
.dark\:border-gray-700 { border-color: var(--cream-dark) !important; }
.dark\:bg-gray-700 { background-color: var(--cream) !important; }

/* ── Toggle/hamburger button ── */
#button-hover-toggle { color: #64748b !important; }
#button-hover-toggle:hover { color: var(--gold) !important; }

/* ── Page content shadow-md tables ── */
.shadow-md { box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important; }

/* ── Active nav highlight ── */
.bg-blue-600, .bg-blue-500, .bg-blue-700 {
    background-color: var(--gold) !important;
}

/* ── Customizer button ── */
[class*="customizer"] button,
.btn-customize {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}
/* ── Fix select/input dark-mode text visibility ── */
select,
select option,
.dark\:bg-gray-700,
.dark\:text-white {
    color: var(--navy) !important;
}

select {
    background-color: #ffffff !important;
    border: 1.5px solid var(--cream-dark) !important;
}

/* Labels that were styled for dark backgrounds */
label.dark\:text-gray-300,
label.dark\:text-white,
.text-gray-700.dark\:text-gray-300 {
    color: var(--navy) !important;
}

/* Generic label visibility fix across all pages */
label {
    color: #334155 !important;
}