/**
 * PPS Portal — Dark Mode Fixes
 * v2.20.0
 * 
 * Fixes readability issues in dark mode for custom portal pages
 * that are not covered by the Material Dashboard Pro dark-version base styles.
 */

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL TEXT & BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .text-dark,
body.dark-version .text-sm,
body.dark-version .text-xs,
body.dark-version .text-xxs {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-version .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version h1, body.dark-version h2, body.dark-version h3,
body.dark-version h4, body.dark-version h5, body.dark-version h6,
body.dark-version .h1, body.dark-version .h2, body.dark-version .h3,
body.dark-version .h4, body.dark-version .h5, body.dark-version .h6 {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version p {
    color: rgba(255, 255, 255, 0.75);
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .table > :not(caption) > * > * {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .table thead th {
    color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(0, 0, 0, 0.15);
}

body.dark-version .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-version .table .font-weight-bold,
body.dark-version .table .font-weight-bolder {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Table text that uses dark-specific classes */
body.dark-version td .text-dark,
body.dark-version td .text-sm,
body.dark-version td .text-xs,
body.dark-version td span,
body.dark-version td a:not(.btn) {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .card {
    background-color: #202940 !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.20), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
}

body.dark-version .card .card-header {
    background: transparent !important;
}

body.dark-version .card-body .text-dark {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FORM CONTROLS & INPUTS
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .form-control,
body.dark-version .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-version .form-control:focus {
    border-color: #e91e63 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version select.form-control option {
    background: #202940;
    color: #fff;
}

body.dark-version .form-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .dropdown-menu {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

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

/* ═══════════════════════════════════════════════════════════════════
   LIST GROUPS
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .list-group-item {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ALERTS & BADGES
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .alert {
    border: none;
}

body.dark-version .badge.bg-light {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .pagination .page-link {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

body.dark-version .pagination .page-item.active .page-link {
    background: #e91e63;
    border-color: #e91e63;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   NAV PILLS / TABS
   ═══════════════════════════════════════════════════════════════════ */

body.dark-version .nav-pills .nav-link:not(.active) {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SPECIFIC PAGE FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* Support Tickets table */
body.dark-version .table-responsive td,
body.dark-version .table-responsive th {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Ticket numbers, member names */
body.dark-version td .font-weight-bold,
body.dark-version td strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Card headers text */
body.dark-version .card-header h5,
body.dark-version .card-header h6 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Breadcrumbs */
body.dark-version .breadcrumb-item a,
body.dark-version .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* DataTables if used */
body.dark-version .dataTables_wrapper .dataTables_info,
body.dark-version .dataTables_wrapper .dataTables_length,
body.dark-version .dataTables_wrapper .dataTables_filter {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM PORTAL COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* Topic form inputs (event topics page) */
body.dark-version .topic-form-input {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Accordion items */
body.dark-version .accordion-item {
    background-color: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .accordion-button {
    background-color: #202940 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .accordion-button:not(.collapsed) {
    background-color: rgba(233, 30, 99, 0.08) !important;
}

/* Stat cards text */
body.dark-version .card-body p.text-xs.text-uppercase {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Filter rows with bg-gray-100 */
body.dark-version .bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .bg-gray-100 p,
body.dark-version .bg-gray-100 label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Member info display sections */
body.dark-version .d-sm-flex.bg-gray-100 p,
body.dark-version .d-sm-flex.bg-gray-100 label,
body.dark-version .d-sm-flex.bg-gray-100 span {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Bulletin board cards on dashboard */
body.dark-version .card h6.text-dark {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Highlighted unread rows (support tickets, comments) */
body.dark-version tr[style*="background:#fffbeb"] {
    background: rgba(251, 191, 36, 0.08) !important;
}

/* Star ratings visibility */
body.dark-version .material-icons[style*="color: #e0e0e0"] {
    color: rgba(255, 255, 255, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD — QUICK ACTIONS & SECTIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Quick Action cards/buttons — white bg on dark mode */
body.dark-version .card .list-group-item,
body.dark-version .card .list-group .list-group-item {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .card .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Quick action link text */
body.dark-version .card .list-group-item a,
body.dark-version .card .list-group-item span,
body.dark-version .card .list-group-item p,
body.dark-version .card .list-group-item .text-dark {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Icon boxes with white/light backgrounds inside cards */
body.dark-version .card .icon-shape.bg-white,
body.dark-version .card .bg-white {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Recent Payments section - "No recent payments" text */
body.dark-version .card-body .text-center .text-muted,
body.dark-version .card-body .text-center p {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Upcoming Events card text */
body.dark-version .card .card-body h6,
body.dark-version .card .card-body .text-dark {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Event date text */
body.dark-version .card .card-body .text-muted,
body.dark-version .card .card-body small {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Quick Action rows that use border-bottom */
body.dark-version .border-bottom {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Action items with white card backgrounds */
body.dark-version .card .card-body .row .col .card,
body.dark-version .card .card-body a.card {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .card .card-body a.card:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Section headers in dashboard */
body.dark-version .card-header .text-capitalize,
body.dark-version .card-header p {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Button-style quick action links */
body.dark-version a.list-group-item-action {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version a.list-group-item-action:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Chart legends text */
body.dark-version .chart-legend span,
body.dark-version canvas + div span {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* "FULL REPORT" and "ALL EVENTS" outline buttons on dark cards */
body.dark-version .btn-outline-secondary,
body.dark-version .btn-outline-dark {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .btn-outline-secondary:hover,
body.dark-version .btn-outline-dark:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Timeline / activity feed items */
body.dark-version .timeline .timeline-content {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Info boxes with border */
body.dark-version .border {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* White background utility overrides */
body.dark-version .bg-white:not(.btn):not(.badge):not(.nav-link) {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-version .bg-gray-200 {
    background-color: #1a2035 !important;
}

/* HR dividers */
body.dark-version hr.horizontal.dark {
    background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.12), rgba(255,255,255,0)) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TABLE ROW HOVER — CRITICAL FIX (v2.21.1)
   The table row background on hover was making text invisible.
   ═══════════════════════════════════════════════════════════════════ */

/* Force ALL table cell content to be light in dark mode — regardless of hover */
body.dark-version table td,
body.dark-version table td *,
body.dark-version table th,
body.dark-version table th *,
body.dark-version .table td,
body.dark-version .table td *,
body.dark-version .table th,
body.dark-version .table th * {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Keep badge colors intact */
body.dark-version table .badge,
body.dark-version .table .badge {
    color: #fff !important;
}

/* Table row hover — subtle dark highlight, NOT white */
body.dark-version table tbody tr:hover,
body.dark-version .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

body.dark-version table tbody tr:hover td,
body.dark-version table tbody tr:hover td *,
body.dark-version .table tbody tr:hover td,
body.dark-version .table tbody tr:hover td * {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Inline styles that set background on rows (e.g. alternating/highlight rows) */
body.dark-version tr[style*="background"],
body.dark-version tr[style*="background"] td,
body.dark-version tr[style*="background"] td * {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Support Tickets — category badges should keep their gradient colors */
body.dark-version .badge.bg-gradient-success,
body.dark-version .badge.bg-gradient-info,
body.dark-version .badge.bg-gradient-warning,
body.dark-version .badge.bg-gradient-danger,
body.dark-version .badge.bg-gradient-primary,
body.dark-version .badge.bg-gradient-secondary,
body.dark-version .badge.bg-gradient-dark {
    color: #fff !important;
}

/* Links inside tables — make them stand out */
body.dark-version table a:not(.btn):not(.badge),
body.dark-version .table a:not(.btn):not(.badge) {
    color: #64b5f6 !important;
}

body.dark-version table a:not(.btn):not(.badge):hover,
body.dark-version .table a:not(.btn):not(.badge):hover {
    color: #90caf9 !important;
}

/* Table header — darker background for contrast */
body.dark-version table thead,
body.dark-version .table thead,
body.dark-version table thead tr,
body.dark-version .table thead tr {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

body.dark-version table thead th,
body.dark-version .table thead th {
    color: rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Sortable column header links */
body.dark-version th a,
body.dark-version th a:visited {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Card header titles and subtitles */
body.dark-version .card-header *,
body.dark-version .card-header h5,
body.dark-version .card-header h6,
body.dark-version .card-header p,
body.dark-version .card-header span {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Modal content */
body.dark-version .modal-content {
    background-color: #202940 !important;
}

body.dark-version .modal-body,
body.dark-version .modal-body * {
    color: rgba(255, 255, 255, 0.85) !important;
}

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

/* Input group labels in dark mode */
body.dark-version .input-group-outline .form-label,
body.dark-version .input-group-static .form-label,
body.dark-version label.form-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* SLA badges and status text */
body.dark-version td .text-success { color: #66bb6a !important; }
body.dark-version td .text-danger { color: #ef5350 !important; }
body.dark-version td .text-warning { color: #ffa726 !important; }
body.dark-version td .text-info { color: #29b6f6 !important; }