/*
===== BUTTON DESIGN SYSTEM =====
Primary actions (main action on page): btn-primary (blue filled)
Positive actions (create, assign, volunteer, save): btn-success (green filled)  
Negative actions (delete, remove, unassign): btn-danger (red filled)
Warning actions (withdraw, cancel membership): btn-warning (yellow filled)
Secondary actions (back, cancel modal, neutral): btn-secondary (gray filled)
Utility actions (select all, toggle, tools): btn-outline-secondary (gray outlined)

Cautious positive actions: btn-outline-success (green outlined)
Cautious negative actions: btn-outline-danger (red outlined) 
Cautious warnings: btn-outline-warning (yellow outlined)
*/

/*
===== TYPOGRAPHY SYSTEM =====
Modern, clean, and consistent font hierarchy
*/
:root {
--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Font sizes - consistent scale */
--font-size-xs: 0.75rem;    /* 12px */
--font-size-sm: 0.875rem;   /* 14px */
--font-size-base: 1rem;     /* 16px */
--font-size-lg: 1.125rem;   /* 18px */
--font-size-xl: 1.25rem;    /* 20px */
--font-size-2xl: 1.5rem;    /* 24px */
--font-size-3xl: 1.875rem;  /* 30px */
--font-size-4xl: 2.25rem;   /* 36px */

/* Line heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
}

body {
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
font-weight: var(--font-weight-normal);
}

/*
===== TOP HEADER =====
Minimal header with profile, theme toggle, and logout
*/
.top-header {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
position: relative;
z-index: 1000;
}

.brand-link {
color: var(--bs-body-color);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-lg);
transition: color 0.2s ease;
}

.brand-link:hover {
color: var(--bs-primary);
}

.brand-text {
display: inline;
}

@media (max-width: 576px) {
.brand-text {
  display: none;
}
}

.top-link {
color: var(--bs-body-color);
text-decoration: none;
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
transition: all 0.2s ease;
background: none;
border: none;
cursor: pointer;
font-size: var(--font-size-base);
}

.top-link:hover {
background-color: var(--bs-gray-200);
color: var(--bs-primary);
}

[data-bs-theme="dark"] .top-link:hover {
background-color: rgba(255, 255, 255, 0.1);
}

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

.theme-toggle-btn {
display: flex;
align-items: center;
}

/* User dropdown in top header */
.top-header .dropdown-toggle::after {
margin-left: 0.5rem;
}

.top-header .dropdown-menu {
min-width: 200px;
margin-top: 0.5rem;
}

[data-bs-theme="dark"] .top-header .dropdown-menu {
background-color: var(--bs-dark);
border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .top-header .dropdown-item {
color: var(--bs-light);
}

[data-bs-theme="dark"] .top-header .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--bs-primary);
}

[data-bs-theme="dark"] .top-header .dropdown-divider {
border-color: var(--bs-border-color);
}

/*
===== BOTTOM NAVIGATION BAR =====
App-like bottom navigation with icons and labels
*/
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: var(--bs-body-bg);
border-top: 1px solid var(--bs-border-color);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
z-index: 1030;
padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-container {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 600px;
margin: 0 auto;
padding: 0.5rem 0;
}

.bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
color: var(--bs-secondary);
text-decoration: none;
transition: all 0.2s ease;
border-radius: 0.5rem;
min-width: 70px;
}

.bottom-nav-item i {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}

.bottom-nav-label {
font-size: 0.75rem;
font-weight: var(--font-weight-medium);
display: none;
}

@media (min-width: 576px) {
.bottom-nav-label {
  display: block;
}
}

.bottom-nav-item:hover {
color: var(--bs-primary);
background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.bottom-nav-item.active {
color: var(--bs-primary);
font-weight: var(--font-weight-semibold);
}

.bottom-nav-item.active i {
transform: scale(1.1);
}

/* Headings */
h1 { 
font-size: var(--font-size-3xl); 
font-weight: var(--font-weight-bold); 
line-height: var(--line-height-tight); 
margin-bottom: 1rem;
}
h2 { 
font-size: var(--font-size-2xl); 
font-weight: var(--font-weight-semibold); 
line-height: var(--line-height-tight); 
margin-bottom: 0.875rem;
}
h3 { 
font-size: var(--font-size-xl); 
font-weight: var(--font-weight-semibold); 
line-height: var(--line-height-snug); 
margin-bottom: 0.75rem;
}
h4 { 
font-size: var(--font-size-lg); 
font-weight: var(--font-weight-medium); 
line-height: var(--line-height-snug); 
margin-bottom: 0.625rem;
}
h5, h6 { 
font-size: var(--font-size-base); 
font-weight: var(--font-weight-medium); 
line-height: var(--line-height-normal); 
margin-bottom: 0.5rem;
}

/* Text elements */
.lead {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
}

small, .small {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* Navbar improvements */
/* Navbar improvements and mobile sticky behavior */
.navbar {
transition: all 0.3s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Make navbar sticky on mobile */
@media (max-width: 991px) {
.navbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(10px);
    background-color: rgba(13, 110, 253, 0.95) !important;
}

.navbar-dark {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
}

.navbar-brand {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
}

.navbar-user {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.95) !important;
padding: 0.5rem 0.75rem;
margin: 0 0.25rem;
min-width: fit-content;
text-align: center;
border-radius: 8px;
transition: all 0.2s ease-in-out;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
text-decoration: none !important;
white-space: nowrap;
}

.navbar-user:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 1) !important;
transform: translateY(-1px);
}

.navbar-user i {
font-size: var(--font-size-base);
margin-right: 0.5rem;
opacity: 0.9;
}

/* Navbar action buttons styling */
.navbar-action {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.95) !important;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
padding: 0.5rem 0.75rem;
border-radius: 8px;
text-decoration: none !important;
transition: all 0.2s ease-in-out;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
margin: 0 0.25rem;
min-width: fit-content;
text-align: center;
white-space: nowrap;
}

.navbar-action:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.3);
color: white !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-action:active {
transform: translateY(0);
}

.navbar-action i {
margin-right: 0.5rem;
font-size: var(--font-size-sm);
}

/* Dark mode toggle specific styling */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.95) !important;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
padding: 0.5rem 0.75rem;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.2s ease-in-out;
margin: 0 0.25rem;
min-width: fit-content;
text-align: center;
white-space: nowrap;
}

.theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.3);
color: white !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-toggle i {
font-size: var(--font-size-sm);
margin: 0; /* Remove margin for better centering */
}

/* Mobile navbar improvements */
@media (max-width: 991px) {
.navbar-nav {
    padding: 1rem 0;
    gap: 0.5rem;
}

.navbar-user {
    order: -1;
    margin: 0 0 1rem 0;
    justify-self: center;
    width: 100%;
    max-width: 300px;
}

.navbar-action {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    margin: 0.25rem 0;
}

.theme-toggle {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    margin: 0.25rem auto;
}
}

/* Card improvements */
.card-header h5 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: 0;
}

.card-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
}

/* Dark mode card header improvements */
[data-bs-theme="dark"] .card-header.bg-light {
background-color: #2d2d2d !important;
border-color: #444 !important;
color: #f8f9fa !important;
}

[data-bs-theme="dark"] .card-header .card-title {
color: #f8f9fa !important;
}

/* Dark mode support for admin pages */
[data-bs-theme="dark"] .avatar-circle {
background-color: #6ea8fe !important;
color: #000 !important;
}

[data-bs-theme="dark"] .table {
--bs-table-bg: transparent;
--bs-table-border-color: #444;
color: #f8f9fa;
}

[data-bs-theme="dark"] .table-light {
--bs-table-bg: #2d2d2d;
--bs-table-border-color: #444;
color: #f8f9fa;
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td {
--bs-table-accent-bg: #3d3d3d;
}

/* Button text consistency */
.btn {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
}

.btn-sm {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}

.btn-lg {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}

/* Table consistency */
.table th {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
}

.table td {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

/* Form elements */
.form-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-bottom: 0.375rem;
}

.form-control, .form-select {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

/* Breadcrumb */
.breadcrumb-item {
font-size: var(--font-size-sm);
}

/* Badge consistency */
.badge {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}

/* Alert consistency */
.alert {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

.alert-heading {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
}

/* List group improvements */
.list-group-item {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}

/* Dropdown improvements */
.dropdown-header {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--bs-secondary);
}

.dropdown-item {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
padding: 0.5rem 1rem;
}

.dropdown-item:hover, .dropdown-item:focus {
background-color: var(--bs-primary);
color: white;
}

.dropdown-item.active {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
font-weight: var(--font-weight-medium);
}

/* Dashboard improvements */
.dashboard-controls .card {
border: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border-radius: 16px;
background-color: var(--bs-body-bg);
}

.dashboard-controls .btn-group .btn {
border-radius: 8px;
font-weight: var(--font-weight-medium);
padding: 0.5rem 1rem;
font-size: var(--font-size-sm);
display: flex;
align-items: center;
justify-content: center;
min-height: 38px;
}

.dashboard-controls .btn-group .btn:first-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

.dashboard-controls .btn-group .btn:last-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

.dashboard-controls .btn-group .btn:not(:first-child):not(:last-child) {
border-radius: 8px;
}

.dashboard-controls .input-group-text {
border-color: var(--bs-border-color);
background-color: var(--bs-tertiary-bg);
color: var(--bs-secondary-color);
font-size: var(--font-size-sm);
border-radius: 8px 0 0 8px;
}

.dashboard-controls .form-control {
border-color: var(--bs-border-color);
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
font-size: var(--font-size-sm);
padding: 0.5rem 0.75rem;
min-height: 38px;
}

.dashboard-controls .form-control:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
background-color: var(--bs-body-bg);
}

.dashboard-controls .dropdown-toggle {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-color: var(--bs-border-color);
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-radius: 8px;
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
}

.dashboard-controls .dropdown-toggle:hover {
background-color: var(--bs-tertiary-bg);
border-color: var(--bs-primary);
}

.dashboard-controls .form-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--bs-secondary-color);
margin-bottom: 0.25rem;
display: flex;
align-items: center;
justify-content: flex-start;
}

/* Dark mode dashboard controls */
[data-bs-theme="dark"] .dashboard-controls .card {
background-color: #1a1d29;
border: 1px solid #2d3748;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

    [data-bs-theme="dark"] .dashboard-controls .input-group-text {
background-color: #2d2d2d !important;
border-color: #444 !important;
color: #adb5bd !important;
}

[data-bs-theme="dark"] .dashboard-controls .form-control {
background-color: #2d2d2d !important;
border-color: #444 !important;
color: #f8f9fa !important;
}

[data-bs-theme="dark"] .dashboard-controls .form-control:focus {
background-color: #2d2d2d !important;
border-color: #6ea8fe !important;
color: #f8f9fa !important;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

[data-bs-theme="dark"] .dashboard-controls .form-control::placeholder {
color: #adb5bd !important;
opacity: 1;
}

[data-bs-theme="dark"] .dashboard-controls .dropdown-toggle {
background-color: #2d2d2d !important;
border-color: #444 !important;
color: #f8f9fa !important;
}

[data-bs-theme="dark"] .dashboard-controls .dropdown-toggle:hover {
background-color: #3d3d3d !important;
border-color: #6ea8fe !important;
color: #f8f9fa !important;
}

[data-bs-theme="dark"] .dashboard-controls .btn-outline-secondary {
--bs-btn-color: #adb5bd !important;
--bs-btn-border-color: #444 !important;
--bs-btn-hover-color: #f8f9fa !important;
--bs-btn-hover-bg: #444 !important;
--bs-btn-hover-border-color: #6c757d !important;
}

[data-bs-theme="dark"] .dashboard-controls .form-label {
color: #a0aec0;
}

[data-bs-theme="dark"] .dashboard-controls .btn-outline-primary {
border-color: #6ea8fe;
color: #6ea8fe;
}

[data-bs-theme="dark"] .dashboard-controls .btn-outline-primary:hover,
[data-bs-theme="dark"] .dashboard-controls .btn-outline-primary.active {
background-color: #6ea8fe;
border-color: #6ea8fe;
color: #000;
}

[data-bs-theme="dark"] .dashboard-controls .btn-primary {
background-color: #6ea8fe;
border-color: #6ea8fe;
color: #000;
}

/* Mobile optimizations with better typography */
@media (max-width: 768px) {
.dashboard-controls .btn-group {
    width: 100%;
    display: flex;
}

.dashboard-controls .btn-group .btn {
    flex: 1;
    font-size: var(--font-size-xs);
    padding: 0.5rem 0.25rem;
    min-height: 42px;
}

.dashboard-controls .dropdown-toggle {
    font-size: var(--font-size-sm);
    min-height: 42px;
    padding: 0.5rem 0.75rem;
}

.dashboard-controls .input-group-sm .form-control,
.dashboard-controls .input-group-sm .input-group-text {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    min-height: 42px;
}

.dashboard-controls .form-label {
    font-size: var(--font-size-sm);
    margin-bottom: 0.5rem;
}

/* Better spacing on mobile */
.dashboard-controls .card-body {
    padding: 1.25rem;
}

.dashboard-controls .row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}
}

@media (max-width: 576px) {
.dashboard-controls .btn-group .btn {
    padding: 0.5rem 0.15rem;
    font-size: var(--font-size-xs);
    min-height: 44px;
}

.dashboard-controls .card-body {
    padding: 1rem;
}

/* Stack elements more compactly on small screens */
.dashboard-controls .input-group {
    margin-bottom: 0.5rem;
}
}

/* Main content adjustments for sticky navbar */
.main-content {
margin-top: 1.5rem;
margin-bottom: 80px; /* Space for bottom navbar */
padding-bottom: 2rem; /* Extra padding for dropdowns and content */
transition: margin-top 0.3s ease;
}

/* Calendar view needs tighter spacing */
.main-content.calendar-view {
padding-bottom: 0.5rem;
margin-bottom: 80px;
}

@media (max-width: 991px) {
.main-content {
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 2.5rem; /* More space on mobile for dropdowns */
}

.main-content.calendar-view {
    padding-bottom: 0.5rem;
}
}

@media (max-width: 576px) {
.main-content {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 3rem; /* Even more space on small mobile */
}

.main-content.calendar-view {
    padding-bottom: 0.5rem;
}
}

/* Icon improvements */
.dropdown-item i {
width: 1.2em;
text-align: center;
margin-right: 0.5rem;
}

/* Sorting icon improvements */
.dropdown-item .text-success {
color: #28a745 !important;
}

.dropdown-item .text-danger {
color: #dc3545 !important;
}

/* Dark mode variables and styles */
[data-bs-theme="dark"] {
--bs-body-bg: #1a1a1a;
--bs-body-color: #ffffff;
--bs-emphasis-color: #ffffff;
--bs-secondary-color: rgba(255, 255, 255, 0.75);
--bs-tertiary-color: rgba(255, 255, 255, 0.5);
--bs-quaternary-color: rgba(255, 255, 255, 0.25);
--bs-link-color: #6ea8fe;
--bs-link-hover-color: #8bb9fe;
--bs-code-color: #e685b5;
--bs-highlight-bg: #664d03;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .card {
--bs-card-bg: #2d2d2d;
border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .list-group-item {
--bs-list-group-bg: #2d2d2d;
--bs-list-group-border-color: var(--bs-border-color);
--bs-list-group-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item:hover {
background-color: #3d3d3d;
}

[data-bs-theme="dark"] .btn-outline-primary {
--bs-btn-color: #6ea8fe;
--bs-btn-border-color: #6ea8fe;
--bs-btn-hover-bg: #6ea8fe;
--bs-btn-hover-border-color: #6ea8fe;
}

[data-bs-theme="dark"] .btn-outline-danger {
--bs-btn-color: #ea868f;
--bs-btn-border-color: #ea868f;
--bs-btn-hover-bg: #ea868f;
--bs-btn-hover-border-color: #ea868f;
}

[data-bs-theme="dark"] .btn-outline-success {
--bs-btn-color: #75b798;
--bs-btn-border-color: #75b798;
--bs-btn-hover-bg: #75b798;
--bs-btn-hover-border-color: #75b798;
}

[data-bs-theme="dark"] .badge {
--bs-badge-color: #000;
}

[data-bs-theme="dark"] .alert-success {
--bs-alert-bg: #0f2419;
--bs-alert-border-color: #1f4a2c;
--bs-alert-color: #75b798;
}

[data-bs-theme="dark"] .alert-danger {
--bs-alert-bg: #2c0b0e;
--bs-alert-border-color: #58151c;
--bs-alert-color: #ea868f;
}

[data-bs-theme="dark"] .alert-warning {
--bs-alert-bg: #332701;
--bs-alert-border-color: #664f03;
--bs-alert-color: #ffda6a;
}

[data-bs-theme="dark"] .alert-info {
--bs-alert-bg: #032830;
--bs-alert-border-color: #055160;
--bs-alert-color: #6ea8fe;
}

[data-bs-theme="dark"] .form-control {
--bs-form-control-bg: #2d2d2d;
--bs-form-control-border-color: var(--bs-border-color);
--bs-form-control-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus {
--bs-form-control-border-color: #6ea8fe;
box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

[data-bs-theme="dark"] .form-select {
--bs-form-select-bg: #2d2d2d;
--bs-form-select-border-color: var(--bs-border-color);
--bs-form-select-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .modal-content {
--bs-modal-bg: #2d2d2d;
--bs-modal-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dropdown-menu {
--bs-dropdown-bg: #2d2d2d;
--bs-dropdown-border-color: var(--bs-border-color);
--bs-dropdown-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item:hover {
--bs-dropdown-link-hover-bg: #3d3d3d;
}

/* Dark mode toggle button styling: centered icon, fixed square hit area */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 36px;
padding: 0;
background: transparent;
border: none;
border-radius: 6px;
font-size: 1rem; /* icon size controlled on the <i> element */
color: rgba(255, 255, 255, 0.85);
transition: background-color 0.12s ease, color 0.12s ease;
}

.theme-toggle i { /* ensure icon is vertically centered */
display: inline-block;
line-height: 1;
font-size: 1.125rem;
}

.theme-toggle:hover {
background-color: rgba(255,255,255,0.04);
color: rgba(255, 255, 255, 1);
}

.theme-toggle:focus {
outline: none;
box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.12);
border-radius: 6px;
}

/* Card footer dark mode styling */
[data-bs-theme="dark"] .card-footer {
--bs-card-cap-bg: #252525;
border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .card-footer.bg-light {
background-color: #252525 !important;
}

/* Time tracking section dark mode styling */
[data-bs-theme="dark"] .time-tracking-section {
background-color: #252525;
border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .time-tracking-section .badge {
color: #000;
}

[data-bs-theme="dark"] .time-tracking-section .text-primary {
color: #6ea8fe !important;
}

/* Flatpickr dark mode support - consistent with Bootstrap dark theme */
[data-bs-theme="dark"] .flatpickr-calendar {
background-color: var(--bs-dark) !important;
border-color: var(--bs-border-color) !important;
color: var(--bs-body-color) !important;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

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

[data-bs-theme="dark"] .flatpickr-day {
color: var(--bs-body-color) !important;
border-color: transparent !important;
}

[data-bs-theme="dark"] .flatpickr-day:hover {
background-color: var(--bs-secondary-bg) !important;
border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .flatpickr-day.selected {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .flatpickr-day.today {
border-color: var(--bs-primary) !important;
color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .flatpickr-day.today.selected {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-white) !important;
}

/* Range selection dark mode styling */
[data-bs-theme="dark"] .flatpickr-day.inRange {
background-color: rgba(13, 110, 253, 0.2) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-white) !important;
}

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

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

[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
background-color: var(--bs-dark) !important;
color: var(--bs-body-color) !important;
border-color: var(--bs-border-color) !important;
}

/* Enhanced flatpickr dark mode for months, years and time */
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month .cur-year,
[data-bs-theme="dark"] .numInputWrapper input {
background-color: var(--bs-dark) !important;
color: var(--bs-body-color) !important;
border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .flatpickr-time input {
background-color: var(--bs-dark) !important;
color: var(--bs-body-color) !important;
border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-next-month svg {
fill: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .flatpickr-am-pm {
color: var(--bs-body-color) !important;
}

/* Light mode range styling for consistency */
.flatpickr-day.inRange {
background-color: rgba(13, 110, 253, 0.1) !important;
border-color: var(--bs-primary) !important;
}

.flatpickr-day.startRange,
.flatpickr-day.endRange {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .flatpickr-current-month span.cur-month {
color: var(--bs-body-color) !important;
}

/* Previous/next month days styling */
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay {
color: var(--bs-secondary-color) !important;
}

/* Disabled days */
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled {
color: var(--bs-tertiary-color) !important;
}

/* Range selection support (for dashboard date picker) */
[data-bs-theme="dark"] .flatpickr-day.inRange {
background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
border-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange {
background-color: var(--bs-primary) !important;
color: var(--bs-white) !important;
border-color: var(--bs-primary) !important;
}

/* Time picker styling */
[data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm {
color: var(--bs-body-color) !important;
}

/* Maintain event highlighting indicators in dark mode */
[data-bs-theme="dark"] .flatpickr-day[title*="Event"] {
position: relative !important;
}

[data-bs-theme="dark"] .flatpickr-day[title*="vollständig"] {
font-weight: bold !important;
}

[data-bs-theme="dark"] .flatpickr-day[title*="benötigt"] {
font-weight: bold !important;
}

/* Preserve custom datepicker event styling in dark mode */
[data-bs-theme="dark"] .flatpickr-day[style*="background-color: #ffebee"] {
/* In dark mode, adjust the event date styling to be more visible */
background-color: #4a3838 !important;
color: #ff6b6b !important;
}
/* Toast notification system - consistent positioning and styling */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1050;
max-width: 380px;
width: 100%;
}

@media (max-width: 576px) {
.toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
}
}

.custom-toast {
margin-bottom: 0.75rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 1px solid transparent;
animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
from {
    transform: translateX(100%);
    opacity: 0;
}
to {
    transform: translateX(0);
    opacity: 1;
}
}

.custom-toast.removing {
animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideOutRight {
from {
    transform: translateX(0);
    opacity: 1;
}
to {
    transform: translateX(100%);
    opacity: 0;
}
}

/* Pulse animation for running time tracking */
@keyframes pulse {
0% {
    opacity: 1;
}
50% {
    opacity: 0.3;
}
100% {
    opacity: 1;
}
}

.custom-toast .toast-icon {
font-size: 1.1rem;
margin-right: 0.5rem;
display: inline-flex;
align-items: center;
}

.custom-toast .btn-close {
font-size: 0.85rem;
}

/* Toast action buttons (for PDF share, etc.) */
.custom-toast .btn-sm {
padding: 0.25rem 0.75rem;
font-size: 0.85rem;
border-radius: 6px;
font-weight: 500;
}

.custom-toast .btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}

.custom-toast .btn-primary:hover {
background-color: #0b5ed7;
border-color: #0a58ca;
}

/* Dark mode toast styling */
[data-bs-theme="dark"] .custom-toast {
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .custom-toast .btn-primary {
background-color: #0d6efd;
border-color: #0d6efd;
}

[data-bs-theme="dark"] .custom-toast .btn-primary:hover {
background-color: #0b5ed7;
border-color: #0a58ca;
}

/* Confirmation modal styling improvements */
.confirmation-modal .modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.confirmation-modal .modal-header {
border-bottom: 1px solid var(--bs-border-color);
padding: 1.5rem 1.5rem 1rem;
}

.confirmation-modal .modal-body {
padding: 1rem 1.5rem 1.5rem;
}

.confirmation-modal .modal-footer {
border-top: none;
padding: 0 1.5rem 1.5rem;
}

[data-bs-theme="dark"] .confirmation-modal .modal-content {
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Smooth theme transitions */
* {
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* ===== GROUPS SECTION DARK MODE ===== */
/* Dark mode support for group sections on forms */
[data-bs-theme="dark"] .card.bg-light {
background-color: var(--bs-gray-800) !important;
border-color: var(--bs-gray-700) !important;
}

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

[data-bs-theme="dark"] .card.bg-light .form-check-label {
color: var(--bs-body-color);
}

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

/* Ensure form checks are visible in dark mode */
[data-bs-theme="dark"] .form-check-input {
background-color: var(--bs-gray-700);
border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .form-check-input:checked {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}

/* ===== TAG INPUT COMPONENT ===== */
.tag-input-container {
min-height: 42px;
padding: 0.375rem 0.5rem;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
align-items: center;
cursor: text;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tag-input-container.focused {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .tag-input-container.focused {
border-color: #6ea8fe;
box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

.tag-input-tags {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
align-items: center;
}

.tag-input-tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
background-color: var(--bs-primary);
color: white;
border-radius: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
gap: 0.25rem;
}

.tag-input-tag.locked {
background-color: var(--bs-secondary);
padding-right: 0.5rem;
}

.tag-label {
line-height: 1.2;
}

.tag-remove {
background: none;
border: none;
color: white;
padding: 0;
margin-left: 0.25rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
transition: background-color 0.15s ease;
}

.tag-remove:hover {
background-color: rgba(255, 255, 255, 0.2);
}

.tag-remove i {
font-size: 0.625rem;
}

.tag-input-field-wrapper {
flex: 1;
min-width: 120px;
position: relative;
}

.tag-input-field {
width: 100%;
border: none;
outline: none;
background: transparent;
padding: 0.25rem 0;
font-size: 1rem;
color: var(--bs-body-color);
}

.tag-input-field::placeholder {
color: var(--bs-secondary-color);
opacity: 0.7;
}

.tag-input-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 0.25rem;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.375rem;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
display: none;
}

[data-bs-theme="dark"] .tag-input-dropdown {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.tag-input-dropdown-item {
padding: 0.5rem 0.75rem;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.15s ease;
color: var(--bs-body-color);
}

.tag-input-dropdown-item:hover {
background-color: var(--bs-tertiary-bg);
}

.tag-input-dropdown-item:first-child {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}

.tag-input-dropdown-item:last-child {
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}

/* Scrollbar styling for dropdown */
.tag-input-dropdown::-webkit-scrollbar {
width: 6px;
}

.tag-input-dropdown::-webkit-scrollbar-track {
background: transparent;
}

.tag-input-dropdown::-webkit-scrollbar-thumb {
background-color: var(--bs-border-color);
border-radius: 3px;
}

.tag-input-dropdown::-webkit-scrollbar-thumb:hover {
background-color: var(--bs-secondary-color);
}