/* Dark Mode Styles */
:root {
    /* Light Mode Variables */
    --bs-body-tertiary: #f8f9fa; /* Light gray for header/footer in light mode */
    --bs-body-secondary: #e9ecef; /* Slightly darker gray for elements like footer bottom */
    --bs-body-bg-light: #f0f2f5; /* Softer page background */
    --bs-body-color-light: #212529; /* Default text color */
    --bs-border-color-light: #dee2e6; /* Default border color */
    --card-bg-light: #ffffff; /* Card background */
    --card-header-bg-light: rgba(0, 0, 0, 0.03); /* Card header background */
    --list-group-item-bg-light: #ffffff; /* List item background */
    --list-group-item-color-light: #212529; /* List item text color */
    --list-group-item-hover-bg-light: #f5f5f5; /* Lighter hover background */
    --list-group-item-active-bg-light: #0d6efd; /* Active list item background */
    --link-hover-bg: var(--list-group-item-hover-bg-light); /* General link hover background */
    --list-group-item-active-color-light: #fff; /* Active list item text color */
    --alert-danger-bg-light: #f8d7da;
    --alert-danger-color-light: #58151a;
    --alert-success-bg-light: #d1e7dd;
    --alert-success-color-light: #0f5132;
    --alert-info-bg-light: #cff4fc;
    --alert-info-color-light: #055160;
    --alert-warning-bg-light: #fff3cd;
    --alert-warning-color-light: #664d03;
    --text-muted-light: #6c757d; /* Muted text color */
    --bg-light-light: #f8f9fa; /* .bg-light class background */
    --sortable-ghost-bg-light: #cfe2ff; /* Sortable.js ghost element background */
    --pre-bg-light: #f8f9fa; /* <pre> tag background */
    --pre-color-light: #212529; /* <pre> tag text color */

    /* Dark Mode Variables */
    --bs-body-bg-dark: #18191a; /* Softer dark background */
    --bs-body-color-dark: #d1d5db; /* Less intense light text color */
    --bs-border-color-dark: #3a3b3c; /* Softer border color */
    --card-bg-dark: #242526; /* Softer dark card background */
    --card-header-bg-dark: #3a3b3c; /* Lighter card header */
    --list-group-item-bg-dark: #242526; /* List item background */
    --list-group-item-color-dark: #d1d5db; /* List item text color */
    --list-group-item-hover-bg-dark: #3a3b3c; /* Clearer hover background */
    --list-group-item-active-bg-dark: #20c997; /* Active list item background */
    --link-hover-bg-dark: #495057;
    --list-group-item-active-color-dark: #fff; /* Active list item text color */
    --alert-danger-bg-dark: #2c191b;
    --alert-danger-color-dark: #f5c2c7;
    --alert-success-bg-dark: #14261d;
    --alert-success-color-dark: #badbcc;
    --alert-info-bg-dark: #132d33;
    --alert-info-color-dark: #b6effb;
    --alert-warning-bg-dark: #332701;
    --alert-warning-color-dark: #ffecb5;
    --text-muted-dark: #adb5bd; /* Lighter muted text */
    --bg-light-dark: #3a3b3c; /* .bg-light class background in dark mode */
    --sortable-ghost-bg-dark: #20c997; /* Sortable.js ghost element background */
    --pre-bg-dark: #1a1a1a; /* <pre> tag background */
    --pre-color-dark: #f8f9fa; /* <pre> tag text color */
    --hero-bg-dark: #2c3e50; /* Hero section background */
}

.card, .modal-content, .list-group-item {
    background-color: var(--list-group-item-bg-light);
    border-color: var(--bs-border-color-light);
    color: var(--list-group-item-color-light);
}

.card-header, .modal-header {
    background-color: var(--card-header-bg-light);
    border-bottom-color: var(--bs-border-color-light);
}

.card-footer, .modal-footer {
    background-color: var(--card-header-bg-light);
    border-top-color: var(--bs-border-color-light);
}

.table {
    color: var(--bs-body-color-light);
    border-color: var(--bs-border-color-light);
}

.text-muted {
    color: var(--text-muted-light) !important;
}

.bg-light {
    background-color: var(--bg-light-light) !important;
}

.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: var(--list-group-item-hover-bg-light);
}

/* Dark Mode */
[data-bs-theme="dark"] body {
    --bs-body-bg: var(--bs-body-bg-dark);
    --bs-body-color: var(--bs-body-color-dark);
    --bs-border-color: var(--bs-border-color-dark);
    --bs-body-tertiary: var(--card-bg-dark); /* Header/Footer background in dark mode */
    --bs-body-secondary: #1a1a1a; /* Footer bottom background in dark mode */
    --bs-tertiary-bg: #2c2c2c;
    --link-hover-bg: var(--list-group-item-hover-bg-dark);
    background-color: var(--bs-body-bg-dark);
    color: var(--bs-body-color-dark);
    --bs-primary: #20c997;
}

[data-bs-theme="dark"] a {
    color: inherit;
}

[data-bs-theme="dark"] a:hover {
    /* يمكنك تغيير هذا اللون إلى أي لون تفضله عند مرور الفأرة */
    color: #ffffff; 
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--list-group-item-bg-dark);
    color: var(--list-group-item-color-dark);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-footer {
    background-color: var(--card-header-bg-dark);
}

[data-bs-theme="dark"] .text-muted {
    color: var(--text-muted-dark) !important;
}

/* Override Bootstrap's default dark text color for links inside list items */
[data-bs-theme="dark"] .list-group-item a {
    color: var(--bs-body-color-dark);
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bg-light-dark) !important;
}

[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
    background-color: var(--list-group-item-hover-bg-dark);
}

[data-bs-theme="dark"] .alert-danger { background-color: var(--alert-danger-bg-dark); color: var(--alert-danger-color-dark); border-color: #5f2125; }
[data-bs-theme="dark"] .alert-success { background-color: var(--alert-success-bg-dark); color: var(--alert-success-color-dark); border-color: #1c4b27; }
[data-bs-theme="dark"] .alert-info { background-color: var(--alert-info-bg-dark); color: var(--alert-info-color-dark); border-color: #174d56; }
[data-bs-theme="dark"] .alert-warning { background-color: var(--alert-warning-bg-dark); color: var(--alert-warning-color-dark); border-color: #6b5312; }
[data-bs-theme="dark"] .sortable-ghost { background-color: var(--sortable-ghost-bg-dark); }
[data-bs-theme="dark"] pre { background-color: var(--pre-bg-dark); color: var(--pre-color-dark); }

/* --- Custom Scrollbar for WebKit Browsers (Chrome, Safari, Edge) --- */
/* This ensures a consistent scrollbar width in both light and dark modes */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Light Mode Scrollbar */
::-webkit-scrollbar-track {
    background: var(--bs-body-bg-light);
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
    border: 2px solid var(--bs-body-bg-light);
}
::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

/* Dark Mode Scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bs-body-bg-dark);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #555;
    border: 2px solid var(--bs-body-bg-dark);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}

/* Convert solid buttons in file page footer to outline buttons in dark mode */
[data-bs-theme="dark"] .footer-button-group .btn-primary { background-color: transparent; border-color: var(--bs-primary); color: var(--bs-primary); }
[data-bs-theme="dark"] .footer-button-group .btn-secondary { background-color: transparent; border-color: var(--bs-secondary); color: var(--bs-secondary); }
[data-bs-theme="dark"] .footer-button-group .btn-success { background-color: transparent; border-color: var(--bs-success); color: var(--bs-success); }
[data-bs-theme="dark"] .footer-button-group .btn-danger { background-color: transparent; border-color: var(--bs-danger); color: var(--bs-danger); }
[data-bs-theme="dark"] .footer-button-group .btn-warning { background-color: transparent; border-color: var(--bs-warning); color: var(--bs-warning); }
[data-bs-theme="dark"] .footer-button-group .btn-info { background-color: transparent; border-color: var(--bs-info); color: var(--bs-info); }

/* Hover styles for the new outline buttons in dark mode */
[data-bs-theme="dark"] .footer-button-group .btn-primary:hover { background-color: var(--bs-primary); color: #fff; }
[data-bs-theme="dark"] .footer-button-group .btn-secondary:hover { background-color: var(--bs-secondary); color: #fff; }
[data-bs-theme="dark"] .footer-button-group .btn-success:hover { background-color: var(--bs-success); color: #fff; }
[data-bs-theme="dark"] .footer-button-group .btn-danger:hover { background-color: var(--bs-danger); color: #fff; }
[data-bs-theme="dark"] .footer-button-group .btn-warning:hover { background-color: var(--bs-warning); color: #000; }
[data-bs-theme="dark"] .footer-button-group .btn-info:hover { background-color: var(--bs-info); color: #000; }

/* Logo switching for dark mode */
[data-bs-theme='light'] .light-logo {
    display: inline-block;
}

[data-bs-theme='light'] .dark-logo {
    display: none;
}

[data-bs-theme='dark'] .light-logo {
    display: none;
}

[data-bs-theme='dark'] .dark-logo {
    display: inline-block;
}

[data-bs-theme="dark"] .hero-section {
    background-color: var(--hero-bg-dark);
}

/* PWA Install Prompt Styles */
.pwa-install-prompt-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    display: flex;
    justify-content: center;
    z-index: 1050;
    pointer-events: none;
}

.pwa-install-prompt-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
    pointer-events: auto;
    background-color: var(--card-bg-light);
    border: 1px solid var(--bs-border-color-light);
}

.pwa-install-prompt-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.pwa-install-prompt-text {
    flex-grow: 1;
}
.pwa-install-prompt-text strong {
    display: block;
    font-size: 1rem;
}
.pwa-install-prompt-text span {
    font-size: 0.85rem;
    color: var(--text-muted-light);
}

.pwa-install-prompt-buttons {
    display: flex;
    gap: 0.5rem;
}

[data-bs-theme="dark"] .pwa-install-prompt-content {
    background-color: var(--card-bg-dark);
    border-color: var(--bs-border-color-dark);
}

[data-bs-theme="dark"] .pwa-install-prompt-text span {
    color: var(--text-muted-dark);
}