/* ============================================================
   eLife — Brand Theme (Red + Black + White)
   Phase 1: recolor the dark-teal ParkerThemes template to a
   light, clean theme matching the red/black logo.

   Loaded AFTER admin/css/main.css, so these rules win.
   Nothing in main.css is edited — remove this <link> to revert.
   ============================================================ */

:root {
    --brand:        #D32F2F;   /* primary red */
    --brand-dark:   #B71C1C;   /* hover / active */
    --brand-tint:   #FCE4E4;   /* subtle red background */
    --ink:          #1E1E1E;   /* near-black text */
    --ink-soft:     #2B2B2B;   /* charcoal */
    --muted:        #6C757D;   /* secondary text */
    --bg:           #F4F5F7;   /* app background */
    --surface:      #FFFFFF;   /* sidebar + cards */
    --border:       #E6E8EE;   /* hairlines */
    --ok:           #2E7D32;   /* active/success green */
}

/* ---------- App background & base text ---------- */
body,
body.authentication {
    background: var(--bg) !important;
    background-image: none !important;
    color: var(--ink) !important;
}
.page-wrapper { background: var(--bg) !important; }
.main-container,
.main-container p,
.main-container span,
.main-container td,
.main-container li,
.main-container label,
.main-container h1, .main-container h2, .main-container h3,
.main-container h4, .main-container h5, .main-container h6 {
    color: var(--ink);
}

/* ---------- Sidebar (light) ---------- */
.page-wrapper .sidebar-wrapper {
    background: var(--surface) !important;
    border-right: 1px solid var(--border);
}
.page-wrapper .sidebar-wrapper .sidebar-brand,
.page-wrapper .sidebar-wrapper .sidebar-brand .logo {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

/* menu links */
.page-wrapper .sidebar-wrapper .sidebar-menu ul li a {
    color: var(--ink-soft) !important;
    font-weight: 500;
    border-radius: 8px;
    margin: 2px 10px;
}
.page-wrapper .sidebar-wrapper .sidebar-menu ul li a i {
    color: var(--muted) !important;
}
/* hover */
.page-wrapper .sidebar-wrapper .sidebar-menu ul li a:hover {
    background: var(--brand-tint) !important;
    color: var(--brand) !important;
}
.page-wrapper .sidebar-wrapper .sidebar-menu ul li a:hover i {
    color: var(--brand) !important;
}
/* active page (layout uses <li class="active">) */
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active > a,
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link > a,
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active a.current-page {
    background: var(--brand) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(211,47,47,.28);
}
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active > a i,
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link > a i {
    color: #ffffff !important;
}

/* ---------- Header (light) ---------- */
.header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.header .toggle-btns h4,
.header h4 { color: var(--ink) !important; }

.header .toggle-btns #pin-sidebar,
.header .toggle-btns #toggle-sidebar {
    background: var(--brand) !important;
}
.header .toggle-btns #pin-sidebar:hover,
.header .toggle-btns #toggle-sidebar:hover {
    background: var(--brand-dark) !important;
}
.header .header-items,
.header .header-items > div,
.header .user-settings > a span { color: var(--ink) !important; }

/* wallet balance chip in header */
.header .header-items > div {
    background: var(--brand-tint);
    color: var(--brand) !important;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
}

/* dropdown menu */
.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
.dropdown-menu a,
.header-profile-actions a { color: var(--ink) !important; }
.dropdown-menu a:hover,
.header-profile-actions a:hover { background: var(--brand-tint) !important; color: var(--brand) !important; }
.header-user-profile h5 { color: var(--ink) !important; }

/* ---------- Cards / table containers (white) ---------- */
.card,
.table-container {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.table-container .t-header { color: var(--ink); }

/* ---------- Tables ---------- */
.table {
    background: var(--surface) !important;
    color: var(--ink) !important;
}
.table thead th {
    color: var(--ink) !important;
    border-bottom: 2px solid var(--border) !important;
}
.table td { border-top: 1px solid var(--border) !important; }
.table th { border-top: 1px solid var(--border) !important; }

.custom-table { border: 1px solid var(--border) !important; }
.custom-table thead { background: var(--ink) !important; }   /* black header bar */
.custom-table thead th { color: #ffffff !important; }
.custom-table > tbody td { border: 1px solid var(--border) !important; color: var(--ink) !important; }
.custom-table > tbody tr:nth-of-type(even) { background-color: #fafbfc !important; }
.custom-table > tbody tr:hover { background: var(--brand-tint) !important; }

/* status pills used inside tables: <span class="active|inactive"> */
.table .active, .custom-table .active,
span.active {
    background: rgba(46,125,50,.12) !important;
    color: var(--ok) !important;
    padding: 3px 10px; border-radius: 12px; font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing:.3px;
}
.table .inactive, .custom-table .inactive,
span.inactive {
    background: rgba(211,47,47,.12) !important;
    color: var(--brand) !important;
    padding: 3px 10px; border-radius: 12px; font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing:.3px;
}

/* ---------- Forms ---------- */
.form-control {
    background: #ffffff !important;
    color: var(--ink) !important;
    border: 1px solid #ced4da !important;
}
.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 .2rem rgba(211,47,47,.15) !important;
}
.form-control::placeholder { color: #9aa1ab !important; }
label, .col-form-label { color: var(--ink) !important; }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
    background: var(--brand) !important;
    background-image: none !important;
    border-color: var(--brand) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background: var(--brand-dark) !important;
    background-image: none !important;
    border-color: var(--brand-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 .2rem rgba(211,47,47,.30) !important;
}
.btn-rounded { border-radius: 50px !important; }

/* secondary buttons stay neutral but readable */
.btn-secondary {
    background: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

/* warning (used by Reset Password) -> amber, keep distinct from brand red */
.btn-warning { color: #1E1E1E !important; }

/* ---------- Links (content area only; sidebar handled above) ---------- */
.main-container a:not(.btn):not(.page-link) { color: var(--brand); }
.main-container a:not(.btn):not(.page-link):hover { color: var(--brand-dark); }

/* ---------- Badges ---------- */
.badge-primary, .bg-primary { background-color: var(--brand) !important; color:#fff !important; }
.badge-secondary { background-color: var(--ink) !important; }

/* ---------- DataTables controls ---------- */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--ink) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: #fff !important;
    color: var(--ink) !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--ink) !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--brand-tint) !important;
    border-color: var(--brand-tint) !important;
    color: var(--brand) !important;
}

/* ---------- Action icon buttons in tables ---------- */
.icon-edit.btn { background: var(--brand) !important; color:#fff !important; }
.icon-delete.btn { background: var(--ink) !important; color:#fff !important; }

/* ---------- Dashboard stat cards ---------- */
.sho_box {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-bottom: 3px solid var(--brand) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.box_content p { color: var(--muted) !important; font-size: 14px !important; }
.box_content span { color: var(--ink) !important; }
.box_icon img { filter: none; }

/* sponsor id chip in the welcome area -> charcoal, all text white */
.sponser_id,
.sponser_id p,
.sponser_id p span,
.sponser_id p i {
    color: #fff !important;
}
.sponser_id { background-color: var(--ink) !important; }

/* dashboard inner table links */
.dashboard_table tr td a { background-color: var(--brand) !important; color:#fff !important; }
.daboadr_table_heading a { color: var(--brand) !important; }

/* ---------- Modals (light + red header) ---------- */
.modal .modal-content {
    background: #ffffff !important;
    color: var(--ink) !important;
    border: 0 !important;
    border-radius: 10px !important;
}
.modal .modal-header {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}
.modal .modal-header .modal-title { color: #ffffff !important; }
.modal .modal-header .close {
    color: #ffffff !important;
    opacity: .9;
    text-shadow: none;
}
.modal .modal-footer { border-top: 1px solid var(--border) !important; }
.modal .modal-body { color: var(--ink) !important; }

/* ---------- Login page ---------- */
.login-screen {
    border-top: 4px solid var(--brand) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
}
.login-screen .login-logo { color: var(--brand) !important; }
.login-screen .login-box h5 { color: var(--ink) !important; }
.login-screen .actions .btn {
    background: var(--brand) !important;
    color: #ffffff !important;
}
.login-screen .actions .btn:hover { background: var(--brand-dark) !important; }
.login-screen .form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 .2rem rgba(211,47,47,.15) !important;
}
.login-screen .forgot-pwd a { color: var(--muted) !important; }
.login-screen .forgot-pwd a:hover { color: var(--brand) !important; }
.login-screen .back_home_btn a:hover { color: var(--brand) !important; }
/* the password eye toggle we added on the login form */
#toggle_login_pw i { color: var(--muted); }

/* ---------- Footer ---------- */
.footer {
    background: var(--ink) !important;
    color: #ffffff !important;
}

/* ---------- Misc ---------- */
hr { border-top-color: var(--border) !important; }
.text-primary { color: var(--brand) !important; }