:root {
    /* Modern B2B SaaS Color Palette */
    --primary-color: #4F46E5; /* Indigo - Modern, professional primary color */
    --primary-light: #6366F1; /* Lighter indigo for hover states */
    --primary-dark: #4338CA; /* Darker indigo for active states */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Purple gradient */

    /* Secondary Color Palette */
    --secondary-color: #0EA5E9; /* Sky blue - Fresh, trustworthy */
    --secondary-light: #38BDF8; /* Lighter sky blue */
    --secondary-dark: #0284C7; /* Darker sky blue */

    /* Neutral Colors */
    --background-color: #FFFFFF; /* Pure white */
    --background-light: #F9FAFB; /* Very light gray - modern off-white */
    --background-dark: #F3F4F6; /* Light gray for cards */
    --background-darker: #E5E7EB; /* Medium gray for borders */
    --background-secondary: #FFFFFF;
    --hover-background: #EEF2FF;

    /* Text Colors */
    --text-color: #111827; /* Almost black - high contrast */
    --text-secondary: #6B7280; /* Medium gray for secondary text */
    --text-light: #9CA3AF; /* Light gray for tertiary text */
    --text-white: #FFFFFF; /* White text */

    /* Border and Shadow */
    --border-color: #E5E7EB; /* Light gray borders */
    --border-light: #F3F4F6; /* Very light borders */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Status Colors */
    --success-color: #10B981; /* Emerald green */
    --success-light: #34D399;
    --success-dark: #059669;
    --warning-color: #F59E0B; /* Amber */
    --warning-light: #FBBF24;
    --error-color: #EF4444; /* Red */
    --error-light: #F87171;
    --danger-color: #DC3545; /* Red for danger actions */
    --info-color: #3B82F6; /* Blue */

    /* Accent Colors */
    --accent-purple: #8B5CF6; /* Violet */
    --accent-pink: #EC4899; /* Pink */
    --accent-orange: #F97316; /* Orange */
    --accent-teal: #14B8A6; /* Teal */
    
    /* Design System */
    --border-radius-sm: 6px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --transition-speed: 0.2s;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Legacy Variable Aliases (for backwards compatibility) */
    --light-color: var(--text-white);
    --hover-color: var(--primary-color);
    --logo-blue: var(--primary-color);
}

/* Mobile auth section - hidden by default */
.mobile-auth-section {
  display: none;
}

/* Ensure profile/auth items visible inside mobile menu when logged in */
#mobile-menu .mobile-auth-section.show {
    display: block;
}

/* Mobile touch improvements */
.hero-progress-card,
.stat-item,
.certificate-preview,
.certificate-btn,
.certificate-item,
.button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    touch-action: manipulation;
}

.hero-progress-card:active,
.stat-item:active,
.certificate-preview:active,
.certificate-btn:active,
.certificate-item:active,
.button:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Mobile-specific improvements for certificate buttons */
@media (max-width: 768px) {
    /* Disable certificates card interaction on mobile */
    #certificates-card {
        cursor: default;
        pointer-events: none;
    }
    
    .certificate-btn,
    .certificate-item .button {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 8px;
        border: none;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        color: white;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(125, 90, 61, 0.2);
        transition: all 0.3s ease;
    }
    
    .certificate-btn:hover,
    .certificate-item .button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(125, 90, 61, 0.3);
    }
    
    .certificate-btn:disabled,
    .certificate-item .button:disabled {
        background: var(--background-darker);
        color: var(--text-light);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

header {
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 999;
    background: var(--background-color);
    color: var(--text-color);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-speed) var(--transition-ease);
}

header.scrolled {
    padding: 0.75rem 0;
    box-shadow: var(--shadow-md);
}
header .container {
    display: flex;
    align-items: center;        /* Vertically center everything */
    justify-content: space-between; /* Spread out branding + nav */
}

.auth-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    margin-left: 2rem;
}

.auth-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-btn.secondary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.auth-btn {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 0;
    margin-right: 0.5rem;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(30, 60, 114, 0.3);
}

#user-info {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

#user-info .welcome-text {
    margin-right: 1rem;
    margin-right: 1.25rem;
}

#user-name {
    font-weight: 700;
    color: var(--primary-light);
}

/* Login Modal Styles */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.login-modal.show {
    opacity: 1;
    visibility: visible;
}

.login-modal-content {
    background: white;
    border-radius: 20px;
    padding: 0;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(-20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.login-modal.show .login-modal-content {
    transform: scale(1) translateY(0);
}

.login-modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 30px;
    text-align: center;
    position: relative;
}

.login-modal-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.close-login-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.close-login-modal:hover {
    background: rgba(255, 255, 255, 0.2);
}

.login-modal-body {
    padding: 40px;
}

.login-form {
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}

.login-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-white);
    border: none;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.login-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 60, 114, 0.3);
}

.login-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.login-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 0.9rem;
    border-left: 4px solid var(--error-color);
}

.login-divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
}

.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.login-divider span {
    background: var(--background-color);
    padding: 0 15px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.google-login-section {
    text-align: center;
}

.google-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--background-color);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.google-login-btn:hover {
    background: var(--background-light);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.google-login-btn img {
    width: 20px;
    height: 20px;
}

.login-modal-footer {
    background: var(--background-light);
    padding: 20px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.login-modal-footer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.login-modal-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.login-modal-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .login-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .login-modal-header {
        padding: 25px 20px;
    }
    
    .login-modal-header h2 {
        font-size: 1.5rem;
    }
    
    .login-modal-body {
        padding: 30px 20px;
    }
}

/* Invitation Modal Styles */
.invitation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.invitation-modal.show {
    opacity: 1;
    visibility: visible;
}

.invitation-modal-content {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(-20px);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.invitation-modal.show .invitation-modal-content {
    transform: scale(1) translateY(0);
}

.invitation-modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invitation-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.close-invitation-modal {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.close-invitation-modal:hover {
    background: rgba(255, 255, 255, 0.2);
}

.invitation-modal-body {
    padding: 2rem;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
}

.invitation-form {
    margin-bottom: 0;
}

.invite-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
}

.invite-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
}

.invite-submit-btn .btn-text { color: #fff; }

.invite-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.invite-success {
    background: #d1fae5;
    color: #065f46;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.875rem;
    border-left: 4px solid #10b981;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.invite-success i {
    font-size: 1.125rem;
    color: #10b981;
}

.invite-error {
    background: #fee2e2;
    color: #991b1b;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.875rem;
    border-left: 4px solid #ef4444;
}

.invitation-modal-footer {
    background: #f9fafb;
    padding: 1.25rem 2rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.invite-role-assignments-panel {
    max-height: 340px;
    overflow-y: auto;
}

.invite-role-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(200px, 215px);
    gap: 0.9rem 1rem;
    align-items: start;
    padding: 0.95rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.invite-role-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.08);
    transform: translateY(-1px);
}

.invite-role-card-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 0.15rem;
}

.invite-role-card-checkbox input[type="checkbox"] {
    margin: 0;
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
}

.invite-role-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
}

.invite-role-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}

.invite-role-card-meta {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #64748b;
}

.invite-role-card-select {
    min-width: 0;
}

.invite-role-card-select label {
    display: block;
    margin: 0 0 0.4rem 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-color);
}

.invite-role-card-select select {
    width: 100%;
}

.invite-role-card-note {
    grid-column: 2 / -1;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.invite-role-card-note-annual {
    color: var(--warning-dark, #c2410c);
}

.invite-role-card-note-initial {
    color: var(--text-secondary);
}

@media (max-width: 760px) {
    .invite-role-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .invite-role-card-select {
        grid-column: 2;
    }

    .invite-role-card-note {
        grid-column: 1 / -1;
    }
}

.invitation-modal-footer p {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}

.invite-link-helper {
    margin-top: 0.85rem;
    text-align: left;
}

.invite-link-label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    color: var(--text-color);
}

.invite-link-note {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
}

.copy-field-input {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: var(--background-color);
    color: var(--text-color);
}

.invite-reference-card {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.invite-reference-card-accent {
    background: #f8fafc;
    border-color: #dbeafe;
}

.invite-reference-card-neutral {
    background: #ffffff;
    border-color: #e5e7eb;
}

.invite-reference-card-title {
    margin: 0 0 0.75rem 0;
    color: #1f2937;
}

.invite-reference-card-copy {
    margin: 0 0 0.75rem 0;
    color: #475569;
    line-height: 1.6;
}

.invite-reference-card-code {
    margin: 0 0 0.75rem 0;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    color: #1f2937;
}

.annual-category-fields {
    display: none;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
}

.annual-category-fields label {
    color: var(--text-color);
}

.annual-category-fields small {
    color: #9a3412;
}

.role-annual-family-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    border-radius: 12px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.role-annual-family-card:hover {
    border-color: #fb923c;
    box-shadow: 0 10px 22px rgba(154, 52, 18, 0.08);
    transform: translateY(-1px);
}

.role-annual-family-card.is-selected {
    border-color: #fb923c;
    background: #ffedd5;
    box-shadow: 0 12px 24px rgba(194, 65, 12, 0.12);
}

.role-annual-family-card:has(input[type="checkbox"]:checked) {
    border-color: #fb923c;
    background: #ffedd5;
    box-shadow: 0 12px 24px rgba(194, 65, 12, 0.12);
}

.role-annual-family-card input[type="checkbox"] {
    margin: 0;
    width: 1rem;
    height: 1rem;
    accent-color: #ea580c;
}

.role-annual-family-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.role-annual-family-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #9a3412;
}

.role-annual-family-summary {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #b45309;
}

.role-annual-family-cycle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 104px;
    text-align: right;
}

.role-annual-family-cycle-label {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c2410c;
}

.role-annual-family-cycle-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #9a3412;
}

@media (max-width: 640px) {
    .role-annual-family-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .role-annual-family-cycle {
        grid-column: 2;
        align-items: flex-start;
        min-width: 0;
        text-align: left;
    }
}

.category-delete-review-alert {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.18);
}

.category-delete-review-alert i {
    color: var(--error-color);
    font-size: 1.15rem;
    margin-top: 0.15rem;
}

.category-delete-review-alert h3 {
    margin: 0 0 0.35rem;
    color: var(--text-color);
    font-size: 1.05rem;
}

.category-delete-review-alert p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.category-delete-review-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}

.category-delete-review-stat {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
}

.category-delete-review-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
}

.category-delete-review-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.category-delete-review-note,
.category-delete-review-selection-summary {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.category-delete-review-selection-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0.85rem;
}

.category-delete-review-selection-tools-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.category-delete-review-list {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-light);
    overflow: hidden;
}

.category-delete-review-item {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
}

.category-delete-review-item:last-child {
    border-bottom: none;
}

.category-delete-review-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.category-delete-review-item-main {
    flex: 1;
    min-width: 0;
}

.category-delete-review-item-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.category-delete-review-item-description {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

.category-delete-review-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.category-delete-review-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 600;
}

.category-delete-review-badge.neutral {
    background: rgba(107, 114, 128, 0.14);
    color: var(--text-secondary);
}

.category-delete-review-empty {
    padding: 1.25rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    background: var(--background-light);
    text-align: center;
}

@media (max-width: 768px) {
    .invitation-modal-content {
        width: 95%;
        max-height: 95vh;
        margin: 20px;
    }
    
    .invitation-modal-header {
        padding: 1.25rem 1rem;
    }
    
    .invitation-modal-header h2 {
        font-size: 1.25rem;
    }
    
    .invitation-modal-body {
        padding: 1.5rem 1rem;
        max-height: calc(95vh - 160px);
    }
    
    .invitation-modal-footer {
        padding: 1rem;
    }
}

/* Admin Dashboard Styles */
#admin-dashboard {
    padding: 4rem 0 2rem 0;
    background: linear-gradient(135deg, var(--background-light) 0%, var(--background-dark) 100%);
    min-height: 100vh;
    margin-top: 2rem;
}

.admin-header {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 2rem;
    padding-top: 2rem;
}

.table-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.invite-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.invite-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(40, 167, 69, 0.3);
}

.admin-header h1 {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.refresh-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.refresh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(30, 60, 114, 0.3);
}

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

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.admin-management-section {
    margin-bottom: 3.5rem;
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.admin-management-header {
    max-width: 720px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

.admin-management-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.admin-management-header p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.admin-management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
}

.management-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-speed) var(--transition-ease);
    text-decoration: none;
    color: inherit;
}

.management-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(14, 165, 233, 0.05));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--transition-ease);
}

.management-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.management-card:hover::after {
    opacity: 1;
}

.management-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.management-icon.course {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
}

.management-icon.caregiver {
    background: linear-gradient(135deg, #FF6B35, #ff8b5f);
}

.management-icon.client {
    background: linear-gradient(135deg, #28a745, #52c765);
}

.management-icon.agency {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

.management-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0;
}

.management-card p {
    color: var(--text-secondary);
    line-height: 1.65;
    flex-grow: 1;
    margin: 0;
}

.management-meta {
    display: flex;
    justify-content: flex-start;
}

.management-pill {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.management-pill i {
    font-size: 0.85rem;
}

.management-pill.active {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

/* Course Management Styles */
#course-management-view {
    padding: 2rem 0;
}

.course-mgmt-header {
    margin-bottom: 2rem;
}

/* New Page Header with Actions Layout */
.page-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    gap: 2rem;
}

.page-header-left {
    flex: 1;
}

.page-header-right {
    display: flex;
    align-items: center;
}

.page-title-group {
    margin-top: 1rem;
}

.page-title-group h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.page-title-group p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
}

.back-btn {
    background: transparent;
    border: 2px solid var(--primary-dark);
    color: var(--primary-dark);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.back-btn:hover {
    background: var(--primary-color);
    color: var(--text-white);
    transform: translateX(-3px);
}

.course-mgmt-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.course-mgmt-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.course-mgmt-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.course-tab {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.course-tab:hover {
    color: var(--primary-color);
    background: rgba(79, 70, 229, 0.05);
}

.course-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.course-tab i {
    font-size: 1.1rem;
}

.course-tab-content {
    display: none;
}

.course-tab-content.active {
    display: block;
}

.course-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tab-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tab-header-left h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.count-badge {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.625rem 1.25rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background: var(--background-dark);
    border-color: var(--border-color);
}

.course-filters {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.filter-group {
    flex: 1;
}

.filter-group label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 2rem;
    padding: 0.5rem 0;
}

/* Ensure cards have equal height in grid */
.courses-grid > .super-admin-course-card {
    display: flex;
}

/* Ensure proper background for the section */
.super-admin-section {
    background: transparent;
}

/* Make sure courses grid only displays cards */
#courses-container.courses-grid {
    min-height: 400px;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.empty-state i {
    font-size: 4rem;
    color: var(--primary-color);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.categories-list {
    display: grid;
    gap: 1rem;
}

.assignment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.assignment-card {
    background: var(--background-color);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.assignment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.assignment-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.assignment-icon i {
    font-size: 2rem;
    color: white;
}

.assignment-card h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.assignment-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.assignment-card .btn-secondary {
    width: 100%;
    justify-content: center;
}

.assignment-history {
    background: var(--background-color);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
}

.assignment-history h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* Course Builder Modal Styles */
.course-builder-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    overflow-y: auto;
}

.course-builder-modal.active {
    display: block;
}

.course-builder-container {
    background: var(--background-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.course-builder-header {
    background: var(--background-color);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.builder-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.builder-header-left h2 {
    font-size: 1.75rem;
    color: var(--primary-color);
    margin: 0;
}

.builder-header-right {
    display: flex;
    gap: 1rem;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.625rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 42px;
    height: 42px;
}

.btn-icon:hover {
    background: var(--background-light);
    border-color: var(--border-light);
}

.btn-icon i {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

/* Table action buttons */
.btn-icon-table {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

.btn-icon-table:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.btn-icon-table i {
    color: var(--text-white);
    font-size: 0.9rem;
}

/* Danger variant for delete buttons */
.btn-icon-table.btn-icon-danger {
    background: var(--error-color);
}

.btn-icon-table.btn-icon-danger:hover {
    background: var(--error-light);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.course-builder-body {
    display: flex;
    flex: 1;
    gap: 2rem;
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* Left Sidebar: Element Palette */
.builder-sidebar {
    width: 280px;
    background: var(--background-color);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    height: fit-content;
    position: sticky;
    top: 100px;
    border: 1px solid var(--border-color);
}

.builder-sidebar h3 {
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

.sidebar-help {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.element-palette {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.palette-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.palette-item:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.palette-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    flex-shrink: 0;
}

.palette-icon i {
    font-size: 1.25rem;
    color: white;
}

.palette-icon.youtube {
    background: linear-gradient(135deg, #ff0000, #cc0000);
}

.palette-icon.pdf {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.palette-icon.image {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.palette-icon.quiz {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.palette-icon.group {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.palette-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.palette-info strong {
    font-size: 0.9375rem;
    color: var(--text-color);
}

.palette-info span {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Main Content Area */
.builder-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.course-metadata {
    background: var(--background-color);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
}

.course-metadata h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.required {
    color: var(--error-color);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #1e3c72;
    box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group small {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
}

.field-error {
    font-size: 0.8125rem;
    color: var(--error-color);
    margin-top: 0.375rem;
    display: none;
}

.field-error.active {
    display: block;
}

.form-group select[multiple] {
    min-height: 120px;
}

/* Course Elements Section */
.course-elements-section {
    background: var(--background-color);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
}

.elements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.elements-header h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 0;
}

.elements-count {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.elements-dropzone {
    min-height: 400px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.elements-dropzone.drag-over {
    border-color: #1e3c72;
    background: rgba(30, 60, 114, 0.05);
}

.dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 350px;
    color: #999;
}

.dropzone-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ddd;
}

.dropzone-empty p {
    font-size: 1.125rem;
    margin: 0;
}

/* Course Element Cards */
.course-element {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.course-element:hover {
    border-color: var(--primary-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.course-element:last-child {
    margin-bottom: 0;
}

.element-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.element-type {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
}

.element-type i {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.element-actions {
    display: flex;
    gap: 0.5rem;
}

.element-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
}

.element-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #bbb;
}

.element-btn i {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.element-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}

.element-btn:disabled i {
    color: var(--text-light);
}

.element-btn.move-up,
.element-btn.move-down {
    border-color: var(--border-color);
}

.element-btn.move-up:hover:not(:disabled),
.element-btn.move-down:hover:not(:disabled) {
    background: #e3f2fd;
    border-color: var(--primary-color);
}

.element-btn.move-up:hover:not(:disabled) i,
.element-btn.move-down:hover:not(:disabled) i {
    color: var(--primary-color);
}

.element-btn.drag-handle {
    cursor: grab;
}

.element-btn.drag-handle:active {
    cursor: grabbing;
}

.element-btn.delete:hover {
    background: #fff5f5;
    border-color: #e74c3c;
}

.element-btn.delete:hover i {
    color: #e74c3c;
}

.element-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Quiz Options Styling */
.quiz-options-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-options-container > label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.quiz-option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quiz-option-row input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.quiz-option-row .quiz-option-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.quiz-option-row .quiz-option-input:focus {
    outline: none;
    border-color: #1e3c72;
    box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}

/* Text Headline Styling */
.text-headline {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3c72;
    margin: 0 0 1rem 0;
}

/* Image Size Classes - Match existing training illustration style */
.preview-image-small,
.preview-image-medium,
.preview-image-large {
    max-width: 60%;
    height: auto;
    border-radius: 12px;
    border: 3px solid var(--primary-color);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    margin: 20px auto;
}

.preview-image-small:hover,
.preview-image-medium:hover,
.preview-image-large:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness for preview images */
@media (max-width: 768px) {
    .preview-image-small,
    .preview-image-medium,
    .preview-image-large {
        max-width: 80%;
        border-width: 2px;
    }
}

@media (max-width: 480px) {
    .preview-image-small,
    .preview-image-medium,
    .preview-image-large {
        max-width: 90%;
        border-width: 2px;
    }
}

/* Group Element Styling */
.group-elements-section {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    background: var(--background-light);
}

.group-elements-section > label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    display: block;
}

.group-elements-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.group-element-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.group-element-item i:first-child {
    color: var(--primary-dark);
    font-size: 1.125rem;
}

.group-element-item span {
    flex: 1;
    font-weight: 500;
    color: var(--text-color);
}

/* Upload Progress Indicator */
.upload-progress {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--background-darker);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
}

.file-upload-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.file-upload-section .file-name {
    color: var(--success-color);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.form-divider {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    margin: 1rem 0;
    position: relative;
}

.form-divider::before,
.form-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--border-color);
}

.form-divider::before {
    left: 0;
}

.form-divider::after {
    right: 0;
}

/* Category Modal Styles */
.color-picker {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.color-picker input[type="color"] {
    width: 60px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
}

.color-picker #category-color-value {
    font-family: 'Courier New', monospace;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    background: var(--background-light);
    border-radius: 6px;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Category Card Styles */
.category-card {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.category-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.category-card:last-child {
    margin-bottom: 0;
}

.category-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.category-color-badge {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-color-badge i {
    font-size: 1.5rem;
    color: white;
}

.category-details {
    flex: 1;
}

.category-details h4 {
    font-size: 1.125rem;
    color: var(--text-color);
    margin: 0 0 0.25rem 0;
}

.category-details p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.category-hours-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--primary-color);
    margin: 0.5rem 0;
}

.category-hours-display i {
    font-size: 1rem;
}

.category-hours-display strong {
    color: var(--primary-color);
    font-size: 1.125rem;
}

.category-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-status {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.category-status.active {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.category-status.archived {
    background: var(--background-darker);
    color: var(--text-secondary);
}

.category-actions {
    display: flex;
    gap: 0.5rem;
}

.category-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
}

.category-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.category-btn i {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.category-btn.archive:hover {
    background: #fff5f5;
    border-color: #e74c3c;
}

.category-btn.archive:hover i {
    color: #e74c3c;
}

.category-btn.delete:hover {
    background: #fff5f5;
    border-color: #e74c3c;
}

.category-btn.delete:hover i {
    color: #e74c3c;
}

/* Categories Subsection Headers */
.categories-subsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--background-light), var(--background-dark));
    border-radius: 12px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary-dark);
}

.categories-subsection-header.archived {
    border-left-color: var(--text-light);
}

.categories-subsection-header.standalone {
    border-left-color: #6c757d;
}

.categories-subsection-header.standalone h3 i {
    color: #6c757d;
}

.standalone-course-card .category-color-badge {
    background: #6c757d !important;
}

.categories-subsection-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.categories-subsection-header h3 i {
    color: var(--primary-dark);
}

.categories-subsection-header.archived h3 i {
    color: var(--text-light);
}

.subsection-count {
    background: var(--primary-color);
    color: var(--text-white);
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.categories-subsection-header.archived .subsection-count {
    background: var(--text-light);
}

/* Floating Back Button */
.floating-back-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
    transition: all 0.3s ease;
    z-index: 9999;
}

.floating-back-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(30, 60, 114, 0.4);
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
}

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

.floating-back-btn i {
    font-size: 1.1rem;
}

.floating-back-btn span {
    font-size: 0.95rem;
}

/* Responsive floating button */
@media (max-width: 768px) {
    .floating-back-btn {
        bottom: 1rem;
        right: 1rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    .floating-back-btn span {
        display: none;
    }
    
    .floating-back-btn i {
        font-size: 1.25rem;
    }
}

/* Training Management Cards */
.training-mgmt-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.training-mgmt-card {
    background: var(--background-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.training-mgmt-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.training-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
}

.training-card-icon.course {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.training-card-icon.progress {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.training-card-icon.invite {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.training-card-icon.reports {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.training-card-icon.notifications {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.training-mgmt-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.training-mgmt-card p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.card-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--background-light);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.card-badge i {
    color: var(--primary-color);
}

.training-progress-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Responsive for Training Management */
@media (max-width: 768px) {
    .training-mgmt-cards {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .training-mgmt-card {
        padding: 1.5rem;
    }
    
    .training-card-icon {
    width: 60px;
    height: 60px;
        font-size: 1.5rem;
    }
}

/* Agency Profile Management */
.agency-profile-section {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.agency-profile-card {
    background: var(--background-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.agency-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-white);
}

.agency-profile-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
}

.agency-profile-content {
    padding: 2rem;
}

/* Display Mode */
.profile-display {
    display: block;
}

.profile-logo-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--background-light);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.profile-logo-preview {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--primary-color);
    overflow: hidden;
}

.profile-logo-preview i {
    font-size: 3rem;
    color: var(--primary-color);
}

.profile-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-logo-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.profile-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.profile-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.profile-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-info-item.full-width {
    grid-column: 1 / -1;
}

.profile-info-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.profile-info-item label i {
    color: var(--primary-color);
}

.profile-info-item p {
    margin: 0;
    color: #212529;
    font-size: 1rem;
    padding: 0.75rem;
    background: var(--background-light);
    border-radius: 6px;
}

/* Edit Mode */
.profile-edit {
    display: none;
}

.logo-upload-section {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 8px;
}

.logo-preview {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed #dee2e6;
    overflow: hidden;
    flex-shrink: 0;
}

.logo-preview i {
    font-size: 3rem;
    color: #adb5bd;
}

.logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-upload-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.logo-upload-controls small {
    color: #6c757d;
    font-size: 0.85rem;
}

.profile-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-info-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-logo-section,
    .logo-upload-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .agency-profile-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .profile-edit-actions {
        flex-direction: column;
    }
    
    .profile-edit-actions button {
        width: 100%;
    }
}

/* Category Viewer Modal Styles */
.category-viewer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    overflow-y: auto;
}

.category-viewer-modal.active {
    display: block;
}

.category-viewer-container {
    background: #f5f7fa;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
}

.category-viewer-header {
    background: white;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.category-viewer-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.category-viewer-color {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-viewer-title h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
}

.category-viewer-hours {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.category-viewer-hours i {
    color: var(--primary-color);
}

.category-viewer-hours strong {
    color: #1e3c72;
    font-size: 1.25rem;
}

.category-viewer-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.category-viewer-description {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    font-size: 1.125rem;
    line-height: 1.6;
    color: #444;
}

.category-viewer-courses-section h3 {
    font-size: 1.5rem;
    color: #1e3c72;
    margin-bottom: 1rem;
}

.viewer-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.viewer-course-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 1rem;
    align-items: start;
    transition: all 0.3s ease;
}

.viewer-course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.viewer-course-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    flex-shrink: 0;
}

.viewer-course-icon i {
    font-size: 1.5rem;
    color: white;
}

.viewer-course-info {
    flex: 1;
}

.viewer-course-info h4 {
    font-size: 1.125rem;
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
}

.viewer-course-info p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.viewer-course-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Temporal Restriction Styles */
.temporal-restriction-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.temporal-restriction-section label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
}

.temporal-restriction-section input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.temporal-restriction-section small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

#temporal-restriction-fields {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* Wave Badge Styles */
.wave-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wave-badge-wave-1 {
    background: #d4edda;
    color: #155724;
}

.wave-badge-wave-2 {
    background: #fff3cd;
    color: #856404;
}

/* Disabled Course Styles */
.course-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.course-disabled td {
    color: var(--text-secondary);
}

.course-disabled-btn {
    background: var(--background-darker) !important;
    color: var(--text-secondary) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.course-disabled-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

.availability-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #856404;
}

.availability-message i {
    color: #f59e0b;
}

/* Dark Mode Styles for Temporal Restrictions */
[data-theme="dark"] .temporal-restriction-section {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .temporal-restriction-section label {
    color: var(--text-color);
}

[data-theme="dark"] .temporal-restriction-section label span {
    color: var(--text-color);
}

[data-theme="dark"] .temporal-restriction-section small {
    color: var(--text-secondary);
}

[data-theme="dark"] .temporal-restriction-section input[type="checkbox"] {
    accent-color: var(--primary-color);
}

[data-theme="dark"] #temporal-restriction-fields {
    background: var(--card-background) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] #temporal-restriction-fields .form-group label {
    color: var(--text-color);
}

[data-theme="dark"] #temporal-restriction-fields .form-group input[type="number"] {
    background: var(--background-dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] #temporal-restriction-fields .form-group input[type="number"]:focus {
    background: var(--background-light);
    border-color: var(--primary-color);
    color: var(--text-color);
}

[data-theme="dark"] #temporal-restriction-fields .form-group small {
    color: var(--text-secondary);
}

[data-theme="dark"] .course-disabled {
    opacity: 0.5;
}

[data-theme="dark"] .course-disabled-btn {
    background: var(--background-darker) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .availability-message {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .availability-message i {
    color: #fbbf24;
}

[data-theme="dark"] .wave-badge-wave-1 {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .wave-badge-wave-2 {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.viewer-course-hours {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #1e3c72;
    font-weight: 600;
}

.viewer-course-hours i {
    font-size: 1rem;
}

.viewer-course-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .category-viewer-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-viewer-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .category-viewer-title h2 {
        font-size: 1.5rem;
    }

    .viewer-courses-grid {
        grid-template-columns: 1fr;
    }
}

/* Category Viewer Modal - Dark Mode */
[data-theme="dark"] .category-viewer-container {
    background: var(--background-dark);
}

[data-theme="dark"] .category-viewer-header {
    background: var(--card-background);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .category-viewer-title h2 {
    color: var(--text-color);
}

[data-theme="dark"] .category-viewer-hours {
    color: var(--text-secondary);
}

[data-theme="dark"] .category-viewer-hours strong {
    color: var(--primary-light);
}

[data-theme="dark"] .category-viewer-description {
    background: var(--card-background);
    color: var(--text-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .category-viewer-courses-section h3 {
    color: var(--text-color);
}

[data-theme="dark"] .viewer-course-card {
    background: var(--card-background);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .viewer-course-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .viewer-course-info h4 {
    color: var(--text-color);
}

[data-theme="dark"] .viewer-course-info p {
    color: var(--text-secondary);
}

[data-theme="dark"] .viewer-course-hours {
    color: var(--primary-light);
}

/* Course Preview Modal Styles */
.course-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    overflow-y: auto;
}

.course-preview-modal.active {
    display: block;
}

.preview-container {
    background: #f5f7fa;
    min-height: 100vh;
    max-width: 900px;
    margin: 0 auto;
}

.preview-header {
    background: white;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.preview-header .btn-icon {
    margin-bottom: 1rem;
}

.preview-header h2 {
    font-size: 2rem;
    color: #1e3c72;
    margin: 0 0 1rem 0;
}

.preview-meta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.preview-hours {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 1rem;
}

.preview-hours i {
    color: #1e3c72;
}

.preview-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preview-category-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.preview-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.preview-description {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    font-size: 1.125rem;
    line-height: 1.6;
    color: #444;
}

.preview-elements {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.preview-element {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.preview-element-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.preview-element-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
}

.preview-element-icon i {
    font-size: 1.125rem;
    color: white;
}

.preview-element-type {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.preview-element-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

.preview-element-content.text {
    white-space: pre-wrap;
}
/* Apply to nested .text blocks inside preview content */
.preview-element-content .text {
    white-space: pre-wrap;
}

.preview-element-content iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 8px;
}

.preview-element-content embed {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 8px;
}

.preview-element-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.preview-quiz {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preview-quiz-question {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.preview-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-quiz-option {
    padding: 1rem;
    background: var(--background-light);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.preview-quiz-option.correct {
    background: #e8f5e9;
    border-color: #28a745;
}

.preview-quiz-option input[type="radio"] {
    pointer-events: none;
}

/* Preview Group Layouts */
.preview-group-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.preview-group-three-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.preview-group-text-left-image-right {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: center;
}

.preview-group-image-left-text-right {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: center;
}

.preview-group-item {
    display: flex;
    flex-direction: column;
}

.preview-group-item img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .preview-group-two-column,
    .preview-group-three-column,
    .preview-group-text-left-image-right,
    .preview-group-image-left-text-right {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .preview-header h2 {
        font-size: 1.5rem;
    }

    .preview-body {
        padding: 1rem;
    }

    .preview-element {
        padding: 1.5rem;
    }

    .preview-element-content iframe {
        height: 250px;
    }

    .preview-element-content embed {
        height: 400px;
    }
}

/* Bulk Assignment Modal Styles */
.info-banner {
    background: linear-gradient(135deg, #667eea20, #764ba220);
    border-left: 4px solid #667eea;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.info-banner i {
    color: #667eea;
    font-size: 1.25rem;
}

.info-banner span {
    color: #444;
    font-size: 0.9375rem;
}

.count-info {
    background: var(--background-light);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.count-info i {
    color: #1e3c72;
    font-size: 1.25rem;
}

.count-info span {
    color: #444;
    font-weight: 600;
}

.caregiver-search {
    position: relative;
    margin-bottom: 1rem;
}

.caregiver-search input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.caregiver-search i {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.caregiver-selection-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem;
}

/* Individual Course Assignment Modal - wider layout */
.individual-course-modal-content {
    max-width: 960px;
    width: 95%;
}

.course-groups-list,
#individual-course-groups {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 1rem;
    background: var(--background-light, #f9fafb);
}

/* Select Course section - improved UI */
.individual-course-group {
    margin-bottom: 1.25rem;
}

.individual-course-group:last-child {
    margin-bottom: 0;
}

.individual-course-group-header {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary-color);
    padding: 0.6rem 0.75rem;
    background: rgba(79, 70, 229, 0.08);
    border-radius: 8px 8px 0 0;
    border-left: 3px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.individual-course-group-header i {
    opacity: 0.9;
}

.individual-course-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--background-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.individual-course-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
}

.individual-course-option:hover {
    background: var(--background-light, #f9fafb);
}

.individual-course-option:has(input:checked) {
    background: rgba(79, 70, 229, 0.1);
    border-color: var(--primary-color);
}

.individual-course-option input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.individual-course-option-label {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-color, #111827);
}

.individual-course-option:has(input:checked) .individual-course-option-label {
    font-weight: 500;
}

@media (max-width: 768px) {
    .individual-course-options {
        grid-template-columns: 1fr;
    }
}

.caregiver-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.caregiver-item:hover {
    background: var(--background-light);
}

.caregiver-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.caregiver-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.caregiver-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9375rem;
}

.caregiver-email {
    font-size: 0.8125rem;
    color: #666;
}

.caregiver-title-badge {
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .course-builder-body {
        flex-direction: column;
    }

    .builder-sidebar {
        width: 100%;
        position: relative;
        top: 0;
    }

    .element-palette {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .palette-item {
        flex: 1 1 calc(33.333% - 1rem);
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .course-builder-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .builder-header-right {
        width: 100%;
        justify-content: flex-end;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .palette-item {
        flex: 1 1 100%;
    }

    .builder-header-left h2 {
        font-size: 1.5rem;
    }
}

.history-list {
    display: grid;
    gap: 1rem;
}

@media (max-width: 768px) {
    .page-header-with-actions {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .page-header-right {
        width: 100%;
    }

    .page-header-right .refresh-btn {
        width: 100%;
        justify-content: center;
    }

    .page-title-group h1 {
        font-size: 2rem;
    }

    .page-title-group p {
        font-size: 1rem;
    }

    .course-mgmt-header h1 {
        font-size: 2rem;
    }

    .course-mgmt-tabs {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }

    .course-tab {
        border-bottom: 1px solid #e1e5e9;
        border-left: 3px solid transparent;
        margin-bottom: 0;
        padding: 1rem;
    }

    .course-tab.active {
        border-left-color: #1e3c72;
        border-bottom-color: #e1e5e9;
    }

    .course-tab-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .tab-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .course-filters {
        flex-direction: column;
        gap: 1rem;
    }

    .courses-grid {
        grid-template-columns: 1fr;
    }

    .assignment-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-management-section {
        padding: 1.75rem 1.5rem;
    }

    .admin-management-header h2 {
        font-size: 1.9rem;
    }

    .admin-management-grid {
        gap: 1.25rem;
    }

    .management-card {
        padding: 1.65rem;
    }
}

.admin-stat-card {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all var(--transition-speed) var(--transition-ease);
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 1.5rem;
    color: white;
}

.stat-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.admin-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.training-progress-section {
    margin-bottom: 3rem;
}

.training-progress-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    text-align: center;
}

.training-progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.document-status-table-container {
    overflow-x: auto;
}

.document-status-recipient-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-status-recipient-progress,
.document-status-single-recipient,
.document-status-document-cell {
    font-weight: 600;
    color: var(--text-color);
}

.document-status-recipient-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.document-status-recipient-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.document-status-recipient-item i {
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.document-status-recipient-item.is-complete {
    color: #10b981;
}

.document-status-recipient-item.is-pending {
    color: #f59e0b;
}

.document-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: #fff;
}

.document-status-badge.is-completed {
    background: #10b981;
}

.document-status-badge.is-partial,
.document-status-badge.is-pending {
    background: #f59e0b;
}

.document-status-badge.is-expired {
    background: #ef4444;
}

.document-status-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.document-status-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.action-card {
    background: var(--background-color);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.action-header {
    margin-bottom: 1rem;
}

.action-header i {
    font-size: 2.5rem;
    color: #ff6b35;
    margin-bottom: 1rem;
}

.action-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.action-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 60, 114, 0.3);
}

.recent-activity {
    background: var(--background-color);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.recent-activity h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon i {
    font-size: 1rem;
    color: white;
}

.activity-content p {
    margin: 0 0 0.25rem 0;
    font-weight: 500;
    color: var(--text-color);
}

/* Caregiver Progress Table Styles */
.caregiver-progress-table {
    background: var(--background-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.caregiver-progress-table:hover {
    box-shadow: 0 8px 20px rgba(30, 60, 114, 0.2);
    border-color: #e9ecef;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.table-header h2 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 600;
}

.table-container {
    overflow-x: auto;
}

#training-mgmt-caregiver-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#caregiver-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#caregiver-table th,
#training-mgmt-caregiver-table th {
    background: var(--background-light);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #1e3c72;
    border-bottom: 2px solid #e9ecef;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#caregiver-table td,
#training-mgmt-caregiver-table td {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    color: #495057;
}

#caregiver-table tr:hover,
#training-mgmt-caregiver-table tr:hover {
    background: var(--background-light);
    transition: background 0.2s ease;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.completed {
    background: #d4edda;
    color: #155724;
}

.status-badge.in-progress {
    background: #fff3cd;
    color: #856404;
}

.status-badge.not-started {
    background: #f8d7da;
    color: #721c24;
}

.loading-message, .no-data {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 2rem;
}

.certificate-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.certificate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.certificate-btn i {
    font-size: 0.7rem;
}

.activity-time {
    font-size: 0.9rem;
    color: #666;
}

@media (max-width: 768px) {
    .admin-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .admin-actions {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .admin-header h1 {
        font-size: 2rem;
    }
    
    .admin-stat-card {
        padding: 1.5rem;
    }
    
    .action-card {
        padding: 1.5rem;
    }
}


header a {
    color: var(--light-color);
    text-decoration: none;
    text-transform: uppercase;
}

/* Turn your H1 into a flex container */
header #branding h1 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

header #branding h1 a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

header #branding h1 a:hover {
  color: var(--primary-light);
}

header #branding h1 a.highlight {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Style your logo image */
header #branding .logo {
  height: 40px;
  width: auto;
  margin-right: 10px;
}

/*header nav {
    float: right;
}*/

/* Default for desktop */
header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
  }
  
  .hamburger,
.close-menu {
  display: none;
}

  /* Override for mobile and tablet screens */
  @media (max-width: 1024px) {
    /* Hide desktop auth section for all hamburger menu screens */
    .auth-section {
      display: none;
    }
    
    /* Show mobile auth section only on mobile/tablet screens */
    .mobile-auth-section {
      display: block;
    }
    
  
  @media (min-width: 1025px) {
    /* Hide mobile auth section on desktop screens */
    .mobile-auth-section {
      display: none;
    }
  }
  
  .hamburger {
    display: block;
    font-size: 2rem;
    cursor: pointer;
    color: var(--primary-dark);
    z-index: 1100;
  }
  
    header nav ul {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 250px; /* tablet default */
      background-color: var(--background-color);
      box-shadow: -2px 0 12px var(--shadow-color);
      padding: 3rem 1.5rem 2rem 1.5rem;
      transform: translateX(100%);
      transition: transform var(--transition-speed) ease;
      z-index: 1000;
      gap: 1.25rem;
    }
  
    /* 👇 Slimmer for mobile */
    @media (max-width: 768px) {
      header nav ul {
        width: 200px;
        padding: 2.5rem 1rem 1.5rem 1rem;
      }
    }
  
    header nav ul.active {
      transform: translateX(0);
    }
  
    /* Close button */
    .close-menu {
        display: block;
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        font-size: 1.5rem;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--primary-dark);
        padding: 0.25rem;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1100;
    }
  
    header nav ul li a {
      color: var(--text-color);
      font-size: 1.1rem;
      text-decoration: none;
      padding: 0.6rem;
      display: block;
      border-radius: 6px;
      transition: background-color var(--transition-speed);
    }
  
    header nav ul li a:hover {
      background-color: var(--primary-light);
      color: var(--light-color);
    }

    header nav ul li a.coming-soon {
      color: #999;
      cursor: not-allowed;
      opacity: 0.6;
    }

    header nav ul li a.coming-soon:hover {
      background-color: transparent;
      color: #999;
    }
    
    /* Mobile auth section styles */
    .mobile-auth-section {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 2px solid var(--primary-light);
      background: linear-gradient(135deg, rgba(125, 90, 61, 0.05), rgba(160, 131, 97, 0.05));
      border-radius: 8px;
      padding: 1.5rem;
    }
    
    .mobile-user-welcome {
      margin-bottom: 1.25rem;
      font-size: 1.1rem;
      color: var(--text-color);
      font-weight: 600;
      text-align: center;
      padding: 0.75rem;
      background: rgba(30, 60, 114, 0.1);
      border-radius: 6px;
      border-left: 4px solid var(--primary-color);
    }
    
    .mobile-auth-buttons {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .mobile-auth-btn {
      background: linear-gradient(135deg, #1e3c72, #2a5298);
      color: white;
      border: none;
      padding: 0.875rem 1.25rem;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      text-decoration: none;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      display: block;
      box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
    }
    
    .mobile-auth-btn.secondary {
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      box-shadow: 0 2px 8px rgba(125, 90, 61, 0.2);
    }
    
    .mobile-auth-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(30, 60, 114, 0.3);
    }
    
    .mobile-auth-btn.secondary:hover {
      box-shadow: 0 5px 15px rgba(125, 90, 61, 0.3);
    }
    
    /* Responsive adjustments for mobile auth section */
    @media (max-width: 768px) {
      .mobile-auth-section {
        margin-top: 1.5rem;
        padding: 1.25rem;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
      }
      
      .mobile-user-welcome {
        font-size: 1rem;
        padding: 0.625rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      
      .mobile-auth-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    @media (max-width: 480px) {
      .mobile-auth-section {
        margin-top: 1.25rem;
        padding: 1rem;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
      }
      
      .mobile-user-welcome {
        font-size: 0.95rem;
        padding: 0.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
      }
      
      .mobile-auth-btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    @media (max-width: 375px) {
      .mobile-auth-section {
        margin-top: 1rem;
        padding: 0.875rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
      }
      
      .mobile-user-welcome {
        font-size: 0.9rem;
        padding: 0.4rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.2;
      }
      
      .mobile-auth-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  

header nav a {
    color: var(--text-color);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    transition: color var(--transition-speed);
}

header nav a:hover {
    color: var(--primary-color);
}

header .highlight, header .current a {
    color: var(--primary-color);
    font-weight: bold;
}


main {
    margin-top: 100px;
    flex: 1;
}

#hero {
    background: url('https://i.imgur.com/jF9stdX.jpg') no-repeat center center;
    background-size: cover;
    text-align: center;
    color: var(--light-color);
    padding: 7rem 0;
}

.hero-text {
    background: rgba(0, 0, 0, 0.5);
    padding: 2rem;
    border-radius: var(--border-radius);
}

#hero h2 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    color: var(--light-color);
    font-weight: bold;
}

#hero p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--light-color);
}
/*license box */
.license-box {
    background: rgba(0, 0, 0, 0.5); /* or another subtle color */
    margin: 1rem auto;
    max-width: 300px; /* keep it narrower than the full hero width */
    border-radius: var(--border-radius);
    text-align: center;
    color: var(--light-color);
    font-size: 1rem; /* slightly smaller text */
}
.phone-number a {
    font-weight: bold;
    text-transform: none; /* keep the phone number in normal case */
    color: var(--logo-blue);
    margin-right: 1.5rem;
}
.button {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--light-color);
    background: var(--secondary-color);
    padding: 0.7rem 1.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-speed);
    border-radius: var(--border-radius);
    font-weight: 600;
}

.button:hover {
    background-color: var(--hover-color);
    transform: translateY(-2px);
}

.button.secondary {
    background: var(--accent-color);
}

.button.secondary:hover {
    background-color: var(--accent-dark);
}

section {
    padding: 5rem 0;
    background-color: var(--light-color);
}

section h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-color);
    font-size: 2.8rem;
}

.section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.section-text {
    flex: 1;
    min-width: 300px;
    margin-right: 20px;
    font-size: 1.6rem;
    color: var(--text-light);
}

.section-image {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
}

.section-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

.service-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
}

.service-card {
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    box-shadow: 0 4px 6px var(--shadow-color);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    position: relative;
    width: calc(40% - 120px);
    height: 400px;
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.service-card h3 {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: var(--light-color);
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
}

.service-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color: var(--light-color);
    opacity: 0;
    transition: opacity var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: var(--border-radius);
}

.service-card:hover .overlay {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px var(--shadow-color);
}

.service-card a {
    color: inherit;
    text-decoration: none;
}

.service-card a:hover {
    text-decoration: none;
}

#process .intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    color: var(--text-light);
    font-size: 1.6rem;
}

.steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.step {
    flex-basis: 30%;
    text-align: center;
    padding: 2rem;
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: transform var(--transition-speed);
}

.step:hover {
    transform: translateY(-5px);
}

.step-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--secondary-color);
    color: var(--light-color);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 40px;
    margin-bottom: 1rem;
}

.step h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

#process .button {
    display: block;
    width: max-content;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .section-content {
        flex-direction: column;
    }

    .section-text {
        margin: 20px 0;
        padding-right: 0;
    }
    .section-image {
        margin: 20px 0;
        padding-left: 0;
    }
    
    .steps {
        flex-direction: column;
    }

    .step {
        margin-bottom: 2rem;
    }
}

#clients p, #caregivers p, #about p, #contact p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
    color: var(--text-color);
}

#clients ul, #caregivers ul {
    list-style: disc;
    margin: 0 auto;
    padding: 0 1.5rem;
    max-width: 800px;
}

#clients ul li, #caregivers ul li {
    margin-bottom: 1rem;
}

#contact form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

#contact form label {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

#contact form input, #contact form textarea {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

#contact form button {
    align-self: center;
    padding: 0.7rem 1.5rem;
    background: var(--secondary-color);
    color: var(--light-color);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background var(--transition-speed);
}

#contact form button:hover {
    background-color: var(--hover-color);
}

.form-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .form-loading-card {
    background-color: #ffffff;
    padding: 2rem 3rem;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: var(--secondary-color);
  }
  
  .form-loading-card p {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
  }
  
  /* Blue Check Spinner */
  .spinner {
    border: 5px solid rgba(0, 119, 255, 0.2); /* light blue */
    border-left-color: #0077FF; /* brand blue */
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (max-width: 600px) {
    .form-loading-card {
      width: 90%;
      padding: 1.5rem;
      font-size: 1rem;
    }
  
    .form-loading-card p {
      font-size: 1rem;
    }
  
    .spinner {
      width: 36px;
      height: 36px;
    }
  }
  
  #introduction p {
    line-height: 1.8;
    align-self: center;
    font-size: 1.2rem; /* default for mobile/tablet */
  }
  
  @media (min-width: 1025px) {
    #introduction p {
      font-size: 1.6rem;
    }
  }

footer {
    background-color: var(--primary-color);
    color: var(--light-color);
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

 @media (max-width: 768px) {
    header #branding,
    header #branding h1 {
        font-size: 25px;
    }
    header #branding .logo {
        display: none; /* Hide logo on mobile */
    }
    header nav,
    header nav li {
        float: none;
        text-align: center;
        display: block;
        margin-bottom: 0.5rem;
    }
    
    /* Mobile auth section improvements */
    .auth-section {
        gap: 0.5rem;
        padding: 0.25rem 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: 1rem;
    }
    
    .phone-number a {
        margin-right: 0.75rem;
    }
    
    #user-info {
        font-size: 0.8rem;
        gap: 0.1rem;
        margin-right: 0.25rem;
    }
    
    .auth-btn {
        font-size: 0.8rem;
        padding: 6px 12px;
        margin-right: 0.25rem;
    }

    #hero h2 {
        font-size: 2.5rem;
    }
}

/* Very small mobile screens (iPhone SE, iPhone 13 mini) */
@media (max-width: 375px) {
    /* Adjust header branding for very small screens */
    header #branding h1 {
        font-size: 20px;
    }
    
    header #branding .logo {
        height: 50px;
    }
    
    /* Ensure hamburger menu is always visible */
    .hamburger {
        font-size: 1.8rem;
        padding: 0.5rem;
    }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
    
    .phone-number a {
        margin-right: 0.5rem;
    }
    
    #user-info {
        font-size: 0.75rem;
        gap: 0.05rem;
        margin-right: 0.1rem;
    }
    
    .auth-btn {
        font-size: 0.75rem;
        padding: 4px 8px;
        margin-right: 0.1rem;
    }
    
    /* Stack buttons vertically on very small screens */
    .auth-section {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* General Styles */
body {
    font-size: 1rem;
    line-height: 1.75;
    overflow-x: hidden;
}

h1, h2, h3 {
    line-height: 1.2;
}

p, ul, ol {
    margin-bottom: 1.5rem;
}

.container {
    padding: 1.5rem;
}

/* Section Styles */
section {
    padding: 3rem 0;
    border-bottom: 1px solid var(--border-color);
}

.section-content {
    margin-bottom: 3rem;
}

.section-content h2 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.section-content p, .section-content ul, .section-content ol {
    font-size: 1.125rem;
}

/* Career Hero Section */
#hero-career {
    background: url('https://i.imgur.com/CzDuX5b.jpg') no-repeat center center;
    background-size: cover;
    text-align: center;
    color: var(--light-color);
    padding: 7rem 1rem;
}

@media (max-width: 768px) {
    #hero-career {
        padding: 5rem 1rem;
    }
}

@media (max-width: 480px) {
    #hero-career {
        padding: 3rem 1rem;
    }
}

.hero-text-career {
    background: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    border-radius: var(--border-radius);
    display: inline-block;
}

#hero-career h2 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    color: var(--light-color);
    font-weight: bold;
}

#hero-career p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--light-color);
}

/* Sections */
.section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.section-text {
    flex: 1;
    min-width: 300px;
    margin: 20px;
    font-size: 1.6rem;
    padding-right: 20px;
    color: var(--text-color);
}

.section-image {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    margin: 20px;
}

.section-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    padding-left: 20px;
}

.section-content h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-color);
    font-size: 2.8rem;
}

.section-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.button {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--light-color);
    background: var(--secondary-color);
    padding: 0.7rem 1.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-speed);
    border-radius: var(--border-radius);
    font-weight: 600;
}

.button:hover {
    background-color: var(--hover-color);
    transform: translateY(-2px);
}

.button.secondary {
    background: var(--accent-color);
}

.button.secondary:hover {
    background-color: var(--accent-dark);
}

/* Quick Apply Form */
#quick-apply {
    padding: 5rem 0;
    background-color: var(--background-color);
}

#quick-apply-heading {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--secondary-color);
    font-size: 2.8rem;
}

#quick-apply p {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.2rem;
    color: var(--text-color);
}

form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px var(--shadow-color);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 0.75rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
}

form button {
    align-self: center;
    padding: 0.75rem 1.5rem;
    background: var(--secondary-color);
    color: var(--light-color);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background var(--transition-speed);
    font-size: 1.125rem;
}

form button:hover {
    background-color: var(--hover-color);
}


/* About Us Page */
#about {
    padding: 5rem 0;
    background-color: var(--light-color);
}

#about h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--secondary-color);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

#about .section-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 1.5rem; /* Add left padding to indent the entire section content */
    padding-right: 1.5rem; /* Add right padding for consistency */
    margin-bottom: 3rem; /* Space below the entire section */
}

#about .section-text {
    flex: 1;
    background-color: var(--background-light);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px var(--shadow-color);
    font-size: 1.2rem;
    line-height: 1.75;
    text-align: left;
    color: var(--text-color);
    margin-bottom: 1.5rem; /* Ensure space below each section */
    padding-left: 1.5rem; /* Add padding inside text blocks */
}

#about .section-text p {
    margin-bottom: 1.5rem;
    text-indent: 1rem; /* Optional: Indent first line of paragraphs */
}

#about .section-text ul {
    list-style: disc inside;
    padding-left: 2rem; /* Increase padding for better list alignment */
    margin-bottom: 1.5rem;
}

#about .section-text ul li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem; /* Optional: Add padding to list items for alignment */
}

#about .section-image {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

#about .section-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

#faq {
    padding: 5rem 0;
    background-color: var(--light-color);
  }
  
  #faq h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--secondary-color);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
  }
  
  #faq .accordion {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  #faq .accordion-item {
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px var(--shadow-color);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
  }
  
  #faq .accordion-header {
    background-color: transparent;
    padding: 1.5rem 2rem;
    font-weight: bold;
    font-size: 1.3rem;
    text-align: left;
    width: 100%;
    border: none;
    cursor: pointer;
    color: var(--secondary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  #faq .accordion-header:hover {
    background-color: var(--light-color);
  }
  
  #faq .accordion-body {
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text-color);
    background-color: var(--background-light);
  }
  
  #faq .accordion-item.active .accordion-body {
    padding: 1rem 2rem 2rem;
  }
  
  #faq .accordion-header::after {
    content: '▼';
    font-size: 1rem;
    transition: transform 0.3s ease;
  }
  
  #faq .accordion-item.active .accordion-header::after {
    transform: rotate(-180deg);
  }
/* Tab styles */
.tabs {
    overflow: hidden;
    background-color: #f1f1f1;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    border-radius: var(--border-radius); /* Add rounded corners */
}

.tabs button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 20px; /* Increase padding for more height */
    transition: background-color 0.3s;
    font-size: 1.2rem; /* Increase font size */
    color: var(--text-color);
    flex: 1; /* Ensure equal width for all tabs */
    border-radius: var(--border-radius); /* Add rounded corners */
}

.tabs button:hover {
    background-color: var(--primary-light); /* Use primary light color for hover */
}

.tabs button.active {
    background-color: var(--primary-color); /* Use primary color for active tab */
    color: var(--light-color); /* White text for better contrast */
}

.tabcontent {
    display: none;
    padding: 20px 0;
    border-top: none;
    font-size: 1.1rem; /* Slightly increase the font size */
    color: var(--text-color);
}

.tabcontent h3 {
    font-size: 1.8rem; /* Increase heading size */
    color: var(--primary-dark); /* Use a darker shade for headings */
    margin-bottom: 1rem;
}

.tabcontent p {
    line-height: 1.8; /* Improve readability */
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .tabs {
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      flex-wrap: nowrap;
      justify-content: flex-start; /* So items align left */
      padding: 0.5rem;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      scrollbar-width: none; /* Firefox */
    }
  
    .tabs::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }
  
    .tabs button {
      flex: 0 0 auto; /* Don't stretch, allow natural width */
      margin-right: 0.5rem; /* Add space between buttons */
      white-space: nowrap; /* Prevent text wrapping */
    }
  }

/* About Us Page Specific Styles */
#about-page section {
    padding: 6rem 0;
    background-color: #f8f8f8; /* Light gray background for contrast */
}

#about-page h2 {
    font-size: 3rem; /* Larger, bolder headings */
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: 3rem;
}

#about-page .section-text {
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-color);
    padding: 1rem; /* fallback padding for small screens */
  }
  
  /* Apply larger padding only on tablet only */
  @media (min-width: 769px) {
    #about-page .section-text {
      padding: 3rem;
    }
  }

#about-page .section-text h3 {
    font-size: 2rem; /* Increase heading size */
    color: var(--secondary-color); /* Use secondary color for contrast */
    margin-bottom: 1.5rem;
}

#about-page .section-text ul {
    list-style: disc inside;
    padding-left: 2rem; /* Increase padding for better list alignment */
    margin-bottom: 1.5rem;
}

#about-page .section-image {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

#about-page .section-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Footer for About Us Page */
#about-page footer {
    background-color: var(--primary-dark);
    color: var(--light-color);
    text-align: center;
    padding: 2rem 0;
    margin-top: 4rem;
}

#about-page footer p {
    font-size: 1.2rem;
}
/*Button To Go To Top Of Page Design */
#backToTop {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
}

#backToTop:hover {
    background-color: #0056b3;
}

/* 
Container Width on Mobile
*/
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 15px; /* Adds comfortable space on mobile */
    }
}
/*
Hero Section Text Adjustments for Mobile
*/
@media (max-width: 768px) {
    /* Hero Section Heading */
    #hero h2 {
        font-size: 2.2rem; /* Reduce font size for readability on mobile */
    }

    /* Hero Section Paragraph */
    #hero p {
        font-size: 1.2rem; /* Adjust paragraph font size for mobile */
        margin-bottom: 1.5rem; /* Optional: Reduce margin if it feels too spaced out */
    }

    /* Hero Text Container */
    .hero-text {
        padding: 1.5rem; /* Decrease padding for a more compact look on mobile */
    }
}
/*
Flex Containers on Mobile
*/
@media (max-width: 768px) {
    .section-content {
        flex-direction: column; /* Stacks items vertically on mobile */
        align-items: center; /* Centers items in the container */
    }

    .section-text {
        margin: 20px 0; /* Adds some space between stacked items */
        padding-right: 0; /* Ensures padding isn't uneven */
    }
    
    .section-image {
        margin: 20px 0; /* Adds space around the image */
        padding-left: 0; /* Aligns with the text block for consistency */
    }
}
/* Checkbox on contact form Mobile Handling + Layout Styling*/
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds space between the label and checkbox */
}

/*
Service Cards Adjustment for Mobile
*/

@media (max-width: 768px) {
    .service-card {
        width: 100%; /* Makes each card take up the full width of the screen */
        height: auto; /* Adjusts the height to fit the new width */
        margin-bottom: 20px; /* Adds space between each card */
    }
}

/*
Reduce Padding for Sections  Mobile
*/
@media (max-width: 768px) {
    section {
        padding: 2rem 0; /* Decreases top and bottom padding for a more compact look */
    }
}
/*
Adjust Heading and Paragraph Font Sizes on Mobile 
*/
@media (max-width: 768px) {
    section h2 {
        font-size: 2rem; /* Reduce heading size to fit better on mobile */
    }
    
    .section-text {
        font-size: 1.4rem; /* Scale down paragraph text for mobile */
    }
}
/* General Mobile Styling: Up to 480px */
@media (max-width: 480px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    section h2 {
        font-size: 1.8rem;
    }
    .section-text, .section-image {
        font-size: 1.2rem;
    }
    #hero h2, #hero-career h2 {
        font-size: 2rem;
    }
    #hero p, #hero-career p {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    .service-card {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    .steps {
        flex-direction: column;
    }
}

/* Medium Screens (phones in landscape mode, small tablets, ~481px to ~768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }
    section h2 {
        font-size: 2rem;
    }
    .section-text {
        font-size: 1.4rem;
    }
    #hero h2, #hero-career h2 {
        font-size: 2.2rem;
    }
    #hero p, #hero-career p {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
    /* Adjust Flex Layout on Medium Screens */
    .section-content {
        flex-direction: column;
        align-items: center;
    }
    .service-card {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
}

/* Large Screens (tablets and desktops, ~769px and up) */
@media (min-width: 769px) {
    .container {
        width: 90%;
        max-width: 1200px;
    }
    section h2 {
        font-size: 2.5rem;
    }
    .section-text {
        font-size: 1.6rem;
    }
    #hero h2, #hero-career h2 {
        font-size: 3rem;
    }
    .steps {
        flex-direction: row;
    }
}

/* Ultra-Wide Screens or Zoomed-Out Views on Mobile */
@media (min-width: 1024px) {
    .container {
        width: 85%;
        max-width: 1400px;
    }
    section h2 {
        font-size: 2.8rem;
    }
    .section-text {
        font-size: 1.8rem;
    }
    #hero h2, #hero-career h2 {
        font-size: 3.5rem;
    }
}

/* Training Portal Styles */
#hero-training {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #4a90e2 100%);
    background-size: cover;
    background-position: center;
    color: var(--light-color);
    text-align: center;
    padding: 120px 0 80px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

#hero-training::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover;
    opacity: 0.1;
    z-index: 1;
}

#hero-training::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index: 1;
}

#hero-training > * {
    position: relative;
    z-index: 2;
}

.hero-text-training {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    animation: fadeInUp 1s ease-out;
}

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

.hero-text-training h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.5px;
}

.hero-text-training p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    color: #f8f9fa;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Hero Progress Overview */
#hero-training {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}
.hero-progress-overview {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.hero-progress-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 280px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-progress-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.hero-progress-card.completed {
    cursor: pointer;
    position: relative;
}

.hero-progress-card.completed::after {
    content: '📄 Click for Certificate';
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ffd700;
    color: #1e3c72;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.hero-progress-circle {
    position: relative;
    flex-shrink: 0;
}

.hero-progress-circle .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-progress-info {
    flex: 1;
}

.hero-progress-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-progress-info p {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: #f8f9fa;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-progress-hours {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.training-stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem 1.5rem;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 1s ease-out;
    animation-fill-mode: both;
    position: relative;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #1e3c72, #4a90e2, #1e3c72);
    border-radius: 17px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-item:hover::before {
    opacity: 1;
}

.stat-item:nth-child(1) { animation-delay: 0.2s; }
.stat-item:nth-child(2) { animation-delay: 0.4s; }
.stat-item:nth-child(3) { animation-delay: 0.6s; }

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Responsive Design for Training Hero */
@media (max-width: 768px) {
    #hero-training {
        padding: 100px 0 60px;
    }
    
    .hero-text-training h2 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
    
    .hero-text-training p {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .hero-progress-overview {
        gap: 1.5rem;
        margin: 2rem 0;
    }
    
    .hero-progress-card {
        min-width: 100%;
        padding: 2rem 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        min-height: 140px;
        justify-content: center;
    }
    
    /* Hide progress circles on mobile */
    .hero-progress-card .hero-progress-circle {
        display: none;
    }
    
    .hero-progress-card .progress-details {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-progress-card .progress-details h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        line-height: 1.2;
    }
    
    .hero-progress-card .progress-details p {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.4;
        font-weight: 500;
    }
    
    .hero-progress-card .progress-details .progress-hours {
        font-size: 1.2rem;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.25);
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Add status indicator for completed training */
    .hero-progress-card.completed .progress-details::before {
        content: "✓ COMPLETED";
        display: block;
        font-size: 0.9rem;
        font-weight: 600;
        color: #4CAF50;
        background: rgba(76, 175, 80, 0.2);
        padding: 0.4rem 1rem;
        border-radius: 15px;
        margin-bottom: 0.5rem;
        border: 1px solid rgba(76, 175, 80, 0.3);
    }
    
    .hero-progress-card:not(.completed) .progress-details::before {
        content: "IN PROGRESS";
        display: block;
        font-size: 0.9rem;
        font-weight: 600;
        color: #FF9800;
        background: rgba(255, 152, 0, 0.2);
        padding: 0.4rem 1rem;
        border-radius: 15px;
        margin-bottom: 0.5rem;
        border: 1px solid rgba(255, 152, 0, 0.3);
    }
}

/* Extra small mobile screens (480px and below) */
@media (max-width: 480px) {
    .hero-progress-card {
        padding: 1.75rem 1.25rem;
        gap: 1.25rem;
        min-height: 120px;
    }
    
    .hero-progress-card .progress-details h3 {
        font-size: 1.3rem;
        margin-bottom: 0.4rem;
    }
    
    .hero-progress-card .progress-details p {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }
    
    .hero-progress-card .progress-details .progress-hours {
        font-size: 1.1rem;
        padding: 0.6rem 1.25rem;
    }
    
    .hero-progress-card .progress-details::before {
        font-size: 0.8rem;
        padding: 0.35rem 0.8rem;
    }
    
    /* Certificate button positioning for small screens */
    .hero-progress-card.completed::after {
        position: static;
        display: block;
        margin-top: 0.75rem;
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        border-radius: 15px;
        text-align: center;
    }
    
    .training-stats {
        gap: 1.5rem;
        margin-top: 2rem;
    }
    
    .stat-item {
        min-width: 120px;
        padding: 1.5rem 1rem;
    }
    
    .stat-item i {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    .stat-item span:first-of-type {
        font-size: 1.5rem;
    }
    
    .stat-item span:last-of-type {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hero-text-training h2 {
        font-size: 1.8rem;
    }
    
    .hero-text-training p {
        font-size: 1rem;
    }
    
    .training-stats {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .stat-item {
        min-width: 200px;
    }
}

/* Hero CTA Button */
.hero-cta {
    margin-top: 3rem;
    animation: fadeInUp 1s ease-out 0.8s both;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    background: linear-gradient(135deg, #e55a2b 0%, #e0851a 100%);
}

.cta-button i {
    font-size: 1rem;
}

/* Responsive CTA */
@media (max-width: 768px) {
    .hero-cta {
        margin-top: 2rem;
    }
    
    .cta-button {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .cta-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
}

.stat-item i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #1e3c72;
    display: block;
}

.stat-item span:first-of-type {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #2a5298;
    line-height: 1;
}

.stat-item span:last-of-type {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Training Modules */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.training-module {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.training-module:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.module-header {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    min-height: 120px;
}

.module-icon {
    background: var(--primary-color);
    color: var(--light-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.module-icon i {
    font-size: 1.2rem;
}

.module-info {
    flex: 1;
    padding-right: 130px;
    width: calc(100% - 130px);
}

.module-info h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-size: 1.2rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.module-info p {
    margin: 0 0 1rem 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
}

.module-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-light);
    flex-wrap: wrap;
    max-width: 100%;
}

.module-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.module-status {
    margin-left: 1rem;
    flex-shrink: 0;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 80px;
    text-align: center;
}

.status-badge.pending {
    background: var(--warning-color);
    color: #000;
}

.status-badge.in-progress {
    background: var(--secondary-color);
    color: var(--light-color);
}

.status-badge.completed {
    background: var(--success-color);
    color: var(--light-color);
}

/* Responsive design for module headers */
@media (max-width: 768px) {
    .module-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        min-height: auto;
    }
    
    .module-status {
        position: static;
        margin-left: 0;
        align-self: flex-end;
        z-index: auto;
    }
    
    .module-info {
        padding-right: 0;
        width: 100%;
    }
    
    .module-meta {
        gap: 0.5rem;
        max-width: 100%;
    }
    
    .module-meta span {
        font-size: 0.75rem;
    }
}

.module-content {
    padding: 1.5rem;
}


.module-topics {
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
}

.module-topics li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-color);
}

.module-topics li i {
    color: var(--success-color);
    margin-right: 0.5rem;
    font-size: 0.8rem;
}

.start-module {
    width: 100%;
    margin-top: 1rem;
}

/* Progress Tracking */
#progress-tracking {
    background: var(--background-light);
    padding: 4rem 0;
}

.progress-overview {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 3rem;
    align-items: center;
    margin-top: 2rem;
}

.progress-card {
    text-align: center;
    background: var(--background-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px var(--shadow-color);
}

.progress-circle {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.5s ease;
}

.progress-ring .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.progress-card h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.progress-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
}

.progress-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--background-color);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 5px var(--shadow-color);
}

.progress-label {
    color: var(--text-color);
    font-weight: 500;
}

.progress-value {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Training Overview Cards */
.training-overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.overview-card {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
}

.overview-card.orientation::before {
    background: var(--secondary-color);
}

.overview-card.safety::before {
    background: var(--success-color);
}

.overview-card.annual::before {
    background: var(--accent-color);
}

.overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.overview-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.overview-header i {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--primary-color);
}

.overview-header.orientation i {
    color: var(--secondary-color);
}

.overview-header.safety i {
    color: var(--success-color);
}

.overview-header.annual i {
    color: var(--accent-color);
}

.overview-header h3 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.3rem;
}

.overview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
}

.overview-progress {
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--background-dark);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease, background 0.5s ease;
}

/* Progress bar for completed modules (100%) */
.progress-fill.completed {
    background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700) !important;
    background-size: 200% 100% !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Module completion animation */
.completion-animation {
    background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700) !important;
    background-size: 200% 100% !important;
    animation: completionShine 2s ease-in-out;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

@keyframes completionShine {
    0% {
        background-position: -200% 0;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
    50% {
        background-position: 0% 0;
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
    100% {
        background-position: 200% 0;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

.overview-card.orientation .progress-fill {
    background: var(--secondary-color);
}

.overview-card.safety .progress-fill {
    background: var(--success-color);
}

.overview-card.annual .progress-fill {
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
}

.progress-text {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Training Section Headers */
.training-section {
    margin: 4rem 0;
}

.training-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-color);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.training-section h2 i {
    color: var(--primary-color);
}

.training-group-heading {
    margin: 4rem 0 1.5rem;
    text-align: center;
}

.training-group-heading h2 {
    align-items: center;
    color: var(--text-color);
    display: flex;
    font-size: 2rem;
    gap: 0.75rem;
    justify-content: center;
    margin: 0 0 0.5rem;
}

.training-group-heading p {
    color: var(--text-light);
    margin: 0 auto;
    max-width: 680px;
}

.training-group-heading-available h2 i,
.available-training-section h2 i {
    color: #0f766e;
}

.training-access-badge {
    background: #ccfbf1;
    border: 1px solid #5eead4;
    border-radius: 8px;
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3rem 0.55rem;
}

/* Course Filter Bar */
.course-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.25rem;
    background: var(--background-light, #f8f9fa);
    border-radius: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--border-color, #e0e0e0);
}

.filter-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color, #dee2e6);
    background: white;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary, #666);
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
}

.filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Dark mode filter bar */
[data-theme="dark"] .course-filter-bar {
    background: var(--background-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .filter-btn {
    background: var(--background-darker);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary-light);
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* Mobile filter bar */
@media (max-width: 480px) {
    .course-filter-bar {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .filter-label {
        width: 100%;
        margin-bottom: 0.25rem;
    }
    
    .filter-buttons {
        width: 100%;
        justify-content: flex-start;
    }
    
    .filter-btn {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: var(--background-color);
    margin: 5% auto;
    padding: 0;
    border: none;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.close-modal {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    z-index: 1001;
    background: #dc3545;
    border: 2px solid #dc3545;
    padding: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.close-modal:hover {
    background-color: #c82333;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5);
}

.modal-header {
    background: var(--primary-color);
    color: var(--light-color);
    padding: 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.modal-footer button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal-footer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#prevButton {
    background: var(--background-dark);
    color: var(--text-color);
}

#prevButton:hover:not(:disabled) {
    background: var(--border-color);
}

#nextButton {
    background: var(--secondary-color);
    color: var(--light-color);
}

#nextButton:hover:not(:disabled) {
    background: var(--secondary-dark);
}

#completeButton {
    background: var(--success-color);
    color: var(--light-color);
}

#completeButton:hover:not(:disabled) {
    background: var(--success-dark);
}

/* Video Container */
.video-container {
    margin: 1.5rem 0;
    text-align: center;
}

.video-container iframe {
    max-width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px var(--shadow-color);
}

/* Learning Objectives */
.learning-objectives {
    background: var(--background-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin: 1.5rem 0;
    border-left: 4px solid var(--primary-color);
}

.learning-objectives h4 {
    margin: 0 0 1rem 0;
    color: var(--text-color);
    font-size: 1.1rem;
}

.learning-objectives ul {
    margin: 0;
    padding-left: 1.5rem;
}

.learning-objectives li {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

/* Module Progress */
.module-progress {
    margin: 1.5rem 0;
}

.module-progress .progress-bar {
    height: 10px;
    background: var(--background-dark);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.module-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: width 0.3s ease;
}

.module-progress .progress-text {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    display: block;
}

/* Annual Training Section Styling */
.annual-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 3px solid var(--accent-color);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-separator {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
    border-radius: 10px;
    color: white;
}

.section-separator h2 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.section-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 300;
}

.annual-section .training-module {
    border-left: 4px solid var(--accent-color);
}

.annual-section .module-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
}

/* Training Resources */
#training-resources {
    padding: 4rem 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.resource-card {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: transform 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-3px);
}

.resource-icon {
    background: var(--primary-color);
    color: var(--light-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.resource-icon i {
    font-size: 1.5rem;
}

.resource-card h3 {
    margin: 0 0 1rem 0;
    color: var(--text-color);
}

.resource-card p {
    color: var(--text-light);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal.active,
.modal.show {
    display: block;
}

.modal-content {
    background-color: var(--background-color);
    margin: 5% auto;
    padding: 0;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: var(--primary-color);
    color: var(--light-color);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.close-modal {
    color: var(--light-color);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.close-modal:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 2rem;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 1.5rem;
    background: var(--background-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
}

/* Module Content Styles */
.learning-objectives {
    background: var(--background-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin: 1.5rem 0;
}

.learning-objectives h4 {
    color: var(--primary-color);
    margin: 0 0 1rem 0;
}

.learning-objectives ul {
    margin: 0;
    padding-left: 1.5rem;
}

.learning-objectives li {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.emergency-steps {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.emergency-steps .step {
    background: var(--background-light);
    padding: 1rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.emergency-steps .step h4 {
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
}

.emergency-steps .step p {
    margin: 0;
    color: var(--text-color);
}

.fire-safety h4,
.medical-emergencies h4,
.incident-reporting h4 {
    color: var(--primary-color);
    margin: 1.5rem 0 0.5rem 0;
}

.fire-safety ul,
.medical-emergencies ul,
.incident-reporting ul,
.fire-safety ol,
.incident-reporting ol {
    margin: 0.5rem 0 1rem 0;
    padding-left: 1.5rem;
}

.medical-emergencies {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.emergency-type {
    background: var(--background-light);
    padding: 1rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.emergency-type h4 {
    color: var(--secondary-color);
    margin: 0 0 0.5rem 0;
}

.emergency-type ul {
    margin: 0;
    padding-left: 1.5rem;
}

.emergency-type li {
    margin-bottom: 0.25rem;
    color: var(--text-color);
}

.important-note {
    background: var(--warning-color);
    color: #000;
    padding: 1rem;
    border-radius: var(--border-radius);
    margin: 1.5rem 0;
    font-weight: 500;
}

/* Responsive Design for Training Portal */
@media (max-width: 768px) {
    #hero-training {
        padding: 80px 0 40px;
    }

    .hero-text-training h2 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .hero-text-training p {
        font-size: 0.95rem;
    }

    .training-stats {
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .stat-item {
        min-width: 80px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .modules-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .module-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .module-icon {
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
    }

    .module-status {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .progress-overview {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .resources-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Modal Mobile Improvements */
    .modal {
        padding: 10px;
    }

    .modal-content {
        width: 100%;
        max-width: none;
        margin: 2% auto;
        max-height: 96vh;
        border-radius: 15px;
    }

    .modal-header {
        padding: 1rem;
        border-radius: 15px 15px 0 0;
    }

    .modal-header h2 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .modal-body {
        padding: 1.25rem;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
        position: sticky;
        bottom: 0;
        background: var(--background-light);
        border-top: 1px solid var(--border-color);
        border-radius: 0 0 15px 15px;
    }

    .modal-footer button {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
        border-radius: 10px;
        margin: 0;
        min-height: 44px; /* Ensure touch target size */
    }
}

/* Tablet-specific styles (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .modal-content {
        width: 90%;
        max-width: 800px;
        margin: 3% auto;
        max-height: 94vh;
    }
    
    .modal-header {
        padding: 1.5rem;
    }
    
    .modal-header h2 {
        font-size: 1.6rem;
    }
    
    .modal-body {
        padding: 2rem;
        max-height: 65vh;
    }
    
    .modal-footer {
        padding: 1.5rem;
        flex-direction: row;
        gap: 1rem;
    }
    
    .modal-footer button {
        width: auto;
        flex: 1;
        min-height: 44px;
    }
    
    /* Quiz options for tablet */
    .quiz-option {
        padding: 1.5rem;
        min-height: 48px;
    }
    
    .quiz-option input[type="radio"] {
        transform: scale(1.4);
        margin-right: 1.5rem;
    }
    
    .quiz-option label {
        font-size: 1.2rem;
    }
    
    /* Profile page tablet improvements */
    .profile-container {
        margin: 30px;
        padding: 30px;
    }
    
    .profile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .profile-card {
        padding: 1.5rem;
    }
    
    /* Tablet progress card improvements */
    .hero-progress-card {
        min-width: 280px;
        padding: 1.75rem;
        gap: 1.25rem;
    }
    
    .hero-progress-card .progress-ring {
        width: 80px;
        height: 80px;
    }
    
    .hero-progress-circle .progress-text {
        font-size: 1rem;
    }
    
    .hero-progress-card .progress-details h3 {
        font-size: 1.2rem;
    }
    
    .hero-progress-card .progress-details p {
        font-size: 0.9rem;
    }
    
    .hero-progress-card .progress-details .progress-hours {
        font-size: 1rem;
    }

    .close-modal {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        right: 0.75rem;
        top: 0.75rem;
    }

    /* Admin Dashboard Mobile */
    .admin-header h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .admin-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .admin-stat-card {
        padding: 1.5rem;
    }

    .caregiver-progress-table {
        margin-top: 2rem;
    }

    .table-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .table-actions {
        justify-content: center;
    }

    .table-actions .invite-btn,
    .table-actions .refresh-btn {
        flex: 1;
        max-width: 200px;
    }

    #caregiver-table {
        font-size: 0.8rem;
    }

    #caregiver-table th,
    #caregiver-table td {
        padding: 0.75rem 0.5rem;
    }

    /* Certificate Modal Mobile */
    .certificate-modal-content {
        width: 95%;
        max-width: none;
        margin: 5% auto;
    }

    .certificate-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    /* Reminder Wizard Mobile */
    .reminder-wizard-content {
        width: calc(100vw - 1.5rem);
        max-width: none;
    }

    .reminder-wizard-header,
    .reminder-wizard-body,
    .reminder-wizard-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .reminder-summary-grid {
        grid-template-columns: 1fr;
    }

    .reminder-wizard-modal .caregiver-list {
        max-height: 300px;
    }

    .reminder-wizard-modal .caregiver-item {
        padding: 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .reminder-wizard-modal .caregiver-row-top,
    .reminder-wizard-modal .selection-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .reminder-wizard-modal .caregiver-checkbox {
        align-self: flex-start;
    }

    .reminder-wizard-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .reminder-wizard-footer .button {
        width: 100%;
    }

    /* Caregiver Details Modal Mobile */
    .caregiver-details-content {
        width: 95%;
        max-width: none;
        margin: 5% auto;
    }

    .caregiver-details-body {
        padding: 1rem;
    }

    .caregiver-loading-preview {
        flex-direction: column;
        text-align: center;
    }

    .caregiver-loading-meta {
        text-align: center;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .progress-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .progress-bar {
        width: 100%;
    }

    .caregiver-details-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .caregiver-details-footer .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .training-stats {
        flex-direction: column;
        align-items: center;
    }

    .stat-item {
        width: 100%;
        max-width: 200px;
    }

    .module-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Extra Small Screen Improvements */
    .modal-content {
        margin: 2% auto;
        max-height: 95vh;
    }

    .modal-body {
        padding: 0.75rem;
        max-height: 65vh;
    }

    .modal-footer {
        padding: 0.75rem;
    }

    .modal-footer button {
        padding: 0.875rem;
        font-size: 0.95rem;
    }

    .hero-text-training h2 {
        font-size: 1.6rem;
    }

    .admin-header h1 {
        font-size: 2rem;
    }

    .table-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .table-actions .invite-btn,
    .table-actions .refresh-btn {
        max-width: none;
    }

    #caregiver-table {
        font-size: 0.75rem;
    }

    #caregiver-table th,
    #caregiver-table td {
        padding: 0.5rem 0.25rem;
    }

    .caregiver-name-btn {
        padding: 0.25rem;
        font-size: 0.8rem;
    }

    .certificate-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}

/* Introduction Module Styles */
.core-values {
    background-color: var(--background-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

.value-item {
    margin: 1rem 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.value-item:last-child {
    border-bottom: none;
}

.culture-section h4 {
    color: var(--secondary-color);
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.2rem;
}

.culture-section h4:first-child {
    margin-top: 0;
}

.policies-section h4 {
    color: var(--secondary-color);
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.2rem;
}

.policies-section h4:first-child {
    margin-top: 0;
}

.policies-section ul {
    margin: 0.5rem 0 1rem 1rem;
}

.role-section h4 {
    color: var(--secondary-color);
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.2rem;
}

.duty-item {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.duty-item strong {
    color: var(--secondary-color);
    display: block;
    margin-bottom: 0.5rem;
}

.example {
    font-style: italic;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border-color);
}

.not-role-section {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

.not-role-item {
    margin: 1rem 0;
}

.not-role-item h4 {
    color: #dc3545;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Module Progress Styles */
.module-progress {
    margin: 1rem 0;
    padding: 0.5rem 0;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Video Container Styles */
.video-container {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 1.5rem auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
    width: 100%;
    height: 315px;
    border: none;
    display: block;
}

@media (max-width: 768px) {
    .video-container {
        max-width: 100%;
    }
    
    .video-container iframe {
        height: 200px;
    }
}

/* Training illustration styles */
.training-illustration {
    margin: 20px 0;
    text-align: center;
}

.training-illustration img {
    max-width: 60% !important;
    height: auto !important;
    border-radius: 12px !important;
    border: 3px solid var(--primary-color) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.training-illustration img:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile responsiveness for training images */
@media (max-width: 768px) {
    .training-illustration img {
        max-width: 80% !important;
        border-width: 2px !important;
    }
}

@media (max-width: 480px) {
    .training-illustration img {
        max-width: 90% !important;
        border-width: 2px !important;
    }
}

/* Quiz Slide Styles */
.quiz-slide {
    padding: 2rem;
    text-align: center;
}

/* Review mode styles */
.review-mode-skip {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 2px dashed #6c757d;
    margin: 1rem 0;
}

.review-mode-skip .skip-icon {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.review-mode-skip h3 {
    color: #495057;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.review-mode-skip p {
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* Review button styling */
.review-button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-color: #28a745 !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    position: relative;
}

.review-button:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%) !important;
    border-color: #1e7e34 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.review-button::before {
    content: "✓";
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fff;
    color: #28a745;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid #28a745;
}

.quiz-slide h3 {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.quiz-question {
    margin-bottom: 2rem;
}

.question-text {
    color: var(--text-color);
    margin-bottom: 2rem;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.quiz-option {
    display: flex;
    align-items: center;
    padding: 1.2rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    background: var(--background-color);
    text-align: left;
}

.quiz-option:hover {
    border-color: var(--primary-color);
    background: var(--background-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.quiz-option input[type="radio"] {
    margin-right: 1rem;
    transform: scale(1.3);
    accent-color: var(--primary-color);
}

.quiz-option label {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    font-size: 1.1rem;
}

.quiz-feedback {
    text-align: center;
    padding: 2rem;
    border-radius: var(--border-radius);
    margin: 2rem 0;
    background: var(--background-light);
    border: 2px solid var(--border-color);
}

.feedback-correct {
    color: var(--success-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.feedback-incorrect {
    color: var(--error-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.quiz-feedback p {
    color: var(--text-color);
    margin-top: 1rem;
    line-height: 1.6;
    font-size: 1.1rem;
}

.hidden {
    display: none !important;
}

/* Mobile responsiveness for quiz slides */
@media (max-width: 768px) {
    .quiz-slide {
        padding: 1.5rem;
    }
    
    .quiz-option {
        padding: 1.25rem;
        min-height: 44px; /* Ensure minimum touch target size */
        margin-bottom: 0.75rem;
    }
    
    .quiz-option input[type="radio"] {
        transform: scale(1.5); /* Larger radio buttons for mobile */
        margin-right: 1.25rem;
    }
    
    .quiz-option label {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    .quiz-feedback {
        padding: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .question-text {
        font-size: 1.1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
    
    .quiz-slide h3 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
}

/* Training Overview Cards */
.training-overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.overview-card {
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--primary-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.overview-card.orientation {
    border-left-color: var(--primary-color);
}

.overview-card.safety {
    border-left-color: var(--secondary-color);
}

.overview-card.annual {
    border-left-color: var(--accent-color);
}

.overview-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.overview-header i {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--primary-color);
}

.overview-card.safety .overview-header i {
    color: var(--secondary-color);
}

.overview-card.annual .overview-header i {
    color: var(--accent-color);
}

.overview-header h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 600;
}

.overview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat {
    text-align: center;
    padding: 0.5rem;
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
}

.overview-progress {
    margin-top: 1rem;
}

.overview-progress .progress-bar {
    height: 10px;
    background-color: var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.overview-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 5px;
    transition: width 0.3s ease;
    width: 0%;
}

.overview-card.safety .overview-progress .progress-fill {
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}

.overview-card.annual .overview-progress .progress-fill {
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
}

.overview-progress .progress-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
}

/* Training Sections */
.training-section {
    margin-bottom: 4rem;
}

.training-section h2 {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    color: var(--text-dark);
    font-size: 2rem;
    font-weight: 600;
}

.training-section h2 i {
    margin-right: 1rem;
    font-size: 1.8rem;
    color: var(--primary-color);
}

.training-section:nth-child(3) h2 i {
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .training-overview-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .overview-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .progress-overview {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .training-section h2 {
        font-size: 1.5rem;
    }
    
    .training-section h2 i {
        font-size: 1.4rem;
    }
}

/* Celebration Modal Styles */
.celebration-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.celebration-modal.show {
    opacity: 1;
}

.celebration-content {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.celebration-modal.show .celebration-content {
    transform: scale(1);
}

.celebration-header {
    margin-bottom: 2rem;
}

.celebration-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounce 1s infinite;
}

.celebration-header h2 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.celebration-header p {
    color: #666;
    font-size: 1.1rem;
    margin: 0;
}

.celebration-stats {
    display: flex;
    justify-content: space-around;
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 15px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-item i {
    font-size: 1.5rem;
    color: #007bff;
}

.stat-item span {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.celebration-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.celebration-actions .button {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.celebration-actions .primary-button {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
}

.celebration-actions .primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
}

.celebration-actions .secondary-button {
    background: var(--background-light);
    color: #666;
    border: 2px solid #ddd;
}

.celebration-actions .secondary-button:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Caregiver Name Button Styles */
.caregiver-name-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    width: 100%;
}

.caregiver-name-btn:hover {
    background: var(--background-light);
    color: #0056b3;
}

.caregiver-name-btn i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.caregiver-name-btn:hover i {
    transform: translateX(3px);
}

/* Caregiver Details Modal Styles */
.caregiver-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.caregiver-details-modal.show {
    opacity: 1;
}

.caregiver-details-content {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.caregiver-details-modal.show .caregiver-details-content {
    transform: scale(1);
}

.caregiver-details-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 1.5rem;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.caregiver-details-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caregiver-details-body {
    padding: 2rem;
}

.caregiver-info {
    margin-bottom: 2rem;
}

.caregiver-details-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 320px;
    text-align: center;
}

.caregiver-loading-preview {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e8ebf3;
    border-radius: 16px;
    background: #f7f9ff;
}

.caregiver-loading-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.18);
}

.caregiver-loading-meta {
    text-align: left;
    min-width: 0;
}

.caregiver-loading-meta strong {
    display: block;
    color: #1f2937;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.caregiver-loading-meta span {
    display: block;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
}

.caregiver-loading-spinner {
    margin: 0.25rem 0;
}

.caregiver-loading-spinner p {
    color: #4b5563;
}

.caregiver-loading-skeleton {
    width: 100%;
    display: grid;
    gap: 0.75rem;
}

.caregiver-loading-skeleton-line {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf2ff 0%, #dbe6ff 50%, #edf2ff 100%);
    background-size: 200% 100%;
    animation: caregiverDetailsShimmer 1.4s ease-in-out infinite;
}

.caregiver-loading-skeleton-line.long {
    width: 100%;
}

.caregiver-loading-skeleton-line.medium {
    width: 76%;
}

.caregiver-loading-skeleton-line.short {
    width: 52%;
}

.caregiver-details-error-state {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.caregiver-details-status-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-size: 1.65rem;
}

.caregiver-details-status-title {
    margin: 0;
    color: #1f2937;
    font-size: 1.05rem;
    font-weight: 700;
}

.caregiver-details-status-message {
    margin: 0;
    color: #6b7280;
    max-width: 320px;
    line-height: 1.5;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row label {
    font-weight: 600;
    color: #333;
    min-width: 120px;
}

.info-row span {
    color: #666;
    text-align: right;
}

.training-progress-details h3 {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.progress-section {
    margin-bottom: 1.5rem;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.progress-item label {
    font-weight: 600;
    color: #333;
    min-width: 120px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    transition: width 0.3s ease;
}

.progress-item span {
    font-weight: 600;
    color: #007bff;
    min-width: 50px;
    text-align: right;
}

.completed-modules h4 {
    color: #333;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.module-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.module-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.no-modules {
    color: #999;
    font-style: italic;
}

.caregiver-details-footer {
    padding: 1.5rem;
    border-top: 1px solid #eee;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.button.sm {
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
    border-radius: 10px;
}

.button.xs {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 10px;
}

.danger-button {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border: none;
}

.danger-button:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3);
}

@keyframes caregiverDetailsShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Reminder Wizard Modal Styles */
.reminder-wizard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.64);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reminder-wizard-modal.show {
    opacity: 1;
}

.reminder-wizard-content {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-width: 860px;
    width: min(92vw, 860px);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.reminder-wizard-modal.show .reminder-wizard-content {
    transform: translateY(0) scale(1);
}

.reminder-wizard-header {
    background: var(--background-color);
    color: var(--text-color);
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.reminder-wizard-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.reminder-wizard-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.reminder-wizard-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-color);
}

.reminder-wizard-header p {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.reminder-wizard-close {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-light);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.reminder-wizard-close:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    transform: translateY(-1px);
}

.reminder-wizard-body {
    padding: 1.25rem 1.5rem;
    overflow: hidden;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reminder-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.reminder-summary-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-light);
}

.reminder-summary-card span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reminder-summary-card strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-color);
    font-size: 1.45rem;
    line-height: 1;
}

.reminder-info {
    background: rgba(59, 130, 246, 0.08);
    padding: 0.9rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.reminder-info p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.65;
}

.reminder-wizard-modal .caregiver-selection {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.reminder-wizard-modal .selection-header {
    background: var(--background-color);
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.reminder-wizard-modal .select-all-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    position: relative;
}

.reminder-wizard-modal .select-all-container input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.reminder-wizard-modal .select-all-container:hover input ~ .checkmark {
    border-color: #007bff;
}

.reminder-wizard-modal .select-all-container input:checked ~ .checkmark,
.reminder-wizard-modal .select-all-container input:indeterminate ~ .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

.reminder-wizard-modal .select-all-container input:checked ~ .checkmark:after,
.reminder-wizard-modal .select-all-container input:indeterminate ~ .checkmark:after {
    display: block;
}

.reminder-wizard-modal .select-all-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.reminder-wizard-modal .select-all-container input:indeterminate ~ .checkmark:after {
    left: 4px;
    top: 8px;
    width: 8px;
    height: 2px;
    border: 0;
    background: white;
    transform: none;
}

.reminder-wizard-modal .caregiver-list {
    max-height: 390px;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    background: var(--background-light);
    padding: 0.75rem;
    display: grid;
    gap: 0.75rem;
}

.reminder-wizard-modal .caregiver-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.reminder-wizard-modal .caregiver-item:last-child {
    border-bottom: 1px solid var(--border-color);
}

.reminder-wizard-modal .caregiver-item:hover {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.reminder-wizard-modal .caregiver-item.missing-initial {
    border-left: 4px solid #ef4444;
}

.reminder-wizard-modal .caregiver-item.missing-annual {
    border-left: 4px solid #f59e0b;
}

.reminder-wizard-modal .caregiver-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-top: 0.25rem;
}

.reminder-wizard-modal .caregiver-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.reminder-wizard-modal .checkmark {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
}

.reminder-wizard-modal .caregiver-checkbox:hover input ~ .checkmark {
    border-color: #007bff;
}

.reminder-wizard-modal .caregiver-checkbox input:checked ~ .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

.reminder-wizard-modal .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.reminder-wizard-modal .caregiver-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.reminder-wizard-modal .caregiver-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.reminder-wizard-modal .caregiver-info {
    flex: 1;
    min-width: 0;
}

.reminder-wizard-modal .caregiver-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.reminder-wizard-modal .caregiver-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.reminder-wizard-modal .caregiver-email {
    color: var(--text-secondary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.reminder-wizard-modal .training-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.reminder-wizard-modal .category-progress-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0;
}

.reminder-wizard-modal .category-progress-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-color);
    font-size: 0.78rem;
    line-height: 1.35;
}

.reminder-wizard-modal .status-badge.urgent {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.reminder-wizard-modal .status-badge.warning {
    background: #ffc107;
    color: #333;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.reminder-wizard-modal .selected-count {
    font-weight: 600;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
}

.reminder-wizard-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--background-color);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.reminder-wizard-footer .button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reminder-wizard-footer .secondary-button {
    background: var(--background-light);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.reminder-wizard-footer .secondary-button:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.28);
}

.reminder-wizard-footer .primary-button {
    background: #16a34a;
    color: white;
    border: none;
}

.reminder-wizard-footer .primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.25);
}

.reminder-wizard-footer .primary-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Certificate Selection Modal */
.certificate-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.certificate-modal.show {
    opacity: 1;
}

.certificate-modal-content {
    background: white;
    border-radius: 20px;
    padding: 0;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.certificate-modal.show .certificate-modal-content {
    transform: scale(1);
}

.certificate-modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 30px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.certificate-modal-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.2);
}

.certificate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px;
}

.certificate-preview {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.certificate-preview:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #ff6b35;
}

.certificate-preview.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.certificate-preview.disabled:hover {
    transform: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.certificate-image {
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.certificate-image.initial {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
}

.certificate-image.annual {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.certificate-image.locked {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.certificate-preview-content {
    text-align: center;
    color: white;
    padding: 20px;
    width: 100%;
}

.certificate-preview-logo {
    margin-bottom: 15px;
}

.certificate-preview-logo img {
    width: 40px;
    height: auto;
    border-radius: 5px;
}

.certificate-preview-logo i {
    font-size: 2rem;
    opacity: 0.7;
}

.certificate-preview-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.certificate-preview-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.certificate-preview-border {
    width: 60px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
    border-radius: 2px;
}

.certificate-info {
    padding: 25px;
    text-align: center;
}

.certificate-info h3 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e3c72;
}

.certificate-info p {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 0.95rem;
}

.certificate-status {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.certificate-status.available {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.certificate-status.locked {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.certificate-modal-footer {
    padding: 30px;
    text-align: center;
    border-top: 1px solid #eee;
}

.close-button {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(108, 117, 125, 0.3);
}

@media (max-width: 768px) {
    .certificate-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    .certificate-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .certificate-modal-header {
        padding: 20px;
    }
    
    .certificate-modal-header h2 {
        font-size: 1.5rem;
    }
    
    .certificate-info {
        padding: 20px;
    }
    
    .certificate-info h3 {
        font-size: 1.1rem;
    }
}

/* Login Page Styles */
#login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 100px 20px 50px;
}

#login-section .container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.login-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 50px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.login-header {
    margin-bottom: 40px;
}

.login-logo {
    width: 80px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
}

.login-header h2 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.login-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.login-form {
    margin-bottom: 40px;
}

.login-form .button {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: 10px;
}

.login-form .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(125, 90, 61, 0.3);
}

.login-form .button.secondary {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.login-form .button.secondary:hover {
    box-shadow: 0 10px 20px rgba(108, 117, 125, 0.3);
}

.login-info {
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
}

.login-info h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.login-info p {
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.6;
}

.contact-info {
    background: var(--background-light);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.contact-info p {
    margin-bottom: 8px;
}

.contact-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    color: var(--primary-light);
}

/* Login Modal Styles */
#login-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

#login-modal .modal-content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.modal-header h3 {
    color: var(--light-color);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-modal:hover {
    background: var(--background-light);
    color: var(--text-color);
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(125, 90, 61, 0.1);
}

.error-message {
    background: var(--error-color);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: center;
    border-left: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    animation: slideInError 0.3s ease-out;
}

@keyframes slideInError {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.divider span {
    background: white;
    padding: 0 15px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.google-btn {
    background: white !important;
    color: #333 !important;
    border: 2px solid var(--border-color) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.google-btn:hover {
    background: var(--background-light) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.google-btn i {
    color: #4285f4;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .login-container {
        margin: 20px;
        padding: 30px;
    }
    
    .login-header h2 {
        font-size: 1.5rem;
    }
    
    #login-modal .modal-content {
        margin: 20px;
        padding: 30px;
    }
    
    .modal-header h3 {
        font-size: 1.3rem;
    }
    
    /* Profile Page Mobile Styles */
    .profile-container {
        margin: 15px;
        padding: 20px;
        border-radius: 15px;
    }
    
    .profile-header h2 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .profile-header p {
        font-size: 1rem;
    }
    
    .profile-section {
        margin-bottom: 2rem;
    }
    
    .profile-section h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .profile-card {
        padding: 1.25rem;
    }
    
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .info-row strong {
        font-size: 0.9rem;
        color: var(--text-light);
    }
    
    .info-row span {
        font-size: 1rem;
        word-break: break-word;
    }
    
    .certificate-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .certificate-info {
        width: 100%;
    }
    
    .certificate-item button {
        width: 100%;
        padding: 0.875rem;
        font-size: 1rem;
        min-height: 44px;
    }
    
    /* Form improvements for mobile */
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-group label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .form-group input,
    .form-group select {
        width: 100%;
        padding: 0.875rem;
        font-size: 1rem;
        min-height: 44px;
        border-radius: 8px;
    }
    
    .button {
        min-height: 44px;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        border-radius: 8px;
    }
    
    /* Mobile navigation improvements */
    .hamburger {
        padding: 8px;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .close-menu {
        padding: 8px;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile module cards improvements */
    .module-card {
        margin-bottom: 1rem;
    }
    
    .module-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .module-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .module-actions {
        width: 100%;
        gap: 0.75rem;
    }
    
    .module-actions .button {
        flex: 1;
        text-align: center;
    }
    
    .admin-tools {
        gap: 12px;
    }
    
    .admin-tools .button {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    .progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .progress-percentage {
        font-size: 0.9rem;
    }
    
    .profile-card {
        padding: 20px;
    }
    
    .profile-info {
        margin-bottom: 15px;
    }
    
    .info-row {
        padding: 10px 0;
    }
    
    .info-label {
        font-size: 0.9rem;
    }
    
    .info-value {
        font-size: 0.9rem;
    }
    
    .certificate-info h4 {
        font-size: 1rem;
    }
    
    .certificate-info p {
        font-size: 0.8rem;
    }
    
    .cert-date {
        font-size: 0.7rem;
    }
    
    .progress-item {
        margin-bottom: 15px;
    }
    
    .progress-header {
        margin-bottom: 6px;
    }
    
    .progress-bar {
        height: 6px;
    }
}

/* Profile Page Styles */
#profile-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 100px 0 50px;
}

.profile-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--background-color);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

.profile-header {
    text-align: center;
    margin-bottom: 40px;
}

.profile-header h2 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.profile-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.profile-section {
    margin-bottom: 40px;
}

.profile-section h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-grid {
    display: grid;
    gap: 20px;
}

.profile-card {
    background: var(--background-light);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid var(--border-color);
}

.profile-info {
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: var(--text-color);
}

.info-value {
    color: var(--text-light);
}

.progress-summary {
    margin-bottom: 20px;
}

.progress-item {
    margin-bottom: 20px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-percentage {
    font-weight: 600;
    color: var(--primary-color);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.certificates-list,
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.certificate-item,
.document-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.certificate-info,
.document-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.certificate-info i,
.document-info i {
    font-size: 2rem;
    color: var(--primary-color);
}

.certificate-info h4,
.document-info h4,
.document-name {
    margin: 0 0 5px 0;
    color: var(--text-color);
}

.certificate-info p,
.document-info p,
.document-date {
    margin: 0 0 5px 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

.cert-date {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
}

.button.danger {
    background: var(--error-color);
    color: white;
}

.button.danger:hover {
    background: #c82333;
}

.admin-tools {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-tools .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 600;
}

/* Signup Page Styles */
#signup-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 100px 0 50px;
}

.signup-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 50px;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.signup-header {
    margin-bottom: 40px;
}

.signup-logo {
    width: 80px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
}

.signup-header h2 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.signup-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.invitation-status {
    margin-bottom: 40px;
    padding: 30px;
    border-radius: 15px;
    background: var(--background-light);
}

.loading-spinner {
    text-align: center;
}

.loading-spinner i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.loading-spinner p {
    color: var(--text-light);
    font-size: 1rem;
    margin: 0;
}

.valid-status {
    text-align: center;
    color: var(--success-color);
}

.valid-status i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.valid-status h3 {
    color: var(--success-color);
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.valid-status p {
    color: var(--text-light);
    margin: 0;
}

.error-status {
    text-align: center;
    color: var(--error-color);
}

.error-status i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.error-status h3 {
    color: var(--error-color);
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.error-status p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.signup-form {
    margin-bottom: 40px;
    text-align: left;
}

.signup-form .form-group {
    margin-bottom: 25px;
}

.signup-form .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.signup-form .form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.signup-form .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(125, 90, 61, 0.1);
}

.signup-form .form-group input[readonly] {
    background: var(--background-light);
    color: var(--text-light);
}

.signup-form .form-group small {
    display: block;
    margin-top: 5px;
    color: var(--text-light);
    font-size: 0.85rem;
}

.signup-form .button {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white !important;
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}

.signup-form .button,
.signup-form .button .btn-text,
.signup-form .button .btn-loading {
    color: white !important;
}

/* Google button should have dark text, not white */
.signup-form .google-btn,
.signup-form .google-btn .btn-text {
    color: #333 !important;
}

.signup-form .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(125, 90, 61, 0.3);
}

.signup-form .button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.signup-success {
    text-align: center;
    padding: 40px 20px;
}

.success-icon {
    margin-bottom: 20px;
}

.success-icon i {
    font-size: 4rem;
    color: var(--success-color);
}

.signup-success h3 {
    color: var(--success-color);
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.signup-success p {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.redirect-countdown {
    background: var(--background-light);
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
}

.redirect-countdown span {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.signup-info {
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    text-align: left;
}

.signup-info h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
    text-align: center;
}

.signup-info p {
    color: var(--text-light);
    margin-bottom: 15px;
    line-height: 1.6;
}

.signup-info ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.signup-info ul li {
    padding: 8px 0;
    color: var(--text-light);
    position: relative;
    padding-left: 25px;
}

.signup-info ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .signup-container {
        margin: 20px;
        padding: 30px;
    }
    
    .signup-header h2 {
        font-size: 1.5rem;
    }
    
    .invitation-status {
        padding: 20px;
    }
    
    .valid-status h3,
    .error-status h3 {
        font-size: 1.3rem;
    }
    
    .signup-success h3 {
        font-size: 1.5rem;
    }
}

/* Google Button Styles */
.google-btn {
    background: white;
    color: #333 !important;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 10px;
}

.google-btn:hover {
    background: var(--background-light);
    border-color: #ccc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.google-btn i {
    color: #4285f4;
    font-size: 1.1rem;
}

/* Google Security Info Styles */
.info-message {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-message i {
    color: #2196f3;
    font-size: 1.1rem;
}

.info-message span {
    color: #1976d2;
    font-size: 0.95rem;
    line-height: 1.4;
}

.link {
    color: #1976d2;
    text-decoration: none;
    font-weight: 500;
}

.link:hover {
    text-decoration: underline;
}

/* Slide-based Course Builder Styles */
.slides-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.slide-card {
    background: var(--background-light);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.slide-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.slide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
}

.slide-number {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.slide-number i {
    font-size: 1.5rem;
}

.slide-element-count {
    font-weight: 400;
    font-size: 0.9rem;
    color: #666;
    margin-left: 0.5rem;
}

.slide-actions {
    display: flex;
    gap: 0.5rem;
}

.slide-content {
    background: white;
    border-radius: 8px;
    padding: 1rem;
}

.slide-elements-dropzone {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: background 0.3s ease;
    border-radius: 8px;
    padding: 1rem;
}

.slide-elements-dropzone.drag-over {
    background: #e3f2fd;
    border: 2px dashed var(--primary-color);
}

.slide-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #999;
}

.slide-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.slide-empty p {
    margin: 0;
    font-size: 0.95rem;
}

.slide-add-element {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.btn-text {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-text:hover {
    background: #e3f2fd;
}

.btn-text.danger {
    color: #dc3545;
}

.btn-text.danger:hover {
    background: #ffeef0;
    color: #c82333;
}

[data-theme="dark"] .btn-text.danger:hover {
    background: rgba(220, 53, 69, 0.15);
}

.slide-elements-dropzone .course-element {
    margin-bottom: 1rem;
}

.slide-elements-dropzone .course-element:last-child {
    margin-bottom: 0;
}

/* Notification Toast */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
    min-width: 250px;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-success {
    border-left: 4px solid #4caf50;
}

.notification-success i {
    color: #4caf50;
}

.notification-error {
    border-left: 4px solid #f44336;
}

.notification-error i {
    color: #f44336;
}

.notification-info {
    border-left: 4px solid #2196f3;
}

.notification-info i {
    color: #2196f3;
}

.notification i {
    font-size: 1.25rem;
}

.notification span {
    color: #333;
    font-size: 0.95rem;
}

/* Element Picker Modal */
.element-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.element-picker-modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.element-picker-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.element-picker-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.element-picker-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.element-picker-close:hover {
    background: #f8f9fa;
    color: #333;
}

.element-picker-modal-body {
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

.element-picker-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0.25rem 0;
}

.element-picker-option:hover {
    background: var(--background-light, #f8f9fa);
    transform: translateX(4px);
}

.element-picker-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
    flex-shrink: 0;
}

.element-picker-icon i {
    font-size: 1.1rem;
}

.element-picker-option span {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .element-picker-modal-content {
        width: 95%;
        max-height: 85vh;
}

    .element-picker-modal-header {
        padding: 1rem 1.25rem;
    }
    
    .element-picker-modal-header h3 {
        font-size: 1.1rem;
    }
    
    .element-picker-modal-body {
        padding: 0.75rem;
    }
}

/* Category Selection Grid */
.categories-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.category-checkbox-card {
    position: relative;
}

.category-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.category-checkbox-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.category-checkbox-label:hover {
    border-color: var(--primary-color);
    background: var(--background-light);
}

.category-checkbox:checked + .category-checkbox-label {
    border-color: var(--primary-color);
    background: #e3f2fd;
    box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}

.category-checkbox-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.category-checkbox-content i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.category-checkbox-content span {
    font-weight: 500;
    color: #333;
}

.category-checkbox-hours {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
    background: #f0f0f0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.category-checkbox:checked + .category-checkbox-label .category-checkbox-hours {
    background: var(--primary-color);
    color: white;
}

/* Client Management Styles */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.client-card {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.client-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.client-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.client-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), #4a5a8a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.client-card-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.client-phone {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.client-card-body {
    margin-bottom: 1rem;
}

.client-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.client-detail i {
    color: var(--primary-color);
    width: 16px;
}

.client-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Multi-Select Mode Styles */
.client-card-checkbox {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

.client-card-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.client-card {
    position: relative;
}

.client-card.selected {
    border: 2px solid var(--primary-color);
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.client-card.selected:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Incomplete Reviews Styles */
.incomplete-review-row {
    transition: all 0.2s ease;
}

.incomplete-review-row.editing-row {
    background: rgba(66, 153, 225, 0.1) !important;
    border: 2px solid #4299e1 !important;
}

.incomplete-review-row:hover {
    background: var(--background-light);
}

.editable-field {
    transition: all 0.2s ease;
}

.editable-field:hover {
    background: rgba(102, 126, 234, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Client Profile Styles */
.profile-section {
    background: var(--background-color);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.profile-section h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    color: var(--primary-dark);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-item label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item p {
    margin: 0;
    color: var(--text-color);
    font-size: 1rem;
}

.caregivers-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.empty-state-small {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

.empty-state-small i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.empty-state-small p {
    margin: 0;
    font-size: 0.95rem;
}

/* Review History Styles */
.review-history-container {
    margin-top: 1rem;
}

.review-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.review-history-item {
    background: var(--background-light);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.review-history-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.review-history-item-alert {
    border-color: rgba(239, 68, 68, 0.35);
    background:
        linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.01) 100%),
        var(--background-light);
}

.review-history-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-history-label i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.review-history-label-alert {
    color: #b91c1c;
}

.review-history-label-alert i {
    color: #ef4444;
}

.review-history-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-date {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.review-name {
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 500;
}

.review-status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
}

.review-status-pill.overdue {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.review-reviewer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.reviewer-name {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
}

.reviewer-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.review-focus-detail {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.review-focus-detail-alert {
    color: #b91c1c;
}

.review-reviewer-alert {
    color: #b91c1c;
}

.review-followup {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.error-state {
    text-align: center;
    padding: 2rem;
    color: var(--error-color);
}

.error-state i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.error-state p {
    margin: 0;
    font-size: 0.95rem;
}

.error-text {
    color: var(--error-color);
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .clients-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .review-history-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================
   SUPER ADMIN DASHBOARD STYLES
   ============================ */

.super-admin-section {
    margin-top: 2rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    font-size: 1.5rem;
    margin: 0;
}

.section-header h3 i {
    color: var(--primary-color);
}

/* Agencies Grid */
.agencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.agency-card {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.agency-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.agency-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.agency-card-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-size: 1.25rem;
}

.agency-id {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-dark);
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
}

.agency-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.agency-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.agency-stat i {
    color: var(--primary-color);
    width: 16px;
}

.agency-stat strong {
    color: var(--text-color);
}

.agency-stat-meta {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-light);
    font-size: 0.78rem;
    line-height: 1.4;
}

.agency-stat.agency-trial-active i,
.agency-stat.agency-trial-active strong {
    color: #b45309;
}

.agency-stat.agency-trial-expired i,
.agency-stat.agency-trial-expired strong {
    color: var(--error-color);
}

.agency-card-actions {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
}

/* Template Management Styles */
.template-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

.template-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.template-item-card h4 {
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
    font-size: 1rem;
}

.empty-state-text {
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

/* Course Browser Styles */
.course-browser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.course-browser-card {
    padding: 1rem;
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.course-browser-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.course-browser-card.selected {
    border-color: var(--primary-color);
    background: rgba(79, 70, 229, 0.05);
}

.course-browser-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

/* Category Browser Styles */
.category-browser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.category-browser-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-browser-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.category-browser-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

/* Template Preview Styles */
.stat-card {
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: var(--border-radius);
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Agency Details Modal */
.modal-large {
    max-width: 900px;
}

.agency-details-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

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

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.agency-tab-content {
    display: none;
}

.agency-tab-content.active {
    display: block;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tab-header h3 {
    margin: 0;
    color: var(--text-color);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Users Table */
.users-table {
    overflow-x: auto;
}

.users-table table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th {
    background: var(--background-light);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.users-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
}

.users-table tr:hover {
    background: var(--background-light);
}

.role-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.role-badge.admin {
    background: #DBEAFE;
    color: #1E40AF;
}

.role-badge.caregiver {
    background: #E0E7FF;
    color: #4338CA;
}

/* Courses Grid Small */
.courses-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.course-card-small {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    transition: all 0.2s ease;
}

.course-card-small:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.course-card-small h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-size: 1rem;
}

.course-card-small p {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.course-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.course-meta i {
    color: var(--primary-color);
}

/* Super Admin Courses Table */
.courses-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.courses-data-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.courses-data-table thead th {
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    border-bottom: none;
}

.courses-data-table thead th:first-child {
    border-top-left-radius: 12px;
}

.courses-data-table thead th:last-child {
    border-top-right-radius: 12px;
}

.courses-data-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #e5e7eb;
}

.courses-data-table tbody tr:last-child {
    border-bottom: none;
}

.courses-data-table tbody tr:hover {
    background: #f9fafb;
}

.courses-data-table tbody td {
    padding: 1.25rem 1.5rem;
    vertical-align: top;
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Course Title Cell */
.course-title-cell {
    font-weight: 600;
    min-width: 250px;
}

.course-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.course-title-icon {
    color: var(--primary-color);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.course-title-cell strong {
    color: #111827;
    font-weight: 600;
}

/* Agency Cell */
.agency-cell {
    min-width: 180px;
}

.agency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #eff6ff;
    color: #1e40af;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.agency-badge i {
    font-size: 0.875rem;
}

/* Description Cell */
.description-cell {
    max-width: 400px;
    color: #6b7280;
    line-height: 1.6;
}

/* Categories Cell */
.categories-cell {
    min-width: 200px;
}

.categories-text {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Hours Cell */
.hours-cell {
    white-space: nowrap;
}

.hours-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    color: #166534;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.hours-badge i {
    font-size: 0.875rem;
    color: #16a34a;
}

/* Date Cell */
.date-cell {
    white-space: nowrap;
}

.date-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.date-text i {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Table Container */
.table-container {
    overflow-x: auto;
    border-radius: 12px;
}

/* Loading and Empty Messages */
.loading-message,
.empty-message,
.error-message {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7280;
}

.loading-message i,
.empty-message i,
.error-message i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
    color: var(--primary-color);
}

.loading-message p,
.empty-message p,
.error-message p {
    margin: 0;
    font-size: 1rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--border-radius);
    padding: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.9;
}

.stat-details h3 {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    font-weight: 700;
}

.stat-details p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Responsive Super Admin */
@media (max-width: 768px) {
    .agencies-grid {
        grid-template-columns: 1fr;
    }
    
    .courses-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .agency-details-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-btn {
        white-space: nowrap;
    }
    
    /* Courses Table Responsive */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .courses-data-table {
        min-width: 800px;
    }
    
    .courses-data-table thead th {
        padding: 0.875rem 1rem;
        font-size: 0.75rem;
    }
    
    .courses-data-table tbody td {
        padding: 1rem;
        font-size: 0.875rem;
    }
    
    .course-title-cell {
        min-width: 200px;
    }
    
    .description-cell {
        max-width: 250px;
    }
    
    .agency-cell {
        min-width: 140px;
    }
    
    .users-table {
        font-size: 0.85rem;
    }
    
    .users-table th,
    .users-table td {
        padding: 0.5rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}


/* Invitation Success Modal Styles */

.success-message-box {
    text-align: center;
    padding: 20px;
    background: #f0fdf4;
    border-radius: 10px;
    margin-bottom: 30px;
}

.invitation-details {
    padding: 20px;
}

.detail-group {
    margin-bottom: 20px;
}

.detail-group label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    font-size: 14px;
}

.detail-value {
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 16px;
}

.copy-field {
    display: flex;
    align-items: center;
}

.copy-field button {
    transition: all 0.2s ease;
}

.copy-field button:hover {
    transform: scale(1.1);
}

/* Courses Table Styles for Caregiver Training Portal */
.courses-table-container {
    margin-top: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.courses-table {
    width: 100%;
    border-collapse: collapse;
}

.courses-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.courses-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.courses-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
}

.courses-table tbody tr:hover {
    background-color: #f9fafb;
}

.courses-table tbody tr:last-child {
    border-bottom: none;
}

.courses-table td {
    padding: 1rem;
    color: #374151;
    font-size: 0.95rem;
}

.courses-table td strong {
    color: #111827;
    font-weight: 600;
}

.courses-table .progress-bar {
    display: inline-block;
    width: 100px;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 0.5rem;
}

.courses-table .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

.courses-table .button.start-module {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.courses-table .button.start-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

/* Mobile Responsive Courses Table */
@media (max-width: 768px) {
    .courses-table-container {
        overflow-x: visible;
    }
    
    .courses-table {
        display: block;
    }
    
    .courses-table thead {
        display: none;
    }
    
    .courses-table tbody {
        display: block;
    }
    
    .courses-table tbody tr {
        display: block;
        background: white;
        margin-bottom: 1rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        border: 1px solid #e5e7eb;
    }
    
    .courses-table tbody tr:hover {
        border-color: #667eea;
    }
    
    .courses-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f3f4f6;
        gap: 1rem;
    }
    
    .courses-table td:last-child {
        border-bottom: none;
        justify-content: center;
        padding-top: 1rem;
    }
    
    .courses-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 100px;
        flex-shrink: 0;
    }
    
    .courses-table td:first-child {
        font-size: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .courses-table td:first-child strong {
        font-size: 1.1rem;
    }
    
    .courses-table td:first-child::before {
        display: none;
    }
    
    .courses-table td:last-child::before {
        display: none;
    }
    
    .courses-table .progress-bar {
        width: 80px;
    }
    
    .courses-table .button.start-module {
        width: 100%;
        padding: 0.75rem 1rem;
        text-align: center;
        justify-content: center;
    }
    
    /* Dark mode mobile cards */
    [data-theme="dark"] .courses-table tbody tr {
        background: var(--background-light);
        border-color: var(--border-color);
    }
    
    [data-theme="dark"] .courses-table td {
        border-bottom-color: var(--border-color);
    }
    
    [data-theme="dark"] .courses-table td::before {
        color: var(--text-secondary);
    }
}

/* ============================================
   Theme Toggle Styles
   ============================================ */

.theme-switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 0;
}

.theme-label-left,
.theme-label-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.theme-label-left i,
.theme-label-right i {
    font-size: 1.2rem;
}

/* Toggle Switch */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-darker);
    transition: 0.4s;
    border-radius: 34px;
}

.theme-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .theme-slider {
    background-color: var(--primary-color);
}

.theme-switch input:checked + .theme-slider:before {
    transform: translateX(26px);
}

.theme-switch input:focus + .theme-slider {
    box-shadow: 0 0 1px var(--primary-color);
}

.theme-switch:hover .theme-slider {
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.5);
}

/* Active label styling - use JavaScript to toggle classes */
.theme-switch-container.active-light .theme-label-left {
    color: var(--primary-color);
}

.theme-switch-container.active-dark .theme-label-right {
    color: var(--primary-color);
}

.theme-description {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* ============================================
   Dark Mode Styles
   ============================================ */

[data-theme="dark"] {
    /* Dark Mode Color Variables */
    --primary-color: #6366F1;
    --primary-light: #818CF8;
    --primary-dark: #4F46E5;
    
    /* Background Colors */
    --background-color: #111827;
    --background-light: #1F2937;
    --background-dark: #374151;
    --background-darker: #4B5563;
    --background-secondary: #0F172A;
    --hover-background: rgba(99, 102, 241, 0.14);
    
    /* Text Colors */
    --text-color: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-light: #9CA3AF;
    --text-white: #FFFFFF;
    
    /* Border Colors */
    --border-color: #374151;
    --border-light: #4B5563;
    
    /* Shadows (lighter for dark mode) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* Dark Mode Body and Main Elements */
[data-theme="dark"] body {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="dark"] header {
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .container {
    background: transparent;
}

/* Dark Mode Cards and Sections */
[data-theme="dark"] .profile-card,
[data-theme="dark"] .card,
[data-theme="dark"] .module-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .category-card {
    background: var(--background-light);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .profile-section {
    color: var(--text-color);
}

/* Dark Mode Buttons */
[data-theme="dark"] .button {
    background: var(--primary-color);
    color: var(--text-white);
}

[data-theme="dark"] .button.secondary {
    background: var(--background-dark);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .button:hover {
    background: var(--primary-light);
}

/* Dark Mode Inputs and Forms */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--background-dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary-color);
    background: var(--background-light);
}

[data-theme="dark"] input[readonly] {
    background: var(--background-dark);
    color: var(--text-secondary);
}

/* Dark Mode Links */
[data-theme="dark"] a {
    color: var(--primary-light);
}

[data-theme="dark"] a:hover {
    color: var(--primary-color);
}

/* Dark Mode Tables */
[data-theme="dark"] table {
    background: var(--background-light);
    color: var(--text-color);
}

[data-theme="dark"] th {
    background: var(--background-dark);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] td {
    border-color: var(--border-color);
}

[data-theme="dark"] tr:hover {
    background: var(--background-dark);
}

/* Dark Mode Modals */
[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .modal-content {
    background: var(--background-light);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

/* Dark Mode Navigation */
[data-theme="dark"] #mobile-menu {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .mobile-auth-btn,
[data-theme="dark"] .auth-btn {
    color: var(--text-color);
}

/* Dark Mode Theme Toggle */
[data-theme="dark"] .theme-label-left,
[data-theme="dark"] .theme-label-right {
    color: var(--text-secondary);
}

[data-theme="dark"] .theme-slider {
    background-color: var(--background-darker);
}

[data-theme="dark"] .theme-switch input:checked + .theme-slider {
    background-color: var(--primary-color);
}

/* Dark Mode Progress Bars and Stats */
[data-theme="dark"] .progress-bar {
    background: var(--background-dark);
}

[data-theme="dark"] .progress-fill {
    background: var(--primary-color);
}

[data-theme="dark"] .stat-item {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--border-color);
    color: white;
}

[data-theme="dark"] .stat-item i {
    color: var(--primary-light);
}

[data-theme="dark"] .stat-item span {
    color: white;
}

[data-theme="dark"] .cta-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

[data-theme="dark"] .cta-button:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

/* Dark Mode Badges and Pills */
[data-theme="dark"] .badge,
[data-theme="dark"] .pill {
    background: var(--background-dark);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Dark Mode Dividers */
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Dark Mode Error/Success Messages */
[data-theme="dark"] .error-message {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error-color);
    color: var(--error-light);
}

[data-theme="dark"] .success-message {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success-color);
    color: var(--success-light);
}

[data-theme="dark"] .info-message {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--info-color);
    color: var(--info-color);
}

/* Dark Mode - Caregiver Training Hero Section */
[data-theme="dark"] #hero-training {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

[data-theme="dark"] #hero-training::before {
    opacity: 0.05;
}

[data-theme="dark"] .hero-text-training h2 {
    color: #f8fafc;
}

[data-theme="dark"] .hero-text-training p {
    color: #cbd5e1;
}

/* Dark Mode - Hero Progress Cards */
[data-theme="dark"] .hero-progress-card {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

[data-theme="dark"] .hero-progress-card h3 {
    color: #f1f5f9;
}

[data-theme="dark"] .hero-progress-card p {
    color: #94a3b8;
}

/* Dark Mode - Training Stats */
[data-theme="dark"] .training-stats .stat-card {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

[data-theme="dark"] .training-stats .stat-number {
    color: #f1f5f9;
}

[data-theme="dark"] .training-stats .stat-label {
    color: #94a3b8;
}

/* Dark Mode - Category Progress Section */
[data-theme="dark"] .category-progress-section,
[data-theme="dark"] .training-categories-section {
    background: var(--background-color);
}

[data-theme="dark"] .category-progress-card {
    background: var(--background-light);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .category-progress-card h3,
[data-theme="dark"] .category-progress-card .category-name {
    color: var(--text-color);
}

[data-theme="dark"] .category-progress-card .progress-text,
[data-theme="dark"] .category-progress-card .category-progress {
    color: var(--text-secondary);
}

[data-theme="dark"] .category-progress-card .course-item {
    background: var(--background-dark);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .category-progress-card .course-item:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary-color);
}

/* Dark Mode - Certificates Section (Settings Page) */
[data-theme="dark"] .certificates-section,
[data-theme="dark"] #certificates-section {
    background: var(--background-color);
}

[data-theme="dark"] .certificate-card {
    background: var(--background-light);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .certificate-card h4,
[data-theme="dark"] .certificate-card .certificate-name {
    color: var(--text-color);
}

[data-theme="dark"] .certificate-card p,
[data-theme="dark"] .certificate-card .certificate-status {
    color: var(--text-secondary);
}

[data-theme="dark"] .certificate-card .download-btn {
    background: var(--primary-color);
    color: white;
}

/* Dark Mode - Available Certificates Modal */
[data-theme="dark"] .certificates-modal,
[data-theme="dark"] #certificates-modal,
[data-theme="dark"] .certificate-modal {
    background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .certificates-modal-content,
[data-theme="dark"] #certificates-modal .modal-content,
[data-theme="dark"] .certificate-modal-content {
    background: var(--background-light);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .certificates-modal-content h2,
[data-theme="dark"] .certificates-modal h3,
[data-theme="dark"] .certificate-modal-header h2 {
    color: var(--text-color);
}

[data-theme="dark"] .certificate-modal-footer {
    background: var(--background-dark);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .certificate-grid {
    background: var(--background-light);
}

[data-theme="dark"] .certificate-preview {
    background: var(--background-dark);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .certificate-preview:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .certificate-preview .certificate-info {
    background: var(--background-darker);
}

[data-theme="dark"] .certificate-preview .certificate-info h3,
[data-theme="dark"] .certificate-info h3 {
    color: var(--text-color);
}

[data-theme="dark"] .certificate-preview .certificate-info p,
[data-theme="dark"] .certificate-info p {
    color: var(--text-secondary);
}

[data-theme="dark"] .certificate-preview .certificate-status {
    color: var(--text-secondary);
}

[data-theme="dark"] .certificate-preview .certificate-status.available {
    background: var(--success-color);
    color: var(--text-white);
}

[data-theme="dark"] .certificate-preview .certificate-status.locked {
    background: var(--background-light);
    color: var(--text-secondary);
}

[data-theme="dark"] .certificate-preview-card {
    background: var(--background-dark);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .certificate-preview-card:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .certificate-preview-card h4 {
    color: var(--text-color);
}

[data-theme="dark"] .certificate-preview-card p {
    color: var(--text-secondary);
}

[data-theme="dark"] .certificate-preview-card .locked-overlay {
    background: rgba(15, 23, 42, 0.9);
}

/* Dark Mode - Training Modules Section */
[data-theme="dark"] #training-modules {
    background: var(--background-color);
}

[data-theme="dark"] #training-modules h2 {
    color: var(--text-color);
}

[data-theme="dark"] #training-modules p {
    color: var(--text-secondary);
}

/* ============================================
   Comprehensive Dark Mode Component Overrides
   ============================================ */

/* Navigation */
[data-theme="dark"] header nav a {
    color: var(--text-color);
}

[data-theme="dark"] header nav a:hover {
    color: var(--primary-light);
}

[data-theme="dark"] header .highlight,
[data-theme="dark"] header .current a {
    color: var(--primary-light);
}

/* Course Management */
[data-theme="dark"] .course-mgmt-header h1 {
    color: var(--primary-light);
}

[data-theme="dark"] .course-mgmt-header p {
    color: var(--text-secondary);
}

[data-theme="dark"] .course-mgmt-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .course-tab {
    color: var(--text-secondary);
}

[data-theme="dark"] .course-tab:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-light);
}

[data-theme="dark"] .course-tab.active {
    color: var(--primary-light);
    border-bottom-color: var(--primary-light);
}

/* Page Headers */
[data-theme="dark"] .page-title-group h1 {
    color: var(--primary-light);
}

[data-theme="dark"] .page-title-group p {
    color: var(--text-secondary);
}

[data-theme="dark"] .back-btn {
    border-color: var(--primary-light);
    color: var(--primary-light);
}

[data-theme="dark"] .back-btn:hover {
    background: var(--primary-color);
    color: var(--text-white);
}

/* Training Management Cards */
[data-theme="dark"] .training-mgmt-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .training-mgmt-card h3 {
    color: var(--primary-light);
}

[data-theme="dark"] .training-mgmt-card p {
    color: var(--text-secondary);
}

[data-theme="dark"] .card-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .card-badge {
    background: var(--background-dark);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Loading Animation for Training Management Cards */
.training-mgmt-card.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
    cursor: wait;
}

.training-mgmt-card.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(79, 70, 229, 0.1);
    border-radius: inherit;
    z-index: 1;
    animation: pulse 1.5s ease-in-out infinite;
}

.training-mgmt-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid var(--primary-color);
    border-top-color: transparent;
    border-radius: 50%;
    z-index: 2;
    animation: spin 0.8s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Dark mode loading animation */
[data-theme="dark"] .training-mgmt-card.loading::before {
    background: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .training-mgmt-card.loading::after {
    border-color: var(--primary-light);
    border-top-color: transparent;
}

/* Management Cards */
[data-theme="dark"] .management-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .management-card h3 {
    color: var(--primary-light);
}

[data-theme="dark"] .management-card p {
    color: var(--text-secondary);
}

[data-theme="dark"] .management-pill {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

[data-theme="dark"] .admin-management-header p {
    color: var(--text-secondary);
}

[data-theme="dark"] .admin-management-section {
    background: linear-gradient(180deg, rgba(31, 41, 55, 0.5) 0%, rgba(17, 24, 39, 0.8) 100%);
    border-color: var(--border-color);
}

/* Admin Dashboard Background */
[data-theme="dark"] #admin-dashboard {
    background: linear-gradient(135deg, var(--background-color) 0%, var(--background-light) 100%);
}

[data-theme="dark"] .admin-header p {
    color: var(--text-secondary);
}

/* Admin Stats */
[data-theme="dark"] .admin-stat-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-content h3 {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-number {
    color: var(--primary-light);
}

/* Training Progress */
[data-theme="dark"] .training-progress-section h2 {
    color: var(--primary-light);
}

[data-theme="dark"] .action-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .action-header h3 {
    color: var(--primary-light);
}

[data-theme="dark"] .action-card p {
    color: var(--text-secondary);
}

[data-theme="dark"] .recent-activity {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .activity-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .activity-content p {
    color: var(--text-color);
}

/* Caregiver Progress Table */
[data-theme="dark"] .caregiver-progress-table {
    background: var(--background-light);
    border-color: var(--border-color);
}

/* Client Cards */
[data-theme="dark"] .client-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .client-card-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .client-card-info h3 {
    color: var(--text-color);
}

[data-theme="dark"] .client-phone {
    color: var(--text-secondary);
}

[data-theme="dark"] .client-detail {
    color: var(--text-secondary);
}

[data-theme="dark"] .client-card-footer {
    border-top-color: var(--border-color);
}

/* Profile Sections */
[data-theme="dark"] .profile-section {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .profile-section h2 {
    color: var(--primary-light);
}

[data-theme="dark"] .info-item label {
    color: var(--text-secondary);
}

[data-theme="dark"] .info-item p {
    color: var(--text-color);
}

[data-theme="dark"] .empty-state-small {
    color: var(--text-light);
}

/* Review History Dark Mode */
[data-theme="dark"] .review-history-item {
    background: var(--background-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .review-history-item-alert {
    border-color: rgba(248, 113, 113, 0.45);
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.1) 0%, rgba(248, 113, 113, 0.02) 100%),
        var(--background-color);
}

[data-theme="dark"] .review-history-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .review-history-label i {
    color: var(--primary-light);
}

[data-theme="dark"] .review-history-label-alert {
    color: #fecaca;
}

[data-theme="dark"] .review-history-label-alert i {
    color: #f87171;
}

[data-theme="dark"] .review-date {
    color: var(--text-color);
}

[data-theme="dark"] .review-name {
    color: var(--primary-light);
}

[data-theme="dark"] .review-status-pill {
    background: rgba(129, 140, 248, 0.18);
    color: #c7d2fe;
}

[data-theme="dark"] .review-status-pill.overdue {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
}

[data-theme="dark"] .review-reviewer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .reviewer-name {
    color: var(--text-color);
}

[data-theme="dark"] .reviewer-title {
    color: var(--text-secondary);
}

[data-theme="dark"] .review-focus-detail {
    color: var(--text-secondary);
}

[data-theme="dark"] .review-focus-detail-alert {
    color: #fecaca;
}

[data-theme="dark"] .review-reviewer-alert {
    color: #fecaca;
}

[data-theme="dark"] .error-state {
    color: var(--error-light);
}

[data-theme="dark"] .error-text {
    color: var(--error-light);
}

/* Agency Profile */
[data-theme="dark"] .agency-profile-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .agency-profile-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .profile-logo-preview {
    background: var(--background-dark);
}

[data-theme="dark"] .profile-label {
    color: var(--text-secondary);
}

/* Buttons - Additional Overrides */
[data-theme="dark"] .btn-primary {
    background: var(--primary-color);
    color: var(--text-white);
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--primary-light);
}

[data-theme="dark"] .btn-secondary {
    background: var(--background-dark);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--background-darker);
    border-color: var(--primary-color);
}

/* Count Badge */
[data-theme="dark"] .count-badge {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

/* Tab Headers */
[data-theme="dark"] .tab-header-left h2 {
    color: var(--primary-light);
}

/* Floating Back Button */
[data-theme="dark"] .floating-back-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-white);
}

[data-theme="dark"] .floating-back-btn:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
}

/* Main Content Areas */
[data-theme="dark"] main {
    background: var(--background-color);
}

[data-theme="dark"] .container {
    color: var(--text-color);
}

/* Search Bars */
[data-theme="dark"] input[type="search"],
[data-theme="dark"] .search-bar,
[data-theme="dark"] .search-input {
    background: var(--background-dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] .search-bar:focus,
[data-theme="dark"] .search-input:focus {
    border-color: var(--primary-color);
    background: var(--background-light);
}

/* Pending Tasks Section */
[data-theme="dark"] .pending-tasks {
    background: var(--background-light);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Agency Management Grid */
[data-theme="dark"] .admin-management-grid {
    /* Grid container - no background needed */
}

/* Category Subsection Headers */
[data-theme="dark"] .categories-subsection-header {
    background: linear-gradient(135deg, var(--background-light), var(--background-dark));
    border-left-color: var(--primary-light);
}

[data-theme="dark"] .categories-subsection-header.archived {
    border-left-color: var(--text-light);
}

[data-theme="dark"] .categories-subsection-header h3 {
    color: var(--text-color);
}

[data-theme="dark"] .categories-subsection-header h3 i {
    color: var(--primary-light);
}

[data-theme="dark"] .categories-subsection-header.archived h3 i {
    color: var(--text-light);
}

[data-theme="dark"] .categories-subsection-header.archived .subsection-count {
    background: var(--text-light);
    color: var(--background-color);
}

/* Agency Cards */
[data-theme="dark"] .agency-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .agency-card-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-light);
}

/* ==========================================================================
   Dark Theme (body.dark-theme)
   Applied on analytics.html and admin views that toggle the 'dark-theme' class.
   Uses CSS variables so existing components (agency cards, sections, etc.)
   automatically adapt without extra markup.
   ========================================================================== */

body.dark-theme {
    /* Backgrounds */
    --background-color: #020617;      /* page background */
    --background-light: #020617;
    --background-dark: #020617;
    --background-darker: #0f172a;

    /* Text */
    --text-color: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-light: #6b7280;

    /* Borders & shadows */
    --border-color: #1f2937;
    --border-light: #111827;
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.7);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.8), 0 2px 4px -1px rgba(15, 23, 42, 0.6);
    --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.9), 0 10px 10px -5px rgba(15, 23, 42, 0.7);
}

body.dark-theme header {
    background: var(--background-dark);
    color: var(--text-color);
    border-bottom-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

body.dark-theme main {
    background: var(--background-color);
}

body.dark-theme .admin-management-section {
    background: transparent;
}

body.dark-theme .super-admin-section {
    background: transparent;
}

body.dark-theme .super-admin-section h2,
body.dark-theme .super-admin-section h3 {
    color: var(--text-color);
}

/* Dark theme – analytics page refinements */
body.dark-theme #analytics-section {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

body.dark-theme #analytics-section .admin-management-section {
    background: radial-gradient(circle at top, rgba(79, 70, 229, 0.28), transparent 55%) 
                radial-gradient(circle at bottom, rgba(15, 23, 42, 0.9), #020617);
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.9);
    box-shadow: var(--shadow-lg);
}

body.dark-theme #analytics-section .admin-management-header h2 {
    color: #e5e7eb;
}

body.dark-theme #analytics-section .admin-management-header p {
    color: var(--text-secondary);
}

body.dark-theme #analytics-section .super-admin-section {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    border: 1px solid #1f2937;
}

body.dark-theme #analytics-section .super-admin-section h3 {
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.dark-theme #analytics-section .super-admin-section h3 i {
    color: var(--primary-light);
}

body.dark-theme #analytics-section .info-grid {
    /* tighten spacing slightly on dark to feel denser */
    gap: 0.75rem;
}

body.dark-theme #analytics-section .agency-card {
    background: #020617;
    border-color: #1f2937;
    box-shadow: var(--shadow-sm);
}

body.dark-theme #analytics-section .agency-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

body.dark-theme #analytics-section .agency-stat strong {
    color: #e5e7eb;
}

body.dark-theme #analytics-section .agency-stat span,
body.dark-theme #analytics-section .agency-card > div:last-child {
    color: var(--text-secondary);
}

body.dark-theme #analytics-section #analytics-loading {
    color: var(--text-secondary);
}

body.dark-theme #analytics-section #analytics-error {
    background: rgba(127, 29, 29, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.6);
}

body.dark-theme #reports-section {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

body.dark-theme #reports-section .admin-management-section {
    background: radial-gradient(circle at top, rgba(79, 70, 229, 0.22), transparent 58%) 
                radial-gradient(circle at bottom, rgba(15, 23, 42, 0.92), #020617);
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.9);
    box-shadow: var(--shadow-lg);
}

body.dark-theme #reports-section .super-admin-section {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 18px;
    border: 1px solid #1f2937;
}

body.dark-theme #reports-section .data-table th,
body.dark-theme #reports-section .data-table td {
    border-color: #1f2937;
}

body.dark-theme #reports-section .data-table tbody tr:hover {
    background: rgba(79, 70, 229, 0.12);
}

body.dark-theme .analytics-metric-card.clickable {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.dark-theme .analytics-metric-card.clickable:hover {
    transform: translateY(-2px);
}

.analytics-metric-card.clickable {
    cursor: pointer;
}

.analytics-breakdown-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.analytics-modal-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.analytics-modal-controls label {
    font-weight: 600;
    color: var(--text-secondary);
}

.analytics-modal-controls select {
    min-width: 180px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    background: var(--background-color);
    color: var(--text-color);
}

.analytics-detail-modal-content {
    width: min(1000px, 92vw);
    max-height: 84vh;
    overflow: auto;
}

.analytics-breakdown-table td:nth-child(2),
.analytics-breakdown-table td:nth-child(3),
.analytics-breakdown-table td:nth-child(4),
.analytics-breakdown-table td:nth-child(5) {
    text-align: right;
}

/* Mirror class-based dark theme rules for pages using data-theme attributes */
[data-theme="dark"] #analytics-section .admin-management-section {
    background: radial-gradient(circle at top, rgba(79, 70, 229, 0.28), transparent 55%) 
                radial-gradient(circle at bottom, rgba(15, 23, 42, 0.9), #020617);
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.9);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] #analytics-section .super-admin-section {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    border: 1px solid #1f2937;
}

[data-theme="dark"] #analytics-section .agency-card {
    background: #020617;
    border-color: #1f2937;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] #reports-section .admin-management-section {
    background: radial-gradient(circle at top, rgba(79, 70, 229, 0.22), transparent 58%) 
                radial-gradient(circle at bottom, rgba(15, 23, 42, 0.92), #020617);
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.9);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] #reports-section .super-admin-section {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 18px;
    border: 1px solid #1f2937;
}

body.dark-theme .agency-card {
    background: #020617;
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

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

body.dark-theme .agency-stat i {
    color: var(--text-secondary);
}

body.dark-theme .agency-stat.agency-trial-active i,
body.dark-theme .agency-stat.agency-trial-active strong,
[data-theme="dark"] .agency-stat.agency-trial-active i,
[data-theme="dark"] .agency-stat.agency-trial-active strong {
    color: #fbbf24;
}

body.dark-theme .agency-stat-meta,
[data-theme="dark"] .agency-stat-meta {
    color: var(--text-light);
}

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

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

body.dark-theme .btn-secondary:hover {
    background: #111827;
}

body.dark-theme footer {
    background: #020617;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-light);
}

/* Caregiver Items */
[data-theme="dark"] .caregiver-item {
    color: var(--text-color);
}

[data-theme="dark"] .caregiver-item:hover {
    background: var(--background-dark);
}

/* Management Icon Gradients - Keep vibrant in dark mode */
[data-theme="dark"] .management-icon.course {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
}

[data-theme="dark"] .management-icon.caregiver {
    background: linear-gradient(135deg, #FF6B35, #ff8b5f);
}

[data-theme="dark"] .management-icon.client {
    background: linear-gradient(135deg, #10B981, #34D399);
}

[data-theme="dark"] .management-icon.agency {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
}

/* Training Card Icons - Keep vibrant */
[data-theme="dark"] .training-card-icon {
    /* Gradients remain the same - they're already colorful */
}

/* Text Colors - Global Overrides */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-color);
}

[data-theme="dark"] p {
    color: var(--text-color);
}

/* Links in Dark Mode */
[data-theme="dark"] .link {
    color: var(--primary-light);
}

[data-theme="dark"] .link:hover {
    color: var(--primary-color);
}

/* Form Labels */
[data-theme="dark"] label {
    color: var(--text-color);
}

/* Small Text */
[data-theme="dark"] small {
    color: var(--text-secondary);
}

/* Code/Pre Elements */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--background-dark);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* ============================================
   ADDITIONAL DARK MODE FIXES
   ============================================ */

/* Pending Tasks Section - Enhanced (override inline styles) */
[data-theme="dark"] #admin-tasks-section {
    background: var(--background-light) !important;
    border-left-color: var(--warning-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #admin-tasks-section h3 {
    color: var(--text-color) !important;
}

[data-theme="dark"] #admin-tasks-section h3 i {
    color: var(--warning-color) !important;
}

[data-theme="dark"] #admin-tasks-list {
    color: var(--text-color);
}

[data-theme="dark"] .task-item,
[data-theme="dark"] .pending-task-item {
    background: var(--background-dark) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .task-item p,
[data-theme="dark"] .pending-task-item p {
    color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .task-item span {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #admin-tasks-list p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #admin-tasks-list .fa-spinner {
    color: var(--warning-color) !important;
}

[data-theme="dark"] #admin-tasks-list .fa-check-circle {
    color: var(--success-color) !important;
}

/* Training Management View Background */
[data-theme="dark"] #training-management-view,
[data-theme="dark"] #course-management-view,
[data-theme="dark"] #client-management-view,
[data-theme="dark"] #agency-management-view {
    background: var(--background-color) !important;
}

[data-theme="dark"] #training-management-view .container,
[data-theme="dark"] #course-management-view .container,
[data-theme="dark"] #client-management-view .container,
[data-theme="dark"] #agency-management-view .container {
    background: transparent;
}

[data-theme="dark"] .course-mgmt-header {
    background: transparent;
}

[data-theme="dark"] .course-mgmt-header h1 {
    color: var(--primary-light);
}

[data-theme="dark"] .course-mgmt-header p {
    color: var(--text-secondary);
}

/* Recent Activity Section - Enhanced */
[data-theme="dark"] .recent-activity {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .recent-activity h2 {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .activity-item {
    border-bottom-color: var(--border-color) !important;
    background: transparent;
}

[data-theme="dark"] .activity-content {
    color: var(--text-color);
}

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

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

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

[data-theme="dark"] .activity-icon {
    /* Keep vibrant gradient for icons */
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

/* Course Management Table */
[data-theme="dark"] .courses-data-table {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .courses-data-table tbody tr {
    border-bottom-color: var(--border-color);
    background: var(--background-light);
}

[data-theme="dark"] .courses-data-table tbody tr:hover {
    background: var(--background-dark);
}

[data-theme="dark"] .courses-data-table tbody td {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .courses-data-table tbody td strong,
[data-theme="dark"] .course-title-cell strong {
    color: var(--text-color);
}

[data-theme="dark"] .courses-table-container {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .courses-table tbody tr {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .courses-table tbody tr:hover {
    background-color: var(--background-dark);
}

[data-theme="dark"] .courses-table td {
    color: var(--text-color);
}

[data-theme="dark"] .courses-table td strong {
    color: var(--text-color);
}

[data-theme="dark"] .courses-table .progress-bar {
    background-color: var(--background-darker);
}

/* Agency Badge */
[data-theme="dark"] .agency-badge {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

/* Client Management - Enhanced */
[data-theme="dark"] .client-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .client-card:hover {
    background: var(--background-dark);
    border-color: var(--primary-color);
}

[data-theme="dark"] .client-card-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .client-card-info h3 {
    color: var(--text-color);
}

[data-theme="dark"] .client-phone {
    color: var(--text-secondary);
}

[data-theme="dark"] .client-detail {
    color: var(--text-secondary);
}

[data-theme="dark"] .client-card-footer {
    border-top-color: var(--border-color);
}

/* Settings Page - Profile Cards */
[data-theme="dark"] .profile-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .profile-card h4 {
    color: var(--text-color);
}

[data-theme="dark"] .profile-card p {
    color: var(--text-secondary);
}

[data-theme="dark"] .profile-info-item label {
    color: var(--text-secondary);
}

[data-theme="dark"] .profile-info-item p {
    color: var(--text-color);
}

/* Agency Profile Management - Enhanced */
[data-theme="dark"] .agency-profile-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .agency-profile-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .agency-profile-header h2 {
    color: var(--text-white);
}

[data-theme="dark"] .agency-profile-content {
    background: var(--background-light);
    color: var(--text-color);
}

[data-theme="dark"] .profile-logo-section {
    background: var(--background-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .profile-logo-preview {
    background: var(--background-darker);
    border-color: var(--primary-color);
}

[data-theme="dark"] .profile-info-grid {
    /* Grid container */
}

[data-theme="dark"] .profile-info-item label {
    color: var(--text-secondary);
}

[data-theme="dark"] .profile-info-item p {
    color: var(--text-color);
}

[data-theme="dark"] .profile-label {
    color: var(--text-secondary);
}

/* Training Management Cards Background */
[data-theme="dark"] .training-mgmt-cards {
    background: transparent;
}

/* Admin Stats Cards */
[data-theme="dark"] .admin-stat-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .admin-stat-card:hover {
    background: var(--background-dark);
    border-color: var(--primary-color);
}

/* Send Notifications Section */
[data-theme="dark"] .send-notifications {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

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

[data-theme="dark"] .send-notifications p {
    color: var(--text-secondary) !important;
}

/* Additional fixes for hardcoded backgrounds */
[data-theme="dark"] .container > div[style*="background"] {
    background: var(--background-light) !important;
}

[data-theme="dark"] div[style*="#fff3cd"],
[data-theme="dark"] div[style*="#f9fafb"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"] {
    background: var(--background-light) !important;
}

/* Recent Activity Section with inline styles */
[data-theme="dark"] div[style*="background: white"][style*="border-radius: 12px"] {
    background: var(--background-light) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] div[style*="background: white"][style*="border-radius: 12px"] h2 {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .activity-list div[style*="background: #f8f9fa"] {
    background: var(--background-dark) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .activity-list div[style*="background: #f8f9fa"] p {
    color: var(--text-color) !important;
}

[data-theme="dark"] .activity-list div[style*="background: #f8f9fa"] span {
    color: var(--text-secondary) !important;
}

/* Settings page profile cards */
[data-theme="dark"] .profile-section .profile-card {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .profile-section .profile-card h4 {
    color: var(--text-color) !important;
}

[data-theme="dark"] .profile-section .profile-card p {
    color: var(--text-secondary) !important;
}

/* Agency profile content sections */
[data-theme="dark"] .profile-logo-section {
    background: var(--background-dark) !important;
}

[data-theme="dark"] .profile-info-grid {
    /* Grid container */
}

[data-theme="dark"] .profile-info-item label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .profile-info-item p {
    color: var(--text-color) !important;
}

/* Main Container Backgrounds */
[data-theme="dark"] main {
    background: var(--background-color);
}

[data-theme="dark"] .container {
    background: transparent;
}

[data-theme="dark"] section {
    background: transparent;
}

/* Status Badges in Tables */
[data-theme="dark"] .status-badge {
    color: var(--text-white);
}

[data-theme="dark"] .status-badge.active {
    background: var(--success-color);
}

[data-theme="dark"] .status-badge.pending {
    background: #f59e0b;
    color: #000;
}

/* Dark Mode - Category Progress Stats Cards (Required/Completed/Remaining Hours) */
[data-theme="dark"] .overview-stats .stat,
[data-theme="dark"] .stat {
    background: var(--background-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-value {
    color: var(--text-color);
}

/* Dark Mode - Certificate Item Cards (Settings Page) */
[data-theme="dark"] .certificate-item,
[data-theme="dark"] .document-item {
    background: var(--background-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .certificate-item .certificate-info h4,
[data-theme="dark"] .certificate-item .certificate-name,
[data-theme="dark"] .document-item .document-info h4,
[data-theme="dark"] .document-item .document-name {
    color: var(--text-color);
}

[data-theme="dark"] .certificate-item .certificate-info p,
[data-theme="dark"] .certificate-item .certificate-status,
[data-theme="dark"] .document-item .document-info p,
[data-theme="dark"] .document-item .document-date {
    color: var(--text-secondary);
}

/* Certificate Download Button - Light Mode Fix */
.certificate-item .button.secondary,
.certificate-item .certificate-btn,
.document-item .button.secondary {
    color: var(--primary-color);
    background: white;
    border: 2px solid var(--primary-color);
}

.certificate-item .button.secondary:hover,
.certificate-item .certificate-btn:hover,
.document-item .button.secondary:hover {
    background: var(--primary-color);
    color: white;
}

/* Certificate Section Mobile Improvements */
@media (max-width: 768px) {
    .certificate-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .certificate-item .certificate-info {
        flex-direction: column;
        text-align: center;
    }
    
    .certificate-item .certificate-info i {
        margin-bottom: 0.75rem;
    }
    
    .certificate-item .certificate-info > div {
        text-align: center;
    }
    
    .certificate-item .button,
    .certificate-item .certificate-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Security/Password Section Mobile */
    .password-section,
    #security-section {
        padding: 1rem;
    }
    
    .password-section .form-group,
    #security-section .form-group {
        margin-bottom: 1rem;
    }
    
    .password-section .button,
    #security-section .button {
        width: 100%;
    }
}

/* Dark Mode - Available Certificates Modal (Index Page) */
[data-theme="dark"] .certificates-grid .certificate-preview {
    background: var(--background-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .certificates-grid .certificate-preview h4,
[data-theme="dark"] .certificates-grid .certificate-preview .cert-title {
    color: var(--text-color);
}

[data-theme="dark"] .certificates-grid .certificate-preview p,
[data-theme="dark"] .certificates-grid .certificate-preview .cert-desc {
    color: var(--text-secondary);
}

/* Action Buttons in Tables */
[data-theme="dark"] .action-btn,
[data-theme="dark"] .btn-icon {
    background: var(--background-dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .action-btn:hover,
[data-theme="dark"] .btn-icon:hover {
    background: var(--background-darker);
    border-color: var(--primary-color);
    color: var(--primary-light);
}

/* Form Inputs in Dark Mode */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--background-dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: var(--background-light);
    border-color: var(--primary-color);
    color: var(--text-color);
}

/* Empty States */
[data-theme="dark"] .empty-state {
    color: var(--text-secondary);
}

[data-theme="dark"] .empty-state h3 {
    color: var(--text-color);
}

[data-theme="dark"] .empty-state p {
    color: var(--text-secondary);
}

/* ============================================
   BILLING & SUBSCRIPTION STYLES
   ============================================ */

/* Plan Badge */
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.plan-badge.beta {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
}

.plan-badge.enterprise {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: var(--text-white);
}

.plan-description {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.95rem;
}

/* Pricing Tiers */
.pricing-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.pricing-tier {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.pricing-tier:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tier-header h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
}

.tier-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-badge.current {
    background: var(--success-color);
    color: var(--text-white);
}

.tier-badge.premium {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: var(--text-white);
}

.tier-price {
    margin-bottom: 1.5rem;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.price-period {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.tier-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-color);
    font-size: 0.95rem;
}

.tier-features li i {
    color: var(--success-color);
    font-size: 0.875rem;
}

.upgrade-btn {
    width: 100%;
    margin-top: 1rem;
}

.upgrade-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark Mode Billing Styles */
[data-theme="dark"] .pricing-tier {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .pricing-tier:hover {
    border-color: var(--primary-light);
}

[data-theme="dark"] .tier-header h5 {
    color: var(--text-color);
}

[data-theme="dark"] .price-amount {
    color: var(--primary-light);
}

[data-theme="dark"] .price-period {
    color: var(--text-secondary);
}

[data-theme="dark"] .tier-features li {
    color: var(--text-color);
}

[data-theme="dark"] .plan-badge.beta {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

/* Mobile Billing Section Fix */
@media (max-width: 768px) {
    #billing-section .profile-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    #billing-section .profile-card {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .pricing-tiers {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pricing-tier {
        min-width: 0;
        width: 100%;
        padding: 1rem;
    }
    
    .tier-header h5 {
        font-size: 1.1rem;
    }
    
    .tier-price .price-amount {
        font-size: 1.75rem;
    }
    
    .tier-features li {
        font-size: 0.85rem;
        padding: 0.4rem 0;
    }
}

/* Dark Mode - Invitation Modal */
[data-theme="dark"] .invitation-modal-content {
    background: var(--background-light);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .invitation-modal-body {
    background: var(--background-light);
}

[data-theme="dark"] .invitation-modal-body label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .invitation-modal-body input[type="text"],
[data-theme="dark"] .invitation-modal-body input[type="email"] {
    background: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color) !important;
}

[data-theme="dark"] .invitation-modal-body input[type="text"]:focus,
[data-theme="dark"] .invitation-modal-body input[type="email"]:focus {
    border-color: var(--primary-light);
    background: var(--background-color);
}

[data-theme="dark"] .invitation-modal-body .form-group small {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .invitation-modal-footer {
    background: var(--background-light);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .invitation-modal-footer p {
    color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .invite-link-note {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .copy-field-input {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .roles-checkbox-group label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .roles-checkbox-group input[type="checkbox"]:checked + label {
    color: var(--text-color) !important;
}

/* Dark Mode - Caregiver Training Progress Table */
[data-theme="dark"] #caregiver-table th,
[data-theme="dark"] #training-mgmt-caregiver-table th {
    background: var(--background-dark) !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
    font-weight: 600;
}

[data-theme="dark"] #caregiver-table td,
[data-theme="dark"] #training-mgmt-caregiver-table td {
    background: var(--background-light);
    border-bottom-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #caregiver-table td a,
[data-theme="dark"] #training-mgmt-caregiver-table td a {
    color: var(--primary-light) !important;
}

[data-theme="dark"] #caregiver-table td a:hover,
[data-theme="dark"] #training-mgmt-caregiver-table td a:hover {
    color: var(--primary-color) !important;
}

[data-theme="dark"] #caregiver-table tbody tr:hover,
[data-theme="dark"] #training-mgmt-caregiver-table tbody tr:hover {
    background: var(--background-dark) !important;
}

/* Dark Mode - Employee Table Hover */
[data-theme="dark"] #employees-table tbody tr:hover,
[data-theme="dark"] .data-table tbody tr:hover {
    background: var(--background-dark) !important;
}

[data-theme="dark"] #employees-table tbody tr:hover td,
[data-theme="dark"] .data-table tbody tr:hover td {
    color: var(--text-color) !important;
}

/* Dark Mode - Caregiver Details Modal */
[data-theme="dark"] .caregiver-details-content {
    background: var(--background-color);
}

[data-theme="dark"] .caregiver-details-body {
    background: var(--background-color);
}

[data-theme="dark"] .caregiver-info .info-row {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .caregiver-info .info-row label {
    color: var(--text-muted);
}

[data-theme="dark"] .caregiver-info .info-row span {
    color: var(--text-color);
}

[data-theme="dark"] .caregiver-loading-preview {
    background: var(--background-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .caregiver-loading-meta strong,
[data-theme="dark"] .caregiver-details-status-title {
    color: var(--text-color);
}

[data-theme="dark"] .caregiver-loading-meta span,
[data-theme="dark"] .caregiver-loading-spinner p,
[data-theme="dark"] .caregiver-details-status-message {
    color: var(--text-secondary);
}

[data-theme="dark"] .caregiver-loading-skeleton-line {
    background: linear-gradient(90deg, var(--background-dark) 0%, rgba(129, 140, 248, 0.28) 50%, var(--background-dark) 100%);
    background-size: 200% 100%;
}

[data-theme="dark"] .caregiver-details-status-icon {
    background: rgba(248, 113, 113, 0.16);
    color: #fda4af;
}

[data-theme="dark"] .training-progress-details h3,
[data-theme="dark"] .caregiver-details-body h3 {
    color: var(--text-color);
}

[data-theme="dark"] .progress-item label {
    color: var(--text-color);
}

[data-theme="dark"] .progress-bar {
    background: var(--background-dark);
}

[data-theme="dark"] .completed-modules h4 {
    color: var(--text-color);
}

[data-theme="dark"] .module-tag {
    background: var(--background-dark);
    color: var(--primary-light);
}

[data-theme="dark"] .caregiver-details-footer {
    background: var(--background-light);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .no-modules {
    color: var(--text-muted);
}

/* Caregiver Details Modal - Scroll Indicator */
.scroll-indicator {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--primary-color);
    font-size: 0.8rem;
    opacity: 1;
    transition: opacity 0.3s ease;
    animation: bounce 1.5s infinite;
}

.scroll-indicator i {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.scroll-indicator span {
    font-weight: 500;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(5px);
    }
    60% {
        transform: translateY(3px);
    }
}

[data-theme="dark"] .scroll-indicator {
    color: var(--primary-light);
}

/* Caregiver Details Modal - Mobile Sticky Footer */
@media (max-width: 768px) {
    .caregiver-details-content {
        display: flex;
        flex-direction: column;
        max-height: 90vh;
    }
    
    .caregiver-details-body {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 1rem;
    }
    
    .caregiver-details-footer {
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #eee;
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 20px 20px;
    }
    
    .caregiver-details-footer button {
        flex: 1;
        min-width: 120px;
    }
    
    [data-theme="dark"] .caregiver-details-footer {
        background: var(--background-color);
        border-top-color: var(--border-color);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .scroll-indicator {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.9);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }

    [data-theme="dark"] .scroll-indicator {
        background: rgba(30, 30, 46, 0.95);
    }
}

/* Dark Mode - Roles Checkbox in Caregiver Details Modal */
[data-theme="dark"] .caregiver-details-body .roles-checkbox-group,
[data-theme="dark"] .caregiver-details-body .categories-checkbox-group {
    background: var(--background-dark);
    border-color: var(--border-color);
}

/* Dark Mode - Edit Employee Modal */
[data-theme="dark"] #edit-employee-modal .modal-content {
    background: var(--background-color);
}

[data-theme="dark"] #edit-employee-modal .modal-header {
    background: var(--background-light);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] #edit-employee-modal .modal-header h2 {
    color: var(--text-color);
}

[data-theme="dark"] #edit-employee-modal .modal-body {
    background: var(--background-color);
}

[data-theme="dark"] #edit-employee-modal label {
    color: var(--text-color);
}

[data-theme="dark"] #edit-employee-modal input[type="text"] {
    background: var(--background-dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] #edit-employee-modal .roles-checkbox-group {
    background: var(--background-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] #edit-employee-modal .roles-checkbox-group label {
    color: var(--text-color);
}

[data-theme="dark"] #edit-employee-modal small {
    color: var(--text-muted);
}

/* Edit Employee Modal - Categories and Progress */
.assigned-categories-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    min-height: 40px;
}

.assigned-categories-display .category-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.training-progress-display {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.progress-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-bar-container {
    width: 100%;
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--success-color), #34d399);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.no-data-text,
.loading-text,
.error-text {
    color: #999;
    font-style: italic;
    margin: 0;
    font-size: 0.9rem;
}

.error-text {
    color: var(--danger-color);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* Dark Mode - Edit Employee Modal Categories & Progress */
[data-theme="dark"] .assigned-categories-display {
    background: var(--background-dark);
}

[data-theme="dark"] .training-progress-display {
    background: var(--background-dark);
}

[data-theme="dark"] .progress-bar-container {
    background: var(--background-light);
}

[data-theme="dark"] .progress-text {
    color: var(--text-color);
}

[data-theme="dark"] .no-data-text,
[data-theme="dark"] .loading-text {
    color: var(--text-muted);
}

/* Edit Employee Modal - Sticky Footer */
#edit-employee-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

#edit-employee-modal .modal-body {
    flex: 1;
    overflow-y: auto;
}

#edit-employee-modal .edit-employee-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
    background: white;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

[data-theme="dark"] #edit-employee-modal .edit-employee-footer {
    background: var(--background-color);
    border-top-color: var(--border-color);
}

@media (max-width: 768px) {
    #edit-employee-modal .edit-employee-footer {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    #edit-employee-modal .edit-employee-footer .btn-danger {
        width: 100%;
        order: 2;
    }
    
    #edit-employee-modal .edit-employee-footer > div {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }
    
    #edit-employee-modal .edit-employee-footer > div button {
        flex: 1;
    }
}

/* Dark Mode - Course Management */
[data-theme="dark"] .course-filters {
    background: var(--background-light);
    border-color: var(--border-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}

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

[data-theme="dark"] .course-filters select,
[data-theme="dark"] .course-filters input[type="text"] {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .course-filters select:focus,
[data-theme="dark"] .course-filters input[type="text"]:focus {
    border-color: var(--primary-light) !important;
    background: var(--background-color) !important;
}

[data-theme="dark"] .courses-table th,
[data-theme="dark"] #courses-table th {
    background: var(--background-dark) !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
    font-weight: 600;
}

[data-theme="dark"] .courses-table td,
[data-theme="dark"] #courses-table td {
    background: var(--background-light);
    border-bottom-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .courses-table tbody tr:hover,
[data-theme="dark"] #courses-table tbody tr:hover {
    background: var(--background-dark) !important;
}

[data-theme="dark"] .courses-table .status-badge,
[data-theme="dark"] #courses-table .status-badge {
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .courses-table .status-badge.completed,
[data-theme="dark"] #courses-table .status-badge.completed {
    background: var(--success-color) !important;
    color: var(--text-white) !important;
}

[data-theme="dark"] .courses-table .status-badge.pending,
[data-theme="dark"] #courses-table .status-badge.pending {
    background: #f59e0b !important;
    color: #000 !important;
}

[data-theme="dark"] .courses-table .status-badge.in-progress,
[data-theme="dark"] #courses-table .status-badge.in-progress {
    background: #3b82f6 !important;
    color: var(--text-white) !important;
}

[data-theme="dark"] .courses-table .status-badge.active,
[data-theme="dark"] #courses-table .status-badge.active {
    background: var(--success-color) !important;
    color: var(--text-white) !important;
}

[data-theme="dark"] .courses-table .status-badge.inactive,
[data-theme="dark"] #courses-table .status-badge.inactive {
    background: var(--text-secondary) !important;
    color: var(--text-white) !important;
}

[data-theme="dark"] .courses-table .action-buttons,
[data-theme="dark"] #courses-table .action-buttons {
    display: flex;
    gap: 0.5rem;
}

[data-theme="dark"] .courses-table .action-btn,
[data-theme="dark"] #courses-table .action-btn,
[data-theme="dark"] .courses-table button.action-btn,
[data-theme="dark"] #courses-table button.action-btn {
    background: var(--primary-color) !important;
    color: var(--text-white) !important;
    border: none !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--border-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .courses-table .action-btn:hover,
[data-theme="dark"] #courses-table .action-btn:hover,
[data-theme="dark"] .courses-table button.action-btn:hover,
[data-theme="dark"] #courses-table button.action-btn:hover {
    background: var(--primary-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

[data-theme="dark"] .courses-table .action-btn i,
[data-theme="dark"] #courses-table .action-btn i {
    color: var(--text-white) !important;
}

[data-theme="dark"] .course-actions-cell .btn-icon-table,
[data-theme="dark"] .course-actions-cell button.btn-icon-table {
    background: var(--primary-color) !important;
    color: var(--text-white) !important;
    border: none !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--border-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 0.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
}

[data-theme="dark"] .course-actions-cell .btn-icon-table:hover,
[data-theme="dark"] .course-actions-cell button.btn-icon-table:hover {
    background: var(--primary-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

[data-theme="dark"] .course-actions-cell .btn-icon-table i,
[data-theme="dark"] .course-actions-cell button.btn-icon-table i {
    color: var(--text-white) !important;
}

/* Dark Mode - Danger button variant */
[data-theme="dark"] .btn-icon-table.btn-icon-danger {
    background: var(--error-color) !important;
}

[data-theme="dark"] .btn-icon-table.btn-icon-danger:hover {
    background: var(--error-light) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .course-title-cell strong {
    color: var(--text-color) !important;
}

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

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

[data-theme="dark"] .course-meta-item i {
    color: var(--primary-light) !important;
}

/* Dark Mode - Category Cards (Roles & Client Types) */
[data-theme="dark"] .category-card {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .category-card:hover {
    border-color: var(--primary-light) !important;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2) !important;
}

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

[data-theme="dark"] .category-details p {
    color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .category-status.active {
    background: rgba(16, 185, 129, 0.2) !important;
    color: var(--success-color) !important;
}

[data-theme="dark"] .category-status.archived {
    background: rgba(107, 114, 128, 0.2) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .category-btn {
    color: var(--text-color) !important;
    background: transparent !important;
}

[data-theme="dark"] .category-btn:hover {
    background: var(--background-dark) !important;
    color: var(--primary-light) !important;
}

[data-theme="dark"] .category-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--error-color) !important;
}

/* Dark Mode - Empty State */
[data-theme="dark"] .empty-state {
    background: var(--background-light) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .empty-state i {
    color: var(--primary-light) !important;
    opacity: 0.5;
}

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

[data-theme="dark"] .empty-state p {
    color: var(--text-secondary) !important;
}

/* Dark Mode - Reminder Wizard Modal */
[data-theme="dark"] .reminder-wizard-modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .reminder-wizard-content {
    background: var(--background-light) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .reminder-wizard-header {
    background: var(--background-light) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .reminder-wizard-header h2 {
    color: var(--text-color) !important;
}

[data-theme="dark"] .reminder-wizard-header p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .reminder-wizard-close,
[data-theme="dark"] .reminder-summary-card {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .reminder-summary-card span,
[data-theme="dark"] .reminder-summary-card strong {
    color: var(--text-color) !important;
}

[data-theme="dark"] .reminder-wizard-body {
    background: var(--background-light) !important;
}

[data-theme="dark"] .reminder-info {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

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

[data-theme="dark"] .reminder-wizard-modal .caregiver-list {
    background: var(--background-light) !important;
}

[data-theme="dark"] .reminder-wizard-modal .caregiver-item {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .reminder-wizard-modal .caregiver-item:hover {
    background: var(--background-dark) !important;
}

[data-theme="dark"] .reminder-wizard-modal .caregiver-item .caregiver-name {
    color: var(--text-color) !important;
}

[data-theme="dark"] .reminder-wizard-modal .caregiver-item .caregiver-email {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .reminder-wizard-modal .caregiver-item .status-badge.urgent {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .reminder-wizard-modal .category-progress-chip {
    background: rgba(59, 130, 246, 0.14) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .reminder-wizard-modal .caregiver-item .incomplete-badge {
    background: var(--error-color) !important;
    color: var(--text-white) !important;
}

[data-theme="dark"] .reminder-wizard-footer {
    background: var(--background-light) !important;
    border-top-color: var(--border-color) !important;
}

/* Roles Checkboxes Base Styles */
.roles-checkboxes {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: var(--background-light);
}

.loading-roles-text {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
}

/* Dark Mode - Invite Roles Container */
[data-theme="dark"] #invite-roles-container,
[data-theme="dark"] .roles-checkboxes {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #invite-roles-container[style*="background"],
[data-theme="dark"] .roles-checkboxes[style*="background"] {
    background: var(--background-color) !important;
}

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

[data-theme="dark"] .loading-roles-text[style*="color"] {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #invite-roles-container label,
[data-theme="dark"] .roles-checkboxes label {
    color: var(--text-color) !important;
}

[data-theme="dark"] #invite-roles-container input[type="checkbox"] + label,
[data-theme="dark"] .roles-checkboxes input[type="checkbox"] + label {
    color: var(--text-color) !important;
}

[data-theme="dark"] #invite-roles-container input[type="checkbox"]:checked + label,
[data-theme="dark"] .roles-checkboxes input[type="checkbox"]:checked + label {
    color: var(--text-color) !important;
    background: rgba(79, 70, 229, 0.1) !important;
}

[data-theme="dark"] #invite-roles-container .checkbox-item,
[data-theme="dark"] .roles-checkboxes .checkbox-item {
    background: var(--background-dark) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #invite-roles-container .checkbox-item:hover,
[data-theme="dark"] .roles-checkboxes .checkbox-item:hover {
    background: var(--hover-background) !important;
}

[data-theme="dark"] #invite-roles-container .checkbox-item label,
[data-theme="dark"] .roles-checkboxes .checkbox-item label {
    color: var(--text-color) !important;
}

[data-theme="dark"] #invite-roles-container .loading-text,
[data-theme="dark"] .roles-checkboxes .loading-text {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .invite-role-assignments-panel,
[data-theme="dark"] .invite-role-assignments-panel div,
[data-theme="dark"] .invite-role-assignments-panel span,
[data-theme="dark"] .invite-role-assignments-panel label,
[data-theme="dark"] .invite-role-assignments-panel p {
    color: var(--text-color) !important;
}

[data-theme="dark"] .invite-role-card {
    background: var(--background-dark);
    border-color: var(--border-color);
    box-shadow: none;
}

[data-theme="dark"] .invite-role-card:hover {
    background: var(--hover-background);
    border-color: rgba(129, 140, 248, 0.7);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .invite-role-card-title {
    color: var(--text-color) !important;
}

[data-theme="dark"] .invite-role-card-meta {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .invite-role-card-note-annual {
    color: #fbbf24 !important;
}

[data-theme="dark"] .invite-role-card-note-initial {
    color: var(--text-secondary) !important;
}


[data-theme="dark"] #bulk-invite-role-preview-content,
[data-theme="dark"] #bulk-invite-role-preview-content div,
[data-theme="dark"] #bulk-invite-role-preview-content p,
[data-theme="dark"] #bulk-invite-role-preview-content span {
    color: var(--text-color) !important;
}

/* Dark Mode - Settings Page Background */
[data-theme="dark"] body {
    background: var(--background-light) !important;
}

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

[data-theme="dark"] .profile-container::before {
    background: var(--background-light) !important;
}

/* Dark Mode - Agency Management Sections */
[data-theme="dark"] .agency-management-section {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
    padding: 1.5rem !important;
    border-radius: var(--border-radius) !important;
    margin-bottom: 1.5rem !important;
}

[data-theme="dark"] .agency-management-section .section-header h2 {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .roles-list {
    background: transparent !important;
}

[data-theme="dark"] .roles-list .category-card {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

/* Task Rules Documentation Styles */
.task-rules-container {
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 8px;
}

.task-rules-intro {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.task-rules-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-rule-item {
    background: var(--background-color);
    border-radius: 8px;
    border-left: 4px solid var(--rule-color, #667eea);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.task-rule-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text-color);
}

.task-rule-header::-webkit-details-marker {
    display: none;
}

.task-rule-header i:first-child {
    color: var(--rule-color, #667eea);
    font-size: 1rem;
}

.task-rule-header span {
    flex: 1;
}

.task-rule-header .rule-chevron {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.task-rule-item[open] .rule-chevron {
    transform: rotate(180deg);
}

.task-rule-content {
    padding: 0 1.25rem 1rem 2.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9rem;
}

.task-rule-content p {
    margin: 0 0 0.5rem 0;
}

.task-rule-content p:last-child {
    margin-bottom: 0;
}

.task-rules-note {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 6px;
    border-left: 4px solid #2196f3;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.task-rules-note i {
    color: #2196f3;
}

/* Dark Mode - Task Rules */
[data-theme="dark"] .task-rules-container {
    background: var(--background-dark);
}

[data-theme="dark"] .task-rule-item {
    background: var(--background-light);
}

[data-theme="dark"] .task-rule-header {
    color: var(--text-color);
}

[data-theme="dark"] .task-rule-content {
    color: var(--text-secondary);
}

[data-theme="dark"] .task-rules-note {
    background: rgba(33, 150, 243, 0.15);
}

/* Dark Mode - Course Builder Palette Items */
[data-theme="dark"] .palette-item {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .palette-item:hover {
    background: var(--background-dark) !important;
    border-color: var(--primary-light) !important;
}

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

[data-theme="dark"] .palette-info span {
    color: var(--text-secondary) !important;
}

/* Dark Mode - Category Selection Grid */
[data-theme="dark"] .category-checkbox-label {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .category-checkbox-label:hover {
    background: var(--background-dark) !important;
    border-color: var(--primary-light) !important;
}

[data-theme="dark"] .category-checkbox:checked + .category-checkbox-label {
    background: rgba(79, 70, 229, 0.2) !important;
    border-color: var(--primary-light) !important;
    color: var(--text-color) !important;
}

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

[data-theme="dark"] .category-checkbox-content i {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .category-checkbox-content span {
    color: var(--text-color) !important;
}

[data-theme="dark"] .category-checkbox-hours {
    background: var(--background-dark) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .category-checkbox:checked + .category-checkbox-label .category-checkbox-hours {
    background: var(--primary-color) !important;
    color: var(--text-white) !important;
}

/* Dark Mode - Slide Cards */
[data-theme="dark"] .slide-card {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .slide-card:hover {
    border-color: var(--primary-light) !important;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2) !important;
}

[data-theme="dark"] .slide-header {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .slide-number {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .slide-element-count {
    color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .slide-elements-dropzone {
    background: var(--background-light) !important;
}

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

[data-theme="dark"] .slide-empty i {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .slide-empty p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .element-item {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .element-item:hover {
    background: var(--background-dark) !important;
    border-color: var(--primary-light) !important;
}

/* Dark Mode - Bulk Assignment Modal */
[data-theme="dark"] .info-banner {
    background: rgba(79, 70, 229, 0.2) !important;
    border-left-color: var(--primary-light) !important;
}

[data-theme="dark"] .info-banner i {
    color: var(--primary-light) !important;
}

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

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

[data-theme="dark"] .count-info i {
    color: var(--primary-light) !important;
}

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

[data-theme="dark"] #role-mappings-container {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #role-mappings-container[style*="background"] {
    background: var(--background-light) !important;
}

[data-theme="dark"] .role-mapping-item {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .role-mapping-item h4 {
    color: var(--text-color) !important;
}

[data-theme="dark"] .role-mapping-item p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .role-mapping-item label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .role-mapping-item[style*="color"] {
    color: var(--text-color) !important;
}

[data-theme="dark"] .caregiver-search input {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .caregiver-search i {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .caregiver-selection-list {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

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

[data-theme="dark"] .caregiver-item:hover {
    background: var(--background-dark) !important;
}

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

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

/* Dark Mode - Role Mapping Cards in Bulk Assignment */
[data-theme="dark"] .role-mapping-card {
    background: var(--background-color) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .role-mapping-card[style*="border-bottom"] {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .role-mapping-card[style*="background"] {
    background: var(--background-color) !important;
}

/* Dark Mode - Override inline styles in bulk assignment modal */
[data-theme="dark"] div[style*="color: #333"],
[data-theme="dark"] div[style*="color:#333"],
[data-theme="dark"] label[style*="color: #333"],
[data-theme="dark"] label[style*="color:#333"],
[data-theme="dark"] h4[style*="color: #333"],
[data-theme="dark"] h4[style*="color:#333"] {
    color: var(--text-color) !important;
}

[data-theme="dark"] p[style*="color: #666"],
[data-theme="dark"] p[style*="color:#666"],
[data-theme="dark"] span[style*="color: #666"],
[data-theme="dark"] span[style*="color:#666"] {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] span[style*="color: #6c5ce7"],
[data-theme="dark"] span[style*="color:#6c5ce7"] {
    color: var(--primary-light) !important;
}

[data-theme="dark"] div[style*="color: #999"],
[data-theme="dark"] div[style*="color:#999"] {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"] {
    background: var(--background-light) !important;
}

[data-theme="dark"] div[style*="border: 1px solid #e0e0e0"],
[data-theme="dark"] div[style*="border:1px solid #e0e0e0"],
[data-theme="dark"] div[style*="border-bottom: 1px solid #e0e0e0"],
[data-theme="dark"] div[style*="border-bottom:1px solid #e0e0e0"] {
    border-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Dark Mode - Settings Page Background Fix */
[data-theme="dark"] html {
    background: var(--background-light) !important;
}

[data-theme="dark"] body {
    background: var(--background-light) !important;
}

[data-theme="dark"] body[style*="background"] {
    background: var(--background-light) !important;
}

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

[data-theme="dark"] main {
    background: var(--background-light) !important;
}

[data-theme="dark"] .container {
    background: transparent !important;
}

/* Dark Mode - Override inline styles for roles checkboxes */
[data-theme="dark"] div[style*="background: #f9f9f9"],
[data-theme="dark"] div[style*="background:#f9f9f9"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"] {
    background: var(--background-color) !important;
}

[data-theme="dark"] div[style*="color: #999"],
[data-theme="dark"] div[style*="color:#999"] {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] div[style*="border: 1px solid #e0e0e0"],
[data-theme="dark"] div[style*="border:1px solid #e0e0e0"] {
    border-color: var(--border-color) !important;
}

/* Dark Mode - Checkbox Items in Roles Container */
[data-theme="dark"] .checkbox-item {
    color: var(--text-color) !important;
}

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

[data-theme="dark"] .checkbox-item label[style*="color"] {
    color: var(--text-color) !important;
}

[data-theme="dark"] .invite-role-checkbox + label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .invite-role-checkbox:checked + label {
    color: var(--text-color) !important;
    background: rgba(79, 70, 229, 0.1) !important;
}

/* Dark Mode - Settings Page */
[data-theme="dark"] #profile-section {
    background: var(--background-light) !important;
}

[data-theme="dark"] .profile-header h2 {
    color: var(--primary-light) !important;
}

[data-theme="dark"] .profile-header p {
    color: var(--text-secondary) !important;
}

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

/* Theme Toggle Button Styles */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 1.2rem;
    color: var(--text-color, #333);
    border-radius: 8px;
    transition: background-color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: scale(1.1);
}

[data-theme="dark"] .theme-toggle {
    color: #ffd700;
}

[data-theme="light"] .theme-toggle {
    color: #5a5a5a;
}

/* Mobile header layout - theme toggle positioning */
@media (max-width: 768px) {
    .header-flex .theme-toggle {
        order: -1;
        margin-left: auto;
    }
}

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

[data-theme="dark"] .profile-card p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .info-item label {
    color: var(--text-secondary) !important;
}

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

/* Dark Mode - Course Preview Modal */
[data-theme="dark"] .course-preview-modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

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

[data-theme="dark"] .preview-header {
    background: var(--background-light) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .preview-header h2 {
    color: var(--primary-light) !important;
}

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

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

[data-theme="dark"] .preview-hours i {
    color: var(--primary-light) !important;
}

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

[data-theme="dark"] .preview-description {
    background: var(--background-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .preview-element {
    background: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .preview-element-header {
    border-bottom-color: var(--border-color) !important;
}

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

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

[data-theme="dark"] .preview-category-badge {
    background: var(--primary-color) !important;
    color: var(--text-white) !important;
}

/* Review Sequence Styling */
.review-sequence-container {
    margin-bottom: 1.5rem;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 1rem;
    background: var(--background-light);
}

.sequence-header {
    margin-bottom: 1rem;
}

.sequence-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding-left: 1rem;
}

.sequence-reviews-list::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
    opacity: 0.3;
}

.review-item[data-sequence-id] {
    position: relative;
    padding-left: 1.5rem;
}

.review-item[data-sequence-id]::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 1.5rem;
    width: 0.75rem;
    height: 2px;
    background: var(--primary-color);
}

.review-item[data-sequence-id]:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 1.5rem;
    bottom: -1rem;
    width: 2px;
    background: var(--primary-color);
    opacity: 0.3;
}

/* Review Schedule Preview */
.review-schedule-preview {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.review-schedule-preview h4 {
    margin: 0 0 1rem 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-schedule-preview p {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

#schedule-preview-content {
    max-height: 300px;
    overflow-y: auto;
}

#schedule-preview-content > div {
    margin: 0.25rem 0;
    color: var(--text-color);
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

#schedule-preview-content > div:hover {
    background: var(--background-dark);
}

/* Dark Mode - Review Sequences */
[data-theme="dark"] .review-sequence-container {
    background: var(--background-light) !important;
    border-color: var(--primary-light) !important;
}

[data-theme="dark"] .sequence-header {
    background: var(--background-color) !important;
    border-color: var(--primary-light) !important;
}

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

[data-theme="dark"] .sequence-header small {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .sequence-reviews-list::before {
    background: var(--primary-light) !important;
}

[data-theme="dark"] .review-item[data-sequence-id]::before {
    background: var(--primary-light) !important;
}

[data-theme="dark"] .review-item[data-sequence-id]::after {
    background: var(--primary-light) !important;
}

[data-theme="dark"] .review-schedule-preview {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .review-schedule-preview h4 {
    color: var(--text-color) !important;
}

[data-theme="dark"] .review-schedule-preview p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #schedule-preview-content > div {
    color: var(--text-color) !important;
}

[data-theme="dark"] #schedule-preview-content > div:hover {
    background: var(--background-dark) !important;
}

/* Dark Mode - Account Details Text Visibility */
[data-theme="dark"] .info-label {
    color: var(--text-secondary) !important;
}

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

/* Calendar Section Styles */
.calendar-section {
    margin-top: 2rem;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.calendar-header-left h2 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-size: 1.75rem;
}

.calendar-header-left p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

.calendar-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    margin-top: 1rem;
}

.calendar-main {
    background: var(--background-color);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.calendar-sidebar {
    background: var(--background-color);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    height: fit-content;
    max-height: 800px;
    overflow-y: auto;
}

.calendar-sidebar h3 {
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
    font-size: 1.25rem;
}

.sidebar-subtitle {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.upcoming-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.upcoming-event-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.upcoming-event-item:hover {
    background: var(--background-dark);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.upcoming-event-item.unassigned {
    border-left: 4px solid var(--warning-color);
    background: rgba(245, 158, 11, 0.05);
}

.event-item-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.event-date-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.event-time-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.event-item-content {
    flex: 1;
    min-width: 0;
}

.event-item-title {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-item-meta {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.event-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.event-badge.assigned {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.event-badge.unassigned {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.event-badge.review-type-badge {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    border: 1px solid rgba(79, 70, 229, 0.2);
}

.event-item-icon {
    color: var(--primary-color);
    font-size: 1.25rem;
}

/* Event Loading Spinner */
.event-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    color: var(--primary-color);
    font-size: 1.2rem;
    pointer-events: none;
}

.event-loading-spinner i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Review Assignment Modal */
.review-info-card {
    background: var(--background-light);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.review-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.review-info-item:last-child {
    border-bottom: none;
}

.review-info-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.review-info-value {
    color: var(--text-color);
    font-size: 0.95rem;
    text-align: right;
}

/* Responsive Calendar */
@media (max-width: 1024px) {
    .calendar-container {
        grid-template-columns: 1fr;
    }
    
    .calendar-sidebar {
        max-height: 400px;
    }
}

/* Mobile Calendar Optimizations */
@media (max-width: 768px) {
    .calendar-section {
        margin-top: 1rem;
    }
    
    .calendar-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .calendar-header-left h2 {
        font-size: 1.5rem;
    }
    
    .calendar-header-left p {
        font-size: 0.9rem;
    }
    
    .calendar-header .btn-primary {
        width: 100%;
        justify-content: center;
    }
    
    .calendar-container {
        gap: 1rem;
        margin-top: 0.5rem;
    }
    
    .calendar-main {
        padding: 1rem;
        border-radius: 8px;
    }
    
    .calendar-sidebar {
        padding: 1rem;
        border-radius: 8px;
        max-height: 500px;
    }
    
    .calendar-sidebar h3 {
        font-size: 1.1rem;
    }
    
    .sidebar-subtitle {
        font-size: 0.85rem;
    }
    
    .upcoming-event-item {
        padding: 0.75rem;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .event-item-date {
        min-width: 50px;
        flex-shrink: 0;
    }
    
    .event-date-label {
        font-size: 0.75rem;
    }
    
    .event-time-label {
        font-size: 0.8rem;
    }
    
    .event-item-content {
        flex: 1;
        min-width: 0;
    }
    
    .event-item-title {
        font-size: 0.9rem;
        white-space: normal;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }
    
    .event-item-meta {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .event-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    .event-item-icon {
        font-size: 1rem;
        flex-shrink: 0;
    }
    
    /* FullCalendar mobile optimizations */
    .fc {
        font-size: 0.85rem;
    }
    
    .fc-toolbar {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .fc-button {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        min-height: 36px; /* Better touch target */
    }
    
    .fc-toolbar-title {
        font-size: 1.1rem;
        margin: 0.5rem 0;
    }
    
    .fc-daygrid-day-number {
        font-size: 0.9rem;
        padding: 0.25rem;
    }
    
    .fc-daygrid-event {
        font-size: 0.75rem;
        padding: 0.2rem 0.3rem;
        margin: 0.1rem 0;
    }
    
    .fc-col-header-cell {
        padding: 0.5rem 0.25rem;
    }
    
    .fc-col-header-cell-cushion {
        font-size: 0.8rem;
    }
    
    .fc-daygrid-day-frame {
        min-height: 60px;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .calendar-header-left h2 {
        font-size: 1.25rem;
    }
    
    .calendar-main {
        padding: 0.75rem;
    }
    
    .calendar-sidebar {
        padding: 0.75rem;
        max-height: 400px;
    }
    
    .upcoming-event-item {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .event-item-date {
        min-width: 45px;
    }
    
    .event-date-label {
        font-size: 0.7rem;
    }
    
    .event-time-label {
        font-size: 0.75rem;
    }
    
    .event-item-title {
        font-size: 0.85rem;
    }
    
    .fc {
        font-size: 0.75rem;
    }
    
    .fc-button {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .fc-toolbar-title {
        font-size: 1rem;
    }
    
    .fc-daygrid-day-number {
        font-size: 0.8rem;
    }
    
    .fc-daygrid-event {
        font-size: 0.7rem;
        padding: 0.15rem 0.25rem;
    }
    
    .fc-daygrid-day-frame {
        min-height: 50px;
    }
}

/* Dark Mode Calendar */
[data-theme="dark"] .calendar-main,
[data-theme="dark"] .calendar-sidebar {
    background: var(--background-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .calendar-header-left h2 {
    color: var(--text-color);
}

[data-theme="dark"] .upcoming-event-item {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .upcoming-event-item:hover {
    background: var(--background-color);
}

[data-theme="dark"] .event-item-title {
    color: var(--text-color);
}

[data-theme="dark"] .review-info-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .review-info-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .review-info-value {
    color: var(--text-color);
}

/* ========================================
   MOBILE RESPONSIVE FIXES
   ======================================== */

/* Caregiver Training Progress Table - Mobile */
@media (max-width: 768px) {
    #training-mgmt-caregiver-table {
        display: block !important;
        border: none !important;
    }
    
    #training-mgmt-caregiver-table thead {
        display: none !important;
    }
    
    #training-mgmt-caregiver-table tbody {
        display: block !important;
    }
    
    #training-mgmt-caregiver-table tbody tr {
        display: block !important;
        background: var(--background-color) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 10px !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }
    
    #training-mgmt-caregiver-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        text-align: right !important;
    }
    
    #training-mgmt-caregiver-table tbody td:last-child {
        border-bottom: none !important;
        padding-top: 1rem !important;
        justify-content: center !important;
    }
    
    #training-mgmt-caregiver-table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        text-align: left !important;
        flex-shrink: 0 !important;
        margin-right: 1rem !important;
    }
    
    #training-mgmt-caregiver-table tbody td:first-child {
        font-weight: 600 !important;
        font-size: 1.05rem !important;
        color: var(--text-color) !important;
        background: var(--background-light) !important;
        margin: -1rem -1rem 0.5rem -1rem !important;
        padding: 0.75rem 1rem !important;
        border-radius: 10px 10px 0 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    #training-mgmt-caregiver-table tbody td:first-child::before {
        content: none !important;
    }
    
    .caregiver-name-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Pending Tasks Section - Mobile */
@media (max-width: 768px) {
    #admin-tasks-section {
        padding: 1rem !important;
    }
    
    #admin-tasks-section > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    #admin-tasks-section h3 {
        font-size: 1.1rem !important;
    }
    
    .task-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .task-item > div:first-child {
        width: 100% !important;
    }
    
    .task-item > div:first-child > div:first-child {
        flex-wrap: wrap !important;
    }
    
    .task-item > div:last-child,
    .task-item > button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .task-item button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Role Cards & Client Type Cards - Mobile */
@media (max-width: 768px) {
    .roles-list {
        grid-template-columns: 1fr !important;
    }
    
    .category-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }
    
    .category-info {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .category-color-badge {
        width: 40px !important;
        height: 40px !important;
    }
    
    .category-color-badge i {
        font-size: 1.2rem !important;
    }
    
    .category-details {
        width: 100% !important;
    }
    
    .category-details h4 {
        font-size: 1rem !important;
    }
    
    .category-details p {
        font-size: 0.85rem !important;
    }
    
    .category-meta {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .category-actions {
        display: flex !important;
        gap: 0.5rem !important;
    }
    
    .category-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Employee Table - Mobile (Card Layout) */
@media (max-width: 768px) {
    #employees-table-container {
        overflow-x: visible !important;
    }
    
    #employees-table.data-table {
        display: block !important;
        border: none !important;
    }
    
    #employees-table.data-table thead {
        display: none !important;
    }
    
    #employees-table.data-table tbody {
        display: block !important;
    }
    
    #employees-table.data-table tbody tr {
        display: block !important;
        background: var(--background-color) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 10px !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }
    
    #employees-table.data-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        text-align: right !important;
        flex-wrap: wrap !important;
    }
    
    #employees-table.data-table tbody td .role-badge {
        margin: 2px !important;
    }
    
    #employees-table.data-table tbody td:last-child {
        border-bottom: none !important;
        padding-top: 1rem !important;
        justify-content: center !important;
    }
    
    #employees-table.data-table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        text-align: left !important;
        flex-shrink: 0 !important;
        margin-right: 1rem !important;
    }
    
    #employees-table.data-table tbody td:first-child {
        font-weight: 600 !important;
        font-size: 1.05rem !important;
        color: var(--text-color) !important;
        background: var(--background-light) !important;
        margin: -1rem -1rem 0.5rem -1rem !important;
        padding: 0.75rem 1rem !important;
        border-radius: 10px 10px 0 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    #employees-table.data-table tbody td:first-child::before {
        content: none !important;
    }

    #document-status-container {
        overflow-x: visible !important;
    }

    #document-status-table.data-table {
        display: block !important;
        border: none !important;
        background: transparent !important;
    }

    #document-status-table.data-table thead {
        display: none !important;
    }

    #document-status-table.data-table tbody {
        display: block !important;
    }

    #document-status-table.data-table tbody tr {
        display: block !important;
        background: var(--background-color) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
        overflow: hidden !important;
    }

    #document-status-table.data-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
        padding: 0.85rem 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        text-align: right !important;
        flex-wrap: wrap !important;
    }

    #document-status-table.data-table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: var(--text-secondary) !important;
        text-align: left !important;
        min-width: 92px !important;
        flex-shrink: 0 !important;
    }

    #document-status-table.data-table tbody td:first-child {
        background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(14, 165, 233, 0.10)) !important;
        margin: -1rem -1rem 0.75rem -1rem !important;
        padding: 1rem !important;
        border-bottom: 1px solid var(--border-color) !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #document-status-table.data-table tbody td:first-child::before {
        content: none !important;
    }

    #document-status-table.data-table tbody td:last-child {
        border-bottom: none !important;
        padding-top: 1rem !important;
    }

    #document-status-table.data-table .document-status-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    #document-status-table.data-table .document-status-actions .document-status-action-btn {
        width: 100%;
        justify-content: center;
        margin: 0 !important;
    }

    #document-status-table.data-table .document-status-badge {
        margin-left: auto;
    }

    #document-status-table.data-table .document-status-recipient-summary,
    #document-status-table.data-table .document-status-single-recipient {
        width: 100%;
    }

    #document-status-table.data-table tbody tr.document-status-empty-row {
        padding: 0 !important;
    }

    #document-status-table.data-table tbody tr.document-status-empty-row td {
        display: block !important;
        border: none !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }

    #document-status-table.data-table tbody tr.document-status-empty-row td::before {
        content: none !important;
    }
}

/* Course Cards - Mobile (Admin Course Management) */
@media (max-width: 768px) {
    #courses-table.courses-table {
        display: block !important;
    }
    
    #courses-table.courses-table thead {
        display: none !important;
    }
    
    #courses-table.courses-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #courses-table.courses-table tbody tr {
        display: block !important;
        background: var(--background-color) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 10px !important;
        padding: 1rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }
    
    #courses-table.courses-table tbody td {
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }
    
    /* Title - full width, prominent */
    #courses-table.courses-table tbody td.course-title-cell {
        display: block !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--text-color) !important;
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    /* Hide description on mobile */
    #courses-table.courses-table tbody td.course-description-cell {
        display: none !important;
    }
    
    /* Meta items - each on own line with label */
    #courses-table.courses-table tbody td.course-hours-cell,
    #courses-table.courses-table tbody td.course-slides-cell,
    #courses-table.courses-table tbody td.course-categories-cell,
    #courses-table.courses-table tbody td.course-status-cell {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.4rem 0 !important;
        font-size: 0.9rem !important;
    }
    
    #courses-table.courses-table tbody td.course-hours-cell::before,
    #courses-table.courses-table tbody td.course-slides-cell::before,
    #courses-table.courses-table tbody td.course-categories-cell::before,
    #courses-table.courses-table tbody td.course-status-cell::before {
        content: attr(data-label) !important;
        font-weight: 500 !important;
        color: var(--text-secondary) !important;
    }
    
    #courses-table.courses-table tbody td .course-meta-item {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        color: var(--text-color) !important;
    }
    
    #courses-table.courses-table tbody td .course-meta-item i {
        color: var(--primary-light) !important;
        font-size: 0.85rem !important;
    }
    
    #courses-table.courses-table tbody td.course-status-cell .status-badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.6rem !important;
    }
    
    /* Actions - full width, horizontal */
    #courses-table.courses-table tbody td.course-actions-cell {
        display: block !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid var(--border-color) !important;
        margin-top: 0.5rem !important;
    }
    
    #courses-table.courses-table tbody td.course-actions-cell .table-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    #courses-table.courses-table tbody td.course-actions-cell .table-actions button {
        flex: 0 0 auto !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* Course Builder - Mobile Fixes */
@media (max-width: 768px) {
    .course-builder-container {
        padding: 1rem !important;
    }
    
    .course-builder-header {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }
    
    .builder-header-left,
    .builder-header-right {
        width: 100% !important;
    }
    
    .builder-header-right {
        justify-content: flex-end !important;
        gap: 0.5rem !important;
    }
    
    .course-builder-body {
        flex-direction: column !important;
    }
    
    .builder-sidebar {
        width: 100% !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    .builder-main {
        width: 100% !important;
    }
    
    /* Fix floating icons and text overflow in course elements */
    .course-element {
        position: relative !important;
        overflow: hidden !important;
    }
    
    .course-element .element-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .course-element .element-actions {
        position: static !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .course-element .element-content {
        overflow: hidden !important;
        word-wrap: break-word !important;
    }
    
    /* Image upload section */
    .course-element input[type="text"],
    .course-element input[type="url"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* File name display */
    .upload-filename {
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Bulk Assignment Modal - Sticky Footer */
#bulk-assignment-modal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
}

#bulk-assignment-modal .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
}

#bulk-assignment-modal .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--background-color) !important;
    padding: 1rem 1.5rem !important;
    margin: 0 -1.5rem -1.5rem -1.5rem !important;
    border-top: 1px solid var(--border-color) !important;
    z-index: 10 !important;
}

@media (max-width: 768px) {
    #bulk-assignment-modal .modal-content {
        max-height: 95vh !important;
        margin: 0.5rem !important;
    }
    
    #bulk-assignment-modal .modal-actions {
        padding: 1rem !important;
        margin: 0 -1rem -1rem -1rem !important;
    }
    
    #bulk-assignment-modal .modal-actions button {
        flex: 1 !important;
    }
    
    /* Scrollable caregiver list */
    #caregiver-list,
    #role-mappings-container {
        max-height: 250px !important;
    }
}

/* Client Type Modal - Sticky Footer */
#client-type-modal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
}

#client-type-modal .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
}

#client-type-modal .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--background-color) !important;
    padding: 1rem 1.5rem !important;
    margin: 1rem -1.5rem -1.5rem -1.5rem !important;
    border-top: 1px solid var(--border-color) !important;
    z-index: 10 !important;
}

[data-theme="dark"] #client-type-modal .modal-actions {
    background: var(--background-light) !important;
}

/* Add Agency User Modal - Sticky Footer */
#add-agency-user-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

#add-agency-user-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 0;
}

#add-agency-user-modal .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--background-color);
    padding: 1rem 1.5rem;
    margin: 1rem -1.5rem -1.5rem -1.5rem;
    border-top: 1px solid var(--border-color);
    z-index: 10;
}

[data-theme="dark"] #add-agency-user-modal .modal-actions {
    background: var(--background-light);
}

/* Event Completion Modal - ensure primary button text is visible in all themes */
#event-completion-modal .btn-primary,
#event-completion-modal .btn-primary .btn-text,
#event-completion-modal .btn-primary .btn-loading {
    color: var(--text-white) !important;
}

/* Client Type Card - New Layout */
.client-type-card {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.client-type-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.client-type-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.client-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.client-type-icon i {
    font-size: 1rem;
}

.client-type-info {
    flex: 1;
    min-width: 0;
}

.client-type-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.client-type-info p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.client-type-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.client-type-status.active {
    background: #d1fae5;
    color: #065f46;
}

.client-type-status.archived {
    background: #fef3c7;
    color: #92400e;
}

.client-type-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   BULK INVITE MODAL STYLES
   ============================================ */

.bulk-invite-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: modalFadeIn 0.2s ease;
}

.bulk-invite-modal.show {
    display: flex;
}

.bulk-invite-modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

.bulk-invite-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
}

.bulk-invite-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.close-bulk-invite-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.close-bulk-invite-modal:hover {
    background: #f8f9fa;
    color: #333;
}

.bulk-invite-modal-body {
    padding: 2rem;
    overflow-y: auto;
    max-height: calc(90vh - 100px);
}

.bulk-invite-step {
    display: none;
}

.bulk-invite-step.active {
    display: block;
}

/* File Upload Area */
.file-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-area:hover,
.file-upload-area.drag-over {
    border-color: var(--primary-color);
    background: #f0f4ff;
}

.file-upload-area i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.file-upload-area h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: #333;
}

.file-upload-area p {
    margin: 0 0 1.5rem;
    color: #666;
}

.file-upload-area small {
    display: block;
    margin-top: 1rem;
    color: #999;
    font-size: 0.85rem;
}

#file-upload-progress {
    text-align: center;
    padding: 2rem;
}

#file-upload-progress .progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin: 1rem 0;
}

#file-upload-progress .progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

/* Column Mapping */
.column-mapping-table {
    margin: 1.5rem 0;
}

.mapping-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mapping-table thead {
    background: #f8f9fa;
}

.mapping-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e5e7eb;
}

.mapping-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.mapping-table tr:last-child td {
    border-bottom: none;
}

.mapping-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
}

.mapping-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.sample-data {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

.sample-data-preview {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.sample-data-preview h4 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: #333;
}

.sample-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
}

.sample-table th,
.sample-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.9rem;
}

.sample-table th {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
}

.sample-table tr:last-child td {
    border-bottom: none;
}

/* Role Matching */
.role-matching-section {
    margin: 1.5rem 0;
}

.role-match-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.role-match-section h4 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: #333;
}

.bulk-invite-validation-alert {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.bulk-invite-validation-alert h4 {
    margin: 0 0 0.45rem;
    color: #991b1b;
    font-size: 1rem;
}

.bulk-invite-validation-alert p {
    margin: 0;
    color: #7f1d1d;
    line-height: 1.55;
}

.bulk-invite-validation-alert ul {
    margin: 0.85rem 0 0;
    padding-left: 1.2rem;
}

.bulk-invite-validation-alert li {
    margin: 0.4rem 0;
    color: #7f1d1d;
    line-height: 1.5;
}

.role-matching-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

.role-matching-table th,
.role-matching-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.role-matching-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.role-matching-table tr:last-child td {
    border-bottom: none;
}

.new-roles-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.checkbox-item:hover {
    background: #f1f5f9;
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-item span {
    font-size: 0.95rem;
    color: #333;
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.5rem;
}

.btn-small.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-small.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-small.btn-secondary {
    background: #6b7280;
    color: white;
}

.btn-small.btn-secondary:hover {
    background: #4b5563;
}

/* Processing Indicator */
.processing-indicator {
    text-align: center;
    padding: 3rem 2rem;
}

.processing-indicator i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.processing-indicator h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: #333;
}

.processing-indicator p {
    margin: 0 0 1.5rem;
    color: #666;
}

.processing-indicator .progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.processing-indicator .progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

/* Results */
.bulk-invite-results {
    margin: 1.5rem 0;
}

.results-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.result-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.result-stat i {
    font-size: 2rem;
}

.result-stat.success i {
    color: var(--success-color);
}

.result-stat.skipped i {
    color: var(--warning-color);
}

.result-stat.error i {
    color: var(--error-color);
}

.result-stat div {
    display: flex;
    flex-direction: column;
}

.result-stat strong {
    font-size: 1.5rem;
    color: #333;
}

.result-stat span {
    font-size: 0.85rem;
    color: #666;
}

.results-details {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.results-details h4 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: #333;
}

.results-details ul {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
}

.results-details li {
    margin: 0.5rem 0;
    color: #666;
}

/* Actions */
.bulk-invite-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.required {
    color: var(--error-color);
}

/* Responsive */
@media (max-width: 768px) {
    .bulk-invite-modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .bulk-invite-modal-header {
        padding: 1rem 1.25rem;
    }
    
    .bulk-invite-modal-body {
        padding: 1.25rem;
    }
    
    .results-summary {
        grid-template-columns: 1fr;
    }
    
    .mapping-table,
    .role-matching-table {
        font-size: 0.85rem;
    }
    
    .mapping-table th,
    .mapping-table td,
    .role-matching-table th,
    .role-matching-table td {
        padding: 0.75rem 0.5rem;
    }
}

/* Dark Mode Styles for Bulk Invite Modal */
[data-theme="dark"] .bulk-invite-modal-content {
    background: var(--background-dark);
    color: var(--text-color);
}

[data-theme="dark"] .bulk-invite-modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .bulk-invite-modal-header h2 {
    color: var(--text-color);
}

[data-theme="dark"] .close-bulk-invite-modal {
    color: var(--text-secondary);
}

[data-theme="dark"] .close-bulk-invite-modal:hover {
    background: var(--hover-background);
    color: var(--text-color);
}

[data-theme="dark"] .file-upload-area {
    background: var(--background-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .file-upload-area:hover,
[data-theme="dark"] .file-upload-area.drag-over {
    background: var(--hover-background);
    border-color: var(--primary-color);
}

[data-theme="dark"] .file-upload-area h3 {
    color: var(--text-color);
}

[data-theme="dark"] .file-upload-area p {
    color: var(--text-secondary);
}

[data-theme="dark"] .file-upload-area small {
    color: var(--text-secondary);
}

[data-theme="dark"] .mapping-table {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .mapping-table thead {
    background: var(--background-dark);
}

[data-theme="dark"] .mapping-table th {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .mapping-table td {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .mapping-select {
    background: var(--background-dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .mapping-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

[data-theme="dark"] .mapping-select option {
    background: var(--background-dark);
    color: var(--text-color);
}

[data-theme="dark"] .sample-data {
    color: var(--text-secondary);
}

[data-theme="dark"] .sample-data-preview {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .sample-data-preview h4 {
    color: var(--text-color);
}

[data-theme="dark"] .sample-table {
    background: var(--background-dark);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .sample-table th {
    background: var(--background-secondary);
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sample-table td {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .role-match-section {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .role-match-section h4 {
    color: var(--text-color);
}

[data-theme="dark"] .bulk-invite-validation-alert {
    background: rgba(127, 29, 29, 0.22);
    border-color: rgba(248, 113, 113, 0.45);
}

[data-theme="dark"] .bulk-invite-validation-alert h4 {
    color: #fecaca;
}

[data-theme="dark"] .bulk-invite-validation-alert p,
[data-theme="dark"] .bulk-invite-validation-alert li {
    color: #fca5a5;
}

[data-theme="dark"] .role-matching-table {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .role-matching-table th {
    background: var(--background-dark);
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .role-matching-table td {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .checkbox-item {
    background: var(--background-dark) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .checkbox-item:hover {
    background: var(--hover-background) !important;
}

[data-theme="dark"] .checkbox-item span,
[data-theme="dark"] .checkbox-item label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .processing-indicator h3 {
    color: var(--text-color);
}

[data-theme="dark"] .processing-indicator p {
    color: var(--text-secondary);
}

[data-theme="dark"] .processing-indicator .progress-bar {
    background: var(--background-secondary);
}

[data-theme="dark"] .result-stat {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .result-stat strong {
    color: var(--text-color);
}

[data-theme="dark"] .result-stat span {
    color: var(--text-secondary);
}

[data-theme="dark"] .results-details {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .results-details h4 {
    color: var(--text-color);
}

[data-theme="dark"] .results-details li {
    color: var(--text-secondary);
}

[data-theme="dark"] .invite-reference-card,
[data-theme="dark"] .invite-reference-card-accent,
[data-theme="dark"] .invite-reference-card-neutral {
    background: var(--background-light) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .invite-reference-card-title {
    color: var(--text-color) !important;
}

[data-theme="dark"] .invite-reference-card-copy {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .invite-reference-card-code {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .annual-category-fields {
    background: rgba(124, 45, 18, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.45) !important;
}

[data-theme="dark"] .annual-category-fields label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .annual-category-fields small {
    color: #fdba74 !important;
}

[data-theme="dark"] .annual-category-fields input,
[data-theme="dark"] .annual-category-fields select,
[data-theme="dark"] .annual-category-fields textarea {
    background: var(--background-dark) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #role-annual-families-container {
    background: rgba(124, 45, 18, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

[data-theme="dark"] .role-annual-family-card {
    background: rgba(255, 237, 213, 0.06);
    border-color: rgba(251, 191, 36, 0.28);
    box-shadow: none;
}

[data-theme="dark"] .role-annual-family-card:hover {
    background: rgba(255, 237, 213, 0.1);
    border-color: rgba(251, 146, 60, 0.8);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .role-annual-family-card.is-selected {
    background: rgba(194, 65, 12, 0.24);
    border-color: #fb923c;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .role-annual-family-card:has(input[type="checkbox"]:checked) {
    background: rgba(194, 65, 12, 0.24);
    border-color: #fb923c;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .role-annual-family-name,
[data-theme="dark"] .role-annual-family-cycle-value {
    color: #ffedd5;
}

[data-theme="dark"] .role-annual-family-summary {
    color: #fed7aa;
}

[data-theme="dark"] .role-annual-family-cycle-label {
    color: #fdba74;
}

[data-theme="dark"] .bulk-invite-actions {
    border-top-color: var(--border-color);
}

[data-theme="dark"] #file-upload-progress .progress-bar {
    background: var(--background-secondary);
}

[data-theme="dark"] .client-type-card {
    background: var(--background-light);
}

[data-theme="dark"] .client-type-status.active {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .client-type-status.archived {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* Slide Container - Fix trash icon overflow */
.slide-header {
    overflow: visible !important;
}

.slide-actions {
    flex-shrink: 0 !important;
}

.slide-actions button {
    flex-shrink: 0 !important;
}

/* Client Management Sidebar Styles */
.client-management-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.client-management-sidebar {
    width: 300px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.client-management-sidebar.collapsed {
    width: 50px; /* Thin visible bar instead of 0 */
    padding: 1rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: visible;
    background: var(--background-color);
    box-shadow: var(--shadow-sm);
}

.client-management-sidebar.collapsed .sidebar-content {
    display: none;
}

.client-management-sidebar.collapsed .sidebar-header {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    border: none;
    gap: 0.5rem;
}

.client-management-sidebar.collapsed .sidebar-header h2 {
    display: none;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-content {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.client-management-main {
    flex: 1;
    min-width: 0;
}

/* Sidebar Toggle Button */
#sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

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

.client-management-sidebar.collapsed #sidebar-toggle-btn {
    position: relative;
    width: 100%;
    padding: 0.75rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.client-management-sidebar.collapsed #sidebar-toggle-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.client-management-sidebar.collapsed #sidebar-toggle-icon {
    transform: rotate(0deg); /* Point right when collapsed */
    font-size: 1.2rem;
}

/* Add a small icon/label when collapsed */
.client-management-sidebar.collapsed::before {
    content: '\f02b'; /* Font Awesome tags icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-secondary);
    font-size: 1.2rem;
    pointer-events: none;
}

/* Add a tooltip on hover */
.client-management-sidebar.collapsed #sidebar-toggle-btn::after {
    content: 'Client Types';
    position: absolute;
    left: 100%;
    margin-left: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--background-dark);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.client-management-sidebar.collapsed #sidebar-toggle-btn:hover::after {
    opacity: 1;
}

/* Review Dashboard Styles */
.review-dashboard-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.review-dashboard-toggle-group {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-light);
}

.review-dashboard-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review-dashboard-toggle-title {
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}

.review-dashboard-toggle-subtitle {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.2;
}

.review-category-accordion {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.review-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--background-color);
}

.review-category-header:hover {
    background: var(--background-light);
}

.review-category-header.active {
    border-bottom: 1px solid var(--border-color);
}

.review-category-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.review-category-title h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.review-category-count {
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.review-category-accordion-overdue {
    border-color: rgba(239, 68, 68, 0.28);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.08);
}

.review-category-header-overdue {
    background: rgba(239, 68, 68, 0.06);
}

.review-category-header-overdue:hover {
    background: rgba(239, 68, 68, 0.1);
}

.review-category-title-overdue > i,
.review-category-title-overdue h3 {
    color: var(--error-color);
}

.review-category-count-overdue {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.review-category-accordion-backdated {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.08);
}

.review-category-header-backdated {
    background: rgba(245, 158, 11, 0.08);
}

.review-category-header-backdated:hover {
    background: rgba(245, 158, 11, 0.14);
}

.review-category-title-backdated > i,
.review-category-title-backdated h3 {
    color: #d97706;
}

.review-category-count-backdated {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.review-category-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-category-content {
    padding: 1.5rem;
    display: none;
    max-height: 500px;
    overflow-y: auto;
}

.review-category-content.active {
    display: block;
}

.review-category-content-collection {
    padding: 1rem;
}

.review-category-content-collection > .review-category-accordion:last-child {
    margin-bottom: 0;
}

.review-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background: var(--background-light);
    transition: all 0.2s;
}

.review-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.review-item-info {
    flex: 1;
}

.review-item-client {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.review-item-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.review-item-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.review-item-link:hover {
    color: var(--hover-color);
    text-decoration: underline;
}

.review-dashboard-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.review-dashboard-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Review Dashboard Loading State */
.review-dashboard-loading {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.review-dashboard-loading .loading-spinner {
    margin-bottom: 1rem;
}

.review-dashboard-loading .loading-spinner i {
    font-size: 2.5rem;
    color: var(--primary-color);
    animation: spin 1s linear infinite;
}

.review-dashboard-loading p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Review Dashboard - Client Sub-Accordion Styles */
.review-client-group {
    margin-bottom: 0.75rem;
}

.review-client-header {
    background: var(--background-color);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.review-client-header:hover {
    background: var(--background-light);
}

.review-client-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
}

.review-client-chevron {
    color: var(--text-secondary);
    transition: transform 0.2s;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.review-client-name {
    color: var(--text-color);
    font-size: 1rem;
}

.review-client-task-count {
    background: var(--background-light);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.review-client-tasks-content {
    display: none;
    margin-top: 0.5rem;
}

.review-client-tasks-content.active {
    display: block;
}

.review-task-card {
    background: var(--background-color);
    padding: 1rem;
    margin-bottom: 0.5rem;
    margin-left: 1.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.review-task-card:hover {
    box-shadow: var(--shadow-sm);
}

.review-task-card-unassigned {
    border-color: #ff9800;
    border-left: 4px solid #ff9800;
}

.review-task-card-overdue {
    border-color: var(--error-color);
    border-left: 4px solid var(--error-color);
}

.review-task-card-info {
    flex: 1;
    min-width: 0;
}

.review-task-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.review-task-card-header strong {
    color: var(--text-color);
}

.review-task-card-due {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.review-task-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.review-task-btn-assign {
    padding: 8px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
    background: #ff9800 !important;
    color: white !important;
    border: none !important;
}

/* Dark mode overrides for review client sub-accordions */
[data-theme="dark"] .review-client-header {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .review-client-header:hover {
    background: var(--background-color);
}

[data-theme="dark"] .review-client-task-count {
    background: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .review-task-card {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .review-task-card-header strong {
    color: var(--text-color);
}

[data-theme="dark"] .review-task-card-due {
    color: var(--text-secondary);
}

[data-theme="dark"] .review-task-card-unassigned {
    border-color: rgba(245, 158, 11, 0.5);
    border-left-color: #ff9800;
}

[data-theme="dark"] .review-task-card-overdue {
    border-color: rgba(239, 68, 68, 0.5);
    border-left-color: var(--error-color);
}

/* Mobile responsive for review client sub-accordions */
@media (max-width: 768px) {
    .review-dashboard-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .review-dashboard-toggle-group {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .review-client-header-left {
        gap: 8px;
    }
    
    .review-client-header-left .task-badge {
        padding: 2px 6px;
        font-size: 0.7rem;
        margin-left: 0;
    }
    
    .review-client-header-left .task-badge .badge-text {
        display: none;
    }
    
    .review-client-name {
        font-size: 0.9rem;
    }
    
    .review-client-task-count {
        font-size: 0.8rem;
    }
    
    .review-task-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-left: 0.75rem;
    }
    
    .review-task-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .review-task-card-header {
        gap: 6px;
    }
    
    .review-task-btn-text {
        display: none;
    }
}

[data-theme="dark"] .client-management-sidebar {
    background: var(--background-light);
}

[data-theme="dark"] .review-category-header {
    background: var(--background-light);
}

[data-theme="dark"] .review-category-header:hover {
    background: var(--background-color);
}

[data-theme="dark"] .review-category-accordion-overdue {
    border-color: rgba(248, 113, 113, 0.35);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.15);
}

[data-theme="dark"] .review-category-header-overdue {
    background: rgba(248, 113, 113, 0.12);
}

[data-theme="dark"] .review-category-header-overdue:hover {
    background: rgba(248, 113, 113, 0.18);
}

[data-theme="dark"] .review-dashboard-toggle-group {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .review-category-accordion-backdated {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.14);
}

[data-theme="dark"] .review-category-header-backdated {
    background: rgba(251, 191, 36, 0.12);
}

[data-theme="dark"] .review-category-header-backdated:hover {
    background: rgba(251, 191, 36, 0.18);
}

[data-theme="dark"] .review-category-title-backdated > i,
[data-theme="dark"] .review-category-title-backdated h3 {
    color: #fbbf24;
}

[data-theme="dark"] .review-item {
    background: var(--background-color);
}

/* Responsive: Sidebar becomes overlay on mobile */
/* Client Search Box - Enhanced Styling */
.client-search-box {
    position: relative;
    flex: 1;
    max-width: 600px;
}

.client-search-box i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.1rem;
    z-index: 1;
    pointer-events: none;
}

.client-search-box input {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-color);
    color: var(--text-color);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.client-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    background: var(--background-light);
}

.client-search-box input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.management-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

[data-theme="dark"] .client-search-box input {
    background: var(--background-light);
    border-color: var(--border-color);
}

[data-theme="dark"] .client-search-box input:focus {
    background: var(--background-color);
    border-color: var(--primary-color);
}

@media (max-width: 768px) {
    .client-management-layout {
        position: relative;
    }
    
    .client-search-box {
        max-width: 100%;
        width: 100%;
    }
    
    .management-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .management-controls > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .client-management-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1000;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    .client-management-sidebar.collapsed {
        transform: translateX(-100%);
        width: 300px;
    }

    .client-management-main {
        width: 100%;
    }

    /* Overlay when sidebar is open on mobile */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }

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

@media (max-width: 768px) {
    .slide-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .slide-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .slide-actions {
        width: 100% !important;
        justify-content: flex-end !important;
        margin-top: 0.5rem !important;
    }
}