/*
 * Trailing Paper — Dark mode overrides for legacy template CSS
 *
 * Targeted patch for the worst dark-mode offenders that live in the
 * 22k-line vendor `style.css` (Kanakku admin theme) plus Bootstrap
 * utility classes that the template emits raw into markup
 * (`bg-white`, `text-dark`, etc.).
 *
 * Every rule scoped to `[data-bs-theme="dark"]`. Light mode untouched.
 * Loaded from partials/head-css.php AFTER style.css so it wins on cascade.
 */

/* Bootstrap CSS-var contrast bumps. .text-muted/.text-secondary read off
   --bs-secondary-color; Bootstrap's default in dark themes was washing
   muted text into the card surface. Pin it to our brighter
   --tp-text-secondary so 'muted' still has real contrast. */
[data-bs-theme="dark"] {
    --bs-secondary-color: var(--tp-text-secondary);
    --bs-secondary-color-rgb: 212, 212, 216; /* matches zinc #d4d4d8 */
    --bs-tertiary-color: var(--tp-text-muted);
    --bs-body-color: var(--tp-text-primary);
}

/* Bootstrap utility resets */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .border.rounded.bg-white,
[data-bs-theme="dark"] .rounded.bg-white { background-color: var(--tp-surface-1) !important; color: var(--tp-text-primary) !important; }
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black { color: var(--tp-text-primary) !important; }
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-gray { color: var(--tp-text-secondary) !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end { border-color: var(--tp-surface-divider) !important; }

/* Cards / panels / modals / offcanvas */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .tp-card,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .list-group-item { background-color: var(--tp-surface-1); border-color: var(--tp-surface-divider); color: var(--tp-text-primary); }
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .offcanvas-header,
[data-bs-theme="dark"] .offcanvas-footer,
[data-bs-theme="dark"] .alert,
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--tp-surface-divider); }

/* Dropdowns — let Bootstrap's native dark mode handle the bg
   (`--bs-dropdown-bg` already flips under [data-bs-theme="dark"]).
   We only override the border + text colours and the hover state.
   Removing background-color was Nate's call — the !important pin was
   breaking other dropdowns. */
[data-bs-theme="dark"] .dropdown-menu { border-color: var(--tp-surface-divider) !important; color: var(--tp-text-primary); }
[data-bs-theme="dark"] .dropdown-item { color: var(--tp-text-primary); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--tp-surface-2); color: var(--tp-text-primary); }
/* The avatar menu has a nested .bg-light user-info strip inside the
   dropdown — that one DOES need pinning since `.bg-light` outside this
   context is already overridden globally above. */
[data-bs-theme="dark"] .profile-dropdown .dropdown-menu .bg-light,
[data-bs-theme="dark"] .mobile-user-menu .dropdown-menu .bg-light { background-color: var(--tp-surface-2) !important; }

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_length select { background-color: var(--tp-surface-1); border-color: var(--tp-surface-divider); color: var(--tp-text-primary); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--tp-text-muted); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { background-color: var(--tp-surface-1); border-color: var(--tp-accent-500); color: var(--tp-text-primary); }
[data-bs-theme="dark"] .form-check-input { background-color: var(--tp-surface-2); border-color: var(--tp-surface-divider); }
[data-bs-theme="dark"] .input-group-text { background-color: var(--tp-surface-2); border-color: var(--tp-surface-divider); color: var(--tp-text-secondary); }

/* Tables */
[data-bs-theme="dark"] .table { color: var(--tp-text-primary); border-color: var(--tp-surface-divider); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--tp-surface-divider); color: var(--tp-text-primary); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--tp-surface-2); color: var(--tp-text-primary); }

/* Avatars + badges that combine bg-light/bg-white with text-dark */
[data-bs-theme="dark"] .avatar.bg-white,
[data-bs-theme="dark"] .avatar.bg-light,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.badge-soft-light,
[data-bs-theme="dark"] .badge.badge-outline-light { background-color: var(--tp-surface-2) !important; color: var(--tp-text-primary) !important; border-color: var(--tp-surface-divider) !important; }

/* Pagination */
[data-bs-theme="dark"] .page-link { background-color: var(--tp-surface-1); border-color: var(--tp-surface-divider); color: var(--tp-text-primary); }
[data-bs-theme="dark"] .page-link:hover { background-color: var(--tp-surface-2); color: var(--tp-text-primary); }
[data-bs-theme="dark"] .breadcrumb { background-color: transparent; color: var(--tp-text-secondary); }
[data-bs-theme="dark"] .dataTables_info,
[data-bs-theme="dark"] .dataTables_paginate { color: var(--tp-text-secondary); }