/* Custom styles for Gestor de Asignaciones */

/* Theme and Font Size Variables */
:root {
    /* Base colors */
    --primary-color: #F57C00;
    --primary-hover: #E65100;
    --neutral-bg: #FAFAFA;
    --neutral-light: #ECECEC;
    --neutral-dark: #333;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --error-color: #dc3545;
    --success-color: #28a745;
    --border-radius: 10px;
    --transition-speed: 0.3s;

    /* Default theme colors (light) */
    --bg-color: #FFFFFF;
    --text-color: #333333;
    --card-bg: #FFFFFF;
    --card-border: #ECECEC;
    --input-bg: #FFFFFF;
    --input-border: #ECECEC;
    --input-text: #333333;
    --sidebar-bg: #343a40;
    --sidebar-color: #FFFFFF;
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-active: rgba(255, 255, 255, 0.2);

    /* Default font size */
    --base-font-size: 1rem;
    --small-font-size: 0.875rem;
    --large-font-size: 1.125rem;
    --xlarge-font-size: 1.25rem;
}

/* Theme Classes */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--base-font-size);
    transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease;
}

/* Light Theme (default) */
body.theme-light {
    --bg-color: #FFFFFF;
    --text-color: #333333;
    --card-bg: #FFFFFF;
    --card-border: #ECECEC;
    --input-bg: #FFFFFF;
    --input-border: #ECECEC;
    --input-text: #333333;

    /* Additional light theme variables */
    --modal-bg: #FFFFFF;
    --modal-header-bg: #F8F9FA;
    --modal-border: #ECECEC;
    --dropdown-bg: #FFFFFF;
    --dropdown-text: #333333;
    --dropdown-hover-bg: #F8F9FA;
    --dropdown-border: #ECECEC;
    --table-bg: #FFFFFF;
    --table-border: #ECECEC;
    --table-header-bg: #F8F9FA;
    --table-row-hover: #F8F9FA;
    --accordion-bg: #FFFFFF;
    --accordion-button-bg: #F8F9FA;
    --accordion-button-active-bg: #E9ECEF;
    --accordion-border: #ECECEC;
    --btn-default-bg: #F8F9FA;
    --btn-default-border: #ECECEC;
    --btn-default-text: #333333;
    --alert-bg-light: #F8F9FA;
    --alert-text-light: #333333;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Dark Theme */
body.theme-dark {
    --bg-color: #121212;
    --text-color: #FFFFFF;
    --card-bg: #1E1E1E;
    --card-border: #333333;
    --input-bg: #2D2D2D;
    --input-border: #444444;
    --input-text: #FFFFFF;
    --sidebar-bg: #1A1A1A;
    --sidebar-color: #FFFFFF;
    --sidebar-hover: rgba(255, 255, 255, 0.15);
    --sidebar-active: rgba(255, 255, 255, 0.25);
    --accent-color: #FF7A00;
    --border-color: #333333;
    --placeholder-color: #AAAAAA;
    --form-text-color: #CCCCCC;

    /* Semantic action colors */
    --primary-action: #FF7A00;
    --secondary-action: #757575;
    --info-action: #2196F3;
    --danger-action: #E53935;

    /* Typography */
    --title-color: #FFFFFF;
    --subtitle-color: #AAAAAA;
    --base-text-color: #CCCCCC;

    /* Panel and card variations */
    --panel-bg: #252525;
    --day-block-bg: #1A1A1A;

    /* Button states */
    --btn-focus-shadow: 0 0 0 3px rgba(255, 122, 0, 0.5);
    --btn-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

    /* Additional dark theme variables */
    --modal-bg: #1E1E1E;
    --modal-header-bg: #1E1E1E;
    --modal-border: #333333;
    --dropdown-bg: #1E1E1E;
    --dropdown-text: #F1F1F1;
    --dropdown-hover-bg: #333333;
    --dropdown-border: #444444;
    --table-bg: #1E1E1E;
    --table-border: #333333;
    --table-header-bg: #252525;
    --table-row-hover: #252525;
    --accordion-bg: #1E1E1E;
    --accordion-button-bg: #252525;
    --accordion-button-active-bg: #333333;
    --accordion-border: #333333;
    --btn-default-bg: #2D2D2D;
    --btn-default-border: #444444;
    --btn-default-text: #F1F1F1;
    --alert-bg-light: #252525;
    --alert-text-light: #F1F1F1;
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Sepia Theme */
body.theme-sepia {
    --bg-color: #F5EFE0;
    --text-color: #5F4B32;
    --card-bg: #FFF8E8;
    --card-border: #E8DCCA;
    --input-bg: #FFF8E8;
    --input-border: #E8DCCA;
    --input-text: #5F4B32;
    --sidebar-bg: #8C7B6B;
    --sidebar-color: #FFF8E8;
    --sidebar-hover: rgba(255, 248, 232, 0.15);
    --sidebar-active: rgba(255, 248, 232, 0.25);

    /* Additional sepia theme variables */
    --modal-bg: #FFF8E8;
    --modal-header-bg: #F5EFE0;
    --modal-border: #E8DCCA;
    --dropdown-bg: #FFF8E8;
    --dropdown-text: #5F4B32;
    --dropdown-hover-bg: #F5EFE0;
    --dropdown-border: #E8DCCA;
    --table-bg: #FFF8E8;
    --table-border: #E8DCCA;
    --table-header-bg: #F5EFE0;
    --table-row-hover: #F5EFE0;
    --accordion-bg: #FFF8E8;
    --accordion-button-bg: #F5EFE0;
    --accordion-button-active-bg: #E8DCCA;
    --accordion-border: #E8DCCA;
    --btn-default-bg: #F5EFE0;
    --btn-default-border: #E8DCCA;
    --btn-default-text: #5F4B32;
    --alert-bg-light: #F5EFE0;
    --alert-text-light: #5F4B32;
    --shadow-color: rgba(95, 75, 50, 0.1);
}

/* Theme Component Styling */
/* Apply theme variables to components */
/* Override table styling for dark theme */
body.theme-dark .table>:not(caption)>*>* {
    padding: .5rem .5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    border-bottom-width: var(--bs-border-width);
    background-color: transparent;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

.modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--text-color);
}

.modal-header {
    background-color: var(--modal-header-bg);
    border-color: var(--modal-border);
    color: var(--text-color);
}

.modal-footer {
    border-color: var(--modal-border);
    background-color: var(--modal-bg);
}

.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    color: var(--dropdown-text);
}

.dropdown-item {
    color: var(--dropdown-text);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--dropdown-hover-bg);
    color: var(--dropdown-text);
}

.table {
    color: var(--text-color);
    border-color: var(--table-border);
}

.table-hover tbody tr:hover {
    background-color: var(--table-row-hover);
    color: var(--text-color);
}

.table thead th {
    background-color: var(--table-header-bg);
    border-color: var(--table-border);
    color: var(--text-color);
}

.accordion {
    background-color: var(--accordion-bg);
    border-color: var(--accordion-border);
}

.accordion-button {
    background-color: var(--accordion-button-bg);
    color: var(--text-color);
    border-color: var(--accordion-border);
}

.accordion-button:not(.collapsed) {
    background-color: var(--accordion-button-active-bg);
    color: var(--text-color);
}

.accordion-button::after {
    filter: invert(var(--is-dark-theme, 0));
}

body.theme-dark .accordion-button::after {
    --is-dark-theme: 1;
}

.accordion-body {
    background-color: var(--accordion-bg);
    color: var(--text-color);
    border-color: var(--accordion-border);
}

.btn-light, .btn-outline-light {
    background-color: var(--btn-default-bg);
    border-color: var(--btn-default-border);
    color: var(--btn-default-text);
}

.alert-light {
    background-color: var(--alert-bg-light);
    color: var(--alert-text-light);
    border-color: var(--modal-border);
}

.form-control, .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

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

/* Additional components */
.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

.badge.bg-light {
    background-color: var(--btn-default-bg) !important;
    color: var(--btn-default-text);
}

.badge.bg-secondary {
    color: var(--text-color);
}

.nav-tabs {
    border-color: var(--card-border);
}

.nav-tabs .nav-link {
    color: var(--text-color);
}

.nav-tabs .nav-link.active {
    background-color: var(--accordion-button-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

.popover, .tooltip {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    color: var(--dropdown-text);
}

.popover-header {
    background-color: var(--modal-header-bg);
    border-color: var(--modal-border);
    color: var(--text-color);
}

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

/* Custom components specific to this app */
.login-form-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.login-footer {
    border-color: var(--card-border);
    color: var(--text-color);
}

.version-badge {
    background-color: var(--btn-default-bg);
    color: var(--btn-default-text);
}

.sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.action-menu-container {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--text-color);
}

.action-menu-header {
    border-color: var(--modal-border);
}

.action-menu-item {
    color: var(--text-color);
}

.action-menu-item:hover {
    background-color: var(--dropdown-hover-bg);
}

.day-header {
    background-color: var(--accordion-button-bg);
    color: var(--text-color);
}

.weekday-header, .weekend-header {
    background-color: var(--accordion-button-bg);
    color: var(--text-color);
}

/* Fix for Bootstrap components that might use hardcoded colors */
.bg-light {
    background-color: var(--card-bg) !important;
}

/* Fix for Bootstrap background utility classes with opacity modifiers */
.bg-info.bg-opacity-10,
.activity-card,
.guest-service-card {
    background-color: var(--card-bg) !important;
    border-left: 4px solid var(--primary-color);
}

.bg-success.bg-opacity-10,
.door-to-door-card {
    background-color: var(--card-bg) !important;
    border-left: 4px solid var(--success-color);
}

.bg-warning.bg-opacity-10,
.public-preaching-card {
    background-color: var(--card-bg) !important;
    border-left: 4px solid #ffc107;
}

.announcement-card {
    background-color: var(--card-bg) !important;
    border-left: 4px solid var(--primary-color);
}

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

/* Ensure proper contrast for links */
a {
    color: #4dabf7;
}

a:hover {
    color: #74c0fc;
}

/* Fix for code and pre elements */
code, pre {
    background-color: var(--accordion-button-bg);
    color: var(--text-color);
    border-color: var(--card-border);
}

/* Additional fixes for Bootstrap components in dark mode */
body.theme-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

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

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

/* Fix for spinners in dark mode */
body.theme-dark .spinner-border,
body.theme-dark .spinner-grow {
    border-color: var(--text-color);
    border-right-color: transparent;
}

/* Fix for Bootstrap icons in dark mode */
body.theme-dark .bi {
    filter: brightness(1.2);
}

/* Fix for placeholders in dark mode */
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder,
body.theme-dark select::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

/* Fix for form-text in dark mode */
body.theme-dark .form-text {
    color: var(--form-text-color) !important;
}

/* Fix for accordion-button text in dark mode */
body.theme-dark .accordion-button {
    color: var(--text-color);
}

/* Fix for table text in dark mode */
body.theme-dark .table {
    color: var(--text-color);
}

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

body.theme-dark .table td {
    color: var(--text-color);
}

/* Fix for Bootstrap alerts */
.alert {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

/* Fix for Bootstrap toasts */
.toast {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

.toast-header {
    background-color: var(--modal-header-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

/* Fix for Bootstrap pagination */
.pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Fix for Bootstrap progress bars */
.progress {
    background-color: var(--accordion-button-bg);
}

/* Fix for Bootstrap breadcrumbs */
.breadcrumb {
    background-color: var(--accordion-button-bg);
}

.breadcrumb-item {
    color: var(--text-color);
}

.breadcrumb-item.active {
    color: var(--text-color);
    opacity: 0.7;
}

/* App-specific components and overrides */
.app-loader {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.loader-spinner .spinner-circle {
    stroke: var(--primary-color);
}

.mobile-nav-toggle {
    color: var(--text-color);
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.sidebar-header {
    background-color: var(--sidebar-bg);
}

.public-nav-bar {
    background-color: var(--card-bg);
    box-shadow: 0 2px 10px var(--shadow-color);
}

.back-to-landing-btn {
    color: var(--text-color);
}

.public-nav-link {
    color: var(--text-color);
    opacity: 0.7;
}

.public-nav-link:hover, .public-nav-link:focus {
    color: var(--text-color);
    opacity: 1;
}

.reload-button, .scroll-top-button {
    box-shadow: 0 2px 10px var(--shadow-color);
}

.loading-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Theme settings modal specific styles */
.theme-preview {
    border-color: var(--card-border);
}

.theme-light-preview {
    background-color: #FFFFFF;
    border: 1px solid #ECECEC;
}

.theme-dark-preview {
    background-color: #121212;
    border: 1px solid #333333;
}

.theme-sepia-preview {
    background-color: #F5EFE0;
    border: 1px solid #E8DCCA;
}

.theme-option, .font-size-option {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.theme-option.active, .font-size-option.active {
    border-color: var(--primary-color);
    background-color: var(--accordion-button-bg);
}

.theme-name, .font-size-name {
    color: var(--text-color);
}

/* Fix for any hardcoded white backgrounds */
[style*="background-color: white"], 
[style*="background-color: #fff"], 
[style*="background-color: #ffffff"],
[style*="background-color:#fff"],
[style*="background-color:#ffffff"] {
    background-color: var(--card-bg) !important;
}

/* Fix for any hardcoded black text */
[style*="color: black"], 
[style*="color: #000"], 
[style*="color: #000000"],
[style*="color:#000"],
[style*="color:#000000"] {
    color: var(--text-color) !important;
}

/* Font Size Classes */
body.font-small {
    font-size: var(--small-font-size);
}

body.font-default {
    font-size: var(--base-font-size);
}

body.font-large {
    font-size: var(--large-font-size);
}

body.font-xlarge {
    font-size: var(--xlarge-font-size);
}

/* Font size scaling for all elements with explicit font sizes */
html {
    font-size: 16px; /* Base font size for rem units */
}

/* Define font scale factors */
:root {
    --font-scale: 1;
}

body.font-small {
    --font-scale: 0.875;
}

body.font-default {
    --font-scale: 1;
}

body.font-large {
    --font-scale: 1.125;
}

body.font-xlarge {
    --font-scale: 1.25;
}

/* Apply font scaling to text elements */
[class*="font-"] {
    transition: font-size 0.3s ease;
}

/* Apply font scaling to all text elements */
html {
    font-size: calc(16px * var(--font-scale, 1));
}

/* For elements with explicit --element-font-size */
[style*="--element-font-size"] {
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
}

/* For common text elements without explicit --element-font-size */
h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea, label, li, td, th, div, .card-title, .card-text, .btn, .nav-link, .dropdown-item, .form-label, .form-control, .modal-title {
    font-size: calc(var(--element-font-size, inherit) * var(--font-scale, 1));
}

/* Ensure Bootstrap classes scale properly */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: calc(var(--element-font-size, inherit) * var(--font-scale, 1));
}

.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
    font-size: calc(var(--element-font-size, inherit) * var(--font-scale, 1)) !important;
}

.lead, .small, .text-muted, .form-text {
    font-size: calc(var(--element-font-size, inherit) * var(--font-scale, 1));
}

/* Store original font sizes as custom properties */
.login-title { --element-font-size: 1.75rem; }
.login-footer { --element-font-size: 0.875rem; }
.version-badge { --element-font-size: 0.75rem; }
.form-control { --element-font-size: 1rem; }
.password-toggle { --element-font-size: 1.25rem; }
.btn-login { --element-font-size: 1rem; }
.error-message { --element-font-size: 0.875rem; }

/* Placeholder text scaling */
::placeholder {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1));
    color: var(--input-text);
    opacity: 0.7;
}

::-webkit-input-placeholder {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1));
    color: var(--input-text);
    opacity: 0.7;
}

::-moz-placeholder {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1));
    color: var(--input-text);
    opacity: 0.7;
}

:-ms-input-placeholder {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1));
    color: var(--input-text);
    opacity: 0.7;
}

:-moz-placeholder {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1));
    color: var(--input-text);
    opacity: 0.7;
}

/* Input and Select element scaling */
input, textarea, select, .form-control {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1)) !important;
    color: var(--input-text);
}

/* Accordion header scaling */
.accordion-header, .accordion-button {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1)) !important;
}

/* Ensure Bootstrap form elements scale properly */
.form-select, .form-control, .input-group-text {
    font-size: calc(var(--element-font-size, 1rem) * var(--font-scale, 1)) !important;
}
.accordion-header, .accordion-button { --element-font-size: 1rem; }
.sidebar-header .logo { --element-font-size: 1.2rem; }
.sidebar-link-text { --element-font-size: 1.2rem; }
.sidebar-dropdown-text { --element-font-size: 1.2rem; }
.sidebar-dropdown-item { --element-font-size: 1.2rem; }
.nav-text { --element-font-size: 0.9rem; }
.sidebar-footer { --element-font-size: 0.8rem; }
.sidebar-footer-text { --element-font-size: 0.95rem; }
.sidebar-user-name { --element-font-size: 0.9rem; }
.sidebar-user-email { --element-font-size: 1rem; }
.reload-button i { --element-font-size: 1.5rem; }
.theme-name, .font-size-name { --element-font-size: 0.9rem; }
.font-size-preview { --element-font-size: 1.5rem; }
.small-text { --element-font-size: 0.7em; }
.default-text { --element-font-size: 0.8em; }
.large-text { --element-font-size: 0.9em; }
.xlarge-text { --element-font-size: 1em; }
.scroll-top-button i { --element-font-size: 1.5rem; }
.card-title { --element-font-size: 1.25rem; }
.card-text { --element-font-size: 1rem; }
.btn { --element-font-size: 1rem; }
.display-5 { --element-font-size: 2.5rem; }
.lead { --element-font-size: 1.25rem; }
.modal-title { --element-font-size: 1.25rem; }
.form-label { --element-font-size: 1rem; }
.dropdown-item { --element-font-size: 1rem; }
.nav-link { --element-font-size: 1rem; }
.fs-5 { --element-font-size: 1.25rem; }
.fs-6 { --element-font-size: 1rem; }
.small { --element-font-size: 0.875rem; }
.form-text { --element-font-size: 0.875rem; }
.text-muted { --element-font-size: 0.875rem; }
.bi { --element-font-size: inherit; }
h1 { --element-font-size: 2.5rem; }
h2 { --element-font-size: 2rem; }
h3 { --element-font-size: 1.75rem; }
h4 { --element-font-size: 1.5rem; }
h5 { --element-font-size: 1.25rem; }
h6 { --element-font-size: 1rem; }
p { --element-font-size: 1rem; }
.spinner-text { --element-font-size: 1.2rem; }
.loading-message { --element-font-size: 1.1rem; }

/* Login Screen Styles */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Cover the entire viewport height */
    background-color: var(--neutral-bg);
    padding: 0;
    margin: 0; /* Remove margin to prevent any extra space */
}

.login-form-wrapper {
    width: 100%;
    max-width: 480px;
    animation: fadeIn 0.5s ease-in-out;
}

.login-form-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px var(--shadow-color);
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.login-header {
    padding: 1.5rem;
    background-color: var(--primary-color);
    color: white;
    text-align: center;
}

.login-title {
    font-size: calc(1.75rem * var(--font-scale, 1));
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-body {
    padding: 2rem;
}

.login-footer {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid var(--neutral-light);
    color: var(--neutral-dark);
    font-size: 0.875rem;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--neutral-light);
    border-radius: 1rem;
    font-size: 0.75rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--neutral-dark);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), 
                background-color var(--transition-speed), color var(--transition-speed);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.25);
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-control {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--neutral-dark);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: color var(--transition-speed);
}

.password-toggle:hover, 
.password-toggle:focus {
    color: var(--primary-color);
    outline: none;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    border-radius: 4px;
}

.btn-login {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-login:hover {
    background-color: var(--primary-hover);
}

.btn-login:active {
    transform: translateY(1px);
}

.btn-login:disabled {
    background-color: var(--neutral-light);
    cursor: not-allowed;
}

.btn-login:focus-visible {
    outline: 2px solid var(--primary-hover);
    outline-offset: 2px;
}

.error-message {
    color: var(--error-color);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    min-height: 1.25rem;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive styles */
@media (max-width: 576px) {
    .login-title {
        font-size: 1.5rem;
    }

    .login-body {
        padding: 2rem 1.5rem; /* Increased top padding for better spacing */
    }

    /* Increase spacing between form elements */
    .form-group {
        margin-bottom: 2rem; /* Further increased for better separation */
    }

    /* Add more space between input and error message */
    .error-message {
        margin-top: 0.75rem; /* Increased for better visual separation */
    }

    /* Ensure form controls are large enough for touch interaction */
    .form-control {
        padding: 0.75rem 1rem;
        font-size: 16px; /* Minimum font size to prevent zoom on iOS */
        height: auto;
        min-height: 48px; /* Increased to 48px for better touch targets */
    }

    .btn-login {
        padding: 0.75rem 1rem;
        min-height: 48px; /* Increased to 48px for better touch targets */
        font-size: 16px; /* Ensure consistent font size */
    }

    /* Ensure password toggle is properly sized for touch */
    .password-toggle {
        height: 48px; /* Match input height */
        width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Add padding to prevent form from sticking to screen edges */
    .login-form-wrapper {
        padding: 0 1.5rem; /* Increased horizontal padding */
    }

    /* Ensure login container has proper padding */
    .login-container {
        padding: 1rem 0; /* Add vertical padding */
    }
}

/* Sidebar Navigation Styles */
:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
    --sidebar-bg: #343a40;
    --sidebar-color: #fff;
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-active: rgba(255, 255, 255, 0.2);
    --sidebar-transition: all 0.3s ease;
    --main-transition: all 0.3s ease;
}

body {
    overflow-x: hidden;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-color);
    transition: width 0.3s ease, transform 0.3s ease, 
                background-color var(--transition-speed), color var(--transition-speed);
    z-index: 1040;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(0);
}

#sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

#sidebar .sidebar-header {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

#sidebar .sidebar-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sidebar-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}

#sidebar.collapsed .sidebar-header .logo-text {
    display: none;
}

#sidebar.collapsed .sidebar-header {
    position: relative;
    justify-content: center;
}

#sidebar.collapsed #sidebar-toggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

#sidebar .sidebar-menu {
    padding: 15px 0;
}

#sidebar .nav-item {
    margin: 5px 15px;
}

#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: var(--sidebar-color);
    border-radius: 5px;
    transition: var(--sidebar-transition);
}

#sidebar .nav-link:hover {
    background-color: var(--sidebar-hover);
}

#sidebar .nav-link.active {
    background-color: var(--sidebar-active);
    position: relative;
}

#sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: #f47c20;
}

#sidebar.collapsed .nav-link.active {
    border-left: 4px solid #f47c20;
    padding-left: 11px;
}

#sidebar .nav-link i {
    font-size: 1.2rem;
    min-width: 25px;
    text-align: center;
}

/* Sidebar state classes for nav-text visibility */
.sidebar-expanded .nav-text {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.sidebar-collapsed .nav-text,
.sidebar-hidden .nav-text {
    display: none;
}

/* Legacy class for backward compatibility */
#sidebar.collapsed .nav-text {
    display: none;
}

/* Fix for user dropdown menu when sidebar is collapsed */
#sidebar.collapsed .dropdown-menu.w-100 {
    width: 50px !important;
    min-width: 50px;
    margin-left: var(--sidebar-collapsed-width);
}

#sidebar.hidden {
    transform: translateX(-100%);
    visibility: hidden;
}

#sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--sidebar-color);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

#sidebar-toggle:hover {
    background-color: var(--sidebar-hover);
}

#main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    padding-top: 15px;
    width: calc(100% - var(--sidebar-width));
}

#main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

#main-content.full-width {
    margin-left: 0;
    width: 100%;
}

/* Add a class to the body when auth-section is displayed */
body.auth-page #main-content,
body.auth-page #main-content.expanded {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important; /* Remove padding to prevent scrolling */
}

/* Hide the general footer when auth-section is displayed */
body.auth-page footer {
    display: none !important;
}

.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1045;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-color);
    border: none;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    opacity: 0.9;
}

.mobile-nav-toggle:hover, .mobile-nav-toggle:focus {
    opacity: 1;
    background-color: #2c3136;
}

.mobile-nav-toggle.hidden {
    display: none;
}

@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-100%);
        left: 0;
        width: 250px;
        visibility: visible;
        z-index: 1050;
        transition: transform 0.3s ease;
    }

    #sidebar.show {
        transform: translateX(0);
    }

    #main-content {
        margin-left: 0;
        width: 100%;
        transition: opacity 0.3s ease, margin-left 0.3s ease, background-color 0.3s ease;
    }

    /* Override expanded class in mobile view to prevent displacement */
    #main-content.expanded {
        margin-left: 0;
        width: 100%;
    }

    /* When sidebar is shown, adjust main content */
    #sidebar.show ~ #main-content {
        margin-left: 0;
    }

    /* Sidebar overlay */
    #sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1045;
        transition: opacity 0.3s ease;
    }

    #sidebar-overlay.show {
        display: block;
    }

    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Admin Access Button Styles */
.admin-access-btn {
    padding: 0;
    margin-left: 10px;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.admin-access-btn:hover, .admin-access-btn:focus {
    opacity: 0.8;
    transform: scale(1.1);
    color: #6c757d !important;
}

.admin-access-btn:active {
    transform: scale(0.95);
}

.admin-access-btn i {
    font-size: 0.9rem;
}

@media (max-width: 576px) {
    .admin-access-btn {
        margin-left: 5px;
    }

    .admin-access-btn i {
        font-size: 0.8rem;
    }

    /* Adjust scroll-top-button position to avoid overlap with admin-access-btn */
    .scroll-top-button {
        bottom: 70px; /* Move up to avoid overlap */
        right: 15px; /* Align with reload button for this breakpoint */
    }
}

/* Public Navigation Bar Styles */
.public-nav-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--card-bg);
    box-shadow: 0 2px 10px var(--shadow-color);
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.back-to-landing-btn {
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.back-to-landing-btn:hover, .back-to-landing-btn:focus {
    background-color: rgba(var(--color-primary-rgb), 0.1);
    transform: translateY(-2px);
}

.back-to-landing-btn:active {
    transform: translateY(0);
}

.public-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    flex-grow: 1;
    overflow-x: auto;
    padding-bottom: 5px;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

.public-nav-links::-webkit-scrollbar {
    display: none;  /* Hide scrollbar for Chrome, Safari and Opera */
}

.public-nav-link {
    background-color: transparent;
    border: none;
    color: var(--text-color);
    opacity: 0.7;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    white-space: nowrap;
}

.public-nav-link:hover, .public-nav-link:focus {
    background-color: var(--dropdown-hover-bg);
    color: var(--primary-color);
}

.public-nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

.public-nav-link i {
    font-size: 1rem;
}

/* Responsive styles for public navigation */
@media (max-width: 768px) {
    .public-nav-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-nav-links {
        width: 100%;
        justify-content: flex-start;
    }

    /* Mobile-specific nav-text styles are now handled by the sidebar state classes */

    .public-nav-link {
        padding: 8px;
    }

    .public-nav-link i {
        font-size: 1.2rem;
    }
}

/* Reload Button Styles */
.reload-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Hide buttons when modal is open */
body.modal-open .reload-button,
body.modal-open .scroll-top-button {
    z-index: 1040; /* Lower than Bootstrap modal (1050) */
}

.reload-button i {
    font-size: 1.5rem;
    transition: transform 0.5s ease;
}

.reload-button:hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.reload-button:active {
    transform: scale(0.95);
}

/* Scroll to Top Button Styles */
.scroll-top-button {
    position: fixed;
    bottom: 20px;
    right: 85px; /* Positioned to the left of the reload button */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.scroll-top-button.visible {
    opacity: 0.7;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-button:hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Theme Settings Styles */
.theme-options, .font-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.theme-option, .font-size-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.theme-option:hover, .font-size-option:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.theme-option.active, .font-size-option.active {
    border-color: var(--primary-color);
    background-color: rgba(245, 124, 0, 0.1);
}

.theme-preview {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
}

.theme-preview::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 10px;
    border-radius: 2px;
}

.theme-preview::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 10px;
    right: 10px;
    height: 20px;
    border-radius: 2px;
}

.theme-light-preview {
    background-color: #FFFFFF;
}

.theme-light-preview::after {
    background-color: #F57C00;
}

.theme-light-preview::before {
    background-color: #ECECEC;
}

.theme-dark-preview {
    background-color: #121212;
}

.theme-dark-preview::after {
    background-color: #F57C00;
}

.theme-dark-preview::before {
    background-color: #2D2D2D;
}

.theme-sepia-preview {
    background-color: #F5EFE0;
}

.theme-sepia-preview::after {
    background-color: #F57C00;
}

.theme-sepia-preview::before {
    background-color: #E8DCCA;
}

.theme-name, .font-size-name {
    margin-top: 5px;
    font-size: 0.9rem;
    text-align: center;
}

.font-size-preview {
    display: flex;
    align-items: baseline;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.small-text {
    font-size: 0.7em;
}

.default-text {
    font-size: 0.8em;
}

.large-text {
    font-size: 0.9em;
}

.xlarge-text {
    font-size: 1em;
}

.scroll-top-button:active {
    transform: scale(0.95);
}

.scroll-top-button i {
    font-size: 1.5rem;
}

.reload-button:hover i {
    transform: rotate(360deg);
}

/* Responsive adjustments for reload button */
@media (max-width: 768px) {
    .reload-button {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
    }

    .reload-button i {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .reload-button {
        width: 45px;
        height: 45px;
        bottom: 70px; /* Move higher to avoid keyboard and form elements */
        right: 15px; /* Slightly further from edge for better visibility */
        z-index: 1050; /* Ensure it's above other elements */
    }

    .reload-button i {
        font-size: 1.2rem;
    }

    /* Adjust scroll-top-button position to avoid overlap with admin-access-btn */
    .scroll-top-button {
        bottom: 130px; /* Move up to avoid overlap with reload button */
        right: 15px; /* Align with reload button */
    }
}

/* Profile Page Styles */
.permission-card {
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.permission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}

.permission-card .card-body {
    padding: 1rem;
    border-left: 3px solid var(--color-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.permission-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(40, 167, 69, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.permission-category {
    background-color: rgba(244, 124, 32, 0.03);
    border-radius: 8px;
    padding: 1rem;
    border-left: 3px solid var(--color-primary);
}

.permission-category h5 {
    color: var(--color-primary);
    font-weight: 600;
}

.phone-item {
    transition: all 0.2s ease;
}

.phone-item:hover {
    transform: translateX(5px);
}

.phone-number {
    font-weight: 500;
}

/* Profile section animations */
#profile-section .card {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CSS Variables for theme */
:root {
    /* Fonts */
    --font-family: 'Arial', 'Helvetica', 'Segoe UI', sans-serif;

    /* Colors */
    --color-primary: #f47c20;
    --color-secondary: #2c5b90;
    --color-gray-light: #f5f5f5;
    --color-gray-medium: #cccccc;
    --color-text-main: #333333;
    --color-background: #ffffff;
}

/* General styles */
body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text-main);
}

/* Bootstrap overrides */
.bg-primary {
    background-color: var(--color-primary) !important;
}

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

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

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

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #e06c10 !important;
    border-color: #e06c10 !important;
}

.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: #254b80 !important;
    border-color: #254b80 !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.btn-outline-secondary {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background-color: var(--color-secondary) !important;
    color: white !important;
}

.navbar-dark.bg-primary {
    background-color: var(--color-primary) !important;
}

.card-header.bg-primary {
    background-color: var(--color-primary) !important;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(244, 124, 32, 0.25);
}

.navbar-brand {
    font-weight: 600;
}

/* Authentication styles */
.auth-container {
    max-width: 400px;
    margin: 2rem auto;
}

/* Dashboard styles */
.week-navigation {
    margin-bottom: 1.5rem;
}

/* Assignment card styles */
.assignment-card {
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-secondary);
    transition: transform 0.2s;
}

.assignment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.assignment-card.discurso {
    border-left-color: var(--color-primary);
}

.assignment-card.lectura {
    border-left-color: #17a2b8;
}

.assignment-card.demostracion {
    border-left-color: var(--color-secondary);
}

.assignment-card.video {
    border-left-color: #dc3545;
}

/* Day headers */
.day-header {
    background-color: var(--color-gray-light);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

.weekend-header {
    background-color: var(--color-gray-light);
    border-left: 4px solid var(--color-secondary);
}

.weekday-header {
    background-color: var(--color-gray-light);
    border-left: 4px solid var(--color-primary);
}

/* Admin-specific styles */
.admin-controls {
    display: flex;
    gap: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        margin-bottom: 0.5rem;
        border-radius: 0.25rem !important;
    }

    /* Card header responsive styles for Spiritual Activity */
    .card-header .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .card-header h5.mb-0 {
        margin-bottom: 1rem !important;
    }

    .card-header .d-flex.gap-2 {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem !important;
    }

    .card-header .d-flex.gap-2 select,
    .card-header .d-flex.gap-2 button {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* PWA specific styles */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Loading spinner */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1060;
}

.toast {
    background-color: var(--color-background);
    color: var(--color-text-main);
    z-index: 1060;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin-bottom: 10px;
    opacity: 1;
}

.toast.success {
    border-left: 4px solid #28a745;
}

.toast.error {
    border-left: 4px solid #dc3545;
}

.toast.info {
    border-left: 4px solid #17a2b8;
}

/* Bootstrap Icons */
.bi {
    display: inline-block;
    vertical-align: -0.125em;
}

/* Enhanced UI Styles */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand i {
    font-size: 1.2rem;
}

/* Improved navbar menu spacing */
.navbar-nav .nav-item {
    margin-right: 15px;
    position: relative;
}

.navbar-nav .nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 25%;
    height: 50%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

.navbar-nav .nav-link {
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s;
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.navbar-nav .nav-link i {
    margin-right: 8px;
    font-size: 1.1em;
}

.dropdown-item i {
    width: 1.5rem;
    text-align: center;
    margin-right: 0.5rem;
}

/* Fix for sidebar dropdown items text color */
#sidebar .dropdown-menu .dropdown-item {
    color: #212529; /* Dark text color for better contrast on light background */
}

.dropdown-item:active {
    background-color: var(--color-primary);
}

.card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: var(--color-background);
}

.card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-sm {
    border-radius: 0.3rem;
    --element-font-size: 0.875rem;
}

.nav-tabs .nav-link {
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem 1rem;
}

.nav-tabs .nav-link i {
    margin-right: 0.5rem;
}

/* User info styling */
#user-info {
    font-weight: 500;
}

/* Select2 in modals fixes */
.select2-container {
    z-index: 9999 !important;
}

.select2-dropdown {
    z-index: 9999 !important;
}

.modal-body {
    overflow: visible !important;
}

.modal-content {
    overflow: visible !important;
}

.modal {
    overflow-y: auto !important;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
}

.loading-overlay .loading-message {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Modern App Loader */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
}

.app-loader.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.loader-text {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2rem;
    display: flex;
    perspective: 1000px;
}

.loader-text .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotateX(-90deg);
    animation: letterAppear 0.6s forwards;
    animation-delay: calc(var(--index, 0) * 0.1s);
}

.loader-text .letter:nth-child(1) { --index: 1; }
.loader-text .letter:nth-child(2) { --index: 2; }
.loader-text .letter:nth-child(3) { --index: 3; }
.loader-text .letter:nth-child(4) { --index: 4; }
.loader-text .letter:nth-child(5) { --index: 5; }
.loader-text .letter:nth-child(6) { --index: 6; }
.loader-text .letter:nth-child(7) { --index: 7; }
.loader-text .letter:nth-child(8) { --index: 8; }
.loader-text .letter:nth-child(9) { --index: 9; }
.loader-text .letter:nth-child(10) { --index: 10; }
.loader-text .letter:nth-child(11) { --index: 11; }

@keyframes letterAppear {
    0% {
        opacity: 0;
        transform: translateY(20px) rotateX(-90deg);
    }
    60% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

.loader-spinner {
    width: 80px;
    height: 80px;
    position: relative;
}

.spinner-circle {
    fill: none;
    stroke: white;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 280;
    animation: spinnerRotate 3s ease-in-out infinite, spinnerDash 3s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes spinnerRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinnerDash {
    0% {
        stroke-dashoffset: 280;
    }
    50% {
        stroke-dashoffset: 75;
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 280;
        transform: rotate(450deg);
    }
}

/* Mouse interaction effect */
.app-loader[data-interactive="true"] .loader-content {
    transition: transform 0.2s ease-out;
}

/* Pulse animation for letters on hover */
@keyframes letterPulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.4);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .loader-text {
        font-size: 2.5rem;
    }

    .loader-spinner {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .loader-text {
        font-size: 2rem;
    }

    .loader-spinner {
        width: 50px;
        height: 50px;
    }
}

/* Modern Action Menu Styles */
.action-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.action-menu.show {
    display: block;
}

.action-menu-container {
    background-color: white;
    border-radius: 12px;
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.action-menu.show .action-menu-container {
    transform: translateY(0);
    opacity: 1;
}

.action-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.action-menu-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-primary);
}

.action-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.action-menu-close:hover {
    background-color: rgba(108, 117, 125, 0.1);
}

.action-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.action-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    text-decoration: none;
    color: var(--text-color);
}

.action-menu-item:hover, .action-menu-item:focus {
    background-color: var(--dropdown-hover-bg);
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--primary-color);
}

.action-menu-item i {
    font-size: 1.75rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.action-menu-item span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Dark Theme for Action Menu */
body.theme-dark .action-menu-container {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

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

body.theme-dark .action-menu-title {
    color: var(--text-color);
}

body.theme-dark .action-menu-close {
    color: var(--text-color);
}

body.theme-dark .action-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .action-menu-item {
    color: var(--text-color);
}

body.theme-dark .action-menu-item:hover, 
body.theme-dark .action-menu-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-action);
}

body.theme-dark .action-menu-item i {
    color: var(--primary-action);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .action-menu-container {
        margin: 10px auto;
        padding: 15px;
    }

    .action-menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }

    .action-menu-item {
        padding: 10px 5px;
    }

    .action-menu-item i {
        font-size: 1.5rem;
    }

    .action-menu-item span {
        font-size: 0.75rem;
    }

    .dropdown-menu {
        position: absolute;
    }

    .card-header {
        padding: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Responsive navbar improvements */
    .navbar-nav .nav-item {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .navbar-nav .nav-item:not(:last-child)::after {
        display: none; /* Hide dividers on mobile */
    }

    .navbar-nav .nav-link {
        padding: 10px 15px;
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 6px;
    }

    .navbar-nav .nav-link:hover {
        transform: none; /* Remove the transform effect on mobile */
        background-color: rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse {
        padding-top: 10px;
        padding-bottom: 5px;
    }
}

/* Privilege Badge Styles */
.privilege-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: 8px;
    z-index: 5;
}

.badge-publisher {
    background-color: #6c757d;
    color: white;
}

.badge-auxiliary {
    background-color: #fd7e14;
    color: white;
}

.badge-regular {
    background-color: #198754;
    color: white;
}

/* Desktop view for privilege badge */
@media (min-width: 769px) {
    .row-header .privilege-badge {
        position: relative;
        top: 0;
        right: 0;
    }
}

/* Mobile view for privilege badge */
@media (max-width: 768px) {
    .card-style-row .privilege-badge {
        white-space: nowrap;
        flex-shrink: 0;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-style-row .row-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .card-style-row .row-header span:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Save Indicators for Spiritual Activity */
.save-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    opacity: 1;
    transition: all 0.3s ease;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.save-indicator.saving {
    animation: pulse 1.5s infinite;
}

.save-indicator.success i {
    color: #28a745;
    font-size: 1.5rem;
}

.save-indicator.error i {
    color: #dc3545;
    font-size: 1.5rem;
}

/* For mobile card view - keep consistent positioning */
.card-style-row .save-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

/* Pulse animation for saving indicator */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


/* Style for modified rows - more subtle since we're saving automatically */
.row-modified {
    background-color: rgba(255, 193, 7, 0.1);
}

/* Toggle accordions button styles */
#toggle-all-accordions {
    transition: all 0.2s ease;
}

#toggle-all-accordions:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#toggle-all-accordions i {
    transition: transform 0.3s ease;
}

/* Responsive adjustments for toggle button */
@media (max-width: 576px) {
    #toggle-all-accordions {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* My Assignments Section Styles */
#my-assignments-section .card {
    transition: all 0.3s ease;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--shadow-color);
    border-width: 0;
    position: relative;
    background-color: var(--card-bg);
    color: var(--text-color);
}

#my-assignments-section .card.assignment-card {
    border-left-width: 4px;
}

#my-assignments-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--shadow-color);
}

#my-assignments-section .card-header {
    font-weight: 500;
    text-transform: capitalize;
    padding: 0.85rem 1.25rem;
    background-color: var(--accordion-button-bg);
    border-bottom: 1px solid var(--card-border);
}

#my-assignments-section .card-body {
    padding: 1.5rem;
}

#my-assignments-section .card-title {
    --element-font-size: 1.15rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
    line-height: 1.3;
}

#my-assignments-section .card-info {
    --element-font-size: 0.95rem;
    color: var(--text-color);
    opacity: 0.8;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
    line-height: 1.6;
}

#my-assignments-section .card-info .bi {
    width: 20px;
    text-align: center;
}

#my-assignments-section h4 {
    --element-font-size: 1.5rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    text-transform: capitalize;
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0.75rem;
}

#my-assignments-section .bi {
    --element-font-size: 1.1rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
}

#my-assignments-section .badge {
    --element-font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
}

/* Card border colors */
#my-assignments-section .card.border-primary {
    border-left-color: var(--primary-color);
}

#my-assignments-section .card.border-secondary {
    border-left-color: var(--btn-default-bg);
}

#my-assignments-section .card.border-success {
    border-left-color: var(--success-color);
}

#my-assignments-section .card.border-warning {
    border-left-color: #ffc107;
}

#my-assignments-section .card.border-info {
    border-left-color: #17a2b8;
}

/* Responsive styles for My Assignments */
@media (max-width: 768px) {
    #my-assignments-section .row-cols-md-2 {
        row-gap: 1.25rem;
    }

    #my-assignments-section .card {
        margin-bottom: 0.5rem;
    }

    #my-assignments-section h4 {
        --element-font-size: 1.3rem;
        font-size: calc(var(--element-font-size) * var(--font-scale, 1));
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    #my-assignments-section .card-header {
        padding: 0.75rem 1rem;
    }

    #my-assignments-section .card-body {
        padding: 1.25rem 1rem;
    }
}

/* ======================================
   Landing Section Styles (from public-styles.css)
   ====================================== */

/* Program cards */
#landing-section .program-card {
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

#landing-section .program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

#landing-section .icon-container {
    --element-font-size: 2.5rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
    color: var(--color-primary);
}

/* Week navigation */
#landing-section .week-navigation {
    background-color: var(--color-gray-light);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Week navigation - Dark Theme */
body.theme-dark #landing-section .week-navigation {
    background-color: var(--color-text-main);
}

#landing-section .week-navigation .btn {
    border-radius: 50px;
    padding: 0.5rem 1rem;
}

/* Program items */
#landing-section .program-item {
    border-left: 4px solid var(--color-primary);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Dark theme override for program items */
body.theme-dark #landing-section .program-item {
    background-color: var(--card-bg);
}

#landing-section .program-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#landing-section .program-item h5 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

#landing-section .program-item .time {
    font-weight: bold;
    color: var(--color-secondary);
}

#landing-section .program-item .person {
    font-style: italic;
}

/* Day headers */
#landing-section .day-header {
    background-color: var(--color-primary);
    color: white;
    padding: 0.75rem 1rem;
    margin: 1.5rem 0 1rem 0;
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Empty state */
#landing-section .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background-color: var(--color-gray-light);
    border-radius: 0.5rem;
    margin: 2rem 0;
}

/* Dark mode override for empty state */
body.theme-dark #landing-section .empty-state {
    background-color: var(--card-bg);
}

#landing-section .empty-state i {
    --element-font-size: 3rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
    color: var(--color-gray-medium);
    margin-bottom: 1rem;
}

#landing-section .empty-state h4 {
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

#landing-section .empty-state p {
    color: #666;
}

/* ======================================
   Sidebar Menu Styles (from sidebar-menu.css)
   ====================================== */

/* Main sidebar container */
#landing-section .sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-primary);
    transition: all 0.3s;
    z-index: 1050;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* Sidebar header */
#landing-section .sidebar-header {
    padding: 20px 15px;
    background-color: rgba(0, 0, 0, 0.1);
}

#landing-section .sidebar-header h3 {
    color: white;
    margin: 0;
    --element-font-size: 1.3rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
    font-weight: 600;
}

/* Sidebar links */
#landing-section .sidebar-menu {
    padding: 0;
    list-style: none;
    margin: 0;
}

#landing-section .sidebar-menu li {
    margin: 0;
    padding: 0;
}

#landing-section .sidebar-menu li a {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

#landing-section .sidebar-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

#landing-section .sidebar-menu li a.active {
    background-color: rgba(255, 255, 255, 0.2);
}

#landing-section .sidebar-menu li a i {
    margin-right: 10px;
    --element-font-size: 1.1rem;
    font-size: calc(var(--element-font-size) * var(--font-scale, 1));
    width: 20px;
    text-align: center;
}

/* Submenu styles */
#landing-section .sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
}

#landing-section .sidebar-submenu li a {
    padding: 10px 15px 10px 45px;
    font-weight: 400;
}

#landing-section .sidebar-menu li.active .sidebar-submenu {
    display: block;
}

/* Dropdown indicator */
#landing-section .dropdown-toggle::after {
    display: block;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Content wrapper */
#landing-section .content-wrapper {
    width: 100%;
    padding-left: 0px;
    transition: all 0.3s;
}

/* Toggle button for mobile */
#landing-section #sidebar-toggle {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1060;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: none;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s;
}

#landing-section #sidebar-toggle:hover {
    background-color: #e06c10;
}

/* Private area button */
#landing-section .private-area-btn {
    margin: 15px;
    display: block;
}

/* Responsive styles for landing section */
@media (max-width: 992px) {
    #landing-section .sidebar {
        margin-left: -250px;
    }

    #landing-section .sidebar.active {
        margin-left: 0;
    }

    #landing-section .content-wrapper {
        padding-left: 0;
    }

    #landing-section #sidebar-toggle {
        display: flex;
    }

    /* Add overlay when sidebar is active on mobile */
    #landing-section .sidebar-overlay {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }

    #landing-section .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
}

/* ======================================
   Global Public Styles (from public-styles.css)
   ====================================== */

/* Program cards */
.program-card {
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

.program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.icon-container {
    font-size: 2.5rem;
    color: var(--color-primary);
}

/* Week navigation */
.week-navigation {
    background-color: var(--color-gray-light);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.week-navigation .btn {
    border-radius: 50px;
    padding: 0.5rem 1rem;
}

/* Program items */
.program-item {
    border-left: 4px solid var(--color-primary);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.program-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.program-item h5 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.program-item .time {
    font-weight: bold;
    color: var(--color-secondary);
}

.program-item .person {
    font-style: italic;
}

/* Day headers */
.day-header {
    background-color: var(--color-primary);
    color: white;
    padding: 0.75rem 1rem;
    margin: 1.5rem 0 1rem 0;
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Loading spinner */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-nav {
        padding: 0.5rem 0;
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.25rem;
    }

    .program-card {
        margin-bottom: 1rem;
    }

    .icon-container {
        font-size: 2rem;
    }

    /* User cards for mobile view */
    .user-card {
        display: flex;
        flex-direction: column;
        padding: 15px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 15px;
        position: relative;
    }

    .user-card .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding: 0;
        background-color: transparent;
        border: none;
    }

    .user-card .card-header h5 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .user-card .card-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .user-card .card-field {
        margin-bottom: 8px;
    }

    .user-card .card-field-label {
        font-size: 0.8rem;
        color: #6c757d;
        margin-bottom: 2px;
    }

    .user-card .card-field-value {
        font-size: 0.95rem;
    }

    .user-card .card-actions {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
    }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background-color: var(--color-gray-light);
    border-radius: 0.5rem;
    margin: 2rem 0;
}

.empty-state i {
    font-size: 3rem;
    color: var(--color-gray-medium);
    margin-bottom: 1rem;
}

.empty-state h4 {
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: #666;
}

/* ======================================
   Global Sidebar Menu Styles (from sidebar-menu.css)
   ====================================== */

/* Main sidebar container */
.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-primary);
    transition: all 0.3s;
    z-index: 1050;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* Sidebar header */
.sidebar-header {
    padding: 20px 15px;
    background-color: rgba(0, 0, 0, 0.1);
}

.sidebar-header h3 {
    color: white;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

/* Sidebar links */
.sidebar-menu {
    padding: 0;
    list-style: none;
    margin: 0;
}

.sidebar-menu li {
    margin: 0;
    padding: 0;
}

.sidebar-menu li a {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

.sidebar-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.sidebar-menu li a.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.sidebar-menu li a i {
    margin-right: 10px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Submenu styles */
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
}

.sidebar-submenu li a {
    padding: 10px 15px 10px 45px;
    font-weight: 400;
}

.sidebar-menu li.active .sidebar-submenu {
    display: block;
}

/* Dropdown indicator */
/*.dropdown-toggle::after {*/
/*    display: block;*/
/*    right: 15px;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*}*/

/* Content wrapper */
.content-wrapper {
    width: 100%;
    padding-left: 250px;
    transition: all 0.3s;
}

/* Toggle button for mobile */
#sidebar-toggle {
    z-index: 1060;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: none;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s;
}

#sidebar-toggle:hover {
    background-color: #e06c10;
}

/* Private area button */
.private-area-btn {
    margin: 15px;
    display: block;
}

/* Responsive styles */
@media (max-width: 992px) {
    .sidebar {
        margin-left: -250px;
    }

    .sidebar.active {
        margin-left: 0;
    }

    .content-wrapper {
        padding-left: 0;
    }

    #sidebar-toggle {
        display: flex;
    }

    /* Add overlay when sidebar is active on mobile */
    .sidebar-overlay {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
}

/* Theme-specific styles for main content and dashboard section */
body.theme-dark #main-content {
    background-color: var(--bg-color);
    color: var(--base-text-color);
}

body.theme-dark #main-content .card,
body.theme-dark #main-content .assignment-card {
    background-color: var(--card-bg);
    color: var(--base-text-color);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Typography improvements for main content */
body.theme-dark #main-content h1,
body.theme-dark #main-content h2,
body.theme-dark #main-content h3,
body.theme-dark #main-content h4,
body.theme-dark #main-content h5,
body.theme-dark #main-content h6 {
    color: var(--title-color);
}

body.theme-dark #main-content .text-muted,
body.theme-dark #main-content .subtitle {
    color: var(--subtitle-color) !important;
}

body.theme-dark #main-content p,
body.theme-dark #main-content span:not(.badge):not(.btn) {
    color: var(--base-text-color);
}

body.theme-dark #main-content input,
body.theme-dark #main-content select,
body.theme-dark #main-content textarea {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.theme-dark #main-content button:not(.btn-light):not(.btn-secondary):not(.btn-close) {
    color: #FFFFFF;
    transition: all 0.3s ease;
}

body.theme-dark #main-content button:not(.btn-light):not(.btn-secondary):not(.btn-close):hover {
    background-color: #E65100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.theme-dark #main-content button:not(.btn-light):not(.btn-secondary):not(.btn-close):focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.4);
}

body.theme-dark #main-content .btn-outline-primary {
    background-color: transparent;
    color: var(--primary-action);
    border-color: var(--primary-action);
    transition: all 0.3s ease;
}

body.theme-dark #main-content .btn-outline-primary:hover {
    background-color: var(--primary-action);
    color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.theme-dark #main-content .btn-outline-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.4);
}

body.theme-dark #main-content .btn-secondary {
    background-color: var(--secondary-action);
    color: #FFFFFF;
    border-color: var(--secondary-action);
    transition: all 0.3s ease;
}

body.theme-dark #main-content .btn-secondary:hover {
    background-color: #616161;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.theme-dark #main-content .btn-info {
    background-color: var(--info-action);
    color: #FFFFFF;
    border-color: var(--info-action);
    transition: all 0.3s ease;
}

body.theme-dark #main-content .btn-info:hover {
    background-color: #1976D2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.theme-dark #main-content .btn-danger {
    background-color: var(--danger-action);
    color: #FFFFFF;
    border-color: var(--danger-action);
    transition: all 0.3s ease;
}

body.theme-dark #main-content .btn-danger:hover {
    background-color: #C62828;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.theme-dark #main-content .card-header {
    background-color: var(--modal-header-bg);
    border-color: var(--border-color);
}

body.theme-dark #main-content .card-header.bg-primary {
    background-color: var(--accent-color) !important;
    color: white;
}

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

body.theme-dark #main-content .spinner-border.text-primary {
    border-color: var(--accent-color);
    border-right-color: transparent;
}

/* Specific styles for dashboard section */
body.theme-dark #dashboard-section {
    background-color: var(--bg-color);
    color: var(--base-text-color);
}

body.theme-dark #dashboard-section .card,
body.theme-dark #dashboard-section .assignment-card {
    background-color: var(--card-bg);
    color: var(--base-text-color);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Day blocks with distinct backgrounds */
body.theme-dark #dashboard-section .day-block {
    background-color: var(--panel-bg);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border-left: 5px solid var(--primary-action);
}

body.theme-dark #dashboard-section .day-block h3 {
    color: var(--title-color);
    font-weight: bold;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.75rem;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
}

body.theme-dark #dashboard-section .day-block .assignment-card {
    background-color: var(--card-bg);
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border-radius: 8px;
}

/* Typography improvements */
body.theme-dark #dashboard-section h1,
body.theme-dark #dashboard-section h2,
body.theme-dark #dashboard-section h3,
body.theme-dark #dashboard-section h4,
body.theme-dark #dashboard-section h5,
body.theme-dark #dashboard-section h6 {
    color: var(--title-color);
}

body.theme-dark #dashboard-section h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

body.theme-dark #dashboard-section h2 {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

body.theme-dark #dashboard-section .text-muted,
body.theme-dark #dashboard-section .subtitle {
    color: var(--subtitle-color) !important;
    font-weight: 500;
}

body.theme-dark #dashboard-section p,
body.theme-dark #dashboard-section span:not(.badge):not(.btn) {
    color: var(--base-text-color);
    line-height: 1.6;
}

body.theme-dark #dashboard-section input,
body.theme-dark #dashboard-section select,
body.theme-dark #dashboard-section textarea {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.theme-dark #dashboard-section input:focus,
body.theme-dark #dashboard-section select:focus,
body.theme-dark #dashboard-section textarea:focus {
    border-color: var(--primary-action);
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25);
    outline: none;
}

body.theme-dark #dashboard-section button {
    background-color: var(--primary-action);
    color: #FFFFFF;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border: none;
}

body.theme-dark #dashboard-section button:hover {
    background-color: #E65100;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section button:focus {
    outline: none;
    box-shadow: var(--btn-focus-shadow);
    border: 1px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-primary {
    background-color: var(--primary-action);
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-primary:hover {
    background-color: #E65100;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-primary:focus {
    outline: none;
    box-shadow: var(--btn-focus-shadow);
    border: 1px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-outline-primary {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid var(--primary-action);
    transition: all 0.3s ease;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-outline-primary:hover {
    background-color: var(--primary-action);
    color: #FFFFFF;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-outline-primary:focus {
    outline: none;
    box-shadow: var(--btn-focus-shadow);
    border: 2px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-secondary {
    background-color: var(--secondary-action);
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-secondary:hover {
    background-color: #616161;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(117, 117, 117, 0.5);
    border: 1px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-info {
    background-color: var(--info-action);
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-info:hover {
    background-color: #1976D2;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-info:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);
    border: 1px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-danger {
    background-color: var(--danger-action);
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-danger:hover {
    background-color: #C62828;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-danger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.5);
    border: 1px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-outline-success {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid #28a745;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-outline-success:hover {
    background-color: #28a745;
    color: #FFFFFF;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-outline-success:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
    border: 2px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-outline-warning {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid #ffc107;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-outline-warning:hover {
    background-color: #ffc107;
    color: #212529;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-outline-warning:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);
    border: 2px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-sm {
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
    font-weight: 400;
}

body.theme-dark #dashboard-section .btn-outline-secondary {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid var(--secondary-action);
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-outline-secondary:hover {
    background-color: var(--secondary-action);
    color: #FFFFFF;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-outline-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(117, 117, 117, 0.5);
    border: 2px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-outline-danger {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid var(--danger-action);
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-outline-danger:hover {
    background-color: var(--danger-action);
    color: #FFFFFF;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-outline-danger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.5);
    border: 2px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-light {
    background-color: #f8f9fa;
    color: #212529;
    border: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-light:hover {
    background-color: #e2e6ea;
    color: #212529;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-light:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5);
    border: 1px solid #212529;
}

body.theme-dark #dashboard-section .btn-outline-light {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid #f8f9fa;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-outline-light:hover {
    background-color: #f8f9fa;
    color: #212529;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-outline-light:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5);
    border: 2px solid #212529;
}

body.theme-dark #dashboard-section .btn-outline-info {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid var(--info-action);
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-outline-info:hover {
    background-color: var(--info-action);
    color: #FFFFFF;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-outline-info:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);
    border: 2px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-success {
    background-color: #28a745;
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-success:hover {
    background-color: #218838;
    color: #FFFFFF;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-success:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
    border: 1px solid #FFFFFF;
}

body.theme-dark #dashboard-section .btn-warning {
    background-color: #ffc107;
    color: #212529;
    border: none;
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

body.theme-dark #dashboard-section .btn-warning:hover {
    background-color: #e0a800;
    color: #212529;
    box-shadow: var(--btn-hover-shadow);
    transform: translateY(-2px);
}

body.theme-dark #dashboard-section .btn-warning:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);
    border: 1px solid #212529;
}

body.theme-dark #dashboard-section .card-header {
    background-color: var(--panel-bg);
    border-color: var(--border-color);
    color: var(--title-color);
}

body.theme-dark #dashboard-section .card-header.bg-primary {
    background-color: var(--primary-action) !important;
    color: white;
    border-bottom: none;
}

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

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

body.theme-dark #dashboard-section .spinner-border.text-primary {
    border-color: var(--primary-action);
    border-right-color: transparent;
}

/* Assignment cards with better contrast */
body.theme-dark #dashboard-section .assignment-card {
    border-left: 4px solid var(--primary-action);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.theme-dark #dashboard-section .assignment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
    border-left: 4px solid var(--primary-action);
}

body.theme-dark #dashboard-section .assignment-card h4 {
    color: var(--title-color);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

body.theme-dark #dashboard-section .assignment-card .card-text {
    color: var(--base-text-color);
    margin-bottom: 1rem;
}

/* Badge styles */
body.theme-dark #dashboard-section .badge {
    font-weight: 600;
    padding: 0.5em 0.8em;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

body.theme-dark #dashboard-section .badge-primary {
    background-color: var(--primary-action);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(255, 122, 0, 0.3);
}

body.theme-dark #dashboard-section .badge-secondary {
    background-color: var(--secondary-action);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(117, 117, 117, 0.3);
}

body.theme-dark #dashboard-section .badge-info {
    background-color: var(--info-action);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

body.theme-dark #dashboard-section .badge-danger {
    background-color: var(--danger-action);
    color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(229, 57, 53, 0.3);
}

/* Week navigation improvements */
body.theme-dark #dashboard-section #week-display {
    color: var(--title-color);
    font-weight: bold;
    font-size: 1.3rem;
    text-align: center;
    letter-spacing: 0.5px;
}

body.theme-dark #dashboard-section #date-picker-container {
    background-color: var(--panel-bg);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}

body.theme-dark #dashboard-section #date-picker-container .form-control {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
    border-radius: 6px;
}

body.theme-dark #dashboard-section #date-picker-container .form-control:focus {
    border-color: var(--primary-action);
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25);
}