/* Admin-Only Navigation Elements Styles */

/* Base admin-only styling */
.admin-only {
    display: none !important;
}

.admin-only.show {
    display: block !important;
}

.admin-only.show-flex {
    display: flex !important;
}

.admin-only.show-inline {
    display: inline !important;
}

.admin-only.show-inline-block {
    display: inline-block !important;
}

/* Admin menu item specific styling */
.admin-menu-item {
    display: none !important;
}

.admin-menu-item.show {
    display: block !important;
}

/* Admin navigation highlighting */
.admin-only a,
.admin-menu-item a {
    position: relative;
}

.admin-only a::after,
.admin-menu-item a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.admin-only:hover a::after,
.admin-menu-item:hover a::after {
    opacity: 1;
}

/* Admin badge for navigation items */
.admin-badge {
    display: inline-block;
    background: linear-gradient(45deg, #ffd700, #ffa500);
    color: #333;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Loading state for admin elements */
.admin-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .admin-only {
        margin-bottom: 2px;
    }
}

/* Animation for showing admin elements */
@keyframes fadeInAdmin {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-only.animate-show {
    animation: fadeInAdmin 0.3s ease-out;
}

/* Focus styles for accessibility */
.admin-only a:focus,
.admin-menu-item a:focus {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

/* Dark mode support */
[data-theme="dark"] .admin-only a::after,
[data-theme="dark"] .admin-menu-item a::after {
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.15));
}

/* ============================================================
   LIGHT MODE FIXES (.active-dark-mode = light/white theme)
   The template sets body color to white in light mode.
   These overrides ensure profile pics, names, sidebar text,
   and panel elements are visible on all dashboard pages.
   ============================================================ */

/* --- User Name: visible dark text in light mode --- */
.active-dark-mode .user-name {
    color: #1f2937 !important;
}

/* --- User Photo / Author Image: ensure profile pics show --- */
.active-dark-mode .author-img {
    background: #e5e7eb;
    border: 2px solid #d1d5db;
}
.active-dark-mode .author-img img.user-photo {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Header Admin Card: dark text for user name in header --- */
.active-dark-mode .rbt-admin-card a,
.active-dark-mode .rbt-admin-card a .user-name {
    color: #1f2937 !important;
}
.active-dark-mode .rbt-admin-card a .author-img {
    border: 2px solid #d1d5db;
}

/* --- Left Sidebar Panel: readable text on light background --- */
.active-dark-mode .rbt-left-panel .rbt-default-sidebar-list li a {
    color: #374151;
}
.active-dark-mode .rbt-left-panel .rbt-default-sidebar-list li a:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}
.active-dark-mode .rbt-left-panel .rbt-default-sidebar-list li a span {
    color: #374151;
}
.active-dark-mode .rbt-left-panel .rbt-default-sidebar-list li a:hover span {
    color: #6366f1;
}
.active-dark-mode .rbt-left-panel .rbt-default-sidebar-list li a i {
    color: #6b7280;
}

/* --- Subscription Box (sidebar bottom): user name and photo --- */
.active-dark-mode .subscription-box .user-name {
    color: #1f2937 !important;
}
.active-dark-mode .subscription-box .autor-info {
    color: #374151;
}
.active-dark-mode .subscription-box .inner .autor-info .author-img {
    border: 2px solid #d1d5db;
    background: #e5e7eb;
}

/* --- Sidebar copyright text --- */
.active-dark-mode .subscription-copyright {
    color: #6b7280 !important;
}
.active-dark-mode .subscription-copyright a {
    color: #6366f1 !important;
}

/* --- Right Side Panel: user info visible --- */
.active-dark-mode .rbt-right-side-panel {
    border-left-color: #e5e7eb !important;
}
.active-dark-mode .rbt-right-side-panel .right-side-top {
    border-bottom-color: #e5e7eb !important;
}
.active-dark-mode .rbt-right-side-panel .user-name,
.active-dark-mode .rbt-right-side-panel .user-email,
.active-dark-mode #user-info-panel .user-name {
    color: #1f2937 !important;
}
.active-dark-mode .rbt-right-side-panel .user-email,
.active-dark-mode #user-info-panel .user-email {
    color: #6b7280 !important;
}
.active-dark-mode #user-info-panel .author-img {
    border: 2px solid #d1d5db;
    background: #e5e7eb;
}

/* --- Sidebar expand/toggle buttons --- */
.active-dark-mode .expand-btn-grp button {
    color: #374151;
    border-color: #e5e7eb;
}

/* --- Dashboard page title & settings area --- */
.active-dark-mode .settings-area .title {
    color: #1f2937 !important;
}

/* --- Sign-in / Sign-out buttons in panels --- */
.active-dark-mode #signout-btn,
.active-dark-mode #signin-btn {
    color: #374151;
    border-color: #d1d5db;
}
.active-dark-mode #signout-btn:hover,
.active-dark-mode #signin-btn:hover {
    background: #f3f4f6;
}

/* --- Mobile menu: dark text on light background --- */
.active-dark-mode .popup-mobile-menu .mainmenu li a {
    color: #374151;
}
.active-dark-mode .popup-mobile-menu .mainmenu li a:hover {
    color: #6366f1;
}

/* --- General text color inheritance fix --- */
.active-dark-mode .rbt-main-content,
.active-dark-mode .rbt-dashboard-content,
.active-dark-mode .rbt-daynamic-page-content {
    color: #374151;
}

/* --- Theme switcher text in sidebar --- */
.active-dark-mode .my_switcher-3 ul li a .text {
    color: #6b7280;
}
.active-dark-mode .my_switcher-3 ul li a.active .text {
    color: #fff;
}

/* --- Rainbow badge cards in sidebar --- */
.active-dark-mode .rainbow-badge-card {
    color: #fff;
}

/* --- Right panel user info (ID-based, used on support/booking pages) --- */
.active-dark-mode #user-display-name {
    color: #1f2937 !important;
}
.active-dark-mode #user-email {
    color: #6b7280 !important;
}
.active-dark-mode #user-avatar {
    border: 2px solid #d1d5db;
}

/* --- Profile photo: ensure explicit dimensions so it never collapses --- */
.active-dark-mode .rbt-admin-card .author-img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}
.active-dark-mode .rbt-admin-card .author-img img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover;
    border-radius: 50%;
}

/* --- Broad fix: ensure inherited text is dark in all panels --- */
.active-dark-mode .rbt-left-panel,
.active-dark-mode .rbt-right-side-panel,
.active-dark-mode .rbt-panel-wrapper {
    color: #374151;
}

/* --- Form elements in light mode --- */
.active-dark-mode .form-control,
.active-dark-mode textarea,
.active-dark-mode input[type="text"],
.active-dark-mode input[type="email"] {
    color: #1f2937;
    background-color: #fff;
    border-color: #d1d5db;
}
.active-dark-mode .form-control::placeholder {
    color: #9ca3af;
}

/* --- Chat/message areas in light mode --- */
.active-dark-mode .chat-box-list .content,
.active-dark-mode .chat-box-list p {
    color: #374151;
}

/* --- Dropdown menus in light mode --- */
.active-dark-mode .submenu {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
}
.active-dark-mode .submenu li a span {
    color: #374151 !important;
}
.active-dark-mode .submenu li a:hover span {
    color: #6366f1 !important;
}

/* --- Header nav links in light mode --- */
.active-dark-mode .rbt-dashboard-header .mainmenu li a {
    color: #374151;
}
.active-dark-mode .rbt-dashboard-header .mainmenu li a:hover {
    color: #6366f1;
}

/* ============================================================
   LIGHT MODE FIXES FOR ADMIN & CUSTOM-STYLED PAGES
   Override dark-themed inline styles when .active-dark-mode
   (light theme) is active on body.
   ============================================================ */

/* --- Admin Container: ensure all text is dark --- */
.active-dark-mode .admin-container {
    color: #374151 !important;
}

/* --- Shared: Page Headers --- */
.active-dark-mode .page-header h1 {
    color: #1f2937 !important;
}
.active-dark-mode .page-header p {
    color: #6b7280 !important;
}

/* --- Shared: Stat Cards (admin-registrations, admin-checkin) --- */
.active-dark-mode .stat-card {
    background: #f5f3ff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .stat-label {
    color: #6b7280 !important;
}

/* --- Shared: Empty & Loading States --- */
.active-dark-mode .empty-state {
    color: #6b7280 !important;
}
.active-dark-mode .loading-spinner {
    color: #6b7280 !important;
}

/* --- Admin Registrations: Filters Bar --- */
.active-dark-mode .filters-bar {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .filter-group label {
    color: #6b7280 !important;
}
.active-dark-mode .filter-group select,
.active-dark-mode .filter-group input {
    background: #fff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

/* --- Admin Registrations: Table --- */
.active-dark-mode .registrations-table {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .table-header {
    background: #f5f3ff !important;
    border-bottom-color: #e5e7eb !important;
    color: #6b7280 !important;
}
.active-dark-mode .table-row {
    border-bottom-color: #f3f4f6 !important;
    color: #374151 !important;
}
.active-dark-mode .table-row:hover {
    background: #f9fafb !important;
}
.active-dark-mode .child-details h6 {
    color: #1f2937 !important;
}
.active-dark-mode .child-details p {
    color: #6b7280 !important;
}
.active-dark-mode .session-pill {
    background: #f5f3ff !important;
    border-color: #c4b5fd !important;
    color: #6366f1 !important;
}
.active-dark-mode .btn-action {
    background: #f5f3ff !important;
    border-color: #c4b5fd !important;
    color: #6366f1 !important;
}
.active-dark-mode .btn-action:hover {
    background: #ede9fe !important;
    border-color: #a78bfa !important;
}
.active-dark-mode .credit-info {
    color: #6b7280 !important;
}
.active-dark-mode .amount-muted {
    color: #9ca3af !important;
}

/* --- Admin Registrations: Detail Modal --- */
.active-dark-mode .modal-content {
    background: #fff !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}
.active-dark-mode .modal-close {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.active-dark-mode .modal-close:hover {
    background: #e5e7eb !important;
}
.active-dark-mode .modal-content h3 {
    color: #1f2937 !important;
}
.active-dark-mode .modal-section h5 {
    color: #6b7280 !important;
}
.active-dark-mode .modal-field {
    border-bottom-color: #f3f4f6 !important;
    color: #374151 !important;
}
.active-dark-mode .modal-field .label {
    color: #6b7280 !important;
}
.active-dark-mode .modal-field .value {
    color: #1f2937 !important;
}
.active-dark-mode .modal-credit-bar {
    background: #e5e7eb !important;
}
.active-dark-mode .modal-sessions-list div {
    border-bottom-color: #f3f4f6 !important;
    color: #374151 !important;
}

/* --- Admin Check-In: Date Navigation --- */
.active-dark-mode .date-nav-btn {
    border-color: #d1d5db !important;
    background: #fff !important;
    color: #374151 !important;
}
.active-dark-mode .date-nav-btn:hover {
    background: #f5f3ff !important;
    border-color: #a78bfa !important;
    color: #6366f1 !important;
}
.active-dark-mode .date-display {
    border-color: #d1d5db !important;
    background: #fff !important;
    color: #1f2937 !important;
}
.active-dark-mode .date-display:hover {
    border-color: #a78bfa !important;
    background: #f5f3ff !important;
}
.active-dark-mode .date-display .day-label {
    color: #6b7280 !important;
}

/* --- Admin Check-In: Quick Date Buttons --- */
.active-dark-mode .quick-date-btn {
    border-color: #d1d5db !important;
    background: #fff !important;
    color: #374151 !important;
}
.active-dark-mode .quick-date-btn:hover {
    background: #f5f3ff !important;
    border-color: #a78bfa !important;
    color: #6366f1 !important;
}
.active-dark-mode .quick-date-btn.active {
    color: #fff !important;
}

/* --- Admin Check-In: Session Selector --- */
.active-dark-mode .session-selector {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .session-selector label {
    color: #6b7280 !important;
}
.active-dark-mode .session-selector select,
.active-dark-mode .session-selector input[type="text"] {
    background: #fff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

/* --- Admin Check-In: Roster --- */
.active-dark-mode .roster-card {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .roster-item {
    border-bottom-color: #f3f4f6 !important;
}
.active-dark-mode .roster-item:hover {
    background: #f9fafb !important;
}
.active-dark-mode .roster-item.checked-in {
    background: rgba(16, 185, 129, 0.06) !important;
}
.active-dark-mode .roster-info h6 {
    color: #1f2937 !important;
}
.active-dark-mode .roster-info p {
    color: #6b7280 !important;
}

/* --- Admin Check-In: Progress Bar --- */
.active-dark-mode .progress-bar-wrap {
    background: #e5e7eb !important;
}

/* --- Select Class: Main Content Background --- */
.active-dark-mode .rbt-main-content {
    background: #f8fafc !important;
}

/* --- Select Class: Section Headers --- */
.active-dark-mode .section-title {
    color: #1f2937 !important;
}
.active-dark-mode .section-description {
    color: #6b7280 !important;
}

/* --- Select Class: Quick Actions --- */
.active-dark-mode .quick-action {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .quick-action:hover {
    background: #f9fafb !important;
    border-color: #a78bfa !important;
}
.active-dark-mode .quick-action-title {
    color: #1f2937 !important;
}
.active-dark-mode .quick-action-desc {
    color: #6b7280 !important;
}

/* --- Select Class: Training Cards --- */
.active-dark-mode .training-card {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .training-card:hover {
    background: #f9fafb !important;
    border-color: #a78bfa !important;
}
.active-dark-mode .card-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08)) !important;
    border-bottom-color: #e5e7eb !important;
}

/* --- Select Class: Card Content Text --- */
.active-dark-mode .card-title {
    color: #1f2937 !important;
}
.active-dark-mode .card-subtitle {
    color: #6366f1 !important;
}
.active-dark-mode .card-description {
    color: #6b7280 !important;
}
.active-dark-mode .card-feature {
    color: #374151 !important;
}
.active-dark-mode .card-age-badge {
    color: #fff !important;
}

/* --- Youth Training Pages: Age Cards --- */
.active-dark-mode .age-card {
    background: #f5f3ff !important;
    border-color: #c4b5fd !important;
}
.active-dark-mode .age-card h5 {
    color: #1f2937 !important;
}
.active-dark-mode .badge-pos {
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}

/* --- Youth Training Pages: Profile Cards --- */
.active-dark-mode .profile-card {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.active-dark-mode .profile-card:hover {
    background: #f9fafb !important;
    border-color: #a78bfa !important;
}
.active-dark-mode .profile-info h6 {
    color: #1f2937 !important;
}
.active-dark-mode .profile-meta {
    color: #6b7280 !important;
}
.active-dark-mode .profile-detail-item {
    border-bottom-color: #f3f4f6 !important;
    color: #374151 !important;
}
.active-dark-mode .profile-detail-label {
    color: #6b7280 !important;
}
.active-dark-mode .profile-detail-value {
    color: #1f2937 !important;
}
.active-dark-mode .btn-profile-action {
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.active-dark-mode .btn-profile-action:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* --- Youth Training Pages: FAQ Items --- */
.active-dark-mode .faq-item {
    border-color: #e5e7eb !important;
}
.active-dark-mode .faq-item:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* --- Youth Training Pages: Dropdown Selects --- */
.active-dark-mode #sessionChild,
.active-dark-mode #subscriptionChild,
.active-dark-mode #dropinSession,
.active-dark-mode #packageSession,
.active-dark-mode #childExperience {
    background-color: #fff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* --- Gradient Headers: Preserve white text on colored backgrounds --- */
.active-dark-mode .forum-header,
.active-dark-mode .forum-header h1,
.active-dark-mode .forum-header p,
.active-dark-mode .forum-header span,
.active-dark-mode .forum-header strong,
.active-dark-mode .support-header,
.active-dark-mode .support-header h1,
.active-dark-mode .support-header p,
.active-dark-mode .support-header span,
.active-dark-mode .admin-header,
.active-dark-mode .admin-header h1,
.active-dark-mode .admin-header p,
.active-dark-mode .admin-header span,
.active-dark-mode .bookings-header,
.active-dark-mode .bookings-header h1,
.active-dark-mode .bookings-header p,
.active-dark-mode .bookings-header span,
.active-dark-mode .volunteer-header,
.active-dark-mode .volunteer-header h1,
.active-dark-mode .volunteer-header p,
.active-dark-mode .volunteer-header span {
    color: white !important;
}

/* --- Admin Schedule: Active Tab Count Badge --- */
.active-dark-mode .schedule-tab.active .tab-count {
    color: #fff !important;
}

/* --- Youth Training: Selected Session Details (light mode) --- */
.active-dark-mode #packageDetailsContent,
.active-dark-mode #dropinDetailsContent {
    color: #1e293b !important;
}
.active-dark-mode #packageDetailsContent strong,
.active-dark-mode #dropinDetailsContent strong {
    color: #1e293b !important;
}