/**
 * AnimalisPro – Dark Pages Theme
 * Shared dark-theme overrides for all internal pages (dashboard, dogs, litters, puppies, etc.)
 * Uses the AnimalisPro design tokens. Applied via $extraHead on each page.
 *
 * Sections:
 *  1. Design Tokens
 *  2. Global / Body
 *  3. Bootstrap Card Overrides
 *  4. Bootstrap Table Overrides
 *  5. Bootstrap Button Overrides
 *  6. Bootstrap Form Overrides
 *  7. Bootstrap Alert Overrides
 *  8. Bootstrap Badge Overrides
 *  9. Bootstrap Modal Overrides
 * 10. Bootstrap Dropdown Overrides
 * 11. Bootstrap Nav / Tabs Overrides
 * 12. Bootstrap List Group Overrides
 * 13. Pagination Overrides
 * 14. Typography & Utility
 */

/* ============================================================
   1. Design Tokens
   ============================================================ */
:root {
    --bg-dark:       #140826;
    --bg-secondary:  #1E0F3A;
    --bg-card:       rgba(30, 15, 58, 0.80);
    --accent-purple: #D977FF;
    --accent-blue:   #5AB8FF;
    --accent-soft:   #F4C2FF;
    --text-main:     #F5F0FF;
    --text-muted:    #CDBFEA;
    --glass-bg:      rgba(255, 255, 255, 0.05);
    --glass-bg-hover: rgba(255, 255, 255, 0.09);
    --glass-border:  rgba(255, 255, 255, 0.12);
    --radius-card:   20px;
    --radius-btn:    12px;
    --transition:    0.25s ease;
    --grad-primary:  linear-gradient(135deg, #D977FF 0%, #5AB8FF 100%);
}

/* ============================================================
   2. Global / Body
   ============================================================ */
body {
    background-color: var(--bg-dark) !important;
    background-image:
        radial-gradient(circle at 10% 15%, rgba(217, 119, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(90, 184, 255, 0.09) 0%, transparent 40%);
    background-attachment: fixed;
    color: var(--text-main) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Remove light-mode body backgrounds set by other CSS files */
[data-theme="dark"] body,
[data-theme="light"] body {
    background-color: var(--bg-dark) !important;
    background-image:
        radial-gradient(circle at 10% 15%, rgba(217, 119, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(90, 184, 255, 0.09) 0%, transparent 40%) !important;
    color: var(--text-main) !important;
}

.container, .container-fluid, .container-lg, .container-xl {
    color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-main) !important;
}

p, span, div, label, th, td, li {
    color: inherit;
}

a {
    color: var(--accent-blue);
}
a:hover {
    color: var(--accent-soft);
}

hr {
    border-color: var(--glass-border) !important;
    opacity: 1;
}

/* ============================================================
   3. Bootstrap Card Overrides
   ============================================================ */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    color: var(--text-main) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 48px rgba(217, 119, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(217, 119, 255, 0.28) !important;
}
.card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    font-weight: 600;
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}
.card-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
}
.card-body {
    color: var(--text-main) !important;
}
.card-title {
    color: var(--text-main) !important;
    font-weight: 700;
}
.card-subtitle, .card-text {
    color: var(--text-muted) !important;
}

/* ============================================================
   4. Bootstrap Table Overrides
   ============================================================ */
.table {
    color: var(--text-main) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(217, 119, 255, 0.08);
    --bs-table-active-bg: rgba(217, 119, 255, 0.12);
}
.table thead th,
.table > thead > tr > th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(205, 191, 234, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.table td, .table th {
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-main) !important;
    vertical-align: middle;
}
.table tbody tr {
    background-color: rgba(255, 255, 255, 0.03);
}
.table tbody td {
    background: transparent !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.025);
    color: var(--text-main);
}
.table-hover > tbody > tr:hover {
    background-color: rgba(217, 119, 255, 0.08) !important;
}
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent;
    background: transparent !important;
    color: var(--text-main) !important;
}
.table-responsive {
    border-radius: var(--radius-card);
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ============================================================
   5. Bootstrap Button Overrides
   ============================================================ */
.btn-primary {
    background: var(--grad-primary) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(217, 119, 255, 0.30);
    transition: all var(--transition);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #e48eff 0%, #72c5ff 100%) !important;
    box-shadow: 0 6px 24px rgba(217, 119, 255, 0.45);
    transform: translateY(-1px);
    color: #fff !important;
}
.btn-outline-primary {
    border-color: var(--accent-purple) !important;
    color: var(--accent-purple) !important;
    background: transparent !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 500;
}
.btn-outline-primary:hover {
    background: rgba(217, 119, 255, 0.15) !important;
    color: var(--accent-soft) !important;
    border-color: var(--accent-soft) !important;
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-btn) !important;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: var(--text-main) !important;
}
.btn-outline-secondary {
    border-color: var(--glass-border) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main) !important;
}
.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 600;
}
.btn-outline-success {
    border-color: #22c55e !important;
    color: #4ade80 !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-success:hover {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 600;
}
.btn-outline-danger {
    border-color: #ef4444 !important;
    color: #f87171 !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}
.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-warning {
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-warning:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fde68a !important;
}
.btn-info {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-info {
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-info:hover {
    background: rgba(90, 184, 255, 0.15) !important;
    color: #93c5fd !important;
}
.btn-light {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-btn) !important;
}
.btn-light:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
}
.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.30) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-btn) !important;
}
.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--text-main) !important;
}
.btn-dark {
    background: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-btn) !important;
}

/* ============================================================
   6. Bootstrap Form Overrides
   ============================================================ */
.form-control,
.form-select,
.form-check-input {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: 10px !important;
}
.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--accent-purple) !important;
    color: var(--text-main) !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 255, 0.20) !important;
}
.form-control::placeholder {
    color: rgba(205, 191, 234, 0.50) !important;
}
.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-main);
}
.form-label {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 0.9rem;
}
.input-group-text {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
}
.form-check-input:checked {
    background-color: var(--accent-purple) !important;
    border-color: var(--accent-purple) !important;
}
.form-text {
    color: var(--text-muted) !important;
}

/* ============================================================
   7. Bootstrap Alert Overrides
   ============================================================ */
.alert {
    border-radius: 14px !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(8px);
}
.alert-info {
    background: rgba(90, 184, 255, 0.12) !important;
    border-color: rgba(90, 184, 255, 0.25) !important;
    color: #93c5fd !important;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #fde68a !important;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}
.alert-success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
}
.alert-primary {
    background: rgba(217, 119, 255, 0.12) !important;
    border-color: rgba(217, 119, 255, 0.25) !important;
    color: var(--accent-soft) !important;
}
.alert .alert-link {
    color: var(--accent-blue) !important;
    text-decoration: underline;
}
.alert .btn-close {
    filter: invert(1) brightness(0.8);
}

/* ============================================================
   8. Bootstrap Badge Overrides
   ============================================================ */
.badge {
    font-weight: 600;
    letter-spacing: 0.03em;
}
.bg-primary { background: var(--grad-primary) !important; }
.bg-secondary { background: rgba(255, 255, 255, 0.12) !important; color: var(--text-muted) !important; }
.bg-success { background: rgba(34, 197, 94, 0.20) !important; color: #86efac !important; }
.bg-danger { background: rgba(239, 68, 68, 0.20) !important; color: #fca5a5 !important; }
.bg-warning { background: rgba(245, 158, 11, 0.20) !important; color: #fde68a !important; }
.bg-info { background: rgba(90, 184, 255, 0.20) !important; color: #93c5fd !important; }
.bg-light { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-muted) !important; }
.bg-white { background: rgba(255, 255, 255, 0.06) !important; color: var(--text-main) !important; }
.bg-dark { background: rgba(0, 0, 0, 0.40) !important; }

/* Bootstrap 5 *-subtle bg utilities → dark equivalents */
.bg-primary-subtle   { background: rgba(217, 119, 255, 0.14) !important; color: var(--accent-soft) !important; }
.bg-secondary-subtle { background: rgba(255, 255, 255, 0.07) !important; color: var(--text-muted) !important; }
.bg-success-subtle   { background: rgba(34, 197, 94, 0.13) !important; color: #86efac !important; }
.bg-danger-subtle    { background: rgba(239, 68, 68, 0.13) !important; color: #fca5a5 !important; }
.bg-warning-subtle   { background: rgba(245, 158, 11, 0.13) !important; color: #fde68a !important; }
.bg-info-subtle      { background: rgba(90, 184, 255, 0.13) !important; color: #93c5fd !important; }
.bg-light-subtle     { background: rgba(255, 255, 255, 0.05) !important; color: var(--text-muted) !important; }

/* Bootstrap 5 text-*-emphasis utilities */
.text-primary-emphasis   { color: var(--accent-soft) !important; }
.text-secondary-emphasis { color: var(--text-muted) !important; }
.text-success-emphasis   { color: #86efac !important; }
.text-danger-emphasis    { color: #fca5a5 !important; }
.text-warning-emphasis   { color: #fde68a !important; }
.text-info-emphasis      { color: #93c5fd !important; }

/* Bootstrap 5 border-*-subtle utilities */
.border-primary-subtle   { border-color: rgba(217, 119, 255, 0.28) !important; }
.border-secondary-subtle { border-color: rgba(255, 255, 255, 0.10) !important; }
.border-success-subtle   { border-color: rgba(34, 197, 94, 0.28) !important; }
.border-danger-subtle    { border-color: rgba(239, 68, 68, 0.28) !important; }
.border-warning-subtle   { border-color: rgba(245, 158, 11, 0.28) !important; }
.border-info-subtle      { border-color: rgba(90, 184, 255, 0.28) !important; }

/* Badges with bg-light text-dark → forcibly readable */
.badge.bg-light,
.badge.bg-light.text-dark {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-main) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
/* progress-bar bg-white → transparent tinted */
.progress-bar.bg-white {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================================
   9. Bootstrap Modal Overrides
   ============================================================ */
.modal-content {
    background: #1E0F3A !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    color: var(--text-main) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.60) !important;
}
.modal-header {
    border-bottom: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}
.modal-header .modal-title {
    color: var(--text-main) !important;
    font-weight: 700;
}
.modal-body {
    color: var(--text-main) !important;
}
.modal-footer {
    border-top: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.02);
}
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.70) !important;
}
.btn-close {
    filter: invert(1) brightness(0.9);
}

/* ============================================================
   10. Bootstrap Dropdown Overrides
   ============================================================ */
body[data-ap-layout="animalispro"] .dropdown-menu,
body[data-ap-variant] .dropdown-menu {
    background-color: #1E0F3A !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1050 !important;
}
body[data-ap-layout="animalispro"] .dropdown-item,
body[data-ap-variant] .dropdown-item {
    color: var(--text-muted) !important;
    border-radius: 8px;
    margin: 1px 4px;
    width: calc(100% - 8px);
}
body[data-ap-layout="animalispro"] .dropdown-item:hover,
body[data-ap-layout="animalispro"] .dropdown-item:focus,
body[data-ap-variant] .dropdown-item:hover,
body[data-ap-variant] .dropdown-item:focus {
    background: rgba(217, 119, 255, 0.12) !important;
    color: var(--text-main) !important;
}
body[data-ap-layout="animalispro"] .dropdown-divider,
body[data-ap-variant] .dropdown-divider {
    border-color: var(--glass-border) !important;
}
body[data-ap-layout="animalispro"] .dropdown-header,
body[data-ap-variant] .dropdown-header {
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Table-responsive: allow dropdowns to overflow when open */
body[data-ap-layout="animalispro"] .table-responsive:has(.dropdown.show),
body[data-ap-variant] .table-responsive:has(.dropdown.show) {
    overflow: visible !important;
}
/* Also allow overflow on dogs-table-wrapper (uses own class, not .table-responsive) */
body[data-ap-layout="animalispro"] .dogs-table-wrapper:has(.dropdown.show),
body[data-ap-variant] .dogs-table-wrapper:has(.dropdown.show) {
    overflow: visible !important;
}
/* Ensure all dropdown-menus are always above Bootstrap modals (z-index 1050)
   and other content panels. Bootstrap navbar uses 1040, dropdowns 1050 by default;
   we set 1055 (same as offcanvas) so menus always appear above content cards. */
.dropdown-menu {
    z-index: 1055 !important;
}
/* bg-light on structural containers (tab-content, pedigree panels) → dark glass surface */
.tab-content.bg-light,
.bg-light.border.rounded,
.bg-light.border.rounded-bottom {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
    border-color: var(--glass-border) !important;
}
/* form-check with bg-light → dark glass surface */
.form-check.bg-light {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--glass-border) !important;
}
/* card-header with bg-primary/bg-danger → keep readable but darken */
.card-header.bg-primary {
    background: rgba(217, 119, 255, 0.25) !important;
    border-bottom-color: rgba(217, 119, 255, 0.30) !important;
    color: var(--text-main) !important;
}
.card-header.bg-danger {
    background: rgba(239, 68, 68, 0.20) !important;
    border-bottom-color: rgba(239, 68, 68, 0.30) !important;
    color: #fca5a5 !important;
}
.card-header.bg-danger-subtle {
    background: rgba(239, 68, 68, 0.13) !important;
    border-bottom-color: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}
.card-header.bg-warning-subtle {
    background: rgba(245, 158, 11, 0.13) !important;
    border-bottom-color: rgba(245, 158, 11, 0.22) !important;
    color: #fde68a !important;
}
.card-header.bg-success-subtle {
    background: rgba(34, 197, 94, 0.13) !important;
    border-bottom-color: rgba(34, 197, 94, 0.22) !important;
    color: #86efac !important;
}
/* card with border-primary → purple glass border */
.card.border-primary {
    border-color: rgba(217, 119, 255, 0.40) !important;
}
/* Avatar placeholder bg-light → glass surface */
.avatar.bg-light,
div.bg-light.overflow-hidden {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* ============================================================
   11. Bootstrap Nav / Tabs Overrides
   ============================================================ */
body[data-ap-layout="animalispro"] .nav-tabs,
body[data-ap-variant] .nav-tabs {
    border-bottom: 1px solid var(--glass-border) !important;
}
body[data-ap-layout="animalispro"] .nav-tabs .nav-link,
body[data-ap-variant] .nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border: none !important;
    background: transparent !important;
    border-radius: 10px 10px 0 0 !important;
}
body[data-ap-layout="animalispro"] .nav-tabs .nav-link:hover,
body[data-ap-variant] .nav-tabs .nav-link:hover {
    color: var(--text-main) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body[data-ap-layout="animalispro"] .nav-tabs .nav-link.active,
body[data-ap-variant] .nav-tabs .nav-link.active {
    background: rgba(217, 119, 255, 0.15) !important;
    border-bottom: 2px solid var(--accent-purple) !important;
    color: var(--accent-soft) !important;
    font-weight: 600;
}
.nav-pills .nav-link {
    color: var(--text-muted) !important;
    border-radius: 10px !important;
}
.nav-pills .nav-link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--text-main) !important;
}
.nav-pills .nav-link.active {
    background: var(--grad-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ============================================================
   12. Bootstrap List Group Overrides
   ============================================================ */
body[data-ap-layout="animalispro"] .list-group-item,
body[data-ap-variant] .list-group-item {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-main) !important;
}
body[data-ap-layout="animalispro"] .list-group-item:hover,
body[data-ap-variant] .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-ap-layout="animalispro"] .list-group-item.active,
body[data-ap-variant] .list-group-item.active {
    background: rgba(217, 119, 255, 0.20) !important;
    border-color: var(--accent-purple) !important;
    color: var(--accent-soft) !important;
}

/* ============================================================
   13. Pagination Overrides
   ============================================================ */
.page-item .page-link {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-muted) !important;
    border-radius: 8px !important;
}
.page-item .page-link:hover {
    background-color: rgba(217, 119, 255, 0.15) !important;
    color: var(--text-main) !important;
    border-color: var(--accent-purple) !important;
}
.page-item.active .page-link {
    background: var(--grad-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: rgba(205, 191, 234, 0.30) !important;
}

/* ============================================================
   14. Typography & Utility
   ============================================================ */
.text-muted {
    color: var(--text-muted) !important;
}
.text-dark {
    color: var(--text-main) !important;
}
.text-body {
    color: var(--text-main) !important;
}
.bg-white {
    background: rgba(255, 255, 255, 0.06) !important;
}
.border {
    border-color: var(--glass-border) !important;
}
.border-top { border-top-color: var(--glass-border) !important; }
.border-bottom { border-bottom-color: var(--glass-border) !important; }
.shadow {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}
.shadow-sm {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Text color utilities */
.text-success { color: #4ade80 !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: var(--accent-blue) !important; }
.text-primary { color: var(--accent-purple) !important; }
.text-secondary { color: var(--text-muted) !important; }
.text-white   { color: var(--text-main) !important; }
.text-white-50 { color: rgba(245, 240, 255, 0.55) !important; }
.text-black-50 { color: rgba(245, 240, 255, 0.50) !important; }
.opacity-75 { opacity: 0.75; }

/* Section headings (gradient) */
.ap-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

/* AP Glass Card (reusable in all pages) */
.ap-glass-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    color: var(--text-main) !important;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
    transition: transform var(--transition), box-shadow var(--transition);
}
.ap-glass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 48px rgba(217, 119, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.35);
    border-color: rgba(217, 119, 255, 0.25) !important;
}

/* AP Stat Number */
.ap-stat-number {
    font-size: 2rem;
    font-weight: 800;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

/* AP Gradient Text */
.gradient-text {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}
::-webkit-scrollbar-thumb {
    background: rgba(217, 119, 255, 0.35);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(217, 119, 255, 0.55);
}

/* ============================================================
   15. Supplemental Structural Overrides
   ============================================================ */

/* Any div/section with bg-light that is a structural container (not a badge) */
div.bg-light:not(.badge),
section.bg-light,
aside.bg-light {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-main) !important;
}

/* p-3/p-4 bg-light panels (used as info boxes in dashboard pages) */
.p-3.bg-light,
.p-4.bg-light {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-main) !important;
}

/* card-header with bg-warning → amber glass */
.card-header.bg-warning {
    background: rgba(245, 158, 11, 0.18) !important;
    border-bottom-color: rgba(245, 158, 11, 0.25) !important;
    color: #fde68a !important;
}
/* card-header with bg-info → blue glass */
.card-header.bg-info {
    background: rgba(90, 184, 255, 0.18) !important;
    border-bottom-color: rgba(90, 184, 255, 0.25) !important;
    color: #93c5fd !important;
}
/* card-header bg-warning bg-opacity-10 → amber glass */
.card-header.bg-warning.bg-opacity-10 {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #fde68a !important;
}

/* List group item variants */
.list-group-item.list-group-item-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.22) !important;
    color: #fde68a !important;
}
.list-group-item.list-group-item-success {
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
    color: #86efac !important;
}
.list-group-item.list-group-item-danger {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}
.list-group-item.list-group-item-info {
    background: rgba(90, 184, 255, 0.14) !important;
    border-color: rgba(90, 184, 255, 0.22) !important;
    color: #93c5fd !important;
}

/* Input group text (used in URL slug display) */
.input-group-text {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-muted) !important;
}

/* form-text (helper text below inputs) */
.form-text {
    color: var(--text-faint, rgba(205, 191, 234, 0.55)) !important;
}

/* card border-warning → amber glass border */
.card.border-warning {
    border-color: rgba(245, 158, 11, 0.40) !important;
}
/* card border-danger → red glass border */
.card.border-danger {
    border-color: rgba(239, 68, 68, 0.40) !important;
}
/* card border-success → green glass border */
.card.border-success {
    border-color: rgba(34, 197, 94, 0.40) !important;
}
/* card border-info → blue glass border */
.card.border-info {
    border-color: rgba(90, 184, 255, 0.40) !important;
}

/* Alert with contextual colors inside cards */
.alert-danger {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #fde68a !important;
}
.alert-success {
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
}
.alert-info {
    background: rgba(90, 184, 255, 0.14) !important;
    border-color: rgba(90, 184, 255, 0.25) !important;
    color: #93c5fd !important;
}

/* ============================================================
   16. Navbar Dropdown – stacking context safety
   ============================================================ */
/* The main navbar should ALWAYS stack above all positioned content containers.
   Ensure no content block with position:relative creates a stacking context
   that could clip or hide the dropdown-menu rendered inside #mainNavbar. */
body[data-ap-layout="animalispro"] #mainNavbar,
body[data-ap-variant] #mainNavbar {
    position: sticky;
    top: 0;
    z-index: var(--z-navbar, 1040);
}

/* Ensure dropdown-menus from the navbar appear above ALL content,
   including positioned panels/cards with overflow:hidden. */
body[data-ap-layout="animalispro"] #mainNavbar .dropdown-menu,
body[data-ap-variant] #mainNavbar .dropdown-menu {
    z-index: calc(var(--z-dropdown, 1050) + 10) !important;
    position: absolute !important;
    pointer-events: auto;
}

body[data-ap-layout="animalispro"] #mainNavbar .container,
body[data-ap-layout="animalispro"] #mainNavbar .navbar-collapse,
body[data-ap-layout="animalispro"] #mainNavbar .navbar-nav,
body[data-ap-layout="animalispro"] #mainNavbar .nav-item,
body[data-ap-layout="animalispro"] #mainNavbar .dropdown,
body[data-ap-variant] #mainNavbar .container,
body[data-ap-variant] #mainNavbar .navbar-collapse,
body[data-ap-variant] #mainNavbar .navbar-nav,
body[data-ap-variant] #mainNavbar .nav-item,
body[data-ap-variant] #mainNavbar .dropdown {
    overflow: visible !important;
}

body[data-ap-layout="animalispro"] #mainNavbar .nav-item,
body[data-ap-layout="animalispro"] #mainNavbar .dropdown,
body[data-ap-variant] #mainNavbar .nav-item,
body[data-ap-variant] #mainNavbar .dropdown {
    position: relative;
}

/* Generic: any direct overflow:hidden container that is positioned
   and comes right after the navbar should not clip the navbar dropdown.
   We only reset on the sibling/descendant level; the navbar itself is outside. */
body[data-ap-layout="animalispro"] .container:has(.dropdown.show),
body[data-ap-variant] .container:has(.dropdown.show) {
    overflow: visible !important;
}

/* Unconditionally ensure .dogs-table-wrapper never clips the navbar dropdown.
   The inner .dogs-table-scroll element handles horizontal scrolling instead. */
body[data-ap-layout="animalispro"] .dogs-table-wrapper,
body[data-ap-variant] .dogs-table-wrapper {
    overflow: visible !important;
}

/* Also ensure the inner scroll container allows row-action
   dropdowns to escape it when open */
body[data-ap-layout="animalispro"] .dogs-table-wrapper .dogs-table-scroll:has(.dropdown.show),
body[data-ap-variant] .dogs-table-wrapper .dogs-table-scroll:has(.dropdown.show) {
    overflow: visible !important;
}

/* Legacy: keep the old dogs-table-wrapper:has rule for back-compat with any
   pages that haven't yet adopted .dogs-table-scroll */
body[data-ap-layout="animalispro"] .dogs-table-wrapper:has(.dropdown.show),
body[data-ap-variant] .dogs-table-wrapper:has(.dropdown.show) {
    overflow: visible !important;
}

/* ============================================================
   17. Dog Profile (dog-view.php) – Dark Overrides for Light Lilac Theme
   ============================================================ */
/* Override the light "Soft Lilac Glass" gender theme from style.css */
body[data-ap-layout="animalispro"] .dog--male .dog-hero-card,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-card {
    background:
        radial-gradient(ellipse at 20% 15%, rgba(217, 119, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 85%, rgba(90, 184, 255, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, #1E0F3A 0%, #140826 50%, #1a0d35 100%) !important;
    color: var(--text-main, #F5F0FF) !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-card::before,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-card::before {
    opacity: 0.12 !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-card .dog-hero-overlay,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-card .dog-hero-overlay {
    background: linear-gradient(120deg, rgba(20, 8, 38, 0.82) 0%, rgba(30, 15, 58, 0.55) 100%) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-card h1,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-card h1 {
    color: var(--text-main, #F5F0FF) !important;
}
/* Chips – shared text override then gender-specific background/border */
body[data-ap-layout="animalispro"] .dog--male .dog-hero-chip,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-chip {
    color: var(--text-main, #F5F0FF) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-chip {
    background: rgba(90, 184, 255, 0.12) !important;
    border-color: rgba(90, 184, 255, 0.25) !important;
    color: #93c5fd !important;
}
body[data-ap-layout="animalispro"] .dog--female .dog-hero-chip {
    background: rgba(217, 119, 255, 0.12) !important;
    border-color: rgba(217, 119, 255, 0.25) !important;
    color: var(--accent-soft, #F4C2FF) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-details,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-details {
    color: var(--text-muted, #CDBFEA) !important;
}
/* Stat tiles – shared color then gender-specific background/border */
body[data-ap-layout="animalispro"] .dog--male .dog-hero-stat,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-stat {
    color: var(--text-main, #F5F0FF) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-stat {
    background: rgba(90, 184, 255, 0.08) !important;
    border-color: rgba(90, 184, 255, 0.18) !important;
}
body[data-ap-layout="animalispro"] .dog--female .dog-hero-stat {
    background: rgba(217, 119, 255, 0.08) !important;
    border-color: rgba(217, 119, 255, 0.18) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-stat .stat-icon,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-stat .stat-icon {
    background: rgba(255, 255, 255, 0.10) !important;
}
body[data-ap-layout="animalispro"] .dog--male .stat-label,
body[data-ap-layout="animalispro"] .dog--female .stat-label {
    color: var(--text-muted, #CDBFEA) !important;
}
body[data-ap-layout="animalispro"] .dog--male .stat-value,
body[data-ap-layout="animalispro"] .dog--female .stat-value {
    color: var(--text-main, #F5F0FF) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-avatar {
    border-color: rgba(90, 184, 255, 0.35) !important;
    background: rgba(90, 184, 255, 0.10) !important;
}
body[data-ap-layout="animalispro"] .dog--female .dog-hero-avatar {
    border-color: rgba(217, 119, 255, 0.35) !important;
    background: rgba(217, 119, 255, 0.10) !important;
}
body[data-ap-layout="animalispro"] .dog--male .dog-hero-placeholder,
body[data-ap-layout="animalispro"] .dog--female .dog-hero-placeholder {
    color: var(--text-muted, #CDBFEA) !important;
}

/* Dog profile panels */
body[data-ap-layout="animalispro"] .dog-profile-card,
body[data-ap-layout="animalispro"] .dog--male .dog-profile-card,
body[data-ap-layout="animalispro"] .dog--female .dog-profile-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--text-main, #F5F0FF) !important;
}
body[data-ap-layout="animalispro"] .dog-steckbrief-item,
body[data-ap-layout="animalispro"] .dog--male .dog-steckbrief-item,
body[data-ap-layout="animalispro"] .dog--female .dog-steckbrief-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-ap-layout="animalispro"] .dog-steckbrief-label,
body[data-ap-layout="animalispro"] .dog--male .dog-steckbrief-label,
body[data-ap-layout="animalispro"] .dog--female .dog-steckbrief-label {
    color: var(--text-muted, #CDBFEA) !important;
}
body[data-ap-layout="animalispro"] .dog-steckbrief-value,
body[data-ap-layout="animalispro"] .dog--male .dog-steckbrief-value,
body[data-ap-layout="animalispro"] .dog--female .dog-steckbrief-value {
    color: var(--text-main, #F5F0FF) !important;
}

/* Dog cards in browse views */
body[data-ap-layout="animalispro"] .dog-card[data-gender],
body[data-ap-layout="animalispro"] .dog-gender-card[data-gender] {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30) !important;
    color: var(--text-main, #F5F0FF) !important;
}
body[data-ap-layout="animalispro"] .dog-card[data-gender="male"],
body[data-ap-layout="animalispro"] .dog-gender-card[data-gender="male"] {
    background: rgba(90, 184, 255, 0.06) !important;
    border-color: rgba(90, 184, 255, 0.20) !important;
}
body[data-ap-layout="animalispro"] .dog-card[data-gender="female"],
body[data-ap-layout="animalispro"] .dog-gender-card[data-gender="female"] {
    background: rgba(217, 119, 255, 0.06) !important;
    border-color: rgba(217, 119, 255, 0.20) !important;
}