/* Dark Theme Styles for ChurchMusician2025 */
/* Applied when body has class "dark-theme" */

:root {
    /* Light theme defaults (CSS custom properties) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --text-primary: #344767;
    --text-secondary: #7b809a;
    --text-muted: #8392ab;
    --border-color: #dee2e6;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --input-bg: #ffffff;
    --input-border: #d2d6da;
    --table-stripe: #f8f9fa;
    --dropdown-bg: #ffffff;
    --modal-bg: #ffffff;
    --tooltip-bg: #344767;
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
}

/* Dark theme overrides */
body.dark-theme {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #1f1f38;
    --bg-sidebar: #0f0f1a;
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-color: #3f3f46;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --input-bg: #27272a;
    --input-border: #3f3f46;
    --table-stripe: #27272a;
    --dropdown-bg: #1f1f38;
    --modal-bg: #1f1f38;
    --tooltip-bg: #3f3f46;
    --scrollbar-track: #27272a;
    --scrollbar-thumb: #52525b;
}

/* Apply dark theme styles */
body.dark-theme {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Main content area */
body.dark-theme .main-content {
    background-color: var(--bg-primary);
}

/* Cards */
body.dark-theme .card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-color);
}

body.dark-theme .card-header {
    background-color: var(--bg-card);
    border-bottom-color: var(--border-color);
}

body.dark-theme .card-footer {
    background-color: var(--bg-card);
    border-top-color: var(--border-color);
}

/* Sidebar */
body.dark-theme .sidenav {
    background-color: var(--bg-sidebar) !important;
}

body.dark-theme .sidenav .navbar-nav .nav-link {
    color: var(--text-secondary);
}

body.dark-theme .sidenav .navbar-nav .nav-link:hover,
body.dark-theme .sidenav .navbar-nav .nav-link.active {
    color: var(--text-primary);
}

body.dark-theme .sidenav .sidenav-header {
    border-bottom-color: var(--border-color);
}

/* Navbar */
body.dark-theme .navbar {
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border-color);
}

body.dark-theme .navbar .nav-link {
    color: var(--text-secondary);
}

/* Typography */
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3,
body.dark-theme h4, body.dark-theme h5, body.dark-theme h6,
body.dark-theme .h1, body.dark-theme .h2, body.dark-theme .h3,
body.dark-theme .h4, body.dark-theme .h5, body.dark-theme .h6 {
    color: var(--text-primary);
}

body.dark-theme p {
    color: var(--text-secondary);
}

body.dark-theme .text-dark {
    color: var(--text-primary) !important;
}

body.dark-theme .text-secondary {
    color: var(--text-secondary) !important;
}

body.dark-theme .text-muted {
    color: var(--text-muted) !important;
}

/* Tables */
body.dark-theme .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-theme .table thead th {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-theme .table tbody tr {
    border-color: var(--border-color);
}

body.dark-theme .table tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}

body.dark-theme .table-hover tbody tr:hover {
    background-color: var(--bg-secondary);
}

/* DataTables specific */
body.dark-theme .dataTables_wrapper {
    color: var(--text-primary);
}

body.dark-theme .dataTables_filter input,
body.dark-theme .dataTables_length select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

body.dark-theme .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
}

body.dark-theme .dataTables_paginate .paginate_button.current {
    background: linear-gradient(195deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
}

/* Forms */
body.dark-theme .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

body.dark-theme .form-control:focus {
    background-color: var(--input-bg);
    border-color: #667eea;
    color: var(--text-primary);
}

body.dark-theme .form-control::placeholder {
    color: var(--text-muted);
}

body.dark-theme .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

body.dark-theme .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

body.dark-theme .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--input-border);
    color: var(--text-secondary);
}

body.dark-theme label {
    color: var(--text-secondary);
}

/* Buttons */
body.dark-theme .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

body.dark-theme .btn-outline-secondary:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-theme .btn-light {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dropdowns */
body.dark-theme .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-color);
}

body.dark-theme .dropdown-item {
    color: var(--text-secondary);
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-theme .dropdown-divider {
    border-color: var(--border-color);
}

/* Modals */
body.dark-theme .modal-content {
    background-color: var(--modal-bg);
    border-color: var(--border-color);
}

body.dark-theme .modal-header {
    border-bottom-color: var(--border-color);
}

body.dark-theme .modal-footer {
    border-top-color: var(--border-color);
}

body.dark-theme .modal-title {
    color: var(--text-primary);
}

body.dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Alerts */
body.dark-theme .alert {
    border-color: var(--border-color);
}

body.dark-theme .alert-light {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Badges */
body.dark-theme .badge.bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* List groups */
body.dark-theme .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-theme .list-group-item:hover {
    background-color: var(--bg-secondary);
}

/* Breadcrumbs */
body.dark-theme .breadcrumb {
    background-color: transparent;
}

body.dark-theme .breadcrumb-item a {
    color: var(--text-secondary);
}

body.dark-theme .breadcrumb-item.active {
    color: var(--text-primary);
}

/* Progress bars */
body.dark-theme .progress {
    background-color: var(--bg-secondary);
}

/* Tooltips */
body.dark-theme .tooltip-inner {
    background-color: var(--tooltip-bg);
}

/* Popovers */
body.dark-theme .popover {
    background-color: var(--modal-bg);
    border-color: var(--border-color);
}

body.dark-theme .popover-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-theme .popover-body {
    color: var(--text-secondary);
}

/* Scrollbar */
body.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-theme ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

body.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

body.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #71717a;
}

/* Calendar (FullCalendar) */
body.dark-theme .fc {
    --fc-page-bg-color: var(--bg-card);
    --fc-neutral-bg-color: var(--bg-secondary);
    --fc-border-color: var(--border-color);
    --fc-button-bg-color: var(--bg-secondary);
    --fc-button-border-color: var(--border-color);
    --fc-button-text-color: var(--text-primary);
    --fc-today-bg-color: rgba(102, 126, 234, 0.1);
}

body.dark-theme .fc-theme-standard td,
body.dark-theme .fc-theme-standard th {
    border-color: var(--border-color);
}

body.dark-theme .fc-col-header-cell {
    background-color: var(--bg-secondary);
}

/* Pagination */
body.dark-theme .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-theme .page-link:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-theme .page-item.active .page-link {
    background: linear-gradient(195deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
}

body.dark-theme .page-item.disabled .page-link {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

/* Accordions */
body.dark-theme .accordion-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-theme .accordion-button {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

body.dark-theme .accordion-button:not(.collapsed) {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-theme .accordion-button::after {
    filter: invert(1);
}

/* Tabs */
body.dark-theme .nav-tabs {
    border-bottom-color: var(--border-color);
}

body.dark-theme .nav-tabs .nav-link {
    color: var(--text-secondary);
}

body.dark-theme .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
}

body.dark-theme .nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
    color: var(--text-primary);
}

/* Code blocks */
body.dark-theme pre, body.dark-theme code {
    background-color: var(--bg-secondary);
    color: #e879f9;
}

/* Horizontal rules */
body.dark-theme hr {
    border-color: var(--border-color);
    opacity: 0.5;
}

/* Icons adjustment */
body.dark-theme .icon-shape {
    box-shadow: 0 4px 6px var(--shadow-color);
}

/* SweetAlert2 dark theme */
body.dark-theme .swal2-popup {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

body.dark-theme .swal2-title {
    color: var(--text-primary);
}

body.dark-theme .swal2-html-container {
    color: var(--text-secondary);
}

body.dark-theme .swal2-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* Toast notifications */
body.dark-theme .toast {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-theme .toast-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-theme .toast-body {
    color: var(--text-secondary);
}

/* Material Dashboard specific overrides */
body.dark-theme .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

body.dark-theme .bg-white {
    background-color: var(--bg-card) !important;
}

body.dark-theme .shadow-sm {
    box-shadow: 0 .125rem .25rem var(--shadow-color) !important;
}

body.dark-theme .shadow {
    box-shadow: 0 .5rem 1rem var(--shadow-color) !important;
}

body.dark-theme .shadow-lg {
    box-shadow: 0 1rem 3rem var(--shadow-color) !important;
}

body.dark-theme .border {
    border-color: var(--border-color) !important;
}

body.dark-theme .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

body.dark-theme .border-top {
    border-top-color: var(--border-color) !important;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    body.dark-theme *,
    body.dark-theme *::before,
    body.dark-theme *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Theme transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.reduced-motion,
body.reduced-motion * {
    transition: none !important;
    animation: none !important;
}

/* Font size preferences */
body.font-small {
    font-size: 14px;
}

body.font-normal {
    font-size: 16px;
}

body.font-large {
    font-size: 18px;
}